@jbrowse/bandage-core 0.1.13 → 0.1.15

package/dist/index.js

@@ -2848,11 +2848,10 @@ 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 EDGE_WALK_COLOR = packAbgr2(30, 30, 36, 245);
-var WALK_EDGE_THICKNESS_FACTOR = 1.8;
 var FADED_ALPHA = 0.18;
 var DELETION_DASH_PX = 11;
 var MIN_PATH_STRIPE_PX = 1.2;
+var MIN_WALK_LANE_PX = 3;
 var MIN_SCALE_FOR_OFFSET = 1e-6;
 var ARROW_LENGTH_BASE_PX = 7;
 var ARROW_LENGTH_PER_EDGE_PX = 3;
@@ -3341,10 +3340,10 @@ function buildGeometry(options) {
     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) * (onWalk ? WALK_EDGE_THICKNESS_FACTOR : 1);
+    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 ? plainEdgeColor : onWalk ? EDGE_WALK_COLOR : fadeAbgr(plainEdgeColor, FADED_ALPHA);
+    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) => {
@@ -3375,7 +3374,33 @@ function buildGeometry(options) {
     };
     const edgeCurveStart = edgeCurves.length;
     const arrowStart = arrows.length;
-    if (!ribbons) {
+    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(
@@ -3391,7 +3416,7 @@ function buildGeometry(options) {
         buildSingleEdge(
           offset.x,
           offset.y,
-          highlight && edge.pathIds[pathIdx] !== highlight.name ? fadeAbgr(ribbonColor, FADED_ALPHA) : ribbonColor,
+          highlight && !highlight.names.has(edge.pathIds[pathIdx]) ? fadeAbgr(ribbonColor, FADED_ALPHA) : ribbonColor,
           pathIdx === arrowRibbon ? edgeColor : void 0
         );
       }
@@ -3427,7 +3452,24 @@ function buildGeometry(options) {
     const slots = nodePathSlots.get(nodeId);
     const slotWidth = width / pathCount;
     const drawable = segments.length >= 2;
-    if (drawable && slots?.length && slotWidth >= MIN_PATH_STRIPE_PX) {
+    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) {
@@ -5191,7 +5233,99 @@ 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",
+    legend: "pale where the walk starts, deep where it ends"
+  },
+  {
+    value: "reference",
+    label: "Reference position",
+    legend: "along the reference left to right, charcoal off it"
+  },
+  {
+    value: "strand",
+    label: "Strand against the reference",
+    legend: "pale where the walk runs as the reference does, deep where reversed"
+  },
+  {
+    value: "visits",
+    label: "Visits",
+    legend: "pale where the walk passes once, deep four times or more"
+  }
+];
+var WALK_SCHEMES = [
+  { value: "rainbow", label: "Rainbow" },
+  { value: "blues", label: "Blues", hue: 215 },
+  { value: "reds", label: "Reds", hue: 0 },
+  { value: "greens", label: "Greens", hue: 130 },
+  { value: "oranges", label: "Oranges", hue: 30 },
+  { value: "purples", label: "Purples", hue: 280 },
+  { value: "greys", label: "Greys" }
+];
+var DEFAULT_FAMILIES = [
+  "blues",
+  "reds",
+  "greens",
+  "oranges",
+  "purples"
+];
+function resolveEncoding(layer, reference, picked) {
+  return {
+    field: layer.color?.field ?? (reference ? "reference" : "progress"),
+    scheme: layer.color?.scheme ?? (reference ? "rainbow" : DEFAULT_FAMILIES[picked % DEFAULT_FAMILIES.length])
+  };
+}
+var PALE = 0.82;
+var DEEP = 0.28;
+function schemeHsl(scheme, t) {
+  const x = Math.max(0, Math.min(1, t));
+  if (scheme === "rainbow") {
+    return { h: x * REFERENCE_RAMP_MAX_HUE, s: 0.7, l: 0.5 };
+  }
+  const family = WALK_SCHEMES.find((s) => s.value === scheme);
+  const l = PALE + (DEEP - PALE) * x;
+  return family && "hue" in family ? { h: family.hue, s: 0.75, l } : { h: 0, s: 0, l };
+}
+function schemeCss(scheme, t) {
+  const { h, s, l } = schemeHsl(scheme, t);
+  return `hsl(${h}, ${s * 100}%, ${l * 100}%)`;
+}
+function schemeColor(scheme, t) {
+  const { h, s, l } = schemeHsl(scheme, t);
+  const [r, g, b] = hslToRgb(h, s, l);
+  return packAbgr3(
+    Math.round(r * 255),
+    Math.round(g * 255),
+    Math.round(b * 255),
+    255
+  );
+}
+var NO_VALUE_COLOR = REFERENCE_RAMP_ALT_COLOR;
+var STRAND_T = { same: 0.2, reversed: 0.95 };
+function encodingSwatchCss({ field, scheme }) {
+  if (field === "strand") {
+    const same = schemeCss(scheme, STRAND_T.same);
+    const reversed = schemeCss(scheme, STRAND_T.reversed);
+    return `linear-gradient(to right, ${same} 50%, ${reversed} 50%)`;
+  }
+  const stops = Array.from({ length: 7 }, (_, i) => {
+    const t = i / 6;
+    return `${schemeCss(scheme, t)} ${t * 100}%`;
+  });
+  return `linear-gradient(to right, ${stops.join(", ")})`;
+}
+function fieldLegend(field) {
+  return WALK_FIELDS.find((f) => f.value === field).legend;
+}
+
 // 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) {
@@ -5202,7 +5336,6 @@ function walkHighlight(graph, name) {
   graph.edges.forEach((e, i) => {
     edgeAt.set(`${e.from}>${e.to}`, i);
   });
-  const nodeIds = new Set(path.nodeIds);
   const edgeIndexes = /* @__PURE__ */ new Set();
   for (let i = 1; i < path.nodeIds.length; i++) {
     const a = path.nodeIds[i - 1];
@@ -5212,15 +5345,87 @@ function walkHighlight(graph, name) {
       edgeIndexes.add(index);
     }
   }
-  const bpOf = (ids) => ids.reduce((sum, id) => sum + (byId.get(id)?.length ?? 0), 0);
-  const reference = graph.referencePath ? graph.paths.find((p) => pathOrigin(p.name).name === graph.referencePath) : void 0;
+  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);
   return {
     name,
-    nodeIds,
+    reference: reference === path,
+    nodeIds: new Set(path.nodeIds),
     edgeIndexes,
+    progress,
     steps: path.nodeIds.length,
-    bp: bpOf(path.nodeIds),
-    referenceBp: reference && reference !== path ? bpOf(reference.nodeIds) : void 0
+    bp,
+    referenceBp: reference && reference !== path ? reference.nodeIds.reduce((sum, id) => sum + lengthOf(id), 0) : void 0
+  };
+}
+function laneColors(graph, walk, { field, scheme }, ramp) {
+  const colors = /* @__PURE__ */ new Map();
+  const byId = new Map(graph.nodes.map((n) => [n.id, n]));
+  const walkPath = pathOrigin(walk.name).name;
+  const reference = referenceOf(graph);
+  const referencePath = reference ? pathOrigin(reference.name).name : void 0;
+  const path = graph.paths.find((p) => p.name === walk.name);
+  const visits = /* @__PURE__ */ new Map();
+  for (const id of path.nodeIds) {
+    visits.set(id, (visits.get(id) ?? 0) + 1);
+  }
+  const strandOf = (segment, of) => graph.pathVisits?.get(segment)?.find((v) => v.path === of)?.strand;
+  for (const [id, progress] of walk.progress) {
+    const node = byId.get(id);
+    let t;
+    if (field === "progress") {
+      t = progress;
+    } else if (field === "visits") {
+      t = (Math.min(visits.get(id) ?? 1, 4) - 1) / 3;
+    } else if (field === "reference") {
+      const mid = ramp?.midpoints.get(id);
+      t = ramp && mid !== void 0 && !(node?.stable && node.stable.rank > 0) ? (mid - ramp.start) / ramp.span : void 0;
+    } else if (node) {
+      const own = strandOf(node.name, walkPath);
+      const theirs = strandOf(node.name, referencePath);
+      t = own && theirs ? own === theirs ? STRAND_T.same : STRAND_T.reversed : void 0;
+    }
+    colors.set(id, t === void 0 ? NO_VALUE_COLOR : schemeColor(scheme, t));
+  }
+  return colors;
+}
+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++
+    );
+    return {
+      ...walk,
+      encoding,
+      colors: laneColors(graph, walk, encoding, ramp)
+    };
+  });
+  return {
+    walks,
+    nodeIds: new Set(walks.flatMap((w) => [...w.nodeIds])),
+    edgeIndexes: new Set(walks.flatMap((w) => [...w.edgeIndexes])),
+    names: new Set(walks.map((w) => w.name))
   };
 }
 
