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

package/README.md

@@ -12,14 +12,15 @@ Auto-generated from `#api` JSDoc tags in this package. Do not edit by hand.
 ### autoscaleDomainFromSpans
 
 The domain the visible instances autoscale to: at a `quantile` of 1 their
-extremes, `stats`; below it `quantileExtent`'s ends, the bottom read off the
-`low`s and the top off the `high`s less the zeros where any is positive, so
-whiskers open to their spread, a sparse window's empty bins lower no top, and a
-window of nothing above 0 keeps the top it has.
+extremes, `stats`; below it those extremes fenced by `quantileExtent`'s ends
+(`fenceOutliers`), the bottom read off the `low`s and the top off the `high`s
+less the zeros where any is positive, so whiskers open to their spread, a sparse
+window's empty bins lower no top, and a window of nothing above 0 keeps the top
+it has.
 
 ```js
 // type signature
-({ stats, quantile, spans, }: { stats: ScoreStats; quantile: number; spans: ScoreSpan[]; }) => [number, number]
+({ stats, quantile, zero, spans, }: { stats: ScoreStats; quantile: number; zero: boolean; spans: ScoreSpan[]; }) => [number, number]
 ```
 
 [Source code](https://github.com/GMOD/jbrowse-components/blob/main/packages/wiggle-core/src/autoscale.ts)
@@ -27,11 +28,12 @@ window of nothing above 0 keeps the top it has.
 ### computeAutoscaleDomain
 
 The score domain of the visible feature arrays, following `quantile` as
-`scales.y.domainQuantile` says.
+`scales.y.domainQuantile` says, its outliers fenced for an axis that reaches 0
+under `zero`.
 
 ```js
 // type signature
-(quantile: number, summaryScoreMode: string, visibleEntries: { data: FeatureArrays; visStart: number; visEnd: number; }[]) => [number, number] | undefined
+(quantile: number, summaryScoreMode: string, visibleEntries: { data: FeatureArrays; visStart: number; visEnd: number; }[], zero: boolean) => [number, number] | undefined
 ```
 
 [Source code](https://github.com/GMOD/jbrowse-components/blob/main/packages/wiggle-core/src/autoscale.ts)
@@ -152,6 +154,18 @@ unless `nice: false` says it is already the one being drawn with.
 
 [Source code](https://github.com/GMOD/jbrowse-components/blob/main/packages/wiggle-core/src/scale.ts)
 
+### registerScoreAxisWidget
+
+Registers the drawer widget the quantitative tracks' "Y axis..." row opens. The
+wiggle plugin calls it once; alignments and the mark display open it by name.
+
+```js
+// type signature
+(pluginManager: PluginManager) => void
+```
+
+[Source code](https://github.com/GMOD/jbrowse-components/blob/main/packages/wiggle-core/src/ScoreAxisWidget/index.ts)
+
 ### resolveSymlogConstant
 
 The symlog constant actually used for a domain. `0` (the config default) means

package/esm/ResolutionStepper.d.ts

@@ -13,5 +13,6 @@ export declare function makeResolutionSubMenuItem(opts: {
     onReset: () => void;
     icon?: React.ElementType;
     resetTitle?: string;
+    trailingItems?: MenuItem[];
 }): MenuItem;
 export {};

package/esm/ResolutionStepper.js

@@ -39,9 +39,11 @@ const ResolutionStepper = observer(function ResolutionStepper({ getState, onFine
 });
 // A "Resolution" submenu whose single row is the inline stepper, so it sits
 // alongside the other track-menu submenus but keeps the menu open while
-// stepping. Callers own the label formatting, step bounds, and step actions.
+// stepping. Callers own the label formatting, step bounds, and step actions;
+// `trailingItems` follow the stepper (wiggle's summary score mode, which reads
+// the same bins).
 export function makeResolutionSubMenuItem(opts) {
-    const { getState, onFiner, onCoarser, onReset, icon, resetTitle } = opts;
+    const { getState, onFiner, onCoarser, onReset, icon, resetTitle, trailingItems = [], } = opts;
     return {
         label: 'Resolution',
         icon,
@@ -51,6 +53,7 @@ export function makeResolutionSubMenuItem(opts) {
                 type: 'custom',
                 render: () => (_jsx(ResolutionStepper, { getState: getState, onFiner: onFiner, onCoarser: onCoarser, onReset: onReset, resetTitle: resetTitle })),
             },
+            ...trailingItems,
         ],
     };
 }

package/esm/ScoreAxisWidget/RangeFields.d.ts

@@ -0,0 +1,5 @@
+import type { ScoreAxisDisplay } from './types.ts';
+declare const _default: ({ display, }: {
+    display: ScoreAxisDisplay;
+}) => import("react").JSX.Element;
+export default _default;

package/esm/ScoreAxisWidget/RangeFields.js

@@ -0,0 +1,70 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { useFinalUnmount } from '@jbrowse/core/util/hooks';
+import { isAlive } from '@jbrowse/mobx-state-tree';
+import { FormHelperText, TextField, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { toP } from '../formatNumber.js';
+import { writeThrough } from './writeThrough.js';
+const DEBOUNCE_MS = 300;
+// '' is "follow the data"; anything else that isn't a number is held back
+// rather than read as empty, which would unpin the end.
+function parse(text) {
+    const trimmed = text.trim();
+    return trimmed === '' ? undefined : Number(trimmed);
+}
+function problem(min, max, scaleType) {
+    if (Number.isNaN(min) || Number.isNaN(max)) {
+        return 'Enter a number, or leave the field empty to follow the data';
+    }
+    if (min !== undefined && max !== undefined && !(max > min)) {
+        return 'Max must be greater than min';
+    }
+    if (scaleType === 'log' && min !== undefined && min <= 0) {
+        return 'A log axis needs a min above 0';
+    }
+    return undefined;
+}
+function formatRange([lo, hi]) {
+    return `${toP(lo, 4)} – ${toP(hi, 4)}`;
+}
+// Typing 190 would otherwise redraw at 1 and 19 on the way; the pair writes
+// once the typing pauses, and at once on blur or when the drawer closes.
+export default observer(function RangeFields({ display, }) {
+    const { manualMinScore, manualMaxScore, scaleType, autoscaleRange } = display;
+    const [text, setText] = useState({
+        min: manualMinScore === undefined ? '' : `${manualMinScore}`,
+        max: manualMaxScore === undefined ? '' : `${manualMaxScore}`,
+    });
+    const latest = useRef(text);
+    const timer = useRef(undefined);
+    const flush = () => {
+        clearTimeout(timer.current);
+        timer.current = undefined;
+        const min = parse(latest.current.min);
+        const max = parse(latest.current.max);
+        if (isAlive(display) &&
+            problem(min, max, display.scaleType) === undefined &&
+            (min !== display.manualMinScore || max !== display.manualMaxScore)) {
+            writeThrough(display, () => {
+                display.setMinScore(min);
+                display.setMaxScore(max);
+            });
+        }
+    };
+    useFinalUnmount(flush);
+    const edit = (patch) => {
+        const next = { ...latest.current, ...patch };
+        latest.current = next;
+        setText(next);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(flush, DEBOUNCE_MS);
+    };
+    const error = problem(parse(text.min), parse(text.max), scaleType);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { display: 'flex', gap: 16 }, children: ['min', 'max'].map(end => (_jsx(TextField, { label: end === 'min' ? 'Min' : 'Max', placeholder: "auto", value: text[end], error: error !== undefined, autoComplete: "off", size: "small", variant: "standard", slotProps: {
+                        inputLabel: { shrink: true },
+                        htmlInput: { inputMode: 'decimal' },
+                    }, onChange: event => {
+                        edit({ [end]: event.target.value });
+                    }, onBlur: flush }, end))) }), error ? (_jsx(FormHelperText, { error: true, children: error })) : autoscaleRange ? (_jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["Values in view: ", formatRange(autoscaleRange)] })) : null] }));
+});

