@jbrowse/product-core 4.2.1 → 5.0.0-beta.1

package/esm/ui/AboutDialog.d.ts

@@ -1,7 +1,4 @@
-import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import type { AbstractSessionModel } from '@jbrowse/core/util';
-export declare function AboutDialog({ config, session, handleClose, }: {
-    config: AnyConfigurationModel | Record<string, unknown>;
-    session: AbstractSessionModel;
+import type { AboutPanelProps } from './util.ts';
+export default function AboutDialog({ config, session, handleClose, }: AboutPanelProps & {
     handleClose: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/AboutDialog.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { PluggableComponent } from '@jbrowse/core/ui';
 import Dialog from '@jbrowse/core/ui/Dialog';
 import { getEnv } from '@jbrowse/core/util';
 import { getTrackName } from '@jbrowse/core/util/tracks';
-import AboutContents from "./AboutDialogContents.js";
-export function AboutDialog({ config, session, handleClose, }) {
+import AboutContents from './AboutDialogContents.js';
+export default function AboutDialog({ config, session, handleClose, }) {
     const trackName = getTrackName(config, session);
     const { pluginManager } = getEnv(session);
-    const AboutComponent = pluginManager.evaluateExtensionPoint('Core-replaceAbout', AboutContents, { session, config });
-    return (_jsx(Dialog, { open: true, onClose: handleClose, title: trackName, maxWidth: "xl", children: _jsx(AboutComponent, { config: config, session: session }) }));
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: trackName, maxWidth: "xl", children: _jsx(PluggableComponent, { pluginManager: pluginManager, name: "Core-replaceAbout", component: AboutContents, props: { config, session } }) }));
 }

package/esm/ui/AboutDialogContents.d.ts

@@ -1,7 +1,3 @@
-import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import type { AbstractSessionModel } from '@jbrowse/core/util';
-declare const AboutDialogContents: ({ config, session, }: {
-    config: AnyConfigurationModel | Record<string, unknown>;
-    session: AbstractSessionModel;
-}) => import("react/jsx-runtime").JSX.Element;
+import type { AboutPanelProps } from './util.ts';
+declare const AboutDialogContents: ({ config, session, }: AboutPanelProps) => import("react").JSX.Element;
 export default AboutDialogContents;

package/esm/ui/AboutDialogContents.js

@@ -2,35 +2,56 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import Attributes from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/Attributes';
 import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
-import { getConf } from '@jbrowse/core/configuration';
+import { getTrackConfigWithPromotables, hydrateTrackConfig, } from '@jbrowse/core/configuration';
+import PluggableComponents from '@jbrowse/core/ui/PluggableComponents';
 import { getEnv } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { getSnapshot, isStateTreeNode } from '@jbrowse/mobx-state-tree';
+import { isStateTreeNode } from '@jbrowse/mobx-state-tree';
 import { observer } from 'mobx-react';
-import FileInfoPanel from "./FileInfoPanel.js";
-import HeaderButtons from "./HeaderButtons.js";
-import RefNameInfoDialog from "./RefNameInfoDialog.js";
-import { generateDisplayableConfig, readConf } from "./util.js";
+import AssemblyInfoPanel from './AssemblyInfoPanel.js';
+import FileInfoPanel from './FileInfoPanel.js';
+import HeaderButtons from './HeaderButtons.js';
+import RefNameInfoDialog from './RefNameInfoDialog.js';
+import { getAboutDialogConfig } from './util.js';
 const useStyles = makeStyles()({
     content: {
         minWidth: 800,
     },
 });
+const hideFields = ['displays', 'baseUri', 'refNames', 'formatAbout'];
 const AboutDialogContents = observer(function AboutDialogContents({ config, session, }) {
-    const conf = isStateTreeNode(config) ? getSnapshot(config) : config;
     const { classes } = useStyles();
     const [showRefNames, setShowRefNames] = useState(false);
-    const hideUris = getConf(session, ['formatAbout', 'hideUris']) ||
-        readConf(config, ['formatAbout', 'hideUris']);
     const { pluginManager } = getEnv(session);
-    const confPostExt = generateDisplayableConfig({
+    // "Copy config" output leaves the cascade for good (a user pastes it into a
+    // config.json), so promotable slots are resolved rather than left stripped —
+    // otherwise the copied config renders differently from the track it came from.
+    // `fromDisplayTypeDefaults` names what that folded in, so materializing a
+    // session-wide preference into a track config isn't silent.
+    //
+    // The two menus that open this dialog hand over different things: the in-view
+    // track label passes `track.configuration`, a live node, while the
+    // hierarchical selector passes a `session.tracks` entry, which is a
+    // `types.frozen` plain object until something references the track. Resolving
+    // only the first meant the same track copied a different config depending on
+    // which menu you came from — and the selector is the one you can reach
+    // without opening the track at all. Hydrating converges them; it returns
+    // undefined for a config no plugin can build, and that falls back to copying
+    // it as authored.
+    const live = isStateTreeNode(config)
+        ? config
+        : hydrateTrackConfig(pluginManager, config);
+    const { config: conf, fromDisplayTypeDefaults } = live
+        ? getTrackConfigWithPromotables(session, live)
+        : { config, fromDisplayTypeDefaults: [] };
+    const { config: shown, hideUris } = getAboutDialogConfig({
         config,
         session,
         pluginManager,
     });
-    const ExtraPanel = pluginManager.evaluateExtensionPoint('Core-extraAboutPanel', null, { session, config });
-    const hideFields = ['displays', 'baseUri', 'refNames', 'formatAbout'];
-    return (_jsxs("div", { className: classes.content, children: [_jsxs(BaseCard, { title: "Configuration", children: [!hideUris ? (_jsx(HeaderButtons, { conf: conf, setShowRefNames: setShowRefNames })) : null, _jsx(Attributes, { attributes: confPostExt.config, omit: [...hideFields, 'metadata'], hideUris: hideUris })] }), confPostExt.config.metadata ? (_jsx(BaseCard, { title: "Metadata", children: _jsx(Attributes, { attributes: confPostExt.config.metadata, omit: hideFields, hideUris: hideUris }) })) : null, ExtraPanel ? (_jsx(BaseCard, { title: ExtraPanel.name, children: _jsx(ExtraPanel.Component, { config: config }) })) : null, _jsx(FileInfoPanel, { config: config, session: session }), showRefNames ? (_jsx(RefNameInfoDialog, { session: session, config: config, onClose: () => {
+    return (_jsxs("div", { className: classes.content, children: [_jsxs(BaseCard, { title: "Configuration", children: [_jsx(HeaderButtons, { conf: conf, hideUris: hideUris, fromDisplayTypeDefaults: fromDisplayTypeDefaults, setShowRefNames: setShowRefNames }), _jsx(Attributes, { attributes: shown, omit: [...hideFields, 'metadata'], hideUris: hideUris })] }), shown.metadata ? (_jsx(BaseCard, { title: "Metadata", children: _jsx(Attributes, { attributes: shown.metadata, hideUris: hideUris }) })) : null, _jsx(AssemblyInfoPanel, { config: config, session: session, hideUris: hideUris }), _jsx(PluggableComponents, { pluginManager: pluginManager, 
+                /** #extensionPoint Core-extraAboutPanel | sync | Add extra panels to a track's About dialog */
+                name: "Core-extraAboutPanel", props: { session, config } }), hideUris ? null : _jsx(FileInfoPanel, { config: config, session: session }), showRefNames ? (_jsx(RefNameInfoDialog, { session: session, config: config, onClose: () => {
                     setShowRefNames(false);
                 } })) : null] }));
 });

package/esm/ui/AssemblyInfoPanel.d.ts

@@ -0,0 +1,5 @@
+import type { AboutPanelProps } from './util.ts';
+declare const AssemblyInfoPanel: ({ config, session, hideUris, }: AboutPanelProps & {
+    hideUris?: boolean;
+}) => import("react").JSX.Element | null;
+export default AssemblyInfoPanel;

package/esm/ui/AssemblyInfoPanel.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Attributes from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/Attributes';
+import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
+import { readConfObject, readConfSlot } from '@jbrowse/core/configuration';
+import { CopyToClipboardButton } from '@jbrowse/core/ui';
+import { stripBaseUris } from '@jbrowse/core/util/addRelativeUris';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { getParent, hasParent, isStateTreeNode } from '@jbrowse/mobx-state-tree';
+import { Button } from '@mui/material';
+import { observer } from 'mobx-react';
+import RefNameAliasesDialog from './RefNameAliasesDialog.js';
+// `Attributes` omits these at every depth, which is what reaches the two that
+// are nested:
+// - `sequence` is the config of the very track this dialog is about, in the
+//   card above
+// - `features` is an inline adapter's whole data payload. An assembly whose
+//   aliases or cytobands are written into the config rather than fetched from a
+//   file rendered them here as a spreadsheet of the raw rows, which buried the
+//   four lines anyone opened the card for — and it is the same data the alias
+//   listing shows resolved, one button over
+// - `adapterId` is a generated hash, and `baseUri` is where the config was
+//   loaded from rather than anything about the assembly
+//
+// Nothing is hidden from "Copy assembly config", which copies the config whole.
+const hideFields = ['sequence', 'features', 'adapterId', 'baseUri'];
+const useStyles = makeStyles()(theme => ({
+    buttons: {
+        float: 'right',
+        display: 'flex',
+        gap: theme.spacing(1),
+    },
+}));
+/**
+ * The assembly config a `ReferenceSequenceTrack` config hangs off, and
+ * undefined for every other track.
+ *
+ * A reference sequence track declares no `assemblyNames` slot — the config node
+ * holding it *is* its assembly, the same walk `getConfAssemblyNames` makes.
+ * Compared by identity against that node's `sequence`, so the card is the
+ * assembly of the track the dialog is already showing.
+ *
+ * Both menus that open this dialog hand over a live node here: the hierarchical
+ * selector reads `assemblyManager.get(name).configuration.sequence`, and the
+ * in-view track label's `track.configuration` resolves to that same node
+ * through `getTrackById`. The frozen `session.tracks` entry the rest of the
+ * dialog has to cope with is never a reference sequence track.
+ */
+function getAssemblyConf(config) {
+    const parent = isStateTreeNode(config) && hasParent(config)
+        ? getParent(config)
+        : undefined;
+    return parent?.sequence === config ? parent : undefined;
+}
+const AssemblyCard = observer(function AssemblyCard({ assemblyConf, session, hideUris, }) {
+    const { classes } = useStyles();
+    const [showAliases, setShowAliases] = useState(false);
+    const conf = readConfObject(assemblyConf);
+    return (_jsxs(BaseCard, { title: "Assembly", children: [_jsxs("span", { className: classes.buttons, children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            setShowAliases(true);
+                        }, children: "Show ref name aliases" }), hideUris ? null : (_jsx(CopyToClipboardButton, { variant: "contained", value: () => JSON.stringify(stripBaseUris(structuredClone(conf)), null, 2), children: "Copy assembly config" }))] }), _jsx(Attributes, { attributes: conf, omit: hideFields, hideUris: hideUris }), showAliases ? (_jsx(RefNameAliasesDialog, { assemblyName: readConfSlot(assemblyConf, 'name'), session: session, onClose: () => {
+                    setShowAliases(false);
+                } })) : null] }));
+});
+const AssemblyInfoPanel = observer(function AssemblyInfoPanel({ config, session, hideUris, }) {
+    const assemblyConf = getAssemblyConf(config);
+    return assemblyConf ? (_jsx(AssemblyCard, { assemblyConf: assemblyConf, session: session, hideUris: hideUris })) : null;
+});
+export default AssemblyInfoPanel;

package/esm/ui/DisplayDefaultsSection.d.ts

@@ -0,0 +1,36 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+export interface DisplayDefaultsSession {
+    getDisplayTypeDefaults: () => {
+        displayType: string;
+        slot: string;
+        value: unknown;
+    }[];
+    setDisplayTypeDefault: (displayType: string, slot: string, value: unknown) => void;
+}
+/**
+ * The inventory of session-wide display-type defaults: every value the user has
+ * pinned from a track menu, what it overrides, and a button to clear one.
+ *
+ * The pin is easy to set and, until this, hard to find again. A pinned default
+ * shows on the track-selector badge of any **open** track it moves — but one
+ * affecting nothing currently open, one promoted to a value equal to the slot's
+ * base, and one that no longer resolves at all (a stale value the cascade
+ * refuses, or a display type whose plugin is gone) appear nowhere. The only
+ * place that listed them was the "Reset preferences to defaults" confirmation,
+ * which is a destructive dialog to have to open in order to read something.
+ *
+ * The empty state is deliberate rather than rendering nothing: it is the one
+ * place the app says the capability exists to someone who has never used it.
+ *
+ * **The slot keeps its schema name**, while the display type gets its authored
+ * one. A slot has no menu label to borrow — which row a setting is offered on is
+ * a menu fact and declaring the slot promotable is a schema fact, and nothing
+ * joins them (that split is why `promotableSlotsWithoutPin` has to walk a built
+ * menu at all). A raw slot name is also what the config editor labels its fields
+ * with, so the two surfaces agree.
+ */
+declare const DisplayDefaultsSection: ({ session, pluginManager, }: {
+    session: DisplayDefaultsSession;
+    pluginManager: PluginManager;
+}) => import("react").JSX.Element;
+export default DisplayDefaultsSection;

package/esm/ui/DisplayDefaultsSection.js

@@ -0,0 +1,65 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getConfigurationSchemaDefinition, isSlotDefinitionEntry, } from '@jbrowse/core/configuration';
+import { SettingsChangesTable } from '@jbrowse/core/ui';
+import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+// The registered display types, by name.
+//
+// **Built rather than reached through `getDisplayType`, which THROWS** on a name
+// no plugin registers — an optional chain over it guards nothing. A default left
+// behind by a plugin that has since been uninstalled is exactly a row this
+// section has to render, so reaching for that getter would crash the whole
+// Preferences dialog for the one user whose pins most need clearing.
+function displayTypesByName(pluginManager) {
+    return new Map(pluginManager.getDisplayElements().map(d => [d.name, d]));
+}
+// What a track sitting at the bottom of the cascade shows for this slot — the
+// value clearing the pin would restore. Read off the display type's schema
+// rather than off the session, which holds only what was promoted. Undefined
+// for a display type that is gone, whose row then reads "(default)" like any
+// other unknown.
+function promotedBaseOf(configSchema, slot) {
+    const def = configSchema
+        ? getConfigurationSchemaDefinition(configSchema)?.[slot]
+        : undefined;
+    return isSlotDefinitionEntry(def) ? def.promotedBase : undefined;
+}
+/**
+ * The inventory of session-wide display-type defaults: every value the user has
+ * pinned from a track menu, what it overrides, and a button to clear one.
+ *
+ * The pin is easy to set and, until this, hard to find again. A pinned default
+ * shows on the track-selector badge of any **open** track it moves — but one
+ * affecting nothing currently open, one promoted to a value equal to the slot's
+ * base, and one that no longer resolves at all (a stale value the cascade
+ * refuses, or a display type whose plugin is gone) appear nowhere. The only
+ * place that listed them was the "Reset preferences to defaults" confirmation,
+ * which is a destructive dialog to have to open in order to read something.
+ *
+ * The empty state is deliberate rather than rendering nothing: it is the one
+ * place the app says the capability exists to someone who has never used it.
+ *
+ * **The slot keeps its schema name**, while the display type gets its authored
+ * one. A slot has no menu label to borrow — which row a setting is offered on is
+ * a menu fact and declaring the slot promotable is a schema fact, and nothing
+ * joins them (that split is why `promotableSlotsWithoutPin` has to walk a built
+ * menu at all). A raw slot name is also what the config editor labels its fields
+ * with, so the two surfaces agree.
+ */
+const DisplayDefaultsSection = observer(function DisplayDefaultsSection({ session, pluginManager, }) {
+    const byName = displayTypesByName(pluginManager);
+    const changes = session
+        .getDisplayTypeDefaults()
+        .map(({ displayType, slot, value }) => ({
+        // the address this section's own reset uses, so it depends on nothing the
+        // session's preference-key layout does
+        path: [displayType, slot],
+        label: `${byName.get(displayType)?.displayName ?? displayType} › ${slot}`,
+        from: promotedBaseOf(byName.get(displayType)?.configSchema, slot),
+        to: value,
+    }));
+    return changes.length ? (_jsxs(_Fragment, { children: [_jsx(Typography, { children: "These apply to every track of a display type that hasn't set its own value. Clear one to put those tracks back on the setting's default." }), _jsx(SettingsChangesTable, { changes: changes, onResetRow: change => {
+                    session.setDisplayTypeDefault(change.path[0], change.path[1], undefined);
+                } })] })) : (_jsx(Typography, { children: "None set. The pin beside a setting in a track menu makes that value the default for every track of the same display type." }));
+});
+export default DisplayDefaultsSection;

package/esm/ui/Drawer.d.ts

@@ -0,0 +1,21 @@
+import type { DrawerPosition } from '@jbrowse/core/util';
+/**
+ * All the chrome needs of a session, narrowed the way
+ * `PreferencesDialogSession` is: the drawer is the one widget surface an
+ * embedder can mount against a session of their own shape.
+ */
+export interface DrawerChromeSession {
+    drawerPosition: DrawerPosition;
+    resizeDrawer: (distance: number, availableWidth?: number) => number;
+}
+/**
+ * The drawer's chrome: the paper it sits on and the handle that resizes it.
+ * Focus tracking is left to the caller through `ref`, since only the app shell
+ * has a focused-view concept to wire it to.
+ */
+declare const Drawer: ({ session, children, ref, }: {
+    session: DrawerChromeSession;
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+}) => import("react").JSX.Element;
+export default Drawer;

package/esm/ui/Drawer.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import ResizeHandle from '@jbrowse/core/ui/ResizeHandle';
+import { DRAWER_Z_INDEX } from '@jbrowse/core/ui/zIndexes';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Paper } from '@mui/material';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()(theme => ({
+    // The grid item, and the handle's containing block. Its own box rather than
+    // the Paper's because the Paper is the thing that SCROLLS: a handle
+    // positioned against it starts at the top of the scrolled content and rides
+    // away with it, and one taken out of flow with `position: fixed` is measured
+    // against the window instead — which is the same box only in a full-window
+    // app, and put a page-tall col-resize strip down an embedded view's page.
+    root: {
+        // the drawer places itself, so a host renders it once wherever it likes
+        // rather than on the side matching `drawerPosition` (see
+        // `drawerGridTemplateColumns`)
+        gridColumn: 'drawer',
+        position: 'relative',
+        height: '100%',
+        minWidth: 0,
+    },
+    paper: {
+        overflowY: 'auto',
+        height: '100%',
+        // widgets position their own overlays against this
+        position: 'relative',
+        zIndex: DRAWER_Z_INDEX,
+        outline: 'none',
+        background: theme.palette.background.default,
+    },
+    resizeHandle: {
+        position: 'absolute',
+        top: 0,
+        zIndex: DRAWER_Z_INDEX + 1,
+    },
+    // whichever edge faces the main content
+    handleForLeftDrawer: { right: 0 },
+    handleForRightDrawer: { left: 0 },
+}));
+/**
+ * The drawer's chrome: the paper it sits on and the handle that resizes it.
+ * Focus tracking is left to the caller through `ref`, since only the app shell
+ * has a focused-view concept to wire it to.
+ */
+const Drawer = observer(function Drawer({ session, children, ref, }) {
+    const { drawerPosition } = session;
+    const { classes, cx } = useStyles();
+    const rootRef = useRef(null);
+    return (_jsxs("div", { ref: rootRef, className: classes.root, children: [_jsx(Paper, { ref: ref, className: classes.paper, elevation: 16, square: true, "data-testid": "drawer-widget", children: children }), _jsx(ResizeHandle, { onDrag: distance => {
+                    // the width the drawer and the main area share: both are columns of
+                    // the grid this is an item of, and the clamp needs the container
+                    // rather than the window
+                    session.resizeDrawer(distance, rootRef.current?.parentElement?.clientWidth);
+                }, className: cx(classes.resizeHandle, drawerPosition === 'left'
+                    ? classes.handleForLeftDrawer
+                    : classes.handleForRightDrawer), vertical: true, bar: true })] }));
+});
+export default Drawer;

package/esm/ui/DrawerControls.d.ts

@@ -0,0 +1,5 @@
+import type { SessionWithDrawerWidgets } from '@jbrowse/core/util';
+declare const DrawerControls: ({ session, }: {
+    session: SessionWithDrawerWidgets;
+}) => import("react").JSX.Element;
+export default DrawerControls;

package/esm/ui/DrawerControls.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import MinimizeIcon from '@mui/icons-material/Minimize';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { IconButton, Menu, MenuItem, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+const drawerPositionOptions = ['left', 'right'];
+const DrawerControls = observer(function DrawerControls({ session, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const { drawerPosition, visibleWidget } = session;
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "Drawer position", children: _jsx(IconButton, { "data-testid": "drawer-position-button", color: "inherit", onClick: event => {
+                        setAnchorEl(event.currentTarget);
+                    }, children: _jsx(MoreVertIcon, {}) }) }), _jsx(Tooltip, { title: "Minimize drawer", children: _jsx(IconButton, { "data-testid": "drawer-minimize", color: "inherit", onClick: () => {
+                        session.notify(`Drawer minimized, click button on ${drawerPosition} side of screen to re-open`, 'info');
+                        session.minimizeWidgetDrawer();
+                    }, children: _jsx(MinimizeIcon, {}) }) }), _jsx(Tooltip, { title: "Close drawer", children: _jsx(IconButton, { color: "inherit", onClick: () => {
+                        if (visibleWidget) {
+                            session.hideWidget(visibleWidget);
+                        }
+                    }, children: _jsx(CloseIcon, {}) }) }), _jsx(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => {
+                    setAnchorEl(null);
+                }, children: drawerPositionOptions.map(option => (_jsx(MenuItem, { selected: drawerPosition === option, onClick: () => {
+                        session.setDrawerPosition(option);
+                        setAnchorEl(null);
+                    }, children: option }, option))) })] }));
+});
+export default DrawerControls;

package/esm/ui/DrawerHeader.d.ts

@@ -0,0 +1,6 @@
+import type { SessionWithDrawerWidgets } from '@jbrowse/core/util';
+declare const DrawerHeader: ({ session, setToolbarHeight, }: {
+    session: SessionWithDrawerWidgets;
+    setToolbarHeight: (arg: number) => void;
+}) => import("react").JSX.Element;
+export default DrawerHeader;

package/esm/ui/DrawerHeader.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { AppBar, Toolbar } from '@mui/material';
+import { observer } from 'mobx-react';
+import DrawerControls from './DrawerControls.js';
+import DrawerWidgetSelector from './DrawerWidgetSelector.js';
+const useStyles = makeStyles()(theme => ({
+    appBar: {
+        background: theme.palette.secondary.main,
+    },
+    spacer: {
+        flexGrow: 1,
+    },
+}));
+const DrawerHeader = observer(function DrawerHeader({ session, setToolbarHeight, }) {
+    const { classes } = useStyles();
+    // Measured, and re-measured: the toolbar's height is the room a virtualized
+    // widget subtracts from the box it is given, and it changes without this
+    // component re-rendering -- MUI's Toolbar is 56px under the `sm` breakpoint
+    // and 64 above it, and grows again with the root font size. Read once at
+    // mount, a widget's list was that much too tall for the rest of the session.
+    const appBarRef = useCallback((node) => {
+        const publish = () => {
+            setToolbarHeight(node.getBoundingClientRect().height);
+        };
+        publish();
+        const observer = new ResizeObserver(publish);
+        observer.observe(node);
+        return () => {
+            observer.disconnect();
+        };
+    }, [setToolbarHeight]);
+    return (_jsx(AppBar, { position: "sticky", className: classes.appBar, ref: appBarRef, children: _jsxs(Toolbar, { disableGutters: true, children: [_jsx(DrawerWidgetSelector, { session: session }), _jsx("div", { className: classes.spacer }), _jsx(DrawerControls, { session: session })] }) }));
+});
+export default DrawerHeader;

package/esm/ui/DrawerWidget.d.ts

@@ -0,0 +1,5 @@
+import type { SessionWithDrawerWidgets } from '@jbrowse/core/util';
+declare const DrawerWidget: ({ session, }: {
+    session: SessionWithDrawerWidgets;
+}) => import("react").JSX.Element;
+export default DrawerWidget;

package/esm/ui/DrawerWidget.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { observer } from 'mobx-react';
+import Drawer from './Drawer.js';
+import DrawerHeader from './DrawerHeader.js';
+import WidgetBody from './WidgetBody.js';
+const DrawerWidget = observer(function DrawerWidget({ session, }) {
+    const { visibleWidget } = session;
+    const [toolbarHeight, setToolbarHeight] = useState(0);
+    return (_jsxs(Drawer, { session: session, children: [_jsx(DrawerHeader, { session: session, setToolbarHeight: setToolbarHeight }), visibleWidget ? (_jsx(WidgetBody, { session: session, widget: visibleWidget, toolbarHeight: toolbarHeight })) : null] }));
+});
+export default DrawerWidget;

package/esm/ui/DrawerWidgetSelector.d.ts

@@ -0,0 +1,5 @@
+import type { SessionWithDrawerWidgets } from '@jbrowse/core/util';
+declare const DrawerWidgetSelector: ({ session, }: {
+    session: SessionWithDrawerWidgets;
+}) => import("react").JSX.Element;
+export default DrawerWidgetSelector;

package/esm/ui/DrawerWidgetSelector.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getEnv } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { FormControl, IconButton, MenuItem, Select, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
+import WidgetHeading from './WidgetHeading.js';
+const useStyles = makeStyles()(theme => ({
+    formControl: {
+        margin: 0,
+    },
+    drawerSelect: {
+        margin: 0,
+        color: theme.palette.secondary.contrastText,
+    },
+    dropDownIcon: {
+        color: theme.palette.secondary.contrastText,
+    },
+}));
+const DrawerWidgetSelector = observer(function DrawerWidgetSelector({ session, }) {
+    const { visibleWidget, activeWidgets } = session;
+    const { classes } = useStyles();
+    const { pluginManager } = getEnv(session);
+    return (_jsx(FormControl, { className: classes.formControl, children: _jsx(Select, { value: visibleWidget?.id ?? '', "data-testid": "widget-drawer-selects", className: classes.drawerSelect, classes: { icon: classes.dropDownIcon }, renderValue: widgetId => {
+                const widget = session.activeWidgets.get(widgetId);
+                return widget ? (_jsx(WidgetHeading, { pluginManager: pluginManager, widget: widget })) : (_jsx(Typography, { variant: "h6", color: "inherit", children: "Unknown widget" }));
+            }, onChange: e => {
+                const w = session.activeWidgets.get(e.target.value);
+                if (w) {
+                    session.showWidget(w);
+                }
+                else {
+                    session.notify(`Widget not found ${e.target.value}`, 'warning');
+                }
+            }, children: [...activeWidgets.values()].map(widget => (_jsxs(MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, value: widget.id, children: [_jsx(WidgetHeading, { pluginManager: pluginManager, widget: widget }), _jsx(IconButton, { "data-testid": `${widget.type}-drawer-delete`, color: "inherit", "aria-label": "Delete", onClick: e => {
+                            e.stopPropagation();
+                            session.hideWidget(widget);
+                        }, children: _jsx(DeleteIcon, {}) })] }, widget.id))) }) }));
+});
+export default DrawerWidgetSelector;

