@jbrowse/bandage-core 0.1.19 → 4.0.24

package/dist/index.js

@@ -1,3717 +1,101 @@
-// src/anchoredNodes.ts
-var REFERENCE_RANK = 0;
-function isAnchored(node) {
-  return node.stable !== void 0;
-}
-function isBackbone(node) {
-  return node.stable?.rank === REFERENCE_RANK;
-}
-function isOffReference(node) {
-  return node.stable !== void 0 && node.stable.rank > REFERENCE_RANK;
-}
-function backboneNodes(graph) {
-  return graph.nodes.filter(isBackbone);
-}
-function backbonePositions(backbone) {
-  const positions = {};
-  for (const node of backbone) {
-    positions[node.id] = [
-      { x: node.stable.start, y: 0 },
-      { x: node.stable.start + node.length, y: 0 }
-    ];
-  }
-  return positions;
-}
-function firstNodeAtOrAfter(nodes, bp) {
-  let lo = 0;
-  let hi = nodes.length;
-  while (lo < hi) {
-    const mid = lo + hi >> 1;
-    if (nodes[mid].stable.start < bp) {
-      lo = mid + 1;
-    } else {
-      hi = mid;
-    }
-  }
-  return lo;
-}
-function backboneSpan(backbone) {
-  let min = Infinity;
-  let max = -Infinity;
-  for (const node of backbone) {
-    min = Math.min(min, node.stable.start);
-    max = Math.max(max, node.stable.start + node.length);
-  }
-  return max - min;
-}
-function referenceSpan(backbone, region) {
-  return region && region.end > region.start ? region.end - region.start : backboneSpan(backbone);
-}
-
-// src/layout/drawnScale.ts
-var MEAN_NODE_LENGTH = 40;
-var MIN_TOTAL_GRAPH_LENGTH = 500;
-var BANDAGE_MINIMUM_NODE_LENGTH = 5;
-function drawnNodeLength(opts, length) {
-  return Math.max(
-    opts.nodeLengthPerMegabase * length / 1e6,
-    opts.minimumNodeLength
-  );
-}
-function bandageAutoScale(graph, minNodeLength = BANDAGE_MINIMUM_NODE_LENGTH) {
-  const totalLength = graph.nodes.reduce((sum, n) => sum + n.length, 0);
-  const megabases = totalLength / 1e6;
-  const target = Math.max(
-    graph.nodes.length * MEAN_NODE_LENGTH,
-    MIN_TOTAL_GRAPH_LENGTH
-  );
-  return {
-    nodeLengthPerMegabase: megabases > 0 ? target / megabases : 1e4,
-    minimumNodeLength: Math.max(BANDAGE_MINIMUM_NODE_LENGTH, minNodeLength),
-    edgeLength: 5,
-    nodeSegmentLength: 20
-  };
-}
-var PROPORTIONAL_LENGTH = { power: 1, effect: 1 };
-function isProportional(law) {
-  return law.power === 1 && law.effect === 1;
-}
-function drawnLengthFor(graph, law) {
-  const count = graph.nodes.length;
-  const totalLength = graph.nodes.reduce((sum, n) => sum + n.length, 0);
-  const meanBp = count > 0 ? totalLength / count : 0;
-  const meanDrawn = count > 0 ? Math.max(count * MEAN_NODE_LENGTH, MIN_TOTAL_GRAPH_LENGTH) / count : MEAN_NODE_LENGTH;
-  return (bp) => {
-    if (meanBp <= 0) {
-      return meanDrawn;
-    }
-    const relative = (bp / meanBp) ** law.power;
-    return Math.max(
-      meanDrawn * ((relative - 1) * law.effect + 1),
-      BANDAGE_MINIMUM_NODE_LENGTH
-    );
-  };
-}
-var LAYOUT_LENGTH_PRECISION = 1e3;
-var PROPORTIONAL_SPREAD = {
-  law: PROPORTIONAL_LENGTH,
-  minNodeLength: 0
-};
-function layoutScaling(graph, spread = PROPORTIONAL_SPREAD) {
-  const { law, minNodeLength } = spread;
-  const opts = bandageAutoScale(graph, minNodeLength);
-  if (isProportional(law)) {
-    return { nodes: graph.nodes, opts };
-  }
-  const drawn = drawnLengthFor(graph, law);
-  return {
-    nodes: graph.nodes.map((node) => ({
-      ...node,
-      length: Math.round(drawn(node.length) * LAYOUT_LENGTH_PRECISION)
-    })),
-    opts: {
-      ...opts,
-      nodeLengthPerMegabase: 1e6 / LAYOUT_LENGTH_PRECISION,
-      // Bandage's own floor only. A law and a raised floor are alternatives
-      // rather than a stack: the law has already lifted the small end, and a
-      // floor on top of it would flatten exactly what it just spread.
-      minimumNodeLength: BANDAGE_MINIMUM_NODE_LENGTH
-    }
-  };
-}
-
-// src/bubbleSpreads.ts
-var BUBBLE_SPREADS = [
-  {
-    value: "auto",
-    label: "Proportional",
-    description: "Bandage's own scale: a node draws proportional to its length, so a 1 bp allele is a speck.",
-    law: PROPORTIONAL_LENGTH,
-    minNodeFactor: 0
-  },
-  {
-    value: "open",
-    label: "Open bubbles",
-    description: "Give every allele a drawn length, so a bubble reads as two arms rather than a knot.",
-    law: PROPORTIONAL_LENGTH,
-    minNodeFactor: 2.5
-  },
-  {
-    value: "wide",
-    label: "Wide bubbles",
-    description: "As open, spread further. Best on a window of a dozen bubbles.",
-    law: PROPORTIONAL_LENGTH,
-    minNodeFactor: 10
-  },
-  {
-    value: "compress",
-    label: "Compress lengths",
-    description: "Pull the longest and shortest nodes towards the graph\u2019s mean, so a cut spanning kb and bp fits one pane.",
-    law: { power: 0.5, effect: 0.5 },
-    minNodeFactor: 0
-  }
-];
-var BUBBLE_SPREAD_VALUES = BUBBLE_SPREADS.map((s) => s.value);
-function spreadFor(spread) {
-  const entry = BUBBLE_SPREADS.find((s) => s.value === spread);
-  return {
-    law: entry?.law ?? PROPORTIONAL_LENGTH,
-    minNodeLength: (entry?.minNodeFactor ?? 0) * MEAN_NODE_LENGTH
-  };
-}
-
-// src/gfa-core/gfaParser.ts
-function parseTag(tag, tags) {
-  const nameEnd = tag.indexOf(":");
-  const typeEnd = tag.indexOf(":", nameEnd + 1);
-  if (nameEnd !== -1 && typeEnd !== -1) {
-    const name = tag.slice(0, nameEnd);
-    const type = tag.slice(nameEnd + 1, typeEnd);
-    const val = tag.slice(typeEnd + 1);
-    if (type === "i" || type === "f") {
-      tags[name] = +val;
-    } else if (type === "Z") {
-      tags[name] = val;
-    }
-  }
-}
-function parseTags(fields) {
-  const tags = {};
-  for (const field of fields) {
-    parseTag(field, tags);
-  }
-  return tags;
-}
-function stableCoordinate(node) {
-  const { SN, SO, SR } = node.tags;
-  return typeof SN === "string" && typeof SO === "number" && typeof SR === "number" ? { refName: SN, start: SO, rank: SR } : void 0;
-}
-var GT = 62;
-var LT = 60;
-function parseWalkBody(body) {
-  const segments = [];
-  let strand = "+";
-  let start = 0;
-  function push(end) {
-    if (end > start) {
-      segments.push({ id: body.slice(start, end), strand });
-    }
-  }
-  for (let i = 0; i < body.length; i++) {
-    const ch = body.charCodeAt(i);
-    if (ch === GT || ch === LT) {
-      push(i);
-      strand = ch === GT ? "+" : "-";
-      start = i + 1;
-    }
-  }
-  push(body.length);
-  return segments;
-}
-function parseGFA(file) {
-  const graph = {
-    nodes: [],
-    links: [],
-    paths: [],
-    walks: [],
-    header: [],
-    id: ""
-  };
-  for (const rawLine of file.split("\n")) {
-    const line = rawLine.endsWith("\r") ? rawLine.slice(0, -1) : rawLine;
-    if (line.startsWith("H")) {
-      const [, ...rest] = line.split("	");
-      graph.header.push(parseTags(rest));
-    } else if (line.startsWith("S")) {
-      const [, name, ...rest] = line.split("	");
-      let len;
-      let seq;
-      let tagfields;
-      let gfa1 = false;
-      const first = rest[0] ?? "*";
-      if (/^\d+$/.test(first)) {
-        len = +first;
-        seq = rest[1] ?? "*";
-        tagfields = rest.slice(2);
-      } else {
-        gfa1 = true;
-        seq = first;
-        len = seq === "*" ? 0 : seq.length;
-        tagfields = rest.slice(1);
-      }
-      const tags = parseTags(tagfields);
-      if (gfa1 && "LN" in tags) {
-        len = +tags.LN;
-      }
-      graph.nodes.push({ id: name, length: len, sequence: seq, tags });
-    } else if (line.startsWith("E")) {
-      const [, , source, target, , , , , cigar, ...rest] = line.split("	");
-      if (source && target) {
-        graph.links.push({
-          source: source.slice(0, -1),
-          target: target.slice(0, -1),
-          strand1: source.at(-1),
-          strand2: target.at(-1),
-          cigar: cigar ?? "*",
-          tags: parseTags(rest)
-        });
-      }
-    } else if (line.startsWith("L")) {
-      const [, source, strand1, target, strand2, cigar, ...rest] = line.split("	");
-      if (source && target && strand2) {
-        graph.links.push({
-          source,
-          target,
-          strand1,
-          strand2,
-          cigar: cigar ?? "*",
-          tags: parseTags(rest)
-        });
-      }
-    } else if (line.startsWith("W")) {
-      const [, sample, hap, contig, start, end, body, ...rest] = line.split("	");
-      if (sample && hap && contig && start && end && body) {
-        graph.walks.push({
-          sample,
-          haplotype: +hap,
-          contig,
-          start: start === "*" ? -1 : +start,
-          end: end === "*" ? -1 : +end,
-          segments: parseWalkBody(body),
-          tags: parseTags(rest)
-        });
-      }
-    } else if (line.startsWith("P")) {
-      const [, name, path, ...rest] = line.split("	");
-      if (name && path) {
-        graph.paths.push({ name, path, rest });
-      }
-    }
-  }
-  return graph;
-}
-
-// src/pansn.ts
-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;
-}
-function panSNContig(refName) {
-  const parts = refName.split(SEP);
-  return parts.length >= 3 ? parts.slice(2).join(SEP) : parts.length === 2 ? parts[1] : refName;
-}
-function panSNMatchesPrefix(refName, prefix) {
-  return prefix !== void 0 && (refName === prefix || refName.startsWith(prefix + SEP));
-}
-
-// src/pathAnchoring.ts
-var RANGE_SUFFIX = /:(\d+)-\d+$/;
-function pathOrigin(pathName) {
-  const match = RANGE_SUFFIX.exec(pathName);
-  return match ? { name: pathName.slice(0, match.index), start: +match[1] } : { name: pathName, start: 0 };
-}
-function surveyPaths(paths, lengthOf) {
-  const anchorPaths = [];
-  const pathVisits = /* @__PURE__ */ new Map();
-  for (const path of paths) {
-    const sample = panSNSample(path.name);
-    let pos = path.start;
-    for (const step of path.steps) {
-      const visit = {
-        path: path.name,
-        sample,
-        start: pos,
-        strand: step.strand
-      };
-      const existing = pathVisits.get(step.id);
-      if (existing) {
-        existing.push(visit);
-      } else {
-        pathVisits.set(step.id, [visit]);
-      }
-      pos += lengthOf(step.id);
-    }
-    anchorPaths.push({
-      name: path.name,
-      sample,
-      start: path.start,
-      length: pos - path.start
-    });
-  }
-  return { anchorPaths, pathVisits };
-}
-function chooseReferencePath(anchorPaths, preferred) {
-  const named = anchorPaths.find(
-    (p) => p.sample === preferred || p.name === preferred
-  );
-  return named ?? anchorPaths[0];
-}
-var OFF_REFERENCE_RANK = 1;
-function anchorNode(node, visits, reference) {
-  let anchored = node;
-  if (visits && visits.length > 0) {
-    const anchor = visits.find((v) => v.path === reference) ?? visits[0];
-    anchored = {
-      ...node,
-      stable: {
-        refName: anchor.path,
-        start: anchor.start,
-        rank: anchor.path === reference ? REFERENCE_RANK : OFF_REFERENCE_RANK,
-        strand: anchor.strand
-      },
-      samples: [...new Set(visits.map((v) => v.sample))].sort()
-    };
-  }
-  return anchored;
-}
-function anchorFromPaths(graph, preferred) {
-  const { anchorPaths, pathVisits } = graph;
-  const reference = anchorPaths && pathVisits ? chooseReferencePath(anchorPaths, preferred) : void 0;
-  return reference && pathVisits ? {
-    ...graph,
-    nodes: graph.nodes.map(
-      (node) => anchorNode(node, pathVisits.get(node.name), reference.name)
-    ),
-    anchoredBy: "paths",
-    referencePath: reference.name
-  } : graph;
-}
-function anchorGraph(graph, preferred) {
-  return graph.anchoredBy === "tags" ? graph : anchorFromPaths(graph, preferred);
-}
-
-// src/gfa/gfaConverter.ts
-function surveySegments(gfaGraph) {
-  const canonical = /* @__PURE__ */ new Map();
-  const traversals = /* @__PURE__ */ new Map();
-  function claim(id, strand) {
-    if (!canonical.has(id)) {
-      canonical.set(id, strand);
-    }
-  }
-  function traverse(id, strand) {
-    claim(id, strand);
-    traversals.set(id, (traversals.get(id) ?? 0) + 1);
-  }
-  for (const link of gfaGraph.links) {
-    claim(link.source, link.strand1 === "-" ? "-" : "+");
-    claim(link.target, link.strand2 === "-" ? "-" : "+");
-  }
-  for (const gfaPath of gfaGraph.paths) {
-    for (const segment of gfaPath.path.split(",")) {
-      traverse(segment.slice(0, -1), segment.endsWith("-") ? "-" : "+");
-    }
-  }
-  for (const walk of gfaGraph.walks) {
-    for (const seg of walk.segments) {
-      traverse(seg.id, seg.strand === "-" ? "-" : "+");
-    }
-  }
-  return { canonical, traversals };
-}
-function anchorablePaths(gfaGraph) {
-  return [
-    ...gfaGraph.paths.map((p) => ({
-      ...pathOrigin(p.name),
-      steps: p.path.split(",").map((segment) => ({
-        id: segment.slice(0, -1),
-        strand: segment.endsWith("-") ? "-" : "+"
-      }))
-    })),
-    ...gfaGraph.walks.map((w) => ({
-      name: `${w.sample}#${w.haplotype}#${w.contig}`,
-      // `*` parses to -1, meaning the record declines to say; 0 is then the
-      // only offset that can be assumed, and it makes the walk self-relative
-      // rather than wrong
-      start: w.start === -1 ? 0 : w.start,
-      steps: w.segments.map((s) => ({
-        id: s.id,
-        strand: s.strand === "-" ? "-" : "+"
-      }))
-    }))
-  ];
-}
-function carriedSamples(gfaNode) {
-  const sm = gfaNode.tags.SM;
-  if (typeof sm !== "string") {
-    return void 0;
-  }
-  const samples = sm.split(",").map((s) => s.trim()).filter(Boolean);
-  return samples.length > 0 ? samples : void 0;
-}
-var positive = (v) => typeof v === "number" && v > 0 ? v : void 0;
-function statedDepth({ tags, length }) {
-  const count = positive(tags.RC) ?? positive(tags.FC) ?? positive(tags.KC);
-  return positive(tags.dp) ?? positive(tags.DP) ?? (count !== void 0 && length > 0 ? count / length : void 0);
-}
-function makeNode(gfaNode, strand, depth) {
-  return {
-    id: `${gfaNode.id}${strand}`,
-    name: gfaNode.id,
-    length: gfaNode.length,
-    depth,
-    stable: stableCoordinate(gfaNode),
-    samples: carriedSamples(gfaNode)
-  };
-}
-function convertGFAToGraph(gfaGraph, name = "Imported GFA") {
-  const nodes = [];
-  const edges = [];
-  const { canonical, traversals } = surveySegments(gfaGraph);
-  const nodeId = (segmentId) => `${segmentId}${canonical.get(segmentId) ?? "+"}`;
-  for (const gfaNode of gfaGraph.nodes) {
-    const depth = statedDepth(gfaNode) ?? Math.max(traversals.get(gfaNode.id) ?? 1, 1);
-    nodes.push(makeNode(gfaNode, canonical.get(gfaNode.id) ?? "+", depth));
-  }
-  for (const link of gfaGraph.links) {
-    edges.push({
-      from: nodeId(link.source),
-      to: nodeId(link.target),
-      fromStrand: link.strand1 === "-" ? "-" : "+",
-      toStrand: link.strand2 === "-" ? "-" : "+"
-    });
-  }
-  const paths = [];
-  const edgeToPathsMap = /* @__PURE__ */ new Map();
-  const edgeKey = (a, b) => [a, b].sort().join("--");
-  function recordPathEdges(nodeIds, name2) {
-    for (let i = 0; i < nodeIds.length - 1; i++) {
-      const key = edgeKey(nodeIds[i], nodeIds[i + 1]);
-      if (!edgeToPathsMap.has(key)) {
-        edgeToPathsMap.set(key, /* @__PURE__ */ new Set());
-      }
-      edgeToPathsMap.get(key).add(name2);
-    }
-  }
-  for (const gfaPath of gfaGraph.paths) {
-    const nodeIds = gfaPath.path.split(",").map((segment) => nodeId(segment.slice(0, -1)));
-    paths.push({ name: gfaPath.name, nodeIds });
-    recordPathEdges(nodeIds, gfaPath.name);
-  }
-  for (const walk of gfaGraph.walks) {
-    const nodeIds = walk.segments.map((seg) => nodeId(seg.id));
-    const name2 = `${walk.sample}#${walk.haplotype}#${walk.contig}`;
-    paths.push({
-      name: name2,
-      nodeIds,
-      sample: walk.sample,
-      haplotype: walk.haplotype,
-      contig: walk.contig
-    });
-    recordPathEdges(nodeIds, name2);
-  }
-  for (const edge of edges) {
-    const pathIds = edgeToPathsMap.get(edgeKey(edge.from, edge.to));
-    if (pathIds && pathIds.size > 0) {
-      edge.pathIds = [...pathIds];
-    }
-  }
-  const lengths = new Map(gfaGraph.nodes.map((n) => [n.id, n.length]));
-  const anchoring = gfaGraph.paths.length > 0 || gfaGraph.walks.length > 0 ? surveyPaths(anchorablePaths(gfaGraph), (id) => lengths.get(id) ?? 0) : void 0;
-  return {
-    name,
-    nodes,
-    edges,
-    paths: paths.length > 0 ? paths : void 0,
-    anchorPaths: anchoring?.anchorPaths,
-    pathVisits: anchoring?.pathVisits,
-    // rGFA's own tags win wherever they are present; pathAnchoring only ever
-    // fills in for a graph that carries none.
-    anchoredBy: nodes.some((n) => n.stable) ? "tags" : void 0
-  };
-}
-
-// src/layout/mergeRuns.ts
-function ownStrand(id) {
-  return id.endsWith("-") ? "-" : "+";
-}
-function flip(strand) {
-  return strand === "+" ? "-" : "+";
-}
-function sidesOf(edge) {
-  const from = (edge.fromStrand ?? ownStrand(edge.from)) === ownStrand(edge.from) ? "end" : "start";
-  const to = (edge.toStrand ?? ownStrand(edge.to)) === ownStrand(edge.to) ? "start" : "end";
-  return { from, to };
-}
-function mergeRuns(graph) {
-  const sides2 = graph.edges.map(sidesOf);
-  const at = /* @__PURE__ */ new Map();
-  const attach = (id, side, ei) => {
-    const key = `${id}|${side}`;
-    const list = at.get(key);
-    if (list) {
-      list.push(ei);
-    } else {
-      at.set(key, [ei]);
-    }
-  };
-  graph.edges.forEach((edge, ei) => {
-    attach(edge.from, sides2[ei].from, ei);
-    attach(edge.to, sides2[ei].to, ei);
-  });
-  const joinAfter = (a) => {
-    const out = at.get(`${a}|end`);
-    if (out?.length !== 1) {
-      return void 0;
-    }
-    const ei = out[0];
-    const edge = graph.edges[ei];
-    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();
-  const runs = /* @__PURE__ */ new Map();
-  for (const node of graph.nodes) {
-    const into = at.get(`${node.id}|start`);
-    const pred = into?.length === 1 ? graph.edges[into[0]].from : void 0;
-    if (runOf.has(node.id) || pred !== void 0 && joinAfter(pred) === into[0]) {
-      continue;
-    }
-    const run = [node.id];
-    for (; ; ) {
-      const ei = joinAfter(run.at(-1));
-      const next = ei === void 0 ? void 0 : graph.edges[ei].to;
-      if (next === void 0 || runOf.has(next)) {
-        break;
-      }
-      joined.add(ei);
-      run.push(next);
-    }
-    for (const id of run) {
-      runOf.set(id, node.id);
-    }
-    if (run.length > 1) {
-      runs.set(node.id, run);
-    }
-  }
-  for (const node of graph.nodes) {
-    if (!runOf.has(node.id)) {
-      runOf.set(node.id, node.id);
-    }
-  }
-  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
-  const nodes = [];
-  for (const node of graph.nodes) {
-    if (runOf.get(node.id) !== node.id) {
-      continue;
-    }
-    const run = runs.get(node.id);
-    if (!run) {
-      nodes.push(node);
-      continue;
-    }
-    const members = run.map((id) => byId.get(id));
-    const backbone = members.filter(isBackbone);
-    const first = backbone.length ? backbone.reduce((a, b) => a.stable.start <= b.stable.start ? a : b) : members[0];
-    nodes.push({
-      id: node.id,
-      name: node.name,
-      length: members.reduce((sum, n) => sum + n.length, 0),
-      depth: node.depth,
-      stable: first.stable
-    });
-  }
-  const seen = /* @__PURE__ */ new Set();
-  const edges = [];
-  graph.edges.forEach((edge, ei) => {
-    const from = runOf.get(edge.from);
-    const to = runOf.get(edge.to);
-    const side = sides2[ei];
-    const key = `${from}|${side.from}>${to}|${side.to}`;
-    if (joined.has(ei) || seen.has(key)) {
-      return;
-    }
-    seen.add(key);
-    edges.push({
-      from,
-      to,
-      ...side.from === "start" ? { fromStrand: flip(ownStrand(from)) } : {},
-      ...side.to === "end" ? { toStrand: flip(ownStrand(to)) } : {}
-    });
-  });
-  return {
-    graph: { ...graph, nodes, edges, paths: void 0, pathVisits: void 0 },
-    runs
-  };
-}
-function splitRuns(positions, runs, weightOf) {
-  const out = { ...positions };
-  for (const [id, members] of runs) {
-    const line = positions[id];
-    if (!line?.length) {
-      continue;
-    }
-    delete out[id];
-    const arc = arcPrefix(line);
-    const total = arc.at(-1);
-    const weights = members.map((m) => Math.max(weightOf(m), 0));
-    const weightSum = weights.reduce((a, b) => a + b, 0) || members.length;
-    let from = 0;
-    members.forEach((member, k) => {
-      const share = weightSum ? weights[k] / weightSum * total : total / members.length;
-      const to = k === members.length - 1 ? total : from + share;
-      out[member] = slice(line, arc, from, to);
-      from = to;
-    });
-  }
-  return out;
-}
-function polylineSlice(line, from, to) {
-  if (line.length === 0) {
-    return [];
-  }
-  const arc = arcPrefix(line);
-  const total = arc.at(-1);
-  return slice(line, arc, from * total, to * total);
-}
-function polylineMidpoint(line) {
-  const arc = arcPrefix(line);
-  return pointAt(line, arc, arc.at(-1) / 2);
-}
-function arcPrefix(line) {
-  const arc = [0];
-  for (let i = 1; i < line.length; i++) {
-    arc.push(
-      arc[i - 1] + Math.hypot(line[i].x - line[i - 1].x, line[i].y - line[i - 1].y)
-    );
-  }
-  return arc;
-}
-function pointAt(line, arc, s) {
-  if (s <= 0) {
-    return { ...line[0] };
-  }
-  let i = 1;
-  while (i < arc.length && arc[i] < s) {
-    i++;
-  }
-  if (i >= arc.length) {
-    return { ...line.at(-1) };
-  }
-  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 };
-}
-function slice(line, arc, from, to) {
-  const points = [pointAt(line, arc, from)];
-  for (let i = 0; i < line.length; i++) {
-    if (arc[i] > from && arc[i] < to) {
-      points.push({ ...line[i] });
-    }
-  }
-  points.push(pointAt(line, arc, to));
-  return points;
-}
-
-// src/layout/orientToReference.ts
-function orientToReference(graph, positions) {
-  const backbone = graph.nodes.filter(
-    (node) => isBackbone(node) && (positions[node.id]?.length ?? 0) > 0
-  );
-  if (backbone.length < 2) {
-    return positions;
-  }
-  const points = backbone.map((node) => {
-    const segments = positions[node.id];
-    const mid = segments[Math.floor(segments.length / 2)];
-    return {
-      x: mid.x,
-      y: mid.y,
-      r: node.stable.start + node.length / 2,
-      w: node.length
-    };
-  });
-  const weight = points.reduce((sum, p) => sum + p.w, 0);
-  const cx = points.reduce((sum, p) => sum + p.x * p.w, 0) / weight;
-  const cy = points.reduce((sum, p) => sum + p.y * p.w, 0) / weight;
-  const cr = points.reduce((sum, p) => sum + p.r * p.w, 0) / weight;
-  let sxr = 0;
-  let syr = 0;
-  for (const p of points) {
-    sxr += p.w * (p.x - cx) * (p.r - cr);
-    syr += p.w * (p.y - cy) * (p.r - cr);
-  }
-  const angle = -Math.atan2(syr, sxr);
-  const c = Math.cos(angle);
-  const s = Math.sin(angle);
-  const out = {};
-  for (const [id, segments] of Object.entries(positions)) {
-    out[id] = segments.map((p) => {
-      const x = p.x - cx;
-      const y = p.y - cy;
-      return { x: cx + c * x - s * y, y: cy + s * x + c * y };
-    });
-  }
-  let below = 0;
-  let above = 0;
-  for (const node of graph.nodes) {
-    if (isBackbone(node)) {
-      continue;
-    }
-    for (const p of out[node.id] ?? []) {
-      if (p.y > cy) {
-        below++;
-      } else {
-        above++;
-      }
-    }
-  }
-  if (above > below) {
-    for (const segments of Object.values(out)) {
-      for (const p of segments) {
-        p.y = 2 * cy - p.y;
-      }
-    }
-  }
-  return out;
-}
-
-// src/referenceSpan.ts
-var MAX_BACKBONE_HOPS = 4;
-function buildNeighbors(graph) {
-  const neighbors = /* @__PURE__ */ new Map();
-  function add(from, to) {
-    const list = neighbors.get(from);
-    if (list) {
-      list.push(to);
-    } else {
-      neighbors.set(from, [to]);
-    }
-  }
-  for (const edge of graph.edges) {
-    add(edge.from, edge.to);
-    add(edge.to, edge.from);
-  }
-  return neighbors;
-}
-function flankingSpan({
-  nodeId,
-  nodeById,
-  neighbors
-}) {
-  const seen = /* @__PURE__ */ new Set([nodeId]);
-  let frontier = [nodeId];
-  let minEnd = Infinity;
-  let maxStart = -Infinity;
-  for (let hop = 0; hop < MAX_BACKBONE_HOPS && frontier.length > 0; hop++) {
-    const next = [];
-    for (const id of frontier) {
-      const adjacent = neighbors.get(id);
-      if (adjacent) {
-        for (const neighborId of adjacent) {
-          if (!seen.has(neighborId)) {
-            seen.add(neighborId);
-            const neighbor = nodeById.get(neighborId);
-            if (neighbor && isBackbone(neighbor)) {
-              minEnd = Math.min(minEnd, neighbor.stable.start + neighbor.length);
-              maxStart = Math.max(maxStart, neighbor.stable.start);
-            } else {
-              next.push(neighborId);
-            }
-          }
-        }
-      }
-    }
-    frontier = next;
-  }
-  return minEnd === Infinity ? void 0 : {
-    start: Math.min(minEnd, maxStart),
-    end: Math.max(minEnd, maxStart)
-  };
-}
-function nodeReferenceSpan({
-  nodeId,
-  nodeById,
-  neighbors
-}) {
-  const node = nodeById.get(nodeId);
-  return node === void 0 ? void 0 : isBackbone(node) ? { start: node.stable.start, end: node.stable.start + node.length } : flankingSpan({ nodeId, nodeById, neighbors });
-}
-function referenceMidpoints(graph) {
-  const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
-  const neighbors = buildNeighbors(graph);
-  const midpoints = /* @__PURE__ */ new Map();
-  for (const node of graph.nodes) {
-    const span2 = nodeReferenceSpan({ nodeId: node.id, nodeById, neighbors });
-    if (span2) {
-      midpoints.set(node.id, (span2.start + span2.end) / 2);
-    }
-  }
-  return midpoints;
-}
-
-// src/layout/referenceSeeds.ts
-var LANE_GAP = 30;
-function referenceSeeds(graph, scaling) {
-  const { opts } = scaling;
-  const drawn = new Map(
-    scaling.nodes.map((node) => [node.id, drawnNodeLength(opts, node.length)])
-  );
-  const drawnOf = (id) => drawn.get(id) ?? opts.minimumNodeLength;
-  const backbone = graph.nodes.filter(isBackbone).sort((a, b) => a.stable.start - b.stable.start);
-  const seeds = /* @__PURE__ */ new Map();
-  let x = 0;
-  for (const node of backbone) {
-    seeds.set(node.id, { x, y: 0 });
-    x += drawnOf(node.id) + opts.edgeLength;
-  }
-  const adjacent = buildNeighbors(graph);
-  const depth = new Map(backbone.map((node) => [node.id, 0]));
-  const queue = backbone.map((node) => node.id);
-  for (const id of queue) {
-    const at = seeds.get(id);
-    const next = depth.get(id) + 1;
-    for (const neighbour of adjacent.get(id) ?? []) {
-      if (depth.has(neighbour)) {
-        continue;
-      }
-      depth.set(neighbour, next);
-      seeds.set(neighbour, { x: at.x + drawnOf(id) / 2, y: LANE_GAP * next });
-      queue.push(neighbour);
-    }
-  }
-  let unreached = 0;
-  for (const node of graph.nodes) {
-    if (!seeds.has(node.id)) {
-      seeds.set(node.id, {
-        x: unreached++ * x / graph.nodes.length,
-        y: LANE_GAP * 3
-      });
-    }
-  }
-  return seeds;
-}
-function seededNodes(graph, scaling) {
-  const seeds = referenceSeeds(graph, scaling);
-  return scaling.nodes.map((node) => ({ ...node, ...seeds.get(node.id) }));
-}
-
-// src/pipeline.ts
-function loadGraph(text, name, opts = {}) {
-  const graph = anchorGraph(
-    convertGFAToGraph(parseGFA(text), name),
-    opts.referencePath
-  );
-  if (graph.nodes.length === 0) {
-    throw new Error(`No graph segments in ${name}`);
-  }
-  if (opts.maxNodes !== void 0 && graph.nodes.length > opts.maxNodes) {
-    throw new Error(
-      `Graph too large to draw: ${graph.nodes.length.toLocaleString()} nodes (limit ${opts.maxNodes.toLocaleString()}). Zoom in to a smaller region, or raise maxGraphNodes on this view.`
-    );
-  }
-  return graph;
-}
-function engineRequest(graph, scaling, settings) {
-  const anchored = graph.nodes.some(isBackbone);
-  return {
-    graph: {
-      nodes: anchored ? seededNodes(graph, scaling) : scaling.nodes,
-      edges: graph.edges
-    },
-    options: {
-      quality: settings.quality,
-      linearLayout: settings.linearLayout,
-      ...scaling.opts,
-      ...anchored ? { rotateComponents: false } : {}
-    }
-  };
-}
-function engineKey(graph, settings) {
-  const anchored = graph.nodes.some(isBackbone);
-  return `${settings.quality}|${settings.linearLayout}|${settings.bubbleSpread}|${anchored}|${graph.referencePath ?? ""}`;
-}
-async function forceLayout(graph, settings, engine) {
-  const spread = spreadFor(settings.bubbleSpread);
-  const merged = mergeRuns(graph);
-  const { result, duration } = await engine(
-    engineRequest(merged.graph, layoutScaling(merged.graph, spread), settings)
-  );
-  const scaling = layoutScaling(graph, spread);
-  const drawn = new Map(
-    scaling.nodes.map((n) => [n.id, drawnNodeLength(scaling.opts, n.length)])
-  );
-  const positions = splitRuns(
-    result.nodePositions,
-    merged.runs,
-    (id) => drawn.get(id) ?? 0
-  );
-  return {
-    result: {
-      ...result,
-      nodePositions: graph.nodes.some(isBackbone) ? orientToReference(graph, positions) : positions
-    },
-    duration
-  };
-}
-function layoutExtent(nodePositions) {
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (const segments of Object.values(nodePositions)) {
-    for (const seg of segments) {
-      minX = Math.min(minX, seg.x);
-      minY = Math.min(minY, seg.y);
-      maxX = Math.max(maxX, seg.x);
-      maxY = Math.max(maxY, seg.y);
-    }
-  }
-  return { minX, minY, maxX, maxY };
-}
-var FIT_PADDING = 40;
-var MIN_ZOOM = 1e-6;
-var MAX_ZOOM = 100;
-function clampZoom(zoom) {
-  return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom));
-}
-function fittedTranslateY(bounds, usableHeight, yScale, padTop = FIT_PADDING) {
-  const leftoverY = usableHeight - bounds.h * yScale;
-  return padTop - bounds.minY * yScale + Math.max(0, leftoverY) / 2;
-}
-function fitTransform(bounds, paneWidth, paneHeight, pixelRows, {
-  minScale = 0,
-  padLeft = FIT_PADDING,
-  padTop = FIT_PADDING,
-  padRight = FIT_PADDING,
-  padBottom = FIT_PADDING
-} = {}) {
-  const usableWidth = paneWidth - padLeft - padRight;
-  const usableHeight = paneHeight - padTop - padBottom;
-  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(
-    Math.max(minScale, pixelRows ? fitX : Math.min(fitX, fitY))
-  );
-  const leftoverX = usableWidth - bounds.w * scale;
-  return {
-    scale,
-    translateX: padLeft - bounds.minX * scale + Math.max(0, leftoverX) / 2,
-    translateY: fittedTranslateY(
-      bounds,
-      usableHeight,
-      pixelRows ? 1 : scale,
-      padTop
-    )
-  };
-}
-function drawingBounds(layout, opts = {}) {
-  let { minX, minY, maxX, maxY } = layoutExtent(layout.nodePositions);
-  const { region } = opts;
-  if (layout.referenceAxis && region && region.end > region.start) {
-    minX = region.start;
-    maxX = region.end;
-  }
-  const extent = opts.extent ?? layout.extent;
-  if (extent) {
-    minX = Math.min(minX, extent.minX ?? minX);
-    minY = Math.min(minY, extent.minY ?? minY);
-    maxX = Math.max(maxX, extent.maxX ?? maxX);
-    maxY = Math.max(maxY, extent.maxY ?? maxY);
-  }
-  return { minX, minY, w: maxX - minX, h: maxY - minY };
-}
-
-// src/alleleProjection/projectAlleles.ts
-function parsePanSN(refName) {
-  const parts = refName.split("#");
-  const haplotype = parts.length >= 2 ? Number(parts[1]) : Number.NaN;
-  return {
-    sample: parts[0] ?? refName,
-    haplotype: Number.isFinite(haplotype) ? haplotype : void 0
-  };
-}
-function collectRun(seed, byId, adj, claimed) {
-  const members = [];
-  const anchors = [];
-  const queue = [seed];
-  claimed.add(seed);
-  while (queue.length > 0) {
-    const id = queue.pop();
-    const node = byId.get(id);
-    if (node) {
-      members.push(node);
-      for (const neighborId of adj.get(id) ?? []) {
-        const neighbor = byId.get(neighborId);
-        if (neighbor) {
-          if (neighbor.stable.rank === REFERENCE_RANK) {
-            anchors.push(neighbor);
-          } else if (!claimed.has(neighborId)) {
-            claimed.add(neighborId);
-            queue.push(neighborId);
-          }
-        }
-      }
-    }
-  }
-  return { members, anchors };
-}
-function anchorSpan(anchors) {
-  const refNames = new Set(anchors.map((a) => a.stable.refName));
-  if (refNames.size !== 1 || anchors.length < 2) {
-    return void 0;
-  }
-  const sorted = [...anchors].sort((a, b) => a.stable.start - b.stable.start);
-  const first = sorted[0];
-  const last = sorted.at(-1);
-  const start = first.stable.start + first.length;
-  const end = last.stable.start;
-  return end >= start ? { start, end, entry: first } : void 0;
-}
-function runDistances(members, entry, adj) {
-  const byId = new Map(members.map((m) => [m.id, m]));
-  const dist = /* @__PURE__ */ new Map();
-  const queue = [];
-  for (const neighborId of adj.get(entry.id) ?? []) {
-    if (byId.has(neighborId)) {
-      dist.set(neighborId, 0);
-      queue.push(neighborId);
-    }
-  }
-  if (queue.length === 0) {
-    for (const member of members) {
-      dist.set(member.id, 0);
-      queue.push(member.id);
-    }
-  }
-  for (const id of queue) {
-    const reach = dist.get(id) + byId.get(id).length;
-    for (const neighborId of adj.get(id) ?? []) {
-      if (byId.has(neighborId)) {
-        const known = dist.get(neighborId);
-        if (known === void 0 || reach < known) {
-          dist.set(neighborId, reach);
-          queue.push(neighborId);
-        }
-      }
-    }
-  }
-  return dist;
-}
-function runOffsets(members, entry, adj) {
-  const dist = runDistances(members, entry, adj);
-  const ordered = [...members].sort((a, b) => dist.get(a.id) - dist.get(b.id));
-  const rank = new Map(ordered.map((m, i) => [m.id, i]));
-  const byId = new Map(members.map((m) => [m.id, m]));
-  const offsets = /* @__PURE__ */ new Map();
-  for (const [i, member] of ordered.entries()) {
-    let offset = 0;
-    for (const neighborId of adj.get(member.id) ?? []) {
-      const neighbor = byId.get(neighborId);
-      if (neighbor && rank.get(neighborId) < i) {
-        offset = Math.max(offset, offsets.get(neighborId) + neighbor.length);
-      }
-    }
-    offsets.set(member.id, offset);
-  }
-  return { offsets, ordered };
-}
-function projectAlleles(graph) {
-  const byId = new Map(
-    graph.nodes.filter(isAnchored).map((n) => [n.id, n])
-  );
-  const adj = buildNeighbors(graph);
-  const claimed = /* @__PURE__ */ new Set();
-  const alleles = [];
-  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 span2 = anchorSpan(anchors);
-      if (span2) {
-        const { offsets, ordered } = runOffsets(members, span2.entry, adj);
-        alleles.push({
-          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(
-            (max, m) => Math.max(max, offsets.get(m.id) + m.length),
-            0
-          )
-        });
-      }
-    }
-  }
-  return alleles.sort((a, b) => a.start - b.start);
-}
-
-// src/layout/placeOffReference.ts
-var MIN_DELETION_BP = 1;
-var MIN_ALLELE_SPAN_FRACTION = 0.015;
-function placeOffReference({
-  graph,
-  span: span2,
-  rowY,
-  positions
-}) {
-  const minSpan = span2 * MIN_ALLELE_SPAN_FRACTION;
-  const alleles = projectAlleles(graph);
-  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
-  const alleleDeletions = [];
-  for (const allele of alleles) {
-    const skipped = allele.refSpan - allele.pathLength;
-    if (skipped >= MIN_DELETION_BP) {
-      alleleDeletions.push({ nodeIds: allele.nodeIds, bp: skipped });
-    }
-    const drawn = Math.max(allele.refSpan, minSpan);
-    const scale = allele.pathLength > 0 ? drawn / allele.pathLength : 0;
-    allele.nodeIds.forEach((nodeId, i) => {
-      const node = byId.get(nodeId);
-      if (node) {
-        const offset = allele.nodeOffsets[i];
-        const even = drawn / allele.nodeIds.length;
-        const at = (bp) => allele.start + bp * scale;
-        const y = rowY(node);
-        positions[nodeId] = scale ? [
-          { x: at(offset), y },
-          { x: at(offset + node.length), y }
-        ] : [
-          { x: allele.start + i * even, y },
-          { x: allele.start + (i + 1) * even, y }
-        ];
-      }
-    });
-  }
-  const neighbors = buildNeighbors(graph);
-  const queue = Object.keys(positions);
-  for (const fromId of queue) {
-    const fromEnd = positions[fromId].at(-1).x;
-    for (const nextId of neighbors.get(fromId) ?? []) {
-      const next = byId.get(nextId);
-      if (next && !(nextId in positions)) {
-        const y = rowY(next);
-        positions[nextId] = [
-          { x: fromEnd, y },
-          { x: fromEnd + minSpan, y }
-        ];
-        queue.push(nextId);
-      }
-    }
-  }
-  return alleleDeletions;
-}
-
-// src/layout/rowSpacing.ts
-var ROW_HEIGHT_PX = 20;
-
-// src/layout/anchoredLayout.ts
-function rankRows(graph) {
-  const present = /* @__PURE__ */ new Set();
-  for (const node of graph.nodes) {
-    if (node.stable) {
-      present.add(node.stable.rank);
-    }
-  }
-  return new Map([...present].sort((a, b) => a - b).map((r, i) => [r, i]));
-}
-function anchoredLayout(graph, region) {
-  const backbone = backboneNodes(graph);
-  if (backbone.length === 0) {
-    return void 0;
-  }
-  const span2 = referenceSpan(backbone, region);
-  const rows = rankRows(graph);
-  const nodePositions = backbonePositions(backbone);
-  const alleleDeletions = placeOffReference({
-    graph,
-    span: span2,
-    rowY: (node) => (node.stable ? rows.get(node.stable.rank) ?? rows.size : rows.size) * ROW_HEIGHT_PX,
-    positions: nodePositions
-  });
-  const rowLabels = [...rows].map(([rank, row]) => ({
-    label: rank === 0 ? "Reference (rank 0)" : `Rank ${rank}`,
-    y: row * ROW_HEIGHT_PX
-  }));
-  return {
-    nodePositions,
-    rowLabels,
-    referenceAxis: true,
-    pixelRows: true,
-    alleleDeletions
-  };
-}
-
-// src/layout/orderedLayout.ts
-var GUTTER = 12;
-var LANE_PX = ROW_HEIGHT_PX;
-function nodeWidth(node) {
-  return 10 + 8 * Math.log2(1 + node.length);
-}
-function compare(a, b) {
-  return a < b ? -1 : a > b ? 1 : 0;
-}
-function compareKeys(a, b) {
-  return compare(a.at, b.at) || compare(a.side, b.side) || compare(a.hops, b.hops);
-}
-var UNREACHED = { at: Infinity, side: 0, hops: 0 };
-function referenceOrder(graph) {
-  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
-  const key = orderKeys(graph);
-  return graph.nodes.map((n) => n.id).sort(
-    (a, b) => compareKeys(key.get(a) ?? UNREACHED, key.get(b) ?? UNREACHED) || compare(byId.get(a).name, byId.get(b).name) || compare(a, b)
-  );
-}
-function placeByWalks(graph, backbone) {
-  const isNode = new Set(graph.nodes.map((n) => n.id));
-  const startOf = new Map(backbone.map((n) => [n.id, n.stable.start]));
-  const next = /* @__PURE__ */ new Map();
-  const prev = /* @__PURE__ */ new Map();
-  backbone.forEach((n, i) => {
-    prev.set(n.id, backbone[i - 1]?.id);
-    next.set(n.id, backbone[i + 1]?.id);
-  });
-  let head = backbone[0]?.id;
-  const insertAfter = (at, id) => {
-    const after = next.get(at);
-    next.set(at, id);
-    prev.set(id, at);
-    next.set(id, after);
-    if (after !== void 0) {
-      prev.set(after, id);
-    }
-  };
-  const insertBefore = (at, id) => {
-    const before = prev.get(at);
-    if (before === void 0) {
-      head = id;
-      prev.set(id, void 0);
-      next.set(id, at);
-      prev.set(at, id);
-    } else {
-      insertAfter(before, id);
-    }
-  };
-  for (const path of graph.paths ?? []) {
-    let rising = 0;
-    let falling = 0;
-    let last;
-    for (const id of path.nodeIds) {
-      const start = startOf.get(id);
-      if (start !== void 0) {
-        if (last !== void 0 && start !== last) {
-          if (start > last) {
-            rising++;
-          } else {
-            falling++;
-          }
-        }
-        last = start;
-      }
-    }
-    const ids = falling > rising ? [...path.nodeIds].reverse() : path.nodeIds;
-    let from;
-    const leading = /* @__PURE__ */ new Set();
-    for (const id of ids) {
-      if (next.has(id)) {
-        if (from === void 0) {
-          for (const lead of leading) {
-            insertBefore(id, lead);
-          }
-        }
-        from = id;
-      } else if (isNode.has(id)) {
-        if (from === void 0) {
-          leading.add(id);
-        } else {
-          insertAfter(from, id);
-          from = id;
-        }
-      }
-    }
-  }
-  const placed = [];
-  for (let id = head; id !== void 0; id = next.get(id)) {
-    placed.push(id);
-  }
-  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 placed = queue.length;
-  for (const id of queue) {
-    const from = key.get(id);
-    for (const nb of adjacent.get(id) ?? []) {
-      if (!key.has(nb)) {
-        key.set(nb, { at: from.at, side: 1, hops: from.hops + 1 });
-        queue.push(nb);
-      }
-    }
-  }
-  const searched = new Set(queue.slice(placed));
-  const sided = /* @__PURE__ */ new Set();
-  for (const seed of searched) {
-    if (sided.has(seed)) {
-      continue;
-    }
-    const { at } = key.get(seed);
-    const run = [seed];
-    sided.add(seed);
-    let farHalf = true;
-    for (const id of run) {
-      const { hops } = key.get(id);
-      let deadEnd = true;
-      let touchesLeft = false;
-      for (const nb of adjacent.get(id) ?? []) {
-        const other = key.get(nb);
-        if (other.at === at && searched.has(nb)) {
-          deadEnd &&= other.hops <= hops;
-          if (!sided.has(nb)) {
-            sided.add(nb);
-            run.push(nb);
-          }
-        } else if (other.at !== at) {
-          touchesLeft ||= other.at < at;
-          farHalf &&= other.at < at;
-        }
-      }
-      farHalf &&= !deadEnd || touchesLeft;
-    }
-    if (farHalf) {
-      for (const id of run) {
-        const k = key.get(id);
-        key.set(id, { ...k, side: -1, hops: -k.hops });
-      }
-    }
-  }
-}
-function orderKeys(graph) {
-  const ids = new Set(graph.nodes.map((n) => n.id));
-  const adjacent = /* @__PURE__ */ new Map();
-  for (const e of graph.edges) {
-    if (!ids.has(e.from) || !ids.has(e.to)) {
-      continue;
-    }
-    ;
-    (adjacent.get(e.from) ?? adjacent.set(e.from, []).get(e.from)).push(e.to);
-    (adjacent.get(e.to) ?? adjacent.set(e.to, []).get(e.to)).push(e.from);
-  }
-  const backbone = graph.nodes.filter(isBackbone).sort(
-    (a, b) => compare(a.stable.start, b.stable.start) || compare(a.name, b.name)
-  );
-  const key = /* @__PURE__ */ new Map();
-  placeByWalks(graph, backbone).forEach((id, rank) => {
-    key.set(id, { at: rank, side: 0, hops: 0 });
-  });
-  placeBySearch(adjacent, key);
-  return key;
-}
-function layerGraph(graph) {
-  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
-  const order = referenceOrder(graph);
-  const key = new Map(order.map((id, i) => [id, i]));
-  const isRef = (id) => isBackbone(byId.get(id));
-  const preds = new Map(order.map((id) => [id, []]));
-  const succs = new Map(order.map((id) => [id, []]));
-  const link = (a, b) => {
-    preds.get(b).push(a);
-    succs.get(a).push(b);
-  };
-  for (const e of graph.edges) {
-    if (e.from === e.to || !key.has(e.from) || !key.has(e.to)) {
-      continue;
-    }
-    if (key.get(e.from) < key.get(e.to)) {
-      link(e.from, e.to);
-    } else {
-      link(e.to, e.from);
-    }
-  }
-  const backbone = order.filter(isRef);
-  for (let i = 1; i < backbone.length; i++) {
-    link(backbone[i - 1], backbone[i]);
-  }
-  const layerOf2 = /* @__PURE__ */ new Map();
-  for (const id of order) {
-    let l = 0;
-    for (const p of preds.get(id)) {
-      l = Math.max(l, layerOf2.get(p) + 1);
-    }
-    layerOf2.set(id, l);
-  }
-  for (let i = order.length - 1; i >= 0; i--) {
-    const id = order[i];
-    const s = succs.get(id);
-    if (isRef(id) || s.length === 0) {
-      continue;
-    }
-    let minSucc = Infinity;
-    for (const t of s) {
-      minSucc = Math.min(minSucc, layerOf2.get(t));
-    }
-    const lo = layerOf2.get(id);
-    const hi = Math.max(lo, minSucc - 1);
-    layerOf2.set(id, Math.floor((lo + hi) / 2));
-  }
-  const layers = [];
-  for (const id of order) {
-    ;
-    (layers[layerOf2.get(id)] ??= []).push(id);
-  }
-  return { layers, layerOf: layerOf2, preds };
-}
-function orderedLayout(graph) {
-  if (!graph.nodes.some(isBackbone)) {
-    return void 0;
-  }
-  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
-  const isRef = (id) => isBackbone(byId.get(id));
-  const { layers, layerOf: layer, preds } = layerGraph(graph);
-  const layerWidth = layers.map((ids) => {
-    let w = 0;
-    for (const id of ids) {
-      w = Math.max(w, nodeWidth(byId.get(id)));
-    }
-    return w;
-  });
-  const layerX = [];
-  let x = 0;
-  for (let l = 0; l < layers.length; l++) {
-    layerX[l] = x;
-    x += layerWidth[l] + GUTTER;
-  }
-  const y = /* @__PURE__ */ new Map();
-  for (const ids of layers) {
-    const free = [];
-    for (const id of ids) {
-      if (isRef(id)) {
-        y.set(id, 0);
-        continue;
-      }
-      const placed = preds.get(id).filter((p) => y.has(p));
-      let ideal = 0;
-      for (const p of placed) {
-        ideal += y.get(p) / placed.length;
-      }
-      free.push({ id, ideal: ideal === 0 ? LANE_PX : ideal });
-    }
-    free.sort((a, b) => a.ideal - b.ideal);
-    const taken = /* @__PURE__ */ new Set([0]);
-    for (const { id, ideal } of free) {
-      let lane = Math.round(ideal / LANE_PX);
-      if (lane === 0) {
-        lane = ideal >= 0 ? 1 : -1;
-      }
-      for (let d = 1; taken.has(lane); d++) {
-        if (!taken.has(lane + d)) {
-          lane += d;
-        } else if (!taken.has(lane - d)) {
-          lane -= d;
-        }
-      }
-      taken.add(lane);
-      y.set(id, lane * LANE_PX);
-    }
-  }
-  const nodePositions = {};
-  for (const n of graph.nodes) {
-    const l = layer.get(n.id);
-    const w = nodeWidth(n);
-    const cx = layerX[l] + layerWidth[l] / 2;
-    const ny = y.get(n.id);
-    nodePositions[n.id] = [
-      { x: cx - w / 2, y: ny },
-      { x: cx + w / 2, y: ny }
-    ];
-  }
-  return { nodePositions, referenceAxis: false, pixelRows: true };
-}
-
-// src/layout/sampleRowLayout.ts
-function contributingSamples(graph, keep) {
-  const carried = /* @__PURE__ */ new Map();
-  for (const node of graph.nodes) {
-    if (isOffReference(node)) {
-      const { sample } = parsePanSN(node.stable.refName);
-      carried.set(sample, (carried.get(sample) ?? 0) + node.length);
-    }
-  }
-  const held = new Map(keep.map((sample, row) => [sample, row]));
-  return [...carried.keys()].sort(
-    (a, b) => (held.get(a) ?? Infinity) - (held.get(b) ?? Infinity) || carried.get(b) - carried.get(a) || a.localeCompare(b)
-  );
-}
-function sampleRowLayout(graph, region, keep = []) {
-  const backbone = backboneNodes(graph);
-  const samples = contributingSamples(graph, keep);
-  if (backbone.length === 0 || samples.length === 0) {
-    return void 0;
-  }
-  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: span2,
-    rowY: (node) => {
-      const stable = node.stable;
-      const row = stable ? rowOf.get(parsePanSN(stable.refName).sample) : void 0;
-      return (row ?? spareRow) * ROW_HEIGHT_PX;
-    },
-    positions: nodePositions
-  });
-  const referenceSample = parsePanSN(backbone[0].stable.refName).sample;
-  const rowLabels = [
-    { label: referenceSample, y: 0 },
-    ...samples.map((sample) => ({
-      label: sample,
-      y: rowOf.get(sample) * ROW_HEIGHT_PX
-    }))
-  ];
-  return {
-    nodePositions,
-    rowLabels,
-    sampleRows: samples,
-    referenceAxis: true,
-    pixelRows: true,
-    alleleDeletions
-  };
-}
-
-// src/layout/tubeMapLayout.ts
-import { layoutTubeMap } from "@gmod/tubemap-core";
-
-// src/pathColors.ts
-function nameHue(name) {
-  let hash = 0;
-  for (let i = 0; i < name.length; i++) {
-    hash = name.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  return Math.abs(hash % 360);
-}
-function pathHueAt(index, count) {
-  return index * 360 / count;
-}
-var PATH_SATURATION = 0.7;
-var PATH_LIGHTNESS = 0.5;
-var MAX_PATH_COLORS = 16;
-function pathColorsLegible(pathCount) {
-  return pathCount > 0 && pathCount <= MAX_PATH_COLORS;
-}
-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("#");
-  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, ",");
-}
-function offsetTiers(name, tiers) {
-  const { start } = pathOrigin(name);
-  return tiers.map((t) => `${t} @${groupDigits(start)}`);
-}
-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]),
-    paths.map((p, i) => offsetTiers(p.name, named[i])[t])
-  ]);
-  const distinct = candidates.find(
-    (labels2) => new Set(labels2).size === paths.length
-  );
-  const labels = distinct ?? candidates.at(-1);
-  return paths.map((path, i) => ({
-    name: path.name,
-    label: labels[i],
-    color: colors?.[i] ?? pathCssColor(i, paths.length)
-  }));
-}
-
-// src/gaf/parseGaf.ts
-var CS_OP = /:(\d+)|=([A-Za-z]+)|\*[a-zA-Z]([a-zA-Z])|\+([A-Za-z]+)|-([A-Za-z]+)|~[a-z]{2}(\d+)[a-z]{2}/g;
-function parseCs(cs) {
-  const ops = [];
-  for (const m of cs.matchAll(CS_OP)) {
-    if (m[1] !== void 0) {
-      ops.push({ op: "match", length: +m[1] });
-    } else if (m[2] !== void 0) {
-      ops.push({ op: "match", length: m[2].length });
-    } else if (m[3] !== void 0) {
-      ops.push({ op: "substitution", seq: m[3].toUpperCase() });
-    } else if (m[4] !== void 0) {
-      ops.push({ op: "insertion", seq: m[4].toUpperCase() });
-    } else if (m[5] !== void 0) {
-      ops.push({ op: "deletion", length: m[5].length });
-    } else if (m[6] !== void 0) {
-      ops.push({ op: "match", length: +m[6] });
-    }
-  }
-  return ops;
-}
-
-// src/tubeMap/reads.ts
-function canonicalStrand(node) {
-  return node.id.endsWith("-") ? "-" : "+";
-}
-function stepName(node, strand) {
-  return strand === canonicalStrand(node) ? node.id : `-${node.id}`;
-}
-function stepStarts(lengths, total) {
-  const starts = lengths.map(() => void 0);
-  let head = 0;
-  let i = 0;
-  for (; i < lengths.length && lengths[i] !== void 0; i++) {
-    starts[i] = head;
-    head += lengths[i];
-  }
-  let tail = total;
-  for (let j = lengths.length - 1; j > i && lengths[j] !== void 0; j--) {
-    tail -= lengths[j];
-    starts[j] = tail;
-  }
-  return starts;
-}
-function mismatchesByStep(record, lengths) {
-  const byStep = record.path.map(() => []);
-  if (record.cs === void 0) {
-    return byStep;
-  }
-  const starts = stepStarts(lengths, record.pathLength);
-  const stepAt = (pos2, atEnd = false) => {
-    for (let s = 0; s < starts.length; s++) {
-      const start = starts[s];
-      const length = lengths[s];
-      if (start !== void 0 && length !== void 0 && start <= pos2 && (pos2 < start + length || atEnd && pos2 === start + length)) {
-        return { s, local: pos2 - start, room: start + length - pos2 };
-      }
-    }
-    return void 0;
-  };
-  const add = (s, mismatch) => {
-    const list = byStep[s];
-    const last = list.at(-1);
-    if (mismatch.type === "substitution" && last?.type === "substitution" && last.pos + last.seq.length === mismatch.pos) {
-      last.seq += mismatch.seq;
-    } else {
-      list.push(mismatch);
-    }
-  };
-  let pos = record.pathStart;
-  for (const op of parseCs(record.cs)) {
-    if (op.op === "match") {
-      pos += op.length;
-    } else if (op.op === "substitution") {
-      const at = stepAt(pos);
-      if (at) {
-        add(at.s, { type: "substitution", pos: at.local, seq: op.seq });
-      }
-      pos += 1;
-    } else if (op.op === "insertion") {
-      const at = stepAt(pos, pos === record.pathEnd);
-      if (at) {
-        add(at.s, { type: "insertion", pos: at.local, seq: op.seq });
-      }
-    } else {
-      let left = op.length;
-      while (left > 0) {
-        const at = stepAt(pos);
-        const take = at ? Math.min(left, at.room) : left;
-        if (at) {
-          add(at.s, { type: "deletion", pos: at.local, length: take });
-        }
-        pos += take;
-        left -= take;
-      }
-    }
-  }
-  return byStep;
-}
-function tubeMapReads(graph, records, firstId) {
-  const nodeByName = new Map(graph.nodes.map((n) => [n.name, n]));
-  const reads = [];
-  for (const record of records) {
-    const nodes = record.path.map((step) => nodeByName.get(step.name));
-    const kept = nodes.flatMap((node, i) => node ? [i] : []);
-    const first = kept[0];
-    const last = kept.at(-1);
-    if (first !== void 0 && last !== void 0) {
-      const mismatches = mismatchesByStep(
-        record,
-        nodes.map((n) => n?.length)
-      );
-      const names = kept.map((i) => stepName(nodes[i], record.path[i].strand));
-      const lastLength = nodes[last].length;
-      reads.push({
-        id: firstId + reads.length,
-        name: record.name,
-        type: "read",
-        sourceTrackID: 1,
-        sequence: names,
-        sequenceNew: kept.map((i, k) => ({
-          nodeName: names[k],
-          mismatches: mismatches[i]
-        })),
-        firstNodeOffset: first === 0 ? record.pathStart : 0,
-        finalNodeCoverLength: last === record.path.length - 1 ? lastLength - (record.pathLength - record.pathEnd) : lastLength,
-        mapping_quality: record.mappingQuality === 255 ? 0 : record.mappingQuality,
-        is_secondary: record.secondary,
-        is_reverse: record.strand === "-"
-      });
-    }
-  }
-  return reads;
-}
-var FORWARD_READ_COLORS = ["#6baed6", "#4292c6", "#2171b5", "#08519c"];
-var REVERSE_READ_COLORS = ["#fb6a4a", "#ef3b2c", "#cb181d", "#a50f15"];
-function readColor(read) {
-  const colors = read.is_reverse ? REVERSE_READ_COLORS : FORWARD_READ_COLORS;
-  return colors[read.id % colors.length];
-}
-
-// src/layout/tubeMapLayout.ts
-function visitStrands(graph) {
-  const strands = /* @__PURE__ */ new Map();
-  for (const [segment, visits] of graph.pathVisits ?? []) {
-    for (const visit of visits) {
-      const key = `${visit.path}	${segment}`;
-      const list = strands.get(key);
-      if (list) {
-        list.push(visit.strand);
-      } else {
-        strands.set(key, [visit.strand]);
-      }
-    }
-  }
-  return strands;
-}
-function tubeMapTracks(graph) {
-  const nodeById = new Map(graph.nodes.map((n) => [n.id, n]));
-  const strands = visitStrands(graph);
-  const paths = (graph.paths ?? []).map((path, index) => ({ path, index }));
-  const reference = paths.findIndex(
-    (p) => pathOrigin(p.path.name).name === graph.referencePath
-  );
-  if (reference > 0) {
-    paths.unshift(...paths.splice(reference, 1));
-  }
-  return paths.flatMap(({ path, index }) => {
-    const visitName = pathOrigin(path.name).name;
-    const seen = /* @__PURE__ */ new Map();
-    const sequence = path.nodeIds.flatMap((id) => {
-      const node = nodeById.get(id);
-      if (!node) {
-        return [];
-      }
-      const k = seen.get(node.name) ?? 0;
-      seen.set(node.name, k + 1);
-      const strand = strands.get(`${visitName}	${node.name}`)?.[k] ?? canonicalStrand(node);
-      return [stepName(node, strand)];
-    });
-    return sequence.length > 0 ? [
-      {
-        id: index,
-        name: path.name,
-        sequence,
-        sourceTrackID: 0,
-        type: "haplotype"
-      }
-    ] : [];
-  });
-}
-function tubeMapNodes(graph) {
-  return graph.nodes.map((n) => ({
-    name: n.id,
-    seq: "",
-    sequenceLength: Math.max(1, n.length)
-  }));
-}
-function hasTubeMapPaths(graph) {
-  return (graph.paths?.length ?? 0) > 0;
-}
-var STACK_PX = 600;
-var MIN_TUBE_PX = 3;
-var MAX_TUBE_PX = 15;
-function tubeWidth(trackCount) {
-  return Math.max(
-    MIN_TUBE_PX,
-    Math.min(MAX_TUBE_PX, Math.floor(STACK_PX / Math.max(1, trackCount)))
-  );
-}
-function runTubeMap(graph) {
-  const paths = graph.paths ?? [];
-  const tracks = tubeMapTracks(graph);
-  const reads = graph.reads ? tubeMapReads(graph, graph.reads, paths.length) : [];
-  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) : pathColors[track.id]
-  });
-  return layout ? { layout, pathColors } : void 0;
-}
-function drawnNodes(layout) {
-  const nodes = [];
-  layout.nodes.forEach((node) => {
-    if (node.order >= 0) {
-      nodes.push(node);
-    }
-  });
-  return nodes;
-}
-function centreline(node, yOffset, x0, x1) {
-  const y = node.y + node.contentHeight / 2 - yOffset;
-  return [
-    { x: x0, y },
-    { x: x1, y }
-  ];
-}
-function extentOf(layout, yOffset) {
-  return {
-    minY: layout.bounds.minY - yOffset,
-    maxY: layout.bounds.maxY - yOffset
-  };
-}
-function tubeMapLayout(graph) {
-  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)) {
-    nodePositions[node.name] = centreline(
-      node,
-      yOffset,
-      node.x,
-      node.x + node.pixelWidth
-    );
-  }
-  const { minY, maxY } = extentOf(layout, yOffset);
-  return {
-    nodePositions,
-    tubeMap: { layout, yOffset, pathColors },
-    extent: {
-      minX: layout.bounds.minX,
-      maxX: layout.bounds.maxX,
-      minY,
-      maxY
-    }
-  };
-}
-function tubeMapColumns(graph, layout) {
-  const nodeById = new Map(graph.nodes.map((n) => [n.id, n]));
-  const byOrder = /* @__PURE__ */ new Map();
-  for (const node of drawnNodes(layout)) {
-    const list = byOrder.get(node.order);
-    if (list) {
-      list.push(node);
-    } else {
-      byOrder.set(node.order, [node]);
-    }
-  }
-  const columns = [];
-  let end = -Infinity;
-  for (const order of [...byOrder.keys()].sort((a, b) => a - b)) {
-    const nodes = byOrder.get(order);
-    let bp0 = Infinity;
-    let bp1 = -Infinity;
-    for (const node of nodes) {
-      const graphNode = nodeById.get(node.name);
-      if (graphNode && isBackbone(graphNode)) {
-        bp0 = Math.min(bp0, graphNode.stable.start);
-        bp1 = Math.max(bp1, graphNode.stable.start + node.sequenceLength);
-      }
-    }
-    if (bp0 === Infinity) {
-      bp0 = bp1 = end;
-    }
-    if (bp0 < end) {
-      bp0 = end;
-      bp1 = Math.max(end, bp1);
-    }
-    end = Math.max(end, bp1);
-    columns.push({
-      order,
-      x0: Math.min(...nodes.map((n) => n.x)),
-      x1: Math.max(...nodes.map((n) => n.x + n.pixelWidth)),
-      bp0,
-      bp1
-    });
-  }
-  const first = columns.find((c) => c.bp0 !== -Infinity);
-  for (const column of columns) {
-    if (column.bp0 === -Infinity) {
-      column.bp0 = column.bp1 = first?.bp0 ?? 0;
-    }
-  }
-  return columns;
-}
-function pathsReachBackbone(graph) {
-  return graph.nodes.some(isBackbone) && hasTubeMapPaths(graph);
-}
-function tubeMapReferenceLayout(graph) {
-  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;
-  const nodePositions = {};
-  for (const node of drawnNodes(layout)) {
-    const column = byOrder.get(node.order);
-    nodePositions[node.name] = centreline(node, yOffset, column.bp0, column.bp1);
-  }
-  return {
-    nodePositions,
-    tubeMap: { layout, yOffset, columns, pathColors },
-    referenceAxis: true,
-    pixelRows: true,
-    extent: extentOf(layout, yOffset)
-  };
-}
-
-// src/layout/walkRows.ts
-function sampleOf(path) {
-  return path.sample ?? panSNSample(path.name);
-}
-function labelOf(path) {
-  return path.haplotype !== void 0 && path.sample !== void 0 ? `${path.sample}#${path.haplotype}` : sampleOf(path);
-}
-function sliceBetween(nodeIds, span2, region, flanked = true) {
-  if (!region || !flanked) {
-    return { ids: nodeIds, complete: true };
-  }
-  let i0 = -1;
-  let i1 = -1;
-  let bestEnd = -Infinity;
-  let bestStart = Infinity;
-  nodeIds.forEach((id, i) => {
-    const s = span2.get(id);
-    if (s) {
-      if (s.end <= region.start && s.end > bestEnd) {
-        bestEnd = s.end;
-        i0 = i;
-      }
-      if (s.start >= region.end && s.start < bestStart) {
-        bestStart = s.start;
-        i1 = i;
-      }
-    }
-  });
-  if (i0 < 0 || i1 < 0) {
-    return { ids: nodeIds, complete: false };
-  }
-  const ids = nodeIds.slice(Math.min(i0, i1) + 1, Math.max(i0, i1));
-  return { ids: i0 < i1 ? ids : ids.reverse(), complete: true };
-}
-function walkRows(graph, region, unit) {
-  const paths = graph.paths ?? [];
-  const reference = paths.find((p) => pathOrigin(p.name).name === graph.referencePath) ?? paths[0];
-  if (!reference || paths.length < 2) {
-    return void 0;
-  }
-  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 span2 = /* @__PURE__ */ new Map();
-  let pos = referenceStart;
-  for (const id of reference.nodeIds) {
-    const len = lengthOf.get(id) ?? 0;
-    if (!span2.has(id)) {
-      span2.set(id, { start: pos, end: pos + len });
-    }
-    pos += len;
-  }
-  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, 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 = 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;
-      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: s !== void 0,
-          referenceStart: s?.start
-        });
-        step = 0;
-      }
-      bp += len;
-      if (!s) {
-        offReferenceBp += len;
-      }
-    }
-    return {
-      name: path.name,
-      label: labelOf(path),
-      sample: sampleOf(path),
-      haplotype: path.haplotype,
-      bp,
-      offReferenceBp,
-      complete,
-      runs
-    };
-  };
-  const meetsReference = (p) => p.nodeIds.some((id) => span2.has(id));
-  const placedWalks = new Set(
-    paths.filter((p) => p !== reference && meetsReference(p)).map((p) => p.name)
-  );
-  const origin = cut ? cut.start : referenceStart;
-  return {
-    origin,
-    unit,
-    reference: rowOf(reference),
-    rows: paths.filter(
-      (p) => p !== reference && (meetsReference(p) || !placedWalks.has(p.name))
-    ).map(rowOf).sort(
-      (a, b) => Number(b.complete) - Number(a.complete) || b.bp - a.bp || a.label.localeCompare(b.label)
-    )
-  };
-}
-
-// src/layout/walkRowLayout.ts
-var READOUT_ROOM = 1.3;
-function walkRowsExtent(walks) {
-  let longest = walks.reference.bp;
-  for (const row of walks.rows) {
-    longest = Math.max(longest, row.bp);
-  }
-  return {
-    maxX: walks.origin + longest * READOUT_ROOM,
-    maxY: walks.rows.length * ROW_HEIGHT_PX
-  };
-}
-function walkRowLayout(graph, region) {
-  const backbone = backboneNodes(graph);
-  const walks = walkRows(graph, region);
-  if (backbone.length === 0 || !walks) {
-    return void 0;
-  }
-  const nodePositions = backbonePositions(backbone);
-  const rowLabels = [
-    { label: walks.reference.label, y: 0 },
-    ...walks.rows.map((row, i) => ({
-      label: row.label,
-      y: (i + 1) * ROW_HEIGHT_PX
-    }))
-  ];
-  return {
-    nodePositions,
-    rowLabels,
-    referenceAxis: true,
-    pixelRows: true,
-    extent: walkRowsExtent(walks)
-  };
-}
-
-// src/layoutModes.ts
-var FORCE_LAYOUT_LABEL = "Force-directed layout";
-var hasBackbone = (graph) => graph.nodes.some(isBackbone);
-var hasWalks = (graph) => hasBackbone(graph) && (graph.paths?.length ?? 0) > 1;
-var hasTubeMapBackbone = (graph) => hasBackbone(graph) && hasTubeMapPaths(graph);
-var hasAlleles = (graph) => hasBackbone(graph) && graph.nodes.some(isOffReference);
-var LAYOUT_MODES = [
-  {
-    value: "auto",
-    label: "Anchored",
-    description: "x is reference bp, one row per stable rank. Needs rGFA tags or a reference path.",
-    run: anchoredLayout,
-    cutMargins: true,
-    wholeWalks: false,
-    available: hasBackbone,
-    drawsLocally: hasBackbone
-  },
-  {
-    value: "samplerows",
-    label: "Sample rows",
-    description: "x is reference bp, one row per contributing assembly. Needs rGFA tags or a reference path.",
-    run: sampleRowLayout,
-    cutMargins: true,
-    wholeWalks: false,
-    available: hasAlleles,
-    drawsLocally: hasAlleles
-  },
-  {
-    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.",
-    run: walkRowLayout,
-    cutMargins: false,
-    wholeWalks: true,
-    available: hasWalks,
-    drawsLocally: hasWalks
-  },
-  {
-    value: "ordered",
-    label: "Ordered",
-    description: "x is reference order, not bp: every node gets room, bubbles read as lenses. Needs rGFA tags or a reference path.",
-    run: orderedLayout,
-    cutMargins: false,
-    wholeWalks: false,
-    available: hasBackbone,
-    drawsLocally: hasBackbone
-  },
-  {
-    value: "tubemap",
-    label: "Tube map",
-    description: "sequenceTubeMap: every path a coloured tube through boxed nodes, columns in node order and node widths log-scaled. Needs P or W lines.",
-    run: tubeMapLayout,
-    cutMargins: false,
-    wholeWalks: false,
-    available: hasTubeMapPaths,
-    drawsLocally: hasTubeMapPaths
-  },
-  {
-    value: "tubemapref",
-    label: "Tube map on reference",
-    description: "The tube map with each column at the reference bp it covers, so the tubes line up with the tracks around them. Needs P or W lines and a reference path.",
-    run: tubeMapReferenceLayout,
-    cutMargins: true,
-    wholeWalks: false,
-    available: hasTubeMapBackbone,
-    drawsLocally: hasTubeMapBackbone
-  },
-  {
-    value: "force",
-    label: FORCE_LAYOUT_LABEL,
-    description: "OGDF FMMM, via the external Bandage engine.",
-    run: () => void 0,
-    cutMargins: false,
-    wholeWalks: false,
-    available: () => true,
-    drawsLocally: () => false
-  }
-];
-var LAYOUT_MODE_VALUES = LAYOUT_MODES.map((m) => m.value);
-function modeUsesLayoutEngine(value, graph) {
-  return !layoutModeByValue(value).drawsLocally(graph);
-}
-function layoutModeByValue(value) {
-  return LAYOUT_MODES.find((m) => m.value === value) ?? LAYOUT_MODES[0];
-}
-
-// src/colorSchemes.ts
-var COLOR_SCHEMES = [
-  // Mirrors `layoutModes`' 'auto': a value the model resolves rather than a
-  // colour of its own. It exists because 'uniform' was the default, so a
-  // launched graph opened flat grey and both tutorials spent a step saying "now
-  // pick a colour" — one figure literally drives that click. A graph with
-  // reference coordinates resolves to 'reference-position', which is the one
-  // ramp a linear track beside it can be painted with too; a graph with none
-  // keeps 'uniform', because there the ramp would be a hue nothing earned.
-  //
-  // Resolve through `effectiveColorScheme`; the dropdown reads the raw prop, so
-  // "Auto" stays selectable and visible as what it is.
-  { value: "auto", label: "Auto" },
-  { value: "uniform", label: "Uniform" },
-  { value: "random", label: "Random" },
-  { value: "rainbow", label: "Rainbow" },
-  { value: "depth", label: "Depth" },
-  { value: "node-length", label: "Node Length" },
-  { value: "stable-rank", label: "Stable rank" },
-  { value: "reference-position", label: "Reference position" },
-  { value: "grey", label: "Grey" }
-];
-var COLOR_SCHEME_VALUES = COLOR_SCHEMES.map((s) => s.value);
-function resolveColorScheme(scheme, graph) {
-  return scheme !== "auto" ? scheme : graph?.anchoredBy ? "reference-position" : "uniform";
-}
-
-// src/nodeWidths.ts
-var NODE_WIDTHS = [
-  {
-    value: "depth",
-    label: "By depth",
-    description: "Thicker the more paths carry a node, on the square root of its depth against the mean. A graph with one depth everywhere draws uniform."
-  },
-  {
-    value: "uniform",
-    label: "Uniform",
-    description: "Every node the same thickness."
-  }
-];
-var NODE_WIDTH_VALUES = NODE_WIDTHS.map((w) => w.value);
-var MIN_FACTOR = 0.3;
-var MAX_FACTOR = 3;
-function meanDepth(graph) {
-  let weighted = 0;
-  let length = 0;
-  for (const node of graph.nodes) {
-    weighted += node.depth * node.length;
-    length += node.length;
-  }
-  return length > 0 ? weighted / length : 0;
-}
-function depthWidthFactor(node, mean) {
-  if (!(mean > 0) || !(node.depth > 0)) {
-    return 1;
-  }
-  return Math.min(
-    MAX_FACTOR,
-    Math.max(MIN_FACTOR, Math.sqrt(node.depth / mean))
-  );
-}
-function nodeWidthPx(node, contigThickness, nodeWidth2, mean) {
-  return contigThickness * (nodeWidth2 === "depth" ? depthWidthFactor(node, mean) : 1);
-}
-function maxNodeWidthPx(contigThickness, nodeWidth2) {
-  return contigThickness * (nodeWidth2 === "depth" ? MAX_FACTOR : 1);
-}
-function nodeInk(graph, nodeById, contigThickness, nodeWidth2) {
-  const mean = graph ? meanDepth(graph) : 0;
-  return {
-    maxHalfWidthPx: maxNodeWidthPx(contigThickness, nodeWidth2) / 2,
-    halfWidthPx: (id) => {
-      const node = nodeById?.get(id);
-      return node ? nodeWidthPx(node, contigThickness, nodeWidth2, mean) / 2 : contigThickness / 2;
-    }
-  };
-}
-
-// src/renderer/GeometryBuilder.ts
-import { packAbgr as packAbgr2 } from "@jbrowse/core/util/colorBits";
-
-// src/renderer/colorBits.ts
-import {
-  abgrAlpha,
-  abgrBlue,
-  abgrGreen,
-  abgrRed,
-  packAbgr
-} from "@jbrowse/core/util/colorBits";
-function fadeAbgr(c, alpha) {
-  return packAbgr(
-    abgrRed(c),
-    abgrGreen(c),
-    abgrBlue(c),
-    Math.round(abgrAlpha(c) * alpha)
-  );
-}
-function brightenAbgr(c, factor) {
-  return packAbgr(
-    Math.min(255, Math.round(abgrRed(c) * factor)),
-    Math.min(255, Math.round(abgrGreen(c) * factor)),
-    Math.min(255, Math.round(abgrBlue(c) * factor)),
-    abgrAlpha(c)
-  );
-}
-
-// src/util/geometry.ts
-function svgPath(points) {
-  const round = (v) => Math.round(v * 100) / 100;
-  return points.map((p, i) => `${i ? "L" : "M"}${round(p.x)},${round(p.y)}`).join("");
-}
-function projectLine(x1, y1, x2, y2, distance) {
-  const d = Math.hypot(y2 - y1, x2 - x1);
-  if (d === 0) {
-    return [x2, y2];
-  }
-  const vx = (x2 - x1) / d;
-  const vy = (y2 - y1) / d;
-  return [x2 + distance * vx, y2 + distance * vy];
-}
-function curvePointAt(c, t) {
-  const u = 1 - t;
-  const a = u * u * u;
-  const b = 3 * u * u * t;
-  const d = 3 * u * t * t;
-  const e = t * t * t;
-  return {
-    x: a * c.x0 + b * c.cx0 + d * c.cx1 + e * c.x1,
-    y: a * c.y0 + b * c.cy0 + d * c.cy1 + e * c.y1
-  };
-}
-function curveMidpoint(curves) {
-  const mid = curves[Math.floor(curves.length / 2)];
-  return mid ? curvePointAt(mid, 0.5) : void 0;
-}
-function curveBounds(curves) {
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (const c of curves) {
-    minX = Math.min(minX, c.x0, c.cx0, c.cx1, c.x1);
-    maxX = Math.max(maxX, c.x0, c.cx0, c.cx1, c.x1);
-    minY = Math.min(minY, c.y0, c.cy0, c.cy1, c.y1);
-    maxY = Math.max(maxY, c.y0, c.cy0, c.cy1, c.y1);
-  }
-  return { minX, minY, maxX, maxY };
-}
-function subCurve(c, t0, t1) {
-  const p0 = curvePointAt(c, t0);
-  const p1 = curvePointAt(c, t1);
-  const dt = (t1 - t0) / 3;
-  const d0 = curveTangentAt(c, t0);
-  const d1 = curveTangentAt(c, t1);
-  return {
-    x0: p0.x,
-    y0: p0.y,
-    cx0: p0.x + d0.x * dt,
-    cy0: p0.y + d0.y * dt,
-    cx1: p1.x - d1.x * dt,
-    cy1: p1.y - d1.y * dt,
-    x1: p1.x,
-    y1: p1.y
-  };
-}
-function curveTangentAt(c, t) {
-  const u = 1 - t;
-  const a = 3 * u * u;
-  const b = 6 * u * t;
-  const d = 3 * t * t;
-  return {
-    x: a * (c.cx0 - c.x0) + b * (c.cx1 - c.cx0) + d * (c.x1 - c.cx1),
-    y: a * (c.cy0 - c.y0) + b * (c.cy1 - c.cy0) + d * (c.y1 - c.cy1)
-  };
-}
-function dashCurves(curves, dashWorld) {
-  const out = [];
-  for (const c of curves) {
-    const polyLen = Math.hypot(c.cx0 - c.x0, c.cy0 - c.y0) + Math.hypot(c.cx1 - c.cx0, c.cy1 - c.cy0) + Math.hypot(c.x1 - c.cx1, c.y1 - c.cy1);
-    const spans = Math.max(3, Math.round(polyLen / dashWorld) | 1);
-    for (let i = 0; i < spans; i += 2) {
-      out.push([subCurve(c, i / spans, (i + 1) / spans)]);
-    }
-  }
-  return out;
-}
-function translateCurves(curves, dx, dy) {
-  const out = new Array(curves.length);
-  for (let i = 0; i < curves.length; i++) {
-    const c = curves[i];
-    out[i] = {
-      x0: c.x0 + dx,
-      y0: c.y0 + dy,
-      cx0: c.cx0 + dx,
-      cy0: c.cy0 + dy,
-      cx1: c.cx1 + dx,
-      cy1: c.cy1 + dy,
-      x1: c.x1 + dx,
-      y1: c.y1 + dy
-    };
-  }
-  return out;
-}
-function attachment(segments, side) {
-  const last = segments.length - 1;
-  return side === "end" ? { at: segments[last], inward: segments[last - 1] } : { at: segments[0], inward: segments[1] };
-}
-var TANGENT_SPAN_FACTOR = 0.5;
-var MAX_TANGENT = 80;
-function spanOf(segments) {
-  let min = Infinity;
-  let max = -Infinity;
-  for (const s of segments) {
-    min = Math.min(min, s.x);
-    max = Math.max(max, s.x);
-  }
-  return { min, 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);
-  const endGap = distanceToSpan(segments[segments.length - 1].x, other);
-  return startGap === endGap ? tieBreak : startGap < endGap ? "start" : "end";
-}
-function facingSides(fromSegments, toSegments) {
-  return {
-    from: facingSide(fromSegments, spanOf(toSegments), "end"),
-    to: facingSide(toSegments, spanOf(fromSegments), "start")
-  };
-}
-var APEX_FRACTION = 0.75;
-var BOW_CLEARANCE = 1.15;
-var ALONG_FRACTION = 0.35;
-var MAX_ROW_BOW_PX = 3 * ROW_HEIGHT_PX;
-function bowAround(p1x, p1y, p2x, p2y, toward, maxBow) {
-  const chord = Math.hypot(p2x - p1x, p2y - p1y);
-  const ux = chord === 0 ? 1 : (p2x - p1x) / chord;
-  const uy = chord === 0 ? 0 : (p2y - p1y) / chord;
-  let reach = 0;
-  let minAlong = Infinity;
-  let maxAlong = -Infinity;
-  for (const p of toward) {
-    const dx = p.x - p1x;
-    const dy = p.y - p1y;
-    const perp = dx * -uy + dy * ux;
-    if (Math.abs(perp) > Math.abs(reach)) {
-      reach = perp;
-    }
-    const along = dx * ux + dy * uy;
-    minAlong = Math.min(minAlong, along);
-    maxAlong = Math.max(maxAlong, along);
-  }
-  const span2 = toward.length ? maxAlong - minAlong : 0;
-  const uncapped = Math.max(
-    Math.abs(reach) * BOW_CLEARANCE / APEX_FRACTION,
-    span2 * ALONG_FRACTION
-  );
-  const size = maxBow === void 0 ? uncapped : Math.min(uncapped, maxBow);
-  return reach < 0 ? -size : size;
-}
-function yToXOf({ scaleX, scaleY }) {
-  return scaleY / scaleX;
-}
-var PATH_RIBBON_SPACING = 3;
-function drawnDirection(a, b, yToX) {
-  const dx = b.x - a.x;
-  const dy = (b.y - a.y) * yToX;
-  const len = Math.hypot(dx, dy);
-  return len === 0 ? void 0 : { x: dx / len, y: dy / len };
-}
-function pathRibbonOffsets(fromSegments, toSegments, count, axis, spacing = PATH_RIBBON_SPACING) {
-  const yToX = yToXOf(axis);
-  const dir = drawnDirection(
-    fromSegments[fromSegments.length - 1],
-    toSegments[0],
-    yToX
-  ) ?? drawnDirection(fromSegments[0], fromSegments.at(-1), yToX) ?? drawnDirection(toSegments[0], toSegments.at(-1), yToX) ?? { x: 1, y: 0 };
-  const offsets = [];
-  for (let i = 0; i < count; i++) {
-    const distance = (i - (count - 1) / 2) * spacing;
-    offsets.push({ x: -dir.y * distance, y: dir.x * distance / yToX });
-  }
-  return offsets;
-}
-function scaleYOf(points, yToX) {
-  return points.map((p) => ({ x: p.x, y: p.y * yToX }));
-}
-function unscaleYOf(curves, yToX) {
-  for (const c of curves) {
-    c.y0 /= yToX;
-    c.cy0 /= yToX;
-    c.cy1 /= yToX;
-    c.y1 /= yToX;
-  }
-  return curves;
-}
-var SELF_LOOP_MIN_PX = 12;
-var SELF_LOOP_MAX_PX = 40;
-function selfLoopReach(segments, scale) {
-  let length = 0;
-  for (let i = 1; i < segments.length; i++) {
-    length += Math.hypot(
-      segments[i].x - segments[i - 1].x,
-      segments[i].y - segments[i - 1].y
-    );
-  }
-  const nodePx = length * scale;
-  const reachPx = Math.min(
-    SELF_LOOP_MAX_PX,
-    Math.max(SELF_LOOP_MIN_PX, nodePx / 2)
-  );
-  return reachPx / Math.max(scale, Number.EPSILON);
-}
-function selfLinkOf(edge) {
-  if (edge.from !== edge.to) {
-    return false;
-  }
-  return edge.fromStrand && edge.toStrand && edge.fromStrand !== edge.toStrand ? edge.fromStrand === "+" ? "end" : "start" : true;
-}
-function hairpinCurves(attach, reach, offsetX, offsetY) {
-  const { at, inward } = attach;
-  const dx = inward ? at.x - inward.x : 1;
-  const dy = inward ? at.y - inward.y : 0;
-  const len = Math.hypot(dx, dy) || 1;
-  const ux = dx / len;
-  const uy = dy / len;
-  const px = at.x + offsetX;
-  const py = at.y + offsetY;
-  const nearX = px + ux * reach / 3;
-  const nearY = py + uy * reach / 3;
-  const apexX = px + ux * reach;
-  const apexY = py + uy * reach;
-  const sideX = -uy * reach / 2;
-  const sideY = ux * reach / 2;
-  return [
-    {
-      x0: px,
-      y0: py,
-      cx0: nearX,
-      cy0: nearY,
-      cx1: apexX + sideX,
-      cy1: apexY + sideY,
-      x1: apexX,
-      y1: apexY
-    },
-    {
-      x0: apexX,
-      y0: apexY,
-      cx0: apexX - sideX,
-      cy0: apexY - sideY,
-      cx1: nearX,
-      cy1: nearY,
-      x1: px,
-      y1: py
-    }
-  ];
-}
-function computeEdgeCurves(fromSegments, toSegments, selfLink, offsetX, offsetY, axis, bypassed = [], maxBowIn) {
-  const scale = axis.scaleX;
-  const yToX = yToXOf(axis);
-  const maxBow = maxBowIn ?? (axis.pixelRows ? MAX_ROW_BOW_PX : void 0);
-  if (yToX !== 1) {
-    return unscaleYOf(
-      computeEdgeCurves(
-        scaleYOf(fromSegments, yToX),
-        scaleYOf(toSegments, yToX),
-        selfLink,
-        offsetX,
-        offsetY * yToX,
-        { scaleX: scale, scaleY: scale },
-        scaleYOf(bypassed, yToX),
-        // the cap is a y measure and the body works in x units, so it converts
-        // with everything else that crosses this boundary
-        maxBow === void 0 ? void 0 : maxBow * yToX
-      ),
-      yToX
-    );
-  }
-  if (typeof selfLink === "string") {
-    return hairpinCurves(
-      attachment(fromSegments, selfLink),
-      selfLoopReach(fromSegments, scale),
-      offsetX,
-      offsetY
-    );
-  }
-  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;
-  const p1y = fromEnd.y + offsetY;
-  const p2x = toStart.x + offsetX;
-  const p2y = toStart.y + offsetY;
-  if (selfLink) {
-    let segDirX = 1;
-    let segDirY = 0;
-    if (fromAttach.inward) {
-      const dx = fromEnd.x - fromAttach.inward.x;
-      const dy = fromEnd.y - fromAttach.inward.y;
-      const len = Math.hypot(dx, dy);
-      if (len > 0) {
-        segDirX = dx / len;
-        segDirY = dy / len;
-      }
-    }
-    const ext = selfLoopReach(fromSegments, scale);
-    const perpX = -segDirY;
-    const perpY = segDirX;
-    const midX = (fromEnd.x + toStart.x) / 2 + offsetX + perpX * ext;
-    const midY = (fromEnd.y + toStart.y) / 2 + offsetY + perpY * ext;
-    const cp1x = p1x + segDirX * ext;
-    const cp1y = p1y + segDirY * ext;
-    const cp2x = p2x - segDirX * ext;
-    const cp2y = p2y - segDirY * ext;
-    return [
-      {
-        x0: p1x,
-        y0: p1y,
-        cx0: cp1x,
-        cy0: cp1y,
-        cx1: cp1x + perpX * ext,
-        cy1: cp1y + perpY * ext,
-        x1: midX,
-        y1: midY
-      },
-      {
-        x0: midX,
-        y0: midY,
-        cx0: cp2x + perpX * ext,
-        cy0: cp2y + perpY * ext,
-        cx1: cp2x,
-        cy1: cp2y,
-        x1: p2x,
-        y1: p2y
-      }
-    ];
-  } else {
-    const fromPrev = fromAttach.inward ?? {
-      x: fromEnd.x - (toStart.x - fromEnd.x),
-      y: fromEnd.y - (toStart.y - fromEnd.y)
-    };
-    const toNext = toAttach.inward ?? {
-      x: toStart.x - (fromEnd.x - toStart.x),
-      y: toStart.y - (fromEnd.y - toStart.y)
-    };
-    const dist = Math.hypot(p2x - p1x, p2y - p1y);
-    const tangentProj = (prev, at, towardX, towardY) => {
-      const dx = at.x - prev.x;
-      const dy = at.y - prev.y;
-      const len = Math.hypot(dx, dy);
-      const along = len === 0 ? 0 : (towardX * dx + towardY * dy) / len;
-      return Math.max(
-        0,
-        Math.min(dist * TANGENT_SPAN_FACTOR, MAX_TANGENT, along * 0.5)
-      );
-    };
-    const towardToX = toStart.x - fromEnd.x;
-    const towardToY = toStart.y - fromEnd.y;
-    const [cx1, cy1] = projectLine(
-      fromPrev.x,
-      fromPrev.y,
-      fromEnd.x,
-      fromEnd.y,
-      tangentProj(fromPrev, fromEnd, towardToX, towardToY)
-    );
-    const [cx2, cy2] = projectLine(
-      toNext.x,
-      toNext.y,
-      toStart.x,
-      toStart.y,
-      tangentProj(toNext, toStart, -towardToX, -towardToY)
-    );
-    const bulge = bypassed.length ? bowAround(p1x, p1y, p2x, p2y, bypassed, maxBow) : 0;
-    const chordLen = dist === 0 ? 1 : dist;
-    const ux = (p2x - p1x) / chordLen;
-    const uy = (p2y - p1y) / chordLen;
-    const bulgeX = -uy * bulge;
-    const bulgeY = ux * bulge;
-    const spreadX = ux * Math.abs(bulge);
-    const spreadY = uy * Math.abs(bulge);
-    return [
-      {
-        x0: p1x,
-        y0: p1y,
-        cx0: cx1 + offsetX + bulgeX - spreadX,
-        cy0: cy1 + offsetY + bulgeY - spreadY,
-        cx1: cx2 + offsetX + bulgeX + spreadX,
-        cy1: cy2 + offsetY + bulgeY + spreadY,
-        x1: p2x,
-        y1: p2y
-      }
-    ];
-  }
-}
-
-// src/deletionEdges.ts
-var MIN_DELETION_BP2 = 1;
-function bypassedPoints(nodePositions, bypassed) {
-  return bypassed.flatMap((id) => nodePositions[id] ?? []);
-}
-function deletionArcCurves(nodePositions, deletion, axis) {
-  const from = nodePositions[deletion.from];
-  const to = nodePositions[deletion.to];
-  return from?.length && to?.length ? computeEdgeCurves(
-    from,
-    to,
-    deletion.from === deletion.to,
-    0,
-    0,
-    axis,
-    bypassedPoints(nodePositions, deletion.bypassed)
-  ) : void 0;
-}
-function backboneBySequence(graph) {
-  const bySequence = /* @__PURE__ */ new Map();
-  for (const node of graph.nodes) {
-    if (isBackbone(node)) {
-      const list = bySequence.get(node.stable.refName);
-      if (list) {
-        list.push(node);
-      } else {
-        bySequence.set(node.stable.refName, [node]);
-      }
-    }
-  }
-  for (const list of bySequence.values()) {
-    list.sort((a, b) => a.stable.start - b.stable.start);
-  }
-  return bySequence;
-}
-function bypassedNodes(nodes, start, end) {
-  const bypassed = [];
-  if (nodes) {
-    for (let i = firstNodeAtOrAfter(nodes, start); i < nodes.length; i++) {
-      const node = nodes[i];
-      if (node.stable.start >= end) {
-        break;
-      }
-      if (node.stable.start + node.length <= end) {
-        bypassed.push(node.id);
-      }
-    }
-  }
-  return bypassed;
-}
-function skipsBetween(edge, from, to, forwards) {
-  const { fromStrand, toStrand } = edge;
-  if (fromStrand === void 0 || toStrand === void 0) {
-    return true;
-  }
-  const leavesRight = fromStrand === (from.stable.strand ?? "+");
-  const arrivesLeft = toStrand === (to.stable.strand ?? "+");
-  return forwards ? leavesRight && arrivesLeft : !leavesRight && !arrivesLeft;
-}
-function deletionEdges(graph) {
-  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
-  const backbone = backboneBySequence(graph);
-  const found = [];
-  for (let edgeIndex = 0; edgeIndex < graph.edges.length; edgeIndex++) {
-    const edge = graph.edges[edgeIndex];
-    const from = byId.get(edge.from);
-    const to = byId.get(edge.to);
-    if (from !== void 0 && to !== void 0 && isBackbone(from) && isBackbone(to) && from.stable.refName === to.stable.refName) {
-      const forwards = from.stable.start <= to.stable.start;
-      const [left, right] = forwards ? [from, to] : [to, from];
-      const start = left.stable.start + left.length;
-      const end = right.stable.start;
-      const bp = end - start;
-      if (bp >= MIN_DELETION_BP2 && skipsBetween(edge, from, to, forwards)) {
-        const refName = left.stable.refName;
-        found.push({
-          edgeIndex,
-          from: edge.from,
-          to: edge.to,
-          refName,
-          start,
-          end,
-          bp,
-          bypassed: bypassedNodes(backbone.get(refName), start, end)
-        });
-      }
-    }
-  }
-  return found;
-}
-
-// src/util/edgeCurves.ts
-var cache = /* @__PURE__ */ new WeakMap();
-function baseEdgeCurves(nodePositions, graph, axis, deletions, version) {
-  const { scaleX, scaleY } = axis;
-  const cached2 = cache.get(nodePositions);
-  if (cached2?.graph === graph && cached2.scaleX === scaleX && cached2.scaleY === scaleY && cached2.deletions === deletions && cached2.version === version) {
-    return cached2.curves;
-  }
-  const curves = /* @__PURE__ */ new Map();
-  for (let ei = 0; ei < graph.edges.length; ei++) {
-    const edge = graph.edges[ei];
-    const from = nodePositions[edge.from];
-    const to = nodePositions[edge.to];
-    if (from?.length && to?.length) {
-      const bypassed = deletions?.get(ei);
-      curves.set(
-        ei,
-        computeEdgeCurves(
-          from,
-          to,
-          selfLinkOf(edge),
-          0,
-          0,
-          axis,
-          bypassed ? bypassedPoints(nodePositions, bypassed) : []
-        )
-      );
-    }
-  }
-  cache.set(nodePositions, {
-    graph,
-    scaleX,
-    scaleY,
-    deletions,
-    version,
-    curves
-  });
-  return curves;
-}
-
-// src/renderer/GeometryBuilder.ts
-var EDGE_DEFAULT_COLOR = packAbgr2(119, 119, 119, 217);
-var EDGE_PATH_FALLBACK_COLOR = packAbgr2(136, 136, 136, 217);
-var EDGE_DELETION_COLOR = packAbgr2(24, 24, 28, 240);
-var DELETION_THICKNESS_FACTOR = 2.2;
-var LIFT_BACKDROP_COLOR = packAbgr2(160, 160, 160, 255);
-var FADED_ALPHA = 0.18;
-var DELETION_DASH_PX = 11;
-var MIN_PATH_STRIPE_PX = 1.2;
-var MIN_WALK_LANE_PX = 4;
-var MIN_SCALE_FOR_OFFSET = 1e-6;
-var ARROW_LENGTH_BASE_PX = 7;
-var ARROW_LENGTH_PER_EDGE_PX = 3;
-var ARROW_HALF_WIDTH_BASE_PX = 3;
-var ARROW_HALF_WIDTH_PER_EDGE_PX = 1.5;
-var MIN_ARROW_FIT = 0.5;
-var MIN_ARROW_SCALE = 0.45;
-var ARROW_CURVE_STEPS = 12;
-var ABUTTING_PX = 1e-6;
-var walkX = new Float64Array(64);
-var walkY = new Float64Array(64);
-var walkPx = new Float64Array(64);
-function backFromEnd(curves, scale, yToX, untilPx) {
-  const most = curves.length * ARROW_CURVE_STEPS + 1;
-  if (walkX.length < most) {
-    walkX = new Float64Array(most);
-    walkY = new Float64Array(most);
-    walkPx = new Float64Array(most);
-  }
-  const last = curves[curves.length - 1];
-  walkX[0] = last.x1;
-  walkY[0] = last.y1;
-  walkPx[0] = 0;
-  let n = 1;
-  let px = 0;
-  for (let ci = curves.length - 1; ci >= 0 && px < untilPx; ci--) {
-    const c = curves[ci];
-    for (let k = 1; k <= ARROW_CURVE_STEPS && px < untilPx; k++) {
-      const t = 1 - (k / ARROW_CURVE_STEPS) ** 2;
-      const u = 1 - t;
-      const a = u * u * u;
-      const b = 3 * u * u * t;
-      const d = 3 * u * t * t;
-      const e = t * t * t;
-      const x = a * c.x0 + b * c.cx0 + d * c.cx1 + e * c.x1;
-      const y = a * c.y0 + b * c.cy0 + d * c.cy1 + e * c.y1;
-      px += Math.hypot(x - walkX[n - 1], (y - walkY[n - 1]) * yToX) * scale;
-      walkX[n] = x;
-      walkY[n] = y;
-      walkPx[n] = px;
-      n++;
-    }
-  }
-  return n;
-}
-function walkPointAt(n, px) {
-  let i = 1;
-  while (i < n - 1 && walkPx[i] < px) {
-    i++;
-  }
-  const from = walkPx[i - 1];
-  const to = walkPx[i];
-  const f = to > from ? Math.min(1, Math.max(0, (px - from) / (to - from))) : 0;
-  return {
-    x: walkX[i - 1] + (walkX[i] - walkX[i - 1]) * f,
-    y: walkY[i - 1] + (walkY[i] - walkY[i - 1]) * f
-  };
-}
-function arrowheadFor({
-  curves,
-  edgeHalfWidth,
-  nodeHalfWidth,
-  scale,
-  yToX,
-  color,
-  fromSegments,
-  toSegments
-}) {
-  const length = ARROW_LENGTH_BASE_PX + ARROW_LENGTH_PER_EDGE_PX * edgeHalfWidth;
-  const n = backFromEnd(curves, scale, yToX, nodeHalfWidth + length);
-  const lengthPx = walkPx[n - 1];
-  const inset = Math.min(nodeHalfWidth, lengthPx);
-  const room = lengthPx < ABUTTING_PX ? polylinePx(fromSegments, scale, yToX) : lengthPx - inset;
-  const fit = Math.min(1, room / length);
-  if (fit < MIN_ARROW_FIT) {
-    return void 0;
-  }
-  const tip = walkPointAt(n, inset);
-  const base = walkPointAt(n, inset + length * fit);
-  const dx = tip.x - base.x;
-  const dy = (tip.y - base.y) * yToX;
-  const last = curves[curves.length - 1];
-  return {
-    x: tip.x,
-    y: tip.y,
-    angle: Math.hypot(dx, dy) > 0 ? Math.atan2(dy, dx) : endTangent(last, yToX, intoDirection(last, toSegments)),
-    length: length * fit,
-    halfWidth: (ARROW_HALF_WIDTH_BASE_PX + ARROW_HALF_WIDTH_PER_EDGE_PX * edgeHalfWidth) * fit,
-    color
-  };
-}
-function polylinePx(segments, scale, yToX) {
-  let length = 0;
-  for (let i = 1; i < segments.length; i++) {
-    length += Math.hypot(
-      segments[i].x - segments[i - 1].x,
-      (segments[i].y - segments[i - 1].y) * yToX
-    );
-  }
-  return length * scale;
-}
-function intoDirection(last, toSegments) {
-  if (toSegments.length < 2) {
-    return void 0;
-  }
-  const first = toSegments[0];
-  const final = toSegments[toSegments.length - 1];
-  const atStart = Math.hypot(last.x1 - first.x, last.y1 - first.y) <= Math.hypot(last.x1 - final.x, last.y1 - final.y);
-  return atStart ? { from: first, to: toSegments[1] } : { from: final, to: toSegments[toSegments.length - 2] };
-}
-function pointNormalsOf(rawPoints, yToX = 1) {
-  const points = yToX === 1 ? rawPoints : rawPoints.map((p) => ({ x: p.x, y: p.y * yToX }));
-  const pointNormals = [];
-  for (let i = 0; i < points.length; i++) {
-    let nx = 0;
-    let ny = 0;
-    if (i === 0) {
-      const dx = points[1].x - points[0].x;
-      const dy = points[1].y - points[0].y;
-      const len = Math.hypot(dx, dy);
-      if (len > 0) {
-        nx = -dy / len;
-        ny = dx / len;
-      }
-    } else if (i === points.length - 1) {
-      const dx = points[i].x - points[i - 1].x;
-      const dy = points[i].y - points[i - 1].y;
-      const len = Math.hypot(dx, dy);
-      if (len > 0) {
-        nx = -dy / len;
-        ny = dx / len;
-      }
-    } else {
-      const dx1 = points[i].x - points[i - 1].x;
-      const dy1 = points[i].y - points[i - 1].y;
-      const len1 = Math.hypot(dx1, dy1);
-      const dx2 = points[i + 1].x - points[i].x;
-      const dy2 = points[i + 1].y - points[i].y;
-      const len2 = Math.hypot(dx2, dy2);
-      if (len1 > 0 && len2 > 0) {
-        const nx1 = -dy1 / len1;
-        const ny1 = dx1 / len1;
-        const nx2 = -dy2 / len2;
-        const ny2 = dx2 / len2;
-        nx = (nx1 + nx2) / 2;
-        ny = (ny1 + ny2) / 2;
-        const dot = nx1 * nx + ny1 * ny;
-        if (dot > 0.1) {
-          nx /= dot;
-          ny /= dot;
-        }
-      } else if (len1 > 0) {
-        nx = -dy1 / len1;
-        ny = dx1 / len1;
-      } else if (len2 > 0) {
-        nx = -dy2 / len2;
-        ny = dx2 / len2;
-      }
-    }
-    pointNormals.push({ nx, ny });
-  }
-  return pointNormals;
-}
-function offsetPolyline(points, normals, distance, yToX = 1) {
-  return points.map((p, i) => ({
-    x: p.x + normals[i].nx * distance,
-    y: p.y + normals[i].ny * distance / yToX
-  }));
-}
-function packNorm(r, g, b, a) {
-  return packAbgr2(
-    Math.round(r * 255),
-    Math.round(g * 255),
-    Math.round(b * 255),
-    Math.round(a * 255)
-  );
-}
-function hslToRgb(h, s, l) {
-  const c = (1 - Math.abs(2 * l - 1)) * s;
-  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
-  const m = l - c / 2;
-  let r = 0;
-  let g = 0;
-  let b = 0;
-  if (h < 60) {
-    r = c;
-    g = x;
-  } else if (h < 120) {
-    r = x;
-    g = c;
-  } else if (h < 180) {
-    g = c;
-    b = x;
-  } else if (h < 240) {
-    g = x;
-    b = c;
-  } else if (h < 300) {
-    r = x;
-    b = c;
-  } else {
-    r = c;
-    b = x;
-  }
-  return [r + m, g + m, b + m];
-}
-var DEPTH_GRADIENT = [
-  [68, 1, 84],
-  [59, 82, 139],
-  [33, 145, 140],
-  [94, 201, 98],
-  [253, 231, 37]
-];
-var STABLE_RANK_GRADIENT = [
-  [237, 137, 44],
-  [158, 42, 122]
-];
-var NODE_LENGTH_GRADIENT = [
-  [220, 50, 50],
-  [50, 120, 220]
-];
-function sampleGradient(stops, t) {
-  const pos = Math.max(0, Math.min(1, t)) * (stops.length - 1);
-  const i = Math.min(stops.length - 2, Math.floor(pos));
-  const f = pos - i;
-  const a = stops[i];
-  const b = stops[i + 1];
-  return packAbgr2(
-    Math.round(a[0] + (b[0] - a[0]) * f),
-    Math.round(a[1] + (b[1] - a[1]) * f),
-    Math.round(a[2] + (b[2] - a[2]) * f),
-    255
-  );
-}
-function hashColor(str, alpha) {
-  const [r, g, b] = hslToRgb(nameHue(str), PATH_SATURATION, PATH_LIGHTNESS);
-  return packNorm(r, g, b, alpha);
-}
-var REFERENCE_RAMP_MAX_HUE = 300;
-var REFERENCE_RAMP_SATURATION = 0.7;
-var REFERENCE_RAMP_LIGHTNESS = 0.5;
-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) {
-    return {
-      start: domain.start,
-      span: domain.end - domain.start,
-      midpoints
-    };
-  }
-  let min = Infinity;
-  let max = -Infinity;
-  for (const mid of midpoints.values()) {
-    min = Math.min(min, mid);
-    max = Math.max(max, mid);
-  }
-  return {
-    start: min === Infinity ? 0 : min,
-    span: max > min ? max - min : 1,
-    midpoints
-  };
-}
-function computeColorSchemeRange(graph) {
-  let minDepth = Infinity;
-  let maxDepth = -Infinity;
-  let minLength = Infinity;
-  let maxLength = -Infinity;
-  let maxRank = 0;
-  for (const n of graph.nodes) {
-    if (n.stable !== void 0 && n.stable.rank > maxRank) {
-      maxRank = n.stable.rank;
-    }
-    if (n.depth < minDepth) {
-      minDepth = n.depth;
-    }
-    if (n.depth > maxDepth) {
-      maxDepth = n.depth;
-    }
-    if (n.length < minLength) {
-      minLength = n.length;
-    }
-    if (n.length > maxLength) {
-      maxLength = n.length;
-    }
-  }
-  return {
-    minDepth,
-    maxDepth,
-    minLength,
-    maxLength,
-    maxRank,
-    nodeCount: graph.nodes.length
-  };
-}
-function getNodeColor(node, nodeIndex, colorScheme, range) {
-  switch (colorScheme) {
-    case "random":
-      return hashColor(node.id, 1);
-    case "depth":
-      return sampleGradient(
-        DEPTH_GRADIENT,
-        range.maxDepth > range.minDepth ? (node.depth - range.minDepth) / (range.maxDepth - range.minDepth) : 0.5
-      );
-    case "node-length":
-      return sampleGradient(
-        NODE_LENGTH_GRADIENT,
-        range.maxLength > range.minLength ? (node.length - range.minLength) / (range.maxLength - range.minLength) : 0.5
-      );
-    // rGFA states the backbone rather than leaving it to be inferred: rank 0 is
-    // the reference, higher ranks are the sequence that diverges from it. A
-    // graph with no SR tags draws every node as unranked.
-    case "stable-rank":
-      return node.stable === void 0 ? packAbgr2(160, 160, 160, 255) : node.stable.rank === 0 ? packAbgr2(52, 152, 219, 255) : sampleGradient(
-        STABLE_RANK_GRADIENT,
-        range.maxRank > 1 ? (node.stable.rank - 1) / (range.maxRank - 1) : 0
-      );
-    // Position on the reference, the one quantity both panels of a
-    // graph-over-linear figure can state. A node with no reference position at
-    // all — nothing anchored, or an allele whose flanks fell outside the cut —
-    // is grey rather than a hue it has not earned.
-    case "reference-position": {
-      const ramp = range.referenceRamp;
-      const mid = ramp?.midpoints.get(node.id);
-      if (ramp === void 0 || mid === void 0) {
-        return packAbgr2(160, 160, 160, 255);
-      }
-      if (node.stable !== void 0 && node.stable.rank > 0) {
-        return REFERENCE_RAMP_ALT_COLOR;
-      }
-      const frac = Math.max(0, Math.min(1, (mid - ramp.start) / ramp.span));
-      const [r, g, b] = hslToRgb(
-        frac * REFERENCE_RAMP_MAX_HUE,
-        REFERENCE_RAMP_SATURATION,
-        REFERENCE_RAMP_LIGHTNESS
-      );
-      return packNorm(r, g, b, 1);
-    }
-    case "grey":
-      return packAbgr2(160, 160, 160, 255);
-    case "rainbow": {
-      const hue = range.nodeCount > 1 ? nodeIndex / range.nodeCount * 360 : 0;
-      const [r, g, b] = hslToRgb(hue, 0.75, 0.5);
-      return packNorm(r, g, b, 1);
-    }
-    default:
-      return packAbgr2(52, 152, 219, 255);
-  }
-}
-function endTangent(c, yToX = 1, into) {
-  const candidates = [
-    [c.cx1, c.cy1],
-    [c.cx0, c.cy0],
-    [c.x0, c.y0]
-  ];
-  for (const [x, y] of candidates) {
-    const dx = c.x1 - x;
-    const dy = (c.y1 - y) * yToX;
-    if (Math.hypot(dx, dy) > 0) {
-      return Math.atan2(dy, dx);
-    }
-  }
-  return into ? Math.atan2((into.to.y - into.from.y) * yToX, into.to.x - into.from.x) : 0;
-}
-function isPolylineInBounds(segments, bounds) {
-  let hit = false;
-  for (let i = 0; i < segments.length - 1 && !hit; i++) {
-    const a = segments[i];
-    const b = segments[i + 1];
-    hit = Math.max(a.x, b.x) >= bounds.minX && Math.min(a.x, b.x) <= bounds.maxX && Math.max(a.y, b.y) >= bounds.minY && Math.min(a.y, b.y) <= bounds.maxY;
-  }
-  return hit;
-}
-function isBezierInBounds(curves, bounds) {
-  for (const c of curves) {
-    const cMinX = Math.min(c.x0, c.cx0, c.cx1, c.x1);
-    const cMaxX = Math.max(c.x0, c.cx0, c.cx1, c.x1);
-    const cMinY = Math.min(c.y0, c.cy0, c.cy1, c.y1);
-    const cMaxY = Math.max(c.y0, c.cy0, c.cy1, c.y1);
-    if (cMaxX >= bounds.minX && cMinX <= bounds.maxX && cMaxY >= bounds.minY && cMinY <= bounds.maxY) {
-      return true;
-    }
-  }
-  return false;
-}
-var paletteCache = /* @__PURE__ */ new WeakMap();
-function pathPaletteOf(graph) {
-  let palette = paletteCache.get(graph);
-  if (!palette) {
-    const pathColorByIndex = [];
-    const pathIndexByName = /* @__PURE__ */ new Map();
-    const paths = graph.paths ?? [];
-    for (let i = 0; i < paths.length; i++) {
-      const [r, g, b] = hslToRgb(
-        pathHueAt(i, paths.length),
-        PATH_SATURATION,
-        PATH_LIGHTNESS
-      );
-      pathColorByIndex.push(packNorm(r, g, b, 0.85));
-      if (!pathIndexByName.has(paths[i].name)) {
-        pathIndexByName.set(paths[i].name, i);
-      }
-    }
-    palette = { pathColorByIndex, pathIndexByName };
-    paletteCache.set(graph, palette);
-  }
-  return palette;
-}
-var slotsCache = /* @__PURE__ */ new WeakMap();
-var NO_SLOTS = /* @__PURE__ */ new Map();
-function pathSlotsOf(graph) {
-  let slots = slotsCache.get(graph);
-  if (!slots) {
-    slots = /* @__PURE__ */ new Map();
-    for (const [pathIdx, path] of (graph.paths ?? []).entries()) {
-      for (const nodeId of new Set(path.nodeIds)) {
-        const visits = slots.get(nodeId);
-        if (visits) {
-          visits.push(pathIdx);
-        } else {
-          slots.set(nodeId, [pathIdx]);
-        }
-      }
-    }
-    slotsCache.set(graph, slots);
-  }
-  return slots;
-}
-function buildGeometry(options) {
-  const {
-    nodePositions,
-    graph,
-    nodeById,
-    colorScheme,
-    contigThickness,
-    connectorThickness,
-    drawPaths,
-    nodeWidth: nodeWidth2 = "uniform",
-    highlight,
-    axis,
-    linearLayout,
-    viewportBounds,
-    referenceRamp,
-    deletions,
-    hiddenEdges,
-    version = 0
-  } = options;
-  const depthNorm = nodeWidth2 === "depth" ? meanDepth(graph) : 0;
-  const scale = axis.scaleX;
-  const yToX = yToXOf(axis);
-  const sharedCurves = baseEdgeCurves(
-    nodePositions,
-    graph,
-    axis,
-    deletions,
-    version
-  );
-  const nodeStrokes = [];
-  const nodeStrokeRuns = /* @__PURE__ */ new Map();
-  const arrows = [];
-  const arrowRuns = /* @__PURE__ */ new Map();
-  const edgeCurves = [];
-  const edgeCurveRuns = /* @__PURE__ */ new Map();
-  const colorRange = { ...computeColorSchemeRange(graph), referenceRamp };
-  const nodeIndexMap = /* @__PURE__ */ new Map();
-  if (colorScheme === "rainbow") {
-    for (let i = 0; i < graph.nodes.length; i++) {
-      nodeIndexMap.set(graph.nodes[i].id, i);
-    }
-  }
-  const pathCount = graph.paths?.length ?? 0;
-  const { pathColorByIndex, pathIndexByName } = pathPaletteOf(graph);
-  const pathColorByName = (name) => pathColorByIndex[pathIndexByName.get(name) ?? -1] ?? EDGE_PATH_FALLBACK_COLOR;
-  const nodePathSlots = drawPaths && pathCount > 1 ? pathSlotsOf(graph) : NO_SLOTS;
-  const showArrows = scale > (linearLayout ? 1 : MIN_ARROW_SCALE);
-  for (let ei = 0; ei < graph.edges.length; ei++) {
-    const edge = graph.edges[ei];
-    const fromSegments = nodePositions[edge.from];
-    const toSegments = nodePositions[edge.to];
-    const baseCurves = sharedCurves.get(ei);
-    if (!fromSegments?.length || !toSegments?.length || !baseCurves || hiddenEdges?.has(ei)) {
-      continue;
-    }
-    const numPaths = edge.pathIds?.length ?? 0;
-    const bypassed = deletions?.get(ei);
-    const isDeletion = bypassed !== void 0;
-    const onWalk = highlight?.edgeIndexes.has(ei) ?? false;
-    const edgeThickness = connectorThickness / 2 * (isDeletion ? DELETION_THICKNESS_FACTOR : 1);
-    const ribbons = drawPaths && numPaths > 0;
-    const plainEdgeColor = isDeletion ? EDGE_DELETION_COLOR : EDGE_DEFAULT_COLOR;
-    const edgeColor = !highlight || onWalk ? plainEdgeColor : fadeAbgr(plainEdgeColor, FADED_ALPHA);
-    const toNode = nodeById.get(edge.to);
-    const intoHalfWidth = (toNode ? nodeWidthPx(toNode, contigThickness, nodeWidth2, depthNorm) : contigThickness) / 2;
-    const buildSingleEdge = (offsetX, offsetY, color, arrowColor) => {
-      const curves = offsetX === 0 && offsetY === 0 ? baseCurves : translateCurves(baseCurves, offsetX, offsetY);
-      if (viewportBounds && !isBezierInBounds(curves, viewportBounds)) {
-        return;
-      }
-      if (isDeletion) {
-        for (const dash of dashCurves(curves, DELETION_DASH_PX / scale)) {
-          edgeCurves.push({ curves: dash, thickness: edgeThickness, color });
-        }
-      } else {
-        edgeCurves.push({ curves, thickness: edgeThickness, color });
-      }
-      const head = showArrows && arrowColor !== void 0 ? arrowheadFor({
-        curves,
-        edgeHalfWidth: edgeThickness,
-        nodeHalfWidth: intoHalfWidth,
-        scale,
-        yToX,
-        color: arrowColor,
-        fromSegments,
-        toSegments
-      }) : void 0;
-      if (head) {
-        arrows.push(head);
-      }
-    };
-    const edgeCurveStart = edgeCurves.length;
-    const arrowStart = arrows.length;
-    const laneWalks = highlight && onWalk && !ribbons ? highlight.walks : void 0;
-    if (laneWalks) {
-      const fromNode = nodeById.get(edge.from);
-      const width = fromNode ? nodeWidthPx(fromNode, contigThickness, nodeWidth2, depthNorm) : contigThickness;
-      const laneWidth = Math.max(width / laneWalks.length, MIN_WALK_LANE_PX);
-      const normals = pointNormalsOf(fromSegments, yToX);
-      const { nx, ny } = (edge.fromStrand === "-" ? normals[0] : normals.at(-1)) ?? {
-        nx: 0,
-        ny: 0
-      };
-      const worldPerScreenPx = 1 / Math.max(scale, MIN_SCALE_FOR_OFFSET);
-      laneWalks.forEach((walk, lane) => {
-        if (!walk.edgeIndexes.has(ei)) {
-          return;
-        }
-        const offset = (lane - (laneWalks.length - 1) / 2) * laneWidth * worldPerScreenPx;
-        const curves = offset === 0 ? baseCurves : translateCurves(baseCurves, nx * offset, ny * offset / yToX);
-        if (viewportBounds && !isBezierInBounds(curves, viewportBounds)) {
-          return;
-        }
-        edgeCurves.push({
-          curves,
-          thickness: laneWidth / 2,
-          color: walk.colors.get(edge.from) ?? walk.colors.get(edge.to) ?? plainEdgeColor
-        });
-      });
-    } else if (!ribbons) {
-      buildSingleEdge(0, 0, edgeColor, edgeColor);
-    } else {
-      const offsets = pathRibbonOffsets(
-        fromSegments,
-        toSegments,
-        numPaths,
-        axis
-      );
-      const arrowRibbon = Math.floor((numPaths - 1) / 2);
-      for (let pathIdx = 0; pathIdx < numPaths; pathIdx++) {
-        const offset = offsets[pathIdx];
-        const ribbonColor = pathColorByName(edge.pathIds[pathIdx]);
-        buildSingleEdge(
-          offset.x,
-          offset.y,
-          highlight && !highlight.names.has(edge.pathIds[pathIdx]) ? fadeAbgr(ribbonColor, FADED_ALPHA) : ribbonColor,
-          pathIdx === arrowRibbon ? edgeColor : void 0
-        );
-      }
-    }
-    const edgeCurveCount = edgeCurves.length - edgeCurveStart;
-    if (edgeCurveCount > 0) {
-      edgeCurveRuns.set(ei, { start: edgeCurveStart, count: edgeCurveCount });
-    }
-    const arrowCount = arrows.length - arrowStart;
-    if (arrowCount > 0) {
-      arrowRuns.set(ei, { start: arrowStart, count: arrowCount });
-    }
-  }
-  for (const [nodeId, segments] of Object.entries(nodePositions)) {
-    const node = nodeById.get(nodeId);
-    if (!node) {
-      continue;
-    }
-    if (viewportBounds && !isPolylineInBounds(segments, viewportBounds)) {
-      continue;
-    }
-    const faded = highlight !== void 0 && !highlight.nodeIds.has(nodeId);
-    const own = faded ? LIFT_BACKDROP_COLOR : getNodeColor(
-      node,
-      nodeIndexMap.get(nodeId) ?? 0,
-      colorScheme,
-      colorRange
-    );
-    const color = faded ? fadeAbgr(own, FADED_ALPHA) : own;
-    const width = nodeWidthPx(node, contigThickness, nodeWidth2, depthNorm);
-    const nodeThickness = width / 2;
-    const start = nodeStrokes.length;
-    const slots = nodePathSlots.get(nodeId);
-    const slotWidth = width / pathCount;
-    const drawable = segments.length >= 2;
-    const lanes = highlight && !faded && !slots?.length ? highlight.walks : void 0;
-    if (drawable && lanes) {
-      const laneWidth = Math.max(width / lanes.length, MIN_WALK_LANE_PX);
-      const normals = pointNormalsOf(segments, yToX);
-      const worldPerScreenPx = 1 / Math.max(scale, MIN_SCALE_FOR_OFFSET);
-      lanes.forEach((walk, lane) => {
-        const laneColor = walk.colors.get(nodeId);
-        if (laneColor === void 0) {
-          return;
-        }
-        const offset = (lane - (lanes.length - 1) / 2) * laneWidth * worldPerScreenPx;
-        nodeStrokes.push({
-          points: lanes.length === 1 ? segments : offsetPolyline(segments, normals, offset, yToX),
-          thickness: laneWidth / 2,
-          color: laneColor
-        });
-      });
-    } else if (drawable && slots?.length && slotWidth >= MIN_PATH_STRIPE_PX) {
-      const normals = pointNormalsOf(segments, yToX);
-      const worldPerScreenPx = 1 / Math.max(scale, MIN_SCALE_FOR_OFFSET);
-      for (const slot of slots) {
-        const offset = (slot - (pathCount - 1) / 2) * slotWidth * worldPerScreenPx;
-        const stripe = pathColorByIndex[slot] ?? EDGE_PATH_FALLBACK_COLOR;
-        nodeStrokes.push({
-          points: offsetPolyline(segments, normals, offset, yToX),
-          thickness: slotWidth / 2,
-          // a node off the lifted walk fades whichever way it is painted
-          color: faded ? fadeAbgr(stripe, FADED_ALPHA) : stripe
-        });
-      }
-    } else if (drawable) {
-      nodeStrokes.push({ points: segments, thickness: nodeThickness, color });
-    }
-    const count = nodeStrokes.length - start;
-    if (count > 0) {
-      nodeStrokeRuns.set(nodeId, { start, count });
-    }
-  }
-  return {
-    nodeStrokes,
-    nodeStrokeRuns,
-    arrows,
-    arrowRuns,
-    edgeCurves,
-    edgeCurveRuns
-  };
-}
-
-// src/renderer/Canvas2DRenderer.ts
 import {
-  abgrToCssRgba,
-  normalizedRgbToCssRgba
-} from "@jbrowse/core/util/colorBits";
-import { syncCanvasSize } from "@jbrowse/render-core/canvas2dUtils";
-import { Canvas2DRenderingBackendBase } from "@jbrowse/render-core/renderingBackendBase";
-var Canvas2DRenderer = class extends Canvas2DRenderingBackendBase {
-  constructor() {
-    super(...arguments);
-    this.transform = null;
-    this.batch = null;
-    this.nodeHighlights = /* @__PURE__ */ new Map();
-    this.highlightedEdge = null;
-    this.highlightFactor = 1;
-  }
-  // render-core's, not a local `width * devicePixelRatio`: it clamps the
-  // backing store at MAX_CANVAS_DIM_PX, reads the ratio through `getDpr()` so
-  // this agrees with the transform the model builds, and writes the css size
-  // independently of the backing size.
-  resize(width, height) {
-    syncCanvasSize(this.ctx.canvas, width, height);
-  }
-  uploadGeometry(batch) {
-    this.batch = batch;
-    this.highlightedEdge = null;
-  }
-  setNodeHighlights(factors) {
-    this.nodeHighlights = factors;
-  }
-  setEdgeHighlight(edgeIndex, factor) {
-    this.highlightedEdge = edgeIndex;
-    this.highlightFactor = factor;
-  }
-  updateTransform(transform) {
-    this.transform = transform;
-  }
-  render(clearColor) {
-    const t = this.transform;
-    if (!t) {
-      return;
-    }
-    const ctx = this.ctx;
-    const { width, height } = ctx.canvas;
-    ctx.fillStyle = normalizedRgbToCssRgba(
-      [clearColor[0], clearColor[1], clearColor[2]],
-      clearColor[3]
-    );
-    ctx.fillRect(0, 0, width, height);
-    const batch = this.batch;
-    if (!batch) {
-      return;
-    }
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
-    this.renderEdges(batch);
-    this.renderNodes(batch);
-    this.renderArrows(batch);
-  }
-  renderEdges(batch) {
-    const t = this.transform;
-    const ctx = this.ctx;
-    const hl = this.highlightedEdge === null ? void 0 : batch.edgeCurveRuns.get(this.highlightedEdge);
-    for (const { color, items } of groupByPaint(batch.edgeCurves, (e, i) => ({
-      color: inRun(hl, i) ? brightenAbgr(e.color, this.highlightFactor) : e.color,
-      weight: e.thickness,
-      last: inRun(hl, i)
-    }))) {
-      ctx.strokeStyle = abgrToCssRgba(color);
-      ctx.lineWidth = items[0].thickness * 2 * t.dpr;
-      ctx.beginPath();
-      for (const e of items) {
-        const first = e.curves[0];
-        ctx.moveTo(
-          first.x0 * t.scaleX + t.translateX,
-          first.y0 * t.scaleY + t.translateY
-        );
-        for (const c of e.curves) {
-          ctx.bezierCurveTo(
-            c.cx0 * t.scaleX + t.translateX,
-            c.cy0 * t.scaleY + t.translateY,
-            c.cx1 * t.scaleX + t.translateX,
-            c.cy1 * t.scaleY + t.translateY,
-            c.x1 * t.scaleX + t.translateX,
-            c.y1 * t.scaleY + t.translateY
-          );
-        }
-      }
-      ctx.stroke();
-    }
-  }
-  renderNodes(batch) {
-    const t = this.transform;
-    const ctx = this.ctx;
-    const lifted = /* @__PURE__ */ new Map();
-    for (const [nodeId, factor] of this.nodeHighlights) {
-      const run = batch.nodeStrokeRuns.get(nodeId);
-      if (run) {
-        for (let i = run.start; i < run.start + run.count; i++) {
-          lifted.set(i, factor);
-        }
-      }
-    }
-    for (const { color, items } of groupByPaint(batch.nodeStrokes, (s, i) => {
-      const factor = lifted.get(i);
-      return {
-        color: factor === void 0 ? s.color : brightenAbgr(s.color, factor),
-        weight: s.thickness,
-        last: factor !== void 0
-      };
-    })) {
-      ctx.strokeStyle = abgrToCssRgba(color);
-      ctx.lineWidth = items[0].thickness * 2 * t.dpr;
-      ctx.beginPath();
-      for (const s of items) {
-        const p0 = s.points[0];
-        ctx.moveTo(
-          p0.x * t.scaleX + t.translateX,
-          p0.y * t.scaleY + t.translateY
-        );
-        for (let i = 1, l = s.points.length; i < l; i++) {
-          const p = s.points[i];
-          ctx.lineTo(
-            p.x * t.scaleX + t.translateX,
-            p.y * t.scaleY + t.translateY
-          );
-        }
-      }
-      ctx.stroke();
-    }
-  }
-  renderArrows(batch) {
-    const t = this.transform;
-    const ctx = this.ctx;
-    const hl = this.highlightedEdge === null ? void 0 : batch.arrowRuns.get(this.highlightedEdge);
-    for (const { color, items } of groupByPaint(batch.arrows, (a, i) => ({
-      color: inRun(hl, i) ? brightenAbgr(a.color, this.highlightFactor) : a.color,
-      weight: 0,
-      last: inRun(hl, i)
-    }))) {
-      ctx.fillStyle = abgrToCssRgba(color);
-      ctx.beginPath();
-      for (const a of items) {
-        const [tip, left, notch, right] = arrowheadOutline(a, t);
-        ctx.moveTo(tip.x, tip.y);
-        ctx.lineTo(left.x, left.y);
-        ctx.lineTo(notch.x, notch.y);
-        ctx.lineTo(right.x, right.y);
-        ctx.closePath();
-      }
-      ctx.fill();
-    }
-  }
-  dispose() {
-    super.dispose();
-    this.batch = null;
-    this.nodeHighlights = /* @__PURE__ */ new Map();
-    this.highlightedEdge = null;
-  }
-};
-var ARROW_NOTCH = 0.25;
-function arrowheadOutline(a, t) {
-  const ux = Math.cos(a.angle);
-  const uy = Math.sin(a.angle);
-  const tipX = a.x * t.scaleX + t.translateX;
-  const tipY = a.y * t.scaleY + t.translateY;
-  const length = a.length * t.dpr;
-  const halfWidth = a.halfWidth * t.dpr;
-  const backX = tipX - ux * length;
-  const backY = tipY - uy * length;
-  const notchBack = length * (1 - ARROW_NOTCH);
-  return [
-    { x: tipX, y: tipY },
-    { x: backX - uy * halfWidth, y: backY + ux * halfWidth },
-    { x: tipX - ux * notchBack, y: tipY - uy * notchBack },
-    { x: backX + uy * halfWidth, y: backY - ux * halfWidth }
-  ];
-}
-function inRun(run, i) {
-  return run !== void 0 && i >= run.start && i < run.start + run.count;
-}
-function groupByPaint(items, paintOf) {
-  const groups = /* @__PURE__ */ new Map();
-  const deferred = /* @__PURE__ */ new Map();
-  for (let i = 0, l = items.length; i < l; i++) {
-    const item = items[i];
-    const { color, weight, last } = paintOf(item, i);
-    const into = last ? deferred : groups;
-    const key = `${color}:${weight}`;
-    const group = into.get(key);
-    if (group) {
-      group.items.push(item);
-    } else {
-      into.set(key, { color, items: [item] });
-    }
-  }
-  return [...groups.values(), ...deferred.values()];
-}
+  BUBBLE_SPREADS,
+  COLOR_SCHEMES,
+  Canvas2DRenderer,
+  FACET_GAP_PX,
+  FACET_PAD_PX,
+  FACET_TITLE_PX,
+  FADED_ALPHA,
+  FIT_PADDING,
+  FORCE_LAYOUT_LABEL,
+  LABEL_CHAR_PX,
+  LABEL_PAD,
+  LABEL_PX,
+  LAYOUT_MODES,
+  LIFT_BACKDROP_COLOR,
+  NODE_WIDTHS,
+  REFERENCE_RAMP_MAX_HUE,
+  ROW_HEIGHT_PX,
+  WALK_FIELDS,
+  WALK_SCHEMES,
+  WELL_KNOWN_SAMPLES,
+  assemblyWalk,
+  axisScaleOf,
+  backboneAssembly,
+  baseEdgeCurves,
+  buildGeometry,
+  clampZoom,
+  computeColorSchemeRange,
+  computeReferenceRamp,
+  contains,
+  curveBounds,
+  cutWindowGFA,
+  deletionEdges,
+  drawingBounds,
+  encodingStops,
+  encodingSwatchCss,
+  engineKey,
+  engineRequest,
+  facetCells,
+  facetGrid,
+  facetLifts,
+  fadeAbgr,
+  featuresOnBackbone,
+  figureSvg,
+  firstNodeAtOrAfter,
+  fitTransform,
+  forceLayout,
+  formatBp,
+  getNodeColor,
+  graphBackbone,
+  haplotypeWanted,
+  isBackbone,
+  layoutExtent,
+  layoutModeByValue,
+  loadBandage,
+  loadGraph,
+  maxNodeWidthPx,
+  meanDepth,
+  modeUsesLayoutEngine,
+  nodeInk,
+  nodeLabelBudget,
+  nodeWidthPx,
+  occupancy,
+  padded,
+  panSNContig,
+  panSNHaplotype,
+  panSNSample,
+  pathColorsLegible,
+  pathLegend,
+  pathRibbonOffsets,
+  placeLabels,
+  placeSizeLabels,
+  polylineSlice,
+  rangeText,
+  refNameBinding,
+  referenceOrder,
+  referencePathQuery,
+  referenceSamplesOf,
+  resolveColorScheme,
+  resolveEncoding,
+  resolveReferenceSample,
+  rowLabelBox,
+  schemeCss,
+  screenToLayout,
+  sizeLabelCandidates,
+  svgCanvas,
+  svgPath,
+  translateCurves,
+  viewportOf,
+  walkHighlight,
+  walkKey,
+  walkLift,
+  walkRows,
+  walkRowsExtent,
+  wellKnownSample,
+  yToXOf,
+  zoomAbout
+} from "./chunks/chunk-4AOHEU76.js";
 
 // src/index.ts
 import { getDpr } from "@jbrowse/render-core/canvas2dUtils";
