@jbrowse/display-ui 4.3.0 → 5.0.0-beta.10

package/esm/valueScale.d.ts

@@ -0,0 +1,72 @@
+import type { ScoreRuleMark } from './ScoreRules.tsx';
+import type { YScaleTicks } from './yScaleTicks.ts';
+export type AxisSide = 'left' | 'right';
+/**
+ * #api
+ * One reference line a value scale declares, at a value in the scale's own
+ * units. `label` is free text and carries no meaning the chrome assigns: over
+ * a coverage plot "2 copies" is a claim only the author can make, since no
+ * ploidy can be assumed.
+ */
+export interface ValueScaleRule {
+    value: number;
+    color?: string;
+    label?: string;
+}
+/**
+ * #api
+ * A value scale a display places its y through, declared so the chrome can
+ * derive the axis from it — the score axis's counterpart to a colour scale.
+ *
+ * `domain` is the resolved `[min, max]`; `height` the band it rules and
+ * `offset` the inset of the plot box inside that band (`axisPlotBox(height,
+ * offset)`); `minimalTicks` and `symlogConstant` how the ticks are chosen.
+ * `ticks` is the display's own ladder where the band's arithmetic is its own
+ * (the coverage band's octaves against the shader's box, the read cloud's
+ * decades against the arc geometry); `ScoreScaleMixin` derives one through
+ * `computeYTicks` otherwise.
+ *
+ * `bandTops` is the screen y of each band the scale rules — one at 0 unless
+ * the display stacks the same plot: the multi-wiggle's rows, a grouped
+ * alignments track's coverage band per group, each projected through the
+ * display's own scroll; the chrome drops the ones off screen. `[]` is a scale
+ * the display maps to colour rather than to y (density rows each in their own
+ * colour), which gets the `[min, max]` caption and no axis, as a scale whose
+ * bands are too short for one does. `side` and `left` are which of the band's
+ * edges the display's own panels leave clear for a gutter: `right` where a
+ * group label chip takes the left, `left: n` where a dendrogram takes the
+ * first `n` px. `caption` is what the scale measures (`TLEN`), as a colour
+ * scale's `field` is; the chrome draws it once for the scale, beside the
+ * bands on screen, however many it rules. `rules` are the reference lines the
+ * scale declares and `grid` a line at every tick, both drawn across every
+ * band.
+ *
+ * A member describes the scale or the band it rules, never the axis — not an
+ * orientation, a form, a gutter width or a font. The chrome reads a member to
+ * keep off what the display put in the band, never to choose between two
+ * drawings of it (ADR-109).
+ */
+export interface ValueScale {
+    domain: [number, number] | undefined;
+    scaleType: string;
+    height: number;
+    offset?: number;
+    minimalTicks?: boolean;
+    symlogConstant?: number;
+    ticks?: YScaleTicks;
+    bandTops?: number[];
+    side?: AxisSide;
+    left?: number;
+    caption?: string;
+    rules?: readonly ValueScaleRule[];
+    grid?: boolean;
+}
+/**
+ * A value scale whose ticks resolved: what the chrome draws. `ruleMarks` are
+ * its `rules` inside the domain, each at its y in the band's pixel space.
+ */
+export interface YAxis extends ValueScale {
+    domain: [number, number];
+    ticks: YScaleTicks;
+    ruleMarks?: ScoreRuleMark[];
+}

package/esm/valueScale.js

@@ -0,0 +1 @@
+export {};

package/esm/yAxisConstants.d.ts

@@ -0,0 +1,7 @@
+export declare const YSCALEBAR_LABEL_OFFSET = 5;
+export declare const AXIS_FONT_PX = 10;
+export declare const TICK_LABEL_X_PX = 9;
+export declare const CAPTION_INSET_PX = 8;
+export declare const CAPTION_BAND_PX = 13;
+export declare const SCORE_CAPTION_HEIGHT = 16;
+export declare const DEFAULT_RULE_COLOR = "rgb(120,120,120)";

package/esm/yAxisConstants.js

@@ -0,0 +1,19 @@
+// Vertical inset a plot box reserves above and below itself so the top and
+// bottom y-axis labels aren't clipped. Its own module because both index.ts
+// (which re-exports computeYTicks) and computeYTicks.ts need it — importing it
+// from index.ts would close a cycle.
+export const YSCALEBAR_LABEL_OFFSET = 5;
+// A tick label's font size and how far from the spine it ends, and a
+// caption's font size.
+export const AXIS_FONT_PX = 10;
+export const TICK_LABEL_X_PX = 9;
+// How far in from its gutter's outer edge a caption's rotated baseline sits,
+// and the outer band of the gutter the caption then takes: its glyphs, their
+// halo and a px before the tick labels.
+export const CAPTION_INSET_PX = 8;
+export const CAPTION_BAND_PX = 13;
+// The height one score caption occupies above the plot.
+export const SCORE_CAPTION_HEIGHT = 16;
+// The grey a reference line is drawn in where neither the rule nor its display
+// names another.
+export const DEFAULT_RULE_COLOR = 'rgb(120,120,120)';

package/esm/yScaleTicks.d.ts

