@jbrowse/bandage-core 4.0.30 → 4.1.0

package/dist/chunks/{chunk-P7UDDVHK.js → chunk-WAW4SYMY.js}

@@ -1962,9 +1962,29 @@ function stepsOf(pieces, lengthOf) {
   }
   return steps;
 }
+function stepSpans(pieces, lengthOf) {
+  const spans = [];
+  let end;
+  for (const piece of pieces) {
+    if (piece.start === void 0 || end !== void 0 && piece.start < end) {
+      return void 0;
+    }
+    if (end !== void 0 && piece.start > end) {
+      spans.push({ start: end, end: piece.start });
+    }
+    let pos = piece.start;
+    for (const id of piece.nodeIds) {
+      const len = lengthOf.get(id) ?? 0;
+      spans.push({ start: pos, end: pos + len });
+      pos += len;
+    }
+    end = pos;
+  }
+  return spans;
+}
 function sliceBetween(steps, span, region, flanked = true) {
   if (!region || !flanked) {
-    return { ids: steps, complete: true };
+    return { ids: steps, complete: true, from: -1, to: -1 };
   }
   let i0 = -1;
   let i1 = -1;
@@ -1984,17 +2004,22 @@ function sliceBetween(steps, span, region, flanked = true) {
     }
   });
   if (i0 < 0 || i1 < 0) {
-    return { ids: steps, complete: false };
+    return { ids: steps, complete: false, from: -1, to: -1 };
   }
   const ids = steps.slice(Math.min(i0, i1) + 1, Math.max(i0, i1));