package/esm/ScoreAxisWidget/ReferenceLines.d.ts

@@ -0,0 +1,10 @@
+import type { ScoreAxisDisplay } from './types.ts';
+/**
+ * `scales.y.rules`, one row per line: its value on the plot's own scale, its
+ * label and its colour, an empty colour taking the display's. The lines
+ * redraw as soon as every row reads; a half-typed row waits.
+ */
+declare const _default: ({ display, }: {
+    display: ScoreAxisDisplay;
+}) => import("react").JSX.Element;
+export default _default;

package/esm/ScoreAxisWidget/ReferenceLines.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { isCssColor } from '@jbrowse/core/util/colorBits';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Button, IconButton, TextField, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { writeThrough } from './writeThrough.js';
+function rowOf({ value, label = '', color = '' }) {
+    return { value: String(value), label, color };
+}
+function valueOk({ value }) {
+    return value.trim() !== '' && Number.isFinite(Number(value));
+}
+function colorOk({ color }) {
+    return color.trim() === '' || isCssColor(color);
+}
+function ruleOf(row) {
+    return {
+        value: Number(row.value),
+        ...(row.label ? { label: row.label } : {}),
+        ...(row.color.trim() ? { color: row.color.trim() } : {}),
+    };
+}
+/**
+ * `scales.y.rules`, one row per line: its value on the plot's own scale, its
+ * label and its colour, an empty colour taking the display's. The lines
+ * redraw as soon as every row reads; a half-typed row waits.
+ */
+export default observer(function ReferenceLines({ display, }) {
+    const [rows, setRows] = useState(() => (display.scoreRules ?? []).map(rowOf));
+    const commit = (next) => {
+        setRows(next);
+        if (next.every(row => valueOk(row) && colorOk(row))) {
+            writeThrough(display, () => {
+                display.setScoreRules?.(next.map(ruleOf));
+            });
+        }
+    };
+    const setRow = (index, patch) => {
+        commit(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)));
+    };
+    return (_jsxs("div", { children: [_jsx(Typography, { variant: "body2", children: "Reference lines" }), rows.map((row, index) => (_jsxs("div", { style: { display: 'flex', gap: 8, marginTop: 4 }, children: [_jsx(TextField, { label: "Value", size: "small", variant: "standard", value: row.value, error: !valueOk(row), slotProps: { htmlInput: { inputMode: 'decimal' } }, onChange: event => {
+                            setRow(index, { value: event.target.value });
+                        } }), _jsx(TextField, { label: "Label", size: "small", variant: "standard", value: row.label, onChange: event => {
+                            setRow(index, { label: event.target.value });
+                        } }), _jsx(TextField, { label: "Color", size: "small", variant: "standard", value: row.color, error: !colorOk(row), onChange: event => {
+                            setRow(index, { color: event.target.value });
+                        } }), _jsx(IconButton, { "aria-label": "Remove line", size: "small", onClick: () => {
+                            commit(rows.filter((_, i) => i !== index));
+                        }, children: _jsx(DeleteIcon, { fontSize: "small" }) })] }, index))), _jsx(Button, { size: "small", onClick: () => {
+                    setRows([...rows, { value: '', label: '', color: '' }]);
+                }, children: "Add line" })] }));
+});

