@jbrowse/bandage-core 6.0.1 → 6.0.3

package/dist/chunks/chunk-CR7EGAFE.js

@@ -0,0 +1,241 @@
+import {
+  tubeMapMismatches
+} from "./chunk-EJ5OZTCK.js";
+
+// src/tubeMap/draw.ts
+import { curvePaths, nodeOutlinePath } from "@gmod/tubemap-core";
+function parsePath(d) {
+  const tokens = d.trim().split(/[\s,]+/);
+  const commands = [];
+  let i = 0;
+  const num = () => Number(tokens[i++]);
+  while (i < tokens.length) {
+    const op = tokens[i++];
+    if (op === "M" || op === "L") {
+      commands.push({ op, x: num(), y: num() });
+    } else if (op === "H") {
+      commands.push({ op, x: num() });
+    } else if (op === "V") {
+      commands.push({ op, y: num() });
+    } else if (op === "Q") {
+      commands.push({ op, x1: num(), y1: num(), x: num(), y: num() });
+    } else if (op === "C") {
+      commands.push({
+        op,
+        x1: num(),
+        y1: num(),
+        x2: num(),
+        y2: num(),
+        x: num(),
+        y: num()
+      });
+    } else if (op === "Z") {
+      commands.push({ op });
+    }
+  }
+  return commands;
+}
+function extentOf(commands) {
+  let x0 = Infinity;
+  let x1 = -Infinity;
+  for (const c of commands) {
+    if ("x" in c) {
+      x0 = Math.min(x0, c.x);
+      x1 = Math.max(x1, c.x);
+    }
+    if ("x1" in c) {
+      x0 = Math.min(x0, c.x1);
+      x1 = Math.max(x1, c.x1);
+    }
+  }
+  return { x0, x1 };
+}
+function shapeOf(d, color, alpha, track) {
+  const commands = parsePath(d);
+  return { commands, color, track, alpha, ...extentOf(commands) };
+}
+function layerOf(layout, type) {
+  const { shapes } = layout;
+  const trackOf = (s) => type === "haplotype" ? s.id : void 0;
+  const rects = [...shapes.rectangles, ...shapes.verticalRectangles].filter((r) => r.type === type).map((r) => ({
+    color: r.color,
+    track: trackOf(r),
+    alpha: r.alpha ?? 1,
+    x0: r.xStart,
+    x1: r.xEnd + 1,
+    y0: r.yStart,
+    y1: r.yEnd + 1
+  }));
+  const curves = curvePaths(shapes.curves, type).map(
+    (c) => shapeOf(c.path, c.color, c.alpha ?? 1, trackOf(c))
+  );
+  const corners = shapes.corners.filter((c) => c.type === type).map((c) => shapeOf(c.path, c.color, 1, trackOf(c)));
+  return { rects, shapes: [...curves, ...corners] };
+}
+function tubeMapPicture(layout) {
+  const nodes = [];
+  layout.nodes.forEach((node) => {
+    if (node.order >= 0) {
+      const commands = parsePath(nodeOutlinePath(node));
+      nodes.push({ name: node.name, commands, ...extentOf(commands) });
+    }
+  });
+  return {
+    bounds: layout.bounds,
+    layers: [layerOf(layout, "haplotype"), layerOf(layout, "read")],
+    nodes,
+    mismatches: tubeMapMismatches(layout).filter(
+      (m) => m.kind !== "insertion" || !m.softClip
+    )
+  };
+}
+function trace(ctx, commands, x, y) {
+  let cx = 0;
+  let cy = 0;
+  for (const c of commands) {
+    switch (c.op) {
+      case "M":
+        cx = c.x;
+        cy = c.y;
+        ctx.moveTo(x(cx), y(cy));
+        break;
+      case "L":
+        cx = c.x;
+        cy = c.y;
+        ctx.lineTo(x(cx), y(cy));
+        break;
+      case "H":
+        cx = c.x;
+        ctx.lineTo(x(cx), y(cy));
+        break;
+      case "V":
+        cy = c.y;
+        ctx.lineTo(x(cx), y(cy));
+        break;
+      case "Q":
+        cx = c.x;
+        cy = c.y;
+        ctx.quadraticCurveTo(x(c.x1), y(c.y1), x(cx), y(cy));
+        break;
+      case "C":
+        cx = c.x;
+        cy = c.y;
+        ctx.bezierCurveTo(x(c.x1), y(c.y1), x(c.x2), y(c.y2), x(cx), y(cy));
+        break;
+      case "Z":
+        ctx.closePath();
+        break;
+    }
+  }
+}
+function fillByColor(ctx, items, visible, colorOf, addTo) {
+  const byColor = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    if (visible(item)) {
+      const key = `${colorOf(item)}|${item.alpha}`;
+      const list = byColor.get(key);
+      if (list) {
+        list.push(item);
+      } else {
+        byColor.set(key, [item]);
+      }
+    }
+  }
+  for (const list of byColor.values()) {
+    ctx.fillStyle = colorOf(list[0]);
+    ctx.globalAlpha = list[0].alpha;
+    ctx.beginPath();
+    for (const item of list) {
+      addTo(item);
+    }
+    ctx.fill();
+  }
+  ctx.globalAlpha = 1;
+}
+var FULL_OUTLINE_PX = 12;
+var MIN_OUTLINE_ALPHA = 0.15;
+function outlineAlpha(screenWidth) {
+  return Math.max(MIN_OUTLINE_ALPHA, Math.min(1, screenWidth / FULL_OUTLINE_PX));
+}
+var NODE_TINT_ALPHA = 0.55;
+function drawTubeMap(ctx, picture, frame) {
+  const { x, y, width } = frame;
+  const visible = (item) => x(item.x1) >= 0 && x(item.x0) <= width;
+  const colorOf = (item) => item.track !== void 0 && frame.tubeColors?.[item.track] || item.color;
+  for (const layer of picture.layers) {
+    fillByColor(ctx, layer.rects, visible, colorOf, (r) => {
+      const left = x(r.x0);
+      const top = y(r.y0);
+      ctx.rect(left, top, x(r.x1) - left, y(r.y1) - top);
+    });
+    fillByColor(ctx, layer.shapes, visible, colorOf, (s) => {
+      trace(ctx, s.commands, x, y);
+    });
+  }
+  const stroke = frame.darkMode ? "#d0d0d0" : "#000000";
+  const fill = frame.darkMode ? "rgba(40,40,40,0.4)" : "rgba(255,255,255,0.4)";
+  ctx.lineWidth = 2 * Math.max(0.25, Math.min(1, frame.yScale));
+  for (const node of picture.nodes) {
+    if (visible(node)) {
+      const lit = node.name === frame.highlightNode;
+      ctx.beginPath();
+      trace(ctx, node.commands, x, y);
+      const tint = lit ? void 0 : frame.nodeColors?.get(node.name);
+      ctx.fillStyle = lit ? "rgba(255,192,203,0.5)" : tint ?? fill;
+      ctx.strokeStyle = lit ? "#ff0000" : stroke;
+      ctx.globalAlpha = tint ? NODE_TINT_ALPHA : 1;
+      ctx.fill();
+      ctx.globalAlpha = lit ? 1 : outlineAlpha(x(node.x1) - x(node.x0));
+      ctx.stroke();
+      ctx.globalAlpha = 1;
+    }
+  }
+  drawMismatches(ctx, picture.mismatches, frame);
+}
+var MISMATCH_FONT_PX = 12;
+var MIN_MISMATCH_FONT_PX = 6;
+function mismatchesLegible(yScale) {
+  return MISMATCH_FONT_PX * yScale >= MIN_MISMATCH_FONT_PX;
+}
+function mismatchOnScreen(m, { x, width }) {
+  const [x0, x1] = m.kind === "insertion" ? [m.x, m.x] : [m.x0, m.x1];
+  return x(x1) >= 0 && x(x0) <= width;
+}
+function drawMismatches(ctx, marks, frame) {
+  const { x, y, yScale, darkMode } = frame;
+  if (!mismatchesLegible(yScale) || marks.length === 0) {
+    return;
+  }
+  const fontPx = MISMATCH_FONT_PX * yScale;
+  ctx.fillStyle = "grey";
+  ctx.beginPath();
+  for (const m of marks) {
+    if (m.kind === "deletion" && mismatchOnScreen(m, frame)) {
+      const left = x(m.x0);
+      const top = y(m.y);
+      ctx.rect(left, top, x(m.x1) - left, y(m.y + m.height) - top);
+    }
+  }
+  ctx.fill();
+  ctx.font = `${fontPx}px monospace`;
+  ctx.textBaseline = "alphabetic";
+  ctx.fillStyle = darkMode ? "#ffffff" : "#000000";
+  for (const m of marks) {
+    if (!mismatchOnScreen(m, frame)) {
+      continue;
+    }
+    if (m.kind === "substitution") {
+      ctx.fillText(m.seq, x(m.x0) + 1, y(m.y + m.height));
+    } else if (m.kind === "insertion") {
+      ctx.fillText("*", x(m.x) - 3, y(m.y + m.height));
+    }
+  }
+}
+
+export {
+  parsePath,
+  tubeMapPicture,
+  drawTubeMap,
+  mismatchesLegible,
+  mismatchOnScreen
+};

