@jbrowse/plugin-linear-genome-view 5.0.0-beta.16 → 5.0.0-beta.17

package/esm/LinearGenomeView/axisConfigSchema.d.ts

@@ -0,0 +1,18 @@
+/**
+ * #config LinearGenomeViewAxis
+ * #category view
+ * The linear genome view's `axis`: the ruler along its top, whose ticks
+ * `grid` carries down through the tracks.
+ *
+ * #example
+ * ```js
+ * { type: 'LinearGenomeView', axis: { grid: false } }
+ * ```
+ */
+export declare const linearGenomeViewAxisConfigSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    readonly grid: {
+        type: "boolean";
+    } & {
+        defaultValue: boolean;
+    };
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined, undefined, import("@jbrowse/core/configuration").ConfigurationSchemaRequirement<Partial<Record<string, string[]>>, string>, any>>;

package/esm/LinearGenomeView/axisConfigSchema.js

@@ -0,0 +1,22 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+/**
+ * #config LinearGenomeViewAxis
+ * #category view
+ * The linear genome view's `axis`: the ruler along its top, whose ticks
+ * `grid` carries down through the tracks.
+ *
+ * #example
+ * ```js
+ * { type: 'LinearGenomeView', axis: { grid: false } }
+ * ```
+ */
+export const linearGenomeViewAxisConfigSchema = ConfigurationSchema('LinearGenomeViewAxis', {
+    /**
+     * #slot
+     */
+    grid: {
+        type: 'boolean',
+        defaultValue: true,
+        description: "carry the ruler's ticks down through the tracks",
+    },
+}, { closed: true });

package/esm/LinearGenomeView/components/Highlight.js

@@ -2,14 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useStyleTheme } from '@jbrowse/core/ui/PaletteContext';
 import { getSession } from '@jbrowse/core/util';
 import CloseIcon from '@mui/icons-material/Close';
+import EditIcon from '@mui/icons-material/Edit';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { observer } from 'mobx-react';
 import HighlightBand from './HighlightBand.js';
 import HighlightChip from './HighlightChip.js';
+import HighlightLabelDialog from './HighlightLabelDialog.js';
 import { getHighlightColor } from './util.js';