package/esm/ScoreAxisWidget/ResetAxisButton.d.ts

@@ -0,0 +1,6 @@
+import type { ScoreAxisDisplay } from './types.ts';
+export declare function resetAxis(display: ScoreAxisDisplay): void;
+export default function ResetAxisButton({ display, onReset, }: {
+    display: ScoreAxisDisplay;
+    onReset: () => void;
+}): import("react").JSX.Element;

package/esm/ScoreAxisWidget/ResetAxisButton.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { setConf } from '@jbrowse/core/configuration';
+import { baseDisplayConfig } from '@jbrowse/core/util/baseDisplayConfig';
+import { Button } from '@mui/material';
+import { writeThrough } from './writeThrough.js';
+// Back to what the config.json says, or to what a session-owned track was
+// added with, so an admin's declared axis survives a reset; slots the base
+// leaves unset take their defaults.
+export function resetAxis(display) {
+    const base = baseDisplayConfig(display).scales;
+    writeThrough(display, () => {
+        setConf(display.configuration, ['scales', 'y'], base?.y ?? {});
+    });
+}
+export default function ResetAxisButton({ display, onReset, }) {
+    return (_jsx("div", { children: _jsx(Button, { variant: "outlined", size: "small", onClick: () => {
+                resetAxis(display);
+                onReset();
+            }, children: "Reset to defaults" }) }));
+}

package/esm/ScoreAxisWidget/ScoreAxisHeading.d.ts

@@ -0,0 +1,5 @@
+import type { ScoreAxisWidgetModel } from './stateModel.ts';
+declare const _default: ({ model, }: {
+    model: ScoreAxisWidgetModel;
+}) => string;
+export default _default;

package/esm/ScoreAxisWidget/ScoreAxisHeading.js