package/dist/chunks/chunk-CS3E4ETM.js

@@ -0,0 +1,202 @@
+import {
+  formatBp
+} from "./chunk-N62KBLFC.js";
+import {
+  isBackbone
+} from "./chunk-FYQWPEEY.js";
+
+// src/tubeMap/axis.ts
+function referenceBoxes(graph, layout) {
+  const nodeById = new Map(graph.nodes.map((n) => [n.id, n]));
+  const byRefName = /* @__PURE__ */ new Map();
+  layout.nodes.forEach((node) => {
+    const graphNode = nodeById.get(node.name);
+    if (node.order >= 0 && graphNode && isBackbone(graphNode)) {
+      const { refName, start } = graphNode.stable;
+      const boxes = byRefName.get(refName) ?? byRefName.set(refName, []).get(refName);
+      boxes.push({
+        bp0: start,
+        bp1: start + node.sequenceLength,
+        x0: node.x,
+        x1: node.x + node.pixelWidth
+      });
+    }
+  });
+  for (const boxes of byRefName.values()) {
+    boxes.sort((a, b) => a.bp0 - b.bp0);
+  }
+  return byRefName;
+}
+function tubeX(boxes, bp, isEnd = false) {
+  let lo = 0;
+  let hi = boxes.length - 1;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    const bp1 = boxes[mid].bp1;
+    if (isEnd ? bp1 < bp : bp1 <= bp) {
+      lo = mid + 1;
+    } else {
+      hi = mid;
+    }
+  }
+  const box = boxes[lo];
+  if (bp <= box.bp0) {
+    return box.x0;
+  }
+  const span = box.bp1 - box.bp0;
+  return span > 0 ? box.x0 + (Math.min(bp, box.bp1) - box.bp0) / span * (box.x1 - box.x0) : box.x0;
+}
+function tubeSpan(boxes, start, end) {
+  const a = tubeX(boxes, start);
+  const b = tubeX(boxes, end, true);
+  return { x0: Math.min(a, b), x1: Math.max(a, b) };
+}
+function rulerBoxes(byRefName) {
+  let best;
+  for (const boxes of byRefName.values()) {
+    if (!best || boxes.length > best.length) {
+      best = boxes;
+    }
+  }
+  return best;
+}
+var TICK_PX = 5;
+var LABEL_GAP_PX = 10;
+var TARGET_TICK_PX = 110;
+var MIN_BRACKET_PX = 3;
+function rulerInk(darkMode) {
+  return darkMode ? "#b0b0b8" : "#55555c";
+}
+function niceStep(raw) {
+  const pow = 10 ** Math.floor(Math.log10(raw));
+  const m = raw / pow;
+  return (m <= 1 ? 1 : m <= 2 ? 2 : m <= 5 ? 5 : 10) * pow;
+}
+function placeLabels(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_PX
+    )) {
+      placed.push(a);
+    }
+  }
+  return placed.map(({ text, at }) => ({ text, at }));
+}
+function scaleMarks(boxes, x, width, measure) {
+  const first = boxes[0];
+  const last = boxes.at(-1);
+  if (!first || !last) {
+    return void 0;
+  }
+  const from = x(first.x0);
+  const to = x(last.x1);
+  const bpSpan = last.bp1 - first.bp0;
+  if (to <= from || bpSpan <= 0) {
+    return void 0;
+  }
+  const step = niceStep(bpSpan / (to - from) * TARGET_TICK_PX);
+  const ticks = [];
+  const positions = [];
+  for (let bp = Math.ceil(first.bp0 / step) * step; bp <= last.bp1; bp += step) {
+    const sx = Math.round(x(tubeX(boxes, bp))) + 0.5;
+    if (sx >= 0 && sx <= width) {
+      ticks.push(sx);
+      const text = bp.toLocaleString("en-US");
+      positions.push({ text, at: sx, width: measure(text) });
+    }
+  }
+  return {
+    spans: [{ x0: from, x1: to }],
+    ticks,
+    labels: placeLabels(positions)
+  };
+}
+function boxMarks(boxes, x, width, measure) {
+  const shown = boxes.map((box) => ({ box, s0: x(box.x0), s1: x(box.x1) })).filter(({ s0, s1 }) => s1 >= 0 && s0 <= width);
+  const first = shown[0];
+  const last = shown.at(-1);
+  if (!first || !last) {
+    return void 0;
+  }
+  const label = (text, at) => ({
+    text,
+    at,
+    width: measure(text)
+  });
+  const position = (bp, at) => label(bp.toLocaleString("en-US"), at);
+  const spans = [];
+  const ticks = [];
+  const lengths = [];
+  const boundaries = [];
+  for (const { box, s0, s1 } of shown) {
+    spans.push({ x0: s0, x1: s1 });
+    ticks.push(Math.round(s0) + 0.5);
+    if (s1 - s0 >= MIN_BRACKET_PX) {
+      ticks.push(Math.round(s1) + 0.5);
+    }
+    const length = label(formatBp(box.bp1 - box.bp0), (s0 + s1) / 2);
+    if (length.width <= s1 - s0) {
+      lengths.push(length);
+    }
+    if (box !== first.box) {
+      boundaries.push(position(box.bp0, s0));
+    }
+  }
+  const ends = [
+    position(first.box.bp0, first.s0),
+    position(last.box.bp1, last.s1)
+  ];
+  return {
+    spans,
+    ticks,
+    labels: placeLabels([...ends, ...lengths, ...boundaries])
+  };
+}
+function rulerMarks(boxes, x, width, measure, referenceAxis = false) {
+  return (referenceAxis ? scaleMarks : boxMarks)(boxes, x, width, measure);
+}
+function drawTubeMapRuler(ctx, boxes, frame, top, referenceAxis = false) {
+  const { x, width, darkMode } = frame;
+  ctx.font = "10px sans-serif";
+  const marks = rulerMarks(
+    boxes,
+    x,
+    width,
+    (text) => ctx.measureText(text).width,
+    referenceAxis
+  );
+  if (!marks) {
+    return;
+  }
+  const ink = rulerInk(darkMode);
+  const y = top + 0.5;
+  ctx.strokeStyle = ink;
+  ctx.fillStyle = ink;
+  ctx.lineWidth = 1;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "top";
+  ctx.beginPath();
+  for (const { x0, x1 } of marks.spans) {
+    ctx.moveTo(Math.max(0, x0), y);
+    ctx.lineTo(Math.min(width, x1), y);
+  }
+  for (const sx of marks.ticks) {
+    ctx.moveTo(sx, top);
+    ctx.lineTo(sx, top + TICK_PX);
+  }
+  ctx.stroke();
+  for (const { text, at } of marks.labels) {
+    ctx.fillText(text, at, top + TICK_PX + 2);
+  }
+}
+
+export {
+  referenceBoxes,
+  tubeX,
+  tubeSpan,
+  rulerBoxes,
+  rulerInk,
+  rulerMarks,
+  drawTubeMapRuler
+};