@@ -0,0 +1,49 @@
+export interface YScaleTicks {
+    items: {
+        value: number;
+        y: number;
+        label?: string;
+    }[];
+    yTop: number;
+    yBottom: number;
+}
+/**
+ * The plot box a wiggle-family display insets inside its own height, for both
+ * sides of the contract above: the renderer positions its canvas at `yTop` and
+ * draws `plotHeight` tall, and the axis puts domain-max at `yTop` and
+ * domain-min at `yBottom`.
+ *
+ * One function because the two have to agree exactly, and `height - 2 * offset`
+ * spelled out at each end is how they stopped: `computeYTicks` derived its own
+ * bottom as `height - offset - 1`, and every tick above it inherited a fraction
+ * of that pixel.
+ */
+export declare function axisPlotBox(height: number, offset?: number): {
+    yTop: number;
+    yBottom: number;
+    plotHeight: number;
+};
+/**
+ * Screen y for an already-normalized ([0,1], 0 at domain-min) score. The
+ * composition of {@link axisPlotBox} with a `makeScoreNormalizer` result, which
+ * is what a tick at that score must land on.
+ */
+export declare function scoreToAxisY(normalized: number, box: ReturnType<typeof axisPlotBox>): number;
+/**
+ * Width of the gutter an axis is drawn in, on screen and in the export
+ * margin alike, unless a caption beside wide labels grows it
+ * (`axisGutterWidth`). `YScaleBar` grows its ticks and numbers away from the spine,
+ * and `x = ±9`, `fontSize 10` put a label of ordinary width inside this many
+ * px; the alignments coverage axis and the MAF band axes had each arrived at
+ * the same number independently, so a change to the labels moved neither.
+ */
+export declare const AXIS_GUTTER_WIDTH_PX = 50;
+/**
+ * Keep a 1px stroke's center inside the axis box. At `yBottom` — the box's own
+ * bottom edge — the stroke has to cover the pixel *above* the boundary, since
+ * the one below belongs to whatever is drawn next; in multi-wiggle, where rows
+ * stack edge to edge, that is literally the next sample's first row of pixels.
+ * Callers pass whatever stroke center their own convention gives (the axis
+ * crispens to `y + 0.5`, the guide lines don't); only the bottom edge moves.
+ */
+export declare function clampStrokeInsideAxis(strokeY: number, yBottom: number): number;

package/esm/yScaleTicks.js

@@ -0,0 +1,47 @@
+import { YSCALEBAR_LABEL_OFFSET } from './yAxisConstants.js';
+/**
+ * The plot box a wiggle-family display insets inside its own height, for both
+ * sides of the contract above: the renderer positions its canvas at `yTop` and
+ * draws `plotHeight` tall, and the axis puts domain-max at `yTop` and
+ * domain-min at `yBottom`.
+ *
+ * One function because the two have to agree exactly, and `height - 2 * offset`
+ * spelled out at each end is how they stopped: `computeYTicks` derived its own
+ * bottom as `height - offset - 1`, and every tick above it inherited a fraction
+ * of that pixel.
+ */
+export function axisPlotBox(height, offset = YSCALEBAR_LABEL_OFFSET) {
+    return {
+        yTop: offset,
+        yBottom: height - offset,
+        plotHeight: height - 2 * offset,
+    };
+}
+/**
+ * Screen y for an already-normalized ([0,1], 0 at domain-min) score. The
+ * composition of {@link axisPlotBox} with a `makeScoreNormalizer` result, which
+ * is what a tick at that score must land on.
+ */
+export function scoreToAxisY(normalized, box) {
+    return box.yTop + (1 - normalized) * box.plotHeight;
+}
+/**
+ * Width of the gutter an axis is drawn in, on screen and in the export
+ * margin alike, unless a caption beside wide labels grows it
+ * (`axisGutterWidth`). `YScaleBar` grows its ticks and numbers away from the spine,
+ * and `x = ±9`, `fontSize 10` put a label of ordinary width inside this many
+ * px; the alignments coverage axis and the MAF band axes had each arrived at
+ * the same number independently, so a change to the labels moved neither.
+ */
+export const AXIS_GUTTER_WIDTH_PX = 50;
+/**
+ * Keep a 1px stroke's center inside the axis box. At `yBottom` — the box's own
+ * bottom edge — the stroke has to cover the pixel *above* the boundary, since
+ * the one below belongs to whatever is drawn next; in multi-wiggle, where rows
+ * stack edge to edge, that is literally the next sample's first row of pixels.
+ * Callers pass whatever stroke center their own convention gives (the axis
+ * crispens to `y + 0.5`, the guide lines don't); only the bottom edge moves.
+ */
+export function clampStrokeInsideAxis(strokeY, yBottom) {
+    return Math.min(strokeY, yBottom - 0.5);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/display-ui",
-  "version": "4.3.0",
+  "version": "5.0.0-beta.10",
   "type": "module",
   "description": "The UI a display draws that is not data: the swappable chrome contract, its toolkit-free implementations, and the track overlay layer",
   "keywords": [
@@ -18,13 +18,20 @@
   },
   "author": "JBrowse Team",
   "main": "esm/index.js",
+  "exports": {
+    ".": "./esm/index.js",
+    "./axisPlacement": "./esm/axisPlacement.js",
+    "./embed": "./esm/embed/index.js",
+    "./yAxisConstants": "./esm/yAxisConstants.js",
+    "./yScaleTicks": "./esm/yScaleTicks.js"
+  },
   "files": [
     "esm"
   ],
   "dependencies": {
-    "@jbrowse/mobx-state-tree": "^6.5.1",
+    "@jbrowse/mobx-state-tree": "^6.6.1",
     "mobx-react": "^10.0.2",
-    "@jbrowse/core": "^4.3.0"
+    "@jbrowse/core": "^5.0.0-beta.10"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -41,8 +48,5 @@
     "clean": "rimraf esm *.tsbuildinfo",
     "prebuild": "pnpm clean"
   },
-  "types": "esm/index.d.ts",
-  "exports": {
-    ".": "./esm/index.js"
-  }
+  "types": "esm/index.d.ts"
 }