@jbrowse/bandage-core 4.0.24 → 4.0.26

package/dist/chunks/{chunk-4AOHEU76.js → chunk-75KVO2WV.js}

@@ -387,6 +387,18 @@ function anchorFromPaths(graph, preferred) {
 function anchorGraph(graph, preferred) {
   return graph.anchoredBy === "tags" ? graph : anchorFromPaths(graph, preferred);
 }
+function trimOrigins(origins, paths, stretches) {
+  const pieces = /* @__PURE__ */ new Map();
+  for (const path of paths) {
+    const origin = pathOrigin(path.name).name;
+    pieces.set(origin, (pieces.get(origin) ?? 0) + 1);
+  }
+  return origins.map((o) => {
+    const path = paths.find((p) => pathOrigin(p.name).name === o.name);
+    const stretch = path ? stretches.get(path.name) : void 0;
+    return stretch && pieces.get(o.name) === 1 ? { ...o, start: o.start + stretch.dropped, length: stretch.bp } : o;
+  });
+}
 
 // src/gfa/gfaConverter.ts
 function surveySegments(gfaGraph) {
@@ -1772,9 +1784,9 @@ function sampleRowLayout(graph, region, keep = []) {
     },
     positions: nodePositions
   });
-  const referenceSample = parsePanSN(backbone[0].stable.refName).sample;
+  const referenceSample2 = parsePanSN(backbone[0].stable.refName).sample;
   const rowLabels = [
-    { label: referenceSample, y: 0 },
+    { label: referenceSample2, y: 0 },
     ...samples.map((sample) => ({
       label: sample,
       y: rowOf.get(sample) * ROW_HEIGHT_PX
@@ -2818,10 +2830,10 @@ function brightenAbgr(c, factor) {
 
 // src/util/edgeCurves.ts
 var cache = /* @__PURE__ */ new WeakMap();
-function baseEdgeCurves(nodePositions, graph, axis, deletions, version) {
+function baseEdgeCurves(nodePositions, graph, axis, deletions, version2) {
   const { scaleX, scaleY } = axis;
   const cached2 = cache.get(nodePositions);
-  if (cached2?.graph === graph && cached2.scaleX === scaleX && cached2.scaleY === scaleY && cached2.deletions === deletions && cached2.version === version) {
+  if (cached2?.graph === graph && cached2.scaleX === scaleX && cached2.scaleY === scaleY && cached2.deletions === deletions && cached2.version === version2) {
     return cached2.curves;
   }
   const curves = /* @__PURE__ */ new Map();
@@ -2850,7 +2862,7 @@ function baseEdgeCurves(nodePositions, graph, axis, deletions, version) {
     scaleX,
     scaleY,
     deletions,
-    version,
+    version: version2,
     curves
   });
   return curves;
@@ -3312,7 +3324,7 @@ function buildGeometry(options) {
     referenceRamp,
     deletions,
     hiddenEdges,
-    version = 0
+    version: version2 = 0
   } = options;
   const depthNorm = nodeWidth2 === "depth" ? meanDepth(graph) : 0;
   const scale = axis.scaleX;
@@ -3322,7 +3334,7 @@ function buildGeometry(options) {
     graph,
     axis,
     deletions,
-    version
+    version2
   );
   const nodeStrokes = [];
   const nodeStrokeRuns = /* @__PURE__ */ new Map();
@@ -3871,10 +3883,10 @@ function labelOrder(nodePositions, nodeLengths) {
   return order;
 }
 var arcCache = /* @__PURE__ */ new WeakMap();
-function arcPlacements(nodePositions, deletions, axis, version) {
+function arcPlacements(nodePositions, deletions, axis, version2) {
   const { scaleX, scaleY } = axis;
   const cached2 = arcCache.get(nodePositions);
-  if (cached2?.deletions === deletions && cached2.scaleX === scaleX && cached2.scaleY === scaleY && cached2.version === version) {
+  if (cached2?.deletions === deletions && cached2.scaleX === scaleX && cached2.scaleY === scaleY && cached2.version === version2) {
     return cached2.arcs;
   }
   const arcs = [];
@@ -3892,7 +3904,7 @@ function arcPlacements(nodePositions, deletions, axis, version) {
       });
     }
   }
-  arcCache.set(nodePositions, { deletions, scaleX, scaleY, version, arcs });
+  arcCache.set(nodePositions, { deletions, scaleX, scaleY, version: version2, arcs });
   return arcs;
 }
 function sizeLabelCandidates({
@@ -3905,7 +3917,7 @@ function sizeLabelCandidates({
   translateY,
   width,
   height,
-  version = 0
+  version: version2 = 0
 }) {
   const { scaleX, scaleY } = axis;
   const deletionCandidates = [];
@@ -3914,7 +3926,7 @@ function sizeLabelCandidates({
     nodePositions,
     deletions,
     axis,
-    version
+    version2
   )) {
     if (extent >= MIN_DELETION_LABEL_PX) {
       const text = deletionText(deletion.bp);
@@ -4278,7 +4290,7 @@ function liftOf(walks, ramp) {
 function rangeText(contig, start, end) {
   const s = Math.round(start);
   const e = Math.round(end);
-  return `${contig ? `${contig}:` : ""}${s.toLocaleString()}-${e.toLocaleString()} (${formatBp(e - s)})`;
+  return `${contig ? `${contig}:` : ""}${s.toLocaleString("en-US")}-${e.toLocaleString("en-US")} (${formatBp(e - s)})`;
 }
 function walkKey(walk, reference) {
   const { field } = walk.encoding;
@@ -4292,6 +4304,15 @@ function walkKey(walk, reference) {
     hover: scale === own ? void 0 : own
   };
 }
+function walkPosition(walk, nodeId, length) {
+  const progress = walk.progress.get(nodeId);
+  const range = walk.range;
+  if (progress === void 0 || !range) {
+    return void 0;
+  }
+  const start = Math.round(range.start + progress * walk.bp - length / 2);
+  return `${range.contig}:${start.toLocaleString("en-US")}-${(start + length).toLocaleString("en-US")}`;
+}
 
 // src/facetGrid.ts
 var FACET_GAP_PX = 8;
@@ -4364,6 +4385,223 @@ function facetCells(names, by) {
   return cells.includes(-1) || new Set(cells).size < cells.length ? wrap : { columns, count: rows.length * columns, cells };
 }
 
+// src/genes/genePins.ts
+function genePins(graph, genes, positions) {
+  const byRefName = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    if (isBackbone(node)) {
+      const { refName } = node.stable;
+      if (positions[node.id]?.length) {
+        const entry = byRefName.get(refName) ?? byRefName.set(refName, { nodes: [], reach: 0 }).get(refName);
+        entry.nodes.push(node);
+        entry.reach = Math.max(entry.reach, node.length);
+      }
+    }
+  }
+  for (const { nodes } of byRefName.values()) {
+    nodes.sort((a, b) => a.stable.start - b.stable.start);
+  }
+  const pins = [];
+  for (const gene of genes) {
+    const backbone = byRefName.get(gene.refName);
+    if (!backbone) {
+      continue;
+    }
+    const parts = [];
+    const exonsByNode = [];
+    let at;
+    let atDistance = Infinity;
+    let covered = 0;
+    const mid = (gene.start + gene.end) / 2;
+    const { nodes, reach } = backbone;
+    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;
+      const nodeEnd = nodeStart + node.length;
+      if (nodeEnd <= gene.start) {
+        continue;
+      }
+      const line = positions[node.id];
+      covered += Math.min(nodeEnd, gene.end) - Math.max(nodeStart, gene.start);
+      const nodeParts = [];
+      for (const exon of gene.exons) {
+        const a = Math.max(exon.start, nodeStart);
+        const b = Math.min(exon.end, nodeEnd);
+        if (b <= a) {
+          continue;
+        }
+        const stretch = polylineSlice(
+          line,
+          (a - nodeStart) / node.length,
+          (b - nodeStart) / node.length
+        );
+        if (stretch.length === 1) {
+          stretch.push({ ...stretch[0] });
+        }
+        nodeParts.push(svgPath(stretch));
+      }
+      if (nodeParts.length > 0) {
+        parts.push(...nodeParts);
+        exonsByNode.push({ nodeId: node.id, d: nodeParts.join("") });
+      }
+      const pinBp = Math.min(Math.max(mid, nodeStart), nodeEnd);
+      const distance = Math.abs(pinBp - mid);
+      if (distance < atDistance) {
+        atDistance = distance;
+        const [p] = polylineSlice(
+          line,
+          (pinBp - nodeStart) / node.length,
+          (pinBp - nodeStart) / node.length
+        );
+        at = p;
+      }
+    }
+    if (at) {
+      pins.push({
+        gene,
+        exons: parts.join(""),
+        exonsByNode,
+        at,
+        covered: covered / (gene.end - gene.start)
+      });
+    }
+  }
+  return pins;
+}
+
+// src/labelLayout.ts
+var HALO_FACTOR = 3.4;
+var LEGEND_INSET_PX = 6;
+var ROUTE_STACK = 8;
+var GENE_PIN_DROP_PX = 18;
+var GENE_STACK = 2;
+var TOPMOST_BASELINE = LABEL_PX + LABEL_PAD;
+function geneCoverageNote(pin) {
+  const length = pin.gene.end - pin.gene.start;
+  if (pin.covered >= 0.98) {
+    return void 0;
+  }
+  const [per, unit] = length >= 1e6 ? [1e6, "Mb"] : length >= 1e3 ? [1e3, "kb"] : [1, "bp"];
+  const amount = (bp) => +(bp / per).toFixed(per === 1 ? 0 : 1);
+  return `${amount(pin.covered * length)} of ${amount(length)} ${unit}`;
+}
+function geneLabelCandidates(pins, screen, contigThickness) {
+  return byExtent(pins, (pin) => pin.gene.end - pin.gene.start).map((pin) => {
+    const { x, y } = screen(pin.at);
+    const note = geneCoverageNote(pin);
+    return {
+      item: pin,
+      x,
+      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
+    };
+  });
+}
+function byExtent(items, extent) {
+  return [...items].sort((a, b) => extent(b) - extent(a));
+}
+function layoutLabels(m) {
+  const { paneWidth: width, canvasHeight: height, translateX, translateY } = m;
+  const { scaleX, scaleY } = m.axisScale;
+  const frame = { width, height };
+  const screen = (p) => ({
+    x: p.x * scaleX + translateX,
+    y: p.y * scaleY + translateY
+  });
+  const reserved = m.drawnRowLabels.map(
+    ({ label, y }) => rowLabelBox(label, y * scaleY + translateY)
+  );
+  const stripPx = m.referenceStripZonePx ?? 0;
+  if (stripPx > 0) {
+    reserved.push({ x0: 0, x1: width, y0: 0, y1: stripPx });
+  }
+  if (m.legendSize.width > 0) {
+    reserved.push({
+      x0: width - LEGEND_INSET_PX - m.legendSize.width,
+      x1: width,
+      y0: 0,
+      y1: stripPx + LEGEND_INSET_PX + m.legendSize.height
+    });
+  }
+  if (m.poppedFrom) {
+    reserved.push({
+      x0: 0,
+      x1: 60 + m.poppedFrom.label.length * LABEL_CHAR_PX * 1.2,
+      y0: 0,
+      y1: 44
+    });
+  }
+  const take = occupancy(frame, reserved);
+  const onRows = m.drawnRowLabels.length > 0;
+  const rowsTop = onRows ? Math.min(...m.drawnRowLabels.map((r) => r.y)) : Infinity;
+  const halo = m.contigThickness * HALO_FACTOR;
+  const byBubble = byExtent(m.bubbleHalos, (h) => h.members);
+  const bubbles = placeLabels(
+    byBubble.map((h) => {
+      const { x, y } = screen({
+        x: h.labelAt.x,
+        y: Math.min(h.labelAt.y, rowsTop)
+      });
+      const baseline = y - halo / 2 - 6;
+      return {
+        item: h,
+        x,
+        y: onRows ? Math.max(baseline, TOPMOST_BASELINE) : baseline,
+        text: h.label
+      };
+    }),
+    frame,
+    take
+  );
+  const genes = placeLabels(
+    geneLabelCandidates(m.genePins, screen, m.contigThickness),
+    frame,
+    take
+  );
+  const sizeCandidates = m.nodePositions && m.labelsNodeSizes ? sizeLabelCandidates({
+    nodePositions: m.nodePositions,
+    nodeLengths: m.nodeLengths,
+    deletions: m.showDeletionEdges ? m.deletions : [],
+    alleleDeletions: m.alleleDeletions,
+    axis: m.axisScale,
+    translateX,
+    translateY,
+    width,
+    height,
+    version: m.positionsVersion
+  }) : { deletions: [], nodes: [] };
+  const deletionLabels = placeSizeLabels(sizeCandidates.deletions, take);
+  const routes = placeLabels(
+    byBubble.flatMap(
+      (h) => h.routes.map((route) => {
+        const { x, y } = screen(route.at);
+        return {
+          item: { halo: h, route },
+          x,
+          y: y + 4,
+          text: route.text,
+          stack: ROUTE_STACK
+        };
+      })
+    ),
+    frame,
+    take
+  );
+  const nodeLabels = placeSizeLabels(
+    sizeCandidates.nodes,
+    take,
+    nodeLabelBudget(width, height)
+  );
+  return {
+    bubbles,
+    genes,
+    routes,
+    sizes: [...deletionLabels, ...nodeLabels]
+  };
+}
+
 // src/renderer/svgCanvas.ts
 var n = (v) => +v.toFixed(1);
 function paint(css) {
@@ -4380,9 +4618,43 @@ function paintAttrs(kind, css) {
   const { color, opacity } = paint(css);
   return `${kind}="${color}"${opacity < 1 ? ` ${kind}-opacity="${n(opacity)}"` : ""}`;
 }
+var DOT_PX = 0.5;
+var DOT_CELL_PX = 0.25;
 function svgCanvas(width, height) {
   const out = [];
-  let d = "";
+  let subpaths = [];
+  const start = (x, y) => {
+    const s = { d: `M${n(x)} ${n(y)}`, segments: 0, x0: x, x1: x, y0: y, y1: y };
+    subpaths.push(s);
+    return s;
+  };
+  const reach = (points) => {
+    const s = subpaths.at(-1) ?? start(points[0], points[1]);
+    for (let i = 0; i < points.length; i += 2) {
+      s.x0 = Math.min(s.x0, points[i]);
+      s.x1 = Math.max(s.x1, points[i]);
+      s.y0 = Math.min(s.y0, points[i + 1]);
+      s.y1 = Math.max(s.y1, points[i + 1]);
+    }
+    s.segments++;
+    return s;
+  };
+  const pathData = (dots) => {
+    const seen = /* @__PURE__ */ new Set();
+    return subpaths.map((s) => {
+      if (!dots || s.x1 - s.x0 >= DOT_PX || s.y1 - s.y0 >= DOT_PX) {
+        return s.d;
+      }
+      const x = (s.x0 + s.x1) / 2;
+      const y = (s.y0 + s.y1) / 2;
+      const cell = `${Math.round(x / DOT_CELL_PX)} ${Math.round(y / DOT_CELL_PX)}`;
+      if (s.segments === 0 || seen.has(cell)) {
+        return "";
+      }
+      seen.add(cell);
+      return `M${n(x)} ${n(y)}h0`;
+    }).join("");
+  };
   const ctx = {
     canvas: void 0,
     fillStyle: "#000",
@@ -4391,21 +4663,25 @@ function svgCanvas(width, height) {
     lineCap: "butt",
     lineJoin: "miter",
     beginPath() {
-      d = "";
+      subpaths = [];
     },
     moveTo(x, y) {
-      d += `M${n(x)} ${n(y)}`;
+      start(x, y);
     },
     lineTo(x, y) {
-      d += `L${n(x)} ${n(y)}`;
+      reach([x, y]).d += `L${n(x)} ${n(y)}`;
     },
     bezierCurveTo(cx0, cy0, cx1, cy1, x, y) {
-      d += `C${n(cx0)} ${n(cy0)} ${n(cx1)} ${n(cy1)} ${n(x)} ${n(y)}`;
+      reach([cx0, cy0, cx1, cy1, x, y]).d += `C${n(cx0)} ${n(cy0)} ${n(cx1)} ${n(cy1)} ${n(x)} ${n(y)}`;
     },
     closePath() {
-      d += "Z";
+      const s = subpaths.at(-1);
+      if (s) {
+        s.d += "Z";
+      }
     },
     stroke() {
+      const d = pathData(ctx.lineCap !== "butt");
       if (d) {
         out.push(
           `<path d="${d}" fill="none" ${paintAttrs("stroke", ctx.strokeStyle)} stroke-width="${n(ctx.lineWidth)}" stroke-linecap="${ctx.lineCap}" stroke-linejoin="${ctx.lineJoin}"/>`
@@ -4413,6 +4689,7 @@ function svgCanvas(width, height) {
       }
     },
     fill() {
+      const d = pathData(false);
       if (d) {
         out.push(`<path d="${d}" ${paintAttrs("fill", ctx.fillStyle)}/>`);
       }
@@ -4437,6 +4714,9 @@ function svgCanvas(width, height) {
   };
 }
 
+// src/version.ts
+var version = "4.0.26";
+
 // src/viewport.ts
 function axisScaleOf(scale, pixelRows) {
   return { scaleX: scale, scaleY: pixelRows ? 1 : scale, pixelRows };
@@ -4484,6 +4764,11 @@ var BAR_PX = 48;
 var SWATCH_PX = 18;
 var KEY_GAP_PX = 16;
 var FADED = "rgb(160,160,160)";
+var EXON_COLOR = "#daa520";
+var GENE_INK = "#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;");
 }
@@ -4512,18 +4797,30 @@ function walkKeySvg(id, x, y, walk, label, reference) {
     key.scale
   );
 }
+function screenPath(d, t) {
+  return d.replaceAll(
+    /([ML])(-?[\d.e-]+),(-?[\d.e-]+)/g,
+    (_, cmd, x, y) => `${cmd}${+(Number(x) * t.scaleX + t.translateX).toFixed(1)},${+(Number(y) * t.scaleY + t.translateY).toFixed(1)}`
+  );
+}
+function chip(x, y, w, name, note) {
+  return `<rect x="${x - w / 2}" y="${y - LABEL_PX - LABEL_PAD + 2}" width="${w}" height="${LABEL_PX + LABEL_PAD * 2 - 2}" rx="3" fill="#fff" fill-opacity="0.85" stroke="${EXON_COLOR}"/><text x="${x}" y="${y}" font-family="Helvetica, Arial, sans-serif" font-size="${LABEL_PX}" fill="${GENE_INK}" text-anchor="middle"><tspan font-style="italic" font-weight="600">${esc(name)}</tspan>${note ? esc(note) : ""}</text>`;
+}
 function figureSvg(graph, layout, o = {}) {
   const width = o.width ?? 1200;
   const room = o.height ?? 800;
   const region = o.region;
-  const bounds = drawingBounds(layout, { region });
+  const rampDomain = o.colorDomain ?? region;
+  const bounds = drawingBounds(layout, {
+    region: o.fitToDrawing ? void 0 : region
+  });
   const pixelRows = layout.pixelRows ?? false;
   const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
   const colorScheme = resolveColorScheme(o.colorScheme ?? "auto", graph);
-  const referenceRamp = colorScheme === "reference-position" && !layout.tubeMap ? computeReferenceRamp(graph, region) : void 0;
+  const referenceRamp = colorScheme === "reference-position" && !layout.tubeMap ? computeReferenceRamp(graph, rampDomain) : void 0;
   const deletions = layout.tubeMap ? [] : deletionEdges(graph);
   const layers = o.walks ?? [];
-  const walkRamp = layers.some((l) => l.color?.field === "reference") ? referenceRamp ?? computeReferenceRamp(graph, region) : void 0;
+  const walkRamp = layers.some((l) => l.color?.field === "reference") ? referenceRamp ?? computeReferenceRamp(graph, rampDomain) : void 0;
   const lift = layers.length > 0 && !layout.tubeMap ? walkLift(graph, layers, walkRamp) : void 0;
   const by = o.facet ?? "none";
   const panels = by !== "none" && lift && lift.walks.length > 1 ? facetLifts(graph, lift, layers, walkRamp) : void 0;
@@ -4538,6 +4835,58 @@ function figureSvg(graph, layout, o = {}) {
     ...lift.referenceDomain,
     name: region?.refName
   };
+  const contigThickness = o.contigThickness ?? 6;
+  const nodeWidth2 = o.nodeWidth ?? "depth";
+  const pins = o.genes?.length && !layout.tubeMap ? genePins(graph, o.genes, layout.nodePositions) : [];
+  const ink = nodeInk(graph, nodeById, contigThickness, nodeWidth2);
+  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
+      }))
+    );
+    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})"/>`
+      );
+    }
+    const screen = (p) => ({
+      x: p.x * t.scaleX + t.translateX,
+      y: p.y * t.scaleY + t.translateY
+    });
+    const frame = { width: w, height: h };
+    for (const { item: pin, x, y, w: cw, text } of placeLabels(
+      geneLabelCandidates(pins, screen, contigThickness),
+      frame,
+      occupancy(frame)
+    )) {
+      const pinY = screen(pin.at).y + contigThickness / 2;
+      out.push(
+        `<line x1="${x}" x2="${x}" y1="${y - LABEL_PX - 2}" y2="${pinY}" stroke="${GENE_INK}" stroke-width="0.8" stroke-opacity="0.6"/>`,
+        chip(x, y, cw, pin.gene.name, text.slice(pin.gene.name.length))
+      );
+    }
+    for (const { label, y } of layout.rowLabels ?? []) {
+      const sy = y * t.scaleY + t.translateY;
+      if (sy >= 0 && sy <= h) {
+        out.push(
+          `<text x="6" y="${sy + 4}" ${FONT} stroke="#fff" stroke-width="3" paint-order="stroke">${esc(label)}</text>`
+        );
+      }
+    }
+    return out.join("");
+  }
   function drawing(highlight, w, h) {
     const fit = fitTransform(
       bounds,
@@ -4563,10 +4912,10 @@ function figureSvg(graph, layout, o = {}) {
         graph,
         nodeById,
         colorScheme,
-        contigThickness: o.contigThickness ?? 6,
+        contigThickness,
         connectorThickness: o.connectorThickness ?? 2,
         drawPaths: false,
-        nodeWidth: o.nodeWidth ?? "depth",
+        nodeWidth: nodeWidth2,
         highlight,
         axis,
         referenceRamp,
@@ -4576,15 +4925,15 @@ function figureSvg(graph, layout, o = {}) {
         )
       })
     );
-    renderer.updateTransform({
+    const t = {
       scaleX: axis.scaleX,
       scaleY: axis.scaleY,
       translateX: fit.translateX,
-      translateY: fit.translateY,
-      dpr: 1
-    });
+      translateY: fit.translateY
+    };
+    renderer.updateTransform({ ...t, dpr: 1 });
     renderer.render([1, 1, 1, 1]);
-    return markup();
+    return markup() + overlays(highlight, t, w, h);
   }
   const parts = [];
   let height;
@@ -4663,10 +5012,169 @@ function figureSvg(graph, layout, o = {}) {
     );
     height = header + h;
   }
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${o.metadata ? `<metadata>${esc(o.metadata)}</metadata>` : ""}<rect width="${width}" height="${height}" fill="#fff"/>${parts.join("")}</svg>
+  const metadata = JSON.stringify({
+    generator: `@jbrowse/bandage-core@${version}`,
+    ...o.spec === void 0 ? {} : { spec: o.spec }
+  });
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><metadata>${esc(metadata)}</metadata><rect width="${width}" height="${height}" fill="#fff"/>${parts.join("")}</svg>
 `;
 }
 
+// src/genes/geneFiles.ts
+var GENE_TYPE = /(gene|gene_segment|RNA|transcript)$/i;
+var isGene = (type) => GENE_TYPE.test(type) || type === "CDS" || type === "exon";
+function mergedIntervals(intervals) {
+  const out = [];
+  for (const iv of [...intervals].sort((a, b) => a.start - b.start)) {
+    const last = out.at(-1);
+    if (last && iv.start <= last.end) {
+      last.end = Math.max(last.end, iv.end);
+    } else {
+      out.push({ ...iv });
+    }
+  }
+  return out;
+}
+function strandOf(s) {
+  return s === "+" ? 1 : s === "-" ? -1 : 0;
+}
+function unescape(value) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+function attributes(column) {
+  const out = /* @__PURE__ */ new Map();
+  for (const pair of column.split(";")) {
+    const eq = pair.indexOf("=");
+    if (eq > 0) {
+      out.set(pair.slice(0, eq).trim(), unescape(pair.slice(eq + 1).trim()));
+    }
+  }
+  return out;
+}
+function gff3Row(line) {
+  const cols = line.split("	");
+  const start = Number(cols[3]);
+  const end = Number(cols[4]);
+  if (cols.length < 9 || !Number.isInteger(start) || !Number.isInteger(end)) {
+    return void 0;
+  }
+  return {
+    refName: cols[0],
+    type: cols[2],
+    start: start - 1,
+    end,
+    strand: strandOf(cols[6]),
+    attrs: attributes(cols[8])
+  };
+}
+function genesFromGff3Lines(lines) {
+  const rows = [];
+  for (const line of lines) {
+    if (line.startsWith("##FASTA")) {
+      break;
+    }
+    const row = line.startsWith("#") ? void 0 : gff3Row(line);
+    if (row) {
+      rows.push(row);
+    }
+  }
+  const parentOf = /* @__PURE__ */ new Map();
+  for (const { attrs } of rows) {
+    const id = attrs.get("ID");
+    const parent = attrs.get("Parent")?.split(",")[0];
+    if (id && parent) {
+      parentOf.set(id, parent);
+    }
+  }
+  const rootOf = (row) => {
+    let id = row.attrs.get("Parent")?.split(",")[0] ?? row.attrs.get("ID");
+    if (!id) {
+      return row.attrs.get("gene_id");
+    }
+    const seen = /* @__PURE__ */ new Set();
+    while (id && parentOf.has(id) && !seen.has(id)) {
+      seen.add(id);
+      id = parentOf.get(id);
+    }
+    return id;
+  };
+  const groups = /* @__PURE__ */ new Map();
+  rows.forEach((row, i) => {
+    const root = rootOf(row) ?? `#${i}`;
+    const key = `${row.refName}	${root}`;
+    const group = groups.get(key) ?? groups.set(key, { rows: [] }).get(key);
+    group.rows.push(row);
+    if (!row.attrs.has("Parent") && !group.top) {
+      group.top = row;
+    }
+  });
+  const genes = [];
+  for (const [key, { top, rows: rows2 }] of groups) {
+    if (top && !isGene(top.type)) {
+      continue;
+    }
+    const first = top ?? rows2[0];
+    const start = top?.start ?? Math.min(...rows2.map((r) => r.start));
+    const end = top?.end ?? Math.max(...rows2.map((r) => r.end));
+    const a = first.attrs;
+    const exons = rows2.filter((r) => r.type === "exon").map((r) => ({ start: r.start, end: r.end }));
+    genes.push({
+      name: a.get("Name") ?? a.get("gene_name") ?? a.get("gene") ?? a.get("gene_id") ?? key.split("	")[1],
+      refName: first.refName,
+      start,
+      end,
+      strand: first.strand,
+      exons: exons.length ? mergedIntervals(exons) : [{ start, end }]
+    });
+  }
+  return genes;
+}
+function genesFromBed(text) {
+  const genes = /* @__PURE__ */ new Map();
+  for (const line of text.split("\n")) {
+    const cols = line.replace(/\r$/, "").split("	");
+    const start = Number(cols[1]);
+    const end = Number(cols[2]);
+    if (/^(#|track|browser)/.test(line) || cols.length < 3 || !Number.isInteger(start) || !(end > start)) {
+      continue;
+    }
+    const refName = cols[0];
+    const name = cols[3] && cols[3] !== "." ? cols[3] : `${refName}:${start + 1}-${end}`;
+    const sizes = cols[10]?.split(",").filter((s) => s !== "").map(Number);
+    const starts = cols[11]?.split(",").filter((s) => s !== "").map(Number);
+    const blocks = sizes?.length && sizes.length === starts?.length ? sizes.map((size, i) => ({
+      start: start + starts[i],
+      end: start + starts[i] + size
+    })) : [{ start, end }];
+    const key = `${refName}	${name}`;
+    const gene = genes.get(key);
+    if (gene) {
+      gene.start = Math.min(gene.start, start);
+      gene.end = Math.max(gene.end, end);
+      gene.exons = mergedIntervals([...gene.exons, ...blocks]);
+    } else {
+      genes.set(key, {
+        name,
+        refName,
+        start,
+        end,
+        strand: strandOf(cols[5]),
+        exons: mergedIntervals(blocks)
+      });
+    }
+  }
+  return [...genes.values()];
+}
+function genesFromText(text) {
+  const first = text.split("\n", 1e3).find((l) => l.trim() !== "" && !/^(#|track|browser)/.test(l));
+  const cols = first?.split("	") ?? [];
+  return /^\d+$/.test(cols[1] ?? "") && /^\d+$/.test(cols[2] ?? "") ? genesFromBed(text) : genesFromGff3Lines(text.split(/\r?\n/));
+}
+
 // src/reference.ts
 var WELL_KNOWN_SAMPLES = /* @__PURE__ */ new Map([
   ["hg38", "GRCh38"],
@@ -4841,9 +5349,9 @@ function resolveReferenceSample({
   }
   return sample;
 }
-async function referencePathQuery(db, referenceSample, refName) {
+async function referencePathQuery(db, referenceSample2, refName) {
   const path = (await db.paths()).find(
-    (p) => p.isIndexed && p.name.sample === referenceSample && p.name.contig === refName
+    (p) => p.isIndexed && p.name.sample === referenceSample2 && p.name.contig === refName
   );
   return path ? {
     sample: path.name.sample,
@@ -4872,6 +5380,60 @@ async function cutWindowGFA(db, query, start, end, { keep, ...opts }) {
   return subgraph ? subgraph.toGFA({ names: "resolved" }) : "";
 }
 
+// src/gbzCut.ts
+import { GBZBase } from "@gmod/gbz-base";
+var HPRC_GBZ = {
+  db: "https://s3-us-west-2.amazonaws.com/human-pangenomics/pangenomes/freeze/release2/minigraph-cactus/v2.1/hprc-v2.1-mc-grch38/hprc-v2.1-mc-grch38.gbz.db",
+  index: "https://jbrowse.org/demos/hprc/hprc-v2.1-mc-grch38.haplotype-index.anchored.db"
+};
+var WALK_LIMIT = 1e5;
+function parseRegion(text) {
+  const m = /^\s*([^:\s]+):([\d,]+)-([\d,]+)\s*$/.exec(text);
+  if (!m) {
+    throw new Error(
+      `"${text}" is not a region like chr6:160,614,798-160,647,758`
+    );
+  }
+  const n2 = (s) => Number(s.replaceAll(",", ""));
+  return { refName: m[1], start: n2(m[2]), end: n2(m[3]) };
+}
+async function openGbz(db, index) {
+  const base = await GBZBase.open(db, index ? { haplotypeIndex: index } : {});
+  return { base, referenceSamples: await referenceSamplesOf(base) };
+}
+function referenceSample(ref, samples) {
+  try {
+    return resolveReferenceSample({
+      configured: "",
+      anchorPrefix: ref ?? samples[0] ?? "",
+      referenceSamples: samples
+    });
+  } catch (e) {
+    if (ref) {
+      return ref;
+    }
+    throw e;
+  }
+}
+async function cutGbzRegion({ base, referenceSamples }, src, signal) {
+  const region = parseRegion(src.region);
+  const sample = referenceSample(src.referenceSample, referenceSamples);
+  const query = await referencePathQuery(base, sample, region.refName);
+  if (!query) {
+    throw new Error(`${sample} has no indexed path named ${region.refName}`);
+  }
+  signal?.throwIfAborted();
+  const wanted = src.haplotypes?.length ? src.haplotypes : void 0;
+  const text = await cutWindowGFA(base, query, region.start, region.end, {
+    context: src.context ?? 1e3,
+    snarls: src.snarls ?? "contained",
+    limit: WALK_LIMIT,
+    signal,
+    ...wanted ? { keep: (name) => haplotypeWanted(name, wanted) } : {}
+  });
+  return { text, region, sample };
+}
+
 // src/loadBandage.ts
 var cached;
 function loadBandage() {
@@ -4884,12 +5446,11 @@ function loadBandage() {
 
 export {
   isBackbone,
-  firstNodeAtOrAfter,
   BUBBLE_SPREADS,
   panSNSample,
   panSNHaplotype,
   panSNContig,
-  polylineSlice,
+  trimOrigins,
   loadGraph,
   engineRequest,
   engineKey,
@@ -4907,6 +5468,7 @@ export {
   walkRowsExtent,
   FORCE_LAYOUT_LABEL,
   LAYOUT_MODES,
+  LAYOUT_MODE_VALUES,
   modeUsesLayoutEngine,
   layoutModeByValue,
   COLOR_SCHEMES,
@@ -4935,13 +5497,7 @@ export {
   LABEL_PX,
   LABEL_CHAR_PX,
   LABEL_PAD,
-  occupancy,
-  placeLabels,
-  rowLabelBox,
   formatBp,
-  sizeLabelCandidates,
-  nodeLabelBudget,
-  placeSizeLabels,
   WALK_FIELDS,
   WALK_SCHEMES,
   resolveEncoding,
@@ -4953,12 +5509,19 @@ export {
   facetLifts,
   rangeText,
   walkKey,
+  walkPosition,
   FACET_GAP_PX,
   FACET_TITLE_PX,
   FACET_PAD_PX,
   facetGrid,
   facetCells,
+  genePins,
+  HALO_FACTOR,
+  LEGEND_INSET_PX,
+  geneCoverageNote,
+  layoutLabels,
   svgCanvas,
+  version,
   axisScaleOf,
   viewportOf,
   padded,
@@ -4966,6 +5529,9 @@ export {
   zoomAbout,
   screenToLayout,
   figureSvg,
+  genesFromGff3Lines,
+  genesFromBed,
+  genesFromText,
   WELL_KNOWN_SAMPLES,
   wellKnownSample,
   graphBackbone,
@@ -4978,5 +5544,9 @@ export {
   resolveReferenceSample,
   referencePathQuery,
   cutWindowGFA,
+  HPRC_GBZ,
+  parseRegion,
+  openGbz,
+  cutGbzRegion,
   loadBandage
 };