@jbrowse/bandage-core 0.1.17 → 0.1.18

package/README.md

@@ -9,11 +9,13 @@ npm install @jbrowse/bandage-core
 ```
 
 - GFA and rGFA text in (`loadGraph`)
-- Layouts: Bandage's FMMM engine as WASM (`loadBandage`, `forceLayout`), variant
-  map, ordered, anchored, sample rows, walk rows, tube map
+- Layouts: Bandage's FMMM engine as WASM (`loadBandage`, `forceLayout`),
+  ordered, anchored, sample rows, walk rows, tube map
 - A Canvas2D renderer (`buildGeometry`, `Canvas2DRenderer`), hit testing and
   label placement
 - Bubbles, deletion edges, path colors, gbz-base windows cut to GFA
+- Walks lifted out of the drawing (`walkLift`), one facet panel per walk
+  (`facetLifts`, `facetGrid`) and each walk's key in words (`walkKey`)
 - Which assembly a backbone lies on (`graphBackbone`, `backboneAssembly`,
   `assemblyWalk`), and the genes on it: `featuresOnBackbone` renames an
   assembly's genes onto the backbone's refNames, and `genePins` pins only those

package/dist/index.js

@@ -5251,17 +5251,9 @@ 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: "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: "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"] },
@@ -5339,9 +5331,6 @@ function encodingSwatchCss({ field, scheme }) {
   });
   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) {
@@ -5455,6 +5444,30 @@ function walkLift(graph, layers, ramp) {
       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,
@@ -5464,6 +5477,75 @@ function walkLift(graph, layers, ramp) {
   };
 }
 
+// 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;
 
@@ -6281,6 +6363,9 @@ export {
   BUBBLE_SPREADS,
   COLOR_SCHEMES,
   Canvas2DRenderer,
+  FACET_GAP_PX,
+  FACET_PAD_PX,
+  FACET_TITLE_PX,
   FIT_PADDING,
   FORCE_LAYOUT_LABEL,
   HALO_FACTOR,
@@ -6320,8 +6405,9 @@ export {
   encodingSwatchCss,
   engineKey,
   engineRequest,
+  facetGrid,
+  facetLifts,
   featuresOnBackbone,
-  fieldLegend,
   findHoveredEdge,
   findHoveredNode,
   fitTransform,
@@ -6369,6 +6455,7 @@ export {
   tubeX,
   viewportOf,
   walkHighlight,
+  walkKey,
   walkLift,
   walkRows,
   walkRowsExtent,

package/dist/types/facetGrid.d.ts

@@ -0,0 +1,21 @@
+export declare const FACET_GAP_PX = 8;
+export declare const FACET_TITLE_PX = 34;
+export declare const FACET_PAD_PX = 12;
+export interface FacetGrid {
+    columns: number;
+    width: number;
+    height: number;
+    scale: number;
+    total: number;
+}
+export declare function facetGrid({ count, bounds, pixelRows, width, room, columns, }: {
+    count: number;
+    bounds: {
+        w: number;
+        h: number;
+    };
+    pixelRows: boolean;
+    width: number;
+    room: number;
+    columns?: number;
+}): FacetGrid;

package/dist/types/index.d.ts

@@ -32,9 +32,12 @@ 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, walkLift } from './walkHighlight.js';
+export { facetLifts, walkHighlight, walkLift } from './walkHighlight.js';
+export { walkKey } from './walkKey.js';
+export { FACET_GAP_PX, FACET_PAD_PX, FACET_TITLE_PX, facetGrid, } from './facetGrid.js';
+export type { FacetGrid } from './facetGrid.js';
 export type { LiftedWalk, WalkLift } from './walkHighlight.js';
-export { WALK_FIELDS, WALK_SCHEMES, encodingSwatchCss, fieldLegend, resolveEncoding, schemeCss, } from './walkEncoding.js';
+export { WALK_FIELDS, WALK_SCHEMES, encodingSwatchCss, 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';

package/dist/types/walkEncoding.d.ts

@@ -1,15 +1,12 @@
 export declare const WALK_FIELDS: readonly [{
     readonly value: "progress";
     readonly label: "Progress along the walk";
-    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";
 }];
 export type WalkField = (typeof WALK_FIELDS)[number]['value'];
 export declare const WALK_SCHEMES: readonly [{
@@ -51,6 +48,4 @@ 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 function encodingSwatchCss({ field, scheme }: WalkEncoding): string;
-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

@@ -34,3 +34,4 @@ export interface WalkLift {
 }
 export declare function walkHighlight(graph: Graph, name: string): WalkHighlight | undefined;
 export declare function walkLift(graph: Graph, layers: readonly WalkLayer[], ramp?: ReferenceRamp): WalkLift | undefined;
+export declare function facetLifts(graph: Graph, lift: WalkLift, layers: readonly WalkLayer[], ramp?: ReferenceRamp): WalkLift[];

package/dist/types/walkKey.d.ts

@@ -0,0 +1,12 @@
+import type { LiftedWalk } from './walkHighlight.js';
+export declare function walkKey(walk: LiftedWalk, reference?: {
+    name?: string;
+    start: number;
+    end: number;
+}): {
+    delta: string;
+    reversed: string;
+    shades: boolean;
+    scale: string | undefined;
+    hover: string | undefined;
+};

package/package.json

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