@jbrowse/plugin-menus 4.2.1 → 5.0.0-beta.1

package/esm/AboutWidget/components/AboutWidget.d.ts

@@ -1,5 +1,5 @@
 import type { IAnyStateTreeNode } from '@jbrowse/mobx-state-tree';
 declare const AboutWidget: ({ model, }: {
     model: IAnyStateTreeNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default AboutWidget;

package/esm/AboutWidget/components/AboutWidget.js

@@ -3,7 +3,10 @@ import { ExternalLink } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { getEnv } from '@jbrowse/mobx-state-tree';
-import { Typography } from '@mui/material';
+import { effectiveRenderer } from '@jbrowse/render-core/graphicsCapabilities';
+import { useGraphicsCapabilities } from '@jbrowse/render-core/useGraphicsCapabilities';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Accordion, AccordionDetails, AccordionSummary, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
 const useStyles = makeStyles()(theme => ({
     root: {
@@ -13,27 +16,33 @@ const useStyles = makeStyles()(theme => ({
     subtitle: {
         margin: theme.spacing(1),
     },
-    pluginList: {
-        margin: theme.spacing(1),
-        marginTop: theme.spacing(5),
+    accordions: {
+        marginTop: theme.spacing(3),
+    },
+    icon: {
+        color: theme.palette.tertiary.contrastText || '#fff',
     },
 }));
 const AboutWidget = observer(function AboutWidget({ model, }) {
     const { classes } = useStyles();
-    const { version } = getSession(model);
+    const session = getSession(model);
+    const { version, gitCommit } = session;
     const { pluginManager } = getEnv(model);
     const { plugins } = pluginManager;
+    const graphicsCapabilities = useGraphicsCapabilities();
+    const defaultRpcDriver = session.rpcManager.driverName;
     const corePlugins = new Set(plugins
         .filter(p => pluginManager.pluginMetadata[p.name]?.isCore)
         .map(p => p.name));
-    return (_jsxs("div", { className: classes.root, children: [_jsx(Typography, { variant: "h4", align: "center", children: "JBrowse 2" }), _jsx(Typography, { variant: "h6", align: "center", className: classes.subtitle, children: version }), _jsxs(Typography, { align: "center", children: ["JBrowse is a ", _jsx(ExternalLink, { href: "http://gmod.org/", children: "GMOD" }), ' ', "project"] }), _jsx("br", {}), _jsx(Typography, { align: "center", children: "\u00A9 2019-2022 The Evolutionary Software Foundation" }), _jsxs("div", { className: classes.pluginList, children: [_jsx(Typography, { children: "External plugins loaded" }), _jsx("ul", { children: plugins
-                            .filter(plugin => !corePlugins.has(plugin.name))
-                            .map(plugin => {
-                            const { url, name, version = '' } = plugin;
-                            const text = `${name} ${version || ''}`;
-                            return (_jsx("li", { children: plugin.url ? (_jsx(ExternalLink, { href: url, children: text })) : (_jsx(Typography, { children: text })) }, plugin.name));
-                        }) }), _jsx(Typography, { children: "Core plugins loaded" }), _jsx("ul", { children: plugins
-                            .filter(plugin => corePlugins.has(plugin.name))
-                            .map(plugin => (_jsx("li", { children: _jsxs(Typography, { children: [plugin.name, " ", plugin.version || ''] }) }, plugin.name))) })] })] }));
+    const externalPlugins = plugins.filter(plugin => !corePlugins.has(plugin.name));
+    return (_jsxs("div", { className: classes.root, children: [_jsx(Typography, { variant: "h4", align: "center", children: "JBrowse 2" }), _jsx(Typography, { variant: "h6", align: "center", className: classes.subtitle, children: version }), gitCommit ? (_jsxs(Typography, { variant: "body2", align: "center", children: ["Commit: ", gitCommit] })) : null, _jsxs(Typography, { align: "center", children: ["JBrowse is a ", _jsx(ExternalLink, { href: "https://gmod.org/", children: "GMOD" }), ' ', "project"] }), _jsx("br", {}), _jsx(Typography, { align: "center", children: "\u00A9 2019-2026 The Evolutionary Software Foundation" }), _jsxs("div", { className: classes.accordions, children: [_jsxs(Accordion, { defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, { className: classes.icon }), children: _jsx(Typography, { children: "Browser settings" }) }), _jsx(AccordionDetails, { children: _jsxs("ul", { children: [graphicsCapabilities ? (_jsxs("li", { children: ["Graphics: ", effectiveRenderer(graphicsCapabilities)] })) : null, _jsxs("li", { children: ["Rendering:", ' ', defaultRpcDriver === 'WebWorkerRpcDriver'
+                                                    ? 'off main thread'
+                                                    : 'on main thread'] })] }) })] }), _jsxs(Accordion, { defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, { className: classes.icon }), children: _jsx(Typography, { children: "Plugins loaded" }) }), _jsxs(AccordionDetails, { children: [_jsx(Typography, { children: "External plugins" }), externalPlugins.length ? (_jsx("ul", { children: externalPlugins.map(plugin => {
+                                            const { url, name, version = '' } = plugin;
+                                            const text = `${name} ${version || ''}`;
+                                            return (_jsx("li", { children: plugin.url ? (_jsx(ExternalLink, { href: url, children: text })) : (_jsx("span", { children: text })) }, plugin.name));
+                                        }) })) : (_jsx(Typography, { children: "No external plugins loaded" })), _jsx(Typography, { children: "Core plugins" }), _jsx("ul", { children: plugins
+                                            .filter(plugin => corePlugins.has(plugin.name))
+                                            .map(plugin => (_jsxs("li", { children: [plugin.name, " ", plugin.version || ''] }, plugin.name))) })] })] })] })] }));
 });
 export default AboutWidget;

package/esm/AboutWidget/index.js

@@ -15,7 +15,7 @@ export default function AboutWidgetF(pluginManager) {
             heading: 'About',
             configSchema,
             stateModel,
-            ReactComponent: lazy(() => import("./components/AboutWidget.js")),
+            ReactComponent: lazy(() => import('./components/AboutWidget.js')),
         });
     });
 }

package/esm/HelpWidget/components/HelpWidget.d.ts

@@ -1,5 +1,5 @@
 import type { IAnyStateTreeNode } from '@jbrowse/mobx-state-tree';
 declare const HelpWidget: ({ model, }: {
     model?: IAnyStateTreeNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default HelpWidget;

package/esm/HelpWidget/components/HelpWidget.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExternalLink } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Typography } from '@mui/material';
+import { Table, TableBody, TableCell, TableRow, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
 const useStyles = makeStyles()(theme => ({
     root: {
@@ -11,10 +11,33 @@ const useStyles = makeStyles()(theme => ({
     subtitle: {
         margin: theme.spacing(1),
     },
+    section: {
+        marginTop: theme.spacing(2),
+    },
+    key: {
+        fontFamily: 'monospace',
+        whiteSpace: 'nowrap',
+    },
 }));
+// The keyboard shortcuts have existed since the LGV grew `keyboardHandler.ts`
+// and were, until this list, written down nowhere a user could reach — so in
+// practice they did not exist. They belong here rather than in a dialog of their
+// own: this widget is already what the Help menu opens, and a second surface
+// would be one more thing to find. If the list ever outgrows a paragraph, that
+// is the moment to reconsider, not before.
+//
+// Spelled "Ctrl/Cmd" rather than branched on the platform: every reliable way to
+// detect macOS is deprecated (`navigator.platform`) or a user-agent sniff, and
+// naming both modifiers costs one word.
+const shortcuts = [
+    ['Ctrl/Cmd + ←', 'Pan left'],
+    ['Ctrl/Cmd + →', 'Pan right'],
+    ['Ctrl/Cmd + ↑', 'Zoom in'],
+    ['Ctrl/Cmd + ↓', 'Zoom out'],
+];
 const HelpWidget = observer(function Help({ model, }) {
     const { classes } = useStyles();
     const root = model ? getSession(model) : { version: '' };
-    return (_jsxs("div", { className: classes.root, children: [_jsx(Typography, { variant: "h4", align: "center", children: "JBrowse 2" }), _jsx(Typography, { variant: "h6", align: "center", className: classes.subtitle, children: root.version }), _jsx(Typography, { children: "Here are some resources to get help. Please report the version number above when asking questions. Thanks!" }), _jsxs("ul", { children: [_jsx("li", { children: _jsx(ExternalLink, { href: "https://github.com/GMOD/jbrowse-components/discussions", children: "Question & answer forum" }) }), _jsx("li", { children: _jsx(ExternalLink, { href: "https://github.com/GMOD/jbrowse-components/issues/new/choose", children: "Report a bug" }) }), _jsx("li", { children: _jsx(ExternalLink, { href: "https://jbrowse.org/jb2/docs/user_guide", children: "User guide" }) }), _jsx("li", { children: _jsx(ExternalLink, { href: "https://jbrowse.org/jb2/docs/", children: "Documentation" }) })] })] }));
+    return (_jsxs("div", { className: classes.root, children: [_jsx(Typography, { variant: "h4", align: "center", children: "JBrowse 2" }), _jsx(Typography, { variant: "h6", align: "center", className: classes.subtitle, children: root.version }), _jsx(Typography, { children: "Here are some resources to get help. Please report the version number above when asking questions. Thanks!" }), _jsxs("ul", { children: [_jsx("li", { children: _jsx(ExternalLink, { href: "https://github.com/GMOD/jbrowse-components/discussions", children: "Question & answer forum" }) }), _jsx("li", { children: _jsx(ExternalLink, { href: "https://github.com/GMOD/jbrowse-components/issues/new/choose", children: "Report a bug" }) }), _jsx("li", { children: _jsx(ExternalLink, { href: "https://jbrowse.org/jb2/docs/user_guide", children: "User guide" }) }), _jsx("li", { children: _jsx(ExternalLink, { href: "https://jbrowse.org/jb2/docs/", children: "Documentation" }) })] }), _jsxs("div", { className: classes.section, children: [_jsx(Typography, { variant: "h6", children: "Keyboard shortcuts" }), _jsx(Typography, { children: "These act on the focused view. Tab moves between views, or click one; the focused view is the one with the arrow beside its title." }), _jsx(Table, { size: "small", children: _jsx(TableBody, { children: shortcuts.map(([keys, description]) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.key, children: keys }), _jsx(TableCell, { children: description })] }, keys))) }) })] })] }));
 });
 export default HelpWidget;

