fix: remove preview_thumb attributes from bokeh.yaml files

- Clean up unnecessary preview_thumb entries
- Ensure consistency across multiple plot configurations

Author: MarkusNeusinger

alembic/versions/b833d85c09ed_remove_preview_thumb_column.py

@@ -0,0 +1,29 @@
+"""remove_preview_thumb_column
+
+Revision ID: b833d85c09ed
+Revises: a2f4b8c91d23
+Create Date: 2026-03-31 23:07:22.910889
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision: str = 'b833d85c09ed'
+down_revision: Union[str, None] = 'a2f4b8c91d23'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    op.drop_column("impls", "preview_thumb")
+
+
+def downgrade() -> None:
+    op.add_column(
+        "impls",
+        sa.Column("preview_thumb", sa.String(), nullable=True),
+    )

app/src/components/SpecDetailView.tsx

@@ -15,7 +15,7 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import CheckIcon from '@mui/icons-material/Check';
 
 import type { Implementation } from '../types';
-import { buildSrcSet } from '../utils/responsiveImage';
+import { buildDetailSrcSet, DETAIL_SIZES } from '../utils/responsiveImage';
 
 interface SpecDetailViewProps {
   specId: string;
@@ -92,13 +92,13 @@ export function SpecDetailView({
           >
             <source
               type="image/webp"
-              srcSet={buildSrcSet(currentImpl.preview_url, 'webp')}
-              sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              srcSet={buildDetailSrcSet(currentImpl.preview_url, 'webp')}
+              sizes={DETAIL_SIZES}
             />
             <source
               type="image/png"
-              srcSet={buildSrcSet(currentImpl.preview_url, 'png')}
-              sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              srcSet={buildDetailSrcSet(currentImpl.preview_url, 'png')}
+              sizes={DETAIL_SIZES}
             />
             <Box
               component="img"

app/src/components/SpecOverview.tsx

@@ -18,7 +18,7 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import CheckIcon from '@mui/icons-material/Check';
 
 import type { Implementation } from '../types';
-import { buildSrcSet } from '../utils/responsiveImage';
+import { buildSrcSet, OVERVIEW_SIZES } from '../utils/responsiveImage';
 
 interface LibraryMeta {
   id: string;
@@ -147,12 +147,12 @@ function ImplementationCard({
             <source
               type="image/webp"
               srcSet={buildSrcSet(impl.preview_url, 'webp')}
-              sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              sizes={OVERVIEW_SIZES}
             />
             <source
               type="image/png"
               srcSet={buildSrcSet(impl.preview_url, 'png')}
-              sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              sizes={OVERVIEW_SIZES}
             />
             <Box
               component="img"

app/src/pages/CatalogPage.tsx

@@ -8,7 +8,7 @@ import Fab from '@mui/material/Fab';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 
 import { API_URL, GITHUB_URL } from '../constants';
-import { buildSrcSet, getFallbackSrc } from '../utils/responsiveImage';
+import { buildSrcSet, getFallbackSrc, CATALOG_SIZES } from '../utils/responsiveImage';
 import { useAnalytics } from '../hooks';
 import { useAppData, useHomeState } from '../hooks';
 import { Breadcrumb, Footer } from '../components';
@@ -253,12 +253,12 @@ export function CatalogPage() {
                       <source
                         type="image/webp"
                         srcSet={buildSrcSet(currentImage.url, 'webp')}
-                        sizes="(max-width: 600px) 50vw, 25vw"
+                        sizes={CATALOG_SIZES}
                       />
                       <source
                         type="image/png"
                         srcSet={buildSrcSet(currentImage.url, 'png')}
-                        sizes="(max-width: 600px) 50vw, 25vw"
+                        sizes={CATALOG_SIZES}
                       />
                       <Box
                         component="img"

app/src/utils/responsiveImage.ts

@@ -3,6 +3,9 @@
  *
  * All variant URLs are derived by convention from the base plot.png URL:
  *   plot.png -> plot.webp, plot_1200.png, plot_1200.webp, plot_800.png, etc.
+ *
+ * Breakpoints match MUI defaults: sm=600, md=900, lg=1200, xl=1536.
+ * Principle: always prefer slightly too large over too small (never pixelated).
  */
 
 import type { ImageSize } from '../constants';
@@ -29,18 +32,51 @@ export function buildSrcSet(url: string, format: 'webp' | 'png'): string {
 }
 
 /**
- * Get the sizes attribute based on the view mode.
+ * Build a srcSet for the detail view that includes the full-resolution original.
+ * Adds plot.webp/plot.png (~5000px) as the largest option so the detail view
+ * is never pixelated, even on high-DPR displays.
+ */
+export function buildDetailSrcSet(url: string, format: 'webp' | 'png'): string {
+  const base = getBasePath(url);
+  const entries = RESPONSIVE_SIZES.map((w) => `${base}_${w}.${format} ${w}w`);
+  entries.push(`${base}.${format} 3840w`);
+  return entries.join(', ');
+}
+
+/**
+ * Get the sizes attribute for the homepage image grid.
+ * Matches MUI Grid columns: normal = 1→1→2→2→3, compact = 2→2→4→4→6.
  *
- * Normal mode: fewer, larger cards.
- * Compact mode: more, smaller cards (roughly half the width).
+ * MUI breakpoints: xs=0, sm=600, md=900, lg=1200, xl=1536.
  */
 export function getResponsiveSizes(imageSize: ImageSize): string {
   if (imageSize === 'compact') {
-    return '(max-width: 600px) 50vw, (max-width: 1200px) 25vw, 17vw';
+    // xs/sm: 2 cols (50vw), md/lg: 4 cols (25vw), xl: 6 cols (17vw)
+    return '(max-width: 899px) 50vw, (max-width: 1535px) 25vw, 17vw';
   }
-  return '(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw';
+  // xs/sm: 1 col (100vw), md/lg: 2 cols (50vw), xl: 3 cols (33vw)
+  return '(max-width: 899px) 100vw, (max-width: 1535px) 50vw, 33vw';
 }
 
+/**
+ * Sizes for the detail view (single large image).
+ * Container maxWidth: xs=100%, md=1200, lg=1400, xl=1600.
+ */
+export const DETAIL_SIZES = '(max-width: 1199px) 100vw, (max-width: 1535px) 1400px, 1600px';
+
+/**
+ * Sizes for the spec overview grid (always 3 columns).
+ * Container maxWidth: xs=100%, md=1200, lg=1400, xl=1600.
+ * Each card = container / 3.
+ */
+export const OVERVIEW_SIZES = '(max-width: 1199px) 33vw, (max-width: 1535px) 467px, 534px';
+
+/**
+ * Sizes for the catalog page image thumbnails.
+ * Mobile (xs): full width. Desktop (sm+): fixed 280px.
+ */
+export const CATALOG_SIZES = '(max-width: 599px) 100vw, 280px';
+
 /**
  * Get the fallback image URL (plot_800.png - good middle ground).
  */

core/database/models.py

@@ -92,7 +92,6 @@ class Impl(Base):
 
     # Previews (filled by workflow, synced from metadata YAML)
     preview_url: Mapped[Optional[str]] = mapped_column(String, nullable=True)  # Full PNG
-    preview_thumb: Mapped[Optional[str]] = mapped_column(String, nullable=True)  # Thumbnail PNG
     preview_html: Mapped[Optional[str]] = mapped_column(String, nullable=True)  # Interactive HTML
 
     # Creation versions (filled by workflow)

plots/acf-pacf/metadata/altair.yaml

@@ -8,7 +8,6 @@ issue: 4663
 python_version: 3.14.3
 library_version: 6.0.0
 preview_url: https://storage.googleapis.com/pyplots-images/plots/acf-pacf/altair/plot.png
-preview_thumb: https://storage.googleapis.com/pyplots-images/plots/acf-pacf/altair/plot_thumb.png
 preview_html: https://storage.googleapis.com/pyplots-images/plots/acf-pacf/altair/plot.html
 quality_score: 92
 review:

plots/acf-pacf/metadata/bokeh.yaml

@@ -8,7 +8,6 @@ issue: 4663
 python_version: 3.14.3
 library_version: 3.9.0
 preview_url: https://storage.googleapis.com/pyplots-images/plots/acf-pacf/bokeh/plot.png
-preview_thumb: https://storage.googleapis.com/pyplots-images/plots/acf-pacf/bokeh/plot_thumb.png
 preview_html: https://storage.googleapis.com/pyplots-images/plots/acf-pacf/bokeh/plot.html
 quality_score: 92
 review:

plots/acf-pacf/metadata/highcharts.yaml

@@ -8,7 +8,6 @@ issue: 4663
 python_version: 3.14.3
 library_version: unknown
 preview_url: https://storage.googleapis.com/pyplots-images/plots/acf-pacf/highcharts/plot.png
-preview_thumb: https://storage.googleapis.com/pyplots-images/plots/acf-pacf/highcharts/plot_thumb.png
 preview_html: https://storage.googleapis.com/pyplots-images/plots/acf-pacf/highcharts/plot.html
 quality_score: 87
 review:

plots/acf-pacf/metadata/letsplot.yaml

@@ -8,7 +8,6 @@ issue: 4663
 python_version: 3.14.3
 library_version: 4.9.0
 preview_url: https://storage.googleapis.com/pyplots-images/plots/acf-pacf/letsplot/plot.png
-preview_thumb: https://storage.googleapis.com/pyplots-images/plots/acf-pacf/letsplot/plot_thumb.png
 preview_html: https://storage.googleapis.com/pyplots-images/plots/acf-pacf/letsplot/plot.html
 quality_score: 90
 review: