fix(app): respect plot aspect ratio (16:9) when drawing map nodes

Plots are typically rendered with figsize=(16, 9), but the canvas
draw + hitbox code was forcing them into a square 22×22 slot, which
squashed everything horizontally.

Read the intrinsic aspect ratio from any loaded thumbnail variant
(naturalWidth/naturalHeight) and fit the draw rect / hit area into a
NODE_SIZE box without distortion — longer side stays at NODE_SIZE so
nodes share a consistent layout scale. Falls back to a square when
nothing is loaded yet (matches the placeholder).

New helpers: nodeAspectRatio, fitToBox (both pure, unit-tested).

Refs #5646

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: MarkusNeusinger

app/src/pages/MapPage.helpers.test.ts

@@ -9,6 +9,7 @@ import {
   buildVariantUrl,
   pickTier,
   pickBestLoadedTier,
+  fitToBox,
   type SpecMapItem,
 } from './MapPage.helpers';
 
@@ -212,6 +213,31 @@ describe('pickTier', () => {
 });
 
 
+describe('fitToBox', () => {
+  it('returns a square for 1:1 aspect ratio', () => {
+    expect(fitToBox(22, 1)).toEqual({ w: 22, h: 22 });
+  });
+
+  it('keeps width = box and shrinks height for 16:9', () => {
+    const r = fitToBox(22, 16 / 9);
+    expect(r.w).toBe(22);
+    expect(r.h).toBeCloseTo(22 * 9 / 16);
+  });
+
+  it('keeps height = box and shrinks width for portrait (9:16)', () => {
+    const r = fitToBox(22, 9 / 16);
+    expect(r.h).toBe(22);
+    expect(r.w).toBeCloseTo(22 * 9 / 16);
+  });
+
+  it('falls back to a square for invalid aspect ratios', () => {
+    expect(fitToBox(22, 0)).toEqual({ w: 22, h: 22 });
+    expect(fitToBox(22, NaN)).toEqual({ w: 22, h: 22 });
+    expect(fitToBox(22, Infinity)).toEqual({ w: 22, h: 22 });
+  });
+});
+
+
 describe('pickBestLoadedTier', () => {
   function img(): HTMLImageElement {
     return document.createElement('img');

app/src/pages/MapPage.helpers.ts

@@ -204,6 +204,33 @@ export function pickBestLoadedTier(
   return null;
 }
 
+/**
+ * Read a node's intrinsic aspect ratio (width/height) from any already-loaded
+ * thumbnail variant. Defaults to 1 when nothing is loaded yet (and the page
+ * draws a square fallback rect anyway). Most plots are 16:9 (figsize=(16,9)),
+ * so the typical return value is ~1.78.
+ */
+export function nodeAspectRatio(node: MapNode): number {
+  for (const t of RESOLUTION_TIERS) {
+    const img = node.imgs.get(t);
+    if (img && img.naturalWidth > 0 && img.naturalHeight > 0) {
+      return img.naturalWidth / img.naturalHeight;
+    }
+  }
+  return 1;
+}
+
+/**
+ * Given a target box size and an aspect ratio, return the (width, height) that
+ * fits inside the box without distortion (longer side = boxSize). Used for both
+ * canvas drawing and hit-area painting so they always agree.
+ */
+export function fitToBox(boxSize: number, aspectRatio: number): { w: number; h: number } {
+  if (!isFinite(aspectRatio) || aspectRatio <= 0) return { w: boxSize, h: boxSize };
+  if (aspectRatio >= 1) return { w: boxSize, h: boxSize / aspectRatio };
+  return { w: boxSize * aspectRatio, h: boxSize };
+}
+
 /**
  * Lazily fetch the requested tier for a node and call `onLoad` when it lands.
  * Idempotent — safe to call repeatedly from `nodeCanvasObject` on every paint.

app/src/pages/MapPage.test.tsx

@@ -221,7 +221,7 @@ describe('MapPage', () => {
 
     const paintHitbox = lastFgProps.current!.nodePointerAreaPaint as (n: unknown, c: string, ctx: unknown) => void;
     const ctx = makeCtxStub();
-    paintHitbox({ id: 'scatter-basic', x: 80, y: 60 }, '#ff00ff', ctx);
+    paintHitbox({ id: 'scatter-basic', x: 80, y: 60, imgs: new Map(), pendingTiers: new Set() }, '#ff00ff', ctx);
 
     expect(ctx.fillStyle).toBe('#ff00ff');
     expect(ctx.fillRect).toHaveBeenCalled();

app/src/pages/MapPage.tsx

@@ -15,7 +15,9 @@ import {
   buildKNNLinks,
   computeIDF,
   ensureNodeTier,
+  fitToBox,
   flattenTags,
+  nodeAspectRatio,
   pickBestLoadedTier,
   pickTier,
   preloadImages,
@@ -233,8 +235,6 @@ export function MapPage() {
               const isNeighbor = !isHover && hoverId != null && neighbors.get(hoverId)?.has(n.id);
               const dim = hoverId != null && !isHover && !isNeighbor;
               const baseSize = NODE_SIZE * (isHover ? HOVER_SCALE : isNeighbor ? 1.15 : 1);
-              const x = n.x - baseSize / 2;
-              const y = n.y - baseSize / 2;
 
               // Pick the smallest variant whose source resolution comfortably
               // covers the on-screen size, then lazy-load it if not yet present.
@@ -248,24 +248,32 @@ export function MapPage() {
               }
               const img = n.imgs ? pickBestLoadedTier(n.imgs, desired) : null;
 
+              // Match draw size to the source aspect ratio (most plots are 16:9
+              // from figsize=(16,9)) — keep the longer side at baseSize so nodes
+              // share a consistent bounding-box scale.
+              const { w, h } = fitToBox(baseSize, nodeAspectRatio(n));
+              const x = n.x - w / 2;
+              const y = n.y - h / 2;
+
               ctx.save();
               if (dim) ctx.globalAlpha = 0.18;
               if (img) {
-                ctx.drawImage(img, x, y, baseSize, baseSize);
+                ctx.drawImage(img, x, y, w, h);
               } else {
                 ctx.fillStyle = isDark ? '#242420' : '#FFFDF6';
-                ctx.fillRect(x, y, baseSize, baseSize);
+                ctx.fillRect(x, y, w, h);
               }
               ctx.lineWidth = isHover ? 2 : 1;
               ctx.strokeStyle = strokeFor(isDark, !!isHover);
-              ctx.strokeRect(x, y, baseSize, baseSize);
+              ctx.strokeRect(x, y, w, h);
               ctx.restore();
             }}
             nodePointerAreaPaint={(node, color, ctx) => {
               const n = node as WithCoords;
               if (n.x == null || n.y == null) return;
+              const { w, h } = fitToBox(NODE_SIZE, nodeAspectRatio(n));
               ctx.fillStyle = color;
-              ctx.fillRect(n.x - NODE_SIZE / 2, n.y - NODE_SIZE / 2, NODE_SIZE, NODE_SIZE);
+              ctx.fillRect(n.x - w / 2, n.y - h / 2, w, h);
             }}
             linkColor={(l: MapLink) => {
               const involved = hoverId && (l.source === hoverId || l.target === hoverId);