@jbrowse/bandage-core 6.0.1 → 6.0.3

package/dist/chunks/chunk-PCZ4PTYC.js

@@ -0,0 +1,726 @@
+import {
+  fadeAbgr
+} from "./chunk-MNUSQCLG.js";
+import {
+  baseEdgeCurves
+} from "./chunk-Y3IOTZJA.js";
+import {
+  PATH_LIGHTNESS,
+  PATH_SATURATION,
+  nameHue,
+  pathHueAt
+} from "./chunk-X5L37W4J.js";
+import {
+  referenceMidpoints
+} from "./chunk-ES2N6V56.js";
+import {
+  meanDepth,
+  nodeWidthPx
+} from "./chunk-PBENCR5L.js";
+import {
+  dashCurves,
+  pathRibbonOffsets,
+  strandSides,
+  translateCurves,
+  yToXOf
+} from "./chunk-2CVHXFK7.js";
+
+// src/renderer/GeometryBuilder.ts
+import { abgrToCssRgba, packAbgr } from "@jbrowse/core/util/colorBits";
+var EDGE_DEFAULT_COLOR = packAbgr(119, 119, 119, 217);
+var EDGE_PATH_FALLBACK_COLOR = packAbgr(136, 136, 136, 217);
+var EDGE_DELETION_COLOR = packAbgr(24, 24, 28, 240);
+var DELETION_THICKNESS_FACTOR = 2.2;
+var LIFT_BACKDROP_COLOR = packAbgr(160, 160, 160, 255);
+var FADED_ALPHA = 0.18;
+var LIFT_BACKDROP_CSS = abgrToCssRgba(
+  fadeAbgr(LIFT_BACKDROP_COLOR, FADED_ALPHA)
+);
+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_LINK_HEADS = 3;
+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 + MIN_LINK_HEADS * length
+  );
+  const lengthPx = walkPx[n - 1];
+  const abutting = lengthPx < ABUTTING_PX;
+  const inset = Math.min(nodeHalfWidth, lengthPx);
+  const fit = abutting ? Math.min(1, polylinePx(fromSegments, scale, yToX) / length) : 1;
+  if (abutting ? fit < MIN_ARROW_FIT : lengthPx < MIN_LINK_HEADS * length) {
+    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 leavesStart(edge, segments, first, stranded, yToX) {
+  if (stranded) {
+    return strandSides(edge).from === "start";
+  }
+  const gap = (p) => Math.hypot(p.x - first.x0, (p.y - first.y0) * yToX);
+  return gap(segments[0]) < gap(segments.at(-1));
+}
+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 packAbgr(
+    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 packAbgr(
+    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 = packAbgr(...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 ? packAbgr(160, 160, 160, 255) : node.stable.rank === 0 ? packAbgr(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 packAbgr(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 packAbgr(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 packAbgr(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 = "uniform",
+    highlight,
+    axis,
+    linearLayout,
+    viewportBounds,
+    referenceRamp,
+    deletions,
+    deletionRoutes,
+    stranded,
+    hiddenEdges,
+    version = 0
+  } = options;
+  const depthNorm = nodeWidth === "depth" ? meanDepth(graph) : 0;
+  const scale = axis.scaleX;
+  const yToX = yToXOf(axis);
+  const sharedCurves = baseEdgeCurves(
+    nodePositions,
+    graph,
+    axis,
+    deletions,
+    version,
+    deletionRoutes,
+    stranded
+  );
+  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, nodeWidth, 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: connectorThickness / 2,
+        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, nodeWidth, depthNorm) : contigThickness;
+      const laneWidth = Math.max(width / laneWalks.length, MIN_WALK_LANE_PX);
+      const normals = pointNormalsOf(fromSegments, yToX);
+      const { nx, ny } = (leavesStart(
+        edge,
+        fromSegments,
+        baseCurves[0],
+        stranded,
+        yToX
+      ) ? 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, nodeWidth, 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
+  };
+}
+
+export {
+  LIFT_BACKDROP_COLOR,
+  FADED_ALPHA,
+  LIFT_BACKDROP_CSS,
+  hslToRgb,
+  REFERENCE_RAMP_MAX_HUE,
+  REFERENCE_RAMP_ALT_COLOR,
+  REFERENCE_RAMP_ALT_CSS,
+  computeReferenceRamp,
+  computeColorSchemeRange,
+  getNodeColor,
+  endTangent,
+  buildGeometry
+};