@jbrowse/bandage-core 5.1.0 → 5.2.0

package/dist/chunks/{chunk-Y2MDXT4O.js → chunk-ZMVFSZI5.js}

@@ -1804,7 +1804,7 @@ function placeLabels(candidates, frame, take) {
       if (offFrame(box, frame)) {
         return void 0;
       }
-      if (insideFrame(box, frame) && take(box)) {
+      if (insideFrame(box, frame) && (c.fits?.(box) ?? true) && take(box)) {
         return { ...c, text, y, w };
       }
     }
@@ -4432,6 +4432,415 @@ function groupByPaint(items, paintOf) {
   return [...groups.values(), ...deferred.values()];
 }
 
+// src/util/SpatialIndex.ts
+var FALLBACK_CELL_SIZE = 50;
+function meanExtentCellSize(extentTotal, count) {
+  return count > 0 ? Math.max(1, extentTotal / count) : FALLBACK_CELL_SIZE;
+}
+function rowPitchOf(boxes) {
+  const distinct = /* @__PURE__ */ new Set();
+  let min = Infinity;
+  let max = -Infinity;
+  for (const box of boxes) {
+    distinct.add(box.minY);
+    min = Math.min(min, box.minY);
+    max = Math.max(max, box.minY);
+  }
+  return distinct.size > 1 ? (max - min) / (distinct.size - 1) : void 0;
+}
+function cellSizeFrom(boxes, extentX, extentY) {
+  const x = meanExtentCellSize(extentX, boxes.length);
+  return {
+    x,
+    y: extentY > 0 ? meanExtentCellSize(extentY, boxes.length) : rowPitchOf(boxes) ?? x
+  };
+}
+function resolveCellSize(given, boxes, extentX, extentY) {
+  return given === void 0 ? cellSizeFrom(boxes, extentX, extentY) : typeof given === "number" ? { x: given, y: given } : given;
+}
+function getOrCreateCell(cells, cx, cy) {
+  let row = cells.get(cx);
+  if (!row) {
+    row = /* @__PURE__ */ new Map();
+    cells.set(cx, row);
+  }
+  let cell = row.get(cy);
+  if (!cell) {
+    cell = [];
+    row.set(cy, cell);
+  }
+  return cell;
+}
+function addToGrid(cells, cellSize, minX, minY, maxX, maxY, entry) {
+  const cx0 = Math.floor(minX / cellSize.x);
+  const cx1 = Math.floor(maxX / cellSize.x);
+  const cy0 = Math.floor(minY / cellSize.y);
+  const cy1 = Math.floor(maxY / cellSize.y);
+  for (let cx = cx0; cx <= cx1; cx++) {
+    for (let cy = cy0; cy <= cy1; cy++) {
+      getOrCreateCell(cells, cx, cy).push(entry);
+    }
+  }
+}
+function queryGrid(cells, cellSize, x, y, radiusX, radiusY) {
+  const cx0 = Math.floor((x - radiusX) / cellSize.x);
+  const cx1 = Math.floor((x + radiusX) / cellSize.x);
+  const cy0 = Math.floor((y - radiusY) / cellSize.y);
+  const cy1 = Math.floor((y + radiusY) / cellSize.y);
+  const results = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (let cx = cx0; cx <= cx1; cx++) {
+    const row = cells.get(cx);
+    if (row) {
+      for (let cy = cy0; cy <= cy1; cy++) {
+        const cell = row.get(cy);
+        if (cell) {
+          for (const entry of cell) {
+            if (!seen.has(entry)) {
+              seen.add(entry);
+              results.push(entry);
+            }
+          }
+        }
+      }
+    }
+  }
+  return results;
+}
+var SpatialIndex = class {
+  constructor(nodePositions, cellSize) {
+    this.cells = /* @__PURE__ */ new Map();
+    const boxes = [];
+    let extentX = 0;
+    let extentY = 0;
+    for (const [nodeId, segments] of Object.entries(nodePositions)) {
+      for (let i = 0; i < segments.length - 1; i++) {
+        const seg = segments[i];
+        const next = segments[i + 1];
+        const minX = Math.min(seg.x, next.x);
+        const minY = Math.min(seg.y, next.y);
+        const maxX = Math.max(seg.x, next.x);
+        const maxY = Math.max(seg.y, next.y);
+        extentX += maxX - minX;
+        extentY += maxY - minY;
+        boxes.push({ entry: { nodeId, segmentIdx: i }, minX, minY, maxX, maxY });
+      }
+    }
+    this.cellSize = resolveCellSize(cellSize, boxes, extentX, extentY);
+    for (const b of boxes) {
+      addToGrid(
+        this.cells,
+        this.cellSize,
+        b.minX,
+        b.minY,
+        b.maxX,
+        b.maxY,
+        b.entry
+      );
+    }
+  }
+  query(x, y, radiusX, radiusY = radiusX) {
+    return queryGrid(this.cells, this.cellSize, x, y, radiusX, radiusY);
+  }
+};
+var EdgeSpatialIndex = class {
+  constructor(nodePositions, graph, drawPaths, axis, cellSize, deletions, version2 = 0, routes, stranded = false) {
+    this.cells = /* @__PURE__ */ new Map();
+    this.edgeCurves = baseEdgeCurves(
+      nodePositions,
+      graph,
+      axis,
+      deletions,
+      version2,
+      routes,
+      stranded
+    );
+    const boxes = [];
+    let extentX = 0;
+    let extentY = 0;
+    for (let ei = 0; ei < graph.edges.length; ei++) {
+      const edge = graph.edges[ei];
+      const fromSegments = nodePositions[edge.from];
+      const toSegments = nodePositions[edge.to];
+      const curves = this.edgeCurves.get(ei);
+      if (fromSegments?.length && toSegments?.length && curves) {
+        let { minX, minY, maxX, maxY } = curveBounds(curves);
+        const numPaths = edge.pathIds?.length ?? 0;
+        if (drawPaths && numPaths > 0) {
+          let padX = 0;
+          let padY = 0;
+          for (const o of pathRibbonOffsets(
+            fromSegments,
+            toSegments,
+            numPaths,
+            axis
+          )) {
+            padX = Math.max(padX, Math.abs(o.x));
+            padY = Math.max(padY, Math.abs(o.y));
+          }
+          minX -= padX;
+          minY -= padY;
+          maxX += padX;
+          maxY += padY;
+        }
+        extentX += maxX - minX;
+        extentY += maxY - minY;
+        boxes.push({ ei, minX, minY, maxX, maxY });
+      }
+    }
+    this.cellSize = resolveCellSize(cellSize, boxes, extentX, extentY);
+    for (const b of boxes) {
+      addToGrid(this.cells, this.cellSize, b.minX, b.minY, b.maxX, b.maxY, b.ei);
+    }
+  }
+  getCurves(ei) {
+    return this.edgeCurves.get(ei);
+  }
+  query(x, y, radiusX, radiusY = radiusX) {
+    return queryGrid(this.cells, this.cellSize, x, y, radiusX, radiusY);
+  }
+};
+
+// src/util/hitDetection.ts
+function distanceToSegment(px, py, x1, y1, x2, y2) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const lenSq = dx * dx + dy * dy;
+  if (lenSq === 0) {
+    return Math.hypot(px - x1, py - y1);
+  }
+  const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
+  return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
+}
+function distanceToCubicBezier(px, py, x1, y1, cx1, cy1, cx2, cy2, x2, y2) {
+  let minDist = Infinity;
+  const samples = 20;
+  let lastX = x1;
+  let lastY = y1;
+  for (let i = 1; i <= samples; i++) {
+    const t = i / samples;
+    const u = 1 - t;
+    const bx = u * u * u * x1 + 3 * u * u * t * cx1 + 3 * u * t * t * cx2 + t * t * t * x2;
+    const by = u * u * u * y1 + 3 * u * u * t * cy1 + 3 * u * t * t * cy2 + t * t * t * y2;
+    minDist = Math.min(minDist, distanceToSegment(px, py, lastX, lastY, bx, by));
+    lastX = bx;
+    lastY = by;
+  }
+  return minDist;
+}
+function distanceToBezierCurve(px, py, c) {
+  return distanceToCubicBezier(
+    px,
+    py,
+    c.x0,
+    c.y0,
+    c.cx0,
+    c.cy0,
+    c.cx1,
+    c.cy1,
+    c.x1,
+    c.y1
+  );
+}
+function distanceToEdgeCurves(px, py, curves, yToX = 1) {
+  let minDist = Infinity;
+  for (const c of curves) {
+    const d = distanceToBezierCurve(
+      px,
+      py,
+      yToX === 1 ? c : {
+        x0: c.x0,
+        y0: c.y0 * yToX,
+        cx0: c.cx0,
+        cy0: c.cy0 * yToX,
+        cx1: c.cx1,
+        cy1: c.cy1 * yToX,
+        x1: c.x1,
+        y1: c.y1 * yToX
+      }
+    );
+    if (d < minDist) {
+      minDist = d;
+    }
+  }
+  return minDist;
+}
+var nodeCache = /* @__PURE__ */ new WeakMap();
+function getSpatialIndex(nodePositions, version2) {
+  const cached2 = nodeCache.get(nodePositions);
+  if (cached2?.version === version2) {
+    return cached2.index;
+  }
+  const index = new SpatialIndex(nodePositions);
+  nodeCache.set(nodePositions, { version: version2, index });
+  return index;
+}
+var edgeCache = /* @__PURE__ */ new WeakMap();
+function getEdgeSpatialIndex(nodePositions, graph, drawPaths, axis, version2, deletions, routes, stranded = false) {
+  const cached2 = edgeCache.get(nodePositions);
+  if (cached2?.graph === graph && cached2.drawPaths === drawPaths && cached2.scaleX === axis.scaleX && cached2.scaleY === axis.scaleY && cached2.version === version2 && cached2.deletions === deletions && cached2.routes === routes && cached2.stranded === stranded) {
+    return cached2.index;
+  }
+  const index = new EdgeSpatialIndex(
+    nodePositions,
+    graph,
+    drawPaths,
+    axis,
+    void 0,
+    deletions,
+    version2,
+    routes,
+    stranded
+  );
+  edgeCache.set(nodePositions, {
+    graph,
+    drawPaths,
+    scaleX: axis.scaleX,
+    scaleY: axis.scaleY,
+    version: version2,
+    index,
+    deletions,
+    routes,
+    stranded
+  });
+  return index;
+}
+var MIN_NODE_REACH_PX = 5;
+function findHoveredNode(nodePositions, graphX, graphY, axis, version2 = 0, ink) {
+  const yToX = yToXOf(axis);
+  const index = getSpatialIndex(nodePositions, version2);
+  const reach = (px) => Math.max(MIN_NODE_REACH_PX, px) / axis.scaleX;
+  const queryReach = reach(ink?.maxHalfWidthPx ?? 0);
+  const candidates = index.query(graphX, graphY, queryReach, queryReach / yToX);
+  let hovered = null;
+  let best = Infinity;
+  for (const { nodeId, segmentIdx } of candidates) {
+    const segments = nodePositions[nodeId];
+    const dist = distanceToSegment(
+      graphX,
+      graphY * yToX,
+      segments[segmentIdx].x,
+      segments[segmentIdx].y * yToX,
+      segments[segmentIdx + 1].x,
+      segments[segmentIdx + 1].y * yToX
+    );
+    if (dist < best && dist < reach(ink?.halfWidthPx(nodeId) ?? 0)) {
+      best = dist;
+      hovered = nodeId;
+    }
+  }
+  return hovered;
+}
+function segmentMeetsBox(a, b, box) {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  let t0 = 0;
+  let t1 = 1;
+  for (const [p, q] of [
+    [-dx, a.x - box.x0],
+    [dx, box.x1 - a.x],
+    [-dy, a.y - box.y0],
+    [dy, box.y1 - a.y]
+  ]) {
+    if (p === 0) {
+      if (q < 0) {
+        return false;
+      }
+    } else if (p < 0) {
+      t0 = Math.max(t0, q / p);
+    } else {
+      t1 = Math.min(t1, q / p);
+    }
+  }
+  return t0 <= t1;
+}
+function nodesUnderBox(nodePositions, t, version2 = 0) {
+  const index = getSpatialIndex(nodePositions, version2);
+  const screen = (p) => ({
+    x: p.x * t.scaleX + t.translateX,
+    y: p.y * t.scaleY + t.translateY
+  });
+  return (box) => {
+    const hits = /* @__PURE__ */ new Set();
+    const candidates = index.query(
+      ((box.x0 + box.x1) / 2 - t.translateX) / t.scaleX,
+      ((box.y0 + box.y1) / 2 - t.translateY) / t.scaleY,
+      Math.abs((box.x1 - box.x0) / 2 / t.scaleX),
+      Math.abs((box.y1 - box.y0) / 2 / t.scaleY)
+    );
+    for (const { nodeId, segmentIdx } of candidates) {
+      const line = nodePositions[nodeId];
+      if (!hits.has(nodeId) && segmentMeetsBox(
+        screen(line[segmentIdx]),
+        screen(line[segmentIdx + 1]),
+        box
+      )) {
+        hits.add(nodeId);
+      }
+    }
+    return hits;
+  };
+}
+function findHoveredEdge(nodePositions, graph, graphX, graphY, axis, drawPaths, version2 = 0, deletions, hiddenEdges, deletionRoutes, stranded = false) {
+  const yToX = yToXOf(axis);
+  const edgeThreshold = 10 / axis.scaleX;
+  const edgeIndex = getEdgeSpatialIndex(
+    nodePositions,
+    graph,
+    drawPaths,
+    axis,
+    version2,
+    deletions,
+    deletionRoutes,
+    stranded
+  );
+  const candidates = edgeIndex.query(
+    graphX,
+    graphY,
+    edgeThreshold,
+    edgeThreshold / yToX
+  );
+  let hovered = null;
+  let best = edgeThreshold;
+  for (const edgeIdx of candidates) {
+    const edge = graph.edges[edgeIdx];
+    const fromSegments = nodePositions[edge.from];
+    const toSegments = nodePositions[edge.to];
+    if (!fromSegments?.length || !toSegments?.length || hiddenEdges?.has(edgeIdx)) {
+      continue;
+    }
+    const numPaths = edge.pathIds?.length ?? 0;
+    const baseCurves = edgeIndex.getCurves(edgeIdx);
+    if (!baseCurves) {
+      continue;
+    }
+    let dist;
+    if (!drawPaths || numPaths === 0) {
+      dist = distanceToEdgeCurves(graphX, graphY * yToX, baseCurves, yToX);
+    } else {
+      let minDist = Infinity;
+      for (const offset of pathRibbonOffsets(
+        fromSegments,
+        toSegments,
+        numPaths,
+        axis
+      )) {
+        const curves = offset.x === 0 && offset.y === 0 ? baseCurves : translateCurves(baseCurves, offset.x, offset.y);
+        const d = distanceToEdgeCurves(graphX, graphY * yToX, curves, yToX);
+        if (d < minDist) {
+          minDist = d;
+        }
+      }
+      dist = minDist;
+    }
+    if (dist < best) {
+      best = dist;
+      hovered = edgeIdx;
+    }
+  }
+  return hovered;
+}
+
 // src/walkEncoding.ts
 import { packAbgr as packAbgr3 } from "@jbrowse/core/util/colorBits";
 var WALK_FIELDS = [
@@ -4814,11 +5223,71 @@ function facetCells(names, by, domain = []) {
   return cells.includes(-1) || new Set(cells).size < cells.length ? wrap : { columns, count: rows.length * columns, cells };
 }
 
+// src/genes/exonOutline.ts
+var EXON_COLOR = "#daa520";
+var EXON_GAP_PX = 1;
+var EXON_LINE_PX = 2;
+var MIN_LANE_PX = 4;
+function exonStretches(pins, halfWidthPx, lift, pathOf = (d) => d) {
+  const inkPx = (nodeId) => {
+    const own = halfWidthPx(nodeId) * 2;
+    return lift?.nodeIds.has(nodeId) ? Math.max(own, lift.walks.length * MIN_LANE_PX) : own;
+  };
+  return pins.flatMap(
+    (pin) => pin.exonsByNode.map(({ nodeId, d }) => ({
+      key: `${pin.gene.name}-${pin.gene.start}-${nodeId}`,
+      d: pathOf(d),
+      inner: inkPx(nodeId) + 2 * EXON_GAP_PX
+    }))
+  );
+}
+function exonOutlineTree(stretches, o) {
+  if (stretches.length === 0) {
+    return void 0;
+  }
+  const stroke = (s, color, width) => el("path", {
+    d: s.d,
+    fill: "none",
+    stroke: color,
+    "stroke-width": width,
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "vector-effect": o.transform ? "non-scaling-stroke" : void 0
+  });
+  return el(
+    "g",
+    {},
+    el(
+      "mask",
+      {
+        id: o.id,
+        maskUnits: "userSpaceOnUse",
+        x: 0,
+        y: 0,
+        width: o.width,
+        height: o.height
+      },
+      el(
+        "g",
+        { transform: o.transform },
+        ...stretches.map((s) => stroke(s, "#fff", s.inner + 2 * EXON_LINE_PX)),
+        ...stretches.map((s) => stroke(s, "#000", s.inner))
+      )
+    ),
+    el("rect", {
+      width: o.width,
+      height: o.height,
+      fill: EXON_COLOR,
+      mask: `url(#${o.id})`
+    })
+  );
+}
+
 // src/genes/genePins.ts
 function genePins(graph, genes, positions) {
   const byRefName = /* @__PURE__ */ new Map();
   for (const node of graph.nodes) {
-    if (isBackbone(node)) {
+    if (isAnchored(node)) {
       const { refName } = node.stable;
       if (positions[node.id]?.length) {
         const entry = byRefName.get(refName) ?? byRefName.set(refName, { nodes: [], reach: 0 }).get(refName);
@@ -4832,17 +5301,18 @@ function genePins(graph, genes, positions) {
   }
   const pins = [];
   for (const gene of genes) {
-    const backbone = byRefName.get(gene.refName);
-    if (!backbone) {
+    const onRefName = byRefName.get(gene.refName);
+    if (!onRefName) {
       continue;
     }
     const parts = [];
     const exonsByNode = [];
+    const nodeIds = /* @__PURE__ */ new Set();
     let at;
     let atDistance = Infinity;
     let covered = 0;
     const mid = (gene.start + gene.end) / 2;
-    const { nodes, reach } = backbone;
+    const { nodes, reach } = onRefName;
     for (let i = firstNodeAtOrAfter(nodes, gene.start - reach); i < nodes.length && nodes[i].stable.start < gene.end; i++) {
       const node = nodes[i];
       const nodeStart = node.stable.start;
@@ -4851,6 +5321,7 @@ function genePins(graph, genes, positions) {
         continue;
       }
       const line = positions[node.id];
+      nodeIds.add(node.id);
       covered += Math.min(nodeEnd, gene.end) - Math.max(nodeStart, gene.start);
       const nodeParts = [];
       for (const exon of gene.exons) {
@@ -4890,6 +5361,7 @@ function genePins(graph, genes, positions) {
         gene,
         exons: parts.join(""),
         exonsByNode,
+        nodeIds,
         at,
         covered: covered / (gene.end - gene.start)
       });
@@ -4914,7 +5386,8 @@ function geneCoverageNote(pin) {
   const amount = (bp) => +(bp / per).toFixed(per === 1 ? 0 : 1);
   return `${amount(pin.covered * length)} of ${amount(length)} ${unit}`;
 }
-function geneLabelCandidates(pins, screen, contigThickness) {
+function geneLabelCandidates(pins, screen, contigThickness, nodesUnder) {
+  const ink = contigThickness / 2;
   return byExtent(pins, (pin) => pin.gene.end - pin.gene.start).map((pin) => {
     const { x, y } = screen(pin.at);
     const note = geneCoverageNote(pin);
@@ -4924,7 +5397,15 @@ function geneLabelCandidates(pins, screen, contigThickness) {
       y: y + contigThickness + GENE_PIN_DROP_PX,
       text: note ? `${pin.gene.name} \xB7 ${note}` : pin.gene.name,
       fallback: note ? `${pin.gene.name} \u2026` : void 0,
-      stack: GENE_STACK
+      stack: GENE_STACK,
+      fits: (box) => [
+        ...nodesUnder({
+          x0: box.x0 - ink,
+          x1: box.x1 + ink,
+          y0: box.y0 - ink,
+          y1: box.y1 + ink
+        })
+      ].every((id) => pin.nodeIds.has(id))
     };
   });
 }
@@ -4985,7 +5466,16 @@ function layoutLabels(m) {
     take
   );
   const genes = placeLabels(
-    geneLabelCandidates(m.genePins, screen, m.contigThickness),
+    geneLabelCandidates(
+      m.genePins,
+      screen,
+      m.contigThickness,
+      nodesUnderBox(
+        m.nodePositions ?? {},
+        { scaleX, scaleY, translateX, translateY },
+        m.positionsVersion
+      )
+    ),
     frame,
     take
   );
@@ -5933,7 +6423,7 @@ function svgCanvas(width, height) {
 }
 
 // src/version.ts
-var version = "5.1.0";
+var version = "5.2.0";
 
 // src/viewport.ts
 function axisScaleOf(scale, pixelRows) {
@@ -5983,11 +6473,7 @@ var SWATCH_PX = 18;
 var KEY_GAP_PX = 16;
 var STRIP_KEY_PX = 22;
 var FADED = "rgb(160,160,160)";
-var EXON_COLOR = "#daa520";
 var GENE_INK2 = "#1c1c22";
-var MIN_LANE_PX = 4;
-var EXON_GAP_PX = 1;
-var EXON_LINE_PX = 2;
 function esc(s) {
   return s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
 }
@@ -6004,6 +6490,12 @@ function keySvg(id, x, y, stops, label, after, under, opacity = 1) {
     markup: `${defs}<g transform="translate(${x} ${y})" ${FONT}><rect y="5" width="${bar}" height="8" rx="2" ${fill}/><text x="${bar + 5}" y="13"><tspan font-weight="bold">${esc(label)}</tspan>${esc(after)}</text>${under ? `<text y="28">${esc(under)}</text>` : ""}</g>`
   };
 }
+function exonKeySvg(x, y) {
+  return {
+    width: SWATCH_PX + 5 + 4 * LABEL_CHAR_PX,
+    markup: `<g transform="translate(${x} ${y})" ${FONT}><rect x="1" y="4" width="${SWATCH_PX - 2}" height="10" rx="4" fill="none" stroke="${EXON_COLOR}" stroke-width="2"/><text x="${SWATCH_PX + 5}" y="13">exon</text></g>`
+  };
+}
 function walkKeySvg(id, x, y, walk, label, reference) {
   const key = walkKey(walk, reference);
   return keySvg(
@@ -6068,24 +6560,12 @@ function figureSvg(graph, layout, o = {}) {
   let masks = 0;
   function overlays(highlight, t, w, h) {
     const out = [];
-    const inkPx = (nodeId) => {
-      const own = ink.halfWidthPx(nodeId) * 2;
-      return highlight?.nodeIds.has(nodeId) ? Math.max(own, highlight.walks.length * MIN_LANE_PX) : own;
-    };
-    const stretches = pins.flatMap(
-      (pin) => pin.exonsByNode.map(({ nodeId, d }) => ({
-        d: screenPath(d, t),
-        inner: inkPx(nodeId) + 2 * EXON_GAP_PX
-      }))
+    const outlines = exonOutlineTree(
+      exonStretches(pins, ink.halfWidthPx, highlight, (d) => screenPath(d, t)),
+      { id: `exons${masks++}`, width: w, height: h }
     );
-    if (stretches.length > 0) {
-      const id = `exons${masks++}`;
-      const stroke = (color, width2, d) => `<path d="${d}" fill="none" stroke="${color}" stroke-width="${width2}" stroke-linecap="round" stroke-linejoin="round"/>`;
-      out.push(
-        `<mask id="${id}" maskUnits="userSpaceOnUse" x="0" y="0" width="${w}" height="${h}">${stretches.map((s) => stroke("#fff", s.inner + 2 * EXON_LINE_PX, s.d)).join("")}${stretches.map((s) => stroke("#000", s.inner, s.d)).join(
-          ""
-        )}</mask><rect width="${w}" height="${h}" fill="${EXON_COLOR}" mask="url(#${id})"/>`
-      );
+    if (outlines) {
+      out.push(serializeEl(outlines));
     }
     const screen = (p) => ({
       x: p.x * t.scaleX + t.translateX,
@@ -6093,7 +6573,12 @@ function figureSvg(graph, layout, o = {}) {
     });
     const frame = { width: w, height: h };
     for (const { item: pin, x, y, w: cw, text } of placeLabels(
-      geneLabelCandidates(pins, screen, contigThickness),
+      geneLabelCandidates(
+        pins,
+        screen,
+        contigThickness,
+        nodesUnderBox(layout.nodePositions, t)
+      ),
       frame,
       occupancy(frame)
     )) {
@@ -6259,6 +6744,9 @@ function figureSvg(graph, layout, o = {}) {
         )
       );
     }
+    if (pins.some((pin) => pin.exonsByNode.length > 0)) {
+      push(exonKeySvg(x, 2));
+    }
     const header = parts.length > 0 ? FACET_TITLE_PX : 0;
     const usable = width - 2 * FIT_PADDING;
     const drawn = pixelRows || !(bounds.w > 0) ? bounds.h : bounds.h * usable / bounds.w;
@@ -6625,7 +7113,9 @@ var NodeLimitError = class extends Error {
     super(
       `this ${windowBp.toLocaleString()} bp window reads more than nodeLimit (${limit.toLocaleString()}) graph nodes; zoom in to about ${fitsBp.toLocaleString()} bp or raise nodeLimit`
     );
+    this.fitsBp = fitsBp;
     this.name = "NodeLimitError";
+    this.regionTooLarge = true;
   }
 };
 function haplotypePrefix(name) {
@@ -6770,10 +7260,6 @@ export {
   BUBBLE_SPREADS,
   ROW_HEIGHT_PX,
   svgPath,
-  curveBounds,
-  translateCurves,
-  yToXOf,
-  pathRibbonOffsets,
   deletionEdges,
   panSNSample,
   panSNHaplotype,
@@ -6809,7 +7295,6 @@ export {
   nodeWidthPx,
   maxNodeWidthPx,
   nodeInk,
-  baseEdgeCurves,
   LIFT_BACKDROP_CSS,
   REFERENCE_RAMP_MAX_HUE,
   computeReferenceRamp,
@@ -6817,6 +7302,8 @@ export {
   getNodeColor,
   buildGeometry,
   Canvas2DRenderer,
+  findHoveredNode,
+  findHoveredEdge,
   WALK_FIELDS,
   WALK_SCHEMES,
   resolveEncoding,
@@ -6837,6 +7324,9 @@ export {
   facetGrid,
   facetSettingOf,
   facetCells,
+  EXON_COLOR,
+  exonStretches,
+  exonOutlineTree,
   genePins,
   HALO_FACTOR,
   LEGEND_INSET_PX,

package/dist/cli/figure.js

@@ -21,7 +21,7 @@ import {
   placeRowGenes,
   refNameBinding,
   walkRows
-} from "../chunks/chunk-Y2MDXT4O.js";
+} from "../chunks/chunk-ZMVFSZI5.js";
 
 // src/cli/figure.ts
 import { access, open, readFile, writeFile } from "node:fs/promises";

package/dist/index.js

@@ -4,6 +4,7 @@ import {
   COLOR_SCHEMES,
   Canvas2DRenderer,
   DISAGREES,
+  EXON_COLOR,
   FACET_GAP_PX,
   FACET_PAD_PX,
   FACET_TITLE_PX,
@@ -35,14 +36,12 @@ import {
   assemblyWalk,
   axisScaleOf,
   backboneAssembly,
-  baseEdgeCurves,
   buildGeometry,
   clampZoom,
   coalesceRuns,
   computeColorSchemeRange,
   computeReferenceRamp,
   contains,
-  curveBounds,
   cutGbzRegion,
   cutWindowGFA,
   deletionEdges,
@@ -52,6 +51,8 @@ import {
   encodingSwatchCss,
   engineKey,
   engineRequest,
+  exonOutlineTree,
+  exonStretches,
   facetCells,
   facetGrid,
   facetLifts,
@@ -59,6 +60,8 @@ import {
   featuresOnBackbone,
   figureSvg,
   filterSamples,
+  findHoveredEdge,
+  findHoveredNode,
   fitTransform,
   forceLayout,
   formatBp,
@@ -91,7 +94,6 @@ import {
   parseRegion,
   pathColorsLegible,
   pathLegend,
-  pathRibbonOffsets,
   placeRowGenes,
   rampHue,
   rampHueCss,
@@ -118,7 +120,6 @@ import {
   stripRowAt,
   svgCanvas,
   svgPath,
-  translateCurves,
   trimOrigins,
   unitTicks,
   version,
@@ -137,372 +138,12 @@ import {
   walkStripFrame,
   walkStripLabelsTree,
   wellKnownSample,
-  yToXOf,
   zoomAbout
-} from "./chunks/chunk-Y2MDXT4O.js";
+} from "./chunks/chunk-ZMVFSZI5.js";
 
 // src/index.ts
 import { getDpr } from "@jbrowse/render-core/canvas2dUtils";
 
-// src/util/SpatialIndex.ts
-var FALLBACK_CELL_SIZE = 50;
-function meanExtentCellSize(extentTotal, count) {
-  return count > 0 ? Math.max(1, extentTotal / count) : FALLBACK_CELL_SIZE;
-}
-function rowPitchOf(boxes) {
-  const distinct = /* @__PURE__ */ new Set();
-  let min = Infinity;
-  let max = -Infinity;
-  for (const box of boxes) {
-    distinct.add(box.minY);
-    min = Math.min(min, box.minY);
-    max = Math.max(max, box.minY);
-  }
-  return distinct.size > 1 ? (max - min) / (distinct.size - 1) : void 0;
-}
-function cellSizeFrom(boxes, extentX, extentY) {
-  const x = meanExtentCellSize(extentX, boxes.length);
-  return {
-    x,
-    y: extentY > 0 ? meanExtentCellSize(extentY, boxes.length) : rowPitchOf(boxes) ?? x
-  };
-}
-function resolveCellSize(given, boxes, extentX, extentY) {
-  return given === void 0 ? cellSizeFrom(boxes, extentX, extentY) : typeof given === "number" ? { x: given, y: given } : given;
-}
-function getOrCreateCell(cells, cx, cy) {
-  let row = cells.get(cx);
-  if (!row) {
-    row = /* @__PURE__ */ new Map();
-    cells.set(cx, row);
-  }
-  let cell = row.get(cy);
-  if (!cell) {
-    cell = [];
-    row.set(cy, cell);
-  }
-  return cell;
-}
-function addToGrid(cells, cellSize, minX, minY, maxX, maxY, entry) {
-  const cx0 = Math.floor(minX / cellSize.x);
-  const cx1 = Math.floor(maxX / cellSize.x);
-  const cy0 = Math.floor(minY / cellSize.y);
-  const cy1 = Math.floor(maxY / cellSize.y);
-  for (let cx = cx0; cx <= cx1; cx++) {
-    for (let cy = cy0; cy <= cy1; cy++) {
-      getOrCreateCell(cells, cx, cy).push(entry);
-    }
-  }
-}
-function queryGrid(cells, cellSize, x, y, radiusX, radiusY) {
-  const cx0 = Math.floor((x - radiusX) / cellSize.x);
-  const cx1 = Math.floor((x + radiusX) / cellSize.x);
-  const cy0 = Math.floor((y - radiusY) / cellSize.y);
-  const cy1 = Math.floor((y + radiusY) / cellSize.y);
-  const results = [];
-  const seen = /* @__PURE__ */ new Set();
-  for (let cx = cx0; cx <= cx1; cx++) {
-    const row = cells.get(cx);
-    if (row) {
-      for (let cy = cy0; cy <= cy1; cy++) {
-        const cell = row.get(cy);
-        if (cell) {
-          for (const entry of cell) {
-            if (!seen.has(entry)) {
-              seen.add(entry);
-              results.push(entry);
-            }
-          }
-        }
-      }
-    }
-  }
-  return results;
-}
-var SpatialIndex = class {
-  constructor(nodePositions, cellSize) {
-    this.cells = /* @__PURE__ */ new Map();
-    const boxes = [];
-    let extentX = 0;
-    let extentY = 0;
-    for (const [nodeId, segments] of Object.entries(nodePositions)) {
-      for (let i = 0; i < segments.length - 1; i++) {
-        const seg = segments[i];
-        const next = segments[i + 1];
-        const minX = Math.min(seg.x, next.x);
-        const minY = Math.min(seg.y, next.y);
-        const maxX = Math.max(seg.x, next.x);
-        const maxY = Math.max(seg.y, next.y);
-        extentX += maxX - minX;
-        extentY += maxY - minY;
-        boxes.push({ entry: { nodeId, segmentIdx: i }, minX, minY, maxX, maxY });
-      }
-    }
-    this.cellSize = resolveCellSize(cellSize, boxes, extentX, extentY);
-    for (const b of boxes) {
-      addToGrid(
-        this.cells,
-        this.cellSize,
-        b.minX,
-        b.minY,
-        b.maxX,
-        b.maxY,
-        b.entry
-      );
-    }
-  }
-  query(x, y, radiusX, radiusY = radiusX) {
-    return queryGrid(this.cells, this.cellSize, x, y, radiusX, radiusY);
-  }
-};
-var EdgeSpatialIndex = class {
-  constructor(nodePositions, graph, drawPaths, axis, cellSize, deletions, version2 = 0, routes2, stranded = false) {
-    this.cells = /* @__PURE__ */ new Map();
-    this.edgeCurves = baseEdgeCurves(
-      nodePositions,
-      graph,
-      axis,
-      deletions,
-      version2,
-      routes2,
-      stranded
-    );
-    const boxes = [];
-    let extentX = 0;
-    let extentY = 0;
-    for (let ei = 0; ei < graph.edges.length; ei++) {
-      const edge = graph.edges[ei];
-      const fromSegments = nodePositions[edge.from];
-      const toSegments = nodePositions[edge.to];
-      const curves = this.edgeCurves.get(ei);
-      if (fromSegments?.length && toSegments?.length && curves) {
-        let { minX, minY, maxX, maxY } = curveBounds(curves);
-        const numPaths = edge.pathIds?.length ?? 0;
-        if (drawPaths && numPaths > 0) {
-          let padX = 0;
-          let padY = 0;
-          for (const o of pathRibbonOffsets(
-            fromSegments,
-            toSegments,
-            numPaths,
-            axis
-          )) {
-            padX = Math.max(padX, Math.abs(o.x));
-            padY = Math.max(padY, Math.abs(o.y));
-          }
-          minX -= padX;
-          minY -= padY;
-          maxX += padX;
-          maxY += padY;
-        }
-        extentX += maxX - minX;
-        extentY += maxY - minY;
-        boxes.push({ ei, minX, minY, maxX, maxY });
-      }
-    }
-    this.cellSize = resolveCellSize(cellSize, boxes, extentX, extentY);
-    for (const b of boxes) {
-      addToGrid(this.cells, this.cellSize, b.minX, b.minY, b.maxX, b.maxY, b.ei);
-    }
-  }
-  getCurves(ei) {
-    return this.edgeCurves.get(ei);
-  }
-  query(x, y, radiusX, radiusY = radiusX) {
-    return queryGrid(this.cells, this.cellSize, x, y, radiusX, radiusY);
-  }
-};
-
-// src/util/hitDetection.ts
-function distanceToSegment(px, py, x1, y1, x2, y2) {
-  const dx = x2 - x1;
-  const dy = y2 - y1;
-  const lenSq = dx * dx + dy * dy;
-  if (lenSq === 0) {
-    return Math.hypot(px - x1, py - y1);
-  }
-  const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lenSq));
-  return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
-}
-function distanceToCubicBezier(px, py, x1, y1, cx1, cy1, cx2, cy2, x2, y2) {
-  let minDist = Infinity;
-  const samples = 20;
-  let lastX = x1;
-  let lastY = y1;
-  for (let i = 1; i <= samples; i++) {
-    const t = i / samples;
-    const u = 1 - t;
-    const bx = u * u * u * x1 + 3 * u * u * t * cx1 + 3 * u * t * t * cx2 + t * t * t * x2;
-    const by = u * u * u * y1 + 3 * u * u * t * cy1 + 3 * u * t * t * cy2 + t * t * t * y2;
-    minDist = Math.min(minDist, distanceToSegment(px, py, lastX, lastY, bx, by));
-    lastX = bx;
-    lastY = by;
-  }
-  return minDist;
-}
-function distanceToBezierCurve(px, py, c) {
-  return distanceToCubicBezier(
-    px,
-    py,
-    c.x0,
-    c.y0,
-    c.cx0,
-    c.cy0,
-    c.cx1,
-    c.cy1,
-    c.x1,
-    c.y1
-  );
-}
-function distanceToEdgeCurves(px, py, curves, yToX = 1) {
-  let minDist = Infinity;
-  for (const c of curves) {
-    const d = distanceToBezierCurve(
-      px,
-      py,
-      yToX === 1 ? c : {
-        x0: c.x0,
-        y0: c.y0 * yToX,
-        cx0: c.cx0,
-        cy0: c.cy0 * yToX,
-        cx1: c.cx1,
-        cy1: c.cy1 * yToX,
-        x1: c.x1,
-        y1: c.y1 * yToX
-      }
-    );
-    if (d < minDist) {
-      minDist = d;
-    }
-  }
-  return minDist;
-}
-var nodeCache = /* @__PURE__ */ new WeakMap();
-function getSpatialIndex(nodePositions, version2) {
-  const cached = nodeCache.get(nodePositions);
-  if (cached?.version === version2) {
-    return cached.index;
-  }
-  const index = new SpatialIndex(nodePositions);
-  nodeCache.set(nodePositions, { version: version2, index });
-  return index;
-}
-var edgeCache = /* @__PURE__ */ new WeakMap();
-function getEdgeSpatialIndex(nodePositions, graph, drawPaths, axis, version2, deletions, routes2, stranded = false) {
-  const cached = edgeCache.get(nodePositions);
-  if (cached?.graph === graph && cached.drawPaths === drawPaths && cached.scaleX === axis.scaleX && cached.scaleY === axis.scaleY && cached.version === version2 && cached.deletions === deletions && cached.routes === routes2 && cached.stranded === stranded) {
-    return cached.index;
-  }
-  const index = new EdgeSpatialIndex(
-    nodePositions,
-    graph,
-    drawPaths,
-    axis,
-    void 0,
-    deletions,
-    version2,
-    routes2,
-    stranded
-  );
-  edgeCache.set(nodePositions, {
-    graph,
-    drawPaths,
-    scaleX: axis.scaleX,
-    scaleY: axis.scaleY,
-    version: version2,
-    index,
-    deletions,
-    routes: routes2,
-    stranded
-  });
-  return index;
-}
-var MIN_NODE_REACH_PX = 5;
-function findHoveredNode(nodePositions, graphX, graphY, axis, version2 = 0, ink) {
-  const yToX = yToXOf(axis);
-  const index = getSpatialIndex(nodePositions, version2);
-  const reach = (px) => Math.max(MIN_NODE_REACH_PX, px) / axis.scaleX;
-  const queryReach = reach(ink?.maxHalfWidthPx ?? 0);
-  const candidates = index.query(graphX, graphY, queryReach, queryReach / yToX);
-  let hovered = null;
-  let best = Infinity;
-  for (const { nodeId, segmentIdx } of candidates) {
-    const segments = nodePositions[nodeId];
-    const dist = distanceToSegment(
-      graphX,
-      graphY * yToX,
-      segments[segmentIdx].x,
-      segments[segmentIdx].y * yToX,
-      segments[segmentIdx + 1].x,
-      segments[segmentIdx + 1].y * yToX
-    );
-    if (dist < best && dist < reach(ink?.halfWidthPx(nodeId) ?? 0)) {
-      best = dist;
-      hovered = nodeId;
-    }
-  }
-  return hovered;
-}
-function findHoveredEdge(nodePositions, graph, graphX, graphY, axis, drawPaths, version2 = 0, deletions, hiddenEdges, deletionRoutes, stranded = false) {
-  const yToX = yToXOf(axis);
-  const edgeThreshold = 10 / axis.scaleX;
-  const edgeIndex = getEdgeSpatialIndex(
-    nodePositions,
-    graph,
-    drawPaths,
-    axis,
-    version2,
-    deletions,
-    deletionRoutes,
-    stranded
-  );
-  const candidates = edgeIndex.query(
-    graphX,
-    graphY,
-    edgeThreshold,
-    edgeThreshold / yToX
-  );
-  let hovered = null;
-  let best = edgeThreshold;
-  for (const edgeIdx of candidates) {
-    const edge = graph.edges[edgeIdx];
-    const fromSegments = nodePositions[edge.from];
-    const toSegments = nodePositions[edge.to];
-    if (!fromSegments?.length || !toSegments?.length || hiddenEdges?.has(edgeIdx)) {
-      continue;
-    }
-    const numPaths = edge.pathIds?.length ?? 0;
-    const baseCurves = edgeIndex.getCurves(edgeIdx);
-    if (!baseCurves) {
-      continue;
-    }
-    let dist;
-    if (!drawPaths || numPaths === 0) {
-      dist = distanceToEdgeCurves(graphX, graphY * yToX, baseCurves, yToX);
-    } else {
-      let minDist = Infinity;
-      for (const offset of pathRibbonOffsets(
-        fromSegments,
-        toSegments,
-        numPaths,
-        axis
-      )) {
-        const curves = offset.x === 0 && offset.y === 0 ? baseCurves : translateCurves(baseCurves, offset.x, offset.y);
-        const d = distanceToEdgeCurves(graphX, graphY * yToX, curves, yToX);
-        if (d < minDist) {
-          minDist = d;
-        }
-      }
-      dist = minDist;
-    }
-    if (dist < best) {
-      best = dist;
-      hovered = edgeIdx;
-    }
-  }
-  return hovered;
-}
-
 // src/util/wheelZoom.ts
 var ZOOM_PER_NOTCH = 1.1;
 var NOTCH_PX = 100;
@@ -1797,6 +1438,7 @@ export {
   BUBBLE_SPREADS,
   COLOR_SCHEMES,
   Canvas2DRenderer,
+  EXON_COLOR,
   FACET_GAP_PX,
   FACET_PAD_PX,
   FACET_TITLE_PX,
@@ -1855,6 +1497,8 @@ export {
   encodingSwatchCss,
   engineKey,
   engineRequest,
+  exonOutlineTree,
+  exonStretches,
   facetCells,
   facetGrid,
   facetLifts,

package/dist/types/gbzWindow.d.ts

@@ -4,7 +4,9 @@ export declare class NoReferenceSampleError extends Error {
     constructor(anchor: string, referenceSamples: string[]);
 }
 export declare class NodeLimitError extends Error {
+    readonly fitsBp: number;
     name: string;
+    readonly regionTooLarge = true;
     constructor(limit: number, windowBp: number, fitsBp: number);
 }
 export declare function haplotypePrefix(name: Pick<PathName, 'sample' | 'haplotype'>): string;

package/dist/types/genes/exonOutline.d.ts

@@ -0,0 +1,18 @@
+import type { El } from '../el.js';
+import type { GenePin } from './genePins.js';
+export declare const EXON_COLOR = "#daa520";
+export interface ExonStretch {
+    key: string;
+    d: string;
+    inner: number;
+}
+export declare function exonStretches(pins: GenePin[], halfWidthPx: (nodeId: string) => number, lift?: {
+    nodeIds: ReadonlySet<string>;
+    walks: readonly unknown[];
+}, pathOf?: (d: string) => string): ExonStretch[];
+export declare function exonOutlineTree(stretches: ExonStretch[], o: {
+    id: string;
+    width: number;
+    height: number;
+    transform?: string;
+}): El | undefined;

package/dist/types/genes/genePins.d.ts

@@ -17,6 +17,7 @@ export interface GenePin {
         nodeId: string;
         d: string;
     }[];
+    nodeIds: ReadonlySet<string>;
     at: NodeSegment;
     covered: number;
 }

package/dist/types/index.d.ts

@@ -68,6 +68,8 @@ export { ROW_HEIGHT_PX } from './layout/rowSpacing.js';
 export { HALO_FACTOR, LEGEND_INSET_PX, geneCoverageNote, layoutLabels, } from './labelLayout.js';
 export type { LabelLayout, LabelLayoutSource } from './labelLayout.js';
 export { formatBp } from './graphLabels.js';
+export { EXON_COLOR, exonOutlineTree, exonStretches } from './genes/exonOutline.js';
+export type { ExonStretch } from './genes/exonOutline.js';
 export { genePins } from './genes/genePins.js';
 export type { GeneModel, GenePin } from './genes/genePins.js';
 export { WELL_KNOWN_SAMPLES, assemblyWalk, backboneAssembly, featuresOnBackbone, graphBackbone, refNameBinding, referenceLabel, wellKnownSample, } from './reference.js';

package/dist/types/labelLayout.d.ts

@@ -3,7 +3,7 @@ import type { DeletionEdge } from './deletionEdges.js';
 import type { GenePin } from './genes/genePins.js';
 import type { GraphLabel } from './graphLabels.js';
 import type { DeletionRoutes } from './layout/deletionRoutes.js';
-import type { PlacedLabel } from './overlayLabels.js';
+import type { Box, PlacedLabel } from './overlayLabels.js';
 import type { AlleleDeletion, NodeSegment } from './types.js';
 import type { AxisScale } from './util/geometry.js';
 export declare const HALO_FACTOR = 3.4;
@@ -55,12 +55,13 @@ export declare function geneLabelCandidates(pins: GenePin[], screen: (p: {
 }) => {
     x: number;
     y: number;
-}, contigThickness: number): {
+}, contigThickness: number, nodesUnder: (box: Box) => ReadonlySet<string>): {
     item: GenePin;
     x: number;
     y: number;
     text: string;
     fallback: string | undefined;
     stack: number;
+    fits: (box: Box) => boolean;
 }[];
 export declare function layoutLabels(m: LabelLayoutSource): LabelLayout;

package/dist/types/overlayLabels.d.ts

@@ -14,6 +14,7 @@ export interface LabelCandidate<T> {
     text: string;
     stack?: number;
     fallback?: string;
+    fits?: (box: Box) => boolean;
 }
 export interface PlacedLabel<T> extends LabelCandidate<T> {
     w: number;

package/dist/types/util/hitDetection.d.ts

@@ -1,4 +1,5 @@
 import type { DeletionRoutes } from '../layout/deletionRoutes.js';
+import type { Box } from '../overlayLabels.js';
 import type { Graph, NodeSegment } from '../types.js';
 import type { AxisScale } from './geometry.js';
 export declare function distanceToSegment(px: number, py: number, x1: number, y1: number, x2: number, y2: number): number;
@@ -8,4 +9,10 @@ export interface NodeInk {
     maxHalfWidthPx: number;
 }
 export declare function findHoveredNode(nodePositions: Record<string, NodeSegment[]>, graphX: number, graphY: number, axis: AxisScale, version?: number, ink?: NodeInk): string | null;
+export declare function nodesUnderBox(nodePositions: Record<string, NodeSegment[]>, t: {
+    scaleX: number;
+    scaleY: number;
+    translateX: number;
+    translateY: number;
+}, version?: number): (box: Box) => Set<string>;
 export declare function findHoveredEdge(nodePositions: Record<string, NodeSegment[]>, graph: Graph, graphX: number, graphY: number, axis: AxisScale, drawPaths: boolean, version?: number, deletions?: Map<number, string[]>, hiddenEdges?: ReadonlySet<number>, deletionRoutes?: DeletionRoutes, stranded?: boolean): number | null;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "5.1.0";
+export declare const version = "5.2.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/bandage-core",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Pangenome graph layout and drawing with no host: GFA in, the Bandage force-directed engine and reference-anchored layouts, a Canvas2D renderer, hit testing and labels out",
   "license": "GPL-3.0-or-later",
   "repository": {