@@ -3949,9 +333,9 @@ function distanceToEdgeCurves(px, py, curves, yToX = 1) {
 }
 var nodeCache = /* @__PURE__ */ new WeakMap();
 function getSpatialIndex(nodePositions, version) {
-  const cached2 = nodeCache.get(nodePositions);
-  if (cached2?.version === version) {
-    return cached2.index;
+  const cached = nodeCache.get(nodePositions);
+  if (cached?.version === version) {
+    return cached.index;
   }
   const index = new SpatialIndex(nodePositions);
   nodeCache.set(nodePositions, { version, index });
@@ -3959,9 +343,9 @@ function getSpatialIndex(nodePositions, version) {
 }
 var edgeCache = /* @__PURE__ */ new WeakMap();
 function getEdgeSpatialIndex(nodePositions, graph, drawPaths, axis, version, deletions) {
-  const cached2 = edgeCache.get(nodePositions);
-  if (cached2?.graph === graph && cached2.drawPaths === drawPaths && cached2.scaleX === axis.scaleX && cached2.scaleY === axis.scaleY && cached2.version === version && cached2.deletions === deletions) {
-    return cached2.index;
+  const cached = edgeCache.get(nodePositions);
+  if (cached?.graph === graph && cached.drawPaths === drawPaths && cached.scaleX === axis.scaleX && cached.scaleY === axis.scaleY && cached.version === version && cached.deletions === deletions) {
+    return cached.index;
   }
   const index = new EdgeSpatialIndex(
     nodePositions,
@@ -4081,28 +465,31 @@ function wheelZoomFactor(e) {
 }
 
 // src/referenceStrip.ts
-import { abgrToCssRgba as abgrToCssRgba2 } from "@jbrowse/core/util/colorBits";
-var REFERENCE_STRIP_PX = 10;
+import { abgrToCssRgba } from "@jbrowse/core/util/colorBits";
+var REFERENCE_STRIP_PX = 12;
 var REFERENCE_STRIP_ZONE_PX = REFERENCE_STRIP_PX + 8;
-var OVERHANG_PX = 5;
+var OVERHANG_PX = 8;
+var OVERHANG_CAP_PX = OVERHANG_PX + 3;
+var PALE = abgrToCssRgba(fadeAbgr(LIFT_BACKDROP_COLOR, FADED_ALPHA));
 function referenceStripBlocks(graph, {
   colorScheme,
   referenceRamp,
-  walkNodes,
-  walkColors
+  walks
 }) {
   const range = { ...computeColorSchemeRange(graph), referenceRamp };
   const out = [];
   graph.nodes.forEach((node, index) => {
     if (isBackbone(node)) {
-      const own = walkNodes ? walkColors?.get(node.id) ?? LIFT_BACKDROP_COLOR : getNodeColor(node, index, colorScheme, range);
+      const colors = walks ? walks.map((w) => {
+        const lane = w.colors.get(node.id);
+        return lane === void 0 ? PALE : abgrToCssRgba(lane);
+      }) : [abgrToCssRgba(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
-        )
+        colors,
+        faded: colors.includes(PALE)
       });
     }
   });
@@ -4143,43 +530,70 @@ function stripBlockAt(blocks, frame, sx, sy) {
   }
   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);
+function stripPixels(blocks, frame, width, dpr) {
+  const placed = blocks.map((b) => {
+    const [x0, x1] = span(frame, b.bp0, b.bp1);
+    const px0 = Math.round(x0 * dpr);
+    return {
+      colors: b.colors,
+      x0,
+      px0,
+      px1: Math.max(Math.round(x1 * dpr), px0 + 1)
+    };
+  }).filter((b) => b.px1 > 0 && b.px0 < width * dpr).sort((a, b) => a.x0 - b.x0);
+  const out = [];
+  let claimed = -Infinity;
+  const tierEnds = [-Infinity, -Infinity];
+  for (const { colors, px0, px1 } of placed) {
+    const start = Math.max(px0, claimed);
+    if (px1 > start) {
+      const tier = tierEnds[0] < start ? 0 : 1;
+      tierEnds[tier] = px1;
+      out.push({ colors, x0: start / dpr, x1: px1 / dpr, tier });
+      claimed = px1;
+    }
+  }
+  return out;
+}
+function drawOverhang(ctx, edgeX, inward, ink) {
+  const capX = inward > 0 ? edgeX : edgeX - OVERHANG_CAP_PX;
+  ctx.clearRect(capX, 0, OVERHANG_CAP_PX, REFERENCE_STRIP_PX);
+  const tipX = edgeX + inward;
+  const baseX = tipX + inward * OVERHANG_PX;
+  ctx.beginPath();
+  ctx.moveTo(tipX, REFERENCE_STRIP_PX / 2);
+  ctx.lineTo(baseX, 0);
+  ctx.lineTo(baseX, REFERENCE_STRIP_PX);
   ctx.closePath();
+  ctx.fillStyle = ink;
+  ctx.fill();
+}
+function rowEdge(row, rows, dpr) {
+  return Math.round(row * REFERENCE_STRIP_PX * dpr / rows) / dpr;
 }
 function drawReferenceStrip(ctx, blocks, frame, {
   width,
   lit,
-  darkMode
+  darkMode,
+  dpr = 1
 }) {
   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);
-    }
+  ctx.clearRect(0, 0, width, REFERENCE_STRIP_ZONE_PX);
+  for (const b of stripPixels(blocks, frame, width, dpr)) {
+    const rows = b.colors.length > 1 ? b.colors.length : 2;
+    b.colors.forEach((color, i) => {
+      const row = b.colors.length > 1 ? i : b.tier;
+      const y0 = rowEdge(row, rows, dpr);
+      ctx.fillStyle = color;
+      ctx.fillRect(b.x0, y0, b.x1 - b.x0, rowEdge(row + 1, rows, dpr) - y0);
+    });
   }
   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 (overhang.left > 0) {
+    drawOverhang(ctx, 0, 1, ink);
+  }
+  if (overhang.right > 0) {
+    drawOverhang(ctx, width, -1, ink);
   }
   if (lit) {
     const [x0, x1] = span(frame, lit.start, lit.end);
@@ -4282,7 +696,7 @@ function parsePath(d) {
   }
   return commands;
 }
-function extentOf2(commands) {
+function extentOf(commands) {
   let x0 = Infinity;
   let x1 = -Infinity;
   for (const c of commands) {
@@ -4299,7 +713,7 @@ function extentOf2(commands) {
 }
 function shapeOf(d, color, alpha) {
   const commands = parsePath(d);
-  return { commands, color, alpha, ...extentOf2(commands) };
+  return { commands, color, alpha, ...extentOf(commands) };
 }
 function layerOf(layout, type) {
   const { shapes } = layout;
@@ -4322,7 +736,7 @@ function tubeMapPicture(layout) {
   layout.nodes.forEach((node) => {
     if (node.order >= 0) {
       const commands = parsePath(nodeOutlinePath(node));
-      nodes.push({ name: node.name, commands, ...extentOf2(commands) });
+      nodes.push({ name: node.name, commands, ...extentOf(commands) });
     }
   });
   return {
@@ -4571,329 +985,6 @@ function tubeMapNodeAt(drawing, { x, y }, sx, sy) {
   return hit;
 }
 
-// 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;
-    }
-    placed.push(box);
-    return true;
-  };
-}
-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;
-      }
-      if (insideFrame(box, frame) && take(box)) {
-        out.push({ ...c, y, w });
-        break;
-      }
-    }
-  }
-  return out;
-}
-
-// 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);
-}
-function formatBp(bp) {
-  if (bp >= 1e6) {
-    return `${+(bp / 1e6).toFixed(1)} Mb`;
-  }
-  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);
-  }
-  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);
-    }
-  }
-  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;
-  }
-  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;
-  }
-  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)
-      });
-    }
-  }
-  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 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)
-      });
-    }
-  }
-  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]));
@@ -4950,7 +1041,7 @@ function rulerBoxes(byRefName) {
   return best;
 }
 var TICK_PX = 5;
