Fix gallery viewer zoom and labels

aivuk · aivuk · commit 0b688a5a66e3 · 2026-04-26T22:51:14.000+02:00
diff --git a/bookviz/gallery.py b/bookviz/gallery.py
@@ -6,7 +6,7 @@
 import shutil
 from pathlib import Path
 
-from .metrics import ALL_METRICS
+from .metrics import ALL_METRICS, TOKEN_METRICS
 from .pipeline import RenderOptions, render_book, subtitle
 from .text import slugify
 
@@ -35,7 +35,9 @@ def generate_gallery(
         for metric in metrics:
             if metric not in ALL_METRICS:
                 raise ValueError(f"Unknown metric: {metric}")
-            options = RenderOptions(metric=metric, color=color, window_size=window_size, window_step=window_step)
+            metric_window_size = None if metric in TOKEN_METRICS else window_size
+            metric_window_step = None if metric in TOKEN_METRICS else window_step
+            options = RenderOptions(metric=metric, color=color, window_size=metric_window_size, window_step=metric_window_step)
             slug = f"{slugify(book.stem)}-{slugify(metric)}"
             png_path = assets_dir / f"{slug}.png"
             result = render_book(book, png_path, options, html=True)
@@ -98,4 +100,3 @@ def index_html(pages: list[dict[str, str]]) -> str:
 </body>
 </html>
 """
-
diff --git a/bookviz/html_viewer.py b/bookviz/html_viewer.py
@@ -61,8 +61,9 @@ def viewer_html(image: Image.Image, *, title: str, subtitle: str, labels: list[s
     #stage.dragging {{ cursor: grabbing; }}
     #wrapper {{ position: absolute; transform-origin: 0 0; }}
     img {{ display: block; image-rendering: pixelated; image-rendering: crisp-edges; }}
-    #tip {{ position: fixed; display: none; pointer-events: none; z-index: 3; max-width: 320px; padding: 8px 10px; background: rgba(0,0,0,.9); border: 1px solid #555; border-radius: 4px; font-size: 12px; }}
+    #tip {{ position: fixed; display: none; pointer-events: none; z-index: 3; max-width: 360px; padding: 8px 10px; background: rgba(0,0,0,.9); border: 1px solid #555; border-radius: 4px; font-size: 12px; }}
     #tip strong {{ display: block; margin-bottom: 4px; font-size: 14px; }}
+    #tip span {{ overflow-wrap: anywhere; }}
   </style>
 </head>
 <body>
@@ -94,7 +95,12 @@ def viewer_html(image: Image.Image, *, title: str, subtitle: str, labels: list[s
     let scale = 1, panX = 0, panY = 0, dragging = false, startX = 0, startY = 0, startPanX = 0, startPanY = 0;
     function update() {{ wrapper.style.transform = `translate(${{panX}}px, ${{panY}}px) scale(${{scale}})`; zoom.textContent = Math.round(scale * 100) + "%"; }}
     function center() {{ const r = stage.getBoundingClientRect(); panX = (r.width - image.width * scale) / 2; panY = (r.height - image.height * scale) / 2; update(); }}
-    function resetView() {{ scale = 1; center(); }}
+    function initialScale() {{
+      const r = stage.getBoundingClientRect();
+      const fit = Math.min(r.width / image.width, r.height / image.height) * 0.88;
+      return Math.max(1, Math.min(64, fit));
+    }}
+    function resetView() {{ scale = initialScale(); center(); }}
     function zoomBy(factor) {{ scale = Math.max(.1, Math.min(200, scale * factor)); center(); }}
     stage.addEventListener("wheel", (event) => {{
       event.preventDefault();
@@ -118,9 +124,8 @@ def viewer_html(image: Image.Image, *, title: str, subtitle: str, labels: list[s
         tip.style.left = event.clientX + 14 + "px"; tip.style.top = event.clientY + 14 + "px"; tip.style.display = "block";
       }} else {{ tip.style.display = "none"; }}
     }});
-    addEventListener("load", center); addEventListener("resize", center);
+    addEventListener("load", resetView); addEventListener("resize", resetView);
   </script>
 </body>
 </html>
 """
-
diff --git a/bookviz/metrics.py b/bookviz/metrics.py
@@ -129,7 +129,7 @@ def metric_values(tokens: list[str], metric: str, *, window_size: int | None = N
 
 def window_metric_values(tokens: list[str], metric: str, *, window_size: int, window_step: int | None = None) -> MetricResult:
     chunks = windows(tokens, window_size, window_step)
-    labels = [f"tokens {index * (window_step or window_size)}-{index * (window_step or window_size) + len(chunk) - 1}" for index, chunk in enumerate(chunks)]
+    labels = [window_label(chunk, index, window_step or window_size) for index, chunk in enumerate(chunks)]
     if metric in WINDOW_METRICS:
         return [WINDOW_METRICS[metric](chunk) for chunk in chunks], labels
     if metric in TOKEN_METRICS:
@@ -141,11 +141,20 @@ def window_metric_values(tokens: list[str], metric: str, *, window_size: int, wi
     raise ValueError(f"Unknown metric: {metric}")
 
 
+def window_label(chunk: list[str], index: int, step: int) -> str:
+    start = index * step
+    end = start + len(chunk) - 1
+    words = [token for token in chunk if not is_punctuation(token)]
+    excerpt = " ".join(words[:14])
+    if len(words) > 14:
+        excerpt += " ..."
+    return f"tokens {start}-{end}: {excerpt}" if excerpt else f"tokens {start}-{end}"
+
+
 def normalize(values: list[float], *, domain: tuple[float, float] | None = None) -> list[float]:
     if not values:
         return []
     low, high = domain if domain else (min(values), max(values))
     if high == low:
         return [0.0 for _value in values]
     return [(value - low) / (high - low) for value in values]
-
diff --git a/tests/test_gallery.py b/tests/test_gallery.py
@@ -0,0 +1,24 @@
+from pathlib import Path
+
+from bookviz.gallery import generate_gallery
+
+
+def test_gallery_keeps_token_metrics_at_word_level(tmp_path: Path):
+    books = tmp_path / "books"
+    site = tmp_path / "site"
+    books.mkdir()
+    (books / "sample.txt").write_text("one two one three", encoding="utf-8")
+
+    generate_gallery(
+        books,
+        site,
+        metrics=["word-freq", "lexical-diversity"],
+        color="red-blue",
+        window_size=2,
+        window_step=None,
+    )
+
+    word_freq_html = (site / "sample-word-freq.html").read_text(encoding="utf-8")
+    lexical_html = (site / "sample-lexical-diversity.html").read_text(encoding="utf-8")
+    assert '"one"' in word_freq_html
+    assert "tokens 0-1: one two" in lexical_html
diff --git a/tests/test_metrics.py b/tests/test_metrics.py
@@ -22,8 +22,8 @@ def test_window_metric_values():
     values, labels = metric_values(["a", "b", "a", ".", "c"], "lexical-diversity", window_size=4)
     assert values == [2 / 3, 1.0]
     assert len(labels) == 2
+    assert labels[0] == "tokens 0-3: a b a"
 
 
 def test_normalize_with_shared_domain():
     assert normalize([10, 15, 20], domain=(10, 20)) == [0.0, 0.5, 1.0]
-