@@ -0,0 +1,9 @@
+import { getConf } from '@jbrowse/core/configuration';
+import { getContainingTrack } from '@jbrowse/core/util/mstUtils';
+import { observer } from 'mobx-react';
+export default observer(function ScoreAxisHeading({ model, }) {
+    const { display, label } = model;
+    return display
+        ? `${label} — ${getConf(getContainingTrack(display), 'name')}`
+        : label;
+});

package/esm/ScoreAxisWidget/ScoreAxisWidget.d.ts

@@ -0,0 +1,5 @@
+import type { ScoreAxisWidgetModel } from './stateModel.ts';
+declare const _default: ({ model, }: {
+    model: ScoreAxisWidgetModel;
+}) => import("react").JSX.Element;
+export default _default;

package/esm/ScoreAxisWidget/ScoreAxisWidget.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LabeledCheckbox } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { FormControlLabel, FormHelperText, Radio, RadioGroup, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
+import { VALUE_SCALE_TYPES } from '../valueScaleConfigSchema.js';
+import RangeFields from './RangeFields.js';
+import ReferenceLines from './ReferenceLines.js';
+import ResetAxisButton from './ResetAxisButton.js';
+import Section from './Section.js';
+import ShareAxisWith from './ShareAxisWith.js';
+import { writeThrough } from './writeThrough.js';
+const useStyles = makeStyles()(theme => ({
+    root: {
+        padding: theme.spacing(2),
+        display: 'grid',
+        gap: theme.spacing(2.5),
+    },
+}));
+const SCALE_TYPE_LABELS = {
+    linear: 'Linear',
+    log: 'Log',
+    symlog: 'Symlog',
+};
+// A density plot maps score to colour and rules no band, so it has no 0 to
+// include and no lines to draw across it.
+function rulesABand(display) {
+    return display.scoreRulesDrawn === true;
+}
+const AxisEditor = observer(function AxisEditor({ display, onReset, }) {
+    const { classes } = useStyles();
+    const { scaleType, manualMinScore, manualMaxScore, domainQuantile } = display;
+    const bothPinned = manualMinScore !== undefined && manualMaxScore !== undefined;
+    const zeroBlocker = scaleType === 'log'
+        ? 'A log axis has no 0'
+        : bothPinned
+            ? 'Both ends are set'
+            : undefined;
+    return (_jsxs("div", { className: classes.root, children: [_jsx(Section, { title: "Scale", children: _jsx(RadioGroup, { row: true, value: scaleType, onChange: event => {
+                        writeThrough(display, () => {
+                            display.setScaleType(event.target.value);
+                        });
+                    }, children: VALUE_SCALE_TYPES.map(type => (_jsx(FormControlLabel, { value: type, control: _jsx(Radio, { size: "small" }), label: SCALE_TYPE_LABELS[type] }, type))) }) }), _jsxs(Section, { title: "Range", children: [_jsx(RangeFields, { display: display }), rulesABand(display) ? (_jsx(LabeledCheckbox, { label: "Include 0", checked: display.scaleZero, disabled: zeroBlocker !== undefined, onChange: zero => {
+                            writeThrough(display, () => {
+                                display.setScaleZero(zero);
+                            });
+                        } })) : null, _jsx(LabeledCheckbox, { label: "Clip extreme outliers", checked: domainQuantile < 1, disabled: bothPinned, onChange: on => {
+                            writeThrough(display, () => {
+                                display.setDomainQuantile(on ? display.clipQuantile : 1);
+                            });
+                        } }), _jsx(FormHelperText, { children: bothPinned
+                            ? 'Both ends are set, so nothing here moves the axis'
+                            : (zeroBlocker ??
+                                `Clipping cuts a value that would leave the others under half the axis, and marks it in red`) })] }), _jsx(ShareAxisWith, { display: display }), _jsxs(Section, { title: "Guides", children: [_jsx(LabeledCheckbox, { label: "Grid lines", checked: display.grid, onChange: grid => {
+                            writeThrough(display, () => {
+                                display.setGrid(grid);
+                            });
+                        } }), rulesABand(display) ? _jsx(ReferenceLines, { display: display }) : null] }), _jsx(ResetAxisButton, { display: display, onReset: onReset })] }));
+});
+// A reset rewrites what the text fields and reference-line rows hold as their
+// own draft, so it remounts them.
+export default observer(function ScoreAxisWidget({ model, }) {
+    const [generation, setGeneration] = useState(0);
+    const display = model.display;
+    return display ? (_jsx(AxisEditor, { display: display, onReset: () => {
+            setGeneration(n => n + 1);
+        } }, `${display.id}-${generation}`)) : (_jsx(Typography, { color: "text.secondary", style: { padding: 16 }, children: "The track this edited is no longer shown." }));
+});

package/esm/ScoreAxisWidget/Section.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export default function Section({ title, children, }: {
+    title: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/esm/ScoreAxisWidget/Section.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Typography } from '@mui/material';
+const useStyles = makeStyles()(theme => ({
+    section: {
+        display: 'grid',
+        gap: theme.spacing(0.5),
+    },
+}));
+export default function Section({ title, children, }) {
+    const { classes } = useStyles();
+    return (_jsxs("div", { className: classes.section, children: [_jsx(Typography, { variant: "subtitle2", children: title }), children] }));
+}

package/esm/ScoreAxisWidget/ShareAxisWith.d.ts

@@ -0,0 +1,5 @@
+import type { ScoreAxisDisplay } from './types.ts';
+declare const _default: ({ display, }: {
+    display: ScoreAxisDisplay;
+}) => import("react").JSX.Element | null;
+export default _default;

package/esm/ScoreAxisWidget/ShareAxisWith.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LabeledCheckbox } from '@jbrowse/core/ui';
+import { getContainingTrack } from '@jbrowse/core/util/mstUtils';
+import { observer } from 'mobx-react';
+import { autoscalePeers, autoscaleWith } from '../autoscaleGroup.js';
+import Section from './Section.js';
+function sharesAxis(display) {
+    return display.setAutoscaleGroup !== undefined;
+}
+// Offered once the view holds another track with a value axis to share. A tick
+// writes the peers' config too, so each one's track saves.
+export default observer(function ShareAxisWith({ display, }) {
+    if (!sharesAxis(display)) {
+        return null;
+    }
+    const peers = autoscalePeers(display);
+    if (peers.length === 0) {
+        return null;
+    }
+    const group = display.autoscaleGroup;
+    const inGroup = (peer) => group !== undefined && peer.autoscaleGroup === group;
+    return (_jsx(Section, { title: "Share axis with", children: peers.map(({ display: peer, key, name }) => (_jsx(LabeledCheckbox, { label: name, checked: inGroup(peer), onChange: checked => {
+                const chosen = new Set(peers.map(p => p.display).filter(p => p !== peer && inGroup(p)));
+                if (checked) {
+                    chosen.add(peer);
+                }
+                autoscaleWith(display, peers.map(p => p.display), chosen);
+                for (const d of [display, ...peers.map(p => p.display)]) {
+                    getContainingTrack(d).persistConfigurationNow?.();
+                }
+            } }, key))) }));
+});

package/esm/ScoreAxisWidget/constants.d.ts

@@ -0,0 +1 @@
+export declare const SCORE_AXIS_WIDGET = "ScoreAxisWidget";

package/esm/ScoreAxisWidget/constants.js

@@ -0,0 +1 @@
+export const SCORE_AXIS_WIDGET = 'ScoreAxisWidget';

package/esm/ScoreAxisWidget/index.d.ts

@@ -0,0 +1,8 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+/**
+ * #api
+ * Registers the drawer widget the quantitative tracks' "Y axis..." row opens.
+ * The wiggle plugin calls it once; alignments and the mark display open it by
+ * name.
+ */
+export declare function registerScoreAxisWidget(pluginManager: PluginManager): void;

package/esm/ScoreAxisWidget/index.js

@@ -0,0 +1,22 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { WidgetType } from '@jbrowse/core/pluggableElementTypes';
+import { lazyWithPreload } from '@jbrowse/core/util/lazyWithPreload';
+import ScoreAxisHeading from './ScoreAxisHeading.js';
+import { SCORE_AXIS_WIDGET } from './constants.js';
+import { stateModelFactory } from './stateModel.js';
+/**
+ * #api
+ * Registers the drawer widget the quantitative tracks' "Y axis..." row opens.
+ * The wiggle plugin calls it once; alignments and the mark display open it by
+ * name.
+ */
+export function registerScoreAxisWidget(pluginManager) {
+    pluginManager.addWidgetType(() => new WidgetType({
+        name: SCORE_AXIS_WIDGET,
+        discardOnClose: true,
+        HeadingComponent: ScoreAxisHeading,
+        configSchema: ConfigurationSchema(SCORE_AXIS_WIDGET, {}),
+        stateModel: stateModelFactory(pluginManager),
+        ReactComponent: lazyWithPreload(() => import('./ScoreAxisWidget.js')),
+    }));
+}

package/esm/ScoreAxisWidget/stateModel.d.ts

@@ -0,0 +1,30 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type { Instance } from '@jbrowse/mobx-state-tree';
+/**
+ * #stateModel ScoreAxisWidget
+ * Drawer widget editing one display's value scale, `scales.y`. The display is
+ * a safe reference, so hiding its track or closing its view empties it rather
+ * than leaving the widget writing to a dead node.
+ */
+export declare function stateModelFactory(pluginManager: PluginManager): import("@jbrowse/mobx-state-tree").IModelType<{
+    /**
+     * #property
+     */
+    id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+    /**
+     * #property
+     */
+    type: import("@jbrowse/mobx-state-tree").ILiteralType<"ScoreAxisWidget">;
+    /**
+     * #property
+     */
+    display: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IReferenceType<import("@jbrowse/mobx-state-tree").IAnyType>>;
+    /**
+     * #property
+     * The name of the menu row that opened it, "Y axis" or "Coverage axis",
+     * so the heading says the same.
+     */
+    label: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
+}, {}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;
+export interface ScoreAxisWidgetModel extends Instance<ReturnType<typeof stateModelFactory>> {
+}

package/esm/ScoreAxisWidget/stateModel.js

@@ -0,0 +1,30 @@
+import { ElementId } from '@jbrowse/core/util/types/mst';
+import { types } from '@jbrowse/mobx-state-tree';
+/**
+ * #stateModel ScoreAxisWidget
+ * Drawer widget editing one display's value scale, `scales.y`. The display is
+ * a safe reference, so hiding its track or closing its view empties it rather
+ * than leaving the widget writing to a dead node.
+ */
+export function stateModelFactory(pluginManager) {
+    return types.model('ScoreAxisWidget', {
+        /**
+         * #property
+         */
+        id: ElementId,
+        /**
+         * #property
+         */
+        type: types.literal('ScoreAxisWidget'),
+        /**
+         * #property
+         */
+        display: types.safeReference(pluginManager.pluggableMstType('display', 'stateModel')),
+        /**
+         * #property
+         * The name of the menu row that opened it, "Y axis" or "Coverage axis",
+         * so the heading says the same.
+         */
+        label: types.optional(types.string, 'Y axis'),
+    });
+}

package/esm/ScoreAxisWidget/types.d.ts

@@ -0,0 +1,10 @@
+import type { AutoscalePeer } from '../autoscaleGroup.ts';
+import type { ScoreRulesModel, ScoreScaleModel } from '../scoreMenuItems.ts';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+/** What the widget edits: a display's value scale and the guides it owns. */
+export type ScoreAxisDisplay = ScoreScaleModel & Partial<ScoreRulesModel> & Partial<AutoscalePeer> & {
+    id: string;
+    configuration: AnyConfigurationModel;
+    grid: boolean;
+    setGrid: (grid: boolean) => void;
+};

package/esm/ScoreAxisWidget/types.js

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

package/esm/ScoreAxisWidget/writeThrough.d.ts

@@ -0,0 +1,2 @@
+import type { ScoreAxisDisplay } from './types.ts';
+export declare function writeThrough(display: ScoreAxisDisplay, edit: () => void): void;

package/esm/ScoreAxisWidget/writeThrough.js

@@ -0,0 +1,7 @@
+import { getContainingTrack } from '@jbrowse/core/util/mstUtils';
+// Each write lands in the session at once rather than after the track's
+// debounced save, so undo steps one edit at a time.
+export function writeThrough(display, edit) {
+    edit();
+    getContainingTrack(display).persistConfigurationNow?.();
+}

package/esm/ScorePlotChrome.d.ts

@@ -22,6 +22,7 @@ export interface ScorePlotContextMenuHost<Hit> extends ContextMenuView {
 }
 export type ScorePlotChromeModel<Hit, TRegion, TState extends FrameDimensions> = ChromeModel & RenderLifecycleModel<PerRegionRenderingBackend<TRegion, TState>> & {
     canvasWidthPx: number;
+    scrollableHeight: number;
     setHoveredFeature: (hit?: Hit) => void;
     selectFeature: (hit: Hit) => void;
 };

package/esm/ScorePlotChrome.js

@@ -34,14 +34,14 @@ export const ScorePlotChrome = observer(function ScorePlotChrome({ model, marks,
                     ? { clientX: event.clientX, clientY: event.clientY, hit }
                     : undefined);
             }
-            : undefined, children: ({ canvasRef, mouseTracker }) => (_jsx(ScorePlotBody, { canvasRef: canvasRef, mouseTracker: mouseTracker, width: width, plotGeometry: box, tooltip: tooltip, overlay: overlay, indicators: indicators, contextMenu: contextMenu })) }));
+            : undefined, children: ({ canvasRef, mouseTracker }) => (_jsx(ScorePlotBody, { model: model, canvasRef: canvasRef, mouseTracker: mouseTracker, width: width, plotGeometry: box, tooltip: tooltip, overlay: overlay, indicators: indicators, contextMenu: contextMenu })) }));
 });
