@jbrowse/product-core 4.3.0 → 5.0.0-beta.10

package/esm/ui/AboutDialog.js

@@ -1,11 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import Attributes from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/Attributes';
+import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
+import { hydrateTrackConfig } from '@jbrowse/core/configuration';
+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, }) {
-    const trackName = getTrackName(config, session);
+import { isStateTreeNode } from '@jbrowse/mobx-state-tree';
+import AboutContents from './AboutDialogContents.js';
+export default function AboutDialog({ config, session, handleClose, }) {
     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 }) }));
+    // hydrated once here, so every panel and every plugin on the two About points
+    // reads one live node: "Copy config" gives the same JSON whichever menu
+    // opened the dialog, and a jexl `formatAbout` slot has an env to evaluate in
+    const live = isStateTreeNode(config)
+        ? config
+        : hydrateTrackConfig(pluginManager, config);
+    return (_jsx(Dialog, { open: true, onClose: handleClose, title: getTrackName(config, session), maxWidth: "xl", children: live ? (_jsx(PluggableComponent, { pluginManager: pluginManager, name: "Core-replaceAbout", component: AboutContents, props: { config: live, session } })) : (_jsx(BaseCard, { title: "Configuration", children: _jsx(Attributes, { attributes: config }) })) }));
 }

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,31 @@ 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 { readConfObject } 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 { 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 DescriptionPanel from './DescriptionPanel.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({
-        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: () => {
+    const { config: shown, hideUris } = getAboutDialogConfig({ config, session });
+    return (_jsxs("div", { className: classes.content, children: [_jsxs(BaseCard, { title: "Configuration", children: [_jsx(HeaderButtons, { conf: readConfObject(config), hideUris: hideUris, 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(DescriptionPanel, { config: config, session: session }), _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,63 @@
+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 } 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 } 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.
+ */
+function getAssemblyConf(config) {
+    const parent = 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: readConfObject(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/DescriptionPanel.d.ts

@@ -0,0 +1,3 @@
+import type { AboutPanelProps } from './util.ts';
+declare const DescriptionPanel: ({ config, }: AboutPanelProps) => import("react").JSX.Element | null;
+export default DescriptionPanel;

package/esm/ui/DescriptionPanel.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard';
+import { readConfObject } from '@jbrowse/core/configuration';
+import { ErrorBanner, LoadingEllipses, SanitizedHTML } from '@jbrowse/core/ui';
+import { openLocation } from '@jbrowse/core/util/io';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { useFetch } from '@jbrowse/core/util/useFetch';
+import { Link, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { getDescriptionHtmlUrl, rebaseDescriptionHtml, } from './descriptionHtml.js';
+const useStyles = makeStyles()(theme => ({
+    provenance: {
+        marginBottom: theme.spacing(1),
+    },
+}));
+const DescriptionCard = observer(function DescriptionCard({ url, }) {
+    const { classes } = useStyles();
+    const { data: html, error, isLoading, } = useFetch(['trackDescriptionHtml', url], async (_name, url) => rebaseDescriptionHtml(await openLocation({ uri: url, locationType: 'UriLocation' }).readFile('utf8'), url));
+    return (_jsxs(BaseCard, { title: "Description", children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", component: "div", className: classes.provenance, children: ["From the track hub, written for the UCSC Genome Browser \u2014 some display options it describes differ in JBrowse.", ' ', _jsx(Link, { href: url, target: "_blank", rel: "noopener noreferrer", children: "View original" })] }), error ? (_jsx(ErrorBanner, { error: error })) : isLoading || html === undefined ? (_jsx(LoadingEllipses, { message: "Loading description" })) : (_jsx(SanitizedHTML, { html: html }))] }));
+});
+const DescriptionPanel = observer(function DescriptionPanel({ config, }) {
+    const url = getDescriptionHtmlUrl(readConfObject(config, 'metadata'));
+    return url ? _jsx(DescriptionCard, { url: url }) : null;
+});
+export default DescriptionPanel;

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,46 @@
 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 { readConfObject } from '@jbrowse/core/configuration';
+import { ErrorBanner, LoadingEllipses } from '@jbrowse/core/ui';
+import { statusProgressLabel } from '@jbrowse/core/util';
+import { getConfAssemblyNamesOrNone, getConfRpcSessionId, } from '@jbrowse/core/util/tracks';
+import { useFetch } from '@jbrowse/core/util/useFetch';
+import { observer } from 'mobx-react';
+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 adapterConfig = readConfObject(config, 'adapter');
+    const sessionId = getConfRpcSessionId(config);
+    // named so a reference-reading adapter resolves to the instance the track's
+    // own requests built, not a spare one
+    const [assemblyName] = getConfAssemblyNamesOrNone(config);
+    const { data: info, error, isLoading, status, } = useFetch(['CoreGetInfo', sessionId], 
+    // 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, _sessionId, signal, statusCallback) => (await rpcManager.call(sessionId, 'CoreGetInfo', {
+        adapterConfig,
+        assemblyName,
+        signal,
+        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/GeneralPreferencesTab.d.ts

@@ -0,0 +1,17 @@
+import type { ThemeModeSelection } from '../Session/Themes.ts';
+import type { ThemeMap } from '@jbrowse/core/ui';
+import type { AnimationMode } from '@jbrowse/core/util';
+export interface GeneralPreferencesSession {
+    allThemes: () => ThemeMap;
+    themeName?: string;
+    setThemeName: (arg: string) => void;
+    themeMode: ThemeModeSelection;
+    setThemeMode: (arg: ThemeModeSelection) => void;
+    animationMode: AnimationMode;
+    numberGrouping: boolean;
+    setPreferenceOverride: (key: string, value: unknown) => void;
+}
+declare const GeneralPreferencesTab: ({ session, }: {
+    session: GeneralPreferencesSession;
+}) => import("react").JSX.Element;
+export default GeneralPreferencesTab;

package/esm/ui/GeneralPreferencesTab.js

@@ -0,0 +1,34 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { FormGroup, MenuItem, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+import PreferenceCheckbox from './PreferenceCheckbox.js';
+const useStyles = makeStyles()({
+    field: {
+        marginTop: 16,
+        display: 'block',
+    },
+});
+const THEME_MODES = [
+    { value: 'light', label: 'Light' },
+    { value: 'dark', label: 'Dark' },
+    { value: 'system', label: 'Follow system' },
+];
+const ANIMATION_MODES = [
+    { value: 'system', label: 'Follow system (reduced motion)' },
+    { value: 'enabled', label: 'Always on' },
+    { value: 'disabled', label: 'Off' },
+];
+const GeneralPreferencesTab = observer(function GeneralPreferencesTab({ session, }) {
+    const { classes } = useStyles();
+    return (_jsxs(_Fragment, { children: [_jsx(TextField, { select: true, variant: "outlined", className: classes.field, label: "Theme", value: session.themeName, onChange: event => {
+                    session.setThemeName(event.target.value);
+                }, children: Object.entries(session.allThemes()).map(([key, val]) => (_jsx(MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) }), _jsx(TextField, { select: true, variant: "outlined", className: classes.field, label: "Light/dark", value: session.themeMode, onChange: event => {
+                    session.setThemeMode(event.target.value);
+                }, children: THEME_MODES.map(opt => (_jsx(MenuItem, { value: opt.value, children: opt.label }, opt.value))) }), _jsx(TextField, { select: true, variant: "outlined", className: classes.field, label: "Animations", value: session.animationMode, onChange: event => {
+                    session.setPreferenceOverride('animationMode', event.target.value);
+                }, children: ANIMATION_MODES.map(opt => (_jsx(MenuItem, { value: opt.value, children: opt.label }, opt.value))) }), _jsx(FormGroup, { children: _jsx(PreferenceCheckbox, { checked: session.numberGrouping, label: "Thousand separators in numbers", help: "Shows chr1:1,234,567 rather than chr1:1234567. Takes effect after reloading the page.", onChange: checked => {
+                        session.setPreferenceOverride('numberGrouping', checked);
+                    } }) })] }));
+});
+export default GeneralPreferencesTab;

package/esm/ui/HeaderButtons.d.ts

@@ -1,6 +1,7 @@
 interface HeaderButtonsProps {
     conf: Record<string, unknown>;
+    hideUris?: boolean;
     setShowRefNames: (show: boolean) => void;
 }
-declare function HeaderButtons({ conf, setShowRefNames }: HeaderButtonsProps): import("react/jsx-runtime").JSX.Element;
+declare function HeaderButtons({ conf, hideUris, setShowRefNames, }: HeaderButtonsProps): import("react").JSX.Element;
 export default HeaderButtons;

package/esm/ui/HeaderButtons.js

@@ -1,26 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { CopyToClipboardButton } from '@jbrowse/core/ui';
+import { stripBaseUris } from '@jbrowse/core/util/addRelativeUris';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Button } from '@mui/material';
-import { removeAttr } from "./util.js";
-const useStyles = makeStyles()({
+const useStyles = makeStyles()(theme => ({
     button: {
         float: 'right',
     },
-});
-function HeaderButtons({ conf, setShowRefNames }) {
-    const [copied, setCopied] = useState(false);
+    // JSX drops the whitespace between two elements on separate lines, so the two
+    // contained buttons rendered edge to edge, reading as one two-tone control
+    buttons: {
+        display: 'flex',
+        gap: theme.spacing(1),
+        justifyContent: 'flex-end',
+    },
+}));
+function HeaderButtons({ conf, hideUris, setShowRefNames, }) {
     const { classes } = useStyles();
-    return (_jsxs("span", { className: classes.button, children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
-                    setShowRefNames(true);
-                }, children: "Show ref names" }), _jsx(Button, { variant: "contained", onClick: async () => {
-                    const { default: copy } = await import('copy-to-clipboard');
-                    const snap = removeAttr(structuredClone(conf), 'baseUri');
-                    copy(JSON.stringify(snap, null, 2));
-                    setCopied(true);
-                    setTimeout(() => {
-                        setCopied(false);
-                    }, 1000);
-                }, children: copied ? 'Copied to clipboard!' : 'Copy config' })] }));
+    return (_jsx("span", { className: classes.button, children: _jsxs("span", { className: classes.buttons, children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                        setShowRefNames(true);
+                    }, children: "Show ref names" }), hideUris ? null : (_jsx(CopyToClipboardButton, { variant: "contained", value: () => JSON.stringify(stripBaseUris(structuredClone(conf)), null, 2), children: "Copy config" }))] }) }));
 }
 export default HeaderButtons;