@jbrowse/wiggle-core 4.3.0 → 5.0.0-beta.10

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@jbrowse/wiggle-core",
-  "version": "4.3.0",
+  "version": "5.0.0-beta.10",
   "type": "module",
-  "description": "Shared scale and autoscale utilities for wiggle and coverage displays",
+  "description": "Score-axis scale, autoscale, config mixins and plot chrome shared by wiggle, Manhattan, mark and coverage displays",
   "keywords": [
     "jbrowse",
     "jbrowse2",
@@ -21,20 +21,25 @@
   "main": "esm/index.js",
   "exports": {
     ".": "./esm/index.js",
+    "./ScorePlotChrome": "./esm/ScorePlotChrome.js",
+    "./ScorePlotSvgFrame": "./esm/ScorePlotSvgFrame.js",
+    "./chrome": "./esm/chrome.js",
     "./constants": "./esm/constants.js",
-    "./normalize": "./esm/normalize.js"
+    "./normalize": "./esm/normalize.js",
+    "./renderingBackendTypes": "./esm/renderingBackendTypes.js"
   },
   "files": [
     "esm"
   ],
   "dependencies": {
-    "@jbrowse/mobx-state-tree": "^6.5.1",
-    "@mui/icons-material": "^9.3.1",
-    "@mui/material": "^9.3.1",
+    "@jbrowse/mobx-state-tree": "^6.6.1",
+    "@mui/icons-material": "^9.4.0",
+    "@mui/material": "^9.4.0",
     "mobx-react": "^10.0.2",
-    "@jbrowse/core": "^4.3.0",
-    "@jbrowse/display-kit": "^4.3.0",
-    "@jbrowse/render-core": "^4.3.0"
+    "@jbrowse/core": "^5.0.0-beta.10",
+    "@jbrowse/display-kit": "^5.0.0-beta.10",
+    "@jbrowse/display-ui": "^5.0.0-beta.10",
+    "@jbrowse/render-core": "^5.0.0-beta.10"
   },
   "peerDependencies": {
     "react": ">=19.0.0"

package/esm/CrossHatches.d.ts

@@ -1,11 +0,0 @@
-import type { YScaleTicks } from './yScaleTicks.ts';
-export declare function CrossHatchLines({ ticks, width, offsetY, }: {
-    ticks: YScaleTicks;
-    width: number;
-    offsetY?: number;
-}): import("react").JSX.Element;
-export default function CrossHatches({ ticks, width, height, }: {
-    ticks: YScaleTicks;
-    width: number;
-    height: number;
-}): import("react").JSX.Element;

package/esm/CrossHatches.js

@@ -1,32 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { clampStrokeInsideAxis } from './yScaleTicks.js';
-// Bare <line> set for the Y-scale tick guide lines, no wrapping <svg>. Shared by
-// the absolutely-positioned on-screen CrossHatches overlay and the flat SVG
-// export (single- and multi-wiggle), so the three can't drift. `offsetY` shifts
-// every line down for per-row rendering in multi-wiggle.
-export function CrossHatchLines({ ticks, width, offsetY = 0, }) {
-    return (_jsx(_Fragment, { children: ticks.items.map(({ value, y }) => {
-            // Same clamp the axis ticks take, so a guide line and the tick it
-            // belongs to can't disagree at the bottom edge — where, in multi-wiggle,
-            // "one pixel lower" is the next sample's row. Only that edge moves; the
-            // guide lines don't crispen to a half pixel the way the axis does.
-            const lineY = offsetY + clampStrokeInsideAxis(y, ticks.yBottom);
-            return (_jsx("line", { x1: 0, x2: width, y1: lineY, y2: lineY, stroke: "rgb(200,200,200)", 
-                // a separate stroke-opacity attribute (not baked into an rgba()
-                // string) survives the SVG export, whose renderToStaticMarkup strips
-                // rgba() alpha
-                strokeOpacity: 0.8, strokeWidth: 1 }, `${value}-${y}`));
-        }) }));
-}
-// Horizontal guide lines at each Y-scale tick. Pointer-events disabled so
-// the underlying canvas still receives mouse events.
-export default function CrossHatches({ ticks, width, height, }) {
-    return (_jsx("svg", { style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            pointerEvents: 'none',
-            height,
-            width,
-        }, children: _jsx(CrossHatchLines, { ticks: ticks, width: width }) }));
-}

package/esm/ScoreRules.d.ts

@@ -1,11 +0,0 @@
-import type { ScoreRuleMark } from './scoreRuleMarks.ts';
-export declare function ScoreRuleLines({ marks, width, offsetY, }: {
-    marks: ScoreRuleMark[];
-    width: number;
-    offsetY?: number;
-}): import("react").JSX.Element;
-export default function ScoreRules({ marks, width, height, }: {
-    marks: ScoreRuleMark[];
-    width: number;
-    height: number;
-}): import("react").JSX.Element;

package/esm/ScoreRules.js

@@ -1,37 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePalette } from '@jbrowse/core/ui/PaletteContext';
-const DEFAULT_RULE_COLOR = 'rgb(120,120,120)';
-// Bare marks, no wrapping <svg>, so the on-screen overlay and the SVG export
-// draw the same elements from the same y. Same split as CrossHatchLines.
-export function ScoreRuleLines({ marks, width, offsetY = 0, }) {
-    // A caption sits over the plot, not beside it, so it needs the halo the tick
-    // labels next to it already draw (YScaleBar) — without one a rule crossing
-    // filled bars captions itself in grey on the fill and cannot be read. From
-    // the palette rather than a hardcoded white, which inverts into a glare in
-    // dark mode.
-    const haloColor = usePalette().background.default;
-    return (_jsx(_Fragment, { children: marks.map(({ value, label, color, y }) => {
-            const lineY = offsetY + y;
-            const stroke = color ?? DEFAULT_RULE_COLOR;
-            return (_jsxs("g", { children: [_jsx("line", { x1: 0, x2: width, y1: lineY, y2: lineY, stroke: stroke, 
-                        // separate attribute rather than an rgba() string: the SVG
-                        // export's renderToStaticMarkup strips rgba() alpha
-                        strokeOpacity: 0.9, strokeWidth: 1, strokeDasharray: "4 3" }), label ? (_jsx("text", { x: width - 4, y: lineY - 2, textAnchor: "end", fontSize: 10, 
-                        // full alpha, unlike the line: 0.9 is there to let the rule
-                        // recede into the plot, and a caption that has to be read wants
-                        // the opposite
-                        fill: stroke, stroke: haloColor, strokeWidth: 2.5, paintOrder: "stroke", children: label })) : null] }, `${value}-${y}`));
-        }) }));
-}
-// Pointer-events disabled so the canvas underneath still gets mouse events,
-// matching CrossHatches.
-export default function ScoreRules({ marks, width, height, }) {
-    return (_jsx("svg", { style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            pointerEvents: 'none',
-            height,
-            width,
-        }, children: _jsx(ScoreRuleLines, { marks: marks, width: width }) }));
-}

