Deploy Reverse Etymology Atlas

frontend/src/App.tsx

@@ -184,6 +184,7 @@ export default function App() {
   const viewRef = useRef<CanvasView | null>(null);
   const mapRef = useRef<HTMLDivElement>(null);
   const mapObj = useRef<L.Map | null>(null);
+  const cameraKeyRef = useRef<string>("");
   const dq = useDebounced(q, 80);
 
   useEffect(() => {
@@ -269,18 +270,42 @@ export default function App() {
   }, [query, view, depth]);
 
   useEffect(() => {
-    if (!canvasRef.current) return;
-    if (!viewRef.current) viewRef.current = new CanvasView(canvasRef.current);
+    const canvas = canvasRef.current;
+    if (!canvas || (view !== "tree" && view !== "radial")) {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+      return;
+    }
+    if (viewRef.current?.canvas !== canvas) {
+      viewRef.current?.destroy();
+      viewRef.current = new CanvasView(canvas);
+    }
     const cv = viewRef.current;
     cv.onSelect = (n) => {
       setSelected(n);
       setMobilePanel("info");
     };
-    cv.onExpand = (key) => setExpand((e) => [...e, key]);
-    if (tree?.nodes && (view === "tree" || view === "radial")) {
-      cv.setData(tree.nodes, view === "radial" ? "radial" : "tree", colorBy, true);
+    cv.onExpand = (key) => setExpand((e) => (e.includes(key) ? e : [...e, key]));
+    if (tree?.nodes) {
+      const camKey = `${term}|${lang}|${view}`;
+      const resetCamera = cameraKeyRef.current !== camKey;
+      cameraKeyRef.current = camKey;
+      cv.setData(tree.nodes, view === "radial" ? "radial" : "tree", colorBy, resetCamera);
     }
-  }, [tree, view, colorBy]);
+  }, [tree, view, colorBy, term, lang]);
+
+  useEffect(() => {
+    viewRef.current?.setSelected(selected ? String(selected.id) : null);
+  }, [selected]);
+
+  useEffect(() => {
+    return () => {
+      viewRef.current?.destroy();
+      viewRef.current = null;
+    };
+  }, []);
 
   useEffect(() => {
     if (selected?.kind !== "word") {
@@ -372,7 +397,7 @@ export default function App() {
           {hits.length > 0 && (
             <div className="suggest">
               {hits.map((h, i) => (
-                <button key={`${h.term}-${h.lang}-${i}`} className={i === activeHit ? "active" : ""} onMouseDown={() => pick(h)}>
+                <button key={`${h.term}-${h.lang}-${i}`} className={i === activeHit ? "active" : ""} type="button" onClick={() => pick(h)}>
                   <span className="term">{h.term}</span>
                   <span>{h.lang_display || h.lang}</span>
                   <span className="meta">{h.child_count} derived</span>
@@ -381,7 +406,7 @@ export default function App() {
             </div>
           )}
         </div>
-        <button className="ghost" onClick={() => setMobilePanel(mobilePanel === "filters" ? "none" : "filters")}>
+        <button type="button" className="ghost filters-btn" onClick={() => setMobilePanel(mobilePanel === "filters" ? "none" : "filters")}>
           Filters{chipCount ? ` ${chipCount}` : ""}
         </button>
       </header>
@@ -426,17 +451,28 @@ export default function App() {
         )}
       </div>
       <div className="workspace">
+        {mobilePanel !== "none" && (
+          <button type="button" className="sheet-backdrop" aria-label="Close panel" onClick={() => setMobilePanel("none")} />
+        )}
         <aside className={`panel ${mobilePanel === "filters" ? "open-sheet" : ""}`}>
+          <div className="sheet-grab">
+            <span />
+            <strong>Filters</strong>
+            <button type="button" className="ghost sheet-close" onClick={() => setMobilePanel("none")}>
+              Close
+            </button>
+          </div>
+          <div className="sheet-body">
           {meta && (
             <>
               <div className="tabs">
-                <button className={filterTab === "graph" ? "on" : ""} onClick={() => setFilterTab("graph")}>
+                <button type="button" className={filterTab === "graph" ? "on" : ""} onClick={() => setFilterTab("graph")}>
                   Graph
                 </button>
-                <button className={filterTab === "leaf" ? "on" : ""} onClick={() => setFilterTab("leaf")}>
+                <button type="button" className={filterTab === "leaf" ? "on" : ""} onClick={() => setFilterTab("leaf")}>
                   Leaves
                 </button>
-                <button className={filterTab === "path" ? "on" : ""} onClick={() => setFilterTab("path")}>
+                <button type="button" className={filterTab === "path" ? "on" : ""} onClick={() => setFilterTab("path")}>
                   Path
                 </button>
               </div>
@@ -468,7 +504,7 @@ export default function App() {
               {filterTab === "leaf" && (
                 <div>
                   <p style={{ color: "var(--muted)", fontSize: 13 }}>
-                    Only terminal derived words must match. Ancestors stay visible if they lead to a kept leaf.
+                    Matching words in the filtered language stay visible even when they have further descendants.
                   </p>
                   <PredicateEditor meta={meta} value={leaf} onChange={setLeaf} />
                 </div>
@@ -528,6 +564,7 @@ export default function App() {
               )}
             </>
           )}
+          </div>
         </aside>
         <main className="stage">
           {!term && meta && (
@@ -541,7 +578,7 @@ export default function App() {
               ))}
             </div>
           )}
-          {(view === "tree" || view === "radial") && <canvas ref={canvasRef} />}
+          {(view === "tree" || view === "radial") && <canvas ref={canvasRef} className="viz-canvas" />}
           {view === "map" && <div className="map" ref={mapRef} />}
           {view === "table" && (
             <div className="table-wrap">
@@ -558,7 +595,13 @@ export default function App() {
                 </thead>
                 <tbody>
                   {words.map((n) => (
-                    <tr key={String(n.id)} onClick={() => setSelected(n)}>
+                    <tr
+                      key={String(n.id)}
+                      onClick={() => {
+                        setSelected(n);
+                        setMobilePanel("info");
+                      }}
+                    >
                       <td>{n.term}</td>
                       <td>{n.lang_display || n.lang}</td>
                       <td>{n.family_name}</td>
@@ -594,6 +637,14 @@ export default function App() {
           </div>
         </main>
         <aside className={`panel right inspector ${mobilePanel === "info" ? "open-sheet" : ""}`}>
+          <div className="sheet-grab">
+            <span />
+            <strong>Inspector</strong>
+            <button type="button" className="ghost sheet-close" onClick={() => setMobilePanel("none")}>
+              Close
+            </button>
+          </div>
+          <div className="sheet-body">
           {selected ? (
             <>
               <h2>{selected.term}</h2>
@@ -661,6 +712,7 @@ export default function App() {
               Data: {meta.citation.author}, Etymology Atlas ({meta.citation.license}). {meta.nodes.toLocaleString()} words, {meta.edges.toLocaleString()} relations.
             </p>
           )}
+          </div>
         </aside>
       </div>
     </div>

frontend/src/styles.css

@@ -18,16 +18,24 @@
 }
 
 * { box-sizing: border-box; }
-html, body, #root { height: 100%; margin: 0; }
+html, body, #root {
+  height: 100%;
+  height: 100dvh;
+  margin: 0;
+  overflow: hidden;
+}
 body {
   background: var(--ink);
   color: var(--parchment);
   font-family: var(--font);
   font-size: 15px;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
 }
 
 button, input, select, textarea { font: inherit; color: inherit; }
 button { cursor: pointer; }
+button, a, input, select, label { touch-action: manipulation; }
 
 .app {
   height: 100%;
@@ -140,18 +148,23 @@ button { cursor: pointer; }
   display: grid;
   grid-template-columns: 320px 1fr 320px;
   min-height: 0;
+  position: relative;
+  overflow: hidden;
 }
 .panel {
   background: rgba(24, 32, 40, 0.72);
   border-right: 1px solid var(--line);
   overflow: auto;
   padding: 14px;
+  -webkit-overflow-scrolling: touch;
 }
 .panel.right { border-right: 0; border-left: 1px solid var(--line); }
 .stage {
   position: relative;
   min-width: 0;
   min-height: 0;
+  overflow: hidden;
+  overscroll-behavior: none;
 }
 .stage canvas, .stage .map, .stage .table-wrap, .stage .stats {
   position: absolute;
@@ -159,6 +172,19 @@ button { cursor: pointer; }
   width: 100%;
   height: 100%;
 }
+.viz-canvas {
+  touch-action: none;
+  display: block;
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.sheet-grab {
+  display: none;
+}
+.sheet-backdrop {
+  display: none;
+}
 
 .tabs { display: flex; gap: 6px; margin-bottom: 12px; }
 .tabs button {
@@ -271,19 +297,96 @@ tr:hover td { background: var(--ink-3); cursor: pointer; }
 @media (max-width: 840px) {
   .workspace { grid-template-columns: 1fr; }
   .panel { display: none; }
-  .panel.open-sheet {
+  .sheet-backdrop {
     display: block;
     position: absolute;
-    left: 0; right: 0; bottom: 0;
+    inset: 0;
+    z-index: 25;
+    border: 0;
+    background: rgba(0, 0, 0, 0.45);
+    padding: 0;
+  }
+  .panel.open-sheet {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
     z-index: 30;
-    height: min(78vh, 640px);
+    height: min(78dvh, 640px);
+    max-height: calc(100% - 12px);
     border-right: 0;
+    border-left: 0;
     border-top: 1px solid var(--line);
     border-radius: 18px 18px 0 0;
     background: var(--ink-2);
+    padding: 0 14px 18px;
+    overflow: hidden;
+    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
+  }
+  .sheet-body {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    flex: 1;
+    min-height: 0;
+  }
+  .sheet-grab {
+    display: grid;
+    grid-template-columns: 64px 1fr auto;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 0 8px;
+    position: sticky;
+    top: 0;
+    background: var(--ink-2);
+    z-index: 1;
+  }
+  .sheet-grab > span {
+    width: 42px;
+    height: 4px;
+    border-radius: 99px;
+    background: rgba(244, 239, 228, 0.28);
+    justify-self: start;
+    margin-left: 10px;
+  }
+  .sheet-grab strong {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .sheet-close {
+    padding: 8px 12px;
+    min-height: 40px;
   }
   .brand { min-width: 0; }
   .brand span { display: none; }
-  .topbar { padding: 10px; }
+  .brand strong { font-size: 18px; }
+  .topbar { padding: 10px; gap: 8px; }
+  .toolbar {
+    padding: 8px 10px;
+    gap: 6px;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+  .toolbar::-webkit-scrollbar { display: none; }
+  .seg { flex: 0 0 auto; }
+  .seg button { padding: 8px 10px; min-height: 36px; }
+  .filters-btn { flex: 0 0 auto; min-height: 40px; }
   .legend { display: none; }
+  .status-line {
+    left: 12px;
+    right: 12px;
+    bottom: 10px;
+    text-align: center;
+  }
+  .search-wrap input {
+    padding: 12px 16px 12px 40px;
+    font-size: 16px; /* avoid iOS zoom-on-focus */
+  }
+  .suggest { max-height: min(50dvh, 320px); }
+  .suggest button { padding: 12px 14px; min-height: 44px; }
+  .checklist { max-height: 180px; }
+  .checklist label { padding: 10px 8px; min-height: 40px; }
 }

frontend/src/viz.ts

@@ -17,14 +17,15 @@ export interface Camera {
   k: number;
 }
 
+const TAP_PX = 10;
+const HIT_SCREEN_PX = 28;
+
 export function layoutGraph(
   nodes: GraphNode[],
   mode: "tree" | "radial",
   colorBy: string
 ): { items: LaidOut[]; edges: { x1: number; y1: number; x2: number; y2: number; color: string }[]; width: number; height: number } {
   if (!nodes.length) return { items: [], edges: [], width: 1, height: 1 };
-  const byId = new Map(nodes.map((n) => [String(n.id), n]));
-  const maxDepth = Math.max(...nodes.map((n) => n.depth || 0), 1);
   let root;
   try {
     root = stratify<GraphNode>()
@@ -34,6 +35,8 @@ export function layoutGraph(
     return { items: [], edges: [], width: 1, height: 1 };
   }
 
+  const maxDepth = Math.max(...nodes.map((n) => n.depth || 0), 1);
+
   if (mode === "radial") {
     const layout = d3tree<GraphNode>().size([2 * Math.PI, 280 + maxDepth * 70]);
     layout(root);
@@ -113,28 +116,48 @@ export class CanvasView {
   laid: ReturnType<typeof layoutGraph> | null = null;
   hoverId: string | null = null;
   selectedId: string | null = null;
-  private dragging = false;
   private pointers = new Map<number, { x: number; y: number }>();
   private lastPinch = 0;
+  private pinchMid: { x: number; y: number } | null = null;
+  private downPt: { x: number; y: number; id: number } | null = null;
+  private panLast: { x: number; y: number } | null = null;
+  private movedPx = 0;
+  private panning = false;
   private grid = new Map<number, LaidOut[]>();
   private raf = 0;
   private dirty = true;
+  private unbound = false;
   onSelect: ((n: GraphNode) => void) | null = null;
   onHover: ((n: GraphNode | null) => void) | null = null;
   onExpand: ((key: string) => void) | null = null;
 
   constructor(canvas: HTMLCanvasElement) {
     this.canvas = canvas;
+    canvas.style.touchAction = "none";
     canvas.addEventListener("pointerdown", this.onDown);
     canvas.addEventListener("pointermove", this.onMove);
     canvas.addEventListener("pointerup", this.onUp);
     canvas.addEventListener("pointercancel", this.onUp);
+    canvas.addEventListener("lostpointercapture", this.onUp);
     canvas.addEventListener("wheel", this.onWheel, { passive: false });
     canvas.addEventListener("dblclick", this.onDbl);
+    canvas.addEventListener("contextmenu", this.onContext);
+    this.raf = requestAnimationFrame(this.loop);
   }
 
   destroy() {
+    this.unbound = true;
     cancelAnimationFrame(this.raf);
+    const canvas = this.canvas;
+    canvas.removeEventListener("pointerdown", this.onDown);
+    canvas.removeEventListener("pointermove", this.onMove);
+    canvas.removeEventListener("pointerup", this.onUp);
+    canvas.removeEventListener("pointercancel", this.onUp);
+    canvas.removeEventListener("lostpointercapture", this.onUp);
+    canvas.removeEventListener("wheel", this.onWheel);
+    canvas.removeEventListener("dblclick", this.onDbl);
+    canvas.removeEventListener("contextmenu", this.onContext);
+    this.pointers.clear();
   }
 
   setData(nodes: GraphNode[], mode: "tree" | "radial", colorBy: string, resetCamera: boolean) {
@@ -143,10 +166,22 @@ export class CanvasView {
     if (resetCamera && this.laid.items.length) {
       const c = this.canvas.getBoundingClientRect();
       const root = this.laid.items.find((i) => i.node.depth === 0) || this.laid.items[0];
-      this.camera = { k: mode === "radial" ? 0.9 : 1, x: c.width * 0.28 - root.x, y: c.height * 0.5 - root.y };
+      const k = mode === "radial" ? 0.85 : Math.min(1.15, Math.max(0.55, c.width / 720));
+      const cx = mode === "radial" ? c.width * 0.5 : c.width * 0.28;
+      const cy = c.height * 0.5;
+      this.camera = { k, x: cx - root.x * k, y: cy - root.y * k };
     }
     this.dirty = true;
-    this.loop();
+  }
+
+  setSelected(id: string | null) {
+    if (this.selectedId === id) return;
+    this.selectedId = id;
+    this.dirty = true;
+  }
+
+  requestDraw() {
+    this.dirty = true;
   }
 
   private rebuildGrid() {
@@ -177,14 +212,17 @@ export class CanvasView {
     const cell = 48;
     const gx = Math.floor(w.x / cell);
     const gy = Math.floor(w.y / cell);
+    // Finger-sized target in screen px, converted to world units.
+    const hitR = Math.max(14, HIT_SCREEN_PX / this.camera.k);
     let best: LaidOut | null = null;
-    let bestD = 18;
-    for (let dx = -1; dx <= 1; dx++) {
-      for (let dy = -1; dy <= 1; dy++) {
+    let bestD = hitR;
+    const span = Math.max(1, Math.ceil(hitR / cell));
+    for (let dx = -span; dx <= span; dx++) {
+      for (let dy = -span; dy <= span; dy++) {
         const arr = this.grid.get(((gx + dx) << 16) ^ (gy + dy));
         if (!arr) continue;
         for (const it of arr) {
-          const d = Math.hypot(it.x - w.x, it.y - w.y);
+          const d = Math.hypot(it.x - w.x, it.y - w.y) - it.r * 0.35;
           if (d < bestD) {
             bestD = d;
             best = it;
@@ -195,56 +233,127 @@ export class CanvasView {
     return best;
   }
 
+  private onContext = (e: Event) => {
+    e.preventDefault();
+  };
+
   private onDown = (e: PointerEvent) => {
-    this.canvas.setPointerCapture(e.pointerId);
+    if (e.button !== 0 && e.pointerType === "mouse") return;
+    e.preventDefault();
+    try {
+      this.canvas.setPointerCapture(e.pointerId);
+    } catch {
+      /* ignore */
+    }
     this.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
-    if (this.pointers.size === 1) this.dragging = true;
-    if (this.pointers.size === 2) {
+    if (this.pointers.size === 1) {
+      this.downPt = { x: e.clientX, y: e.clientY, id: e.pointerId };
+      this.panLast = { x: e.clientX, y: e.clientY };
+      this.movedPx = 0;
+      this.panning = false;
+    } else if (this.pointers.size === 2) {
       const pts = [...this.pointers.values()];
       this.lastPinch = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
-      this.dragging = false;
+      this.pinchMid = { x: (pts[0].x + pts[1].x) / 2, y: (pts[0].y + pts[1].y) / 2 };
+      this.panning = false;
+      this.downPt = null;
     }
   };
 
   private onMove = (e: PointerEvent) => {
-    if (this.pointers.has(e.pointerId)) this.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
-    if (this.pointers.size === 2) {
+    if (!this.pointers.has(e.pointerId)) {
+      // Hover only for mouse / pen when not interacting.
+      if (this.pointers.size === 0 && e.pointerType === "mouse") {
+        const hit = this.hit(e.clientX, e.clientY);
+        const id = hit?.id || null;
+        if (id !== this.hoverId) {
+          this.hoverId = id;
+          this.onHover?.(hit?.node || null);
+          this.dirty = true;
+        }
+      }
+      return;
+    }
+
+    e.preventDefault();
+    this.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+
+    if (this.pointers.size >= 2) {
       const pts = [...this.pointers.values()];
       const dist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
-      if (this.lastPinch) {
+      const mid = { x: (pts[0].x + pts[1].x) / 2, y: (pts[0].y + pts[1].y) / 2 };
+      if (this.lastPinch > 0) {
         const factor = dist / this.lastPinch;
-        this.zoomAt((pts[0].x + pts[1].x) / 2, (pts[0].y + pts[1].y) / 2, factor);
+        if (Number.isFinite(factor) && factor > 0) {
+          this.zoomAt(mid.x, mid.y, factor);
+        }
+      }
+      if (this.pinchMid) {
+        this.camera.x += mid.x - this.pinchMid.x;
+        this.camera.y += mid.y - this.pinchMid.y;
+        this.dirty = true;
       }
       this.lastPinch = dist;
+      this.pinchMid = mid;
+      this.movedPx = TAP_PX + 1;
       return;
     }
-    if (this.dragging) {
-      this.camera.x += e.movementX;
-      this.camera.y += e.movementY;
-      this.dirty = true;
-      return;
-    }
-    const hit = this.hit(e.clientX, e.clientY);
-    const id = hit?.id || null;
-    if (id !== this.hoverId) {
-      this.hoverId = id;
-      this.onHover?.(hit?.node || null);
-      this.dirty = true;
+
+    // Single-finger / mouse pan using client deltas (movementX is unreliable on touch).
+    if (this.panLast) {
+      const dx = e.clientX - this.panLast.x;
+      const dy = e.clientY - this.panLast.y;
+      this.movedPx += Math.hypot(dx, dy);
+      this.panLast = { x: e.clientX, y: e.clientY };
+      if (this.movedPx > TAP_PX || this.panning) {
+        this.panning = true;
+        this.camera.x += dx;
+        this.camera.y += dy;
+        this.dirty = true;
+      }
     }
   };
 
   private onUp = (e: PointerEvent) => {
-    const wasDrag = this.pointers.size === 1 && this.dragging;
+    if (!this.pointers.has(e.pointerId) && this.downPt?.id !== e.pointerId) return;
+    const wasSingle = this.pointers.size === 1;
+    const moved = this.movedPx;
+    const down = this.downPt;
     this.pointers.delete(e.pointerId);
-    this.dragging = false;
-    this.lastPinch = 0;
-    if (wasDrag && Math.abs(e.movementX) < 4 && Math.abs(e.movementY) < 4) {
-      const hit = this.hit(e.clientX, e.clientY);
-      if (hit) {
-        this.selectedId = hit.id;
-        if (hit.node.kind === "cluster" && hit.node.expand_key) this.onExpand?.(hit.node.expand_key);
-        else this.onSelect?.(hit.node);
-        this.dirty = true;
+
+    if (this.pointers.size === 1) {
+      // Resume one-finger pan after pinch without firing a tap.
+      const remaining = [...this.pointers.entries()][0];
+      this.panLast = { x: remaining[1].x, y: remaining[1].y };
+      this.downPt = null;
+      this.panning = true;
+      this.movedPx = TAP_PX + 1;
+      this.lastPinch = 0;
+      this.pinchMid = null;
+      return;
+    }
+
+    if (this.pointers.size === 0) {
+      const tapped = wasSingle && !!down && moved < TAP_PX && !this.panning;
+      this.downPt = null;
+      this.panLast = null;
+      this.panning = false;
+      this.movedPx = 0;
+      this.lastPinch = 0;
+      this.pinchMid = null;
+      if (tapped) {
+        const hit = this.hit(e.clientX, e.clientY);
+        if (hit) {
+          this.selectedId = hit.id;
+          this.hoverId = hit.id;
+          if (hit.node.kind === "cluster" && hit.node.expand_key) this.onExpand?.(hit.node.expand_key);
+          else this.onSelect?.(hit.node);
+          this.dirty = true;
+        } else {
+          this.hoverId = null;
+          this.onHover?.(null);
+          this.dirty = true;
+        }
       }
     }
   };
@@ -263,7 +372,7 @@ export class CanvasView {
     const r = this.canvas.getBoundingClientRect();
     const lx = clientX - r.left;
     const ly = clientY - r.top;
-    const next = Math.min(6, Math.max(0.15, this.camera.k * factor));
+    const next = Math.min(6, Math.max(0.2, this.camera.k * factor));
     const wx = (lx - this.camera.x) / this.camera.k;
     const wy = (ly - this.camera.y) / this.camera.k;
     this.camera.k = next;
@@ -273,6 +382,7 @@ export class CanvasView {
   }
 
   private loop = () => {
+    if (this.unbound) return;
     this.raf = requestAnimationFrame(this.loop);
     if (!this.dirty) return;
     this.dirty = false;
@@ -285,9 +395,12 @@ export class CanvasView {
     if (!ctx || !this.laid) return;
     const dpr = Math.min(2, window.devicePixelRatio || 1);
     const rect = canvas.getBoundingClientRect();
-    if (canvas.width !== Math.floor(rect.width * dpr) || canvas.height !== Math.floor(rect.height * dpr)) {
-      canvas.width = Math.floor(rect.width * dpr);
-      canvas.height = Math.floor(rect.height * dpr);
+    if (rect.width < 1 || rect.height < 1) return;
+    const w = Math.floor(rect.width * dpr);
+    const h = Math.floor(rect.height * dpr);
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
     }
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, rect.width, rect.height);
@@ -296,8 +409,8 @@ export class CanvasView {
     ctx.scale(this.camera.k, this.camera.k);
 
     const path = new Set<string>();
-    if (this.hoverId) {
-      let cur = this.laid.items.find((i) => i.id === this.hoverId);
+    if (this.hoverId || this.selectedId) {
+      let cur = this.laid.items.find((i) => i.id === (this.hoverId || this.selectedId));
       const byId = new Map(this.laid.items.map((i) => [i.id, i]));
       while (cur) {
         path.add(cur.id);
@@ -314,12 +427,12 @@ export class CanvasView {
       const mx = (e.x1 + e.x2) / 2;
       ctx.bezierCurveTo(mx, e.y1, mx, e.y2, e.x2, e.y2);
       ctx.strokeStyle = e.color + "99";
-      ctx.lineWidth = 1.2;
+      ctx.lineWidth = 1.2 / this.camera.k;
       ctx.stroke();
     }
     if (path.size) {
       const byId = new Map(this.laid.items.map((i) => [i.id, i]));
-      ctx.lineWidth = 2.4;
+      ctx.lineWidth = 2.4 / this.camera.k;
       for (const id of path) {
         const it = byId.get(id);
         if (!it || it.node.parent == null) continue;
@@ -346,7 +459,7 @@ export class CanvasView {
         ctx.fillStyle = it.color;
         ctx.fill();
         if (it.node.depth === 0) {
-          ctx.lineWidth = 2;
+          ctx.lineWidth = 2 / this.camera.k;
           ctx.strokeStyle = "#f4efe4";
           ctx.stroke();
         }
@@ -354,7 +467,7 @@ export class CanvasView {
       if (showLabels || it.id === this.hoverId || it.id === this.selectedId || it.node.depth === 0) {
         ctx.font = `${it.node.depth === 0 ? 13 : 11}px "Source Sans 3", "Segoe UI", sans-serif`;
         ctx.fillStyle = "#f4efe4";
-        ctx.globalAlpha = it.id === this.hoverId || it.node.depth < 2 || this.camera.k > 0.9 ? 1 : 0.75;
+        ctx.globalAlpha = it.id === this.hoverId || it.id === this.selectedId || it.node.depth < 2 || this.camera.k > 0.9 ? 1 : 0.75;
         const label =
           it.node.kind === "cluster"
             ? it.node.term
@@ -365,14 +478,19 @@ export class CanvasView {
     }
     ctx.restore();
 
-    // minimap on wide screens
     if (rect.width > 720 && this.laid.items.length > 8) {
-      const mw = 140, mh = 90, mx = rect.width - mw - 16, my = 16;
+      const mw = 140,
+        mh = 90,
+        mx = rect.width - mw - 16,
+        my = 16;
       ctx.fillStyle = "rgba(16,22,28,0.72)";
       ctx.strokeStyle = "rgba(232,224,212,0.2)";
       ctx.fillRect(mx, my, mw, mh);
       ctx.strokeRect(mx, my, mw, mh);
-      let minx = Infinity, miny = Infinity, maxx = -Infinity, maxy = -Infinity;
+      let minx = Infinity,
+        miny = Infinity,
+        maxx = -Infinity,
+        maxy = -Infinity;
       for (const it of this.laid.items) {
         minx = Math.min(minx, it.x);
         miny = Math.min(miny, it.y);
@@ -386,7 +504,6 @@ export class CanvasView {
       ctx.translate(mx + 8, my + 8);
       ctx.scale(s, s);
       ctx.translate(-minx, -miny);
-      ctx.fillStyle = "#3cb8c4";
       for (const it of this.laid.items) {
         ctx.fillStyle = it.color;
         ctx.fillRect(it.x, it.y, 8, 8);