@jbrowse/bandage-core 0.1.8 → 0.1.9

package/dist/index.js

@@ -296,6 +296,10 @@ var SEP = "#";
 function panSNSample(refName) {
   return refName.split(SEP)[0];
 }
+var GENERIC_SAMPLES = /* @__PURE__ */ new Set(["_gbwt_ref"]);
+function isGenericSample(sample) {
+  return GENERIC_SAMPLES.has(sample);
+}
 function panSNHaplotype(refName) {
   const parts = refName.split(SEP);
   return parts.length >= 3 ? `${parts[0]}${SEP}${parts[1]}` : void 0;
@@ -692,8 +696,8 @@ function pointAt(line, arc, s) {
   if (i >= arc.length) {
     return { ...line.at(-1) };
   }
-  const span = arc[i] - arc[i - 1];
-  const t = span > 0 ? (s - arc[i - 1]) / span : 0;
+  const span2 = arc[i] - arc[i - 1];
+  const t = span2 > 0 ? (s - arc[i - 1]) / span2 : 0;
   const a = line[i - 1];
   const b = line[i];
   return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
@@ -838,9 +842,9 @@ function referenceMidpoints(graph) {
   const neighbors = buildNeighbors(graph);
   const midpoints = /* @__PURE__ */ new Map();
   for (const node of graph.nodes) {
-    const span = nodeReferenceSpan({ nodeId: node.id, nodeById, neighbors });
-    if (span) {
-      midpoints.set(node.id, (span.start + span.end) / 2);
+    const span2 = nodeReferenceSpan({ nodeId: node.id, nodeById, neighbors });
+    if (span2) {
+      midpoints.set(node.id, (span2.start + span2.end) / 2);
     }
   }
   return midpoints;
@@ -1119,12 +1123,12 @@ function projectAlleles(graph) {
   for (const node of byId.values()) {
     if (node.stable.rank !== REFERENCE_RANK && !claimed.has(node.id)) {
       const { members, anchors } = collectRun(node.id, byId, adj, claimed);
-      const span = anchorSpan(anchors);
-      if (span) {
-        const { offsets, ordered } = runOffsets(members, span.entry, adj);
+      const span2 = anchorSpan(anchors);
+      if (span2) {
+        const { offsets, ordered } = runOffsets(members, span2.entry, adj);
         alleles.push({
-          start: span.start,
-          refSpan: span.end - span.start,
+          start: span2.start,
+          refSpan: span2.end - span2.start,
           nodeIds: ordered.map((m) => m.id),
           nodeOffsets: ordered.map((m) => offsets.get(m.id)),
           pathLength: ordered.reduce(
@@ -1143,11 +1147,11 @@ var MIN_DELETION_BP = 1;
 var MIN_ALLELE_SPAN_FRACTION = 0.015;
 function placeOffReference({
   graph,
-  span,
+  span: span2,
   rowY,
   positions
 }) {
-  const minSpan = span * MIN_ALLELE_SPAN_FRACTION;
+  const minSpan = span2 * MIN_ALLELE_SPAN_FRACTION;
   const alleles = projectAlleles(graph);
   const byId = new Map(graph.nodes.map((n) => [n.id, n]));
   const alleleDeletions = [];
@@ -1212,12 +1216,12 @@ function anchoredLayout(graph, region) {
   if (backbone.length === 0) {
     return void 0;
   }
-  const span = referenceSpan(backbone, region);
+  const span2 = referenceSpan(backbone, region);
   const rows = rankRows(graph);
   const nodePositions = backbonePositions(backbone);
   const alleleDeletions = placeOffReference({
     graph,
-    span,
+    span: span2,
     rowY: (node) => (node.stable ? rows.get(node.stable.rank) ?? rows.size : rows.size) * ROW_HEIGHT_PX,
     positions: nodePositions
   });
@@ -1539,13 +1543,13 @@ function sampleRowLayout(graph, region, keep = []) {
   if (backbone.length === 0 || samples.length === 0) {
     return void 0;
   }
-  const span = referenceSpan(backbone, region);
+  const span2 = referenceSpan(backbone, region);
   const rowOf = new Map(samples.map((s, i) => [s, i + 1]));
   const nodePositions = backbonePositions(backbone);
   const spareRow = samples.length + 1;
   const alleleDeletions = placeOffReference({
     graph,
-    span,
+    span: span2,
     rowY: (node) => {
       const stable = node.stable;
       const row = stable ? rowOf.get(parsePanSN(stable.refName).sample) : void 0;
@@ -1594,9 +1598,18 @@ function pathColorsLegible(pathCount) {
 function pathCssColor(index, count) {
   return `hsl(${pathHueAt(index, count)}, ${PATH_SATURATION * 100}%, ${PATH_LIGHTNESS * 100}%)`;
 }
+function pathGreyCssColor(index, count) {
+  const lightness = count > 1 ? 25 + 45 * index / (count - 1) : 45;
+  return `hsl(0, 0%, ${lightness}%)`;
+}
 function labelTiers(name) {
   const parts = pathOrigin(name).name.split("#");
-  return [parts[0], parts.slice(0, 2).join("#"), parts.join("#")];
+  const full = parts.join("#");
+  if (parts.length >= 3 && isGenericSample(parts[0])) {
+    const contig = parts.slice(2).join("#");
+    return [contig, contig, full];
+  }
+  return [parts[0], parts.slice(0, 2).join("#"), full];
 }
 function groupDigits(n) {
   return String(n).replace(/\B(?=(\d{3})+$)/g, ",");
@@ -1605,7 +1618,7 @@ function offsetTiers(name, tiers) {
   const { start } = pathOrigin(name);
   return tiers.map((t) => `${t} @${groupDigits(start)}`);
 }
-function pathLegend(paths) {
+function pathLegend(paths, colors) {
   const named = paths.map((p) => labelTiers(p.name));
   const candidates = [0, 1, 2].flatMap((t) => [
     paths.map((_, i) => named[i][t]),
@@ -1618,7 +1631,7 @@ function pathLegend(paths) {
   return paths.map((path, i) => ({
     name: path.name,
     label: labels[i],
-    color: pathCssColor(i, paths.length)
+    color: colors?.[i] ?? pathCssColor(i, paths.length)
   }));
 }
 
@@ -1836,11 +1849,14 @@ function runTubeMap(graph) {
   const paths = graph.paths ?? [];
   const tracks = tubeMapTracks(graph);
   const reads = graph.reads ? tubeMapReads(graph, graph.reads, paths.length) : [];
-  return layoutTubeMap(tubeMapNodes(graph), tracks, reads, {
+  const tubeColor = reads.length > 0 ? pathGreyCssColor : pathCssColor;
+  const pathColors = paths.map((_, i) => tubeColor(i, paths.length));
+  const layout = layoutTubeMap(tubeMapNodes(graph), tracks, reads, {
     nodeWidthOption: "compressed",
     trackWidth: tubeWidth(tracks.length),
-    trackColor: (track) => track.type === "read" ? readColor(track) : pathCssColor(track.id, paths.length)
+    trackColor: (track) => track.type === "read" ? readColor(track) : pathColors[track.id]
   });
+  return layout ? { layout, pathColors } : void 0;
 }
 function drawnNodes(layout) {
   const nodes = [];
@@ -1865,10 +1881,11 @@ function extentOf(layout, yOffset) {
   };
 }
 function tubeMapLayout(graph) {
-  const layout = hasTubeMapPaths(graph) ? runTubeMap(graph) : void 0;
-  if (!layout) {
+  const run = hasTubeMapPaths(graph) ? runTubeMap(graph) : void 0;
+  if (!run) {
     return void 0;
   }
+  const { layout, pathColors } = run;
   const yOffset = layout.bounds.minY;
   const nodePositions = {};
   for (const node of drawnNodes(layout)) {
@@ -1882,7 +1899,7 @@ function tubeMapLayout(graph) {
   const { minY, maxY } = extentOf(layout, yOffset);
   return {
     nodePositions,
-    tubeMap: { layout, yOffset },
+    tubeMap: { layout, yOffset, pathColors },
     extent: {
       minX: layout.bounds.minX,
       maxX: layout.bounds.maxX,
@@ -1943,10 +1960,11 @@ function pathsReachBackbone(graph) {
   return graph.nodes.some(isBackbone) && hasTubeMapPaths(graph);
 }
 function tubeMapReferenceLayout(graph) {
-  const layout = pathsReachBackbone(graph) ? runTubeMap(graph) : void 0;
-  if (!layout) {
+  const run = pathsReachBackbone(graph) ? runTubeMap(graph) : void 0;
+  if (!run) {
     return void 0;
   }
+  const { layout, pathColors } = run;
   const columns = tubeMapColumns(graph, layout);
   const byOrder = new Map(columns.map((c) => [c.order, c]));
   const yOffset = layout.bounds.minY;
@@ -1957,7 +1975,7 @@ function tubeMapReferenceLayout(graph) {
   }
   return {
     nodePositions,
-    tubeMap: { layout, yOffset, columns },
+    tubeMap: { layout, yOffset, columns, pathColors },
     referenceAxis: true,
     pixelRows: true,
     extent: extentOf(layout, yOffset)
@@ -1984,7 +2002,7 @@ function sampleOf(path) {
 function labelOf(path) {
   return path.haplotype !== void 0 && path.sample !== void 0 ? `${path.sample}#${path.haplotype}` : sampleOf(path);
 }
-function sliceBetween(nodeIds, span, region, flanked = true) {
+function sliceBetween(nodeIds, span2, region, flanked = true) {
   if (!region || !flanked) {
     return { ids: nodeIds, complete: true };
   }
@@ -1993,7 +2011,7 @@ function sliceBetween(nodeIds, span, region, flanked = true) {
   let bestEnd = -Infinity;
   let bestStart = Infinity;
   nodeIds.forEach((id, i) => {
-    const s = span.get(id);
+    const s = span2.get(id);
     if (s) {
       if (s.end <= region.start && s.end > bestEnd) {
         bestEnd = s.end;
@@ -2020,25 +2038,25 @@ function walkRows(graph, region, unit) {
   const lengthOf = new Map(graph.nodes.map((n) => [n.id, n.length]));
   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();
+  const span2 = /* @__PURE__ */ new Map();
   let pos = referenceStart;
   for (const id of reference.nodeIds) {
     const len = lengthOf.get(id) ?? 0;
-    if (!span.has(id)) {
-      span.set(id, { start: pos, end: pos + len });
+    if (!span2.has(id)) {
+      span2.set(id, { start: pos, end: pos + len });
     }
     pos += len;
   }
-  const flanked = cut === void 0 || [...span.values()].some((s) => s.end <= cut.start) && [...span.values()].some((s) => s.start >= cut.end);
+  const flanked = cut === void 0 || [...span2.values()].some((s) => s.end <= cut.start) && [...span2.values()].some((s) => s.start >= cut.end);
   const rowOf = (path) => {
-    const { ids, complete } = sliceBetween(path.nodeIds, span, cut, flanked);
+    const { ids, complete } = sliceBetween(path.nodeIds, span2, cut, flanked);
     const runs = [];
     let bp = 0;
     let offReferenceBp = 0;
     let step = 0;
     for (const id of ids) {
       const len = lengthOf.get(id) ?? 0;
-      const s = span.get(id);
+      const s = span2.get(id);
       const last = runs.at(-1);
       const at = last?.referenceStart;
       const forward2 = s && at !== void 0 && step >= 0 && at + last.bp === s.start;
@@ -2429,8 +2447,8 @@ function spanOf(segments) {
   }
   return { min, max };
 }
-function distanceToSpan(x, span) {
-  return Math.max(0, span.min - x, x - span.max);
+function distanceToSpan(x, span2) {
+  return Math.max(0, span2.min - x, x - span2.max);
 }
 function facingSide(segments, other, tieBreak) {
   const startGap = distanceToSpan(segments[0].x, other);
@@ -2465,10 +2483,10 @@ function bowAround(p1x, p1y, p2x, p2y, toward, maxBow) {
     minAlong = Math.min(minAlong, along);
     maxAlong = Math.max(maxAlong, along);
   }
-  const span = toward.length ? maxAlong - minAlong : 0;
+  const span2 = toward.length ? maxAlong - minAlong : 0;
   const uncapped = Math.max(
     Math.abs(reach) * BOW_CLEARANCE / APEX_FRACTION,
-    span * ALONG_FRACTION
+    span2 * ALONG_FRACTION
   );
   const size = maxBow === void 0 ? uncapped : Math.min(uncapped, maxBow);
   return reach < 0 ? -size : size;
@@ -4022,6 +4040,123 @@ function wheelZoomFactor(e) {
   return ZOOM_PER_NOTCH ** -Math.max(-MAX_NOTCHES_PER_EVENT, Math.min(MAX_NOTCHES_PER_EVENT, notches));
 }
 
+// src/referenceStrip.ts
+import { abgrToCssRgba as abgrToCssRgba2 } from "@jbrowse/core/util/colorBits";
+var REFERENCE_STRIP_PX = 10;
+var REFERENCE_STRIP_ZONE_PX = REFERENCE_STRIP_PX + 8;
+var OVERHANG_PX = 5;
+function referenceStripBlocks(graph, {
+  colorScheme,
+  referenceRamp,
+  walkNodes
+}) {
+  const range = { ...computeColorSchemeRange(graph), referenceRamp };
+  const out = [];
+  graph.nodes.forEach((node, index) => {
+    if (isBackbone(node)) {
+      const own = getNodeColor(node, index, colorScheme, range);
+      out.push({
+        node: node.id,
+        bp0: node.stable.start,
+        bp1: node.stable.start + node.length,
+        color: abgrToCssRgba2(
+          walkNodes && !walkNodes.has(node.id) ? fadeAbgr(own, FADED_ALPHA) : own
+        )
+      });
+    }
+  });
+  return out.sort((a, b) => a.bp0 - b.bp0);
+}
+function span(frame, bp0, bp1) {
+  const a = bp0 * frame.scale + frame.translateX;
+  const b = bp1 * frame.scale + frame.translateX;
+  return a < b ? [a, b] : [b, a];
+}
+var HIT_SLOP_PX = 2;
+function stripOverhang(blocks, frame, width) {
+  const a = -frame.translateX / frame.scale;
+  const b = (width - frame.translateX) / frame.scale;
+  const lo = Math.min(a, b);
+  const hi = Math.max(a, b);
+  let below = 0;
+  let above = 0;
+  for (const block of blocks) {
+    below += Math.max(0, Math.min(block.bp1, lo) - block.bp0);
+    above += Math.max(0, block.bp1 - Math.max(block.bp0, hi));
+  }
+  return frame.scale >= 0 ? { left: Math.round(below), right: Math.round(above) } : { left: Math.round(above), right: Math.round(below) };
+}
+function stripBlockAt(blocks, frame, sx, sy) {
+  if (sy < 0 || sy > REFERENCE_STRIP_PX + HIT_SLOP_PX) {
+    return void 0;
+  }
+  let hit;
+  let best = HIT_SLOP_PX;
+  for (const b of blocks) {
+    const [x0, x1] = span(frame, b.bp0, b.bp1);
+    const dist = Math.max(0, x0 - sx, sx - x1);
+    if (dist <= best) {
+      best = dist;
+      hit = b.node;
+    }
+  }
+  return hit;
+}
+function drawOverhang(ctx, tipX, inward) {
+  const mid = REFERENCE_STRIP_PX / 2;
+  const baseX = tipX + inward * (OVERHANG_PX + 1);
+  ctx.moveTo(tipX + inward, mid);
+  ctx.lineTo(baseX, mid - OVERHANG_PX / 1.4);
+  ctx.lineTo(baseX, mid + OVERHANG_PX / 1.4);
+  ctx.closePath();
+}
+function drawReferenceStrip(ctx, blocks, frame, {
+  width,
+  lit,
+  darkMode
+}) {
+  const ink = darkMode ? "#ffffff" : "#18181c";
+  ctx.fillStyle = darkMode ? "#1f1f1f" : "#ffffff";
+  ctx.fillRect(0, 0, width, REFERENCE_STRIP_ZONE_PX);
+  for (const b of blocks) {
+    const [x0, x1] = span(frame, b.bp0, b.bp1);
+    if (x1 >= 0 && x0 <= width) {
+      ctx.fillStyle = b.color;
+      ctx.fillRect(x0, 0, Math.max(x1 - x0, 1), REFERENCE_STRIP_PX);
+    }
+  }
+  const overhang = stripOverhang(blocks, frame, width);
+  if (overhang.left > 0 || overhang.right > 0) {
+    ctx.beginPath();
+    if (overhang.left > 0) {
+      drawOverhang(ctx, 0, 1);
+    }
+    if (overhang.right > 0) {
+      drawOverhang(ctx, width, -1);
+    }
+    ctx.fillStyle = ink;
+    ctx.fill();
+    ctx.strokeStyle = darkMode ? "#1f1f1f" : "#ffffff";
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  }
+  if (lit) {
+    const [x0, x1] = span(frame, lit.start, lit.end);
+    const w = Math.max(x1 - x0, 3);
+    const left = (x0 + x1) / 2 - w / 2;
+    ctx.strokeStyle = ink;
+    ctx.lineWidth = 1.5;
+    ctx.strokeRect(left, 0.75, w, REFERENCE_STRIP_PX - 1.5);
+    if (lit.anchor) {
+      ctx.beginPath();
+      ctx.moveTo(left + w / 2, REFERENCE_STRIP_PX);
+      ctx.lineTo(lit.anchor.x, lit.anchor.y);
+      ctx.lineWidth = 1;
+      ctx.stroke();
+    }
+  }
+}
+
 // src/tubeMap/draw.ts
 import { curvePaths, nodeOutlinePath } from "@gmod/tubemap-core";
 
@@ -4259,16 +4394,23 @@ function drawTubeMap(ctx, picture, frame) {
 }
 var MISMATCH_FONT_PX = 12;
 var MIN_MISMATCH_FONT_PX = 6;
-function drawMismatches(ctx, marks, { x, y, yScale, width, darkMode }) {
-  const fontPx = MISMATCH_FONT_PX * yScale;
-  if (fontPx < MIN_MISMATCH_FONT_PX || marks.length === 0) {
+function mismatchesLegible(yScale) {
+  return MISMATCH_FONT_PX * yScale >= MIN_MISMATCH_FONT_PX;
+}
+function mismatchOnScreen(m, { x, width }) {
+  const [x0, x1] = m.kind === "insertion" ? [m.x, m.x] : [m.x0, m.x1];
+  return x(x1) >= 0 && x(x0) <= width;
+}
+function drawMismatches(ctx, marks, frame) {
+  const { x, y, yScale, darkMode } = frame;
+  if (!mismatchesLegible(yScale) || marks.length === 0) {
     return;
   }
-  const onScreen = (x0, x1) => x(x1) >= 0 && x(x0) <= width;
+  const fontPx = MISMATCH_FONT_PX * yScale;
   ctx.fillStyle = "grey";
   ctx.beginPath();
   for (const m of marks) {
-    if (m.kind === "deletion" && onScreen(m.x0, m.x1)) {
+    if (m.kind === "deletion" && mismatchOnScreen(m, frame)) {
       const left = x(m.x0);
       const top = y(m.y);
       ctx.rect(left, top, x(m.x1) - left, y(m.y + m.height) - top);
@@ -4279,9 +4421,12 @@ function drawMismatches(ctx, marks, { x, y, yScale, width, darkMode }) {
   ctx.textBaseline = "alphabetic";
   ctx.fillStyle = darkMode ? "#ffffff" : "#000000";
   for (const m of marks) {
-    if (m.kind === "substitution" && onScreen(m.x0, m.x1)) {
+    if (!mismatchOnScreen(m, frame)) {
+      continue;
+    }
+    if (m.kind === "substitution") {
       ctx.fillText(m.seq, x(m.x0) + 1, y(m.y + m.height));
-    } else if (m.kind === "insertion" && onScreen(m.x, m.x)) {
+    } else if (m.kind === "insertion") {
       ctx.fillText("*", x(m.x) - 3, y(m.y + m.height));
     }
   }
@@ -4352,8 +4497,8 @@ function warpX(knots, tx) {
   }
   const a = knots[lo];
   const b = knots[hi];
-  const span = b.tx - a.tx;
-  return span > 0 ? a.sx + (tx - a.tx) / span * (b.sx - a.sx) : a.sx;
+  const span2 = b.tx - a.tx;
+  return span2 > 0 ? a.sx + (tx - a.tx) / span2 * (b.sx - a.sx) : a.sx;
 }
 
 // src/tubeMap/frame.ts
@@ -4746,8 +4891,8 @@ function tubeX(boxes, bp, isEnd = false) {
   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;
+  const span2 = box.bp1 - box.bp0;
+  return span2 > 0 ? box.x0 + (Math.min(bp, box.bp1) - box.bp0) / span2 * (box.x1 - box.x0) : box.x0;
 }
 function tubeSpan(boxes, start, end) {
   const a = tubeX(boxes, start);
@@ -4766,8 +4911,7 @@ function rulerBoxes(byRefName) {
 var TICK_PX = 5;
 var LABEL_GAP_PX2 = 10;
 var TARGET_TICK_PX = 110;
-var ZIGZAG_PX = 4;
-var ZIGZAG_AMPLITUDE_PX = 2.5;
+var MIN_BRACKET_PX = 3;
 function rulerInk(darkMode) {
   return darkMode ? "#b0b0b8" : "#55555c";
 }
@@ -4776,7 +4920,18 @@ function niceStep(raw) {
   const m = raw / pow;
   return (m <= 1 ? 1 : m <= 2 ? 2 : m <= 5 ? 5 : 10) * pow;
 }
-function rulerMarks(boxes, x, width, measure) {
+function placeLabels2(candidates) {
+  const placed = [];
+  for (const a of candidates) {
+    if (placed.every(
+      (b) => Math.abs(a.at - b.at) >= (a.width + b.width) / 2 + LABEL_GAP_PX2
+    )) {
+      placed.push(a);
+    }
+  }
+  return placed.map(({ text, at }) => ({ text, at }));
+}
+function scaleMarks(boxes, x, width, measure) {
   const first = boxes[0];
   const last = boxes.at(-1);
   if (!first || !last) {
@@ -4789,31 +4944,9 @@ function rulerMarks(boxes, x, width, measure) {
     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);
@@ -4821,35 +4954,66 @@ function rulerMarks(boxes, x, width, measure) {
       positions.push({ text, at: sx, width: measure(text) });
     }
   }
-  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 {
+    spans: [{ x0: from, x1: to }],
+    ticks,
+    labels: placeLabels2(positions)
+  };
+}
+function boxMarks(boxes, x, width, measure) {
+  const shown = boxes.map((box) => ({ box, s0: x(box.x0), s1: x(box.x1) })).filter(({ s0, s1 }) => s1 >= 0 && s0 <= width);
+  const first = shown[0];
+  const last = shown.at(-1);
+  if (!first || !last) {
+    return void 0;
+  }
+  const label = (text, at) => ({
+    text,
+    at,
+    width: measure(text)
+  });
+  const position = (bp, at) => label(bp.toLocaleString("en-US"), at);
+  const spans = [];
+  const ticks = [];
+  const lengths = [];
+  const boundaries = [];
+  for (const { box, s0, s1 } of shown) {
+    spans.push({ x0: s0, x1: s1 });
+    ticks.push(Math.round(s0) + 0.5);
+    if (s1 - s0 >= MIN_BRACKET_PX) {
+      ticks.push(Math.round(s1) + 0.5);
+    }
+    const length = label(formatBp(box.bp1 - box.bp0), (s0 + s1) / 2);
+    if (length.width <= s1 - s0) {
+      lengths.push(length);
+    }
+    if (box !== first.box) {
+      boundaries.push(position(box.bp0, s0));
     }
   }
+  const ends = [
+    position(first.box.bp0, first.s0),
+    position(last.box.bp1, last.s1)
+  ];
   return {
-    from,
-    to,
+    spans,
     ticks,
-    squeezed,
-    labels: placed.map(({ text, at }) => ({ text, at }))
+    labels: placeLabels2([...ends, ...lengths, ...boundaries])
   };
 }
-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 rulerMarks(boxes, x, width, measure, referenceAxis = false) {
+  return (referenceAxis ? scaleMarks : boxMarks)(boxes, x, width, measure);
 }
-function drawTubeMapRuler(ctx, boxes, frame, top) {
+function drawTubeMapRuler(ctx, boxes, frame, top, referenceAxis = false) {
   const { x, width, darkMode } = frame;
   ctx.font = "10px sans-serif";
-  const marks = rulerMarks(boxes, x, width, (text) => ctx.measureText(text).width);
+  const marks = rulerMarks(
+    boxes,
+    x,
+    width,
+    (text) => ctx.measureText(text).width,
+    referenceAxis
+  );
   if (!marks) {
     return;
   }
@@ -4861,12 +5025,10 @@ function drawTubeMapRuler(ctx, boxes, frame, top) {
   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);
+  for (const { x0, x1 } of marks.spans) {
+    ctx.moveTo(Math.max(0, x0), y);
+    ctx.lineTo(Math.min(width, 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);
@@ -4978,14 +5140,14 @@ function tubeMapConnectors(nodes, bpToScreen, tubeToScreen, width) {
   }
   return out;
 }
-var HIT_SLOP_PX = 3;
+var HIT_SLOP_PX2 = 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;
+  let best = HIT_SLOP_PX2;
   for (const c of connectors) {
     const a = c.top0 + (c.bottom0 - c.top0) * t;
     const b = c.top1 + (c.bottom1 - c.top1) * t;
@@ -5220,10 +5382,10 @@ function walkRoutes(graph, byId, walkIndex, startId, endId) {
 // src/bubbles/classifyBubble.ts
 var REPEAT_GROWTH = 10;
 function coveringRepeat(b, repeats) {
-  const span = b.end - b.start;
+  const span2 = 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)
+    (r) => growth <= REPEAT_GROWTH * (r.end - r.start) && (span2 === 0 ? r.start <= b.start && b.start <= r.end : Math.min(b.end, r.end) - Math.max(b.start, r.start) >= span2 / 2)
   );
 }
 var SUPERBUBBLE_SEGMENTS = 40;
@@ -5461,12 +5623,16 @@ function layoutLabels(m) {
   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: LEGEND_INSET_PX + m.legendSize.height
+      y1: stripPx + LEGEND_INSET_PX + m.legendSize.height
     });
   }
   if (m.poppedFrom) {
@@ -5670,10 +5836,9 @@ var WELL_KNOWN_SAMPLES = /* @__PURE__ */ new Map([
 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;
+  return sample === void 0 || isGenericSample(sample) ? void 0 : sample;
 }
 function haplotypeOf(refName) {
   return panSNHaplotype(refName) ?? panSNSample(refName);
@@ -5720,10 +5885,10 @@ function graphBackbone(graph) {
     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);
+      const span2 = spans.get(refName);
+      if (span2) {
+        span2.start = Math.min(span2.start, start);
+        span2.end = Math.max(span2.end, end);
       } else {
         spans.set(refName, {
           refName,
@@ -5931,6 +6096,7 @@ export {
   LEGEND_INSET_PX,
   NODE_WIDTHS,
   REFERENCE_RAMP_MAX_HUE,
+  REFERENCE_STRIP_ZONE_PX,
   ROW_HEIGHT_PX,
   WELL_KNOWN_SAMPLES,
   assemblyWalk,
@@ -5948,6 +6114,7 @@ export {
   contains,
   cutWindowGFA,
   deletionEdges,
+  drawReferenceStrip,
   drawTubeMap,
   drawTubeMapConnectors,
   drawTubeMapGenes,
@@ -5987,10 +6154,12 @@ export {
   referenceNodes,
   referencePathQuery,
   referenceSamplesOf,
+  referenceStripBlocks,
   resolveColorScheme,
   resolveReferenceSample,
   rulerBoxes,
   screenToLayout,
+  stripBlockAt,
   tubeMapConnectors,
   tubeMapFrame,
   tubeMapGenes,

package/dist/types/bubbles/bubbleLine.d.ts

@@ -19,6 +19,7 @@ export interface BubbleRoute {
     walks: string[];
 }
 export declare function parseBubbleLine(line: string): MinigraphBubble;
+export declare function sameBubble(a: MinigraphBubble, b: MinigraphBubble): boolean;
 export declare function bubbleLabel(bubble: MinigraphBubble): string;
 export declare const SATURATED_PATH_COUNT = 2147483647;
 export declare function bubbleDescription(bubble: MinigraphBubble): string;

package/dist/types/index.d.ts

@@ -16,6 +16,8 @@ export { findHoveredEdge, findHoveredNode } from './util/hitDetection.js';
 export type { NodeInk } from './util/hitDetection.js';
 export type { AxisScale } from './util/geometry.js';
 export { wheelZoomFactor } from './util/wheelZoom.js';
+export { REFERENCE_STRIP_ZONE_PX, drawReferenceStrip, referenceStripBlocks, stripBlockAt, } from './referenceStrip.js';
+export type { StripBlock } from './referenceStrip.js';
 export { drawTubeMap, tubeMapPicture } from './tubeMap/draw.js';
 export type { TubeMapFrame, TubeMapPicture } from './tubeMap/draw.js';
 export { referenceKnots, warpX } from './tubeMap/warp.js';

package/dist/types/labelLayout.d.ts

@@ -25,6 +25,7 @@ export interface LabelLayoutSource {
         width: number;
         height: number;
     };
+    referenceStripZonePx?: number;
     drawnRowLabels: {
         label: string;
         y: number;

package/dist/types/layout/tubeMapLayout.d.ts

@@ -10,6 +10,7 @@ export interface TubeMapColumn {
 }
 export interface TubeMapDrawing {
     layout: TubeMapLayout;
+    pathColors: string[];
     yOffset: number;
     columns?: TubeMapColumn[];
     coarse?: Coarsened;

package/dist/types/pansn.d.ts

@@ -1,5 +1,6 @@
 import type { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
 export declare function panSNSample(refName: string): string;
+export declare function isGenericSample(sample: string): boolean;
 export declare function panSNHaplotype(refName: string): string | undefined;
 export declare function panSNContig(refName: string): string;
 export declare function panSNMatchesPrefix(refName: string, prefix: string | undefined): boolean;

package/dist/types/pathColors.d.ts

@@ -6,9 +6,10 @@ export declare const PATH_LIGHTNESS = 0.5;
 export declare const MAX_PATH_COLORS = 16;
 export declare function pathColorsLegible(pathCount: number): boolean;
 export declare function pathCssColor(index: number, count: number): string;
+export declare function pathGreyCssColor(index: number, count: number): string;
 export interface PathLegendEntry {
     name: string;
     label: string;
     color: string;
 }
-export declare function pathLegend(paths: GraphPath[]): PathLegendEntry[];
+export declare function pathLegend(paths: GraphPath[], colors?: readonly string[]): PathLegendEntry[];

package/dist/types/referenceStrip.d.ts

@@ -0,0 +1,45 @@
+import type { ResolvedColorScheme } from './colorSchemes.js';
+import type { ReferenceRamp } from './renderer/GeometryBuilder.js';
+import type { Graph, NodeSegment } from './types.js';
+export declare const REFERENCE_STRIP_PX = 10;
+export declare const REFERENCE_STRIP_ZONE_PX: number;
+export interface StripBlock {
+    node: string;
+    bp0: number;
+    bp1: number;
+    color: string;
+}
+export declare function referenceStripBlocks(graph: Graph, { colorScheme, referenceRamp, walkNodes, }: {
+    colorScheme: ResolvedColorScheme;
+    referenceRamp?: ReferenceRamp;
+    walkNodes?: ReadonlySet<string>;
+}): StripBlock[];
+export interface BpFrame {
+    scale: number;
+    translateX: number;
+}
+export declare function stripOverhang(blocks: readonly StripBlock[], frame: BpFrame, width: number): {
+    left: number;
+    right: number;
+};
+export declare function stripBlockAt(blocks: readonly StripBlock[], frame: BpFrame, sx: number, sy: number): string | undefined;
+export declare function nodeAnchor(segments: readonly NodeSegment[] | undefined, toScreen: (p: NodeSegment) => {
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+} | undefined;
+export interface StripLit {
+    start: number;
+    end: number;
+    anchor?: {
+        x: number;
+        y: number;
+    };
+}
+export declare function drawReferenceStrip(ctx: CanvasRenderingContext2D, blocks: readonly StripBlock[], frame: BpFrame, { width, lit, darkMode, }: {
+    width: number;
+    lit?: StripLit;
+    darkMode?: boolean;
+}): void;

package/dist/types/renderer/GeometryBuilder.d.ts

@@ -4,6 +4,7 @@ import type { Graph, GraphNode, NodeSegment } from '../types.js';
 import type { WalkHighlight } from '../walkHighlight.js';
 import type { RenderBatch } from './types.js';
 import type { AxisScale, BezierCurve } from '../util/geometry.js';
+export declare const FADED_ALPHA = 0.18;
 export interface BuildOptions {
     nodePositions: Record<string, NodeSegment[]>;
     graph: Graph;

package/dist/types/tubeMap/axis.d.ts

@@ -15,21 +15,17 @@ export declare function tubeSpan(boxes: readonly Box[], start: number, end: numb
     x1: number;
 };
 export declare function rulerBoxes(byRefName: ReferenceBoxes): Box[] | undefined;
-export declare const ZIGZAG_PX = 4;
-export declare const ZIGZAG_AMPLITUDE_PX = 2.5;
 export declare function rulerInk(darkMode?: boolean): "#b0b0b8" | "#55555c";
 export interface RulerMarks {
-    from: number;
-    to: number;
-    ticks: number[];
-    squeezed: {
+    spans: {
         x0: number;
         x1: number;
     }[];
+    ticks: number[];
     labels: {
         text: string;
         at: number;
     }[];
 }
-export declare function rulerMarks(boxes: readonly Box[], x: (tx: number) => number, width: number, measure: (text: string) => number): RulerMarks | undefined;
-export declare function drawTubeMapRuler(ctx: CanvasRenderingContext2D, boxes: readonly Box[], frame: TubeMapFrame, top: number): void;
+export declare function rulerMarks(boxes: readonly Box[], x: (tx: number) => number, width: number, measure: (text: string) => number, referenceAxis?: boolean): RulerMarks | undefined;
+export declare function drawTubeMapRuler(ctx: CanvasRenderingContext2D, boxes: readonly Box[], frame: TubeMapFrame, top: number, referenceAxis?: boolean): void;

package/dist/types/tubeMap/draw.d.ts

@@ -64,4 +64,6 @@ export interface TubeMapFrame extends TubeMapTransform {
     darkMode?: boolean;
 }
 export declare function drawTubeMap(ctx: CanvasRenderingContext2D, picture: TubeMapPicture, frame: TubeMapFrame): void;
+export declare function mismatchesLegible(yScale: number): boolean;
+export declare function mismatchOnScreen(m: TubeMapMismatch, { x, width }: Pick<TubeMapFrame, 'x' | 'width'>): boolean;
 export {};

package/dist/types/tubeMap/reads.d.ts

@@ -4,6 +4,8 @@ import type { InputTrack } from '@gmod/tubemap-core';
 export declare function canonicalStrand(node: GraphNode): "+" | "-";
 export declare function stepName(node: GraphNode, strand: '+' | '-'): string;
 export declare function tubeMapReads(graph: Graph, records: readonly GafRecord[], firstId: number): InputTrack[];
+export declare const FORWARD_READ_COLORS: string[];
+export declare const REVERSE_READ_COLORS: string[];
 export declare function readColor(read: {
     id: number;
     is_reverse?: boolean;

package/package.json

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