@jbrowse/bandage-core 0.1.5 → 0.1.7

package/dist/index.js

@@ -269,12 +269,12 @@ function parseGFA(file) {
         });
       }
     } else if (line.startsWith("W")) {
-      const [, sample, hap, contig2, start, end, body, ...rest] = line.split("	");
-      if (sample && hap && contig2 && start && end && body) {
+      const [, sample, hap, contig, start, end, body, ...rest] = line.split("	");
+      if (sample && hap && contig && start && end && body) {
         graph.walks.push({
           sample,
           haplotype: +hap,
-          contig: contig2,
+          contig,
           start: start === "*" ? -1 : +start,
           end: end === "*" ? -1 : +end,
           segments: parseWalkBody(body),
@@ -538,7 +538,7 @@ function sidesOf(edge) {
   return { from, to };
 }
 function mergeRuns(graph) {
-  const sides = graph.edges.map(sidesOf);
+  const sides2 = graph.edges.map(sidesOf);
   const at = /* @__PURE__ */ new Map();
   const attach = (id, side, ei) => {
     const key = `${id}|${side}`;
@@ -550,8 +550,8 @@ function mergeRuns(graph) {
     }
   };
   graph.edges.forEach((edge, ei) => {
-    attach(edge.from, sides[ei].from, ei);
-    attach(edge.to, sides[ei].to, ei);
+    attach(edge.from, sides2[ei].from, ei);
+    attach(edge.to, sides2[ei].to, ei);
   });
   const joinAfter = (a) => {
     const out = at.get(`${a}|end`);
@@ -560,7 +560,7 @@ function mergeRuns(graph) {
     }
     const ei = out[0];
     const edge = graph.edges[ei];
-    return edge.from === a && edge.to !== a && sides[ei].from === "end" && sides[ei].to === "start" && at.get(`${edge.to}|start`)?.length === 1 ? ei : void 0;
+    return edge.from === a && edge.to !== a && sides2[ei].from === "end" && sides2[ei].to === "start" && at.get(`${edge.to}|start`)?.length === 1 ? ei : void 0;
   };
   const joined = /* @__PURE__ */ new Set();
   const runOf = /* @__PURE__ */ new Map();
@@ -620,7 +620,7 @@ function mergeRuns(graph) {
   graph.edges.forEach((edge, ei) => {
     const from = runOf.get(edge.from);
     const to = runOf.get(edge.to);
-    const side = sides[ei];
+    const side = sides2[ei];
     const key = `${from}|${side.from}>${to}|${side.to}`;
     if (joined.has(ei) || seen.has(key)) {
       return;
@@ -971,23 +971,31 @@ var MAX_ZOOM = 100;
 function clampZoom(zoom) {
   return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom));
 }
-function fittedTranslateY(bounds, usableHeight, yScale) {
+function fittedTranslateY(bounds, usableHeight, yScale, padTop = FIT_PADDING) {
   const leftoverY = usableHeight - bounds.h * yScale;
-  return FIT_PADDING - bounds.minY * yScale + Math.max(0, leftoverY) / 2;
+  return padTop - bounds.minY * yScale + Math.max(0, leftoverY) / 2;
 }
-function fitTransform(bounds, paneWidth, paneHeight, pixelRows) {
-  const usableWidth = paneWidth - FIT_PADDING * 2;
-  const usableHeight = paneHeight - FIT_PADDING * 2;
+function fitTransform(bounds, paneWidth, paneHeight, pixelRows, { minScale = 0, padLeft = FIT_PADDING, padTop = FIT_PADDING } = {}) {
+  const usableWidth = paneWidth - padLeft - FIT_PADDING;
+  const usableHeight = paneHeight - padTop - FIT_PADDING;
   if (usableWidth <= 0 || usableHeight <= 0 || !(bounds.w > 0 || !pixelRows && bounds.h > 0)) {
     return void 0;
   }
   const fitX = bounds.w > 0 ? usableWidth / bounds.w : Infinity;
   const fitY = bounds.h > 0 ? usableHeight / bounds.h : Infinity;
-  const scale = clampZoom(pixelRows ? fitX : Math.min(fitX, fitY));
+  const scale = clampZoom(
+    Math.max(minScale, pixelRows ? fitX : Math.min(fitX, fitY))
+  );
+  const leftoverX = usableWidth - bounds.w * scale;
   return {
     scale,
-    translateX: FIT_PADDING - bounds.minX * scale + (usableWidth - bounds.w * scale) / 2,
-    translateY: fittedTranslateY(bounds, usableHeight, pixelRows ? 1 : scale)
+    translateX: padLeft - bounds.minX * scale + Math.max(0, leftoverX) / 2,
+    translateY: fittedTranslateY(
+      bounds,
+      usableHeight,
+      pixelRows ? 1 : scale,
+      padTop
+    )
   };
 }
 function drawingBounds(layout, opts = {}) {
@@ -2010,7 +2018,6 @@ function walkRows(graph, region, unit) {
     return void 0;
   }
   const lengthOf = new Map(graph.nodes.map((n) => [n.id, n.length]));
-  const onReference = new Set(reference.nodeIds);
   const referenceStart = graph.anchorPaths?.find((p) => p.name === pathOrigin(reference.name).name)?.start ?? 0;
   const cut = region && region.end > region.start ? region : void 0;
   const span = /* @__PURE__ */ new Map();
@@ -2028,17 +2035,34 @@ function walkRows(graph, region, unit) {
     const runs = [];
     let bp = 0;
     let offReferenceBp = 0;
+    let step = 0;
     for (const id of ids) {
       const len = lengthOf.get(id) ?? 0;
-      const shared = onReference.has(id);
+      const s = span.get(id);
       const last = runs.at(-1);
-      if (last?.onReference === shared) {
+      const at = last?.referenceStart;
+      const forward2 = s && at !== void 0 && step >= 0 && at + last.bp === s.start;
+      const backward = s && at !== void 0 && step <= 0 && s.end === at;
+      if (!s && last && !last.onReference) {
         last.bp += len;
+      } else if (forward2 || backward) {
+        last.bp += len;
+        if (!forward2) {
+          last.referenceStart = s.start;
+          last.reversed = true;
+        }
+        step = forward2 ? 1 : -1;
       } else {
-        runs.push({ start: bp, bp: len, onReference: shared });
+        runs.push({
+          start: bp,
+          bp: len,
+          onReference: s !== void 0,
+          referenceStart: s?.start
+        });
+        step = 0;
       }
       bp += len;
-      if (!shared) {
+      if (!s) {
         offReferenceBp += len;
       }
     }
@@ -2046,6 +2070,7 @@ function walkRows(graph, region, unit) {
       name: path.name,
       label: labelOf(path),
       sample: sampleOf(path),
+      haplotype: path.haplotype,
       bp,
       offReferenceBp,
       complete,
@@ -2574,9 +2599,9 @@ function computeEdgeCurves(fromSegments, toSegments, selfLink, offsetX, offsetY,
       offsetY
     );
   }
-  const sides = selfLink ? { from: "end", to: "start" } : facingSides(fromSegments, toSegments);
-  const fromAttach = attachment(fromSegments, sides.from);
-  const toAttach = attachment(toSegments, sides.to);
+  const sides2 = selfLink ? { from: "end", to: "start" } : facingSides(fromSegments, toSegments);
+  const fromAttach = attachment(fromSegments, sides2.from);
+  const toAttach = attachment(toSegments, sides2.to);
   const fromEnd = fromAttach.at;
   const toStart = toAttach.at;
   const p1x = fromEnd.x + offsetX;
@@ -3066,7 +3091,9 @@ function hashColor(str, alpha) {
 var REFERENCE_RAMP_MAX_HUE = 300;
 var REFERENCE_RAMP_SATURATION = 0.7;
 var REFERENCE_RAMP_LIGHTNESS = 0.5;
-var REFERENCE_RAMP_ALT_COLOR = packAbgr2(60, 65, 72, 255);
+var REFERENCE_RAMP_ALT_RGB = [60, 65, 72];
+var REFERENCE_RAMP_ALT_COLOR = packAbgr2(...REFERENCE_RAMP_ALT_RGB, 255);
+var REFERENCE_RAMP_ALT_CSS = `rgb(${REFERENCE_RAMP_ALT_RGB.join(", ")})`;
 function computeReferenceRamp(graph, domain) {
   const midpoints = referenceMidpoints(graph);
   if (domain && domain.end > domain.start) {
@@ -4123,6 +4150,7 @@ function tubeMapPicture(layout) {
     }
   });
   return {
+    bounds: layout.bounds,
     layers: [layerOf(layout, "haplotype"), layerOf(layout, "read")],
     nodes,
     mismatches: tubeMapMismatches(layout).filter(
@@ -4193,6 +4221,11 @@ function fillByColor(ctx, items, visible, addTo) {
   }
   ctx.globalAlpha = 1;
 }
+var FULL_OUTLINE_PX = 12;
+var MIN_OUTLINE_ALPHA = 0.15;
+function outlineAlpha(screenWidth) {
+  return Math.max(MIN_OUTLINE_ALPHA, Math.min(1, screenWidth / FULL_OUTLINE_PX));
+}
 function drawTubeMap(ctx, picture, frame) {
   const { x, y, width } = frame;
   const visible = (item) => x(item.x1) >= 0 && x(item.x0) <= width;
@@ -4217,7 +4250,9 @@ function drawTubeMap(ctx, picture, frame) {
       ctx.fillStyle = lit ? "rgba(255,192,203,0.5)" : fill;
       ctx.strokeStyle = lit ? "#ff0000" : stroke;
       ctx.fill();
+      ctx.globalAlpha = lit ? 1 : outlineAlpha(x(node.x1) - x(node.x0));
       ctx.stroke();
+      ctx.globalAlpha = 1;
     }
   }
   drawMismatches(ctx, picture.mismatches, frame);
@@ -4350,720 +4385,1057 @@ function tubeMapNodeAt(drawing, { x, y }, sx, sy) {
   return hit;
 }
 
-// src/walkHighlight.ts
-function walkHighlight(graph, name) {
-  const path = graph.paths?.find((p) => p.name === name);
-  if (!path) {
-    return void 0;
-  }
-  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
-  const edgeAt = /* @__PURE__ */ new Map();
-  graph.edges.forEach((e, i) => {
-    edgeAt.set(`${e.from}>${e.to}`, i);
-  });
-  const nodeIds = new Set(path.nodeIds);
-  const edgeIndexes = /* @__PURE__ */ new Set();
-  for (let i = 1; i < path.nodeIds.length; i++) {
-    const a = path.nodeIds[i - 1];
-    const b = path.nodeIds[i];
-    const index = edgeAt.get(`${a}>${b}`) ?? edgeAt.get(`${b}>${a}`);
-    if (index !== void 0) {
-      edgeIndexes.add(index);
+// src/overlayLabels.ts
+var LABEL_PX = 11;
+var LABEL_CHAR_PX = 6.2;
+var LABEL_PAD = 4;
+function labelWidth(text) {
+  return text.length * LABEL_CHAR_PX + LABEL_PAD * 2;
+}
+function overlaps(a, b) {
+  return a.x0 < b.x1 && a.x1 > b.x0 && a.y0 < b.y1 && a.y1 > b.y0;
+}
+function offFrame(box, frame) {
+  return box.x1 <= 0 || box.x0 >= frame.width || box.y1 <= 0 || box.y0 >= frame.height;
+}
+function insideFrame(box, frame) {
+  return box.x0 >= 0 && box.x1 <= frame.width && box.y0 >= 0 && box.y1 <= frame.height;
+}
+function occupancy(frame, reserved = []) {
+  const placed = [...reserved];
+  return (box) => {
+    if (offFrame(box, frame) || placed.some((p) => overlaps(p, box))) {
+      return false;
     }
-  }
-  const bpOf = (ids) => ids.reduce((sum, id) => sum + (byId.get(id)?.length ?? 0), 0);
-  const reference = graph.referencePath ? graph.paths.find((p) => pathOrigin(p.name).name === graph.referencePath) : void 0;
-  return {
-    name,
-    nodeIds,
-    edgeIndexes,
-    steps: path.nodeIds.length,
-    bp: bpOf(path.nodeIds),
-    referenceBp: reference && reference !== path ? bpOf(reference.nodeIds) : void 0
+    placed.push(box);
+    return true;
   };
 }
-
-// src/bubbles/bubbleLine.ts
-var SATURATED_PATH_COUNT = 2147483647;
-
-// src/bubbles/bubblesFromGraph.ts
-function bubblesFromGraph(graph) {
-  if (!graph.nodes.some(isBackbone)) {
-    return [];
-  }
-  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
-  const order = referenceOrder(graph);
-  const indexOf = new Map(order.map((id, i) => [id, i]));
-  const reach = new Int32Array(order.length + 1);
-  const succ = /* @__PURE__ */ new Map();
-  const linked = /* @__PURE__ */ new Set();
-  for (const e of graph.edges) {
-    const a = indexOf.get(e.from);
-    const b = indexOf.get(e.to);
-    if (a === void 0 || b === void 0 || a === b) {
-      continue;
-    }
-    linked.add(`${e.from}>${e.to}`).add(`${e.to}>${e.from}`);
-    const [lo, hi] = a < b ? [a, b] : [b, a];
-    reach[lo + 1]++;
-    reach[hi]--;
-    const [from, to] = a < b ? [e.from, e.to] : [e.to, e.from];
-    (succ.get(from) ?? succ.set(from, /* @__PURE__ */ new Set()).get(from)).add(to);
-  }
-  for (let i = 1; i < reach.length; i++) {
-    reach[i] += reach[i - 1];
-  }
-  const backbone = graph.nodes.filter(isBackbone).sort((a, b) => a.stable.start - b.stable.start);
-  const ends = /* @__PURE__ */ new Set([backbone[0].id, backbone.at(-1).id]);
-  const boundaries = backbone.map((node) => [node, indexOf.get(node.id)]).filter(([node, i]) => ends.has(node.id) || reach[i] === 0).sort(([a, ia], [b, ib]) => ia - ib || a.stable.start - b.stable.start);
-  const walkIndex = graph.paths?.map((p) => {
-    const at = /* @__PURE__ */ new Map();
-    p.nodeIds.forEach((id, i) => {
-      if (!at.has(id)) {
-        at.set(id, i);
-      }
-    });
-    return at;
-  });
-  const bubbles = [];
-  for (let i = 0; i + 1 < boundaries.length; i++) {
-    const [start, i0] = boundaries[i];
-    const [end, i1] = boundaries[i + 1];
-    const interior = order.slice(i0 + 1, i1);
-    if (interior.length === 0) {
-      continue;
-    }
-    const best = /* @__PURE__ */ new Map([[start.id, { min: 0, max: 0, n: 1 }]]);
-    for (const id of [start.id, ...interior]) {
-      const cur = best.get(id);
-      if (!cur) {
-        continue;
+function placeLabels(candidates, frame, take) {
+  const out = [];
+  const row = LABEL_PX + LABEL_PAD * 2;
+  for (const c of candidates) {
+    const w = labelWidth(c.text);
+    const direction = c.y > frame.height / 2 ? -1 : 1;
+    for (let tries = 0; tries <= (c.stack ?? 0); tries++) {
+      const y = c.y + direction * tries * row;
+      const box = {
+        x0: c.x - w / 2,
+        x1: c.x + w / 2,
+        y0: y - LABEL_PX - LABEL_PAD,
+        y1: y + LABEL_PAD
+      };
+      if (offFrame(box, frame)) {
+        break;
       }
-      for (const t of succ.get(id) ?? []) {
-        const ti = indexOf.get(t);
-        if (ti > i1) {
-          continue;
-        }
-        const add = t === end.id ? 0 : byId.get(t).length;
-        const prev = best.get(t);
-        best.set(t, {
-          min: Math.min(prev?.min ?? Infinity, cur.min + add),
-          max: Math.max(prev?.max ?? -Infinity, cur.max + add),
-          n: Math.min(SATURATED_PATH_COUNT, cur.n + (prev?.n ?? 0))
-        });
+      if (insideFrame(box, frame) && take(box)) {
+        out.push({ ...c, y, w });
+        break;
       }
     }
-    const walked = walkIndex && walkRoutes(graph, byId, walkIndex, start.id, end.id);
-    const crossed = walked?.n ? walked : void 0;
-    const routes2 = crossed ?? best.get(end.id) ?? { min: 0, max: 0, n: 0 };
-    const walksLeave = walked !== void 0 && walked.left > 0;
-    const refStart = start.stable.start + start.length;
-    const refEnd = end.stable.start;
-    const chain = [
-      start.id,
-      ...interior.filter((id) => isBackbone(byId.get(id))),
-      end.id
-    ];
-    const chainBroken = chain.some(
-      (id, k) => k > 0 && !linked.has(`${chain[k - 1]}>${id}`)
-    );
-    const partial = chainBroken || walksLeave;
-    const fallback = chainBroken && !crossed;
-    bubbles.push({
-      refName: start.stable.refName,
-      start: refStart,
-      end: refEnd,
-      segmentCount: interior.length + 2,
-      pathCount: routes2.n,
-      // a real inversion test needs each walk's direction relative to the
-      // reference; the first visit's strand is just whichever path anchored the
-      // node
-      inversion: false,
-      shortestAlleleLength: fallback ? refEnd - refStart : routes2.min,
-      longestAlleleLength: fallback ? refEnd - refStart : routes2.max,
-      segments: [start, ...interior.map((id) => byId.get(id)), end].map((n) => n.name).join(","),
-      shortestAllele: void 0,
-      longestAllele: void 0,
-      partial,
-      routes: crossed?.routes
-    });
   }
-  return bubbles;
-}
-function walkRoutes(graph, byId, walkIndex, startId, endId) {
-  const seen = /* @__PURE__ */ new Map();
-  let min = Infinity;
-  let max = -Infinity;
-  let left = 0;
-  graph.paths.forEach((p, k) => {
-    const i0 = walkIndex[k].get(startId);
-    const i1 = walkIndex[k].get(endId);
-    if (i0 === void 0 || i1 === void 0) {
-      if (i0 !== void 0 || i1 !== void 0) {
-        left++;
-      }
-      return;
-    }
-    const steps = p.nodeIds.slice(Math.min(i0, i1) + 1, Math.max(i0, i1));
-    if (i1 < i0) {
-      steps.reverse();
-    }
-    let bp = 0;
-    for (const id of steps) {
-      bp += byId.get(id)?.length ?? 0;
-    }
-    const key = steps.join(",");
-    const route = seen.get(key) ?? { steps, bp, walks: [] };
-    route.walks.push(p.name);
-    seen.set(key, route);
-    min = Math.min(min, bp);
-    max = Math.max(max, bp);
-  });
-  return seen.size || left ? { min, max, n: seen.size, left, routes: [...seen.values()] } : void 0;
+  return out;
 }
 
-// src/bubbles/classifyBubble.ts
-var REPEAT_GROWTH = 10;
-function coveringRepeat(b, repeats) {
-  const span = b.end - b.start;
-  const growth = b.longestAlleleLength - b.shortestAlleleLength;
-  return repeats.find(
-    (r) => growth <= REPEAT_GROWTH * (r.end - r.start) && (span === 0 ? r.start <= b.start && b.start <= r.end : Math.min(b.end, r.end) - Math.max(b.start, r.start) >= span / 2)
-  );
-}
-var SUPERBUBBLE_SEGMENTS = 40;
-function formatBp(bp) {
-  if (bp >= 1e4) {
-    return `${(bp / 1e3).toFixed(0)} kb`;
-  }
-  if (bp >= 1e3) {
-    return `${(bp / 1e3).toFixed(1)} kb`;
-  }
-  return `${bp} bp`;
+// src/graphLabels.ts
+var MIN_DELETION_LABEL_PX = 26;
+var PX_PER_NODE_LABEL = 4e4;
+var MIN_NODE_LABELS = 8;
+var LEADER_GAP_PX = 8;
+var LABEL_CHAR_PX2 = 5.7;
+var LABEL_PAD_PX = 6;
+var LABEL_HEIGHT_PX = 13;
+var LABEL_GAP_PX = 3;
+var MAX_LABEL_OVERHANG = 2;
+function labelHalfWidth(text) {
+  return (text.length * LABEL_CHAR_PX2 + LABEL_PAD_PX + LABEL_GAP_PX) / 2;
 }
-function formatBpRange(shortest, longest) {
-  const low = formatBp(shortest);
-  const high = formatBp(longest);
-  const unit = high.slice(high.indexOf(" "));
-  return low.endsWith(unit) ? `${low.slice(0, -unit.length)}\u2013${high}` : `${low}\u2013${high}`;
+var LABEL_HALF_HEIGHT = (LABEL_HEIGHT_PX + LABEL_GAP_PX) / 2;
+var MIN_LABEL_HALF_WIDTH = labelHalfWidth("1 bp");
+function boxAt(halfW, x, y) {
+  return {
+    x0: x - halfW,
+    x1: x + halfW,
+    y0: y - LABEL_HALF_HEIGHT,
+    y1: y + LABEL_HALF_HEIGHT
+  };
 }
-function routes(count) {
-  if (count >= SATURATED_PATH_COUNT) {
-    return "\u22652.1B routes";
-  }
-  if (count >= 1e5) {
-    return `${(count / 1e3).toFixed(0)}k routes`;
-  }
-  return `${count} routes`;
+function rowLabelBox(text, screenY) {
+  return {
+    x0: 6,
+    x1: 6 + text.length * 6.2 + 8 + LABEL_GAP_PX,
+    y0: screenY - 8 - LABEL_GAP_PX / 2,
+    y1: screenY + 8 + LABEL_GAP_PX / 2
+  };
 }
-function classifyBubble(b, repeats = []) {
-  const c = classifyShape(b, repeats);
-  return b.partial ? { ...c, label: `${c.label}, partial` } : c;
+function clamp(v, lo, hi) {
+  return hi < lo ? v : Math.min(Math.max(v, lo), hi);
 }
-function classifyShape(b, repeats) {
-  const refSpan = b.end - b.start;
-  const {
-    shortestAlleleLength: shortest,
-    longestAlleleLength: longest,
-    pathCount,
-    segmentCount,
-    inversion
-  } = b;
-  const range = formatBpRange(shortest, longest);
-  if (segmentCount >= SUPERBUBBLE_SEGMENTS) {
-    return {
-      kind: "superbubble",
-      label: `${range} superbubble, ${segmentCount} segments, ${routes(pathCount)}${inversion ? ", inv" : ""}`
-    };
+function formatBp(bp) {
+  if (bp >= 1e6) {
+    return `${+(bp / 1e6).toFixed(1)} Mb`;
   }
-  if (inversion) {
-    return { kind: "inversion", label: `${formatBp(longest)} inv` };
+  return bp >= 1e3 ? `${+(bp / 1e3).toFixed(1)} kb` : `${bp} bp`;
+}
+function deletionText(bp) {
+  return `${formatBp(bp)} del`;
+}
+function arcOutward(curves, apex, scaleX, scaleY) {
+  const first = curves[0];
+  const last = curves[curves.length - 1];
+  const dx = (apex.x - (first.x0 + last.x1) / 2) * scaleX;
+  const dy = (apex.y - (first.y0 + last.y1) / 2) * scaleY;
+  const len = Math.hypot(dx, dy);
+  return len === 0 ? { x: 0, y: -1 } : { x: dx / len, y: dy / len };
+}
+function boxSupport(box, dir) {
+  return Math.abs(dir.x) * (box.x1 - box.x0) / 2 + Math.abs(dir.y) * (box.y1 - box.y0) / 2;
+}
+function boxRayCrossing(box, dir) {
+  const halfW = (box.x1 - box.x0) / 2;
+  const halfH = (box.y1 - box.y0) / 2;
+  return Math.min(
+    dir.x === 0 ? Infinity : halfW / Math.abs(dir.x),
+    dir.y === 0 ? Infinity : halfH / Math.abs(dir.y)
+  );
+}
+function drawnLength(segments, scaleX, scaleY) {
+  let total = 0;
+  for (let i = 1; i < segments.length; i++) {
+    const a = segments[i - 1];
+    const b = segments[i];
+    total += Math.hypot((b.x - a.x) * scaleX, (b.y - a.y) * scaleY);
   }
-  const repeat = longest !== shortest ? coveringRepeat(b, repeats) : void 0;
-  if (repeat) {
-    const name = repeat.name ? ` (${repeat.name})` : "";
-    return {
-      kind: "repeat",
-      label: `${range} repeat array${name}, ${routes(pathCount)}`
-    };
+  return total;
+}
+function runBounds(nodeIds, nodePositions) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const id of nodeIds) {
+    for (const p of nodePositions[id] ?? []) {
+      minX = Math.min(minX, p.x);
+      maxX = Math.max(maxX, p.x);
+      minY = Math.min(minY, p.y);
+      maxY = Math.max(maxY, p.y);
+    }
   }
-  const alleles = pathCount > 2 ? `, ${pathCount} alleles` : "";
-  if (shortest === longest && shortest === refSpan) {
-    return refSpan <= 1 ? { kind: "snp", label: "SNP" } : { kind: "substitution", label: `${formatBp(refSpan)} sub` };
+  return minX === Infinity ? void 0 : { minX, minY, maxX, maxY };
+}
+var nodeOrderCache = /* @__PURE__ */ new WeakMap();
+function labelOrder(nodePositions, nodeLengths) {
+  const cached2 = nodeOrderCache.get(nodePositions);
+  if (cached2?.nodeLengths === nodeLengths) {
+    return cached2.order;
   }
-  if (refSpan === 0 || shortest === refSpan) {
-    return {
-      kind: "insertion",
-      label: `\u2264${formatBp(longest - refSpan)} ins${alleles}`
-    };
+  const order = Object.entries(nodePositions).filter(([id, segments]) => segments.length > 0 && nodeLengths.has(id)).sort(([a], [b]) => nodeLengths.get(b) - nodeLengths.get(a));
+  nodeOrderCache.set(nodePositions, { nodeLengths, order });
+  return order;
+}
+var arcCache = /* @__PURE__ */ new WeakMap();
+function arcPlacements(nodePositions, deletions, axis, version) {
+  const { scaleX, scaleY } = axis;
+  const cached2 = arcCache.get(nodePositions);
+  if (cached2?.deletions === deletions && cached2.scaleX === scaleX && cached2.scaleY === scaleY && cached2.version === version) {
+    return cached2.arcs;
   }
-  if (longest === refSpan) {
-    return {
-      kind: "deletion",
-      label: `${formatBp(refSpan - shortest)} del${alleles}`
-    };
+  const arcs = [];
+  for (const deletion of [...deletions].sort((a, b) => b.bp - a.bp)) {
+    const curves = deletionArcCurves(nodePositions, deletion, axis);
+    const apex = curves ? curveMidpoint(curves) : void 0;
+    if (curves && apex) {
+      const { minX, minY, maxX, maxY } = curveBounds(curves);
+      arcs.push({
+        deletion,
+        curves,
+        apex,
+        // in screen px, so the two axes' units cannot be added by accident
+        extent: Math.max((maxX - minX) * scaleX, (maxY - minY) * scaleY)
+      });
+    }
   }
-  return {
-    kind: "complex",
-    label: `${formatBp(refSpan)} ref \u2192 ${range}, ${pathCount} alleles`
-  };
-}
-var BUBBLE_KIND_COLORS = {
-  snp: "#5b6b7a",
-  substitution: "#5b6b7a",
-  insertion: "#2f8fd6",
-  deletion: "#c94040",
-  inversion: "#e07b00",
-  repeat: "#8e3fbf",
-  superbubble: "#8e3fbf",
-  complex: "#8e3fbf"
-};
-var BUBBLE_KIND_NAMES = {
-  snp: "SNP",
-  substitution: "substitution",
-  insertion: "insertion",
-  deletion: "deletion",
-  inversion: "inversion",
-  repeat: "repeat array",
-  superbubble: "superbubble",
-  complex: "site"
-};
-function bubbleSegmentIds(b) {
-  return b.segments.split(",").filter(Boolean);
+  arcCache.set(nodePositions, { deletions, scaleX, scaleY, version, arcs });
+  return arcs;
 }
-
-// src/bubbles/bubbleHalos.ts
-var WHOLE_FRACTION = 0.9;
-var NAMED_WALKS = 2;
-var MIN_CHIPPED_BP = 1e3;
-function bubbleHalos(graph, bubbles, positions, walkLabel = (name) => name, repeats = []) {
-  const byName = new Map(graph.nodes.map((n) => [n.name, n]));
-  const halos = [];
-  for (const bubble of bubbles) {
-    const parts = [];
-    let minX = Infinity;
-    let maxX = -Infinity;
-    let minY = Infinity;
-    const nodeIds = [];
-    const ends = [];
-    for (const name of bubbleSegmentIds(bubble)) {
-      const node = byName.get(name);
-      const line = node && positions[node.id];
-      if (!node || !line?.length) {
-        continue;
-      }
-      if (isBackbone(node) && (node.stable.start < bubble.start || node.stable.start >= bubble.end)) {
-        ends.push(line[Math.floor(line.length / 2)]);
-        continue;
-      }
-      nodeIds.push(node.id);
-      parts.push(svgPath(line.length === 1 ? [line[0], line[0]] : line));
-      for (const p of line) {
-        minX = Math.min(minX, p.x);
-        maxX = Math.max(maxX, p.x);
-        minY = Math.min(minY, p.y);
+function sizeLabelCandidates({
+  nodePositions,
+  nodeLengths,
+  deletions,
+  alleleDeletions,
+  axis,
+  translateX,
+  translateY,
+  width,
+  height,
+  version = 0
+}) {
+  const { scaleX, scaleY } = axis;
+  const deletionCandidates = [];
+  const nodeCandidates = [];
+  for (const { deletion, curves, apex, extent } of arcPlacements(
+    nodePositions,
+    deletions,
+    axis,
+    version
+  )) {
+    if (extent >= MIN_DELETION_LABEL_PX) {
+      const text = deletionText(deletion.bp);
+      const halfW = labelHalfWidth(text);
+      const box = boxAt(halfW, 0, 0);
+      const arcX = apex.x * scaleX + translateX;
+      const arcY = apex.y * scaleY + translateY;
+      const fits = extent >= halfW * 2 / MAX_LABEL_OVERHANG;
+      const bow = arcOutward(curves, apex, scaleX, scaleY);
+      const offset = boxSupport(box, bow) + LEADER_GAP_PX;
+      const x = fits ? arcX : clamp(arcX + bow.x * offset, halfW, width - halfW);
+      const y = fits ? arcY : clamp(
+        arcY + bow.y * offset,
+        LABEL_HALF_HEIGHT,
+        height - LABEL_HALF_HEIGHT
+      );
+      const away = Math.hypot(x - arcX, y - arcY);
+      let leader;
+      if (away > 0) {
+        const dir = { x: (x - arcX) / away, y: (y - arcY) / away };
+        const crossing = boxRayCrossing(box, dir);
+        leader = {
+          arcX,
+          arcY,
+          labelX: x - dir.x * crossing,
+          labelY: y - dir.y * crossing
+        };
       }
+      deletionCandidates.push({
+        label: {
+          key: `del:${deletion.edgeIndex}`,
+          text,
+          x,
+          y,
+          kind: "deletion",
+          leader
+        },
+        box: boxAt(halfW, x, y)
+      });
     }
-    if (nodeIds.length === 0) {
+  }
+  const labelledByDeletion = /* @__PURE__ */ new Set();
+  const alleleRuns = [...alleleDeletions ?? []].sort((a, b) => b.bp - a.bp);
+  for (const run of alleleRuns) {
+    const drawn = runBounds(run.nodeIds, nodePositions);
+    if (!drawn) {
       continue;
     }
-    const labelAt = { x: (minX + maxX) / 2, y: minY };
-    const anchor = ends.length ? {
-      x: ends.reduce((s, p) => s + p.x, 0) / ends.length,
-      y: ends.reduce((s, p) => s + p.y, 0) / ends.length
-    } : labelAt;
-    const sharing = /* @__PURE__ */ new Map();
-    for (const route of bubble.routes ?? []) {
-      for (const id of new Set(route.steps)) {
-        sharing.set(id, (sharing.get(id) ?? 0) + 1);
-      }
+    const shownLeft = Math.max(drawn.minX * scaleX + translateX, 0);
+    const shownRight = Math.min(drawn.maxX * scaleX + translateX, width);
+    const shownTop = Math.max(drawn.minY * scaleY + translateY, 0);
+    const shownBottom = Math.min(drawn.maxY * scaleY + translateY, height);
+    if (shownRight < shownLeft || shownBottom < shownTop) {
+      continue;
     }
-    const routes2 = [];
-    for (const route of bubble.routes ?? []) {
-      if (bubble.longestAlleleLength < MIN_CHIPPED_BP) {
-        break;
-      }
-      if (route.steps.length === 0) {
-        continue;
-      }
-      const rarest = Math.min(...route.steps.map((id) => sharing.get(id)));
-      let at;
-      let far = -1;
-      for (const id of route.steps) {
-        if (sharing.get(id) !== rarest) {
-          continue;
-        }
-        for (const p of positions[id] ?? []) {
-          const d = Math.hypot(p.x - anchor.x, p.y - anchor.y);
-          if (d > far) {
-            far = d;
-            at = p;
-          }
-        }
-      }
-      if (at) {
-        routes2.push({ route, at, text: routeText(route, walkLabel) });
+    const extent = Math.max(shownRight - shownLeft, shownBottom - shownTop);
+    const text = deletionText(run.bp);
+    const halfW = labelHalfWidth(text);
+    if (extent >= halfW * 2 / MAX_LABEL_OVERHANG) {
+      for (const id of run.nodeIds) {
+        labelledByDeletion.add(id);
       }
+      const x = clamp((shownLeft + shownRight) / 2, halfW, width - halfW);
+      const y = clamp(
+        (shownTop + shownBottom) / 2,
+        LABEL_HALF_HEIGHT,
+        height - LABEL_HALF_HEIGHT
+      );
+      deletionCandidates.push({
+        label: {
+          key: `alleledel:${run.nodeIds.join(",")}`,
+          text,
+          x,
+          y,
+          kind: "deletion"
+        },
+        box: boxAt(halfW, x, y)
+      });
+    }
+  }
+  for (const [id, segments] of labelOrder(nodePositions, nodeLengths)) {
+    if (labelledByDeletion.has(id)) {
+      continue;
+    }
+    const { x, y } = polylineMidpoint(segments);
+    const screenY = y * scaleY + translateY;
+    if (screenY + LABEL_HALF_HEIGHT <= 0 || screenY - LABEL_HALF_HEIGHT >= height) {
+      continue;
+    }
+    const drawn = drawnLength(segments, scaleX, scaleY);
+    if (drawn < MIN_LABEL_HALF_WIDTH * 2 / MAX_LABEL_OVERHANG) {
+      continue;
+    }
+    const text = formatBp(nodeLengths.get(id));
+    const halfW = labelHalfWidth(text);
+    if (drawn >= halfW * 2 / MAX_LABEL_OVERHANG) {
+      const screenX = x * scaleX + translateX;
+      nodeCandidates.push({
+        label: {
+          key: `node:${id}`,
+          text,
+          x: screenX,
+          y: screenY,
+          kind: "node"
+        },
+        box: boxAt(halfW, screenX, screenY)
+      });
+    }
+  }
+  return { deletions: deletionCandidates, nodes: nodeCandidates };
+}
+function nodeLabelBudget(width, height) {
+  return Math.max(
+    MIN_NODE_LABELS,
+    Math.floor(width * height / PX_PER_NODE_LABEL)
+  );
+}
+function placeSizeLabels(candidates, take, budget = Infinity) {
+  const labels = [];
+  for (const { label, box } of candidates) {
+    if (labels.length >= budget) {
+      break;
+    }
+    if (take(box)) {
+      labels.push(label);
+    }
+  }
+  return labels;
+}
+
+// src/tubeMap/axis.ts
+function referenceBoxes(graph, layout) {
+  const nodeById = new Map(graph.nodes.map((n) => [n.id, n]));
+  const byRefName = /* @__PURE__ */ new Map();
+  layout.nodes.forEach((node) => {
+    const graphNode = nodeById.get(node.name);
+    if (node.order >= 0 && graphNode && isBackbone(graphNode)) {
+      const { refName, start } = graphNode.stable;
+      const boxes = byRefName.get(refName) ?? byRefName.set(refName, []).get(refName);
+      boxes.push({
+        bp0: start,
+        bp1: start + node.sequenceLength,
+        x0: node.x,
+        x1: node.x + node.pixelWidth
+      });
+    }
+  });
+  for (const boxes of byRefName.values()) {
+    boxes.sort((a, b) => a.bp0 - b.bp0);
+  }
+  return byRefName;
+}
+function tubeX(boxes, bp, isEnd = false) {
+  let lo = 0;
+  let hi = boxes.length - 1;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    const bp1 = boxes[mid].bp1;
+    if (isEnd ? bp1 < bp : bp1 <= bp) {
+      lo = mid + 1;
+    } else {
+      hi = mid;
+    }
+  }
+  const box = boxes[lo];
+  if (bp <= box.bp0) {
+    return box.x0;
+  }
+  const span = box.bp1 - box.bp0;
+  return span > 0 ? box.x0 + (Math.min(bp, box.bp1) - box.bp0) / span * (box.x1 - box.x0) : box.x0;
+}
+function tubeSpan(boxes, start, end) {
+  const a = tubeX(boxes, start);
+  const b = tubeX(boxes, end, true);
+  return { x0: Math.min(a, b), x1: Math.max(a, b) };
+}
+function rulerBoxes(byRefName) {
+  let best;
+  for (const boxes of byRefName.values()) {
+    if (!best || boxes.length > best.length) {
+      best = boxes;
+    }
+  }
+  return best;
+}
+var TICK_PX = 5;
+var LABEL_GAP_PX2 = 10;
+var TARGET_TICK_PX = 110;
+var ZIGZAG_PX = 4;
+var ZIGZAG_AMPLITUDE_PX = 2.5;
+function rulerInk(darkMode) {
+  return darkMode ? "#b0b0b8" : "#55555c";
+}
+function niceStep(raw) {
+  const pow = 10 ** Math.floor(Math.log10(raw));
+  const m = raw / pow;
+  return (m <= 1 ? 1 : m <= 2 ? 2 : m <= 5 ? 5 : 10) * pow;
+}
+function rulerMarks(boxes, x, width, measure) {
+  const first = boxes[0];
+  const last = boxes.at(-1);
+  if (!first || !last) {
+    return void 0;
+  }
+  const from = x(first.x0);
+  const to = x(last.x1);
+  const bpSpan = last.bp1 - first.bp0;
+  if (to <= from || bpSpan <= 0) {
+    return void 0;
+  }
+  const step = niceStep(bpSpan / (to - from) * TARGET_TICK_PX);
+  const squeezedBoxes = boxes.filter((box) => {
+    const bp = box.bp1 - box.bp0;
+    return bp >= step && (x(box.x1) - x(box.x0)) * step / bp < TARGET_TICK_PX / 2;
+  });
+  const squeezed = [];
+  const lengths = [];
+  for (const box of squeezedBoxes) {
+    const x0 = x(box.x0);
+    const x1 = x(box.x1);
+    if (x1 >= 0 && x0 <= width) {
+      squeezed.push({ x0, x1 });
+      const text = formatBp(box.bp1 - box.bp0);
+      lengths.push({ text, at: (x0 + x1) / 2, width: measure(text) });
+    }
+  }
+  const ticks = [];
+  const positions = [];
+  let k = 0;
+  for (let bp = Math.ceil(first.bp0 / step) * step; bp <= last.bp1; bp += step) {
+    while (k < squeezedBoxes.length && squeezedBoxes[k].bp1 <= bp) {
+      k++;
+    }
+    if (k < squeezedBoxes.length && squeezedBoxes[k].bp0 < bp) {
+      continue;
+    }
+    const sx = Math.round(x(tubeX(boxes, bp))) + 0.5;
+    if (sx >= 0 && sx <= width) {
+      ticks.push(sx);
+      const text = bp.toLocaleString("en-US");
+      positions.push({ text, at: sx, width: measure(text) });
     }
-    halos.push({
-      bubble,
-      ...classifyBubble(bubble, repeats),
-      path: parts.join(""),
-      labelAt,
-      members: nodeIds.length,
-      nodeIds,
-      whole: nodeIds.length >= WHOLE_FRACTION * graph.nodes.length,
-      routes: routes2
-    });
   }
-  return halos;
+  const placed = [];
+  const clear = (a) => placed.every(
+    (b) => Math.abs(a.at - b.at) >= (a.width + b.width) / 2 + LABEL_GAP_PX2
+  );
+  for (const label of [...positions, ...lengths]) {
+    if (clear(label)) {
+      placed.push(label);
+    }
+  }
+  return {
+    from,
+    to,
+    ticks,
+    squeezed,
+    labels: placed.map(({ text, at }) => ({ text, at }))
+  };
 }
-function routeText(route, walkLabel) {
-  const names = [...new Set(route.walks.map(walkLabel))].sort();
-  const shown = names.slice(0, NAMED_WALKS).join(", ");
-  const more = names.length > NAMED_WALKS ? ` +${names.length - NAMED_WALKS}` : "";
-  return `${shown}${more} \xB7 ${formatBp(route.bp)}`;
+function zigzag(ctx, x0, x1, y) {
+  const teeth = Math.max(1, Math.round((x1 - x0) / ZIGZAG_PX));
+  const dx = (x1 - x0) / teeth;
+  for (let i = 0; i < teeth; i++) {
+    ctx.lineTo(x0 + (i + 0.5) * dx, y + (i % 2 ? 1 : -1) * ZIGZAG_AMPLITUDE_PX);
+  }
+  ctx.lineTo(x1, y);
+}
+function drawTubeMapRuler(ctx, boxes, frame, top) {
+  const { x, width, darkMode } = frame;
+  ctx.font = "10px sans-serif";
+  const marks = rulerMarks(boxes, x, width, (text) => ctx.measureText(text).width);
+  if (!marks) {
+    return;
+  }
+  const ink = rulerInk(darkMode);
+  const y = top + 0.5;
+  ctx.strokeStyle = ink;
+  ctx.fillStyle = ink;
+  ctx.lineWidth = 1;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "top";
+  ctx.beginPath();
+  ctx.moveTo(Math.max(0, marks.from), y);
+  for (const { x0, x1 } of marks.squeezed) {
+    ctx.lineTo(x0, y);
+    zigzag(ctx, x0, x1, y);
+  }
+  ctx.lineTo(Math.min(width, marks.to), y);
+  for (const sx of marks.ticks) {
+    ctx.moveTo(sx, top);
+    ctx.lineTo(sx, top + TICK_PX);
+  }
+  ctx.stroke();
+  for (const { text, at } of marks.labels) {
+    ctx.fillText(text, at, top + TICK_PX + 2);
+  }
 }
 
-// src/bubbles/popBubble.ts
-function bubbleSubgraph(graph, segmentIds) {
-  const keep = new Set(segmentIds);
-  const nodes = graph.nodes.filter((n) => keep.has(n.name));
-  const ids = new Set(nodes.map((n) => n.id));
-  const paths = graph.paths?.map((p) => ({ ...p, nodeIds: p.nodeIds.filter((id) => ids.has(id)) })).filter((p) => p.nodeIds.length > 0);
-  return {
-    name: graph.name,
-    nodes,
-    edges: graph.edges.filter((e) => ids.has(e.from) && ids.has(e.to)),
-    ...paths?.length ? { paths } : {},
-    anchorPaths: graph.anchorPaths,
-    pathVisits: graph.pathVisits,
-    anchoredBy: graph.anchoredBy,
-    referencePath: graph.referencePath
-  };
+// src/tubeMap/genes.ts
+function tubeMapGenes(byRefName, genes) {
+  const out = [];
+  for (const gene of genes) {
+    const boxes = byRefName.get(gene.refName);
+    const first = boxes?.[0];
+    const last = boxes?.at(-1);
+    if (!boxes || !first || !last) {
+      continue;
+    }
+    const start = Math.max(gene.start, first.bp0);
+    const end = Math.min(gene.end, last.bp1);
+    if (end <= start) {
+      continue;
+    }
+    out.push({
+      gene,
+      ...tubeSpan(boxes, start, end),
+      exons: gene.exons.filter((e) => e.end > start && e.start < end).map(
+        (e) => tubeSpan(boxes, Math.max(e.start, start), Math.min(e.end, end))
+      )
+    });
+  }
+  return out;
+}
+var GENE_ROW_PX = 22;
+var EXON_PX = 8;
+var NAME_FONT = "11px sans-serif";
+var NAME_GAP_PX = 8;
+function drawTubeMapGenes(ctx, genes, frame, bottom, top = 0) {
+  const { x, width, darkMode } = frame;
+  const rows = Math.max(1, Math.floor((bottom - top) / GENE_ROW_PX));
+  const rowEnds = [];
+  const ink = darkMode ? "#e0e0e6" : "#1c1c22";
+  ctx.font = NAME_FONT;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "alphabetic";
+  ctx.fillStyle = ink;
+  ctx.strokeStyle = ink;
+  ctx.lineWidth = 1;
+  const placed = genes.map((g) => ({ g, s0: x(g.x0), s1: x(g.x1) })).filter(({ s0, s1 }) => s1 >= 0 && s0 <= width).sort((a, b) => a.s0 - b.s0);
+  for (const { g, s0, s1 } of placed) {
+    const arrow = g.gene.strand > 0 ? " \u2192" : g.gene.strand < 0 ? "\u2190 " : "";
+    const label = g.gene.strand < 0 ? `${arrow}${g.gene.name}` : `${g.gene.name}${arrow}`;
+    const mid = (Math.max(s0, 0) + Math.min(s1, width)) / 2;
+    const half = ctx.measureText(label).width / 2;
+    const left = Math.min(s0, mid - half);
+    const right = Math.max(s1, mid + half);
+    let row = rowEnds.findIndex((end) => end + NAME_GAP_PX <= left);
+    if (row === -1) {
+      row = Math.min(rowEnds.length, rows - 1);
+    }
+    rowEnds[row] = Math.max(rowEnds[row] ?? -Infinity, right);
+    const glyphY = bottom - row * GENE_ROW_PX - EXON_PX / 2;
+    ctx.beginPath();
+    ctx.moveTo(s0, glyphY + 0.5);
+    ctx.lineTo(s1, glyphY + 0.5);
+    ctx.stroke();
+    for (const e of g.exons) {
+      const e0 = x(e.x0);
+      ctx.fillRect(e0, glyphY - EXON_PX / 2, Math.max(1, x(e.x1) - e0), EXON_PX);
+    }
+    ctx.fillText(label, mid, glyphY - EXON_PX / 2 - 2);
+  }
 }
 
-// src/overlayLabels.ts
-var LABEL_PX = 11;
-var LABEL_CHAR_PX = 6.2;
-var LABEL_PAD = 4;
-function labelWidth(text) {
-  return text.length * LABEL_CHAR_PX + LABEL_PAD * 2;
+// src/tubeMap/connectors.ts
+function referenceNodes(graph, layout) {
+  const nodeById = new Map(graph.nodes.map((n) => [n.id, n]));
+  const out = [];
+  layout.nodes.forEach((node) => {
+    const graphNode = nodeById.get(node.name);
+    if (node.order >= 0 && graphNode && isBackbone(graphNode)) {
+      out.push({
+        node: node.name,
+        bp0: graphNode.stable.start,
+        bp1: graphNode.stable.start + node.sequenceLength,
+        x0: node.x,
+        x1: node.x + node.pixelWidth
+      });
+    }
+  });
+  return out;
 }
-function overlaps(a, b) {
-  return a.x0 < b.x1 && a.x1 > b.x0 && a.y0 < b.y1 && a.y1 > b.y0;
+function tubeMapConnectors(nodes, bpToScreen, tubeToScreen, width) {
+  const out = [];
+  for (const n of nodes) {
+    const bottom0 = tubeToScreen(n.x0);
+    const bottom1 = tubeToScreen(n.x1);
+    if (bottom1 >= 0 && bottom0 <= width) {
+      out.push({
+        node: n.node,
+        top0: bpToScreen(n.bp0),
+        top1: bpToScreen(n.bp1),
+        bottom0,
+        bottom1
+      });
+    }
+  }
+  return out;
 }
-function offFrame(box, frame) {
-  return box.x1 <= 0 || box.x0 >= frame.width || box.y1 <= 0 || box.y0 >= frame.height;
+var HIT_SLOP_PX = 3;
+function connectorAt(connectors, zoneBottom, sx, sy) {
+  if (zoneBottom <= 0 || sy < 0 || sy > zoneBottom) {
+    return void 0;
+  }
+  const t = sy / zoneBottom;
+  let hit;
+  let best = HIT_SLOP_PX;
+  for (const c of connectors) {
+    const a = c.top0 + (c.bottom0 - c.top0) * t;
+    const b = c.top1 + (c.bottom1 - c.top1) * t;
+    const dist = Math.max(0, Math.min(a, b) - sx, sx - Math.max(a, b));
+    if (dist < best) {
+      best = dist;
+      hit = c.node;
+    }
+  }
+  return hit;
 }
-function insideFrame(box, frame) {
-  return box.x0 >= 0 && box.x1 <= frame.width && box.y0 >= 0 && box.y1 <= frame.height;
+function band(ctx, c, bottom) {
+  ctx.moveTo(c.top0, 0);
+  ctx.lineTo(c.top1, 0);
+  ctx.lineTo(c.bottom1, bottom);
+  ctx.lineTo(c.bottom0, bottom);
+  ctx.closePath();
+}
+function sides(ctx, c, bottom) {
+  ctx.moveTo(c.top0, 0);
+  ctx.lineTo(c.bottom0, bottom);
+  ctx.moveTo(c.top1, 0);
+  ctx.lineTo(c.bottom1, bottom);
+}
+function drawTubeMapConnectors(ctx, connectors, bottom, {
+  highlightNode,
+  darkMode
+}) {
+  if (bottom <= 0 || connectors.length === 0) {
+    return;
+  }
+  const ink = darkMode ? "255,255,255" : "0,0,0";
+  ctx.beginPath();
+  for (const c of connectors) {
+    band(ctx, c, bottom);
+  }
+  ctx.fillStyle = `rgba(${ink},0.07)`;
+  ctx.fill();
+  ctx.beginPath();
+  for (const c of connectors) {
+    sides(ctx, c, bottom);
+  }
+  ctx.strokeStyle = `rgba(${ink},0.35)`;
+  ctx.lineWidth = 0.5;
+  ctx.stroke();
+  const lit = connectors.find((c) => c.node === highlightNode);
+  if (lit) {
+    ctx.beginPath();
+    band(ctx, lit, bottom);
+    ctx.fillStyle = "rgba(255,192,203,0.5)";
+    ctx.fill();
+    ctx.beginPath();
+    sides(ctx, lit, bottom);
+    ctx.strokeStyle = "#ff0000";
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  }
 }
-function occupancy(frame, reserved = []) {
-  const placed = [...reserved];
-  return (box) => {
-    if (offFrame(box, frame) || placed.some((p) => overlaps(p, box))) {
-      return false;
+
+// src/walkHighlight.ts
+function walkHighlight(graph, name) {
+  const path = graph.paths?.find((p) => p.name === name);
+  if (!path) {
+    return void 0;
+  }
+  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
+  const edgeAt = /* @__PURE__ */ new Map();
+  graph.edges.forEach((e, i) => {
+    edgeAt.set(`${e.from}>${e.to}`, i);
+  });
+  const nodeIds = new Set(path.nodeIds);
+  const edgeIndexes = /* @__PURE__ */ new Set();
+  for (let i = 1; i < path.nodeIds.length; i++) {
+    const a = path.nodeIds[i - 1];
+    const b = path.nodeIds[i];
+    const index = edgeAt.get(`${a}>${b}`) ?? edgeAt.get(`${b}>${a}`);
+    if (index !== void 0) {
+      edgeIndexes.add(index);
     }
-    placed.push(box);
-    return true;
+  }
+  const bpOf = (ids) => ids.reduce((sum, id) => sum + (byId.get(id)?.length ?? 0), 0);
+  const reference = graph.referencePath ? graph.paths.find((p) => pathOrigin(p.name).name === graph.referencePath) : void 0;
+  return {
+    name,
+    nodeIds,
+    edgeIndexes,
+    steps: path.nodeIds.length,
+    bp: bpOf(path.nodeIds),
+    referenceBp: reference && reference !== path ? bpOf(reference.nodeIds) : void 0
   };
 }
-function placeLabels(candidates, frame, take) {
-  const out = [];
-  const row = LABEL_PX + LABEL_PAD * 2;
-  for (const c of candidates) {
-    const w = labelWidth(c.text);
-    const direction = c.y > frame.height / 2 ? -1 : 1;
-    for (let tries = 0; tries <= (c.stack ?? 0); tries++) {
-      const y = c.y + direction * tries * row;
-      const box = {
-        x0: c.x - w / 2,
-        x1: c.x + w / 2,
-        y0: y - LABEL_PX - LABEL_PAD,
-        y1: y + LABEL_PAD
-      };
-      if (offFrame(box, frame)) {
-        break;
+
+// src/bubbles/bubbleLine.ts
+var SATURATED_PATH_COUNT = 2147483647;
+
+// src/bubbles/bubblesFromGraph.ts
+function bubblesFromGraph(graph) {
+  if (!graph.nodes.some(isBackbone)) {
+    return [];
+  }
+  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
+  const order = referenceOrder(graph);
+  const indexOf = new Map(order.map((id, i) => [id, i]));
+  const reach = new Int32Array(order.length + 1);
+  const succ = /* @__PURE__ */ new Map();
+  const linked = /* @__PURE__ */ new Set();
+  for (const e of graph.edges) {
+    const a = indexOf.get(e.from);
+    const b = indexOf.get(e.to);
+    if (a === void 0 || b === void 0 || a === b) {
+      continue;
+    }
+    linked.add(`${e.from}>${e.to}`).add(`${e.to}>${e.from}`);
+    const [lo, hi] = a < b ? [a, b] : [b, a];
+    reach[lo + 1]++;
+    reach[hi]--;
+    const [from, to] = a < b ? [e.from, e.to] : [e.to, e.from];
+    (succ.get(from) ?? succ.set(from, /* @__PURE__ */ new Set()).get(from)).add(to);
+  }
+  for (let i = 1; i < reach.length; i++) {
+    reach[i] += reach[i - 1];
+  }
+  const backbone = graph.nodes.filter(isBackbone).sort((a, b) => a.stable.start - b.stable.start);
+  const ends = /* @__PURE__ */ new Set([backbone[0].id, backbone.at(-1).id]);
+  const boundaries = backbone.map((node) => [node, indexOf.get(node.id)]).filter(([node, i]) => ends.has(node.id) || reach[i] === 0).sort(([a, ia], [b, ib]) => ia - ib || a.stable.start - b.stable.start);
+  const walkIndex = graph.paths?.map((p) => {
+    const at = /* @__PURE__ */ new Map();
+    p.nodeIds.forEach((id, i) => {
+      if (!at.has(id)) {
+        at.set(id, i);
       }
-      if (insideFrame(box, frame) && take(box)) {
-        out.push({ ...c, y, w });
-        break;
+    });
+    return at;
+  });
+  const bubbles = [];
+  for (let i = 0; i + 1 < boundaries.length; i++) {
+    const [start, i0] = boundaries[i];
+    const [end, i1] = boundaries[i + 1];
+    const interior = order.slice(i0 + 1, i1);
+    if (interior.length === 0) {
+      continue;
+    }
+    const best = /* @__PURE__ */ new Map([[start.id, { min: 0, max: 0, n: 1 }]]);
+    for (const id of [start.id, ...interior]) {
+      const cur = best.get(id);
+      if (!cur) {
+        continue;
+      }
+      for (const t of succ.get(id) ?? []) {
+        const ti = indexOf.get(t);
+        if (ti > i1) {
+          continue;
+        }
+        const add = t === end.id ? 0 : byId.get(t).length;
+        const prev = best.get(t);
+        best.set(t, {
+          min: Math.min(prev?.min ?? Infinity, cur.min + add),
+          max: Math.max(prev?.max ?? -Infinity, cur.max + add),
+          n: Math.min(SATURATED_PATH_COUNT, cur.n + (prev?.n ?? 0))
+        });
+      }
+    }
+    const walked = walkIndex && walkRoutes(graph, byId, walkIndex, start.id, end.id);
+    const crossed = walked?.n ? walked : void 0;
+    const routes2 = crossed ?? best.get(end.id) ?? { min: 0, max: 0, n: 0 };
+    const walksLeave = walked !== void 0 && walked.left > 0;
+    const refStart = start.stable.start + start.length;
+    const refEnd = end.stable.start;
+    const chain = [
+      start.id,
+      ...interior.filter((id) => isBackbone(byId.get(id))),
+      end.id
+    ];
+    const chainBroken = chain.some(
+      (id, k) => k > 0 && !linked.has(`${chain[k - 1]}>${id}`)
+    );
+    const partial = chainBroken || walksLeave;
+    const fallback = chainBroken && !crossed;
+    bubbles.push({
+      refName: start.stable.refName,
+      start: refStart,
+      end: refEnd,
+      segmentCount: interior.length + 2,
+      pathCount: routes2.n,
+      // a real inversion test needs each walk's direction relative to the
+      // reference; the first visit's strand is just whichever path anchored the
+      // node
+      inversion: false,
+      shortestAlleleLength: fallback ? refEnd - refStart : routes2.min,
+      longestAlleleLength: fallback ? refEnd - refStart : routes2.max,
+      segments: [start, ...interior.map((id) => byId.get(id)), end].map((n) => n.name).join(","),
+      shortestAllele: void 0,
+      longestAllele: void 0,
+      partial,
+      routes: crossed?.routes
+    });
+  }
+  return bubbles;
+}
+function walkRoutes(graph, byId, walkIndex, startId, endId) {
+  const seen = /* @__PURE__ */ new Map();
+  let min = Infinity;
+  let max = -Infinity;
+  let left = 0;
+  graph.paths.forEach((p, k) => {
+    const i0 = walkIndex[k].get(startId);
+    const i1 = walkIndex[k].get(endId);
+    if (i0 === void 0 || i1 === void 0) {
+      if (i0 !== void 0 || i1 !== void 0) {
+        left++;
       }
+      return;
     }
-  }
-  return out;
+    const steps = p.nodeIds.slice(Math.min(i0, i1) + 1, Math.max(i0, i1));
+    if (i1 < i0) {
+      steps.reverse();
+    }
+    let bp = 0;
+    for (const id of steps) {
+      bp += byId.get(id)?.length ?? 0;
+    }
+    const key = steps.join(",");
+    const route = seen.get(key) ?? { steps, bp, walks: [] };
+    route.walks.push(p.name);
+    seen.set(key, route);
+    min = Math.min(min, bp);
+    max = Math.max(max, bp);
+  });
+  return seen.size || left ? { min, max, n: seen.size, left, routes: [...seen.values()] } : void 0;
 }
 
-// src/graphLabels.ts
-var MIN_DELETION_LABEL_PX = 26;
-var PX_PER_NODE_LABEL = 4e4;
-var MIN_NODE_LABELS = 8;
-var LEADER_GAP_PX = 8;
-var LABEL_CHAR_PX2 = 5.7;
-var LABEL_PAD_PX = 6;
-var LABEL_HEIGHT_PX = 13;
-var LABEL_GAP_PX = 3;
-var MAX_LABEL_OVERHANG = 2;
-function labelHalfWidth(text) {
-  return (text.length * LABEL_CHAR_PX2 + LABEL_PAD_PX + LABEL_GAP_PX) / 2;
-}
-var LABEL_HALF_HEIGHT = (LABEL_HEIGHT_PX + LABEL_GAP_PX) / 2;
-var MIN_LABEL_HALF_WIDTH = labelHalfWidth("1 bp");
-function boxAt(halfW, x, y) {
-  return {
-    x0: x - halfW,
-    x1: x + halfW,
-    y0: y - LABEL_HALF_HEIGHT,
-    y1: y + LABEL_HALF_HEIGHT
-  };
-}
-function rowLabelBox(text, screenY) {
-  return {
-    x0: 6,
-    x1: 6 + text.length * 6.2 + 8 + LABEL_GAP_PX,
-    y0: screenY - 8 - LABEL_GAP_PX / 2,
-    y1: screenY + 8 + LABEL_GAP_PX / 2
-  };
-}
-function clamp(v, lo, hi) {
-  return hi < lo ? v : Math.min(Math.max(v, lo), hi);
+// src/bubbles/classifyBubble.ts
+var REPEAT_GROWTH = 10;
+function coveringRepeat(b, repeats) {
+  const span = b.end - b.start;
+  const growth = b.longestAlleleLength - b.shortestAlleleLength;
+  return repeats.find(
+    (r) => growth <= REPEAT_GROWTH * (r.end - r.start) && (span === 0 ? r.start <= b.start && b.start <= r.end : Math.min(b.end, r.end) - Math.max(b.start, r.start) >= span / 2)
+  );
 }
+var SUPERBUBBLE_SEGMENTS = 40;
 function formatBp2(bp) {
-  if (bp >= 1e6) {
-    return `${+(bp / 1e6).toFixed(1)} Mb`;
+  if (bp >= 1e4) {
+    return `${(bp / 1e3).toFixed(0)} kb`;
   }
-  return bp >= 1e3 ? `${+(bp / 1e3).toFixed(1)} kb` : `${bp} bp`;
-}
-function deletionText(bp) {
-  return `${formatBp2(bp)} del`;
-}
-function arcOutward(curves, apex, scaleX, scaleY) {
-  const first = curves[0];
-  const last = curves[curves.length - 1];
-  const dx = (apex.x - (first.x0 + last.x1) / 2) * scaleX;
-  const dy = (apex.y - (first.y0 + last.y1) / 2) * scaleY;
-  const len = Math.hypot(dx, dy);
-  return len === 0 ? { x: 0, y: -1 } : { x: dx / len, y: dy / len };
-}
-function boxSupport(box, dir) {
-  return Math.abs(dir.x) * (box.x1 - box.x0) / 2 + Math.abs(dir.y) * (box.y1 - box.y0) / 2;
+  if (bp >= 1e3) {
+    return `${(bp / 1e3).toFixed(1)} kb`;
+  }
+  return `${bp} bp`;
 }
-function boxRayCrossing(box, dir) {
-  const halfW = (box.x1 - box.x0) / 2;
-  const halfH = (box.y1 - box.y0) / 2;
-  return Math.min(
-    dir.x === 0 ? Infinity : halfW / Math.abs(dir.x),
-    dir.y === 0 ? Infinity : halfH / Math.abs(dir.y)
-  );
+function formatBpRange(shortest, longest) {
+  const low = formatBp2(shortest);
+  const high = formatBp2(longest);
+  const unit = high.slice(high.indexOf(" "));
+  return low.endsWith(unit) ? `${low.slice(0, -unit.length)}\u2013${high}` : `${low}\u2013${high}`;
 }
-function drawnLength(segments, scaleX, scaleY) {
-  let total = 0;
-  for (let i = 1; i < segments.length; i++) {
-    const a = segments[i - 1];
-    const b = segments[i];
-    total += Math.hypot((b.x - a.x) * scaleX, (b.y - a.y) * scaleY);
+function routes(count) {
+  if (count >= SATURATED_PATH_COUNT) {
+    return "\u22652.1B routes";
   }
-  return total;
-}
-function runBounds(nodeIds, nodePositions) {
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (const id of nodeIds) {
-    for (const p of nodePositions[id] ?? []) {
-      minX = Math.min(minX, p.x);
-      maxX = Math.max(maxX, p.x);
-      minY = Math.min(minY, p.y);
-      maxY = Math.max(maxY, p.y);
-    }
+  if (count >= 1e5) {
+    return `${(count / 1e3).toFixed(0)}k routes`;
   }
-  return minX === Infinity ? void 0 : { minX, minY, maxX, maxY };
+  return `${count} routes`;
 }
-var nodeOrderCache = /* @__PURE__ */ new WeakMap();
-function labelOrder(nodePositions, nodeLengths) {
-  const cached2 = nodeOrderCache.get(nodePositions);
-  if (cached2?.nodeLengths === nodeLengths) {
-    return cached2.order;
-  }
-  const order = Object.entries(nodePositions).filter(([id, segments]) => segments.length > 0 && nodeLengths.has(id)).sort(([a], [b]) => nodeLengths.get(b) - nodeLengths.get(a));
-  nodeOrderCache.set(nodePositions, { nodeLengths, order });
-  return order;
+function classifyBubble(b, repeats = []) {
+  const c = classifyShape(b, repeats);
+  return b.partial ? { ...c, label: `${c.label}, partial` } : c;
 }
-var arcCache = /* @__PURE__ */ new WeakMap();
-function arcPlacements(nodePositions, deletions, axis, version) {
-  const { scaleX, scaleY } = axis;
-  const cached2 = arcCache.get(nodePositions);
-  if (cached2?.deletions === deletions && cached2.scaleX === scaleX && cached2.scaleY === scaleY && cached2.version === version) {
-    return cached2.arcs;
+function classifyShape(b, repeats) {
+  const refSpan = b.end - b.start;
+  const {
+    shortestAlleleLength: shortest,
+    longestAlleleLength: longest,
+    pathCount,
+    segmentCount,
+    inversion
+  } = b;
+  const range = formatBpRange(shortest, longest);
+  if (segmentCount >= SUPERBUBBLE_SEGMENTS) {
+    return {
+      kind: "superbubble",
+      label: `${range} superbubble, ${segmentCount} segments, ${routes(pathCount)}${inversion ? ", inv" : ""}`
+    };
   }
-  const arcs = [];
-  for (const deletion of [...deletions].sort((a, b) => b.bp - a.bp)) {
-    const curves = deletionArcCurves(nodePositions, deletion, axis);
-    const apex = curves ? curveMidpoint(curves) : void 0;
-    if (curves && apex) {
-      const { minX, minY, maxX, maxY } = curveBounds(curves);
-      arcs.push({
-        deletion,
-        curves,
-        apex,
-        // in screen px, so the two axes' units cannot be added by accident
-        extent: Math.max((maxX - minX) * scaleX, (maxY - minY) * scaleY)
-      });
-    }
+  if (inversion) {
+    return { kind: "inversion", label: `${formatBp2(longest)} inv` };
   }
-  arcCache.set(nodePositions, { deletions, scaleX, scaleY, version, arcs });
-  return arcs;
-}
-function sizeLabelCandidates({
-  nodePositions,
-  nodeLengths,
-  deletions,
-  alleleDeletions,
-  axis,
-  translateX,
-  translateY,
-  width,
-  height,
-  version = 0
-}) {
-  const { scaleX, scaleY } = axis;
-  const deletionCandidates = [];
-  const nodeCandidates = [];
-  for (const { deletion, curves, apex, extent } of arcPlacements(
-    nodePositions,
-    deletions,
-    axis,
-    version
-  )) {
-    if (extent >= MIN_DELETION_LABEL_PX) {
-      const text = deletionText(deletion.bp);
-      const halfW = labelHalfWidth(text);
-      const box = boxAt(halfW, 0, 0);
-      const arcX = apex.x * scaleX + translateX;
-      const arcY = apex.y * scaleY + translateY;
-      const fits = extent >= halfW * 2 / MAX_LABEL_OVERHANG;
-      const bow = arcOutward(curves, apex, scaleX, scaleY);
-      const offset = boxSupport(box, bow) + LEADER_GAP_PX;
-      const x = fits ? arcX : clamp(arcX + bow.x * offset, halfW, width - halfW);
-      const y = fits ? arcY : clamp(
-        arcY + bow.y * offset,
-        LABEL_HALF_HEIGHT,
-        height - LABEL_HALF_HEIGHT
-      );
-      const away = Math.hypot(x - arcX, y - arcY);
-      let leader;
-      if (away > 0) {
-        const dir = { x: (x - arcX) / away, y: (y - arcY) / away };
-        const crossing = boxRayCrossing(box, dir);
-        leader = {
-          arcX,
-          arcY,
-          labelX: x - dir.x * crossing,
-          labelY: y - dir.y * crossing
-        };
-      }
-      deletionCandidates.push({
-        label: {
-          key: `del:${deletion.edgeIndex}`,
-          text,
-          x,
-          y,
-          kind: "deletion",
-          leader
-        },
-        box: boxAt(halfW, x, y)
-      });
-    }
+  const repeat = longest !== shortest ? coveringRepeat(b, repeats) : void 0;
+  if (repeat) {
+    const name = repeat.name ? ` (${repeat.name})` : "";
+    return {
+      kind: "repeat",
+      label: `${range} repeat array${name}, ${routes(pathCount)}`
+    };
+  }
+  const alleles = pathCount > 2 ? `, ${pathCount} alleles` : "";
+  if (shortest === longest && shortest === refSpan) {
+    return refSpan <= 1 ? { kind: "snp", label: "SNP" } : { kind: "substitution", label: `${formatBp2(refSpan)} sub` };
+  }
+  if (refSpan === 0 || shortest === refSpan) {
+    return {
+      kind: "insertion",
+      label: `\u2264${formatBp2(longest - refSpan)} ins${alleles}`
+    };
   }
-  const labelledByDeletion = /* @__PURE__ */ new Set();
-  const alleleRuns = [...alleleDeletions ?? []].sort((a, b) => b.bp - a.bp);
-  for (const run of alleleRuns) {
-    const drawn = runBounds(run.nodeIds, nodePositions);
-    if (!drawn) {
-      continue;
-    }
-    const shownLeft = Math.max(drawn.minX * scaleX + translateX, 0);
-    const shownRight = Math.min(drawn.maxX * scaleX + translateX, width);
-    const shownTop = Math.max(drawn.minY * scaleY + translateY, 0);
-    const shownBottom = Math.min(drawn.maxY * scaleY + translateY, height);
-    if (shownRight < shownLeft || shownBottom < shownTop) {
-      continue;
-    }
-    const extent = Math.max(shownRight - shownLeft, shownBottom - shownTop);
-    const text = deletionText(run.bp);
-    const halfW = labelHalfWidth(text);
-    if (extent >= halfW * 2 / MAX_LABEL_OVERHANG) {
-      for (const id of run.nodeIds) {
-        labelledByDeletion.add(id);
-      }
-      const x = clamp((shownLeft + shownRight) / 2, halfW, width - halfW);
-      const y = clamp(
-        (shownTop + shownBottom) / 2,
-        LABEL_HALF_HEIGHT,
-        height - LABEL_HALF_HEIGHT
-      );
-      deletionCandidates.push({
-        label: {
-          key: `alleledel:${run.nodeIds.join(",")}`,
-          text,
-          x,
-          y,
-          kind: "deletion"
-        },
-        box: boxAt(halfW, x, y)
-      });
-    }
+  if (longest === refSpan) {
+    return {
+      kind: "deletion",
+      label: `${formatBp2(refSpan - shortest)} del${alleles}`
+    };
   }
-  for (const [id, segments] of labelOrder(nodePositions, nodeLengths)) {
-    if (labelledByDeletion.has(id)) {
-      continue;
+  return {
+    kind: "complex",
+    label: `${formatBp2(refSpan)} ref \u2192 ${range}, ${pathCount} alleles`
+  };
+}
+var BUBBLE_KIND_COLORS = {
+  snp: "#5b6b7a",
+  substitution: "#5b6b7a",
+  insertion: "#2f8fd6",
+  deletion: "#c94040",
+  inversion: "#e07b00",
+  repeat: "#8e3fbf",
+  superbubble: "#8e3fbf",
+  complex: "#8e3fbf"
+};
+var BUBBLE_KIND_NAMES = {
+  snp: "SNP",
+  substitution: "substitution",
+  insertion: "insertion",
+  deletion: "deletion",
+  inversion: "inversion",
+  repeat: "repeat array",
+  superbubble: "superbubble",
+  complex: "site"
+};
+function bubbleSegmentIds(b) {
+  return b.segments.split(",").filter(Boolean);
+}
+
+// src/bubbles/bubbleHalos.ts
+var WHOLE_FRACTION = 0.9;
+var NAMED_WALKS = 2;
+var MIN_CHIPPED_BP = 1e3;
+function bubbleHalos(graph, bubbles, positions, walkLabel = (name) => name, repeats = []) {
+  const byName = new Map(graph.nodes.map((n) => [n.name, n]));
+  const halos = [];
+  for (const bubble of bubbles) {
+    const parts = [];
+    let minX = Infinity;
+    let maxX = -Infinity;
+    let minY = Infinity;
+    const nodeIds = [];
+    const ends = [];
+    for (const name of bubbleSegmentIds(bubble)) {
+      const node = byName.get(name);
+      const line = node && positions[node.id];
+      if (!node || !line?.length) {
+        continue;
+      }
+      if (isBackbone(node) && (node.stable.start < bubble.start || node.stable.start >= bubble.end)) {
+        ends.push(line[Math.floor(line.length / 2)]);
+        continue;
+      }
+      nodeIds.push(node.id);
+      parts.push(svgPath(line.length === 1 ? [line[0], line[0]] : line));
+      for (const p of line) {
+        minX = Math.min(minX, p.x);
+        maxX = Math.max(maxX, p.x);
+        minY = Math.min(minY, p.y);
+      }
     }
-    const { x, y } = polylineMidpoint(segments);
-    const screenY = y * scaleY + translateY;
-    if (screenY + LABEL_HALF_HEIGHT <= 0 || screenY - LABEL_HALF_HEIGHT >= height) {
+    if (nodeIds.length === 0) {
       continue;
     }
-    const drawn = drawnLength(segments, scaleX, scaleY);
-    if (drawn < MIN_LABEL_HALF_WIDTH * 2 / MAX_LABEL_OVERHANG) {
-      continue;
+    const labelAt = { x: (minX + maxX) / 2, y: minY };
+    const anchor = ends.length ? {
+      x: ends.reduce((s, p) => s + p.x, 0) / ends.length,
+      y: ends.reduce((s, p) => s + p.y, 0) / ends.length
+    } : labelAt;
+    const sharing = /* @__PURE__ */ new Map();
+    for (const route of bubble.routes ?? []) {
+      for (const id of new Set(route.steps)) {
+        sharing.set(id, (sharing.get(id) ?? 0) + 1);
+      }
     }
-    const text = formatBp2(nodeLengths.get(id));
-    const halfW = labelHalfWidth(text);
-    if (drawn >= halfW * 2 / MAX_LABEL_OVERHANG) {
-      const screenX = x * scaleX + translateX;
-      nodeCandidates.push({
-        label: {
-          key: `node:${id}`,
-          text,
-          x: screenX,
-          y: screenY,
-          kind: "node"
-        },
-        box: boxAt(halfW, screenX, screenY)
-      });
+    const routes2 = [];
+    for (const route of bubble.routes ?? []) {
+      if (bubble.longestAlleleLength < MIN_CHIPPED_BP) {
+        break;
+      }
+      if (route.steps.length === 0) {
+        continue;
+      }
+      const rarest = Math.min(...route.steps.map((id) => sharing.get(id)));
+      let at;
+      let far = -1;
+      for (const id of route.steps) {
+        if (sharing.get(id) !== rarest) {
+          continue;
+        }
+        for (const p of positions[id] ?? []) {
+          const d = Math.hypot(p.x - anchor.x, p.y - anchor.y);
+          if (d > far) {
+            far = d;
+            at = p;
+          }
+        }
+      }
+      if (at) {
+        routes2.push({ route, at, text: routeText(route, walkLabel) });
+      }
     }
+    halos.push({
+      bubble,
+      ...classifyBubble(bubble, repeats),
+      path: parts.join(""),
+      labelAt,
+      members: nodeIds.length,
+      nodeIds,
+      whole: nodeIds.length >= WHOLE_FRACTION * graph.nodes.length,
+      routes: routes2
+    });
   }
-  return { deletions: deletionCandidates, nodes: nodeCandidates };
+  return halos;
 }
-function nodeLabelBudget(width, height) {
-  return Math.max(
-    MIN_NODE_LABELS,
-    Math.floor(width * height / PX_PER_NODE_LABEL)
-  );
+function routeText(route, walkLabel) {
+  const names = [...new Set(route.walks.map(walkLabel))].sort();
+  const shown = names.slice(0, NAMED_WALKS).join(", ");
+  const more = names.length > NAMED_WALKS ? ` +${names.length - NAMED_WALKS}` : "";
+  return `${shown}${more} \xB7 ${formatBp2(route.bp)}`;
 }
-function placeSizeLabels(candidates, take, budget = Infinity) {
-  const labels = [];
-  for (const { label, box } of candidates) {
-    if (labels.length >= budget) {
-      break;
-    }
-    if (take(box)) {
-      labels.push(label);
-    }
-  }
-  return labels;
+
+// src/bubbles/popBubble.ts
+function bubbleSubgraph(graph, segmentIds) {
+  const keep = new Set(segmentIds);
+  const nodes = graph.nodes.filter((n) => keep.has(n.name));
+  const ids = new Set(nodes.map((n) => n.id));
+  const paths = graph.paths?.map((p) => ({ ...p, nodeIds: p.nodeIds.filter((id) => ids.has(id)) })).filter((p) => p.nodeIds.length > 0);
+  return {
+    name: graph.name,
+    nodes,
+    edges: graph.edges.filter((e) => ids.has(e.from) && ids.has(e.to)),
+    ...paths?.length ? { paths } : {},
+    anchorPaths: graph.anchorPaths,
+    pathVisits: graph.pathVisits,
+    anchoredBy: graph.anchoredBy,
+    referencePath: graph.referencePath
+  };
 }
 
 // src/labelLayout.ts
@@ -5211,27 +5583,24 @@ function layoutLabels(m) {
 }
 
 // src/genes/genePins.ts
-function contig(name) {
-  return name.split("#").at(-1);
-}
 function genePins(graph, genes, positions) {
-  const byContig = /* @__PURE__ */ new Map();
-  const contigOf = /* @__PURE__ */ new Map();
+  const byRefName = /* @__PURE__ */ new Map();
   for (const node of graph.nodes) {
-    if (isBackbone(node) && positions[node.id]?.length) {
+    if (isBackbone(node)) {
       const { refName } = node.stable;
-      const name = contigOf.get(refName) ?? contigOf.set(refName, contig(refName)).get(refName);
-      const entry = byContig.get(name) ?? byContig.set(name, { nodes: [], reach: 0 }).get(name);
-      entry.nodes.push(node);
-      entry.reach = Math.max(entry.reach, node.length);
+      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 byContig.values()) {
+  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 = byContig.get(contig(gene.refName));
+    const backbone = byRefName.get(gene.refName);
     if (!backbone) {
       continue;
     }
@@ -5290,6 +5659,135 @@ function genePins(graph, genes, positions) {
   return pins;
 }
 
+// src/reference.ts
+var WELL_KNOWN_SAMPLES = /* @__PURE__ */ new Map([
+  ["hg38", "GRCh38"],
+  ["hg19", "GRCh37"],
+  ["hs1", "CHM13"],
+  ["t2t-chm13", "CHM13"],
+  ["chm13v2", "CHM13"]
+]);
+function wellKnownSample(assemblyName) {
+  return WELL_KNOWN_SAMPLES.get(assemblyName.toLowerCase());
+}
+var GENERIC_SAMPLES = /* @__PURE__ */ new Set(["_gbwt_ref"]);
+function sampleOf2(refName) {
+  const sample = refName.includes("#") ? panSNSample(refName) : void 0;
+  return sample === void 0 || GENERIC_SAMPLES.has(sample) ? void 0 : sample;
+}
+function haplotypeOf(refName) {
+  return panSNHaplotype(refName) ?? panSNSample(refName);
+}
+function graphHaplotypes(graph) {
+  const refNames = new Set((graph.anchorPaths ?? []).map((p) => p.name));
+  for (const node of graph.nodes) {
+    if (node.stable) {
+      refNames.add(node.stable.refName);
+    }
+  }
+  const bySample = /* @__PURE__ */ new Map();
+  for (const refName of refNames) {
+    const sample = sampleOf2(refName);
+    if (sample !== void 0) {
+      const haplotypes = bySample.get(sample) ?? bySample.set(sample, /* @__PURE__ */ new Set()).get(sample);
+      haplotypes.add(haplotypeOf(refName));
+    }
+  }
+  return bySample;
+}
+function backboneFrom(contigs, haplotypes) {
+  const samples = new Set(contigs.map((c) => sampleOf2(c.refName)));
+  const [sample] = samples;
+  if (samples.size !== 1 || sample === void 0) {
+    return { contigs, prefixes: [], named: false };
+  }
+  const own = new Set(contigs.map((c) => haplotypeOf(c.refName)));
+  const unique = [...haplotypes.get(sample) ?? []].every((h) => own.has(h));
+  const shared = new Set(contigs.map((c) => panSNHaplotype(c.refName)));
+  const [haplotype] = shared;
+  return {
+    contigs,
+    prefixes: [
+      ...unique ? [sample] : [],
+      ...shared.size === 1 && haplotype ? [haplotype] : []
+    ],
+    named: true
+  };
+}
+function graphBackbone(graph) {
+  const spans = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    if (isBackbone(node)) {
+      const { refName, start } = node.stable;
+      const end = start + node.length;
+      const span = spans.get(refName);
+      if (span) {
+        span.start = Math.min(span.start, start);
+        span.end = Math.max(span.end, end);
+      } else {
+        spans.set(refName, {
+          refName,
+          contig: panSNContig(refName),
+          start,
+          end
+        });
+      }
+    }
+  }
+  const contigs = [...spans.values()];
+  return contigs.length ? backboneFrom(contigs, graphHaplotypes(graph)) : void 0;
+}
+function backboneAssembly(backbone, assemblies) {
+  const names = (a) => [a.name, ...a.aliases ?? []];
+  const naming = (prefix) => (a) => names(a).some((n) => n.toLowerCase() === prefix.toLowerCase());
+  const prefixes = [...backbone?.prefixes ?? []].reverse();
+  const sample = backbone?.prefixes.find((p) => !p.includes("#"))?.toLowerCase();
+  for (const prefix of prefixes) {
+    const assembly = assemblies.find(naming(prefix));
+    if (assembly) {
+      return assembly;
+    }
+  }
+  return sample === void 0 ? void 0 : assemblies.find(
+    (a) => names(a).some((n) => wellKnownSample(n)?.toLowerCase() === sample)
+  );
+}
+function assemblyWalk(graph, assembly) {
+  const haplotypes = graphHaplotypes(graph);
+  return graph.anchorPaths?.find(
+    (walk) => backboneAssembly(
+      backboneFrom(
+        [
+          {
+            refName: walk.name,
+            contig: panSNContig(walk.name),
+            start: walk.start,
+            end: walk.start + walk.length
+          }
+        ],
+        haplotypes
+      ),
+      [assembly]
+    )
+  );
+}
+function refNameBinding(refNames) {
+  const exact = new Set(refNames);
+  const byContig = /* @__PURE__ */ new Map();
+  for (const refName of exact) {
+    const contig = panSNContig(refName);
+    byContig.set(contig, byContig.has(contig) ? void 0 : refName);
+  }
+  return (name) => exact.has(name) ? name : byContig.get(name);
+}
+function featuresOnBackbone(features, backbone) {
+  const bind = refNameBinding(backbone.contigs.map((c) => c.refName));
+  return features.flatMap((f) => {
+    const refName = bind(f.refName);
+    return refName === void 0 ? [] : [refName === f.refName ? f : { ...f, refName }];
+  });
+}
+
 // src/gbzWindow.ts
 var NoReferenceSampleError = class extends Error {
   constructor(anchor, referenceSamples) {
@@ -5317,16 +5815,9 @@ function haplotypeWanted(name, wanted) {
 async function referenceSamplesOf(db) {
   return (await db.tag("gbwt_reference_samples") ?? "").split(/\s+/).filter((sample) => sample !== "");
 }
-var SAMPLE_ALIASES = {
-  hg38: "grch38",
-  hg19: "grch37",
-  hs1: "chm13",
-  "t2t-chm13": "chm13",
-  chm13v2: "chm13"
-};
 function aliasedSample(anchorSample, referenceSamples) {
   const lower = anchorSample.toLowerCase();
-  const alias = SAMPLE_ALIASES[lower];
+  const alias = wellKnownSample(anchorSample)?.toLowerCase();
   return referenceSamples.find((s) => s === anchorSample) ?? referenceSamples.find((s) => s.toLowerCase() === lower) ?? referenceSamples.find((s) => s.toLowerCase() === alias);
 }
 function resolveReferenceSample({
@@ -5441,7 +5932,10 @@ export {
   NODE_WIDTHS,
   REFERENCE_RAMP_MAX_HUE,
   ROW_HEIGHT_PX,
+  WELL_KNOWN_SAMPLES,
+  assemblyWalk,
   axisScaleOf,
+  backboneAssembly,
   bubbleHalos,
   bubbleSegmentIds,
   bubbleSubgraph,
@@ -5450,20 +5944,26 @@ export {
   clampZoom,
   classifyBubble,
   computeReferenceRamp,
+  connectorAt,
   contains,
   cutWindowGFA,
   deletionEdges,
   drawTubeMap,
+  drawTubeMapConnectors,
+  drawTubeMapGenes,
+  drawTubeMapRuler,
   drawingBounds,
   engineKey,
   engineRequest,
+  featuresOnBackbone,
   findHoveredEdge,
   findHoveredNode,
   fitTransform,
   forceLayout,
-  formatBp2 as formatBp,
+  formatBp,
   genePins,
   getDpr,
+  graphBackbone,
   haplotypeWanted,
   layoutExtent,
   layoutLabels,
@@ -5481,20 +5981,28 @@ export {
   panSNSample,
   pathColorsLegible,
   pathLegend,
+  refNameBinding,
+  referenceBoxes,
   referenceKnots,
+  referenceNodes,
   referencePathQuery,
   referenceSamplesOf,
   resolveColorScheme,
   resolveReferenceSample,
+  rulerBoxes,
   screenToLayout,
+  tubeMapConnectors,
   tubeMapFrame,
+  tubeMapGenes,
   tubeMapNodeAt,
   tubeMapPicture,
+  tubeX,
   viewportOf,
   walkHighlight,
   walkRows,
   walkRowsExtent,
   warpX,
+  wellKnownSample,
   wheelZoomFactor,
   zoomAbout
 };