@jbrowse/bandage-core 0.1.16 → 0.1.17

package/dist/index.js

@@ -979,9 +979,15 @@ 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 } = {}) {
-  const usableWidth = paneWidth - padLeft - FIT_PADDING;
-  const usableHeight = paneHeight - padTop - FIT_PADDING;
+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;
   }
@@ -2855,10 +2861,11 @@ 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 = 3;
+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;
@@ -3445,13 +3452,13 @@ function buildGeometry(options) {
     if (viewportBounds && !isPolylineInBounds(segments, viewportBounds)) {
       continue;
     }
-    const own = getNodeColor(
+    const faded = highlight !== void 0 && !highlight.nodeIds.has(nodeId);
+    const own = faded ? LIFT_BACKDROP_COLOR : getNodeColor(
       node,
       nodeIndexMap.get(nodeId) ?? 0,
       colorScheme,
       colorRange
     );
-    const faded = highlight !== void 0 && !highlight.nodeIds.has(nodeId);
     const color = faded ? fadeAbgr(own, FADED_ALPHA) : own;
     const width = nodeWidthPx(node, contigThickness, nodeWidth2, depthNorm);
     const nodeThickness = width / 2;
@@ -4081,13 +4088,14 @@ var OVERHANG_PX = 5;
 function referenceStripBlocks(graph, {
   colorScheme,
   referenceRamp,
-  walkNodes
+  walkNodes,
+  walkColors
 }) {
   const range = { ...computeColorSchemeRange(graph), referenceRamp };
   const out = [];
   graph.nodes.forEach((node, index) => {
     if (isBackbone(node)) {
-      const own = getNodeColor(node, index, colorScheme, range);
+      const own = walkNodes ? walkColors?.get(node.id) ?? LIFT_BACKDROP_COLOR : getNodeColor(node, index, colorScheme, range);
       out.push({
         node: node.id,
         bp0: node.stable.start,
@@ -5246,78 +5254,84 @@ var WALK_FIELDS = [
   {
     value: "progress",
     label: "Progress along the walk",
-    legend: "pale where the walk starts, deep where it ends"
+    legend: "light where each walk starts, dark where it ends"
   },
+  { value: "walk", label: "One colour for the walk", legend: "" },
   {
     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"
+  { 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" }
 ];
-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 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);
 }
-var PALE = 0.82;
-var DEEP = 0.28;
-function schemeHsl(scheme, t) {
+function schemeRgb(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 };
+  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 { h, s, l } = schemeHsl(scheme, t);
-  return `hsl(${h}, ${s * 100}%, ${l * 100}%)`;
+  const [r, g, b] = schemeRgb(scheme, t).map(Math.round);
+  return `rgb(${r}, ${g}, ${b})`;
 }
 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
-  );
+  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;
-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%)`;
+  if (field === "walk") {
+    return schemeCss(scheme, BASE_T);
   }
   const stops = Array.from({ length: 7 }, (_, i) => {
     const t = i / 6;
@@ -5364,9 +5378,16 @@ function walkHighlight(graph, name) {
     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,
@@ -5375,37 +5396,39 @@ function walkHighlight(graph, name) {
     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();
+function laneColors(graph, walk, encoding, ramp) {
   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;
+  const colors = /* @__PURE__ */ new Map();
   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));
+    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) => {
@@ -5420,16 +5443,21 @@ function walkLift(graph, layers, ramp) {
     const encoding = resolveEncoding(
       layer,
       walk.reference,
-      walk.reference ? 0 : picked++
+      walk.reference ? 0 : picked++,
+      lifted.length === 1
     );
+    const { reversed, bp } = reversedNodes(graph, walk);
     return {
       ...walk,
       encoding,
-      colors: laneColors(graph, walk, encoding, ramp)
+      colors: laneColors(graph, walk, encoding, ramp),
+      reversed,
+      reversedBp: bp
     };
   });
   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))

package/dist/types/pipeline.d.ts

@@ -60,10 +60,12 @@ export declare function fitTransform(bounds: {
     minY: number;
     w: number;
     h: number;
-}, paneWidth: number, paneHeight: number, pixelRows: boolean, { minScale, padLeft, padTop }?: {
+}, paneWidth: number, paneHeight: number, pixelRows: boolean, { minScale, padLeft, padTop, padRight, padBottom, }?: {
     minScale?: number | undefined;
     padLeft?: number | undefined;
     padTop?: number | undefined;
+    padRight?: number | undefined;
+    padBottom?: number | undefined;
 }): {
     scale: number;
     translateX: number;

package/dist/types/referenceStrip.d.ts

@@ -9,10 +9,11 @@ export interface StripBlock {
     bp1: number;
     color: string;
 }
-export declare function referenceStripBlocks(graph: Graph, { colorScheme, referenceRamp, walkNodes, }: {
+export declare function referenceStripBlocks(graph: Graph, { colorScheme, referenceRamp, walkNodes, walkColors, }: {
     colorScheme: ResolvedColorScheme;
     referenceRamp?: ReferenceRamp;
     walkNodes?: ReadonlySet<string>;
+    walkColors?: ReadonlyMap<string, number>;
 }): StripBlock[];
 export interface BpFrame {
     scale: number;

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

@@ -4,6 +4,7 @@ import type { Graph, GraphNode, NodeSegment } from '../types.js';
 import type { WalkLift } from '../walkHighlight.js';
 import type { RenderBatch } from './types.js';
 import type { AxisScale, BezierCurve } from '../util/geometry.js';
+export declare const LIFT_BACKDROP_COLOR: number;
 export declare const FADED_ALPHA = 0.18;
 export interface BuildOptions {
     nodePositions: Record<string, NodeSegment[]>;

package/dist/types/walkEncoding.d.ts

@@ -1,47 +1,40 @@
 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 legend: "light where each walk starts, dark where it ends";
+}, {
+    readonly value: "walk";
+    readonly label: "One colour for the walk";
+    readonly legend: "";
 }, {
     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: "grey";
+    readonly label: "Grey to black";
+    readonly ends: readonly ["#a3a3a3", "#151515"];
 }, {
-    readonly value: "reds";
-    readonly label: "Reds";
-    readonly hue: 0;
+    readonly value: "blue";
+    readonly label: "Cyan to navy";
+    readonly ends: readonly ["#6ee0f0", "#0b2c7a"];
 }, {
-    readonly value: "greens";
-    readonly label: "Greens";
-    readonly hue: 130;
+    readonly value: "red";
+    readonly label: "Yellow to red";
+    readonly ends: readonly ["#ffd24a", "#b3121b"];
 }, {
-    readonly value: "oranges";
-    readonly label: "Oranges";
-    readonly hue: 30;
+    readonly value: "purple";
+    readonly label: "Pink to plum";
+    readonly ends: readonly ["#f5a3d8", "#5e1a6e"];
 }, {
-    readonly value: "purples";
-    readonly label: "Purples";
-    readonly hue: 280;
+    readonly value: "green";
+    readonly label: "Lime to forest";
+    readonly ends: readonly ["#b6e36c", "#0b5d3b"];
 }, {
-    readonly value: "greys";
-    readonly label: "Greys";
+    readonly value: "rainbow";
+    readonly label: "Rainbow";
 }];
 export type WalkScheme = (typeof WALK_SCHEMES)[number]['value'];
 export interface WalkEncoding {
@@ -52,19 +45,12 @@ 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 resolveEncoding(layer: WalkLayer, reference: boolean, picked: number, alone?: boolean): WalkEncoding;
+export declare function schemeRgb(scheme: WalkScheme, t: number): number[];
 export declare function schemeCss(scheme: WalkScheme, t: number): string;
 export declare function schemeColor(scheme: WalkScheme, t: number): number;
+export declare function encodedColor({ field, scheme }: WalkEncoding, 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";
+export declare function fieldLegend(field: WalkField): "" | "light where each walk starts, dark where it ends" | "along the reference left to right, charcoal off it";

package/dist/types/walkHighlight.d.ts

@@ -10,13 +10,24 @@ export interface WalkHighlight {
     steps: number;
     bp: number;
     referenceBp?: number;
+    range?: {
+        contig: string;
+        start: number;
+        end: number;
+    };
 }
 export interface LiftedWalk extends WalkHighlight {
     encoding: WalkEncoding;
     colors: Map<string, number>;
+    reversed: Set<string>;
+    reversedBp: number;
 }
 export interface WalkLift {
     walks: LiftedWalk[];
+    referenceDomain?: {
+        start: number;
+        end: number;
+    };
     nodeIds: Set<string>;
     edgeIndexes: Set<number>;
     names: Set<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/bandage-core",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "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": {