@jbrowse/core 5.0.0-beta.1 → 5.0.0-beta.11

package/esm/ui/RefNameAutocomplete/util.d.ts

@@ -30,6 +30,19 @@ export declare function cap(options: Option[]): Option[];
  */
 export declare function getRefNameOptions(assembly: RefNameMatchSource | undefined, inputValue: string): Option[];
 export declare function getDeduplicatedResult(results: BaseResult[]): Option[];
+/**
+ * The muted line under a row: a sequence's length, where a hit goes and the
+ * track it came from, or how many places share the row. A row sharing its name
+ * with a sequence is about the sequence, since an annotation's region feature
+ * names it too. A row whose hits all go to one place says where, without a
+ * track, since the pick lands through whichever of them the view has open. A
+ * row standing for many regions needs none.
+ */
+export declare function optionDetail(result: BaseResult, lookups: {
+    trackNameOf: (trackId: string) => string | undefined;
+    lengthOf: (refName: string) => number | undefined;
+    placesOf: (results: BaseResult[]) => BaseResult[][];
+}): string | undefined;
 export declare function coerceToResult(option: string | Option): BaseResult;
 export declare function getOptionLabel(option: string | Option): string;
 /**

package/esm/ui/RefNameAutocomplete/util.js

@@ -1,5 +1,5 @@
 import BaseResult, { RefSequenceResult } from '../../TextSearch/BaseResults.js';
-import { measureText } from '../../util/index.js';
+import { getBpDisplayStr, measureText, toLocale } from '../../util/index.js';
 import { MAX_GLOB_REGIONS, matchRefNames, } from '../../util/selectNamedRegions.js';
 // Above the 13.71px the TextField renders at, and left there deliberately. The
 // table is Helvetica's and the box draws in Roboto, so measuring the value at 14
@@ -134,6 +134,47 @@ export function getDeduplicatedResult(results) {
             }),
         });
 }
+function formatLocString(locString) {
+    const match = /^(.+):(\d+)\.\.(\d+)$/.exec(locString);
+    return match
+        ? `${match[1]}:${toLocale(Number(match[2]))}-${toLocale(Number(match[3]))}`
+        : locString;
+}
+/**
+ * The muted line under a row: a sequence's length, where a hit goes and the
+ * track it came from, or how many places share the row. A row sharing its name
+ * with a sequence is about the sequence, since an annotation's region feature
+ * names it too. A row whose hits all go to one place says where, without a
+ * track, since the pick lands through whichever of them the view has open. A
+ * row standing for many regions needs none.
+ */
+export function optionDetail(result, lookups) {
+    const { trackNameOf, lengthOf, placesOf } = lookups;
+    const locString = result.getLocation();
+    const trackId = result.getTrackId();
+    const sequence = result.results?.find(r => r instanceof RefSequenceResult);
+    if (sequence) {
+        return optionDetail(sequence, lookups);
+    }
+    else if (result.results?.length) {
+        const places = placesOf(result.results);
+        const only = places.length === 1 ? places[0][0].getLocation() : undefined;
+        return only === undefined
+            ? `${places.length} matches`
+            : formatLocString(only);
+    }
+    else if (!locString || /\s/.test(locString)) {
+        return undefined;
+    }
+    else if (result instanceof RefSequenceResult) {
+        const length = lengthOf(locString);
+        return length === undefined ? undefined : getBpDisplayStr(length);
+    }
+    else {
+        const trackName = trackId === undefined ? undefined : trackNameOf(trackId);
+        return [formatLocString(locString), trackName].filter(Boolean).join(' · ');
+    }
+}
 // MUI freeSolo hands back the raw typed string when nothing in the list is
 // selected; wrap it so callers always get a BaseResult
 export function coerceToResult(option) {

package/esm/ui/ResizeHandle.d.ts

@@ -1,10 +1,12 @@
 import type React from 'react';
-declare function ResizeHandle({ onDrag, onDragStart, onDragEnd, vertical, bar, gain, className: originalClassName, onPointerDown, ...props }: {
+declare function ResizeHandle({ onDrag, onDragStart, onDragEnd, vertical, bar, grip, gain, className: originalClassName, onPointerDown, ...props }: {
     onDrag: (distance: number) => void;
     onDragStart?: () => void;
     onDragEnd?: () => void;
     vertical?: boolean;
     bar?: boolean;
+    /** An opaque `bar` with a grip pill, for the bottom edge of a view */
+    grip?: boolean | 'hover';
     /**
      * How many px this handle moves per px of the value it drags — see
      * `useResizeDrag`. Pass it when the value is shared by several stacked bands

package/esm/ui/ResizeHandle.js

@@ -1,16 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx, makeStyles } from '../util/tss-react/index.js';
 import { useResizeDrag } from '../util/useResizeDrag.js';
-// Two kinds of handle, one ladder of weight between them. A handle that draws
+const layer = (color) => `linear-gradient(${color}, ${color})`;
+// Three kinds of handle, one ladder of weight between them. A handle that draws
 // nothing at rest reveals itself under the pointer at exactly the weight a
 // visible one rests at (`action.disabled`); a visible one then goes past that,
 // to `action.active` — the same resting/hover pair `VerticalScrollbar`'s thumb
-// uses.
-//
-// `action.selected` (0.08 light / 0.16 dark) used to be the hover for both, and
-// was too faint to answer "is this the thing I grab?" over a dense pileup — and
-// on a `bar`, which rests at 0.26, it made the handle go *fainter* under the
-// pointer, since `:hover` beats the plain class whatever the source order.
+// uses. A `grip` bar sits on an opaque paper fill so a view's gridlines stop at
+// it, and a centred pill marks it as something to grab. `grip="hover"` draws
+// that grip only under the pointer or mid-drag.
 const useStyles = makeStyles()(theme => ({
     horizontalHandle: {
         cursor: 'row-resize',
@@ -18,21 +16,48 @@ const useStyles = makeStyles()(theme => ({
         // stop the browser turning a touch-drag into a scroll/pan gesture so the
         // pointer stream reaches us
         touchAction: 'none',
-        '&:hover': { background: theme.palette.action.disabled },
+        '&:hover': { backgroundColor: theme.palette.action.disabled },
     },
     verticalHandle: {
         cursor: 'col-resize',
         height: '100%',
         touchAction: 'none',
-        '&:hover': { background: theme.palette.action.disabled },
+        '&:hover': { backgroundColor: theme.palette.action.disabled },
     },
     // `bar` opt-in: the standard always-visible resize divider used at the bottom
     // (or side) of views and tracks. Other call sites stay invisible until hover.
     bar: { '&:hover': { background: theme.palette.action.active } },
     horizontalBar: { height: 4, background: theme.palette.action.disabled },
     verticalBar: { width: 4, background: theme.palette.action.disabled },
+    grip: {
+        backgroundColor: theme.palette.background.paper,
+        backgroundImage: `${layer(theme.palette.text.disabled)}, ${layer(theme.palette.action.disabled)}`,
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        '&:hover': {
+            backgroundColor: theme.palette.background.paper,
+            backgroundImage: `${layer(theme.palette.text.secondary)}, ${layer(theme.palette.text.disabled)}`,
+        },
+    },
+    gripOnHover: {
+        '&:not(:hover):not(:active)': {
+            backgroundColor: 'transparent',
+            backgroundImage: 'none',
+            borderColor: 'transparent',
+        },
+    },
+    horizontalGrip: {
+        height: 6,
+        backgroundSize: '24px 3px, auto',
+        borderTop: `1px solid ${theme.palette.text.disabled}`,
+    },
+    verticalGrip: {
+        width: 6,
+        backgroundSize: '3px 24px, auto',
+        borderLeft: `1px solid ${theme.palette.text.disabled}`,
+    },
 }));
-function ResizeHandle({ onDrag, onDragStart, onDragEnd, vertical = false, bar = false, gain, className: originalClassName, onPointerDown, ...props }) {
+function ResizeHandle({ onDrag, onDragStart, onDragEnd, vertical = false, bar = false, grip = false, gain, className: originalClassName, onPointerDown, ...props }) {
     const { classes } = useStyles();
     // The gesture, including the per-frame coalescing, the delta measurement and
     // the `data-gesture-owner` marker that keeps ancestor drags (the LGV
@@ -46,7 +71,15 @@ function ResizeHandle({ onDrag, onDragStart, onDragEnd, vertical = false, bar =
         vertical,
         gain,
     });
-    return (_jsx("div", { ...props, className: cx(originalClassName, vertical ? classes.verticalHandle : classes.horizontalHandle, bar && classes.bar, bar && (vertical ? classes.verticalBar : classes.horizontalBar)), ...handleProps, onPointerDown: event => {
+    return (_jsx("div", { ...props, className: cx(originalClassName, vertical ? classes.verticalHandle : classes.horizontalHandle, grip && [
+            classes.grip,
+            vertical ? classes.verticalGrip : classes.horizontalGrip,
+            grip === 'hover' && classes.gripOnHover,
+        ], bar &&
+            !grip && [
+            classes.bar,
+            vertical ? classes.verticalBar : classes.horizontalBar,
+        ]), ...handleProps, onPointerDown: event => {
             handleProps.onPointerDown(event);
             onPointerDown?.(event);
         } }));

package/esm/ui/ScrollChrome.d.ts

@@ -0,0 +1,13 @@
+import type { VirtualScrollModel } from '../util/useVirtualScrollWheel.ts';
+/**
+ * The chrome a virtually scrolled display mounts over its viewport: the edge
+ * shadow saying content is hidden, and the scrollbar to reach it. Renders
+ * nothing when the content fits.
+ */
+export default function ScrollChrome({ model, controlsId, top, }: {
+    model: VirtualScrollModel;
+    /** `id` of the scrolled viewport element, for `aria-controls`. */
+    controlsId: string;
+    /** Viewport offset from the top, for a display with a sticky band above it. */
+    top?: number;
+}): import("react").JSX.Element;

package/esm/ui/ScrollChrome.js

@@ -0,0 +1,11 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ScrollEdgeShadow from './ScrollEdgeShadow.js';
+import VerticalScrollbar from './VerticalScrollbar.js';
+/**
+ * The chrome a virtually scrolled display mounts over its viewport: the edge
+ * shadow saying content is hidden, and the scrollbar to reach it. Renders
+ * nothing when the content fits.
+ */
+export default function ScrollChrome({ model, controlsId, top = 0, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(ScrollEdgeShadow, { model: model, top: top }), _jsx(VerticalScrollbar, { model: model, controlsId: controlsId, top: top })] }));
+}

package/esm/ui/ScrollEdgeShadow.d.ts

@@ -1,7 +1,7 @@
+import type { VirtualScrollModel } from '../util/useVirtualScrollWheel.ts';
 /**
  * The "there is more content this way" edge shadow for a display that scrolls
- * its content virtually — the same displays that mount `VerticalScrollbar`,
- * drawn from the same three numbers.
+ * its content virtually, mounted beside `VerticalScrollbar` by `ScrollChrome`.
  *
  * It answers a question the scrollbar technically also answers and in practice
  * does not: **is this track showing me all of its features?** A 6px thumb on a
@@ -33,12 +33,9 @@
  * — autogrow/fit, and the truncation warning for features that were dropped
  * rather than merely scrolled away). This says *that*; that says *what to do*.
  */
-export default function ScrollEdgeShadow({ scrollTop, viewportHeight, contentHeight, top, }: {
-    scrollTop: number;
-    /** the visible viewport height */
-    viewportHeight: number;
-    /** the full scrollable content height */
-    contentHeight: number;
+declare const ScrollEdgeShadow: ({ model, top, }: {
+    model: VirtualScrollModel;
     /** viewport offset from the top, for a display with a sticky band above it */
     top?: number;
-}): import("react").JSX.Element | null;
+}) => import("react").JSX.Element | null;
+export default ScrollEdgeShadow;

package/esm/ui/ScrollEdgeShadow.js

@@ -1,34 +1,19 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { clamp } from '../util/numericUtils.js';
 import { makeStyles } from '../util/tss-react/index.js';
-/**
- * How deep each edge fade is. Enough to read as a soft edge under the content
- * rather than as a rule, not so deep that it dims a whole row (the shortest row
- * a display draws is ~7px in its most compact mode).
- */
-const SHADOW_HEIGHT = 16;
-/**
- * Sub-pixel slack before an edge counts as scrolled away from. A fit/grow mode
- * scale leaves float epsilon in `contentHeight`, and without this a track that
- * exactly fits draws a permanent bottom fade — the one thing this must never
- * do, since "nothing is hidden" is the state it exists to distinguish.
- *
- * `VerticalScrollbar` has no equivalent and so still draws a full-height thumb
- * on that same sub-pixel overflow. Deliberately not lifted there: a thumb
- * filling its track reads as "nothing to scroll", where a permanent fade reads
- * as "something is hidden" — the wrong answer rather than a redundant one.
- */
+// deep enough to read as a soft edge rather than a rule
+const SHADOW_HEIGHT = 10;
+// Slack at each edge, so a float residue in `scrollTop` doesn't mark one.
 const EPSILON = 0.5;
 const useStyles = makeStyles()(theme => {
     // The ink flips with the theme, and has to: a black shadow is invisible on
     // the dark theme's #121212 canvas, which is the same trap the scrollbar thumb
     // hit before it became theme-aware.
     const ink = theme.palette.mode === 'dark' ? '255,255,255' : '0,0,0';
-    // 0.18, down from the 0.3 this shipped at: over a dense pileup the deep end
-    // of the ramp read as a band of its own and drew the eye before the features
-    // did, which inverts what it is for. It only has to be findable when someone
-    // asks "is that everything?", not noticeable when nobody asked.
-    const from = `rgba(${ink},0.18)`;
+    // findable when someone asks "is that everything?", not noticeable when
+    // nobody asked
+    const from = `rgba(${ink},0.1)`;
     // NOT the `transparent` keyword, which is transparent BLACK: interpolating to
     // it puts a grey cast through the middle of the ramp, and on the dark theme's
     // white ink that is the whole ramp.
@@ -46,8 +31,7 @@ const useStyles = makeStyles()(theme => {
 });
 /**
  * The "there is more content this way" edge shadow for a display that scrolls
- * its content virtually — the same displays that mount `VerticalScrollbar`,
- * drawn from the same three numbers.
+ * its content virtually, mounted beside `VerticalScrollbar` by `ScrollChrome`.
  *
  * It answers a question the scrollbar technically also answers and in practice
  * does not: **is this track showing me all of its features?** A 6px thumb on a
@@ -79,20 +63,15 @@ const useStyles = makeStyles()(theme => {
  * — autogrow/fit, and the truncation warning for features that were dropped
  * rather than merely scrolled away). This says *that*; that says *what to do*.
  */
-export default function ScrollEdgeShadow({ scrollTop, viewportHeight, contentHeight, top = 0, }) {
+const ScrollEdgeShadow = observer(function ScrollEdgeShadow({ model, top = 0, }) {
     const { classes, cx } = useStyles();
-    const scrollableHeight = Math.max(0, contentHeight - viewportHeight);
+    const { scrollableHeight, scrollViewportHeight: viewportHeight } = model;
     if (scrollableHeight <= 0) {
         return null;
     }
-    const clamped = clamp(scrollTop, 0, scrollableHeight);
-    // never deeper than the viewport itself: the bottom edge is placed by
-    // subtracting this from the viewport's floor, so an unclamped SHADOW_HEIGHT
-    // on a viewport shorter than it puts the ink above the viewport's own top,
-    // over whatever pinned band the display stacked there. Reachable both ways —
-    // the variants displays floor availableHeight at 0 because lineZoneHeight can
-    // exceed the display height on its own, and the pileup's coverage band drags
-    // up to the same place.
+    const clamped = clamp(model.scrollTop, 0, scrollableHeight);
+    // never deeper than the viewport, or the bottom edge inks the band above it
     const height = Math.min(SHADOW_HEIGHT, viewportHeight);
     return (_jsxs(_Fragment, { children: [clamped > EPSILON ? (_jsx("div", { "data-testid": "scroll-edge-shadow-top", className: cx(classes.edge, classes.top), style: { top, height } })) : null, clamped < scrollableHeight - EPSILON ? (_jsx("div", { "data-testid": "scroll-edge-shadow-bottom", className: cx(classes.edge, classes.bottom), style: { top: top + viewportHeight - height, height } })) : null] }));
-}
+});
+export default ScrollEdgeShadow;

package/esm/ui/ScrollZoomToggle.d.ts

@@ -1,35 +1,12 @@
-/**
- * What a view reads and writes to offer scroll-to-zoom. Duck-typed rather than
- * a model, like the rest of the wheel-zoom layer — every view here delegates
- * both to the session, which is where the preference lives.
- */
 export interface ScrollZoomToggleModel {
     scrollZoom: boolean;
     setScrollZoom: (flag: boolean) => void;
 }
 /**
- * The persistent control for scroll-to-zoom, shared by every view that has one.
- *
- * **Carries its own label.** Scroll-to-zoom is off by default, so a wheel over
- * the tracks does nothing until someone finds this — and the words in the header
- * are the whole of how they find it. An icon alone is not findable, whichever
- * icon: the glyph says "zoom" at best and nothing at all about the wheel. The
- * tooltip is where ctrl/⌘+scroll, which zooms whatever the preference says, is
- * named.
- *
- * **And it pulses when the preference changes.** The other ways to write it are
- * somewhere else on the screen — a view menu, the Preferences dialog — so the
- * moment the setting is learned is also the moment this button is not being
- * looked at. The ring is what connects the two: it says the thing you just
- * turned on lives *here*, which is what a user who wants it back off has to
- * know. Its own click pulses too — the answer to "where is this" should not
- * depend on which of the several places wrote it, and the other views' copies
- * of this button pulse with it, which is the preference being session-wide made
- * visible.
- *
- * `iconOnly` is for a header where this sits inside a run of icon buttons (the
- * comparative views), where a single labelled button reads as a mistake rather
- * than as emphasis. The tooltip carries the same words either way.
+ * The header control for scroll-to-zoom, shared by every view that has one: a
+ * labelled checkbox, or with `iconOnly` a button that fills when on. It rings
+ * whenever the preference changes, including from a menu or the Preferences
+ * dialog, so the user sees where the setting lives.
  */
 declare const ScrollZoomToggle: ({ model, iconOnly, }: {
     model: ScrollZoomToggleModel;

package/esm/ui/ScrollZoomToggle.js

@@ -1,39 +1,43 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import ZoomInMapIcon from '@mui/icons-material/ZoomInMap';
-import { ToggleButton, Tooltip } from '@mui/material';
+import { Checkbox, FormControlLabel, ToggleButton, Tooltip, } from '@mui/material';
 import { observer } from 'mobx-react';
 import { keyframes, makeStyles } from '../util/tss-react/index.js';
 import { alpha } from './palette.js';
 import { SCROLL_ZOOM_HELP, SCROLL_ZOOM_LABEL } from './scrollZoomLabels.js';
-// Two beats: one is a blink that a peripheral eye can miss, three outstays a
-// confirmation.
 const PULSE_MS = 550;
 const PULSE_COUNT = 2;
 const useStyles = makeStyles()(theme => {
-    // The accent, not `primary`: JBrowse's primary is a near-black navy, and a
-    // ring in it reads as a drop shadow rather than as something asking to be
-    // looked at.
-    const ringColor = alpha(theme.palette.secondary.main, 0.7);
-    // Grows outward from the button's own edge, which is what carries the eye to
-    // it — a ring drawn at its final size only appears there.
+    const { palette } = theme;
+    const ringBase = palette.mode === 'dark' ? palette.accent : palette.tertiary.main;
+    const ringColor = alpha(ringBase, 0.7);
     const ring = keyframes `
     from { box-shadow: 0 0 0 0 ${ringColor}; }
-    to { box-shadow: 0 0 0 9px ${alpha(theme.palette.secondary.main, 0)}; }
+    to { box-shadow: 0 0 0 9px ${alpha(ringBase, 0)}; }
   `;
-    // What the same cue looks like for someone who asked for less motion: the
-    // ring is there at one size and fades. Reduced motion is about movement, not
-    // about being told less.
     const steadyRing = keyframes `
     from { box-shadow: 0 0 0 4px ${ringColor}; }
-    to { box-shadow: 0 0 0 4px ${alpha(theme.palette.secondary.main, 0)}; }
+    to { box-shadow: 0 0 0 4px ${alpha(ringBase, 0)}; }
   `;
     return {
-        button: {
-            border: 'none',
-            textTransform: 'none',
+        label: {
+            position: 'relative',
+            marginLeft: 0,
+            marginRight: 0,
+            paddingRight: 8,
+            borderRadius: 4,
             whiteSpace: 'nowrap',
-            gap: 4,
+        },
+        checkbox: {
+            padding: 6,
+        },
+        iconButton: {
+            border: 'none',
+            '&.Mui-selected, &.Mui-selected:hover': {
+                backgroundColor: palette.accent,
+                color: palette.background.paper,
+            },
         },
         pulse: {
             position: 'absolute',
@@ -48,45 +52,24 @@ const useStyles = makeStyles()(theme => {
     };
 });
 /**
- * The persistent control for scroll-to-zoom, shared by every view that has one.
- *
- * **Carries its own label.** Scroll-to-zoom is off by default, so a wheel over
- * the tracks does nothing until someone finds this — and the words in the header
- * are the whole of how they find it. An icon alone is not findable, whichever
- * icon: the glyph says "zoom" at best and nothing at all about the wheel. The
- * tooltip is where ctrl/⌘+scroll, which zooms whatever the preference says, is
- * named.
- *
- * **And it pulses when the preference changes.** The other ways to write it are
- * somewhere else on the screen — a view menu, the Preferences dialog — so the
- * moment the setting is learned is also the moment this button is not being
- * looked at. The ring is what connects the two: it says the thing you just
- * turned on lives *here*, which is what a user who wants it back off has to
- * know. Its own click pulses too — the answer to "where is this" should not
- * depend on which of the several places wrote it, and the other views' copies
- * of this button pulse with it, which is the preference being session-wide made
- * visible.
- *
- * `iconOnly` is for a header where this sits inside a run of icon buttons (the
- * comparative views), where a single labelled button reads as a mistake rather
- * than as emphasis. The tooltip carries the same words either way.
+ * The header control for scroll-to-zoom, shared by every view that has one: a
+ * labelled checkbox, or with `iconOnly` a button that fills when on. It rings
+ * whenever the preference changes, including from a menu or the Preferences
+ * dialog, so the user sees where the setting lives.
  */
 const ScrollZoomToggle = observer(function ScrollZoomToggle({ model, iconOnly, }) {
     const { classes } = useStyles();
     const { scrollZoom } = model;
-    // `count` doubles as the restart key — a class alone won't replay a CSS
-    // animation that is already on the element, which is the toggle flipped twice
-    // in a row. Adjusted during render rather than from an effect, so a
-    // StrictMode host's doubled mount effect can't pulse a button nobody touched.
+    // `count` doubles as the restart key, since a class alone won't replay a
+    // running CSS animation
     const [pulse, setPulse] = useState({ shownFor: scrollZoom, count: 0 });
     if (pulse.shownFor !== scrollZoom) {
         setPulse({ shownFor: scrollZoom, count: pulse.count + 1 });
     }
-    // `describeChild` once the label is visible: MUI's default puts the title on
-    // the child as its `aria-label`, which would replace the words on the button
-    // with a paragraph that doesn't contain them. Described, not named.
-    return (_jsx(Tooltip, { title: SCROLL_ZOOM_HELP, describeChild: !iconOnly, children: _jsxs(ToggleButton, { value: "scrollZoom", selected: scrollZoom, onChange: () => {
-                model.setScrollZoom(!scrollZoom);
-            }, className: classes.button, size: "small", children: [_jsx(ZoomInMapIcon, { fontSize: "small" }), iconOnly ? null : SCROLL_ZOOM_LABEL, pulse.count ? (_jsx("span", { className: classes.pulse, "data-testid": "scroll-zoom-pulse" }, pulse.count)) : null] }) }));
+    const ring = pulse.count ? (_jsx("span", { className: classes.pulse, "data-testid": "scroll-zoom-pulse" }, pulse.count)) : null;
+    const flip = () => {
+        model.setScrollZoom(!scrollZoom);
+    };
+    return iconOnly ? (_jsx(Tooltip, { title: SCROLL_ZOOM_HELP, children: _jsxs(ToggleButton, { "data-testid": "scroll-zoom-toggle", value: "scrollZoom", selected: scrollZoom, onChange: flip, className: classes.iconButton, size: "small", children: [_jsx(ZoomInMapIcon, { fontSize: "small" }), ring] }) })) : (_jsx(Tooltip, { title: SCROLL_ZOOM_HELP, describeChild: true, children: _jsx(FormControlLabel, { "data-testid": "scroll-zoom-toggle", className: classes.label, control: _jsx(Checkbox, { size: "small", checked: scrollZoom, onChange: flip, className: classes.checkbox }), label: _jsxs(_Fragment, { children: [SCROLL_ZOOM_LABEL, ring] }), slotProps: { typography: { variant: 'body2' } } }) }));
 });
 export default ScrollZoomToggle;

package/esm/ui/SessionJsonPanel.d.ts

@@ -0,0 +1,3 @@
+export default function SessionJsonPanel({ session }: {
+    session: unknown;
+}): import("react").JSX.Element;

package/esm/ui/SessionJsonPanel.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import LabeledCheckbox from './LabeledCheckbox.js';
+import MonospaceTextField from './MonospaceTextField.js';
+// The session a share or export dialog is about to hand over, as indented JSON
+// behind a checkbox, so the sender can read what they are sending whichever
+// link carries it. Shared by jbrowse-web's ShareDialog and jbrowse-desktop's
+// ExportToWebDialog.
+export default function SessionJsonPanel({ session }) {
+    const [show, setShow] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(LabeledCheckbox, { checked: show, onChange: val => {
+                    setShow(val);
+                }, label: "Show readable JSON" }), show ? (_jsx(MonospaceTextField, { label: "Session JSON", value: JSON.stringify(session, null, 2), readOnly: true, fullWidth: true, maxRows: 20 })) : null] }));
+}

package/esm/ui/SettingsChangesTable.d.ts

@@ -1,4 +1,5 @@
 import type { TrackConfigChange } from '../util/trackConfigDelta.ts';
+export declare function formatSettingValue(value: unknown): string;
 /**
  * Shared three-column diff table (Setting / Default / Current) used by both the
  * per-track "changes" dialog and the global preferences-reset dialog, so the two

package/esm/ui/SettingsChangesTable.js

@@ -16,21 +16,59 @@ const useStyles = makeStyles()(theme => ({
         color: theme.palette.text.secondary,
     },
 }));
-// Many config values are `{ type: 'x' }` discriminated unions (colorBy,
-// groupBy, sortedBy, ...). Show just the type when that is the whole object so
-// the table reads "methylation" rather than `{"type":"methylation"}`; richer
+// Many config values are `{ type: 'x' }` discriminated unions (sortedBy,
+// ...). Show just the type when that is the whole object so
+// the table reads "basePair" rather than `{"type":"basePair"}`; richer
 // objects keep full JSON so no detail is hidden.
 function isSoleTypeObject(v) {
     return ('type' in v && typeof v.type === 'string' && Object.keys(v).length === 1);
 }
-function formatSettingValue(value) {
-    return value === undefined
-        ? '(default)'
-        : typeof value === 'string'
-            ? value
-            : typeof value === 'object' && value !== null && isSoleTypeObject(value)
-                ? value.type
-                : JSON.stringify(value);
+// Past this many entries a list or a map is summarised by its count and its
+// first few members: a row order names every sample of a cohort, and a label
+// map every one the reader renamed, and a 2,500-name cell says nothing a
+// count and a glimpse do not.
+const LISTED_ENTRIES = 6;
+// Past this many characters a string is a cluster tree's newick or a jexl
+// callback, and the head is what tells them apart.
+const STRING_HEAD = 80;
+function summarizeList(values) {
+    const head = values
+        .slice(0, LISTED_ENTRIES)
+        .map(v => (typeof v === 'string' ? v : JSON.stringify(v)))
+        .join(', ');
+    return `${values.length} values: ${head}, …`;
+}
+function summarizeMap(entries) {
+    const head = entries
+        .slice(0, LISTED_ENTRIES)
+        .map(([k, v]) => `${k}: ${typeof v === 'string' ? v : JSON.stringify(v)}`)
+        .join(', ');
+    return `${entries.length} entries: ${head}, …`;
+}
+export function formatSettingValue(value) {
+    if (value === undefined) {
+        return '(default)';
+    }
+    if (typeof value === 'string') {
+        return value.length > STRING_HEAD
+            ? `${value.slice(0, STRING_HEAD)}… (${value.length} characters)`
+            : value;
+    }
+    if (Array.isArray(value)) {
+        return value.length > LISTED_ENTRIES
+            ? summarizeList(value)
+            : JSON.stringify(value);
+    }
+    if (typeof value === 'object' && value !== null) {
+        if (isSoleTypeObject(value)) {
+            return value.type;
+        }
+        const entries = Object.entries(value);
+        return entries.length > LISTED_ENTRIES
+            ? summarizeMap(entries)
+            : JSON.stringify(value);
+    }
+    return JSON.stringify(value);
 }
 /**
  * Shared three-column diff table (Setting / Default / Current) used by both the

package/esm/ui/ShareLinkField.d.ts

@@ -1,6 +1,4 @@
-import type { ReactNode } from 'react';
-export default function ShareLinkField({ value, label, action, }: {
+export default function ShareLinkField({ value, label, }: {
     value: string;
     label?: string;
-    action?: ReactNode;
 }): import("react").JSX.Element;