-var LABEL_GAP_PX2 = 10;
+var LABEL_GAP_PX = 10;
 var TARGET_TICK_PX = 110;
 var MIN_BRACKET_PX = 3;
 function rulerInk(darkMode) {
@@ -4965,7 +1056,7 @@ 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
+      (b) => Math.abs(a.at - b.at) >= (a.width + b.width) / 2 + LABEL_GAP_PX
     )) {
       placed.push(a);
     }
@@ -5248,304 +1339,6 @@ function drawTubeMapConnectors(ctx, connectors, bottom, {
   }
 }
 
-// src/walkEncoding.ts
-import { packAbgr as packAbgr3 } from "@jbrowse/core/util/colorBits";
-var WALK_FIELDS = [
-  { value: "progress", label: "Progress along the walk" },
-  { value: "walk", label: "One colour for the walk" },
-  { value: "reference", label: "Reference position" }
-];
-var WALK_SCHEMES = [
-  { value: "grey", label: "Grey to black", ends: ["#a3a3a3", "#151515"] },
-  { value: "blue", label: "Cyan to navy", ends: ["#6ee0f0", "#0b2c7a"] },
-  { value: "red", label: "Yellow to red", ends: ["#ffd24a", "#b3121b"] },
-  { value: "purple", label: "Pink to plum", ends: ["#f5a3d8", "#5e1a6e"] },
-  { value: "green", label: "Lime to forest", ends: ["#b6e36c", "#0b5d3b"] },
-  { value: "rainbow", label: "Rainbow" }
-];
-var FAMILIES = ["blue", "red", "purple", "green"];
-var isField = (v) => WALK_FIELDS.some((f) => f.value === v);
-var isScheme = (v) => WALK_SCHEMES.some((s) => s.value === v);
-function resolveEncoding(layer, reference, picked, alone = true) {
-  const { field: askedField, scheme: askedScheme } = layer.color ?? {};
-  const field = isField(askedField) ? askedField : alone ? "progress" : "walk";
-  const family = reference ? "grey" : FAMILIES[picked % FAMILIES.length];
-  const scheme = isScheme(askedScheme) ? askedScheme === "rainbow" && field !== "reference" ? family : askedScheme : family;
-  return { field, scheme };
-}
-var BASE_T = 0.5;
-var toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
-var toGamma = (c) => c <= 31308e-7 ? c * 12.92 : 1.055 * c ** (1 / 2.4) - 0.055;
-function oklab(hex) {
-  const [r, g, b] = [1, 3, 5].map(
-    (i) => toLinear(Number.parseInt(hex.slice(i, i + 2), 16) / 255)
-  );
-  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
-  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
-  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
-  return [
-    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
-    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
-    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
-  ];
-}
-function oklabToRgb([L, a, b]) {
-  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
-  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
-  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
-  return [
-    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
-    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
-    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
-  ].map((c) => toGamma(Math.max(0, Math.min(1, c))) * 255);
-}
-function schemeRgb(scheme, t) {
-  const x = Math.max(0, Math.min(1, t));
-  const family = WALK_SCHEMES.find((s) => s.value === scheme);
-  if (!family || !("ends" in family)) {
-    return hslToRgb(x * REFERENCE_RAMP_MAX_HUE, 0.7, 0.5).map((c) => c * 255);
-  }
-  const from = oklab(family.ends[0]);
-  const to = oklab(family.ends[1]);
-  return oklabToRgb(from.map((v, i) => v + (to[i] - v) * x));
-}
-function schemeCss(scheme, t) {
-  const [r, g, b] = schemeRgb(scheme, t).map(Math.round);
-  return `rgb(${r}, ${g}, ${b})`;
-}
-function schemeColor(scheme, t) {
-  const [r, g, b] = schemeRgb(scheme, t).map(Math.round);
-  return packAbgr3(r, g, b, 255);
-}
-function encodedColor({ field, scheme }, t) {
-  return field === "walk" ? schemeColor(scheme, BASE_T) : t === void 0 ? NO_VALUE_COLOR : schemeColor(scheme, t);
-}
-var NO_VALUE_COLOR = REFERENCE_RAMP_ALT_COLOR;
-function encodingSwatchCss({ field, scheme }) {
-  if (field === "walk") {
-    return schemeCss(scheme, BASE_T);
-  }
-  const stops = Array.from({ length: 7 }, (_, i) => {
-    const t = i / 6;
-    return `${schemeCss(scheme, t)} ${t * 100}%`;
-  });
-  return `linear-gradient(to right, ${stops.join(", ")})`;
-}
-
-// src/walkHighlight.ts
-function referenceOf(graph) {
-  return graph.referencePath ? graph.paths?.find((p) => pathOrigin(p.name).name === graph.referencePath) : void 0;
-}
-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 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);
-    }
-  }
-  const lengthOf = (id) => byId.get(id)?.length ?? 0;
-  const bp = path.nodeIds.reduce((sum, id) => sum + lengthOf(id), 0);
-  const progress = /* @__PURE__ */ new Map();
-  let before = 0;
-  for (const id of path.nodeIds) {
-    const length = lengthOf(id);
-    if (!progress.has(id)) {
-      progress.set(id, bp > 0 ? (before + length / 2) / bp : 0);
-    }
-    before += length;
-  }
-  const reference = referenceOf(graph);
-  const originName = pathOrigin(name).name;
-  const origin = graph.anchorPaths?.find((a) => a.name === originName && a.length === bp) ?? graph.anchorPaths?.find((a) => a.name === originName);
-  return {
-    name,
-    reference: reference === path,
-    range: origin ? {
-      contig: path.contig ?? panSNContig(origin.name),
-      start: origin.start,
-      end: origin.start + origin.length
-    } : void 0,
-    nodeIds: new Set(path.nodeIds),
-    edgeIndexes,
-    progress,
-    steps: path.nodeIds.length,
-    bp,
-    referenceBp: reference && reference !== path ? reference.nodeIds.reduce((sum, id) => sum + lengthOf(id), 0) : void 0
-  };
-}
-function laneColors(graph, walk, encoding, ramp) {
-  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
-  const colors = /* @__PURE__ */ new Map();
-  for (const [id, progress] of walk.progress) {
-    const node = byId.get(id);
-    const mid = ramp?.midpoints.get(id);
-    const t = encoding.field === "progress" ? progress : ramp && mid !== void 0 && !(node?.stable && node.stable.rank > 0) ? (mid - ramp.start) / ramp.span : void 0;
-    colors.set(id, encodedColor(encoding, t));
-  }
-  return colors;
-}
-function reversedNodes(graph, walk) {
-  const reference = referenceOf(graph);
-  const reversed = /* @__PURE__ */ new Set();
-  let bp = 0;
-  if (!reference || walk.reference) {
-    return { reversed, bp };
-  }
-  const walkPath = pathOrigin(walk.name).name;
-  const referencePath = pathOrigin(reference.name).name;
-  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
-  for (const id of walk.progress.keys()) {
-    const node = byId.get(id);
-    const visits = node ? graph.pathVisits?.get(node.name) : void 0;
-    const own = visits?.find((v) => v.path === walkPath)?.strand;
-    const theirs = visits?.find((v) => v.path === referencePath)?.strand;
-    if (own && theirs && own !== theirs) {
-      reversed.add(id);
-      bp += node.length;
-    }
-  }
-  return { reversed, bp };
-}
-function walkLift(graph, layers, ramp) {
-  const seen = /* @__PURE__ */ new Set();
-  const lifted = layers.filter((layer) => !seen.has(layer.walk) && seen.add(layer.walk)).flatMap((layer) => {
-    const walk = walkHighlight(graph, layer.walk);
-    return walk ? [{ walk, layer }] : [];
-  }).sort((a, b) => Number(b.walk.reference) - Number(a.walk.reference));
-  if (lifted.length === 0) {
-    return void 0;
-  }
-  let picked = 0;
-  const walks = lifted.map(({ walk, layer }) => {
-    const encoding = resolveEncoding(
-      layer,
-      walk.reference,
-      walk.reference ? 0 : picked++,
-      lifted.length === 1
-    );
-    const { reversed, bp } = reversedNodes(graph, walk);
-    return {
-      ...walk,
-      encoding,
-      colors: laneColors(graph, walk, encoding, ramp),
-      reversed,
-      reversedBp: bp
-    };
-  });
-  return liftOf(walks, ramp);
-}
-var FACET_COLOR = { field: "progress", scheme: "red" };
-function facetLifts(graph, lift, layers, ramp) {
-  return lift.walks.map((walk) => {
-    const stated = layers.find((l) => l.walk === walk.name)?.color;
-    const encoding = resolveEncoding(
-      { walk: walk.name, color: { ...FACET_COLOR, ...stated } },
-      walk.reference,
-      0
-    );
-    return liftOf(
-      [
-        {
-          ...walk,
-          encoding,
-          colors: laneColors(graph, walk, encoding, ramp)
-        }
-      ],
-      ramp
-    );
-  });
-}
-function liftOf(walks, ramp) {
-  return {
-    walks,
-    referenceDomain: ramp ? { start: ramp.start, end: ramp.start + ramp.span } : void 0,
-    nodeIds: new Set(walks.flatMap((w) => [...w.nodeIds])),
-    edgeIndexes: new Set(walks.flatMap((w) => [...w.edgeIndexes])),
-    names: new Set(walks.map((w) => w.name))
-  };
-}
-
-// src/walkKey.ts
-function rangeText(contig, start, end) {
-  const s = Math.round(start);
-  const e = Math.round(end);
-  return `${contig ? `${contig}:` : ""}${s.toLocaleString()}-${e.toLocaleString()} (${formatBp(e - s)})`;
-}
-function walkKey(walk, reference) {
-  const { field } = walk.encoding;
-  const own = walk.range ? rangeText(walk.range.contig, walk.range.start, walk.range.end) : void 0;
-  const scale = field === "progress" ? own : field === "reference" && reference ? rangeText(reference.name, reference.start, reference.end) : void 0;
-  return {
-    delta: walk.referenceBp === void 0 || walk.bp === walk.referenceBp ? "" : ` ${walk.bp > walk.referenceBp ? "+" : "\u2212"}${formatBp(Math.abs(walk.bp - walk.referenceBp))}`,
-    reversed: walk.reversedBp > 0 ? `, ${formatBp(walk.reversedBp)} reversed` : "",
-    shades: field !== "walk",
-    scale,
-    hover: scale === own ? void 0 : own
-  };
-}
-
-// src/facetGrid.ts
-var FACET_GAP_PX = 8;
-var FACET_TITLE_PX = 34;
-var FACET_PAD_PX = 12;
-var MIN_FACET_PANEL_PX = 60;
-function facetGrid({
-  count,
-  bounds,
-  pixelRows,
-  width,
-  room,
-  columns
-}) {
-  function tile(across) {
-    const rows = Math.ceil(count / across);
-    const panelWidth = Math.floor(
-      (width - (across - 1) * FACET_GAP_PX) / across
-    );
-    const panelRoom = (room - rows * FACET_TITLE_PX - (rows - 1) * FACET_GAP_PX) / rows;
-    const fitX = (panelWidth - 2 * FACET_PAD_PX) / bounds.w;
-    const fitY = bounds.h > 0 ? (panelRoom - 2 * FACET_PAD_PX) / bounds.h : Infinity;
-    const scale = pixelRows ? fitX : Math.min(fitX, fitY);
-    const drawn = pixelRows ? bounds.h : bounds.h * scale;
-    const height = Math.floor(
-      Math.max(
-        MIN_FACET_PANEL_PX,
-        Math.min(drawn + 2 * FACET_PAD_PX, panelRoom)
-      )
-    );
-    return {
-      columns: across,
-      width: panelWidth,
-      height,
-      scale,
-      total: rows * (height + FACET_TITLE_PX) + (rows - 1) * FACET_GAP_PX
-    };
-  }
-  if (columns !== void 0) {
-    return tile(Math.max(1, Math.min(count, Math.round(columns))));
-  }
-  let best = tile(1);
-  for (let across = 2; across <= count; across++) {
-    const grid = tile(across);
-    if (grid.scale > best.scale) {
-      best = grid;
-    }
-  }
-  return best;
-}
-
 // src/bubbles/bubbleLine.ts
 var SATURATED_PATH_COUNT = 2147483647;
 