-const ScorePlotBody = observer(function ScorePlotBody({ canvasRef, mouseTracker, width, plotGeometry, tooltip, overlay, indicators, contextMenu, }) {
+const ScorePlotBody = observer(function ScorePlotBody({ model, canvasRef, mouseTracker, width, plotGeometry, tooltip, overlay, indicators, contextMenu, }) {
     return (_jsxs(_Fragment, { children: [_jsx("canvas", { ref: canvasRef, style: {
                     width,
                     height: plotGeometry.plotHeight,
                     position: 'absolute',
                     left: 0,
                     top: plotGeometry.yTop,
-                } }), overlay?.(plotGeometry), _jsx(PointerLayer, { mouseTracker: mouseTracker, children: tooltip }), indicators ? (_jsx(BottomRightIndicators, { children: indicators() })) : null, contextMenu ? _jsx(DisplayContextMenu, { model: contextMenu }) : null] }));
+                } }), overlay?.(plotGeometry), _jsx(PointerLayer, { mouseTracker: mouseTracker, children: tooltip }), indicators ? (_jsx(BottomRightIndicators, { scrollableHeight: model.scrollableHeight, children: indicators() })) : null, contextMenu ? _jsx(DisplayContextMenu, { model: contextMenu }) : null] }));
 });

package/esm/ScorePlotSvgFrame.d.ts