@@ -6053,6 +6258,8 @@ export {
   REFERENCE_RAMP_MAX_HUE,
   REFERENCE_STRIP_ZONE_PX,
   ROW_HEIGHT_PX,
+  WALK_FIELDS,
+  WALK_SCHEMES,
   WELL_KNOWN_SAMPLES,
   assemblyWalk,
   axisScaleOf,
@@ -6075,9 +6282,11 @@ export {
   drawTubeMapGenes,
   drawTubeMapRuler,
   drawingBounds,
+  encodingSwatchCss,
   engineKey,
   engineRequest,
   featuresOnBackbone,
+  fieldLegend,
   findHoveredEdge,
   findHoveredNode,
   fitTransform,
@@ -6111,8 +6320,10 @@ export {
   referenceSamplesOf,
   referenceStripBlocks,
   resolveColorScheme,
+  resolveEncoding,
   resolveReferenceSample,
   rulerBoxes,
+  schemeCss,
   screenToLayout,
   stripBlockAt,
   tubeMapConnectors,
@@ -6123,6 +6334,7 @@ export {
   tubeX,
   viewportOf,
   walkHighlight,
+  walkLift,
   walkRows,
   walkRowsExtent,
   warpX,

package/dist/types/index.d.ts

@@ -32,7 +32,10 @@ export type { Connector, ReferenceNode } from './tubeMap/connectors.js';
 export type { TubeMapColumn, TubeMapDrawing } from './layout/tubeMapLayout.js';
 export { deletionEdges } from './deletionEdges.js';
 export type { DeletionEdge } from './deletionEdges.js';
-export { walkHighlight } from './walkHighlight.js';
+export { walkHighlight, walkLift } from './walkHighlight.js';
+export type { LiftedWalk, WalkLift } from './walkHighlight.js';
+export { WALK_FIELDS, WALK_SCHEMES, encodingSwatchCss, fieldLegend, resolveEncoding, schemeCss, } from './walkEncoding.js';
+export type { WalkEncoding, WalkField, WalkLayer, WalkScheme, } from './walkEncoding.js';
 export { pathColorsLegible, pathLegend } from './pathColors.js';
 export { bubblesFromGraph } from './bubbles/bubblesFromGraph.js';
 export { bubbleHalos } from './bubbles/bubbleHalos.js';

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

@@ -0,0 +1,5 @@
+import type { Graph } from '../types.js';
+export declare function trimToWindow(graph: Graph, window: {
+    start: number;
+    end: number;
+}): Graph;

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

@@ -1,7 +1,7 @@
 import type { ResolvedColorScheme } from '../colorSchemes.js';
 import type { NodeWidth } from '../nodeWidths.js';
 import type { Graph, GraphNode, NodeSegment } from '../types.js';
-import type { WalkHighlight } from '../walkHighlight.js';
+import type { WalkLift } from '../walkHighlight.js';
 import type { RenderBatch } from './types.js';
 import type { AxisScale, BezierCurve } from '../util/geometry.js';
 export declare const FADED_ALPHA = 0.18;
@@ -14,7 +14,7 @@ export interface BuildOptions {
     connectorThickness: number;
     drawPaths: boolean;
     nodeWidth?: NodeWidth;
-    highlight?: WalkHighlight;
+    highlight?: WalkLift;
     axis: AxisScale;
     linearLayout?: boolean;
     viewportBounds?: {
@@ -30,6 +30,7 @@ export interface BuildOptions {
 }
 export declare function hslToRgb(h: number, s: number, l: number): [number, number, number];
 export declare const REFERENCE_RAMP_MAX_HUE = 300;
+export declare const REFERENCE_RAMP_ALT_COLOR: number;
 export declare const REFERENCE_RAMP_ALT_CSS: string;
 export interface ReferenceRamp {
     start: number;

package/dist/types/walkEncoding.d.ts

@@ -0,0 +1,70 @@
+export declare const WALK_FIELDS: readonly [{
+    readonly value: "progress";
+    readonly label: "Progress along the walk";
+    readonly legend: "pale where the walk starts, deep where it ends";
+}, {
+    readonly value: "reference";
+    readonly label: "Reference position";
+    readonly legend: "along the reference left to right, charcoal off it";
+}, {
+    readonly value: "strand";
+    readonly label: "Strand against the reference";
+    readonly legend: "pale where the walk runs as the reference does, deep where reversed";
+}, {
+    readonly value: "visits";
+    readonly label: "Visits";
+    readonly legend: "pale where the walk passes once, deep four times or more";
+}];
+export type WalkField = (typeof WALK_FIELDS)[number]['value'];
+export declare const WALK_SCHEMES: readonly [{
+    readonly value: "rainbow";
+    readonly label: "Rainbow";
+}, {
+    readonly value: "blues";
+    readonly label: "Blues";
+    readonly hue: 215;
+}, {
+    readonly value: "reds";
+    readonly label: "Reds";
+    readonly hue: 0;
+}, {
+    readonly value: "greens";
+    readonly label: "Greens";
+    readonly hue: 130;
+}, {
+    readonly value: "oranges";
+    readonly label: "Oranges";
+    readonly hue: 30;
+}, {
+    readonly value: "purples";
+    readonly label: "Purples";
+    readonly hue: 280;
+}, {
+    readonly value: "greys";
+    readonly label: "Greys";
+}];
+export type WalkScheme = (typeof WALK_SCHEMES)[number]['value'];
+export interface WalkEncoding {
+    field: WalkField;
+    scheme: WalkScheme;
+}
+export interface WalkLayer {
+    walk: string;
+    color?: Partial<WalkEncoding>;
+}
+export declare function resolveEncoding(layer: WalkLayer, reference: boolean, picked: number): WalkEncoding;
+export declare function schemeHsl(scheme: WalkScheme, t: number): {
+    h: number;
+    s: number;
+    l: number;
+};
+export declare function schemeCss(scheme: WalkScheme, t: number): string;
+export declare function schemeColor(scheme: WalkScheme, t: number): number;
+export declare const NO_VALUE_COLOR: number;
+export declare const NO_VALUE_CSS: string;
+export declare const STRAND_T: {
+    same: number;
+    reversed: number;
+};
+export declare function encodingSwatchCss({ field, scheme }: WalkEncoding): string;
+export declare function fieldLegend(field: WalkField): "pale where the walk starts, deep where it ends" | "along the reference left to right, charcoal off it" | "pale where the walk runs as the reference does, deep where reversed" | "pale where the walk passes once, deep four times or more";

package/dist/types/walkHighlight.d.ts

@@ -1,10 +1,25 @@
+import type { ReferenceRamp } from './renderer/GeometryBuilder.js';
 import type { Graph } from './types.js';
+import type { WalkEncoding, WalkLayer } from './walkEncoding.js';
 export interface WalkHighlight {
     name: string;
+    reference: boolean;
     nodeIds: Set<string>;
     edgeIndexes: Set<number>;
+    progress: Map<string, number>;
     steps: number;
     bp: number;
     referenceBp?: number;
 }
+export interface LiftedWalk extends WalkHighlight {
+    encoding: WalkEncoding;
+    colors: Map<string, number>;
+}
+export interface WalkLift {
+    walks: LiftedWalk[];
+    nodeIds: Set<string>;
+    edgeIndexes: Set<number>;
+    names: Set<string>;
+}
 export declare function walkHighlight(graph: Graph, name: string): WalkHighlight | undefined;
+export declare function walkLift(graph: Graph, layers: readonly WalkLayer[], ramp?: ReferenceRamp): WalkLift | undefined;

package/package.json

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