-// A band narrower than the link-icon chip clips it into a smudge, so below this
-// width the chip is dropped (the band itself still draws).
-const CHIP_MIN_WIDTH = 24;
 const Highlight = observer(function Highlight({ model, highlight, }) {
     const theme = useStyleTheme();
     const coords = model.getHighlightCoords(highlight);
@@ -17,7 +16,24 @@ const Highlight = observer(function Highlight({ model, highlight, }) {
     const label = getSession(model).highlightLabelsVisible
         ? highlight.label
         : undefined;
-    return coords ? (_jsx(HighlightBand, { coords: coords, background: bandColor.toRgbString(), label: label, gaps: model.nonGenomicTrackBands(), children: coords.width >= CHIP_MIN_WIDTH ? (_jsx(HighlightChip, { color: bandColor, label: label, tooltip: highlight.label ?? 'Highlighted region', menuItems: [
+    return coords ? (_jsx(HighlightBand, { coords: coords, background: bandColor.toRgbString(), label: label, gaps: model.nonGenomicTrackBands(), children: _jsx(HighlightChip, { color: bandColor, label: label, tooltip: highlight.label ?? 'Highlighted region', menuItems: [
+                {
+                    label: 'Edit label...',
+                    icon: EditIcon,
+                    onClick: () => {
+                        const session = getSession(model);
+                        session.queueDialog(handleClose => [
+                            HighlightLabelDialog,
+                            {
+                                label: highlight.label,
+                                onSubmit: (label) => {
+                                    session.updateHighlight(highlight, { label });
+                                },
+                                handleClose,
+                            },
+                        ]);
+                    },
+                },
                 {
                     label: 'Dismiss highlight',
                     icon: CloseIcon,
@@ -33,6 +49,6 @@ const Highlight = observer(function Highlight({ model, highlight, }) {
                     },
                 },
                 ...model.highlightMenuItems(highlight),
-            ] })) : null })) : null;
+            ] }) })) : null;
 });
 export default Highlight;

package/esm/LinearGenomeView/components/HighlightBand.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
@@ -16,10 +16,15 @@ const useStyles = makeStyles()(theme => ({
         zIndex: 1,
         pointerEvents: 'none',
     },
+    // a sibling of the band, so a label wider than a narrow band runs past its
+    // right edge. No `top`: its static position is the band's top edge, where
+    // the first track's TrackLabel (zIndex 200) would otherwise cover it
     overlay: {
         position: 'absolute',
-        top: 0,
         left: 3,
+        zIndex: 201,
+        pointerEvents: 'none',
+        whiteSpace: 'nowrap',
     },
     label: {
         color: theme.palette.text.primary,
@@ -35,20 +40,20 @@ export function gapMask(gaps) {
     return `linear-gradient(to bottom, ${stops.join(', ')})`;
 }
 // OverviewHighlight stays separate (different bpToPx API). A non-interactive
-// colored band with an
-// optional top label; when `children` (the highlight chip) is passed it renders
-// that instead of the plain label. Visibility is toggled from the view menu
+// colored band with an optional top label; when `children` (the highlight
+// chip) is passed it renders that instead of the plain label. Visibility is
+// toggled from the view menu
 const HighlightBand = observer(function HighlightBand({ coords, background, label, gaps, children, }) {
     const { classes } = useStyles();
     const content = children ??
         (label ? (_jsx(Typography, { variant: "caption", className: classes.label, noWrap: true, children: label })) : null);
-    return (_jsx("div", { "data-testid": "highlight-band", className: classes.highlight, style: {
-            transform: `translateX(${coords.left}px)`,
-            width: coords.width,
-            background,
-            ...(gaps?.length
-                ? { maskImage: gapMask(gaps), WebkitMaskImage: gapMask(gaps) }
-                : undefined),
-        }, children: coords.width > 3 && content ? (_jsx("div", { className: classes.overlay, children: content })) : null }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-testid": "highlight-band", className: classes.highlight, style: {
+                    transform: `translateX(${coords.left}px)`,
+                    width: coords.width,
+                    background,
+                    ...(gaps?.length
+                        ? { maskImage: gapMask(gaps), WebkitMaskImage: gapMask(gaps) }
+                        : undefined),
+                } }), content ? (_jsx("div", { className: classes.overlay, style: { transform: `translateX(${coords.left}px)` }, children: content })) : null] }));
 });
 export default HighlightBand;

package/esm/LinearGenomeView/components/HighlightChip.js

@@ -3,13 +3,18 @@ import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import LinkIcon from '@mui/icons-material/Link';
 import { Box, Tooltip, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-// Interactive chip drawn inside a highlight band: a link icon tinted to the
-// band color plus an optional inline label, wrapped in a context menu. Sets its
-// own pointer-events since the band is click-through.
+// Interactive chip at a highlight band's top: a link icon tinted to the band
+// color plus an optional inline label, wrapped in a context menu. Its own
+// background keeps it legible over the first track's label, and it sets its own
+// pointer-events since the band is click-through.
 const HighlightChip = observer(function HighlightChip({ color, label, tooltip, menuItems, }) {
     // hide the icon color when the band is fully transparent ("label-only"
     // highlight); otherwise bump to 0.8 alpha so the chip stays legible
     const chipAlpha = color.alpha() === 0 ? 0 : 0.8;
-    return (_jsx(Box, { sx: { pointerEvents: 'auto' }, children: _jsx(CascadingMenuButton, { "data-testid": "highlight-chip", menuItems: menuItems, children: _jsx(Tooltip, { title: tooltip, arrow: true, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(LinkIcon, { fontSize: "small", sx: { color: color.alpha(chipAlpha).toRgbString() } }), label ? (_jsx(Typography, { variant: "caption", noWrap: true, children: label })) : null] }) }) }) }));
+    return (_jsx(Box, { sx: {
+            pointerEvents: 'auto',
+            bgcolor: 'background.paper',
+            borderRadius: 1,
+        }, children: _jsx(CascadingMenuButton, { "data-testid": "highlight-chip", menuItems: menuItems, children: _jsx(Tooltip, { title: tooltip, arrow: true, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(LinkIcon, { fontSize: "small", sx: { color: color.alpha(chipAlpha).toRgbString() } }), label ? (_jsx(Typography, { variant: "caption", noWrap: true, children: label })) : null] }) }) }) }));
 });
 export default HighlightChip;