@@ -5913,6 +1706,15 @@ var ROUTE_STACK = 8;
 var GENE_PIN_DROP_PX = 18;
 var GENE_STACK = 2;
 var TOPMOST_BASELINE = LABEL_PX + LABEL_PAD;
+function geneCoverageNote(pin) {
+  const length = pin.gene.end - pin.gene.start;
+  if (pin.covered >= 0.98) {
+    return void 0;
+  }
+  const [per, unit] = length >= 1e6 ? [1e6, "Mb"] : length >= 1e3 ? [1e3, "kb"] : [1, "bp"];
+  const amount = (bp) => +(bp / per).toFixed(per === 1 ? 0 : 1);
+  return `${amount(pin.covered * length)} of ${amount(length)} ${unit}`;
+}
 function byExtent(items, extent) {
   return [...items].sort((a, b) => extent(b) - extent(a));
 }
@@ -5972,11 +1774,13 @@ function layoutLabels(m) {
   const genes = placeLabels(
     byExtent(m.genePins, (pin) => pin.gene.end - pin.gene.start).map((pin) => {
       const { x, y } = screen(pin.at);
+      const note = geneCoverageNote(pin);
       return {
         item: pin,
         x,
         y: y + m.contigThickness + GENE_PIN_DROP_PX,
-        text: pin.covered < 0.98 ? `${pin.gene.name} \u2026` : pin.gene.name,
+        text: note ? `${pin.gene.name} \xB7 ${note}` : pin.gene.name,
+        fallback: note ? `${pin.gene.name} \u2026` : void 0,
         stack: GENE_STACK
       };
     }),
@@ -6048,6 +1852,7 @@ function genePins(graph, genes, positions) {
       continue;
     }
     const parts = [];
+    const exonsByNode = [];
     let at;
     let atDistance = Infinity;
     let covered = 0;
@@ -6062,6 +1867,7 @@ function genePins(graph, genes, positions) {
       }
       const line = positions[node.id];
       covered += Math.min(nodeEnd, gene.end) - Math.max(nodeStart, gene.start);
+      const nodeParts = [];
       for (const exon of gene.exons) {
         const a = Math.max(exon.start, nodeStart);
         const b = Math.min(exon.end, nodeEnd);
@@ -6076,7 +1882,11 @@ function genePins(graph, genes, positions) {
         if (stretch.length === 1) {
           stretch.push({ ...stretch[0] });
         }
-        parts.push(svgPath(stretch));
+        nodeParts.push(svgPath(stretch));
+      }
+      if (nodeParts.length > 0) {
+        parts.push(...nodeParts);
+        exonsByNode.push({ nodeId: node.id, d: nodeParts.join("") });
       }
       const pinBp = Math.min(Math.max(mid, nodeStart), nodeEnd);
       const distance = Math.abs(pinBp - mid);
@@ -6094,6 +1904,7 @@ function genePins(graph, genes, positions) {
       pins.push({
         gene,
         exons: parts.join(""),
+        exonsByNode,
         at,
         covered: covered / (gene.end - gene.start)
       });
@@ -6101,262 +1912,6 @@ 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());
-}
-function sampleOf2(refName) {
-  const sample = refName.includes("#") ? panSNSample(refName) : void 0;
-  return sample === void 0 || isGenericSample(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 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,
-          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) {
-    super(
-      referenceSamples.length === 0 ? `the graph names no reference sample (gbwt_reference_samples) and the anchor "${anchor}" maps to none; set referenceSample` : `the anchor "${anchor}" is none of the graph's reference samples (${referenceSamples.join(", ")}); set referenceSample or map it through assemblyNameToPanSN`
-    );
-    this.name = "NoReferenceSampleError";
-  }
-};
-var NodeLimitError = class extends Error {
-  constructor(limit, windowBp, fitsBp) {
-    super(
-      `this ${windowBp.toLocaleString()} bp window reads more than nodeLimit (${limit.toLocaleString()}) graph nodes; zoom in to about ${fitsBp.toLocaleString()} bp or raise nodeLimit`
-    );
-    this.name = "NodeLimitError";
-  }
-};
-function haplotypePrefix(name) {
-  return `${name.sample}#${name.haplotype}`;
-}
-function haplotypeWanted(name, wanted) {
-  const prefix = haplotypePrefix(name);
-  return wanted === void 0 || wanted.some((candidate) => panSNMatchesPrefix(prefix, candidate));
-}
-async function referenceSamplesOf(db) {
-  return (await db.tag("gbwt_reference_samples") ?? "").split(/\s+/).filter((sample) => sample !== "");
-}
-function aliasedSample(anchorSample, referenceSamples) {
-  const lower = anchorSample.toLowerCase();
-  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({
-  configured,
-  anchorPrefix,
-  referenceSamples
-}) {
-  if (configured !== "") {
-    return configured;
-  }
-  const sample = aliasedSample(panSNSample(anchorPrefix), referenceSamples) ?? (referenceSamples.length === 1 ? referenceSamples[0] : void 0);
-  if (sample === void 0) {
-    throw new NoReferenceSampleError(anchorPrefix, referenceSamples);
-  }
-  return sample;
-}
-async function referencePathQuery(db, referenceSample, refName) {
-  const path = (await db.paths()).find(
-    (p) => p.isIndexed && p.name.sample === referenceSample && p.name.contig === refName
-  );
-  return path ? {
-    sample: path.name.sample,
-    contig: refName,
-    haplotype: path.name.haplotype
-  } : void 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(walked * 0.8) : Math.floor(windowBp / 2);
-    return new NodeLimitError(limit, windowBp, Math.max(fits, 1));
-  }
-}
-async function cutWindowGFA(db, query, start, end, { keep, ...opts }) {
-  const subgraph = query ? await db.getSubgraphForRange(query, start, end, {
-    ...opts,
-    haplotypes: "all",
-    ...keep === void 0 ? {} : { keep }
-  }).catch((error) => {
-    throw nodeLimitError(error, opts.limit, end - start) ?? error;
-  }) : void 0;
-  return subgraph ? subgraph.toGFA({ names: "resolved" }) : "";
-}
-
-// src/viewport.ts
-function axisScaleOf(scale, pixelRows) {
-  return { scaleX: scale, scaleY: pixelRows ? 1 : scale, pixelRows };
-}
-function viewportOf(t, axis, width, height) {
-  return {
-    minX: -t.translateX / axis.scaleX,
-    minY: -t.translateY / axis.scaleY,
-    maxX: (width - t.translateX) / axis.scaleX,
-    maxY: (height - t.translateY) / axis.scaleY
-  };
-}
-function padded(v, panes) {
-  const w = (v.maxX - v.minX) * panes;
-  const h = (v.maxY - v.minY) * panes;
-  return {
-    minX: v.minX - w,
-    minY: v.minY - h,
-    maxX: v.maxX + w,
-    maxY: v.maxY + h
-  };
-}
-function contains(outer, inner) {
-  return inner.minX >= outer.minX && inner.maxX <= outer.maxX && inner.minY >= outer.minY && inner.maxY <= outer.maxY;
-}
-function zoomAbout(t, factor, centerX, centerY, pixelRows) {
-  const scale = clampZoom(t.scale * factor);
-  const ratio = scale / t.scale;
-  return {
-    scale,
-    translateX: centerX - (centerX - t.translateX) * ratio,
-    translateY: pixelRows ? t.translateY : centerY - (centerY - t.translateY) * ratio
-  };
-}
-function screenToLayout(x, y, t, axis) {
-  return {
-    x: (x - t.translateX) / axis.scaleX,
-    y: (y - t.translateY) / axis.scaleY
-  };
-}
-
-// src/loadBandage.ts
-var cached;
-function loadBandage() {
-  cached ??= import("./chunks/bandage-layout-3AR6BCUD.js").then((mod) => mod.default()).catch((e) => {
-    cached = void 0;
-    throw e;
-  });
-  return cached;
-}
 export {
   BUBBLE_KIND_COLORS,
   BUBBLE_KIND_NAMES,
@@ -6402,17 +1957,21 @@ export {
   drawTubeMapGenes,
   drawTubeMapRuler,
   drawingBounds,
+  encodingStops,
   encodingSwatchCss,
   engineKey,
   engineRequest,
+  facetCells,
   facetGrid,
   facetLifts,
   featuresOnBackbone,
+  figureSvg,
   findHoveredEdge,
   findHoveredNode,
   fitTransform,
   forceLayout,
   formatBp,
+  geneCoverageNote,
   genePins,
   getDpr,
   graphBackbone,
@@ -6433,6 +1992,7 @@ export {
   panSNSample,
   pathColorsLegible,
   pathLegend,
+  rangeText,
   refNameBinding,
   referenceBoxes,
   referenceKnots,
@@ -6447,6 +2007,7 @@ export {
   schemeCss,
   screenToLayout,
   stripBlockAt,
+  svgCanvas,
   tubeMapConnectors,
   tubeMapFrame,
   tubeMapGenes,