package/esm/YScaleBar.d.ts

@@ -1,6 +0,0 @@
-import type { YScaleTicks } from './yScaleTicks.ts';
-export default function YScaleBar({ ticks, orientation, insetLabels, }: {
-    ticks: YScaleTicks | undefined;
-    orientation?: 'left' | 'right';
-    insetLabels?: boolean;
-}): import("react").JSX.Element | null;

package/esm/YScaleBar.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePalette } from '@jbrowse/core/ui/PaletteContext';
-import { clampStrokeInsideAxis } from './yScaleTicks.js';
-// Not an `observer`, and deliberately: there is nothing here to observe. Every
-// caller already reads `model.ticks` inside its own observer and hands the
-// resolved plain object down, and `usePalette` is a React context, not MobX.
-// Wrapping it anyway allocated a Reaction per instance — multi-wiggle renders
-// one per sample row, on screen as well as in export — and, per CLAUDE.md, put
-// the component out of `babel-plugin-react-compiler`'s reach, so it got neither
-// the MobX tracking it doesn't need nor the memoization it does. Its sibling
-// `CrossHatchLines`, consuming the same ticks, is already plain.
-// Half the vertical space a 10px label needs, halo included: digits reach about
-// 3.6px above the centered baseline and the 2.5px-wide background stroke another
-// 1.25px past that.
-const LABEL_HALF_HEIGHT_PX = 5;
-export default function YScaleBar({ ticks, orientation, insetLabels, }) {
-    const palette = usePalette();
-    if (!ticks) {
-        return null;
-    }
-    const { items, yTop, yBottom } = ticks;
-    const bg = palette.background.default;
-    const fg = palette.text.primary;
-    const isLeft = orientation !== 'right';
-    const k = isLeft ? -1 : 1;
-    const tickLength = 6;
-    // Crispen to `y + 0.5` so each 1px stroke fills one pixel instead of
-    // straddling two, then clamp, which only bites at the bottom edge: there the
-    // stroke goes on the last pixel inside the box rather than the first one
-    // below it.
-    const strokeY = (y) => clampStrokeInsideAxis(y + 0.5, yBottom);
-    // The tick keeps the group transform; only the text moves off it, and only
-    // under `insetLabels` within half a label of an end. A tick is where the data
-    // is, so it never moves — the label is then drawn against the tick rather than
-    // across it, which is what any axis does at the edge of its own frame.
-    // `undefined` rather than 0 for the labels that don't move, so the markup this
-    // emits is unchanged wherever the inset doesn't apply.
-    const labelDy = (sy) => {
-        if (!insetLabels) {
-            return undefined;
-        }
-        const inset = Math.min(Math.max(sy, yTop + LABEL_HALF_HEIGHT_PX), yBottom - LABEL_HALF_HEIGHT_PX);
-        return inset === sy ? undefined : inset - sy;
-    };
-    return (_jsxs("g", { fontSize: 10, textAnchor: isLeft ? 'end' : 'start', stroke: fg, strokeWidth: 1, children: [_jsx("path", { fill: "none", d: `M${k * tickLength} ${strokeY(yTop)}H0.5V${strokeY(yBottom)}H${k * tickLength}` }), items.map(({ value, y, label }) => (_jsxs("g", { transform: `translate(0,${strokeY(y)})`, children: [_jsx("line", { x2: k * tickLength }), _jsx("text", { stroke: bg, strokeWidth: 2.5, paintOrder: "stroke", fill: fg, y: labelDy(strokeY(y)), dy: "0.32em", x: k * 9, children: label ?? value })] }, `${value}-${y}`)))] }));
-}