package/esm/LinearGenomeView/components/HighlightLabelDialog.d.ts

@@ -0,0 +1,6 @@
+declare const HighlightLabelDialog: ({ label, onSubmit, handleClose, }: {
+    label?: string;
+    onSubmit: (label: string | undefined) => void;
+    handleClose: () => void;
+}) => import("react").JSX.Element;
+export default HighlightLabelDialog;

package/esm/LinearGenomeView/components/HighlightLabelDialog.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SubmitDialog } from '@jbrowse/core/ui';
+import { TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+// Names a highlight. The label is written on the band and in every view that
+// draws the session's highlights, such as an alignment's column or a
+// structure's residue; an empty label leaves the highlight unnamed.
+const HighlightLabelDialog = observer(function HighlightLabelDialog({ label, onSubmit, handleClose, }) {
+    const [val, setVal] = useState(label ?? '');
+    return (_jsx(SubmitDialog, { open: true, maxWidth: "xs", fullWidth: true, title: "Edit highlight label", onCancel: handleClose, onSubmit: () => {
+            onSubmit(val.trim() || undefined);
+            handleClose();
+        }, children: _jsx(TextField, { label: "Label", autoFocus: true, fullWidth: true, variant: "outlined", value: val, onChange: event => {
+                setVal(event.target.value);
+            } }) }));
+});
+export default HighlightLabelDialog;

package/esm/LinearGenomeView/components/SVGHighlightBand.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFillProps } from '@jbrowse/core/util';
 // One full-height SVG highlight band with an optional label at the top,