-  return { ids: i0 < i1 ? ids : ids.reverse(), complete: true };
+  return {
+    ids: i0 < i1 ? ids : ids.reverse(),
+    complete: true,
+    from: i0,
+    to: i1
+  };
 }
 function walkRows(graph, region, unit) {
   const paths = graph.paths ?? [];
   const isReference2 = (p) => pathOrigin(p.name).name === graph.referencePath;
-  const referencePieces2 = paths.some(isReference2) ? paths.filter(isReference2).sort((a, b) => (a.start ?? 0) - (b.start ?? 0)) : paths.slice(0, 1);
-  const first = referencePieces2[0];
-  const others = paths.filter((p) => !referencePieces2.includes(p));
+  const referencePieces = paths.some(isReference2) ? paths.filter(isReference2).sort((a, b) => (a.start ?? 0) - (b.start ?? 0)) : paths.slice(0, 1);
+  const first = referencePieces[0];
+  const others = paths.filter((p) => !referencePieces.includes(p));
   if (!first || others.length === 0) {
     return void 0;
   }
@@ -2006,7 +2031,7 @@ function walkRows(graph, region, unit) {
   const referenceStart = first.start ?? 0;
   const cut = region && region.end > region.start ? region : void 0;
   const span = /* @__PURE__ */ new Map();
-  for (const piece of referencePieces2) {
+  for (const piece of referencePieces) {
     let pos = piece.start ?? 0;
     for (const id of piece.nodeIds) {
       const len = lengthOf.get(id) ?? 0;
@@ -2020,12 +2045,15 @@ function walkRows(graph, region, unit) {
   const rowOf = (pieces) => {
     const path = pieces[0];
     const ordered = [...pieces].sort((a, b) => (a.start ?? 0) - (b.start ?? 0));
-    const { ids, complete } = sliceBetween(
+    const { ids, complete, from, to } = sliceBetween(
       stepsOf(ordered, lengthOf),
       span,
       cut,
       flanked
     );
+    const spans = stepSpans(ordered, lengthOf);
+    const contig = path.contig ?? panSNContig(pathOrigin(path.name).name);
+    const axis = !spans?.length ? void 0 : from < 0 ? { contig, start: spans[0].start, reversed: false } : from < to ? { contig, start: spans[from].end, reversed: false } : { contig, start: spans[from].start, reversed: true };
     const runs = [];
     let bp = 0;
     let offReferenceBp = 0;
@@ -2077,14 +2105,15 @@ function walkRows(graph, region, unit) {
       offReferenceBp,
       gapBp,
       complete,
-      runs
+      runs,
+      axis
     };
   };
   const origin = cut ? cut.start : referenceStart;
   return {
     origin,
     unit,
-    reference: rowOf(referencePieces2),
+    reference: rowOf(referencePieces),
     rows: [...walks.values()].map(rowOf).sort(
       (a, b) => Number(b.complete) - Number(a.complete) || b.bp - a.bp || a.label.localeCompare(b.label)
     )
@@ -2440,7 +2469,7 @@ function placeByWalks(graph, backbone) {
   return placed;
 }
 function placeBySearch(adjacent, key) {
-  const queue = [...key.entries()].sort(([a, ka], [b, kb]) => compareKeys(ka, kb) || compare(a, b)).map(([id]) => id);
+  const queue = [...key.entries()].sort(([a, ka], [b, kb2]) => compareKeys(ka, kb2) || compare(a, b)).map(([id]) => id);
   const placed = queue.length;
   for (const id of queue) {
     const from = key.get(id);
@@ -3064,7 +3093,7 @@ var LAYOUT_MODES = [
   {
     value: "walkrows",
     label: "Walk rows",
-    description: "x is each walk's own bp: one bar per haplotype, sequence the reference also carries in blue and sequence it does not in purple, so a repeat expansion reads as bar length. Needs W or P lines.",
+    description: "x is each walk's own bp: one bar per haplotype, blue where the graph aligns it to the reference and purple where it does not, so a repeat expansion reads as bar length, and each bar boxes its haplotype's own genes where the session has them. Needs W or P lines.",
     run: walkRowLayout,
     cutMargins: false,
     wholeWalks: true,
@@ -4268,7 +4297,7 @@ function walkHighlight(graph, name) {
     });
   }
   const reference = isReference(graph, name);
-  const referencePieces2 = reference ? [] : (graph.paths ?? []).filter((p) => isReference(graph, p.name));
+  const referencePieces = reference ? [] : (graph.paths ?? []).filter((p) => isReference(graph, p.name));
   return {
     name,
     reference,
@@ -4278,7 +4307,7 @@ function walkHighlight(graph, name) {
     progress,
     steps: pieces.reduce((sum, piece) => sum + piece.nodeIds.length, 0),
     bp,
-    referenceBp: referencePieces2.length > 0 ? referencePieces2.reduce((sum, piece) => sum + bpOf(piece), 0) : void 0
+    referenceBp: referencePieces.length > 0 ? referencePieces.reduce((sum, piece) => sum + bpOf(piece), 0) : void 0
   };
 }
 function laneColors(graph, walk, encoding, ramp) {
@@ -4405,6 +4434,28 @@ function walkPosition(walk, nodeId, length) {
   return `${range.contig}:${groupDigits(start)}-${groupDigits(start + length)}`;
 }
 
+// src/el.ts
+function el(tag, attrs = {}, ...children) {
+  return {
+    tag,
+    attrs,
+    children: children.filter((c) => !!c || c === "")
+  };
+}
+function escapeText(s) {
+  return s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function escapeAttr(s) {
+  return escapeText(s).replaceAll('"', "&quot;");
+}
+function serializeEl(node) {
+  if (typeof node === "string") {
+    return escapeText(node);
+  }
+  const attrs = Object.entries(node.attrs).filter(([, v]) => v !== void 0).map(([k, v]) => ` ${k}="${escapeAttr(String(v))}"`).join("");
+  return `<${node.tag}${attrs}>${node.children.map(serializeEl).join("")}</${node.tag}>`;
+}
+
 // src/facetGrid.ts
 var FACET_GAP_PX = 8;
 var FACET_TITLE_PX = 34;
@@ -4711,6 +4762,385 @@ function layoutLabels(m) {
   };
 }
 
+// src/referenceRampCss.ts
+function rampHueCss(hue) {
+  return `hsl(${hue}, 70%, 50%)`;
+}
+function rampHue(bp, domain) {
+  const frac = (bp - domain.start) / (domain.end - domain.start);
+  return Math.max(0, Math.min(1, frac)) * REFERENCE_RAMP_MAX_HUE;
+}
+var HUE_STOP_DEG = 30;
+function rampStops({ start, bp, reversed }, domain) {
+  const low = rampHue(start, domain);
+  const high = rampHue(start + bp, domain);
+  if (high - low < 1) {
+    return [(low + high) / 2];
+  }
+  const n2 = Math.ceil((high - low) / HUE_STOP_DEG);
+  return Array.from(
+    { length: n2 + 1 },
+    (_, i) => rampHue(start + bp * (reversed ? n2 - i : i) / n2, domain)
+  );
+}
+var RAMP_GRADIENT_CSS = `linear-gradient(to right, ${Array.from(
+  { length: 7 },
+  (_, i) => `${rampHueCss(i / 6 * REFERENCE_RAMP_MAX_HUE)} ${i / 6 * 100}%`
+).join(", ")})`;
+
+// src/layout/walkRowDraw.ts
+var ON_REFERENCE = "#2f8fd6";
+var OFF_REFERENCE = "#8e3fbf";
+var OUTSIDE_CUT = "#bdbdbd";
+var GENE_INK = "#1c1c22";
+var BAR_PX = 12;
+var GAP_PX = 4;
+var MIN_TILE_PX = 3;
+function kb(bp) {
+  return `${(bp / 1e3).toFixed(bp < 1e4 ? 1 : 0)} kb`;
+}
+function units(bp, unit) {
+  return unit ? ` \u2248 ${Math.round(bp / unit)} units` : "";
+}
+function walkRowReadout(row, reference, unit, call) {
+  const { bp, gapBp, complete } = row;
+  if (!reference) {
+    return `${kb(bp)}${units(bp, unit)}`;
+  }
+  const delta = bp - reference.bp;
+  const against = delta === 0 ? "" : ` (${delta > 0 ? "+" : "\u2212"}${kb(Math.abs(delta))})`;
+  const outside = gapBp > 0 ? ` \xB7 ${kb(gapBp)} outside the cut` : "";
+  const called = call ? ` \xB7 called ${kb(call.bp)}${call.spanningReads === 0 ? " \xB7 no spanning read" : ""}` : "";
+  return `${kb(bp)}${units(bp, unit)}${against}${outside}${complete ? "" : " \xB7 partial walk"}${called}`;
+}
+function readoutPlacement(text, endX, width) {
+  const x = endX + 6;
+  const fits = x + text.length * LABEL_CHAR_PX < width;
+  return fits ? { x, anchor: "start", halo: false } : { x: endX - 6, anchor: "end", halo: true };
+}
+function unitTicks(bp, unit, pxPerBp) {
+  if (unit * pxPerBp < MIN_TILE_PX) {
+    return [];
+  }
+  const ticks = [];
+  for (let k = unit; k < bp; k += unit) {
+    ticks.push(k);
+  }
+  return ticks;
+}
+function runPaint(run, ramp) {
+  if (run.gap) {
+    return { fill: OUTSIDE_CUT };
+  }
+  if (!ramp) {
+    return { fill: run.onReference ? ON_REFERENCE : OFF_REFERENCE };
+  }
+  if (run.referenceStart === void 0) {
+    return { fill: REFERENCE_RAMP_ALT_CSS };
+  }
+  const stops = rampStops({ ...run, start: run.referenceStart }, ramp);
+  return stops.length === 1 ? { fill: rampHueCss(stops[0]) } : { stops: stops.map(rampHueCss) };
+}
+function alongRow(axis, start, end) {
+  return axis.reversed ? { start: axis.start - end, end: axis.start - start } : { start: start - axis.start, end: end - axis.start };
+}
+function rowSpan(axis, bp) {
+  return axis.reversed ? { start: axis.start - bp, end: axis.start } : { start: axis.start, end: axis.start + bp };
+}
+function placeRowGenes(rows, byRow) {
+  const placed = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const genes = byRow.get(row.name);
+    if (!row.axis || !genes) {
+      continue;
+    }
+    const axis = row.axis;
+    const clip = ({ start, end }) => ({
+      start: Math.max(0, start),
+      end: Math.min(row.bp, end)
+    });
+    placed.set(
+      row.name,
+      genes.map((g) => ({
+        name: g.name,
+        ...clip(alongRow(axis, g.start, g.end)),
+        exons: g.exons.map((e) => clip(alongRow(axis, e.start, e.end))).filter((e) => e.end > e.start)
+      })).filter((g) => g.end > g.start).sort((a, b) => a.start - b.start)
+    );
+  }
+  return placed;
+}
+var GENE_FONT_PX = 9;
+var GENE_CHAR_PX = 5.2;
+function rowGeneBoxes(genes, X, y) {
+  const boxes = genes.map((g) => {
+    const x = X(g.start);
+    return {
+      g,
+      x,
+      w: Math.max(2, X(g.end) - x)
+    };
+  });
+  const taken = [];
+  const named = new Set(
+    [...boxes].sort((a, b) => a.w - b.w).filter(({ g, x, w }) => {
+      const half = g.name.length * GENE_CHAR_PX / 2;
+      const at = [x + w / 2 - half, x + w / 2 + half];
+      if (2 * half > w + 6 || taken.some(([a, b]) => at[0] < b + 2 && at[1] > a - 2)) {
+        return false;
+      }
+      taken.push(at);
+      return true;
+    })
+  );
+  return boxes.map((box) => ({
+    name: box.g.name,
+    x: box.x,
+    y: y - BAR_PX / 2 - 2,
+    w: box.w,
+    h: BAR_PX + 4,
+    exons: box.g.exons.map((e) => ({
+      x: X(e.start),
+      w: Math.max(1, X(e.end) - X(e.start))
+    })),
+    label: named.has(box) ? { x: box.x + box.w / 2, y: y + 3, size: GENE_FONT_PX } : void 0
+  }));
+}
+var rowsText = (n2) => `${n2} row${n2 === 1 ? "" : "s"}`;
+function walkRowsKey(bars, o = {}) {
+  const entries = [
+    {
+      swatch: {
+        kind: "bar",
+        fill: o.ramp ? o.rampCss ?? ON_REFERENCE : ON_REFERENCE
+      },
+      label: `aligned to ${bars.reference.label} in the graph`
+    },
+    {
+      swatch: {
+        kind: "bar",
+        fill: o.ramp ? REFERENCE_RAMP_ALT_CSS : OFF_REFERENCE
+      },
+      label: "not aligned to it in the graph"
+    }
+  ];
+  if ([bars.reference, ...bars.rows].some((row) => row.gapBp > 0)) {
+    entries.push({
+      swatch: { kind: "gap", fill: OUTSIDE_CUT },
+      label: "walked outside the cut"
+    });
+  }
+  if (o.genes) {
+    entries.push({
+      swatch: { kind: "gene" },
+      label: "genes, each row's own annotation"
+    });
+    if (o.genes.untracked) {
+      entries.push({
+        swatch: { kind: "gene" },
+        label: `no gene track for ${rowsText(o.genes.untracked)}`,
+        note: true
+      });
+    }
+    if (o.genes.unplaced) {
+      entries.push({
+        swatch: { kind: "gene" },
+        label: `no contig coordinates for ${rowsText(o.genes.unplaced)}`,
+        note: true
+      });
+    }
+    if (o.genes.unread) {
+      entries.push({
+        swatch: { kind: "gene" },
+        label: `genes not read for the last ${rowsText(o.genes.unread)}`,
+        note: true
+      });
+    }
+  }
+  return entries;
+}
+var CALL_TICK = "#111";
+var UNBACKED_TICK = "#9e9e9e";
+var DISAGREES = "#c62828";
+function walkRowsKeyTree(entries, x, y) {
+  let at = 0;
+  const parts = entries.flatMap((e) => {
+    const swatch = e.note ? void 0 : e.swatch.kind === "gene" ? el("rect", {
+      x: at,
+      y: 5,
+      width: 18,
+      height: 8,
+      fill: "none",
+      stroke: GENE_INK,
+      "stroke-width": 1.5
+    }) : el("rect", {
+      x: at,
+      y: e.swatch.kind === "gap" ? 7 : 5,
+      width: 18,
+      height: e.swatch.kind === "gap" ? GAP_PX : 8,
+      rx: 2,
+      fill: e.swatch.fill
+    });
+    const text = el(
+      "text",
+      {
+        x: e.note ? at : at + 23,
+        y: 13,
+        "font-style": e.note ? "italic" : void 0,
+        fill: e.note ? "#666" : void 0
+      },
+      e.label
+    );
+    at += (e.note ? 0 : 23) + e.label.length * LABEL_CHAR_PX + 16;
+    return swatch ? [swatch, text] : [text];
+  });
+  return {
+    width: at,
+    tree: el(
+      "g",
+      {
+        transform: `translate(${x} ${y})`,
+        "font-family": "Helvetica, Arial, sans-serif",
+        "font-size": 11
+      },
+      ...parts
+    )
+  };
+}
+function geneTree(box, y) {
+  return el(
+    "g",
+    { class: "row-gene", "data-testid": "graph-walk-gene" },
+    el("title", {}, box.name),
+    ...box.exons.map(
+      (e) => el("rect", {
+        x: e.x,
+        y: y - BAR_PX / 2,
+        width: e.w,
+        height: BAR_PX,
+        fill: GENE_INK,
+        opacity: 0.35
+      })
+    ),
+    el("rect", {
+      x: box.x,
+      y: box.y,
+      width: box.w,
+      height: box.h,
+      fill: "none",
+      stroke: GENE_INK,
+      "stroke-width": 1.5
+    }),
+    box.label && el(
+      "text",
+      {
+        x: box.label.x,
+        y: box.label.y,
+        "font-family": "sans-serif",
+        "font-size": box.label.size,
+        "font-weight": 600,
+        "text-anchor": "middle",
+        fill: GENE_INK,
+        stroke: "white",
+        "stroke-width": 2.5,
+        "paint-order": "stroke"
+      },
+      box.name
+    )
+  );
+}
+function walkRowsTree(bars, frame, o = {}) {
+  const X = (bp) => bp * frame.scaleX + frame.translateX;
+  const Y = (row) => row * ROW_HEIGHT_PX * frame.scaleY + frame.translateY;
+  const { origin, unit, reference, rows } = bars;
+  const along = (offset) => X(origin + offset);
+  const prefix = o.idPrefix ?? "walkrow";
+  const rowTree = (row, i) => {
+    const y = Y(i);
+    if (y < -BAR_PX || y > frame.height + BAR_PX) {
+      return void 0;
+    }
+    const runs = row.runs.flatMap((run) => {
+      const paint2 = runPaint(run, o.ramp);
+      const h = run.gap ? GAP_PX : BAR_PX;
+      const id = `${prefix}-${i}-${run.start}`;
+      const rect = el("rect", {
+        x: along(run.start),
+        y: y - h / 2,
+        width: Math.max(1, run.bp * frame.scaleX),
+        height: h,
+        fill: "stops" in paint2 ? `url(#${id})` : paint2.fill
+      });
+      return "stops" in paint2 ? [
+        el(
+          "linearGradient",
+          { id },
+          ...paint2.stops.map(
+            (color, k) => el("stop", {
+              offset: k / (paint2.stops.length - 1),
+              "stop-color": color
+            })
+          )
+        ),
+        rect
+      ] : [rect];
+    });
+    const ticks = unit ? unitTicks(row.bp, unit, frame.scaleX).map(
+      (k) => el("line", {
+        x1: along(k),
+        x2: along(k),
+        y1: y - BAR_PX / 2,
+        y2: y + BAR_PX / 2,
+        stroke: "white",
+        "stroke-width": 1
+      })
+    ) : [];
+    const { call } = row;
+    const text = walkRowReadout(
+      row,
+      i === 0 ? void 0 : reference,
+      unit,
+      call
+    );
+    const at = readoutPlacement(text, along(row.bp), frame.width);
+    return el(
+      "g",
+      {
+        "data-testid": i === 0 ? "graph-walk-reference" : "graph-walk-row"
+      },
+      ...runs,
+      ...ticks,
+      ...rowGeneBoxes(o.rowGenes?.get(row.name) ?? [], along, y).map(
+        (box) => geneTree(box, y)
+      ),
+      call && el("rect", {
+        "data-testid": "graph-walk-call",
+        x: along(call.bp) - 1,
+        y: y - BAR_PX / 2 - 3,
+        width: 2,
+        height: BAR_PX + 6,
+        fill: call.spanningReads === 0 ? UNBACKED_TICK : CALL_TICK
+      }),
+      el(
+        "text",
+        {
+          x: at.x,
+          y: y + 4,
+          "font-family": "sans-serif",
+          "font-size": 11,
+          fill: call?.agrees === false ? DISAGREES : "#333",
+          stroke: at.halo ? "white" : void 0,
+          "stroke-width": at.halo ? 3 : void 0,
+          "paint-order": "stroke",
+          "text-anchor": at.anchor
+        },
+        text
+      )
+    );
+  };
+  return el("g", {}, ...[reference, ...rows].map(rowTree));
+}
+
 // src/renderer/svgCanvas.ts
 var n = (v) => +v.toFixed(1);
 function paint(css) {
@@ -4824,7 +5254,7 @@ function svgCanvas(width, height) {
 }
 
 // src/version.ts
-var version = "4.0.30";
+var version = "4.1.0";
 
 // src/viewport.ts
 function axisScaleOf(scale, pixelRows) {
@@ -4869,12 +5299,12 @@ function screenToLayout(x, y, t, axis) {
 
 // src/figure.ts
 var FONT = 'font-family="Helvetica, Arial, sans-serif" font-size="11"';
-var BAR_PX = 48;
+var BAR_PX2 = 48;
 var SWATCH_PX = 18;
 var KEY_GAP_PX = 16;
 var FADED = "rgb(160,160,160)";
 var EXON_COLOR = "#daa520";
-var GENE_INK = "#1c1c22";
+var GENE_INK2 = "#1c1c22";
 var MIN_LANE_PX = 4;
 var EXON_GAP_PX = 1;
 var EXON_LINE_PX = 2;
@@ -4882,7 +5312,7 @@ function esc(s) {
   return s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
 }
 function keySvg(id, x, y, stops, label, after, under, opacity = 1) {
-  const bar = stops.length > 1 ? BAR_PX : SWATCH_PX;
+  const bar = stops.length > 1 ? BAR_PX2 : SWATCH_PX;
   const fill = stops.length > 1 ? `fill="url(#${id})"` : `fill="${stops[0].color}"${opacity < 1 ? ` fill-opacity="${opacity}"` : ""}`;
   const defs = stops.length > 1 ? `<linearGradient id="${id}">${stops.map((s) => `<stop offset="${s.offset}" stop-color="${s.color}"/>`).join("")}</linearGradient>` : "";
   const width = Math.max(
@@ -4913,15 +5343,17 @@ function screenPath(d, t) {
   );
 }
 function chip(x, y, w, name, note) {
-  return `<rect x="${x - w / 2}" y="${y - LABEL_PX - LABEL_PAD + 2}" width="${w}" height="${LABEL_PX + LABEL_PAD * 2 - 2}" rx="3" fill="#fff" fill-opacity="0.85" stroke="${EXON_COLOR}"/><text x="${x}" y="${y}" font-family="Helvetica, Arial, sans-serif" font-size="${LABEL_PX}" fill="${GENE_INK}" text-anchor="middle"><tspan font-style="italic" font-weight="600">${esc(name)}</tspan>${note ? esc(note) : ""}</text>`;
+  return `<rect x="${x - w / 2}" y="${y - LABEL_PX - LABEL_PAD + 2}" width="${w}" height="${LABEL_PX + LABEL_PAD * 2 - 2}" rx="3" fill="#fff" fill-opacity="0.85" stroke="${EXON_COLOR}"/><text x="${x}" y="${y}" font-family="Helvetica, Arial, sans-serif" font-size="${LABEL_PX}" fill="${GENE_INK2}" text-anchor="middle"><tspan font-style="italic" font-weight="600">${esc(name)}</tspan>${note ? esc(note) : ""}</text>`;
 }
 function figureSvg(graph, layout, o = {}) {
   const width = o.width ?? 1200;
   const room = o.height ?? 800;
   const region = o.region;
   const rampDomain = o.colorDomain ?? region;
+  const rows = o.walkRows;
   const bounds = drawingBounds(layout, {
-    region: o.fitToDrawing ? void 0 : region
+    region: o.fitToDrawing ? void 0 : region,
+    extent: rows && layout.extent ? walkRowsExtent(rows) : void 0
   });
   const pixelRows = layout.pixelRows ?? false;
   const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
@@ -4946,7 +5378,7 @@ function figureSvg(graph, layout, o = {}) {
   };
   const contigThickness = o.contigThickness ?? 6;
   const nodeWidth2 = o.nodeWidth ?? "depth";
-  const pins = o.genes?.length && !layout.tubeMap ? genePins(graph, o.genes, layout.nodePositions) : [];
+  const pins = o.genes?.length && !layout.tubeMap && !rows ? genePins(graph, o.genes, layout.nodePositions) : [];
   const ink = nodeInk(graph, nodeById, contigThickness, nodeWidth2);
   let masks = 0;
   function overlays(highlight, t, w, h) {
@@ -4982,11 +5414,32 @@ function figureSvg(graph, layout, o = {}) {
     )) {
       const pinY = screen(pin.at).y + contigThickness / 2;
       out.push(
-        `<line x1="${x}" x2="${x}" y1="${y - LABEL_PX - 2}" y2="${pinY}" stroke="${GENE_INK}" stroke-width="0.8" stroke-opacity="0.6"/>`,
+        `<line x1="${x}" x2="${x}" y1="${y - LABEL_PX - 2}" y2="${pinY}" stroke="${GENE_INK2}" stroke-width="0.8" stroke-opacity="0.6"/>`,
         chip(x, y, cw, pin.gene.name, text.slice(pin.gene.name.length))
       );
     }
-    for (const { label, y } of layout.rowLabels ?? []) {
+    if (rows) {
+      out.push(
+        serializeEl(
+          walkRowsTree(
+            rows,
+            { ...t, width: w, height: h },
+            {
+              ramp: referenceRamp && {
+                start: referenceRamp.start,
+                end: referenceRamp.start + referenceRamp.span
+              },
+              rowGenes: o.rowGenes
+            }
+          )
+        )
+      );
+    }
+    const rowLabels = rows ? [rows.reference, ...rows.rows].map((r, i) => ({
+      label: r.label,
+      y: i * ROW_HEIGHT_PX
+    })) : layout.rowLabels ?? [];
+    for (const { label, y } of rowLabels) {
       const sy = y * t.scaleY + t.translateY;
       if (sy >= 0 && sy <= h) {
         out.push(
@@ -5017,7 +5470,7 @@ function figureSvg(graph, layout, o = {}) {
     const renderer = new Canvas2DRenderer(canvas);
     renderer.uploadGeometry(
       buildGeometry({
-        nodePositions: layout.nodePositions,
+        nodePositions: rows ? {} : layout.nodePositions,
         graph,
         nodeById,
         colorScheme,
@@ -5093,7 +5546,21 @@ function figureSvg(graph, layout, o = {}) {
           0.3
         )
       );
-    } else if (referenceRamp) {
+    }
+    if (rows) {
+      const key = walkRowsKeyTree(
+        walkRowsKey(rows, {
+          ramp: referenceRamp && {
+            start: referenceRamp.start,
+            end: referenceRamp.start + referenceRamp.span
+          },
+          genes: o.rowGenes?.size ? o.rowGeneGaps : void 0
+        }),
+        x,
+        2
+      );
+      push({ width: key.width, markup: serializeEl(key.tree) });
+    } else if (!lift && referenceRamp) {
       push(
         keySvg(
           "ramp",
@@ -5243,8 +5710,25 @@ function genesFromGff3Lines(lines) {
   }
   return genes;
 }
+function mergeOverlappingByName(genes) {
+  const out = [];
+  const open = /* @__PURE__ */ new Map();
+  for (const g of [...genes].sort((a, b) => a.start - b.start)) {
+    const key = `${g.refName}	${g.strand}	${g.name}`;
+    const last = open.get(key);
+    if (last && g.start < last.end) {
+      last.end = Math.max(last.end, g.end);
+      last.exons = mergedIntervals([...last.exons, ...g.exons]);
+    } else {
+      const gene = { ...g, exons: mergedIntervals(g.exons) };
+      out.push(gene);
+      open.set(key, gene);
+    }
+  }
+  return out;
+}
 function genesFromBed(text) {
-  const genes = /* @__PURE__ */ new Map();
+  const rows = [];
   for (const line of text.split("\n")) {
     const cols = line.replace(/\r$/, "").split("	");
     const start = Number(cols[1]);
@@ -5260,24 +5744,16 @@ function genesFromBed(text) {
       start: start + starts[i],
       end: start + starts[i] + size
     })) : [{ start, end }];
-    const key = `${refName}	${name}`;
-    const gene = genes.get(key);
-    if (gene) {
-      gene.start = Math.min(gene.start, start);
-      gene.end = Math.max(gene.end, end);
-      gene.exons = mergedIntervals([...gene.exons, ...blocks]);
-    } else {
-      genes.set(key, {
-        name,
-        refName,
-        start,
-        end,
-        strand: strandOf(cols[5]),
-        exons: mergedIntervals(blocks)
-      });
-    }
+    rows.push({
+      name,
+      refName,
+      start,
+      end,
+      strand: strandOf(cols[5]),
+      exons: blocks
+    });
   }
-  return [...genes.values()];
+  return mergeOverlappingByName(rows);
 }
 function genesFromText(text) {
   const first = text.split("\n", 1e3).find((l) => l.trim() !== "" && !/^(#|track|browser)/.test(l));
@@ -5612,13 +6088,13 @@ async function referencePathQuery(db, referenceSample2, refName) {
     haplotype: path.name.haplotype
   } : void 0;
 }
-function nodeLimitError(error, limit, windowBp, walkedFrom = 0) {
+function nodeLimitError(error, limit, windowBp) {
   const isLimit = error instanceof Error && (error.name === "SubgraphLimitError" || /^Subgraph size limit of \d+ nodes exceeded/.test(error.message));
   if (!isLimit) {
     return void 0;
   } else {
     const walked = error.walkedBp;
-    const fits = typeof walked === "number" && walked > 0 ? Math.floor((walkedFrom + walked) * 0.8) : Math.floor(windowBp / 2);
+    const fits = typeof walked === "number" && walked > 0 ? Math.floor(walked * 0.8) : Math.floor(windowBp / 2);
     return new NodeLimitError(limit, windowBp, Math.max(fits, 1));
   }
 }
@@ -5627,44 +6103,16 @@ var GBZ_CUT_DEFAULTS = {
   snarls: "contained",
   limit: 1e5
 };
-async function referencePieces(db, query, start, end) {
-  const inside = (await db.paths()).filter(
-    ({ isIndexed, name }) => isIndexed && name.sample === query.sample && name.haplotype === query.haplotype && name.contig === query.contig && name.fragment > start && name.fragment < end
-  ).map((path) => path.name.fragment);
-  const bounds = [start, ...[...new Set(inside)].sort((a, b) => a - b), end];
-  return bounds.slice(1).map((pieceEnd, i) => ({
-    start: bounds[i],
-    end: pieceEnd
-  }));
-}
-async function cutWindowGFA(db, query, start, end, { keep, ...opts }) {
+async function cutWindowGFA(db, query, start, end, opts) {
   if (!query) {
     return "";
   }
-  const pieces = await referencePieces(db, query, start, end);
-  const subgraphs = await Promise.all(
-    pieces.map(
-      (piece) => db.getSubgraphForRange(query, piece.start, piece.end, {
-        ...opts,
-        haplotypes: "all",
-        ...keep === void 0 ? {} : { keep }
-      }).catch((error) => {
-        throw nodeLimitError(
-          error,
-          opts.limit,
-          end - start,
-          piece.start - start
-        ) ?? error;
-      })
-    )
-  );
+  const subgraphs = await db.getSubgraphs({ ...opts, path: query, start, end, haplotypes: "all" }).catch((error) => {
+    throw nodeLimitError(error, opts.limit, end - start) ?? error;
+  });
   const paths = await db.paths();
   return joinCuts(
-    await Promise.all(
-      subgraphs.flatMap(
-        (subgraph) => subgraph ? [subgraph.toGFA({ names: "resolved" })] : []
-      )
-    ),
+    await Promise.all(subgraphs.map((subgraph) => subgraph.toGFA())),
     (sample, haplotype, contig, at) => paths.some(
       ({ name }) => name.sample === sample && name.haplotype === haplotype && name.contig === contig && name.fragment === at
     )
@@ -5692,7 +6140,7 @@ function parseRegion(text) {
   return { refName: m[1], start: n2(m[2]), end: n2(m[3]) };
 }
 async function openGbz(db, index) {
-  const base = await GBZBase.open(db, index ? { haplotypeIndex: index } : {});
+  const base = await GBZBase.open({ source: db, haplotypeIndex: index });
   return { base, referenceSamples: await referenceSamplesOf(base) };
 }
 function referenceSample(ref, samples) {
@@ -5723,7 +6171,7 @@ async function cutGbzRegion({ base, referenceSamples }, src, signal) {
     snarls: src.snarls ?? GBZ_CUT_DEFAULTS.snarls,
     limit: GBZ_CUT_DEFAULTS.limit,
     signal,
-    ...wanted ? { keep: (name) => haplotypeWanted(name, wanted) } : {}
+    keep: wanted ? (name) => haplotypeWanted(name, wanted) : void 0
   });
   return { text, region, sample };
 }
@@ -5801,6 +6249,8 @@ export {
   rangeText,
   walkKey,
   walkPosition,
+  el,
+  serializeEl,
   FACET_GAP_PX,
   FACET_TITLE_PX,
   FACET_PAD_PX,
@@ -5812,6 +6262,28 @@ export {
   LEGEND_INSET_PX,
   geneCoverageNote,
   layoutLabels,
+  rampHueCss,
+  rampHue,
+  rampStops,
+  RAMP_GRADIENT_CSS,
+  ON_REFERENCE,
+  OFF_REFERENCE,
+  OUTSIDE_CUT,
+  GENE_INK,
+  BAR_PX,
+  GAP_PX,
+  walkRowReadout,
+  readoutPlacement,
+  unitTicks,
+  runPaint,
+  alongRow,
+  rowSpan,
+  placeRowGenes,
+  rowGeneBoxes,
+  walkRowsKey,
+  DISAGREES,
+  walkRowsKeyTree,
+  walkRowsTree,
   svgCanvas,
   version,
   axisScaleOf,
@@ -5822,6 +6294,7 @@ export {
   screenToLayout,
   figureSvg,
   genesFromGff3Lines,
+  mergeOverlappingByName,
   genesFromBed,
   genesFromText,
   WELL_KNOWN_SAMPLES,