package/esm/HelpWidget/index.js

@@ -15,7 +15,7 @@ export default function HelpWidgetF(pluginManager) {
             heading: 'Help',
             configSchema,
             stateModel,
-            ReactComponent: lazy(() => import("./components/HelpWidget.js")),
+            ReactComponent: lazy(() => import('./components/HelpWidget.js')),
         });
     });
 }

package/esm/ImportSessionWidget/components/ImportError.d.ts

@@ -1,3 +1,3 @@
 export default function ImportError({ error }: {
     error: unknown;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ImportSessionWidget/components/ImportError.js

@@ -18,5 +18,5 @@ const useStyles = makeStyles()(theme => ({
 }));
 export default function ImportError({ error }) {
     const { classes } = useStyles();
-    return (_jsxs(Paper, { className: classes.error, children: [_jsxs("div", { className: classes.errorHeader, children: [_jsx(ErrorIcon, { color: "inherit", fontSize: "large" }), _jsx("div", { children: _jsx(Typography, { variant: "h6", color: "inherit", align: "center", children: "Import error" }) })] }), _jsx(Typography, { className: classes.errorMessage, children: `${error}` })] }));
+    return (_jsxs(Paper, { className: classes.error, children: [_jsxs("div", { className: classes.errorHeader, children: [_jsx(ErrorIcon, { color: "inherit", fontSize: "large" }), _jsx(Typography, { variant: "h6", color: "inherit", align: "center", children: "Import error" })] }), _jsx(Typography, { className: classes.errorMessage, children: `${error}` })] }));
 }

package/esm/ImportSessionWidget/components/ImportSessionWidget.d.ts

@@ -1,5 +1,5 @@
 import type { IAnyStateTreeNode } from '@jbrowse/mobx-state-tree';
 declare const ImportSessionWidget: ({ model, }: {
     model: IAnyStateTreeNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ImportSessionWidget;

package/esm/ImportSessionWidget/components/ImportSessionWidget.js

@@ -1,69 +1,44 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { FileDropZone } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import CloudUploadIcon from '@mui/icons-material/CloudUpload';
-import { Button, Paper, Typography, alpha } from '@mui/material';
+import { Button, Paper, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import { useDropzone } from 'react-dropzone';
-import ImportError from "./ImportError.js";
-const MAX_FILE_SIZE = 512 * 1024 ** 2;
+import ImportError from './ImportError.js';
+const MAX_FILE_SIZE = 512 * 1024 ** 2; // 512 MiB
 const useStyles = makeStyles()(theme => ({
-    root: {
-        margin: theme.spacing(1),
-    },
     paper: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    dropZone: {
-        textAlign: 'center',
-        margin: theme.spacing(2),
-        padding: theme.spacing(2),
-        borderWidth: 2,
-        borderRadius: 2,
-        borderStyle: 'dashed',
-        outline: 'none',
-        transition: 'border .24s ease-in-out, background-color .24s ease-in-out',
-        '&:focus': {
-            borderColor: theme.palette.secondary.light,
-        },
-    },
-    dropZoneActive: {
-        borderColor: theme.palette.secondary.light,
-        backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-    },
-    dropZoneInactive: {
-        borderColor: theme.palette.divider,
-        backgroundColor: theme.palette.background.default,
-    },
-    uploadIcon: {
-        color: theme.palette.text.secondary,
+        margin: theme.spacing(1),
+        padding: theme.spacing(1),
     },
 }));
 const ImportSessionWidget = observer(function ImportSessionWidget({ model, }) {
     const [error, setError] = useState();
-    const { getRootProps, getInputProps, isDragActive } = useDropzone({
-        accept: 'application/json',
-        maxSize: MAX_FILE_SIZE,
-        multiple: false,
-        onDrop: async (acceptedFiles, rejectedFiles) => {
-            try {
-                if (rejectedFiles.length > 0) {
-                    throw new Error(rejectedFiles[0].errors.map(e => `${e}`).join(', '));
-                }
-                const sessionText = await acceptedFiles[0].text();
-                getSession(model).setSession?.(JSON.parse(sessionText).session);
-            }
-            catch (e) {
-                console.error(e);
-                setError(e);
-            }
-        },
-    });
-    const { classes, cx } = useStyles();
-    return (_jsxs("div", { className: classes.root, children: [_jsx(Paper, { className: classes.paper, children: _jsxs("div", { ...getRootProps({
-                        className: cx(classes.dropZone, isDragActive ? classes.dropZoneActive : classes.dropZoneInactive),
-                    }), children: [_jsx("input", { ...getInputProps() }), _jsx(CloudUploadIcon, { className: classes.uploadIcon, fontSize: "large" }), _jsx(Typography, { color: "textSecondary", align: "center", variant: "body1", children: "Drag and drop files here" }), _jsx(Typography, { color: "textSecondary", align: "center", variant: "body2", children: "or" }), _jsx(Button, { color: "primary", variant: "contained", children: "Browse Files" })] }) }), error ? _jsx(ImportError, { error: error }) : null] }));
+    const { classes } = useStyles();
+    return (_jsxs(_Fragment, { children: [_jsx(Paper, { className: classes.paper, children: _jsxs(FileDropZone, { accept: { 'application/json': ['.json'] }, maxSize: MAX_FILE_SIZE, multiple: false, message: "Drag and drop a session file here", onDrop: async (acceptedFiles, rejectedFiles) => {
+                        try {
+                            setError(undefined);
+                            if (rejectedFiles.length > 0) {
+                                throw new Error(rejectedFiles[0].errors.map(e => e.message).join(', '));
+                            }
+                            const sessionText = await acceptedFiles[0].text();
+                            const parsed = JSON.parse(sessionText);
+                            if (!parsed || typeof parsed !== 'object') {
+                                throw new Error('File does not contain a JSON object');
+                            }
+                            // session exports wrap the session under a top-level "session"
+                            // key; fall back to treating the whole object as the session
+                            const session = 'session' in parsed ? parsed.session : parsed;
+                            if (!session || typeof session !== 'object') {
+                                throw new Error('No session found in file. Expected a JBrowse session export (a JSON file with a top-level "session" key).');
+                            }
+                            getSession(model).setSession?.(session);
+                        }
+                        catch (e) {
+                            console.error(e);
+                            setError(e);
+                        }
+                    }, children: [_jsx(Typography, { color: "text.secondary", align: "center", variant: "body2", children: "or" }), _jsx(Button, { color: "primary", variant: "contained", children: "Browse Files" })] }) }), error ? _jsx(ImportError, { error: error }) : null] }));
 });
 export default ImportSessionWidget;

package/esm/ImportSessionWidget/index.js

@@ -15,7 +15,7 @@ export default function ImportSessionWidgetF(pluginManager) {
             heading: 'Import session',
             configSchema,
             stateModel,
-            ReactComponent: lazy(() => import("./components/ImportSessionWidget.js")),
+            ReactComponent: lazy(() => import('./components/ImportSessionWidget.js')),
         });
     });
 }

package/esm/SessionManager/components/DeleteOldSessionsDialog.d.ts

@@ -0,0 +1,12 @@
+import type { SessionModel } from './util.ts';
+/**
+ * Confirmation for the bulk "delete old sessions" action, which is the one
+ * control here that can destroy many sessions at once and was previously a
+ * single unconfirmed click. Shows how many sessions the chosen cutoff actually
+ * matches, so "delete" is never a guess.
+ */
+declare const DeleteOldSessionsDialog: ({ session, onClose, }: {
+    session: SessionModel;
+    onClose: () => void;
+}) => import("react").JSX.Element;
+export default DeleteOldSessionsDialog;

package/esm/SessionManager/components/DeleteOldSessionsDialog.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ConfirmDialog } from '@jbrowse/core/ui';
+import { MenuItem, TextField, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { STALE_CUTOFFS, staleSessions } from './util.js';
+/**
+ * Confirmation for the bulk "delete old sessions" action, which is the one
+ * control here that can destroy many sessions at once and was previously a
+ * single unconfirmed click. Shows how many sessions the chosen cutoff actually
+ * matches, so "delete" is never a guess.
+ */
+const DeleteOldSessionsDialog = observer(function DeleteOldSessionsDialog({ session, onClose, }) {
+    const [days, setDays] = useState(STALE_CUTOFFS[0].days);
+    const matched = staleSessions(session.savedSessionMetadata, {
+        days,
+        openSessionId: session.id,
+    });
+    return (_jsxs(ConfirmDialog, { open: true, title: "Delete old sessions", submitText: "Delete", submitColor: "error", submitDisabled: matched.length === 0, onCancel: onClose, onSubmit: () => {
+            session
+                .deleteSavedSessions(matched.map(m => m.id))
+                .then(() => {
+                session.notify(`${matched.length} session${matched.length === 1 ? '' : 's'} deleted`, 'success');
+            })
+                .catch((e) => {
+                console.error(e);
+                session.notifyError(`${e}`, e);
+            });
+            onClose();
+        }, children: [_jsx(TextField, { select: true, fullWidth: true, label: "Delete sessions last used more than", value: days, onChange: event => {
+                    setDays(+event.target.value);
+                }, children: STALE_CUTOFFS.map(cutoff => (_jsxs(MenuItem, { value: cutoff.days, children: [cutoff.label, " ago"] }, cutoff.days))) }), _jsx(Typography, { children: matched.length === 0
+                    ? 'No sessions match — favorites and the session you have open are never deleted.'
+                    : `${matched.length} session${matched.length === 1 ? '' : 's'} will be deleted. Favorites and the session you have open are kept.` })] }));
+});
+export default DeleteOldSessionsDialog;

package/esm/SessionManager/components/SessionManager.d.ts

@@ -1,5 +1,5 @@
 import type { SessionModel } from './util.ts';
 declare const SessionManager: ({ session, }: {
     session: SessionModel;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SessionManager;

package/esm/SessionManager/components/SessionManager.js

@@ -1,92 +1,130 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LabeledCheckbox } from '@jbrowse/core/ui';
 import DataGridFlexContainer from '@jbrowse/core/ui/DataGridFlexContainer';
-import { measureGridWidth, useLocalStorage } from '@jbrowse/core/util';
+import { useLocalStorage } from '@jbrowse/core/util/hooks';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import DeleteIcon from '@mui/icons-material/Delete';
-import StarIcon from '@mui/icons-material/Star';
-import StarBorderIcon from '@mui/icons-material/StarBorder';
-import { Button, Checkbox, FormControlLabel, IconButton, Link, Tooltip, } from '@mui/material';
+import { Button, Typography } from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
-import { differenceInDays, formatDistanceToNow } from 'date-fns';
 import { observer } from 'mobx-react';
+import DeleteOldSessionsDialog from './DeleteOldSessionsDialog.js';
+import { DeleteCell, FavoriteCell, LastUsedCell, NameCell } from './cells.js';
+import { sessionLastUsed } from './util.js';
 const useStyles = makeStyles()(theme => ({
+    // The widget fills its drawer and the grid takes what is left below the
+    // controls. Not cosmetic: MUI's DataGrid draws its horizontal scrollbar as an
+    // absolutely positioned overlay at the bottom of its own box, so a grid sized
+    // to its content puts that 14px bar *on top of the last row* — and z-index 60
+    // wins the hit test, so the bottom session silently stops responding to
+    // clicks. Given room, the bar lands below every row.
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+    },
+    grid: {
+        flex: 1,
+        // a flex child defaults to min-height:auto, which refuses to shrink below
+        // its content and would push the grid past the drawer instead of scrolling
+        minHeight: 0,
+    },
     mb: {
         margin: theme.spacing(1),
         marginBottom: theme.spacing(4),
     },
 }));
+/**
+ * The rows of the grid: the saved-session metadata the root model read out of
+ * IndexedDB, in display shape. `undefined` in, `undefined` out — that is the
+ * "database still opening" state, and it is deliberately not the same value as
+ * an empty database (see the render below).
+ */
+function buildRows(session, showOnlyFavs) {
+    return session.savedSessionMetadata
+        ?.map(r => {
+        const current = r.id === session.id;
+        return {
+            id: r.id,
+            name: r.name,
+            label: current ? `${r.name} (current)` : r.name,
+            createdAt: r.createdAt,
+            lastUsed: sessionLastUsed(r),
+            fav: r.favorite,
+            current,
+        };
+    })
+        .filter(f => !showOnlyFavs || f.fav);
+}
+/**
+ * One entry per column, each deferring to a named cell in cells.tsx so this
+ * reads as the shape of the table rather than as four inline components.
+ *
+ * Name takes the leftover width (`flex`) rather than a width measured from the
+ * session names, and the three fixed columns are kept narrow enough that their
+ * sum plus Name's minWidth fits a default-width drawer. `measureGridWidth`
+ * hands back a *fixed* width — up to 1000px for a long session name — and any
+ * total past the panel width grows the horizontal scrollbar this widget's
+ * styles exist to keep off the rows (see useStyles).
+ */
+function buildColumns(session) {
+    return [
+        {
+            field: 'fav',
+            headerName: 'Fav',
+            // the header of an icon column is short, and its sort arrow and column
+            // menu are what push it into an ellipsis. Only sorting earns its space
+            // here -- grouping the favorites is a real thing to want -- so the menu
+            // goes and the header reads.
+            width: 60,
+            disableColumnMenu: true,
+            renderCell: ({ row }) => (_jsx(FavoriteCell, { row: row, session: session })),
+        },
+        {
+            field: 'name',
+            headerName: 'Name',
+            editable: true,
+            flex: 1,
+            minWidth: 120,
+            renderCell: ({ row }) => (_jsx(NameCell, { row: row, session: session })),
+        },
+        {
+            field: 'lastUsed',
+            headerName: 'Last used',
+            width: 100,
+            renderCell: ({ row }) => (_jsx(LastUsedCell, { row: row, session: session })),
+        },
+        {
+            field: 'delete',
+            headerName: 'Delete',
+            // nothing to sort or filter on a column of buttons, and dropping both
+            // gives the header room to say "Delete" instead of "Del..."
+            width: 66,
+            sortable: false,
+            filterable: false,
+            disableColumnMenu: true,
+            renderCell: ({ row }) => (_jsx(DeleteCell, { row: row, session: session })),
+        },
+    ];
+}
 const SessionManager = observer(function SessionManager({ session, }) {
     const { classes } = useStyles();
+    const [deleteOldOpen, setDeleteOldOpen] = useState(false);
     const [showOnlyFavs, setShowOnlyFavs] = useLocalStorage('sessionManager-showOnlyFavs', false);
-    const rows = session.savedSessionMetadata
-        ?.map(r => ({
-        id: r.id,
-        name: r.name,
-        createdAt: r.createdAt,
-        fav: r.favorite,
-    }))
-        .filter(f => (showOnlyFavs ? f.fav : true));
-    return (_jsxs("div", { children: [_jsxs("div", { className: classes.mb, children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: showOnlyFavs, onChange: () => {
-                                setShowOnlyFavs(val => !val);
-                            } }), label: "Show favorites only?" }), _jsx(Button, { variant: "contained", onClick: () => {
-                            let i = 0;
-                            if (session.savedSessionMetadata) {
-                                for (const elt of session.savedSessionMetadata) {
-                                    if (differenceInDays(Date.now(), elt.createdAt) > 1 &&
-                                        !elt.favorite) {
-                                        session.deleteSavedSession(elt.id);
-                                        i++;
-                                    }
-                                }
-                            }
-                            session.notify(`${i} sessions deleted`, 'info');
-                        }, children: "Delete non-fav sessions older than 7 days?" })] }), rows ? (_jsx(DataGridFlexContainer, { children: _jsx(DataGrid, { disableRowSelectionOnClick: true, columnHeaderHeight: 35, rowHeight: 25, hideFooter: rows.length < 100, slotProps: {
-                        toolbar: {
-                            showQuickFilter: true,
-                        },
-                    }, rows: rows, columns: [
-                        {
-                            field: 'fav',
-                            headerName: 'Fav',
-                            width: 20,
-                            renderCell: ({ row }) => (_jsx(IconButton, { onClick: () => {
-                                    if (row.fav) {
-                                        session.unfavoriteSavedSession(row.id);
-                                    }
-                                    else {
-                                        session.favoriteSavedSession(row.id);
-                                    }
-                                }, children: row.fav ? _jsx(StarIcon, {}) : _jsx(StarBorderIcon, {}) })),
-                        },
-                        {
-                            field: 'name',
-                            headerName: 'Name',
-                            editable: true,
-                            width: measureGridWidth(rows.map(r => r.name)),
-                            renderCell: ({ row }) => (_jsxs(_Fragment, { children: [_jsx(Link, { href: "#", onClick: event => {
-                                            event.preventDefault();
-                                            session.activateSession(row.id);
-                                        }, children: row.name }), session.id === row.id ? ' (current)' : ''] })),
-                        },
-                        {
-                            headerName: 'Created at',
-                            field: 'createdAt',
-                            renderCell: ({ row }) => (_jsx(Tooltip, { disableInteractive: true, slotProps: {
-                                    transition: {
-                                        timeout: 0,
-                                    },
-                                }, title: row.createdAt.toLocaleString(), children: _jsx("div", { children: formatDistanceToNow(row.createdAt, {
-                                        addSuffix: true,
-                                    }) }) })),
-                        },
-                        {
-                            field: 'delete',
-                            width: 10,
-                            headerName: 'Delete',
-                            renderCell: ({ row }) => (_jsx(IconButton, { onClick: () => {
-                                    session.deleteSavedSession(row.id);
-                                }, children: _jsx(DeleteIcon, {}) })),
-                        },
-                    ] }) })) : (_jsx("div", { children: "No sessions loaded" }))] }));
+    const rows = buildRows(session, showOnlyFavs);
+    return (_jsxs("div", { className: classes.root, children: [_jsxs("div", { className: classes.mb, children: [_jsx(LabeledCheckbox, { checked: showOnlyFavs, onChange: val => {
+                            setShowOnlyFavs(val);
+                        }, label: "Show favorites only?" }), _jsx(Button, { variant: "contained", disabled: !rows, onClick: () => {
+                            setDeleteOldOpen(true);
+                        }, children: "Delete old sessions..." })] }), rows ? (_jsx(DataGridFlexContainer, { className: classes.grid, children: _jsx(DataGrid, { disableRowSelectionOnClick: true, columnHeaderHeight: 35, rowHeight: 25, hideFooter: rows.length < 100, showToolbar: true, slotProps: { toolbar: { showQuickFilter: true } }, rows: rows, columns: buildColumns(session), processRowUpdate: (newRow, oldRow) => {
+                        if (newRow.name !== oldRow.name) {
+                            void session.renameSavedSession(newRow.id, newRow.name);
+                        }
+                        return newRow;
+                    }, onProcessRowUpdateError: e => {
+                        console.error(e);
+                        session.notifyError(`${e}`, e);
+                    } }) })) : (_jsx(Typography, { className: classes.mb, children: "Loading saved sessions..." })), deleteOldOpen ? (_jsx(DeleteOldSessionsDialog, { session: session, onClose: () => {
+                    setDeleteOldOpen(false);
+                } })) : null] }));
 });
 export default SessionManager;