@@ -1,21 +1,16 @@
-import type { SvgExportable } from '@jbrowse/core/svg/svgReady';
-import type { LgvSvgBodyProps } from '@jbrowse/display-kit/renderDisplaySvg';
+import type { LgvSvgBodyProps, LgvSvgExportable } from '@jbrowse/display-kit/renderDisplaySvg';
 import type { Mark, MarkFrame } from '@jbrowse/render-core/marks';
 import type React from 'react';
-export interface ScorePlotSvgModel extends SvgExportable {
-    id: string;
-    height: number;
-}
+export type ScorePlotSvgModel = LgvSvgExportable;
 /**
  * The SVG-export body of a display with a score axis, mounted through
  * `renderDisplaySvg`, which draws the axis and cross-hatches. Paints `marks`
- * over `regions` inside the plot box, at the export's width and the box's
- * height — the two fields of `renderState` the on-screen canvas sizes
- * differently. `plotGeometry` defaults to the single-plot box `ScorePlotChrome`
- * draws in; multi-wiggle stacks its rows over the full height instead.
- * `children` draw over the plot, in the same untranslated space as the axis.
+ * over `regions` inside the plot box. `plotGeometry` defaults to the
+ * single-plot box `ScorePlotChrome` draws in; multi-wiggle stacks its rows over
+ * the full height instead. `children` draw over the plot, in the same
+ * untranslated space as the axis.
  */
-export declare function ScorePlotSvgFrame<TRegion, TState extends MarkFrame>({ height, canvasWidth, renderBlocks, opts, plotGeometry, marks, regions, renderState, children, }: LgvSvgBodyProps<ScorePlotSvgModel> & {
+export declare function ScorePlotSvgFrame<TRegion, TState extends MarkFrame>({ height, canvasWidth, renderBlocks, opts, plotGeometry, marks, regions, renderState, children, }: Pick<LgvSvgBodyProps<unknown>, 'height' | 'canvasWidth' | 'renderBlocks' | 'opts'> & {
     plotGeometry?: {
         yTop: number;
         plotHeight: number;