package/esm/ui/FileInfoPanel.d.ts

@@ -1,6 +1,3 @@
-import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import type { AbstractSessionModel } from '@jbrowse/core/util';
-export default function FileInfoPanel({ config, session, }: {
-    config: AnyConfigurationModel | Record<string, unknown>;
-    session: AbstractSessionModel;
-}): import("react/jsx-runtime").JSX.Element;
+import type { AboutPanelProps } from './util.ts';
+declare const FileInfoPanel: ({ config, session, }: AboutPanelProps) => import("react").JSX.Element | null;
+export default FileInfoPanel;

package/esm/ui/FileInfoPanel.js

@@ -1,36 +1,45 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
 import Attributes from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/Attributes';
 import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
-import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
-import { readConf } from "./util.js";
-export default function FileInfoPanel({ config, session, }) {
-    const [error, setError] = useState();
-    const [info, setInfo] = useState();
+import { readConfSlot } from '@jbrowse/core/configuration';
+import { ErrorBanner, LoadingEllipses } from '@jbrowse/core/ui';
+import { statusProgressLabel } from '@jbrowse/core/util';
+import { useFetch } from '@jbrowse/core/util/useFetch';
+import { observer } from 'mobx-react';
+// Inline `observer(function(){})`, not a bare declaration: this reads
+// observables (session.rpcManager, and config slots off what is usually a live
+// MST node), and babel-plugin-react-compiler compiles the bare form and can
+// memoize such a read into staleness. RefNameInfoDialog beside it is written
+// the same way; see the React Compiler x MobX note in CLAUDE.md
+const FileInfoPanel = observer(function FileInfoPanel({ config, session, }) {
     const { rpcManager } = session;
-    const trackId = readConf(config, 'trackId');
-    useEffect(() => {
-        ;
-        (async () => {
-            try {
-                const adapterConfig = readConf(config, 'adapter');
-                const result = await rpcManager.call(trackId, 'CoreGetInfo', {
-                    adapterConfig,
-                });
-                setInfo(result);
-            }
-            catch (e) {
-                console.error(e);
-                setError(e);
-            }
-        })();
-    }, [config, rpcManager, trackId]);
+    const trackId = readConfSlot(config, 'trackId');
+    const { data: info, error, isLoading, status, } = useFetch(['CoreGetInfo', trackId], 
+    // reading a header can mean walking a v8 .hic's norm-vector index or a
+    // multi-megabyte VCF header, so it gets both handles: closing the About
+    // dialog stops it, and the wait says what it is
+    async (_name, _trackId, stopToken, statusCallback) => (await rpcManager.call(trackId, 'CoreGetInfo', {
+        adapterConfig: readConfSlot(config, 'adapter'),
+        stopToken,
+        statusCallback,
+    })));
     const details = typeof info === 'string'
         ? {
             header: `<pre>${info
+                .replaceAll('&', '&amp;')
                 .replaceAll('<', '&lt;')
                 .replaceAll('>', '&gt;')}</pre>`,
         }
-        : info || {};
-    return (_jsx(BaseCard, { title: "File info", children: error ? (_jsx(ErrorMessage, { error: error })) : info === undefined ? (_jsx(LoadingEllipses, { message: "Loading file data" })) : (_jsx(Attributes, { attributes: details })) }));
-}
+        : (info ?? {});
+    // `BaseFeatureDataAdapter.getHeader` returns null unless an adapter overrides
+    // it, and `CoreGetInfo` returns null outright for anything that isn't a
+    // feature adapter — so most tracks reached this with nothing to say and got a
+    // FILE INFO heading with blank space under it. A panel with no content is not
+    // a panel
+    const empty = Object.values(details).every(v => v == null);
+    if (!error && !isLoading && empty) {
+        return null;
+    }
+    return (_jsx(BaseCard, { title: "File info", children: error ? (_jsx(ErrorBanner, { error: error })) : isLoading ? (_jsx(LoadingEllipses, { message: statusProgressLabel(status) || 'Loading file data' })) : (_jsx(Attributes, { attributes: details })) }));
+});
+export default FileInfoPanel;

package/esm/ui/HeaderButtons.d.ts

@@ -1,6 +1,12 @@
 interface HeaderButtonsProps {
     conf: Record<string, unknown>;
+    hideUris?: boolean;
+    /**
+     * `<displayType>.<slot>` for each value the copied config inherited from a
+     * session-wide display-type default rather than from the config itself
+     */
+    fromDisplayTypeDefaults?: string[];
     setShowRefNames: (show: boolean) => void;
 }
-declare function HeaderButtons({ conf, setShowRefNames }: HeaderButtonsProps): import("react/jsx-runtime").JSX.Element;
+declare function HeaderButtons({ conf, hideUris, fromDisplayTypeDefaults, setShowRefNames, }: HeaderButtonsProps): import("react").JSX.Element;
 export default HeaderButtons;