package/esm/SessionManager/components/cells.d.ts

@@ -0,0 +1,32 @@
+import type { SessionModel } from './util.ts';
+/**
+ * One row of the saved-session grid. `current` is precomputed rather than
+ * re-derived per cell: two cells turn on it, and it is the fact that decides
+ * what each of them is allowed to do (see DeleteCell).
+ */
+export interface Row {
+    id: string;
+    /** the editable value — what a rename writes, never what the cell draws */
+    name: string;
+    /**
+     * what the name cell draws, which is `name` plus a "(current)" suffix on the
+     * open session. Precomputed so the column that *measures* the names to pick
+     * its width measures the same strings the cells render: measuring `name`
+     * alone left the current row — the one that is always at the top — as the one
+     * row ellipsed.
+     */
+    label: string;
+    createdAt: Date;
+    lastUsed: Date;
+    fav: boolean;
+    current: boolean;
+}
+interface CellProps {
+    row: Row;
+    session: SessionModel;
+}
+export declare const FavoriteCell: ({ row, session, }: CellProps) => import("react").JSX.Element;
+export declare const NameCell: ({ row, session, }: CellProps) => import("react").JSX.Element;
+export declare const LastUsedCell: ({ row }: CellProps) => import("react").JSX.Element;
+export declare const DeleteCell: ({ row, session, }: CellProps) => import("react").JSX.Element;
+export {};

