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

package/esm/HistoryManagement/index.d.ts

@@ -15,10 +15,13 @@ export declare function HistoryManagementMixin(): import("@jbrowse/mobx-state-tr
     }, {
         history: unknown[];
         notTrackingUndo: boolean;
+        hasPendingRecord: boolean;
     } & {
         readonly canUndo: boolean;
         readonly canRedo: boolean;
     } & {
+        setHasPendingRecord(value: boolean): void;
+        flushPendingRecord(): void;
         stopTrackingUndo(): void;
         resumeTrackingUndo(): void;
         addUndoState(snapshot: unknown): void;

package/esm/JBrowseConfig/RootConfiguration.d.ts

@@ -123,11 +123,6 @@ export default function RootConfiguration({ pluginManager, extraConfigSlots, }:
         } & {
             defaultValue: boolean;
         };
-        readonly useWorkspaces: {
-            type: "boolean";
-        } & {
-            defaultValue: boolean;
-        };
         readonly developerMode: {
             type: "boolean";
         } & {
@@ -145,8 +140,6 @@ export default function RootConfiguration({ pluginManager, extraConfigSlots, }:
         defaultValue: unknown;
     };
     readonly logoPath: {
-        type: "fileLocation";
-    } & {
-        defaultValue: unknown;
+        type: "maybeFileLocation";
     };
 }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined, undefined, import("@jbrowse/core/configuration").ConfigurationSchemaRequirement<Partial<Record<string, string[]>>, string>, any>>;

package/esm/JBrowseConfig/RootConfiguration.js

@@ -90,12 +90,8 @@ export default function RootConfiguration({ pluginManager, extraConfigSlots = {}
          * #slot configuration.logoPath
          */
         logoPath: {
-            type: 'fileLocation',
-            description: 'path to a custom logo image displayed in the app header',
-            defaultValue: {
-                uri: '',
-                locationType: 'UriLocation',
-            },
+            type: 'maybeFileLocation',
+            description: 'a custom logo image displayed in the app header; unset, the JBrowse logo',
             advanced: true,
         },
         /**

package/esm/JBrowseConfig/index.d.ts

@@ -126,11 +126,6 @@ export declare function JBrowseConfigF({ pluginManager, assemblyConfigSchema, ex
             } & {
                 defaultValue: boolean;
             };
-            readonly useWorkspaces: {
-                type: "boolean";
-            } & {
-                defaultValue: boolean;
-            };
             readonly developerMode: {
                 type: "boolean";
             } & {
@@ -148,9 +143,7 @@ export declare function JBrowseConfigF({ pluginManager, assemblyConfigSchema, ex
             defaultValue: unknown;
         };
         readonly logoPath: {
-            type: "fileLocation";
-        } & {
-            defaultValue: unknown;
+            type: "maybeFileLocation";
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined, undefined, import("@jbrowse/core/configuration").ConfigurationSchemaRequirement<Partial<Record<string, string[]>>, string>, any>>;
     /**

package/esm/JBrowseModel/index.d.ts

@@ -115,11 +115,6 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, ext
             } & {
                 defaultValue: boolean;
             };
-            readonly useWorkspaces: {
-                type: "boolean";
-            } & {
-                defaultValue: boolean;
-            };
             readonly developerMode: {
                 type: "boolean";
             } & {
@@ -137,9 +132,7 @@ export declare function JBrowseModelF({ pluginManager, assemblyConfigSchema, ext
             defaultValue: unknown;
         };
         readonly logoPath: {
-            type: "fileLocation";
-        } & {
-            defaultValue: unknown;
+            type: "maybeFileLocation";
         };
     }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined, undefined, import("@jbrowse/core/configuration").ConfigurationSchemaRequirement<Partial<Record<string, string[]>>, string>, any>>;
     plugins: import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").IType<PluginDefinition, PluginDefinition, PluginDefinition>>;

package/esm/JbApi/jbApi.d.ts

@@ -1018,9 +1018,9 @@ export declare function createJbApi(pluginManager: PluginManager, options?: JbAp
         total: number;
         note?: string | undefined;
         tracks: {
-            trackId: string;
+            trackId: any;
             name: string;
-            type: string;
+            type: any;
             assemblyNames: string[];
         }[];
     };

package/esm/JbApi/jbApi.js

@@ -1,5 +1,5 @@
 import { getReExportRegistry, setReExportRegistry, } from '@jbrowse/core/ReExports/registry';
-import { getConf, getConfigurationSchemaDefinition, getConfigurationSchemaMetadata, isSlotDefinitionEntry, readConfObject, shorthandTargets, } from '@jbrowse/core/configuration';
+import { getConf, getConfigurationSchemaDefinition, getConfigurationSchemaMetadata, hydrateTrackConfig, isSlotDefinitionEntry, readConfObject, shorthandTargets, } from '@jbrowse/core/configuration';
 import { releaseAdapterSession, retainAdapterSession, } from '@jbrowse/core/data_adapters/adapterSessionRefcount';
 import { adapterByteLimit } from '@jbrowse/core/rpc/byteBudget';
 import { isElectron, isSessionWithAddSessionTrack, objectHash, parseLocString, sum, } from '@jbrowse/core/util';
@@ -594,7 +594,7 @@ async function fitToWindow(session, settleMs, root = document) {
 function trackEntry(conf) {
     return {
         trackId: conf.trackId,
-        name: readConfObject(conf, 'name'),
+        name: conf.name ?? '',
         type: conf.type,
         // getConfAssemblyNamesOrNone, not the slot: an assembly's sequence track
         // has no assemblyNames slot and answers through its parent assembly
@@ -826,8 +826,13 @@ async function visibleRegionsOf(session, viewId, preferTrackId, trackAssemblies
 // file's own refNames during serialization (RpcMethodTypeWithRenameRegions),
 // and the features come back rebuilt as SimpleFeature. What crosses the worker
 // boundary is bounded by the byte gate that runs first.
-async function fetchFeatures(session, trackId, regions, requestedByteLimit) {
-    const conf = session.getTrackById(trackId);
+async function fetchFeatures(pluginManager, session, trackId, regions, requestedByteLimit) {
+    const entry = session.getTrackById(trackId);
+    // the node a shown track reads: its adapter is in the hydrated form, which is
+    // what the shown track's session id hashes
+    const conf = isStateTreeNode(entry)
+        ? entry
+        : entry && hydrateTrackConfig(pluginManager, entry);
     if (!conf) {
         throw new Error(`No track with trackId "${trackId}" — jb.listTracks() shows what is available`);
     }
@@ -1019,7 +1024,7 @@ const JB_HELP = `jb drives this JBrowse app programmatically (window.jb in a bro
 
 Orient first: jb.sessionSummary(). Introspect, never guess: jb.listTracks(search?, limit?) answers { total, tracks } with the trackIds; jb.describeSlots(jb.trackModel('someTrackId').activeDisplay.configuration) for the settings keys a display accepts — an unknown settings key is not an error, it lands in applyDisplaySettings' "unapplied" list as { key, reason }, so read the report; jb.inspect(node) — jb.view(), jb.trackModel('someTrackId'), session.views[0] — for its getters, actions and modelType.
 
-The model is mobx-state-tree: mutate only through actions (raw assignment throws), and write display settings with track.applyDisplaySettings(settings). A feature or variant track groups and colors through two settings, track.applyDisplaySettings({ facet: 'strand' or { field, domain? }, color: a CSS color or { field: 'type', domain?, range? } }), where null resets any setting; it filters with activeDisplay.setFilter(['jexl:feature.score > 10']). An alignments track takes the same facet, its field a read dimension ('pairOrientation', 'mapq', ...) or a tag ('tags.HP'). LinearMarkDisplay plots a track's features as ggplot2 does, on a feature, alignments, variant or quantitative track, in five settings: marks, a list drawn in order of { mark: 'bar' | 'point' | 'rule' | 'line' | 'span' | 'text' | 'link', encoding: { y: 'score', x?, x2?, row?, color?, shape?, text?, size? }, each a feature field or a jexl: expression, a constant written { value: 'red' }, transform?: steps such as { type: 'coverage' } or a bin then an aggregate, which fill the y they write, minBpPerPx?, maxBpPerPx? }, beside transform, facet, rows and scales ({ y: { type, domainMin, domainMax, autoscaleGroup, title } }). await view.launchTrack(trackId, {}, { type: 'LinearMarkDisplay', marks: [...] }) draws a track with it, shown already or not (on a GWASTrack, type 'LinearManhattanDisplay'). Its markPlot is those five as JSON: edit structuredClone(activeDisplay.markPlot), check it with activeDisplay.plotProblems(plot), and apply it with applyDisplaySettings(plot), on this track or another track's mark display; activeDisplay.notices names a mark the config cannot draw, or one whose field no loaded feature holds. Build views declaratively with jb.loadSessionSpec({ views: [{ type: 'LinearGenomeView', assembly, loc, tracks: [...] }] }), which replaces the session; jb.addView(oneViewSpec) opens one more view beside what is open; jb.setSession(document) rewrites the session as a document — what jb.mst.getSnapshot(jb.session) answers, edited: a view keeps its id and is patched in place, loc on it navigates, a { trackId } entry in its tracks opens that track. Act on a view with await view.navToLocString('BRCA1' or 'chr1:1-1000'), which also SHOWS the track whose search index answered a gene name unless a 4th arg { showHitTrack: false } says not to; await view.launchTrack(trackId, {}, settings) shows a track with settings, view.hideTrack(trackId) hides it. Arrange open views into panels with session.layoutViews({ direction: 'horizontal', children: [{ views: [viewId] }, ...] }), a leaf naming view ids or session.views indexes; await jb.fitToWindow() shrinks what is open until the session fits the window; add data with jb.addTrack({ location }) (an absolute path or a URL), or show a track the catalog already holds with jb.addTrack({ trackId, settings? }); read data with await jb.getFeatures({ trackId, loc?, assembly?, viewId?, regions?, byteLimit? }), which renames refNames ("chr1" vs "1") so the file answers and reads on the worker the track's display uses. Anything lower level is jb.require('@jbrowse/core/util') and friends, the module registry plugins link against. After changing anything, await jb.waitReady(ms) and read its notifications and notReady lists before trusting the screen.
+The model is mobx-state-tree: mutate only through actions (raw assignment throws), and write display settings with track.applyDisplaySettings(settings). A display's grammar settings are its plot, activeDisplay.plot, by slot name: facet ('strand' or { field, domain? }), color (a CSS color or { field: 'type', domain?, range? }), rows, unit (what a row stands for: 'read' | 'chain' on alignments, 'sample' | 'haplotype' on multi-sample variants), scales, filter (['jexl:feature.score > 10']), and on a mark display marks and transform. Edit structuredClone(activeDisplay.plot), check it with activeDisplay.plotProblems(draft), which throws what a config refuses, and write it with activeDisplay.applyPlot(draft): each setting replaced whole, null resetting one. An alignments track takes the same facet, its field a read dimension ('pairOrientation', 'mapq', ...) or a tag ('tags.HP'). LinearMarkDisplay plots a track's features as ggplot2 does, on a feature, alignments, variant or quantitative track, in seven settings: marks, a list drawn in order of { mark: 'bar' | 'point' | 'rule' | 'line' | 'span' | 'text' | 'link', encoding: { y: 'score', x?, x2?, row?, color?, shape?, text?, size? }, each a feature field or a jexl: expression, a constant written { value: 'red' }, transform?: steps such as { type: 'coverage' } or a bin then an aggregate, which fill the y they write, minBpPerPx?, maxBpPerPx? }, beside transform, facet, rows, rowColor, scales ({ y: { type, domainMin, domainMax, autoscaleGroup, title } }) and filter. await view.launchTrack(trackId, {}, { type: 'LinearMarkDisplay', marks: [...] }) draws a track with it, shown already or not (on a GWASTrack, type 'LinearManhattanDisplay'). activeDisplay.notices names a mark the config cannot draw, or one whose field no loaded feature holds. Build views declaratively with jb.loadSessionSpec({ views: [{ type: 'LinearGenomeView', assembly, loc, tracks: [...] }] }), which replaces the session; jb.addView(oneViewSpec) opens one more view beside what is open; jb.setSession(document) rewrites the session as a document — what jb.mst.getSnapshot(jb.session) answers, edited: a view keeps its id and is patched in place, loc on it navigates, a { trackId } entry in its tracks opens that track. Act on a view with await view.navToLocString('BRCA1' or 'chr1:1-1000'), which also SHOWS the track whose search index answered a gene name unless a 4th arg { showHitTrack: false } says not to; await view.launchTrack(trackId, {}, settings) shows a track with settings, view.hideTrack(trackId) hides it. Arrange open views into panels with session.layoutViews({ direction: 'horizontal', children: [{ views: [viewId] }, ...] }), a leaf naming view ids or session.views indexes; await jb.fitToWindow() shrinks what is open until the session fits the window; add data with jb.addTrack({ location }) (an absolute path or a URL), or show a track the catalog already holds with jb.addTrack({ trackId, settings? }); read data with await jb.getFeatures({ trackId, loc?, assembly?, viewId?, regions?, byteLimit? }), which renames refNames ("chr1" vs "1") so the file answers and reads on the worker the track's display uses. Anything lower level is jb.require('@jbrowse/core/util') and friends, the module registry plugins link against. After changing anything, await jb.waitReady(ms) and read its notifications and notReady lists before trusting the screen.
 
 Views nest and several can be open. jb.view(viewId?) is the open view, and jb.view(), jb.trackModel(trackId), jb.visibleRegions(), jb.addTrack and jb.getFeatures over a visible region throw naming the candidates rather than picking one when more than one view could answer — pass viewId (from jb.sessionSummary()) to say which. A synteny or breakpoint view's viewId also covers its rows: the named view answers when it can, and otherwise its rows do.
 
@@ -1107,7 +1112,7 @@ export function createJbApi(pluginManager, options = {}) {
                         await locToRegion(session, conf, fetchArgs.loc, fetchArgs.assembly),
                     ]
                     : await visibleRegionsOf(session, fetchArgs.viewId, fetchArgs.trackId, getConfAssemblyNamesOrNone(conf));
-            return fetchFeatures(session, fetchArgs.trackId, regions, fetchArgs.byteLimit);
+            return fetchFeatures(pluginManager, session, fetchArgs.trackId, regions, fetchArgs.byteLimit);
         },
     };
     return jb;
@@ -1192,9 +1197,6 @@ async function addTrack(pluginManager, session, args) {
 }
 // A track already in the catalog, shown: the same view choice and the same
 // settle the file route ends in.
-// `conf` is whatever `session.getTrackById` answered, which is a track config
-// but not necessarily a `BaseTrackConfig` — an assembly's ReferenceSequenceTrack
-// declares a subset of those slots. The four reads below are all ones it has.
 async function showCatalogTrack(pluginManager, session, conf, args) {
     // index, assembly and name describe the file being added, and the catalog's
     // copy already has all three — taking them here would drop them in silence
@@ -1207,7 +1209,7 @@ async function showCatalogTrack(pluginManager, session, conf, args) {
         trackType: conf.type,
         assembly: getConfAssemblyNamesOrNone(conf)[0],
     };
-    const adapterType = readConfObject(conf, ['adapter', 'type']);
+    const adapterType = conf.adapter?.type;
     const summary = { ...track, ...(adapterType ? { adapterType } : {}) };
     // show:false over a catalog trackId asks for nothing — there is no file to
     // add — and showing it anyway would contradict the flag

package/esm/SessionSpec/loadSessionSpec.js

@@ -132,18 +132,8 @@ function unresolvedLayoutRefs(node, viewCount, knownIds) {
             : []),
     ];
 }
-// A `tabs` node shares one cell between its children rather than dividing the
-// space, so a `size` on one of them describes nothing. This is the ONLY case
-// left where a stated size is dropped.
-//
-// It used to be far wider — dockview forces its branches to alternate
-// orientation by depth, so a nested container had no branch to size against and
-// the whole sizing pass bailed, top-level numbers included. That is gone
-// (ADR-068): the spec's nesting is the tree's nesting, `size` applies wherever
-// it is written, and a bare sibling takes an equal share of the remainder. The
-// wider check outlived the limitation it reported and told an author their
-// nested or partial sizes had been ignored while the layout honoured them —
-// which is also what website/docs/urlparams.md promises.
+// A `tabs` node shares one cell between its children, so a `size` on one of
+// them describes nothing; it is the only stated size the layout drops.
 function unsizeableLayoutNodes(layout) {
     const children = Array.isArray(layout.children) ? layout.children : [];
     const sizedTabsChild = layout.direction === 'tabs' && children.some(c => c.size !== undefined);

package/esm/WorkspaceLayout/LayoutRenderer.d.ts

@@ -2,16 +2,6 @@ import type { WorkspaceLayout } from './model.ts';
 import type { PanelChrome } from './panelChrome.ts';
 import type { LayoutTree } from './tree.ts';
 import type { DragState } from './useLayoutDrag.ts';
-/**
- * The layout, rendered. There is no imperative api and no event to listen to:
- * the tree is state, this is a function of it, and a gesture is an action.
- *
- * Sizes are `flex-grow`, which is why there is no resize handling anywhere in
- * here. A branch's children divide its space in proportion to their `size`
- * whatever that space becomes, so a window resize is the browser's problem —
- * this is the layout maths dockview does in pixels, and it is the part of a
- * grid engine most likely to be got subtly wrong.
- */
 interface Props {
     node: LayoutTree;
     layout: WorkspaceLayout;

package/esm/WorkspaceLayout/LayoutRenderer.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useCallback, useRef } from 'react';
+import { Fragment } from 'react';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
 import { PanelView } from './PanelView.js';
-import { dv } from './dockviewTheme.js';
 import { pairSpan, withBoundaryAt } from './splitter.js';
 import { isBranch } from './tree.js';
+import { usePointerGesture } from './usePointerGesture.js';
+import { workspaceTheme } from './workspaceTheme.js';
 /**
- * A node's share of its parent's space — the whole grid engine. The `min*: 0`
- * are what stop a flex item refusing to shrink below its content; without them
- * a wide view pushes its own cell past its share.
+ * A node's share of its parent's space, as `flex-grow`, so window resizes need
+ * no code. `min*: 0` stops a wide view pushing its cell past its share.
  */
 function paneStyle(size) {
     return {
@@ -27,12 +27,7 @@ export const LayoutRenderer = observer(function LayoutRenderer(props) {
     }
     return (_jsx("div", { style: { ...paneStyle(node.size), flexDirection: node.direction }, children: node.children.map((child, i) => (_jsxs(Fragment, { children: [i > 0 && _jsx(Splitter, { branch: node, index: i, layout: layout }), _jsx(LayoutRenderer, { ...props, node: child })] }, child.id))) }));
 });
-/**
- * The pixels the two panes either side of a handle occupy. Read from the DOM
- * because sizes are shares of a container whose width only the browser knows.
- * The panes are the handle's siblings minus the other handles, which is what
- * `data-splitter` marks.
- */
+/** The pixels the two panes either side of a handle occupy. */
 function measurePairPx(handle, index, horizontal) {
     const panes = [...(handle.parentElement?.children ?? [])].filter(el => !Object.hasOwn(el.dataset, 'splitter'));
     const before = panes[index - 1]?.getBoundingClientRect();
@@ -42,25 +37,21 @@ function measurePairPx(handle, index, horizontal) {
     }
     return horizontal ? before.width + after.width : before.height + after.height;
 }
-// dockview's sash is a transparent grab strip with a 1px separator line drawn
-// down the middle of it — the line is what you see, the 4px is what you can
-// hit. Its dark theme deliberately gives the sash no hover colour at all.
+// a transparent grab strip with a 1px line drawn down its middle
 const useSplitterStyles = makeStyles()({
     splitter: {
-        flex: `0 0 ${dv.sashSize}px`,
+        flex: `0 0 ${workspaceTheme.splitterSize}px`,
         position: 'relative',
         background: 'transparent',
         touchAction: 'none',
-        // it is focusable, so it has to show focus — dockview's sash deliberately
-        // has no HOVER colour, which is a different thing and still holds
         '&:focus-visible': {
-            outline: `2px solid ${dv.edgeDockIndicatorColor}`,
+            outline: `2px solid ${workspaceTheme.accent}`,
             outlineOffset: -1,
         },
         '&::before': {
             content: '""',
             position: 'absolute',
-            background: dv.separatorBorder,
+            background: workspaceTheme.splitterLine,
         },
     },
     horizontal: {
@@ -71,86 +62,35 @@ const useSplitterStyles = makeStyles()({
     },
 });
 /**
- * Drags the boundary between children `index - 1` and `index`.
- *
- * The DOM half only: it measures, and hands position and pair span to
- * `splitter.ts`, which decides where the boundary is allowed to land. Same
- * split as the drag — geometry pure, wiring dumb.
+ * Drags the boundary between children `index - 1` and `index`; `splitter.ts`
+ * decides where it may land.
  */
 const Splitter = observer(function Splitter({ branch, index, layout, }) {
     const { classes, cx } = useSplitterStyles();
-    const dragRef = useRef(undefined);
     const horizontal = branch.direction === 'row';
-    /**
-     * The same three rules the tab drag owns (see `useLayoutDrag`), on the handle
-     * that was written before they were written down.
-     *
-     * A resize starts on the PRIMARY button of the primary pointer. A right-press
-     * armed the drag and then lost its `pointerup` to the native context menu,
-     * and capture routes every later move back here — so a button-less pointer
-     * went on resizing from the start position the right-press recorded.
-     */
-    const onPointerDown = useCallback((event) => {
-        if (event.button !== 0 || !event.isPrimary) {
-            return;
-        }
-        const pairPx = measurePairPx(event.currentTarget, index, horizontal);
-        if (pairPx <= 0) {
-            return;
-        }
-        dragRef.current = {
-            pointerId: event.pointerId,
-            axis: horizontal ? 'clientX' : 'clientY',
-            start: horizontal ? event.clientX : event.clientY,
-            pairPx,
-            startSizes: branch.children.map(c => c.size),
-        };
-        event.currentTarget.setPointerCapture(event.pointerId);
-    }, [branch, index, horizontal]);
-    // One `pointerId` per gesture: a second finger landing on the handle steered
-    // the first one's resize from the first one's start position, and its release
-    // ended the gesture the first one was still holding.
-    const onPointerMove = useCallback((event) => {
-        const drag = dragRef.current;
-        if (drag?.pointerId !== event.pointerId) {
-            return;
-        }
-        // the pointer's travel as a fraction of the pair's pixels, applied to the
-        // pair's share — so the handle tracks the pointer whatever the units are
-        const delta = (event[drag.axis] - drag.start) / drag.pairPx;
-        const sizes = drag.startSizes;
-        layout.setSizes(branch.id, withBoundaryAt(sizes, index, sizes[index - 1] + delta * pairSpan(sizes, index), drag.pairPx));
-    }, [branch.id, index, layout]);
-    const endDrag = useCallback(() => {
-        dragRef.current = undefined;
-    }, []);
-    const onPointerUp = useCallback((event) => {
-        if (dragRef.current && dragRef.current.pointerId !== event.pointerId) {
-            return;
-        }
-        endDrag();
-        event.currentTarget.releasePointerCapture(event.pointerId);
-    }, [endDrag]);
-    // `pointercancel` ends the gesture — a touch long-press opens the platform's
-    // context menu and cancels the pointer with no `pointerup` behind it. A
-    // browser also fires `lostpointercapture` for that, so this is the rule
-    // stated where it belongs rather than inferred from a second event.
-    const onPointerCancel = useCallback((event) => {
-        if (dragRef.current?.pointerId === event.pointerId) {
-            endDrag();
-        }
-    }, [endDrag]);
-    // A `separator` that can be moved is focusable and takes the arrow keys; one
-    // that cannot is just decoration and should not claim the role. This one
-    // claimed it while being neither focusable nor operable, which announces an
-    // affordance to a screen reader that its user then cannot find.
-    const onKeyDown = useCallback((event) => {
+    const gesture = usePointerGesture({
+        start(event) {
+            const pairPx = measurePairPx(event.currentTarget, index, horizontal);
+            return pairPx > 0
+                ? {
+                    axis: horizontal ? 'clientX' : 'clientY',
+                    start: horizontal ? event.clientX : event.clientY,
+                    pairPx,
+                    startSizes: branch.children.map(c => c.size),
+                }
+                : undefined;
+        },
+        move(drag, event) {
+            const delta = (event[drag.axis] - drag.start) / drag.pairPx;
+            const sizes = drag.startSizes;
+            layout.setSizes(branch.id, withBoundaryAt(sizes, index, sizes[index - 1] + delta * pairSpan(sizes, index), drag.pairPx));
+        },
+    });
+    const onKeyDown = (event) => {
         const sizes = branch.children.map(c => c.size);
         const pair = pairSpan(sizes, index);
         const decrease = horizontal ? 'ArrowLeft' : 'ArrowUp';
         const increase = horizontal ? 'ArrowRight' : 'ArrowDown';
-        // 2% of the PAIR per press, matching the drag: the boundary moves within
-        // the two panes either side of it and every other pane holds still
         const step = pair * 0.02;
         let moved;
         if (event.key === decrease) {
@@ -169,17 +109,10 @@ const Splitter = observer(function Splitter({ branch, index, layout, }) {
             return;
         }
         event.preventDefault();
-        // Home/End mean "as far as this goes", which is the minimum rather than
-        // zero — the same stop the drag hits
         layout.setSizes(branch.id, withBoundaryAt(sizes, index, moved, measurePairPx(event.currentTarget, index, horizontal)));
-    }, [branch, index, horizontal, layout]);
-    // the pane BEFORE the handle, as a percentage of the pair it divides — which
-    // is what the handle actually moves
+    };
+    // the pane before the handle, as a percentage of the pair it divides
     const sizes = branch.children.map(c => c.size);
     const valueNow = Math.round((sizes[index - 1] / pairSpan(sizes, index)) * 100);
-    return (_jsx("div", { "data-splitter": true, role: "separator", tabIndex: 0, "aria-orientation": horizontal ? 'vertical' : 'horizontal', "aria-label": horizontal ? 'Resize panels' : 'Resize rows', "aria-valuenow": valueNow, "aria-valuemin": 0, "aria-valuemax": 100, onKeyDown: onKeyDown, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, 
-        // capture can end without a pointerup — the browser drops it if the
-        // element is removed, and then the next pointer that merely passes over
-        // the handle would go on resizing from the stale start sizes
-        onLostPointerCapture: endDrag, className: cx(classes.splitter, horizontal ? classes.horizontal : classes.vertical), style: { cursor: horizontal ? 'ew-resize' : 'ns-resize' } }));
+    return (_jsx("div", { "data-splitter": true, role: "separator", tabIndex: 0, "aria-orientation": horizontal ? 'vertical' : 'horizontal', "aria-label": horizontal ? 'Resize panels' : 'Resize rows', "aria-valuenow": valueNow, "aria-valuemin": 0, "aria-valuemax": 100, onKeyDown: onKeyDown, onPointerDown: gesture.onPointerDown, onPointerMove: gesture.onPointerMove, onPointerUp: gesture.onPointerUp, onPointerCancel: gesture.onPointerCancel, onLostPointerCapture: gesture.onLostPointerCapture, className: cx(classes.splitter, horizontal ? classes.horizontal : classes.vertical), style: { cursor: horizontal ? 'ew-resize' : 'ns-resize' } }));
 });

package/esm/WorkspaceLayout/PanelView.js

@@ -4,28 +4,13 @@ import { useScrollPortHeightVar } from '@jbrowse/core/util/hooks';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
 import { TabStrip } from './TabStrip.js';
-import { dv } from './dockviewTheme.js';
 import { indicatorRect } from './dropZone.js';
 import { tabDomId, tabPanelDomId } from './panelChrome.js';
 import { activeTabIn } from './tree.js';
-/**
- * One cell of the grid: a tab strip, and the content of whichever tab is
- * showing.
- *
- * The strip and its state are `TabStrip`; this is the frame around them, and
- * has no state of its own — it is a function of its node, which is the whole
- * point of the layout being one MST tree.
- *
- * The line between chrome and content is the strip's lower edge: everything
- * above it is dockview's dark theme in either JBrowse theme (see
- * `dockviewTheme.ts`), everything below it follows the app's.
- */
+import { workspaceTheme } from './workspaceTheme.js';
 const useStyles = makeStyles()(theme => ({
-    // `flex: 1` and `minWidth: 0` are load-bearing, not tidiness. This is a child
-    // of a `display: flex` row, so without them its width is its CONTENT's width
-    // — and a view measures its container to decide how wide to draw
-    // (useWidthSetter), so the two settle at the view's intrinsic width and the
-    // panel renders at half the window with dead space beside it.
+    // without `flex: 1` and `minWidth: 0` the cell takes its content's width, and
+    // a view sizes itself to its container, so both settle too narrow
     panel: {
         position: 'relative',
         display: 'flex',
@@ -33,9 +18,7 @@ const useStyles = makeStyles()(theme => ({
         flex: 1,
         minWidth: 0,
         minHeight: 0,
-        // the surface the views sit on, so it is the app's background and not
-        // dockview's — see `dockviewTheme.ts`. A cell is taller than its views
-        // whenever they don't fill it, so this is most of what a panel shows.
+        // below the strip the cell follows the app theme, not `workspaceTheme`
         background: theme.palette.background.default,
     },
     content: {
@@ -48,51 +31,42 @@ const useStyles = makeStyles()(theme => ({
     indicator: {
         position: 'absolute',
         pointerEvents: 'none',
-        // above this panel's own content and nothing else — the panel is
-        // position:relative, so an app-wide z-index would let it cover menus
+        // local to the position:relative panel, so it cannot cover menus
         zIndex: 1,
-        background: dv.dragOverBackground,
-        outline: `1px solid ${dv.edgeDockIndicatorColor}`,
+        background: workspaceTheme.dropWash,
+        outline: `1px solid ${workspaceTheme.accent}`,
     },
-    // where a tab dragged onto the strip would land
     caret: {
         position: 'absolute',
         pointerEvents: 'none',
         zIndex: 1,
         top: 0,
         width: 2,
-        height: dv.tabsHeight,
-        background: dv.edgeDockIndicatorColor,
+        height: workspaceTheme.stripHeight,
+        background: workspaceTheme.accent,
     },
 }));
 export const PanelView = observer(function PanelView({ panel, layout, chrome, drop, }) {
     const { classes } = useStyles();
     const active = activeTabIn(panel);
-    const contentRef = useScrollPortHeightVar();
     return (_jsxs("div", { "data-panel-id": panel.id, className: classes.panel, onPointerDownCapture: () => {
-            // clicking anywhere in a cell makes it the one a new view lands in.
-            // Capture, so it still registers when the click is consumed by a
-            // control inside the view.
+            // capture phase, so a control inside the view that consumes the click
+            // still activates the cell
             if (layout.activePanelId !== panel.id) {
                 layout.setActivePanelId(panel.id);
             }
-        }, children: [_jsx(TabStrip, { panel: panel, layout: layout, chrome: chrome, active: active, groupActive: layout.activePanelId === panel.id }), _jsx("div", { role: "tabpanel", id: tabPanelDomId(panel.id), "aria-labelledby": active ? tabDomId(active.id) : undefined, className: classes.content, ref: contentRef, children: active ? chrome.renderTabContent(active) : null }), _jsx(DropIndicator, { drop: drop, classes: classes })] }));
+        }, children: [layout.panels.length > 1 || panel.tabs.length > 1 ? (_jsx(TabStrip, { panel: panel, layout: layout, chrome: chrome, active: active, cellActive: layout.activePanelId === panel.id })) : null, active ? (_jsx(TabPanel, { panelId: panel.id, tab: active, chrome: chrome, className: classes.content }, active.id)) : (_jsx("div", { role: "tabpanel", className: classes.content })), _jsx(DropIndicator, { drop: drop, classes: classes })] }));
 });
-/**
- * Where a drop would land, drawn over the cell.
- *
- * A strip drop gets a caret at the gap rather than a wash over half the cell:
- * it is a position in the tab order, and shading half the panel would say
- * "split this cell", which is the wrong thing.
- */
+// keyed by tab, so a switch gets a fresh ViewStack and scroll port
+const TabPanel = observer(function TabPanel({ panelId, tab, chrome, className, }) {
+    const ref = useScrollPortHeightVar();
+    return (_jsx("div", { role: "tabpanel", id: tabPanelDomId(panelId), "aria-labelledby": tabDomId(tab.id), className: className, ref: ref, children: chrome.renderTabContent(tab) }));
+});
+/** Where a drop would land: a caret at a strip gap, or a wash over a zone. */
 const DropIndicator = observer(function DropIndicator({ drop, classes, }) {
     if (drop?.strip) {
         return (_jsx("div", { "data-drop-caret": drop.strip.index, className: classes.caret, 
-            // A scrolled strip's left-most gap has a negative panel-relative x, and
-            // the panel has no `overflow: hidden` — the caret drew into the
-            // neighbour. Clamped here because `stripDropAt` is deliberately
-            // ignorant of which coordinate space it was handed, so it cannot know
-            // where zero is.
+            // a scrolled strip's first gap is left of the panel, which does not clip
             style: { left: Math.max(0, drop.strip.left) } }));
     }
     return drop ? (_jsx("div", { "data-drop-indicator": drop.zone, className: classes.indicator, style: indicatorRect(drop.zone) })) : null;

package/esm/WorkspaceLayout/TabStrip.d.ts

@@ -8,7 +8,7 @@ interface TabStripProps {
     /** the tab this panel is showing — the strip does not decide it */
     active: TabNode | undefined;
     /** whether this is the cell a newly launched view lands in */
-    groupActive: boolean;
+    cellActive: boolean;
 }
-export declare const TabStrip: ({ panel, layout, chrome, active, groupActive, }: TabStripProps) => import("react").JSX.Element;
+export declare const TabStrip: ({ panel, layout, chrome, active, cellActive, }: TabStripProps) => import("react").JSX.Element;
 export {};