package/esm/YScaleBarOverlay.d.ts

@@ -1,6 +0,0 @@
-import type { YScaleTicks } from './yScaleTicks.ts';
-export default function YScaleBarOverlay({ ticks, height, width, }: {
-    ticks: YScaleTicks;
-    height: number;
-    width: number;
-}): import("react").JSX.Element;

package/esm/YScaleBarOverlay.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import YScaleBar from './YScaleBar.js';
-import { ONSCREEN_AXIS_LEFT_PX } from './constants.js';
-// Y-axis tick labels positioned absolutely, indented from the track's left edge
-// so a right-oriented axis reads inside the plot. The SVG export instead anchors
-// a left-oriented axis at the content edge, putting the labels in the export
-// margin — see WiggleFamilySvgFrame.
-//
-// `width` is the track's, not a fixed strip: an <svg> clips to its own box, and
-// the hardcoded 70px this used to carry silently truncated any label past ~11
-// characters. Not hypothetical on a log axis — a domain under 1 nices to
-// negative powers of two, so `0.0009765625` is an ordinary tick on a
-// mappability track and the labels grow exactly where the numbers get small.
-// The track's own right edge is the real boundary.
-export default function YScaleBarOverlay({ ticks, height, width, }) {
-    return (_jsx("svg", { style: {
-            position: 'absolute',
-            top: 0,
-            left: ONSCREEN_AXIS_LEFT_PX,
-            pointerEvents: 'none',
-            height,
-            width: Math.max(0, width - ONSCREEN_AXIS_LEFT_PX),
-        }, children: _jsx(YScaleBar, { ticks: ticks, orientation: "right" }) }));
-}

