@jbrowse/display-ui 5.0.0-beta.8 → 5.0.0-beta.9

package/esm/valueScale.d.ts

@@ -1,5 +1,18 @@
+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
@@ -23,7 +36,9 @@ export type AxisSide = 'left' | 'right';
  * 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.
+ * 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, which the chrome draws 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
@@ -42,9 +57,14 @@ export interface ValueScale {
     side?: AxisSide;
     left?: number;
     caption?: string;
+    rules?: readonly ValueScaleRule[];
 }
-/** A value scale whose ticks resolved: what the chrome draws. */
+/**
+ * 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/yAxisConstants.d.ts

@@ -1 +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

@@ -3,3 +3,17 @@
 // (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

@@ -31,7 +31,8 @@ export declare function axisPlotBox(height: number, offset?: number): {
 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. `YScaleBar` grows its ticks and numbers away from the spine,
+ * 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.

package/esm/yScaleTicks.js

@@ -27,7 +27,8 @@ export function scoreToAxisY(normalized, box) {
 }
 /**
  * Width of the gutter an axis is drawn in, on screen and in the export
- * margin alike. `YScaleBar` grows its ticks and numbers away from the spine,
+ * 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/display-ui",
-  "version": "5.0.0-beta.8",
+  "version": "5.0.0-beta.9",
   "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": [
@@ -20,15 +20,18 @@
   "main": "esm/index.js",
   "exports": {
     ".": "./esm/index.js",
-    "./yAxisConstants": "./esm/yAxisConstants.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.5.2",
     "mobx-react": "^10.0.2",
-    "@jbrowse/core": "^5.0.0-beta.8"
+    "@jbrowse/core": "^5.0.0-beta.9"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/esm/formatScore.d.ts

@@ -1 +0,0 @@
-export declare function formatScore(n: number): string;

package/esm/formatScore.js

@@ -1,14 +0,0 @@
-// Only the fractional padding toPrecision adds is noise; guard on the decimal
-// point because toPrecision can round UP out of the fractional form entirely —
-// 99.95 comes back as "100", where an unguarded trailing-zero strip eats two
-// significant digits and reports the score as 1.
-export function formatScore(n) {
-    if (n === 0) {
-        return '0';
-    }
-    if (Math.abs(n) >= 100) {
-        return n.toFixed(0);
-    }
-    const s = n.toPrecision(3);
-    return s.includes('.') ? s.replace(/\.?0+$/, '') : s;
-}