-// mirroring the on-screen HighlightBand div. The label is hidden on bands too
-// narrow to fit it.
+// mirroring the on-screen HighlightBand div: a label wider than its band runs
+// past the band's right edge.
 export default function SVGHighlightBand({ coords, height, color, label, labelColor, }) {
-    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: coords.left, y: 0, width: coords.width, height: height, ...getFillProps(color) }), label && coords.width > 3 ? (_jsx("text", { x: coords.left + 3, y: 2, fontSize: 11, dominantBaseline: "hanging", ...getFillProps(labelColor), children: label })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: coords.left, y: 0, width: coords.width, height: height, ...getFillProps(color) }), label ? (_jsx("text", { x: coords.left + 3, y: 2, fontSize: 11, dominantBaseline: "hanging", ...getFillProps(labelColor), children: label })) : null] }));
 }

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -40,13 +40,13 @@ const TracksContainer = observer(function TracksContainer({ children, model, })
     const { classes } = useStyles();
     const { pluginManager } = getEnv(model);
     const sideScroll = useSideScroll(model);
-    const { showGridlines, showCenterLine } = model;
+    const { axisGrid: showGridlines, showCenterLine } = model;
     const ref = useRef(null);
     // shift-drag range select over the whole tracks area. This is intentionally
     // a separate range-select instance from the one inside <Rubberband> (the
     // scalebar control); don't dedupe them — they cover different regions.
     const range = useRangeSelect(ref, model, true);
-    return (_jsxs("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onPointerDown: sideScroll.pointerDown, onClickCapture: sideScroll.clickCapture, onMouseDown: range.mouseDown, onMouseMove: event => {
+    return (_jsxs("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, ...sideScroll, onMouseDown: range.mouseDown, onMouseMove: event => {
             range.mouseMove(event);
         }, onMouseLeave: () => {
             range.mouseOut();

package/esm/LinearGenomeView/components/useSideScroll.d.ts

@@ -15,6 +15,7 @@ import type React from 'react';
  * effect, so a release that lands before React commits still finds them.
  */
 export declare function useSideScroll(model: LinearGenomeViewModel): {
-    pointerDown: (event: React.PointerEvent) => void;
-    clickCapture: (event: React.MouseEvent) => void;
+    onPointerDownCapture: (event: React.PointerEvent) => void;
+    onPointerDown: (event: React.PointerEvent) => void;
+    onClickCapture: (event: React.MouseEvent) => void;
 };

package/esm/LinearGenomeView/components/useSideScroll.js

@@ -10,7 +10,7 @@ const PAN_CLICK_THRESHOLD_PX = 4;
 // as `data-gesture-owner`. `data-pan-dragging` is present from press to
 // release; `data-pan-moved` is set once the press travels past the threshold
 // or becomes a pinch, and cleared by the next press, so it still answers for
-// the click that follows the release: `clickCapture` swallows that click
+// the click that follows the release: `onClickCapture` swallows that click
 // before any track sees it.
 const PAN_DRAGGING_ATTR = 'data-pan-dragging';
 const PAN_MOVED_ATTR = 'data-pan-moved';
@@ -36,16 +36,21 @@ export function useSideScroll(model) {
     useEffect(() => () => {
         gestureRef.current?.cancel();
     }, []);
-    function pointerDown(event) {
+    // The marker outlives the gesture that set it, so every press clears it, in
+    // the capture phase: a track that keeps its own press and stops it bubbling
+    // (multiway's lane slide, maf's drag select) would otherwise leave the last
+    // pan's marker standing to swallow its click.
+    function onPointerDownCapture(event) {
+        if (!gestureRef.current) {
+            event.currentTarget.removeAttribute(PAN_MOVED_ATTR);
+        }
+    }
+    function onPointerDown(event) {
         const host = event.currentTarget;
         if (gestureRef.current) {
             gestureRef.current.join(event);
             return;
         }
-        // Cleared for EVERY press, ahead of the returns below: the marker outlives
-        // the gesture that set it, and a stale true is what the next reader of
-        // this DOM contract would inherit.
-        host.removeAttribute(PAN_MOVED_ATTR);
         if (event.shiftKey || event.button !== 0 || !event.isPrimary) {
             return;
         }
@@ -165,10 +170,10 @@ export function useSideScroll(model) {
     // The browser fires `click` after a release on whatever the press and the
     // release share, which over a track is its canvas, so a pan that ended on a
     // gene would open that gene's details.
-    function clickCapture(event) {
+    function onClickCapture(event) {
         if (event.currentTarget.hasAttribute(PAN_MOVED_ATTR)) {
             event.stopPropagation();
         }
     }
-    return { pointerDown, clickCapture };
+    return { onPointerDownCapture, onPointerDown, onClickCapture };
 }

package/esm/LinearGenomeView/launchKeys.d.ts

@@ -1,2 +1,2 @@
 import type { InitState } from './types.ts';
-export declare const lgvLaunchKeys: import("@jbrowse/core/util/withLaunchInput").LaunchKeyRegistration<InitState, "bpPerPx" | "offsetPx" | "showCytobandsSetting">;
+export declare const lgvLaunchKeys: import("@jbrowse/core/util/withLaunchInput").LaunchKeyRegistration<InitState, "bpPerPx" | "colorByCDS" | "offsetPx" | "showCytobandsSetting">;

package/esm/LinearGenomeView/launchKeys.js

@@ -4,10 +4,11 @@ import { defineLaunchKeys } from '@jbrowse/core/util/withLaunchInput';
 // key that partitions as a typo.
 //
 // `bpPerPx`/`offsetPx` are v4's viewport spelling from before it was stored as
-// a window, and `showCytobandsSetting` its cytoband toggle. None is a declared
-// property, so the partition would read them as typos; the model's own
-// preProcessSnapshot still converts them, so a URL or saved spec naming them
-// goes on working. Share links carry all three, so they stay.
+// a window, `showCytobandsSetting` its cytoband toggle and `colorByCDS` its
+// frame coloring. None is a declared property, so the partition would read them
+// as typos; the model's own preProcessSnapshot still converts them, so a URL or
+// saved spec naming them goes on working. Share links carry all four, so they
+// stay.
 //
 // #launchKeys LinearGenomeView — the URL parameters page renders this list
 // rather than restating it; each of these keys has its own `&param=` section
@@ -23,5 +24,5 @@ export const lgvLaunchKeys = defineLaunchKeys()({
     tracks: { kind: 'trackEntries' },
     highlight: { kind: 'launch' },
 }, {
-    passThrough: ['bpPerPx', 'offsetPx', 'showCytobandsSetting'],
+    passThrough: ['bpPerPx', 'offsetPx', 'showCytobandsSetting', 'colorByCDS'],
 });

package/esm/LinearGenomeView/menuItems.js

@@ -229,9 +229,9 @@ export function buildMenuItems(self) {
             {
                 label: 'Guidelines',
                 type: 'checkbox',
-                checked: self.showGridlines,
+                checked: self.axisGrid,
                 onClick: () => {
-                    self.setShowGridlines(!self.showGridlines);
+                    self.setAxisGrid(!self.axisGrid);
                 },
             },
             {
@@ -254,9 +254,9 @@ export function buildMenuItems(self) {
             {
                 label: 'CDS reading frame colors',
                 type: 'checkbox',
-                checked: self.colorByCDS,
+                checked: self.colorByFrame,
                 onClick: () => {
-                    self.setColorByCDS(!self.colorByCDS);
+                    self.setColorByFrame(!self.colorByFrame);
                 },
             },
             {

package/esm/LinearGenomeView/model.d.ts

@@ -55,7 +55,7 @@ export interface HighlightRegion {
  *   views: [
  *     {
  *       type: 'LinearGenomeView',
- *       colorByCDS: true,
+ *       colorByFrame: true,
  *       assembly: 'hg38',
  *       loc: 'chr1:1,000,000-1,100,000',
  *       tracks: ['genes', 'alignments'],
@@ -65,7 +65,7 @@ export interface HighlightRegion {
  * ```
  * `assembly`, `loc`, `tracks`, `tracklist`, `nav` and `highlight` need
  * on-attach resolution and are captured into the `launch` property below;
- * `colorByCDS`, `showAminoAcids`, `showCenterLine` and `trackLabels` are plain
+ * `colorByFrame`, `showAminoAcids`, `showCenterLine` and `trackLabels` are plain
  * view props MST restores natively. Both are written the same way.
  * At runtime the same model is driven imperatively — every property and action
  * below is reachable on `viewState.session.views[0]`:
@@ -80,7 +80,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
     displayName: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
     minimized: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-}, "colorByCDS" | "displayedRegions" | "hideHeader" | "hideHeaderOverview" | "hideNoTracksActive" | "id" | "launch" | "legacyBpPerPx" | "scalebarOnly" | "showAminoAcids" | "showCenterLine" | "showCytobands" | "showGridlines" | "showTrackOutlines" | "trackLabels" | "trackSelectorType" | "tracks" | "type" | "windowStartBp" | "windowWidthBp"> & {
+}, "axis" | "colorByFrame" | "displayedRegions" | "hideHeader" | "hideHeaderOverview" | "hideNoTracksActive" | "id" | "launch" | "legacyBpPerPx" | "scalebarOnly" | "showAminoAcids" | "showCenterLine" | "showCytobands" | "showTrackOutlines" | "trackLabels" | "trackSelectorType" | "tracks" | "type" | "windowStartBp" | "windowWidthBp"> & {
     id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
     type: import("@jbrowse/mobx-state-tree").IType<string | undefined, string, string>;
     windowStartBp: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
@@ -95,8 +95,14 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     showCenterLine: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showCytobands: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     trackLabels: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
-    showGridlines: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-    colorByCDS: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    axis: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+        readonly grid: {
+            type: "boolean";
+        } & {
+            defaultValue: boolean;
+        };
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined, undefined, import("@jbrowse/core/configuration").ConfigurationSchemaRequirement<Partial<Record<string, string[]>>, string>, any>>, [undefined]>;
+    colorByFrame: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showAminoAcids: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showTrackOutlines: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     scalebarOnly: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
@@ -184,6 +190,11 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      */
     volatileGuides: VolatileGuide[];
 } & {
+    /**
+     * #getter
+     * `axis.grid`: whether the ruler's ticks run down through the tracks.
+     */
+    readonly axisGrid: boolean;
     /**
      * #getter
      * the launch state that still has something to apply — the gate every
@@ -857,7 +868,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #action
      */
-    setColorByCDS(flag: boolean): void;
+    setColorByFrame(flag: boolean): void;
     /**
      * #action
      */
@@ -916,7 +927,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #action
      */
-    setShowGridlines(b: boolean): void;
+    setAxisGrid(grid: boolean): void;
     /**
      * #action
      * set temporary vertical guides (e.g., for LD display hover)
@@ -1808,7 +1819,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
     displayName: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
     minimized: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-}, "colorByCDS" | "displayedRegions" | "hideHeader" | "hideHeaderOverview" | "hideNoTracksActive" | "id" | "launch" | "legacyBpPerPx" | "scalebarOnly" | "showAminoAcids" | "showCenterLine" | "showCytobands" | "showGridlines" | "showTrackOutlines" | "trackLabels" | "trackSelectorType" | "tracks" | "type" | "windowStartBp" | "windowWidthBp"> & {
+}, "axis" | "colorByFrame" | "displayedRegions" | "hideHeader" | "hideHeaderOverview" | "hideNoTracksActive" | "id" | "launch" | "legacyBpPerPx" | "scalebarOnly" | "showAminoAcids" | "showCenterLine" | "showCytobands" | "showTrackOutlines" | "trackLabels" | "trackSelectorType" | "tracks" | "type" | "windowStartBp" | "windowWidthBp"> & {
     id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
     type: import("@jbrowse/mobx-state-tree").IType<string | undefined, string, string>;
     windowStartBp: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
@@ -1823,8 +1834,14 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     showCenterLine: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showCytobands: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     trackLabels: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
-    showGridlines: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-    colorByCDS: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    axis: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+        readonly grid: {
+            type: "boolean";
+        } & {
+            defaultValue: boolean;
+        };
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined, undefined, import("@jbrowse/core/configuration").ConfigurationSchemaRequirement<Partial<Record<string, string[]>>, string>, any>>, [undefined]>;
+    colorByFrame: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showAminoAcids: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showTrackOutlines: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     scalebarOnly: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
@@ -1912,6 +1929,11 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      */
     volatileGuides: VolatileGuide[];
 } & {
+    /**
+     * #getter
+     * `axis.grid`: whether the ruler's ticks run down through the tracks.
+     */
+    readonly axisGrid: boolean;
     /**
      * #getter
      * the launch state that still has something to apply — the gate every
@@ -2585,7 +2607,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #action
      */
-    setColorByCDS(flag: boolean): void;
+    setColorByFrame(flag: boolean): void;
     /**
      * #action
      */
@@ -2644,7 +2666,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #action
      */
-    setShowGridlines(b: boolean): void;
+    setAxisGrid(grid: boolean): void;
     /**
      * #action
      * set temporary vertical guides (e.g., for LD display hover)
@@ -3532,7 +3554,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
 } & {
     afterCreate(): void;
     afterAttach(): void;
-}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>, InitState, "bpPerPx" | "offsetPx" | "showCytobandsSetting">, {
+}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>, InitState, "bpPerPx" | "colorByCDS" | "offsetPx" | "showCytobandsSetting">, {
     displayName: string | undefined;
     minimized: boolean;
     id: string;
@@ -3548,8 +3570,8 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     trackSelectorType: "hierarchical";
     showCytobands: boolean;
     trackLabels: string;
-    showGridlines: boolean;
-    colorByCDS: boolean;
+    axis: import("@jbrowse/mobx-state-tree").ModelSnapshotType<Record<string, any>>;
+    colorByFrame: boolean;
     showAminoAcids: boolean;
     showTrackOutlines: boolean;
     scalebarOnly: boolean;

package/esm/LinearGenomeView/model.js

@@ -1,5 +1,5 @@
 import { canonicalLocString } from '@jbrowse/core/TextSearch/places';
-import { getConf } from '@jbrowse/core/configuration';
+import { getConf, readConfObject } from '@jbrowse/core/configuration';
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { exportViewSvg } from '@jbrowse/core/svg/exportViewSvg';
 import { assembleLocString, clamp, getBpDisplayStr, getNotificationSink, getSession, isSessionModelWithWidgets, localStorageGetBoolean, localStorageGetItem, localStorageSetBoolean, localStorageSetItem, springAnimate, sum, } from '@jbrowse/core/util';
@@ -15,10 +15,11 @@ import { assemblyErrorMessage, computeViewStatus, viewLoading, } from '@jbrowse/
 import { pendingLaunch, withLaunchInput, } from '@jbrowse/core/util/withLaunchInput';
 import { MIN_DISPLAY_HEIGHT } from '@jbrowse/display-kit/const';
 import { contentRightEdgePx } from '@jbrowse/display-kit/regionHost';
-import { cast, getParent, hasParent, isAlive, types, } from '@jbrowse/mobx-state-tree';
+import { cast, getParent, getSnapshot, hasParent, isAlive, types, } from '@jbrowse/mobx-state-tree';
 import { observable, when } from 'mobx';
 import { handleSelectedRegion, isOpenInView, navToOption, } from '../searchUtils.js';
 import { doAfterAttach } from './afterAttach.js';
+import { linearGenomeViewAxisConfigSchema } from './axisConfigSchema.js';
 import { getCytobands, shouldSwapTracks } from './components/util.js';
 import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT, MIN_BP_PER_PX, MINIMIZED_TRACK_HEIGHT, MINIMUM_BLOCK_WIDTH, RESIZE_ALL_HANDLE_HEIGHT, RESIZE_HANDLE_HEIGHT, SCALE_BAR_HEIGHT, SHOW_ALL_REGIONS_FILL, TRACK_OUTLINE_BORDER, TRACK_TOP_GAP, } from './consts.js';
 import { planFlight } from './flyTo.js';
@@ -154,7 +155,7 @@ function isTrackSelectorVisible(self) {
  *   views: [
  *     {
  *       type: 'LinearGenomeView',
- *       colorByCDS: true,
+ *       colorByFrame: true,
  *       assembly: 'hg38',
  *       loc: 'chr1:1,000,000-1,100,000',
  *       tracks: ['genes', 'alignments'],
@@ -164,7 +165,7 @@ function isTrackSelectorVisible(self) {
  * ```
  * `assembly`, `loc`, `tracks`, `tracklist`, `nav` and `highlight` need
  * on-attach resolution and are captured into the `launch` property below;
- * `colorByCDS`, `showAminoAcids`, `showCenterLine` and `trackLabels` are plain
+ * `colorByFrame`, `showAminoAcids`, `showCenterLine` and `trackLabels` are plain
  * view props MST restores natively. Both are written the same way.
  * At runtime the same model is driven imperatively — every property and action
  * below is reachable on `viewState.session.views[0]`:
@@ -267,7 +268,7 @@ export function stateModelFactory(pluginManager) {
         /**
          * #property
          * show the "center line". A personal preference: never in a session
-         * snapshot. It, showCytobands, trackLabels, colorByCDS, showAminoAcids
+         * snapshot. It, showCytobands, trackLabels, colorByFrame, showAminoAcids
          * and showTrackOutlines start from this browser's last choice, which
          * their setters record.
          */
@@ -291,20 +292,21 @@ export function stateModelFactory(pluginManager) {
         trackLabels: types.optional(types.string, () => localStorageGetItem('lgv-trackLabels') ?? ''),
         /**
          * #property
-         * show the "gridlines" in the track area
+         * The ruler's guide, a [](/docs/config/lineargenomeviewaxis) object:
+         * `{ grid: false }` stops its ticks running down through the tracks.
          */
-        showGridlines: types.stripDefault(types.boolean, true),
+        axis: types.stripDefault(linearGenomeViewAxisConfigSchema, {}),
         /**
          * #property
          * color CDS segments by reading frame
          */
-        colorByCDS: types.optional(types.boolean, () => localStorageGetBoolean('lgv-colorByCDS', false)),
+        colorByFrame: types.optional(types.boolean, () => localStorageGetBoolean('lgv-colorByFrame', false)),
         /**
          * #property
          * draw translated codons on coding features once zoomed in far enough:
          * an alternating per-codon shading, and the amino acid letters on top of
-         * it at base-level zoom. Independent of `colorByCDS`, which only recolors
-         * the segments by frame.
+         * it at base-level zoom. Independent of `colorByFrame`, which only
+         * recolors the segments by frame.
          */
         showAminoAcids: types.optional(types.boolean, () => localStorageGetBoolean('lgv-showAminoAcids', true)),
         /**
@@ -406,6 +408,13 @@ export function stateModelFactory(pluginManager) {
         };
     })
         .views(self => ({
+        /**
+         * #getter
+         * `axis.grid`: whether the ruler's ticks run down through the tracks.
+         */
+        get axisGrid() {
+            return readConfObject(self.axis, 'grid');
+        },
         // The viewport in pixels, derived from the window it frames — declared
         // ahead of every other getter so that the ~300 reads of `self.bpPerPx` /
         // `self.offsetPx` across the codebase go on resolving by name. Only the
@@ -1053,9 +1062,9 @@ export function stateModelFactory(pluginManager) {
         /**
          * #action
          */
-        setColorByCDS(flag) {
-            self.colorByCDS = flag;
-            localStorageSetBoolean('lgv-colorByCDS', flag);
+        setColorByFrame(flag) {
+            self.colorByFrame = flag;
+            localStorageSetBoolean('lgv-colorByFrame', flag);
         },
         /**
          * #action
@@ -1171,8 +1180,8 @@ export function stateModelFactory(pluginManager) {
         /**
          * #action
          */
-        setShowGridlines(b) {
-            self.showGridlines = b;
+        setAxisGrid(grid) {
+            self.axis = cast({ ...getSnapshot(self.axis), grid });
         },
         /**
          * #action
@@ -2891,12 +2900,14 @@ export function stateModelFactory(pluginManager) {
             return snap;
         }
         // v4's `showCytobandsSetting` persists as the bare `showCytobands` prop
-        // (the capability-gated getter is `effectiveShowCytobands`).
-        const { showCytobandsSetting, offsetPx, bpPerPx, ...rest } = snap;
+        // (the capability-gated getter is `effectiveShowCytobands`), and v4's
+        // `colorByCDS` as `colorByFrame`.
+        const { showCytobandsSetting, colorByCDS, offsetPx, bpPerPx, ...rest } = snap;
         return {
             ...(showCytobandsSetting !== undefined
                 ? { showCytobands: showCytobandsSetting }
                 : {}),
+            ...(colorByCDS !== undefined ? { colorByFrame: colorByCDS } : {}),
             // The viewport used to persist as pixels. Half of that converts
             // exactly and needs no width — the left edge in bp is offsetPx *
             // bpPerPx — and half of it cannot convert at all, because the width

package/esm/LinearGenomeView/svgcomponents/useViewSvgFigure.js

@@ -126,7 +126,7 @@ const FrozenSvgFigure = memo(function FrozenSvgFigure({ view, snapshot, }) {
  * (hidden sections, collapses, height overrides: `groupStateKey`), which are
  * volatile and in no snapshot; **the reload counter**, since a Retry or a Force
  * load leaves every snapshot as it was while the figure has an error or a
- * too-large note to replace; **the view's coloring toggles** (`colorByCDS`,
+ * too-large note to replace; **the view's coloring toggles** (`colorByFrame`,
  * `showAminoAcids`), named one by one because the view's own snapshot moves
  * every pan frame; **the width**, since a resize can widen the canvas without
  * moving the locus; **the theme**, since each display bakes colors into its own
@@ -172,7 +172,7 @@ function figureKey(view, themeName) {
                 display?.reloadCounter,
             ];
         }),
-        view.colorByCDS,
+        view.colorByFrame,
         view.showAminoAcids,
         session.getActiveThemeOptions?.(themeName),
         session.highlightsVisible ? view.highlights : false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "5.0.0-beta.16",
+  "version": "5.0.0-beta.17",
   "type": "module",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
@@ -26,10 +26,10 @@
     "@mui/material": "^9.5.0",
     "mobx": "^7.0.6",
     "mobx-react": "^10.0.2",
-    "@jbrowse/core": "^5.0.0-beta.16",
-    "@jbrowse/display-kit": "^5.0.0-beta.16",
-    "@jbrowse/display-ui": "^5.0.0-beta.16",
-    "@jbrowse/render-core": "^5.0.0-beta.16"
+    "@jbrowse/core": "^5.0.0-beta.17",
+    "@jbrowse/display-ui": "^5.0.0-beta.17",
+    "@jbrowse/render-core": "^5.0.0-beta.17",
+    "@jbrowse/display-kit": "^5.0.0-beta.17"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -40,7 +40,7 @@
   },
   "sideEffects": false,
   "devDependencies": {
-    "@jbrowse/display-test-utils": "^5.0.0-beta.16"
+    "@jbrowse/display-test-utils": "^5.0.0-beta.17"
   },
   "scripts": {
     "prebuild": "pnpm clean",