package/esm/scoreAxisConfigSchemaFields.d.ts

@@ -1,44 +0,0 @@
-import type { ConfigModelForFields } from '@jbrowse/core/configuration';
-export declare const scoreAxisConfigSchemaFields: {
-    readonly minScore: {
-        readonly type: 'number';
-        readonly defaultValue: number;
-        readonly description: 'Fixed minimum score bound. The default (Number.MIN_VALUE) is a sentinel meaning "unset, use autoscale"';
-        readonly advanced: true;
-    };
-    readonly maxScore: {
-        readonly type: 'number';
-        readonly defaultValue: number;
-        readonly description: 'Fixed maximum score bound. The default (Number.MAX_VALUE) is a sentinel meaning "unset, use autoscale"';
-        readonly advanced: true;
-    };
-    readonly scaleType: {
-        readonly type: 'stringEnum';
-        readonly model: import("@jbrowse/mobx-state-tree").ISimpleType<"linear" | "log">;
-        readonly defaultValue: 'linear';
-        readonly description: 'Scale type (linear or log)';
-    };
-    readonly autoscale: {
-        readonly type: 'stringEnum';
-        readonly model: import("@jbrowse/mobx-state-tree").ISimpleType<"local" | "localpercentile" | "localsd">;
-        readonly defaultValue: 'localpercentile';
-        readonly description: 'Autoscale type: "local" uses the min/max in the visible region, "localsd" uses mean ± numStdDev standard deviations, "localpercentile" uses the numQuantile-th percentile score as the max (robust to skewed/peaky data)';
-    };
-    readonly numStdDev: {
-        readonly type: 'number';
-        readonly defaultValue: 3;
-        readonly description: 'Number of standard deviations to use for the localsd autoscale type';
-        readonly advanced: true;
-    };
-    readonly displayCrossHatches: {
-        readonly type: 'boolean';
-        readonly defaultValue: false;
-        readonly description: 'Rule the score axis with horizontal cross hatches at the tick positions — the config form of the score menu\'s "Show cross hatches". Ignored by the density rendering types, which spend color rather than height on the score and so have no axis to rule';
-    };
-};
-/**
- * What `ScoreScaleMixin` asks a composing display's `configuration` to be — the
- * slots above and nothing else, which is all the mixin touches. Narrow so
- * `getConf`/`setConf` still check the slot name; see `ConfigModelForFields`.
- */
-export type ScoreAxisConfigModel = ConfigModelForFields<typeof scoreAxisConfigSchemaFields>;

package/esm/scoreAxisConfigSchemaFields.js