package/dist/chunks/chunk-CTSBC2O6.js

@@ -0,0 +1,90 @@
+import {
+  tubeSpan
+} from "./chunk-CS3E4ETM.js";
+
+// src/tubeMap/genes.ts
+function tubeMapGenes(byRefName, genes) {
+  const out = [];
+  for (const gene of genes) {
+    const boxes = byRefName.get(gene.refName);
+    const first = boxes?.[0];
+    const last = boxes?.at(-1);
+    if (!boxes || !first || !last) {
+      continue;
+    }
+    const start = Math.max(gene.start, first.bp0);
+    const end = Math.min(gene.end, last.bp1);
+    if (end <= start) {
+      continue;
+    }
+    out.push({
+      gene,
+      ...tubeSpan(boxes, start, end),
+      exons: gene.exons.filter((e) => e.end > start && e.start < end).map(
+        (e) => tubeSpan(boxes, Math.max(e.start, start), Math.min(e.end, end))
+      )
+    });
+  }
+  return out;
+}
+var GENE_ROW_PX = 22;
+var MAX_GENE_ROWS = 4;
+var EXON_PX = 8;
+var NAME_FONT = "11px sans-serif";
+var NAME_GAP_PX = 8;
+function tubeMapGeneRows(genes) {
+  const edges = genes.flatMap((g) => [
+    { x: g.x0, step: 1 },
+    { x: g.x1, step: -1 }
+  ]).sort((a, b) => a.x - b.x || a.step - b.step);
+  let depth = 0;
+  let most = 0;
+  for (const { step } of edges) {
+    depth += step;
+    most = Math.max(most, depth);
+  }
+  return Math.min(MAX_GENE_ROWS, most);
+}
+function drawTubeMapGenes(ctx, genes, frame, bottom, top = 0) {
+  const { x, width, darkMode } = frame;
+  const rows = Math.max(1, Math.floor((bottom - top) / GENE_ROW_PX));
+  const rowEnds = [];
+  const ink = darkMode ? "#e0e0e6" : "#1c1c22";
+  ctx.font = NAME_FONT;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "alphabetic";
+  ctx.fillStyle = ink;
+  ctx.strokeStyle = ink;
+  ctx.lineWidth = 1;
+  const placed = genes.map((g) => ({ g, s0: x(g.x0), s1: x(g.x1) })).filter(({ s0, s1 }) => s1 >= 0 && s0 <= width).sort((a, b) => a.s0 - b.s0);
+  for (const { g, s0, s1 } of placed) {
+    const arrow = g.gene.strand > 0 ? " \u2192" : g.gene.strand < 0 ? "\u2190 " : "";
+    const label = g.gene.strand < 0 ? `${arrow}${g.gene.name}` : `${g.gene.name}${arrow}`;
+    const mid = (Math.max(s0, 0) + Math.min(s1, width)) / 2;
+    const half = ctx.measureText(label).width / 2;
+    const left = Math.min(s0, mid - half);
+    const right = Math.max(s1, mid + half);
+    let row = rowEnds.findIndex((end) => end + NAME_GAP_PX <= left);
+    if (row === -1) {
+      row = Math.min(rowEnds.length, rows - 1);
+    }
+    rowEnds[row] = Math.max(rowEnds[row] ?? -Infinity, right);
+    const glyphY = bottom - row * GENE_ROW_PX - EXON_PX / 2;
+    ctx.beginPath();
+    ctx.moveTo(s0, glyphY + 0.5);
+    ctx.lineTo(s1, glyphY + 0.5);
+    ctx.stroke();
+    for (const e of g.exons) {
+      const e0 = x(e.x0);
+      ctx.fillRect(e0, glyphY - EXON_PX / 2, Math.max(1, x(e.x1) - e0), EXON_PX);
+    }
+    ctx.fillText(label, mid, glyphY - EXON_PX / 2 - 2);
+  }
+}
+
+export {
+  tubeMapGenes,
+  GENE_ROW_PX,
+  tubeMapGeneRows,
+  drawTubeMapGenes
+};