package/esm/SessionManager/components/cells.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActionLink } from '@jbrowse/core/ui';
+import { formatRelativeTime } from '@jbrowse/core/util';
+import DeleteIcon from '@mui/icons-material/Delete';
+import StarIcon from '@mui/icons-material/Star';
+import StarBorderIcon from '@mui/icons-material/StarBorder';
+import { IconButton, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+// Every icon-only control here carries the same string as its tooltip and its
+// aria-label. Without the label a screen reader announces an unnamed button per
+// row; without the tooltip a sighted user has to guess what the icon deletes.
+const IconCell = observer(function IconCell({ label, disabled, onClick, children, }) {
+    return (_jsx(Tooltip, { disableInteractive: true, title: label, children: _jsx("span", { children: _jsx(IconButton, { "aria-label": label, disabled: disabled, onClick: onClick, children: children }) }) }));
+});
+export const FavoriteCell = observer(function FavoriteCell({ row, session, }) {
+    return (_jsx(IconCell, { label: row.fav ? 'Remove from favorites' : 'Add to favorites', onClick: () => {
+            void session.setSavedSessionFavorite(row.id, !row.fav);
+        }, children: row.fav ? _jsx(StarIcon, {}) : _jsx(StarBorderIcon, {}) }));
+});
+export const NameCell = observer(function NameCell({ row, session, }) {
+    // A native `title`, not a MUI Tooltip: the drawer is narrow enough that a
+    // long session name ellipses, and a tooltip here would mean a popper laid
+    // over the row underneath — which is exactly how this column lost its clicks
+    // once already (see the scrollbar note in SessionManager's useStyles).
+    //
+    // The open session is not offered as a link: re-opening it from IndexedDB can
+    // only lose work, since that row is up to one autosave tick behind the live
+    // model. The File menu leaves it out of the recent list for the same reason.
+    return row.current ? (_jsx("span", { title: row.label, children: row.label })) : (_jsx(ActionLink, { title: row.label, onClick: () => {
+            void session.activateSession(row.id);
+        }, children: row.label }));
+});
+// dated by last use, not creation: the rows arrive ordered by last use, so
+// showing createdAt would read as an unsorted list. Both are in the tooltip,
+// since an id survives reloads and the gap between them is often large.
+export const LastUsedCell = observer(function LastUsedCell({ row }) {
+    return (_jsx(Tooltip, { disableInteractive: true, slotProps: { transition: { timeout: 0 } }, title: `Last used ${row.lastUsed.toLocaleString()}\nCreated ${row.createdAt.toLocaleString()}`, children: _jsx("div", { children: formatRelativeTime(row.lastUsed) }) }));
+});
+export const DeleteCell = observer(function DeleteCell({ row, session, }) {
+    // the open session is rewritten by the autosave autorun every 400ms, so
+    // deleting it only makes it vanish until the next edit puts it back — say so
+    // on a disabled button rather than on a snackbar after the click
+    return (_jsx(IconCell, { label: row.current
+            ? 'Cannot delete the session that is currently open'
+            : `Delete session ${row.name}`, disabled: row.current, onClick: () => {
+            void session.deleteSavedSession(row.id);
+        }, children: _jsx(DeleteIcon, {}) }));
+});

package/esm/SessionManager/components/util.d.ts

@@ -3,24 +3,42 @@ export interface SessionMetadata {
     id: string;
     name: string;
     createdAt: Date;
+    updatedAt?: Date;
     configPath: string;
     favorite: boolean;
 }
-export interface SessionSnap {
-    createdAt: Date;
-    session: {
-        name: string;
-        id: string;
-        views?: {
-            tracks?: unknown[];
-        }[];
-        [key: string]: unknown;
-    };
-}
+export declare function sessionLastUsed(m: SessionMetadata): Date;
 export interface SessionModel extends AbstractSessionModel {
     savedSessionMetadata?: SessionMetadata[];
-    removeSavedSession: (arg: SessionSnap) => void;
-    activateSession: (arg: string) => void;
-    loadAutosaveSession: () => void;
-    previousAutosaveId: string;
+    activateSession: (id: string) => Promise<void>;
+    deleteSavedSession: (id: string) => Promise<void>;
+    deleteSavedSessions: (ids: string[]) => Promise<void>;
+    setSavedSessionFavorite: (id: string, favorite: boolean) => Promise<void>;
+    renameSavedSession: (id: string, name: string) => Promise<void>;
 }
+export declare const STALE_CUTOFFS: readonly [{
+    readonly label: '1 day';
+    readonly days: 1;
+}, {
+    readonly label: '1 week';
+    readonly days: 7;
+}, {
+    readonly label: '1 month';
+    readonly days: 30;
+}];
+/**
+ * The sessions a bulk "delete old sessions" would remove: unfavorited, not the
+ * one currently open, and last *used* — not created — longer ago than the
+ * cutoff. An id survives reloads, so a session edited every day still carries
+ * the createdAt of the day it was opened, and ageing by that would delete live
+ * work out from under the user.
+ *
+ * The open session is excluded here as well as in the model's
+ * deleteSavedSessions, so the count the confirmation quotes is the number of
+ * sessions that will actually go.
+ */
+export declare function staleSessions(metadata: SessionMetadata[] | undefined, { days, openSessionId, now, }: {
+    days: number;
+    openSessionId?: string;
+    now?: number;
+}): SessionMetadata[];

package/esm/SessionManager/components/util.js

@@ -1 +1,28 @@
-export {};
+// when a session was last touched, see web-core's sessionLastUsed
+export function sessionLastUsed(m) {
+    return m.updatedAt ?? m.createdAt;
+}
+// The cutoffs the "delete old sessions" bulk action offers. Days, so the label
+// and the filter can never disagree about what "1 week" means.
+export const STALE_CUTOFFS = [
+    { label: '1 day', days: 1 },
+    { label: '1 week', days: 7 },
+    { label: '1 month', days: 30 },
+];
+const MS_PER_DAY = 1000 * 60 * 60 * 24;
+/**
+ * The sessions a bulk "delete old sessions" would remove: unfavorited, not the
+ * one currently open, and last *used* — not created — longer ago than the
+ * cutoff. An id survives reloads, so a session edited every day still carries
+ * the createdAt of the day it was opened, and ageing by that would delete live
+ * work out from under the user.
+ *
+ * The open session is excluded here as well as in the model's
+ * deleteSavedSessions, so the count the confirmation quotes is the number of
+ * sessions that will actually go.
+ */
+export function staleSessions(metadata, { days, openSessionId, now = Date.now(), }) {
+    return (metadata ?? []).filter(m => !m.favorite &&
+        m.id !== openSessionId &&
+        (now - +sessionLastUsed(m)) / MS_PER_DAY > days);
+}

package/esm/SessionManager/index.d.ts

@@ -2,6 +2,6 @@ import type PluginManager from '@jbrowse/core/PluginManager';
 export declare const configSchema: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export declare const stateModel: import("@jbrowse/mobx-state-tree").IModelType<{
     id: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
-    type: import("@jbrowse/mobx-state-tree").ISimpleType<"SessionManager">;
+    type: import("@jbrowse/mobx-state-tree").ILiteralType<"SessionManager">;
 }, {}, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;
 export default function SessionManagerF(pluginManager: PluginManager): void;

package/esm/SessionManager/index.js

@@ -15,7 +15,7 @@ export default function SessionManagerF(pluginManager) {
             heading: 'Recent sessions',
             configSchema,
             stateModel,
-            ReactComponent: lazy(() => import("./components/SessionManager.js")),
+            ReactComponent: lazy(() => import('./components/SessionManager.js')),
         });
     });
 }