@@ -1,54 +0,0 @@
-import { types } from '@jbrowse/mobx-state-tree';
-// The score AXIS alone: exactly the slots `ScoreScaleMixin` reads, and nothing
-// else. Split out of `wiggleConfigSchemaFields` below so a display with a score
-// axis but none of wiggle's palette/rendering vocabulary can declare the axis
-// without inheriting the rest — LinearManhattanDisplay used to extend the whole
-// wiggle display schema and advertised twelve slots that did nothing on a GWAS
-// track.
-//
-// `numQuantile` is deliberately NOT here even though `autoscale` names
-// `localpercentile`: it is read by the autoscale *computation*
-// (`WiggleCommonMixin`), which only the wiggle displays run.
-export const scoreAxisConfigSchemaFields = {
-    minScore: {
-        type: 'number',
-        defaultValue: Number.MIN_VALUE,
-        description: 'Fixed minimum score bound. The default (Number.MIN_VALUE) is a sentinel meaning "unset, use autoscale"',
-        advanced: true,
-    },
-    maxScore: {
-        type: 'number',
-        defaultValue: Number.MAX_VALUE,
-        description: 'Fixed maximum score bound. The default (Number.MAX_VALUE) is a sentinel meaning "unset, use autoscale"',
-        advanced: true,
-    },
-    // #region stringEnumSlot
-    scaleType: {
-        type: 'stringEnum',
-        model: types.enumeration('Scale type', ['linear', 'log']),
-        defaultValue: 'linear',
-        description: 'Scale type (linear or log)',
-    },
-    // #endregion
-    autoscale: {
-        type: 'stringEnum',
-        model: types.enumeration('Autoscale type', [
-            'local',
-            'localsd',
-            'localpercentile',
-        ]),
-        defaultValue: 'localpercentile',
-        description: 'Autoscale type: "local" uses the min/max in the visible region, "localsd" uses mean ± numStdDev standard deviations, "localpercentile" uses the numQuantile-th percentile score as the max (robust to skewed/peaky data)',
-    },
-    numStdDev: {
-        type: 'number',
-        defaultValue: 3,
-        description: 'Number of standard deviations to use for the localsd autoscale type',
-        advanced: true,
-    },
-    displayCrossHatches: {
-        type: 'boolean',
-        defaultValue: false,
-        description: 'Rule the score axis with horizontal cross hatches at the tick positions — the config form of the score menu\'s "Show cross hatches". Ignored by the density rendering types, which spend color rather than height on the score and so have no axis to rule',
-    },
-};

package/esm/yScaleTicks.d.ts

@@ -1,59 +0,0 @@
-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 a left-oriented {@link YScaleBar} is drawn in, and the x
- * inside that gutter its spine goes at.
- *
- * `YScaleBar` grows its ticks and numbers *away* from the spine, so a
- * left-oriented axis has to inset its spine by the label width or the labels
- * land at negative x — which is what once put an exported coverage axis off the
- * image entirely. Both numbers live here, beside the component whose own
- * geometry (`x = ±9`, `fontSize 10`, `textAnchor: end`) is what makes them the
- * right ones: the alignments coverage axis and the MAF band axes had each
- * arrived at this same 50/45 pair independently, so a change to the labels moved
- * neither.
- *
- * An axis drawn over its own plot rather than in reserved space may narrow the
- * gutter — every px of it is a px of data hidden. Such an axis still places its
- * spine at `width - 1`, the same rule stated against its own width.
- */
-export declare const AXIS_GUTTER_WIDTH_PX = 50;
-export declare function leftAxisSpineX(gutterLeft?: number): number;
-/**
- * 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

@@ -1,59 +0,0 @@
-import { YSCALEBAR_LABEL_OFFSET } from './constants.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 a left-oriented {@link YScaleBar} is drawn in, and the x
- * inside that gutter its spine goes at.
- *
- * `YScaleBar` grows its ticks and numbers *away* from the spine, so a
- * left-oriented axis has to inset its spine by the label width or the labels
- * land at negative x — which is what once put an exported coverage axis off the
- * image entirely. Both numbers live here, beside the component whose own
- * geometry (`x = ±9`, `fontSize 10`, `textAnchor: end`) is what makes them the
- * right ones: the alignments coverage axis and the MAF band axes had each
- * arrived at this same 50/45 pair independently, so a change to the labels moved
- * neither.
- *
- * An axis drawn over its own plot rather than in reserved space may narrow the
- * gutter — every px of it is a px of data hidden. Such an axis still places its
- * spine at `width - 1`, the same rule stated against its own width.
- */
-export const AXIS_GUTTER_WIDTH_PX = 50;
-export function leftAxisSpineX(gutterLeft = 0) {
-    return gutterLeft + AXIS_GUTTER_WIDTH_PX - YSCALEBAR_LABEL_OFFSET;
-}
-/**
- * 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);
-}