package/esm/index.js

@@ -2,10 +2,10 @@ import Plugin from '@jbrowse/core/Plugin';
 import { isAbstractMenuManager } from '@jbrowse/core/util';
 import HelpIcon from '@mui/icons-material/Help';
 import InfoIcon from '@mui/icons-material/Info';
-import AboutWidgetF from "./AboutWidget/index.js";
-import HelpWidgetF from "./HelpWidget/index.js";
-import ImportSessionWidgetF from "./ImportSessionWidget/index.js";
-import SessionManagerF from "./SessionManager/index.js";
+import AboutWidgetF from './AboutWidget/index.js';
+import HelpWidgetF from './HelpWidget/index.js';
+import ImportSessionWidgetF from './ImportSessionWidget/index.js';
+import SessionManagerF from './SessionManager/index.js';
 export default class MenusPlugin extends Plugin {
     name = 'MenusPlugin';
     install(pluginManager) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-menus",
-  "version": "4.2.1",
+  "version": "5.0.0-beta.1",
   "type": "module",
   "description": "JBrowse 2 basic menus",
   "keywords": [
@@ -21,19 +21,18 @@
     "esm"
   ],
   "dependencies": {
-    "@jbrowse/mobx-state-tree": "^5.6.0",
-    "@mui/icons-material": "^7.3.10",
-    "@mui/material": "^7.3.10",
-    "@mui/x-data-grid": "^8.28.2",
-    "date-fns": "^4.1.0",
-    "mobx": "^6.15.0",
-    "mobx-react": "^9.2.1",
-    "react-dropzone": "^15.0.0",
-    "@jbrowse/core": "^4.2.1"
+    "@jbrowse/mobx-state-tree": "^6.5.1",
+    "@mui/icons-material": "^9.3.1",
+    "@mui/material": "^9.3.1",
+    "@mui/x-data-grid": "^9.12.0",
+    "mobx": "^7.0.3",
+    "mobx-react": "^10.0.2",
+    "@jbrowse/core": "^5.0.0-beta.1",
+    "@jbrowse/render-core": "^5.0.0-beta.1"
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -43,14 +42,11 @@
     "build": "pnpm run /^build:/",
     "test": "cd ../..; jest --passWithNoTests plugins/menus",
     "prebuild": "pnpm clean",
-    "build:esm": "tsc -p tsconfig.build.esm.json",
+    "build:esm": "node ../../node_modules/typescript7/bin/tsc --build tsconfig.build.esm.json",
     "clean": "rimraf esm *.tsbuildinfo"
   },
   "types": "esm/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./esm/index.d.ts",
-      "import": "./esm/index.js"
-    }
+    ".": "./esm/index.js"
   }
 }