@jbrowse/plugin-menus 2.7.2 → 2.8.0

package/dist/SessionManager/components/AutosavedSessionsList.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SessionModel } from './util';
+declare const AutosaveSessionsList: ({ session, }: {
+    session: SessionModel;
+}) => React.JSX.Element | null;
+export default AutosaveSessionsList;

package/dist/SessionManager/components/AutosavedSessionsList.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+const SessionListItem_1 = __importDefault(require("./SessionListItem"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    root: {
+        margin: theme.spacing(1),
+    },
+}));
+const AutosaveSessionsList = (0, mobx_react_1.observer)(function ({ session, }) {
+    const { classes } = useStyles();
+    const autosavedSession = JSON.parse(localStorage.getItem(session.previousAutosaveId) || '{}').session;
+    return autosavedSession ? (react_1.default.createElement(material_1.Paper, { className: classes.root },
+        react_1.default.createElement(material_1.List, { subheader: react_1.default.createElement(material_1.ListSubheader, null, "Previous autosaved entry") },
+            react_1.default.createElement(SessionListItem_1.default, { session: session, sessionSnapshot: autosavedSession, onClick: () => session.loadAutosaveSession() })))) : null;
+});
+exports.default = AutosaveSessionsList;

package/dist/SessionManager/components/{DeleteDialog.d.ts → DeleteSavedSessionDialog.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-export default function DeleteDialog({ open, sessionNameToDelete, handleClose, }: {
+export default function DeleteSavedSessionDialog({ open, sessionNameToDelete, handleClose, }: {
     sessionNameToDelete: string;
     open: boolean;
     handleClose: (arg?: boolean) => void;

package/dist/SessionManager/components/{DeleteDialog.js → DeleteSavedSessionDialog.js}

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
-function DeleteDialog({ open, sessionNameToDelete, handleClose, }) {
-    return (react_1.default.createElement(ui_1.Dialog, { open: open, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", title: `Delete session "${sessionNameToDelete}"?` },
+function DeleteSavedSessionDialog({ open, sessionNameToDelete, handleClose, }) {
+    return (react_1.default.createElement(ui_1.Dialog, { open: open, title: `Delete session "${sessionNameToDelete}"?` },
         react_1.default.createElement(material_1.DialogContent, null,
-            react_1.default.createElement(material_1.DialogContentText, { id: "alert-dialog-description" }, "This action cannot be undone")),
+            react_1.default.createElement(material_1.DialogContentText, null, "This action cannot be undone")),
         react_1.default.createElement(material_1.DialogActions, null,
             react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), color: "primary" }, "Cancel"),
             react_1.default.createElement(material_1.Button, { onClick: () => handleClose(true), color: "primary", autoFocus: true }, "Delete"))));
 }
-exports.default = DeleteDialog;
+exports.default = DeleteSavedSessionDialog;

package/dist/SessionManager/components/RegularSavedSessionsList.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SessionModel } from './util';
+declare const RegularSavedSessionsList: ({ session, }: {
+    session: SessionModel;
+}) => React.JSX.Element;
+export default RegularSavedSessionsList;

package/dist/SessionManager/components/RegularSavedSessionsList.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+// icons
+const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+const DeleteSavedSessionDialog_1 = __importDefault(require("./DeleteSavedSessionDialog"));
+const SessionListItem_1 = __importDefault(require("./SessionListItem"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    root: {
+        margin: theme.spacing(1),
+    },
+    message: {
+        padding: theme.spacing(3),
+    },
+}));
+const RegularSavedSessionsList = (0, mobx_react_1.observer)(function ({ session, }) {
+    const { classes } = useStyles();
+    const [sessionIndexToDelete, setSessionIndexToDelete] = (0, react_1.useState)();
+    function handleDialogClose(deleteSession = false) {
+        if (deleteSession && sessionIndexToDelete !== undefined) {
+            session.removeSavedSession(session.savedSessions[sessionIndexToDelete]);
+        }
+        setSessionIndexToDelete(undefined);
+    }
+    const sessionNameToDelete = sessionIndexToDelete !== undefined
+        ? session.savedSessions[sessionIndexToDelete].name
+        : '';
+    return (react_1.default.createElement(material_1.Paper, { className: classes.root },
+        react_1.default.createElement(material_1.List, { subheader: react_1.default.createElement(material_1.ListSubheader, null, "Saved sessions") }, session.savedSessions.length ? (session.savedSessions.map((sessionSnapshot, idx) => (react_1.default.createElement(SessionListItem_1.default, { onClick: () => session.activateSession(sessionSnapshot.name), sessionSnapshot: sessionSnapshot, session: session, key: sessionSnapshot.name, secondaryAction: react_1.default.createElement(material_1.IconButton, { edge: "end", disabled: session.name === sessionSnapshot.name, onClick: () => setSessionIndexToDelete(idx) },
+                react_1.default.createElement(Delete_1.default, null)) })))) : (react_1.default.createElement(material_1.Typography, { className: classes.message }, "No saved sessions found"))),
+        sessionNameToDelete ? (react_1.default.createElement(react_1.default.Suspense, { fallback: null },
+            react_1.default.createElement(DeleteSavedSessionDialog_1.default, { open: true, sessionNameToDelete: sessionNameToDelete, handleClose: handleDialogClose }))) : null));
+});
+exports.default = RegularSavedSessionsList;

package/dist/SessionManager/components/SessionListItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AbstractSessionModel } from '@jbrowse/core/util';
+import { SessionSnap } from './util';
+declare const SessionListItem: ({ session, sessionSnapshot, onClick, secondaryAction, }: {
+    sessionSnapshot: SessionSnap;
+    session: AbstractSessionModel;
+    onClick: () => void;
+    secondaryAction?: React.ReactNode;
+}) => React.JSX.Element;
+export default SessionListItem;

package/dist/SessionManager/components/SessionListItem.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const pluralize_1 = __importDefault(require("pluralize"));
+// icons
+const ViewList_1 = __importDefault(require("@mui/icons-material/ViewList"));
+const util_1 = require("@jbrowse/core/util");
+const SessionListItem = (0, mobx_react_1.observer)(function ({ session, sessionSnapshot, onClick, secondaryAction, }) {
+    const { views = [] } = sessionSnapshot || {};
+    const totalTracks = (0, util_1.sum)(views.map(view => { var _a, _b; return (_b = (_a = view.tracks) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0; }));
+    const n = views.length;
+    return (react_1.default.createElement(material_1.ListItem, { secondaryAction: secondaryAction },
+        react_1.default.createElement(material_1.ListItemButton, { onClick: onClick },
+            react_1.default.createElement(material_1.ListItemIcon, null,
+                react_1.default.createElement(ViewList_1.default, null)),
+            react_1.default.createElement(material_1.ListItemText, { primary: sessionSnapshot.name, secondary: session.name === sessionSnapshot.name
+                    ? 'Currently open'
+                    : `${n} ${(0, pluralize_1.default)('view', n)}; ${totalTracks} open ${(0, pluralize_1.default)('track', totalTracks)}` }))));
+});
+exports.default = SessionListItem;

package/dist/SessionManager/components/SessionManager.d.ts

@@ -1,20 +1,6 @@
 import React from 'react';
-import { AbstractSessionModel } from '@jbrowse/core/util';
-interface SessionSnap {
-    name: string;
-    views?: {
-        tracks: unknown[];
-    }[];
-    [key: string]: unknown;
-}
-interface SessionModel extends AbstractSessionModel {
-    savedSessions: SessionSnap[];
-    removeSavedSession: (arg: SessionSnap) => void;
-    activateSession: (arg: string) => void;
-    loadAutosaveSession: () => void;
-    previousAutosaveId: string;
-}
-declare const SessionManager: ({ session }: {
+import { SessionModel } from './util';
+declare const SessionManager: ({ session, }: {
     session: SessionModel;
 }) => React.JSX.Element;
 export default SessionManager;

package/dist/SessionManager/components/SessionManager.js

@@ -1,101 +1,15 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
+const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
-const pluralize_1 = __importDefault(require("pluralize"));
-// icons
-const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
-const ViewList_1 = __importDefault(require("@mui/icons-material/ViewList"));
-const DeleteDialog_1 = __importDefault(require("./DeleteDialog"));
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    root: {
-        margin: theme.spacing(1),
-    },
-    message: {
-        padding: theme.spacing(3),
-    },
-}));
-const AutosaveEntry = (0, mobx_react_1.observer)(({ session }) => {
-    const { classes } = useStyles();
-    const autosavedSession = JSON.parse(localStorage.getItem(session.previousAutosaveId) || '{}').session;
-    const { views = [] } = autosavedSession || {};
-    const totalTracks = views
-        .map(view => view.tracks.length)
-        .reduce((a, b) => a + b, 0);
-    return autosavedSession ? (react_1.default.createElement(material_1.Paper, { className: classes.root },
-        react_1.default.createElement(material_1.List, { subheader: react_1.default.createElement(material_1.ListSubheader, null, "Previous autosaved entry") },
-            react_1.default.createElement(material_1.ListItem, { button: true, onClick: () => session.loadAutosaveSession() },
-                react_1.default.createElement(material_1.ListItemIcon, null,
-                    react_1.default.createElement(ViewList_1.default, null)),
-                react_1.default.createElement(material_1.ListItemText, { primary: autosavedSession.name, secondary: session.name === autosavedSession.name
-                        ? 'Currently open'
-                        : `${views.length} ${(0, pluralize_1.default)('view', views.length)}; ${totalTracks}
-                           open ${(0, pluralize_1.default)('track', totalTracks)}` }))))) : null;
-});
-const SessionManager = (0, mobx_react_1.observer)(({ session }) => {
-    const { classes } = useStyles();
-    const [sessionIndexToDelete, setSessionIndexToDelete] = (0, react_1.useState)();
-    const [open, setOpen] = (0, react_1.useState)(false);
-    function handleDialogClose(deleteSession = false) {
-        if (deleteSession && sessionIndexToDelete !== undefined) {
-            session.removeSavedSession(session.savedSessions[sessionIndexToDelete]);
-        }
-        setSessionIndexToDelete(undefined);
-        setOpen(false);
-    }
-    const sessionNameToDelete = sessionIndexToDelete !== undefined
-        ? session.savedSessions[sessionIndexToDelete].name
-        : '';
+const AutosavedSessionsList_1 = __importDefault(require("./AutosavedSessionsList"));
+const RegularSavedSessionsList_1 = __importDefault(require("./RegularSavedSessionsList"));
+const SessionManager = (0, mobx_react_1.observer)(function ({ session, }) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(AutosaveEntry, { session: session }),
-        react_1.default.createElement(material_1.Paper, { className: classes.root },
-            react_1.default.createElement(material_1.List, { subheader: react_1.default.createElement(material_1.ListSubheader, null, "Saved sessions") }, session.savedSessions.length ? (session.savedSessions.map((sessionSnapshot, idx) => {
-                const { views = [] } = sessionSnapshot;
-                const totalTracks = views
-                    .map(view => view.tracks.length)
-                    .reduce((a, b) => a + b, 0);
-                return (react_1.default.createElement(material_1.ListItem, { button: true, disabled: session.name === sessionSnapshot.name, onClick: () => session.activateSession(sessionSnapshot.name), key: sessionSnapshot.name },
-                    react_1.default.createElement(material_1.ListItemIcon, null,
-                        react_1.default.createElement(ViewList_1.default, null)),
-                    react_1.default.createElement(material_1.ListItemText, { primary: sessionSnapshot.name, secondary: session.name === sessionSnapshot.name
-                            ? 'Currently open'
-                            : `${views.length} ${(0, pluralize_1.default)('view', views.length)}; ${totalTracks}
-                           open ${(0, pluralize_1.default)('track', totalTracks)}` }),
-                    react_1.default.createElement(material_1.ListItemSecondaryAction, null,
-                        react_1.default.createElement(material_1.IconButton, { edge: "end", disabled: session.name === sessionSnapshot.name, "aria-label": "Delete", onClick: () => {
-                                setSessionIndexToDelete(idx);
-                                setOpen(true);
-                            } },
-                            react_1.default.createElement(Delete_1.default, null)))));
-            })) : (react_1.default.createElement(material_1.Typography, { className: classes.message }, "No saved sessions found")))),
-        react_1.default.createElement(DeleteDialog_1.default, { open: open, sessionNameToDelete: sessionNameToDelete, handleClose: handleDialogClose })));
+        react_1.default.createElement(AutosavedSessionsList_1.default, { session: session }),
+        react_1.default.createElement(RegularSavedSessionsList_1.default, { session: session })));
 });
 exports.default = SessionManager;

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

@@ -0,0 +1,15 @@
+import { AbstractSessionModel } from '@jbrowse/core/util';
+export interface SessionSnap {
+    name: string;
+    views?: {
+        tracks?: unknown[];
+    }[];
+    [key: string]: unknown;
+}
+export interface SessionModel extends AbstractSessionModel {
+    savedSessions: SessionSnap[];
+    removeSavedSession: (arg: SessionSnap) => void;
+    activateSession: (arg: string) => void;
+    loadAutosaveSession: () => void;
+    previousAutosaveId: string;
+}

package/dist/SessionManager/components/util.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SessionModel } from './util';
+declare const AutosaveSessionsList: ({ session, }: {
+    session: SessionModel;
+}) => React.JSX.Element | null;
+export default AutosaveSessionsList;

package/esm/SessionManager/components/AutosavedSessionsList.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { List, ListSubheader, Paper } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import SessionListItem from './SessionListItem';
+const useStyles = makeStyles()(theme => ({
+    root: {
+        margin: theme.spacing(1),
+    },
+}));
+const AutosaveSessionsList = observer(function ({ session, }) {
+    const { classes } = useStyles();
+    const autosavedSession = JSON.parse(localStorage.getItem(session.previousAutosaveId) || '{}').session;
+    return autosavedSession ? (React.createElement(Paper, { className: classes.root },
+        React.createElement(List, { subheader: React.createElement(ListSubheader, null, "Previous autosaved entry") },
+            React.createElement(SessionListItem, { session: session, sessionSnapshot: autosavedSession, onClick: () => session.loadAutosaveSession() })))) : null;
+});
+export default AutosaveSessionsList;

package/esm/SessionManager/components/{DeleteDialog.d.ts → DeleteSavedSessionDialog.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-export default function DeleteDialog({ open, sessionNameToDelete, handleClose, }: {
+export default function DeleteSavedSessionDialog({ open, sessionNameToDelete, handleClose, }: {
     sessionNameToDelete: string;
     open: boolean;
     handleClose: (arg?: boolean) => void;

package/esm/SessionManager/components/{DeleteDialog.js → DeleteSavedSessionDialog.js}

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Button, DialogActions, DialogContent, DialogContentText, } from '@mui/material';
 import { Dialog } from '@jbrowse/core/ui';
-export default function DeleteDialog({ open, sessionNameToDelete, handleClose, }) {
-    return (React.createElement(Dialog, { open: open, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", title: `Delete session "${sessionNameToDelete}"?` },
+export default function DeleteSavedSessionDialog({ open, sessionNameToDelete, handleClose, }) {
+    return (React.createElement(Dialog, { open: open, title: `Delete session "${sessionNameToDelete}"?` },
         React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { id: "alert-dialog-description" }, "This action cannot be undone")),
+            React.createElement(DialogContentText, null, "This action cannot be undone")),
         React.createElement(DialogActions, null,
             React.createElement(Button, { onClick: () => handleClose(), color: "primary" }, "Cancel"),
             React.createElement(Button, { onClick: () => handleClose(true), color: "primary", autoFocus: true }, "Delete"))));

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SessionModel } from './util';
+declare const RegularSavedSessionsList: ({ session, }: {
+    session: SessionModel;
+}) => React.JSX.Element;
+export default RegularSavedSessionsList;

package/esm/SessionManager/components/RegularSavedSessionsList.js

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { IconButton, List, ListSubheader, Paper, Typography, } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+// icons
+import DeleteIcon from '@mui/icons-material/Delete';
+import DeleteSavedSessionDialog from './DeleteSavedSessionDialog';
+import SessionListItem from './SessionListItem';
+const useStyles = makeStyles()(theme => ({
+    root: {
+        margin: theme.spacing(1),
+    },
+    message: {
+        padding: theme.spacing(3),
+    },
+}));
+const RegularSavedSessionsList = observer(function ({ session, }) {
+    const { classes } = useStyles();
+    const [sessionIndexToDelete, setSessionIndexToDelete] = useState();
+    function handleDialogClose(deleteSession = false) {
+        if (deleteSession && sessionIndexToDelete !== undefined) {
+            session.removeSavedSession(session.savedSessions[sessionIndexToDelete]);
+        }
+        setSessionIndexToDelete(undefined);
+    }
+    const sessionNameToDelete = sessionIndexToDelete !== undefined
+        ? session.savedSessions[sessionIndexToDelete].name
+        : '';
+    return (React.createElement(Paper, { className: classes.root },
+        React.createElement(List, { subheader: React.createElement(ListSubheader, null, "Saved sessions") }, session.savedSessions.length ? (session.savedSessions.map((sessionSnapshot, idx) => (React.createElement(SessionListItem, { onClick: () => session.activateSession(sessionSnapshot.name), sessionSnapshot: sessionSnapshot, session: session, key: sessionSnapshot.name, secondaryAction: React.createElement(IconButton, { edge: "end", disabled: session.name === sessionSnapshot.name, onClick: () => setSessionIndexToDelete(idx) },
+                React.createElement(DeleteIcon, null)) })))) : (React.createElement(Typography, { className: classes.message }, "No saved sessions found"))),
+        sessionNameToDelete ? (React.createElement(React.Suspense, { fallback: null },
+            React.createElement(DeleteSavedSessionDialog, { open: true, sessionNameToDelete: sessionNameToDelete, handleClose: handleDialogClose }))) : null));
+});
+export default RegularSavedSessionsList;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AbstractSessionModel } from '@jbrowse/core/util';
+import { SessionSnap } from './util';
+declare const SessionListItem: ({ session, sessionSnapshot, onClick, secondaryAction, }: {
+    sessionSnapshot: SessionSnap;
+    session: AbstractSessionModel;
+    onClick: () => void;
+    secondaryAction?: React.ReactNode;
+}) => React.JSX.Element;
+export default SessionListItem;

package/esm/SessionManager/components/SessionListItem.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ListItem, ListItemButton, ListItemIcon, ListItemText, } from '@mui/material';
+import { observer } from 'mobx-react';
+import pluralize from 'pluralize';
+// icons
+import ViewListIcon from '@mui/icons-material/ViewList';
+import { sum } from '@jbrowse/core/util';
+const SessionListItem = observer(function ({ session, sessionSnapshot, onClick, secondaryAction, }) {
+    const { views = [] } = sessionSnapshot || {};
+    const totalTracks = sum(views.map(view => { var _a, _b; return (_b = (_a = view.tracks) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0; }));
+    const n = views.length;
+    return (React.createElement(ListItem, { secondaryAction: secondaryAction },
+        React.createElement(ListItemButton, { onClick: onClick },
+            React.createElement(ListItemIcon, null,
+                React.createElement(ViewListIcon, null)),
+            React.createElement(ListItemText, { primary: sessionSnapshot.name, secondary: session.name === sessionSnapshot.name
+                    ? 'Currently open'
+                    : `${n} ${pluralize('view', n)}; ${totalTracks} open ${pluralize('track', totalTracks)}` }))));
+});
+export default SessionListItem;

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

@@ -1,20 +1,6 @@
 import React from 'react';
-import { AbstractSessionModel } from '@jbrowse/core/util';
-interface SessionSnap {
-    name: string;
-    views?: {
-        tracks: unknown[];
-    }[];
-    [key: string]: unknown;
-}
-interface SessionModel extends AbstractSessionModel {
-    savedSessions: SessionSnap[];
-    removeSavedSession: (arg: SessionSnap) => void;
-    activateSession: (arg: string) => void;
-    loadAutosaveSession: () => void;
-    previousAutosaveId: string;
-}
-declare const SessionManager: ({ session }: {
+import { SessionModel } from './util';
+declare const SessionManager: ({ session, }: {
     session: SessionModel;
 }) => React.JSX.Element;
 export default SessionManager;

package/esm/SessionManager/components/SessionManager.js

@@ -1,73 +1,10 @@
-import React, { useState } from 'react';
-import { IconButton, List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader, Paper, Typography, } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
+import React from 'react';
 import { observer } from 'mobx-react';
-import pluralize from 'pluralize';
-// icons
-import DeleteIcon from '@mui/icons-material/Delete';
-import ViewListIcon from '@mui/icons-material/ViewList';
-import DeleteDialog from './DeleteDialog';
-const useStyles = makeStyles()(theme => ({
-    root: {
-        margin: theme.spacing(1),
-    },
-    message: {
-        padding: theme.spacing(3),
-    },
-}));
-const AutosaveEntry = observer(({ session }) => {
-    const { classes } = useStyles();
-    const autosavedSession = JSON.parse(localStorage.getItem(session.previousAutosaveId) || '{}').session;
-    const { views = [] } = autosavedSession || {};
-    const totalTracks = views
-        .map(view => view.tracks.length)
-        .reduce((a, b) => a + b, 0);
-    return autosavedSession ? (React.createElement(Paper, { className: classes.root },
-        React.createElement(List, { subheader: React.createElement(ListSubheader, null, "Previous autosaved entry") },
-            React.createElement(ListItem, { button: true, onClick: () => session.loadAutosaveSession() },
-                React.createElement(ListItemIcon, null,
-                    React.createElement(ViewListIcon, null)),
-                React.createElement(ListItemText, { primary: autosavedSession.name, secondary: session.name === autosavedSession.name
-                        ? 'Currently open'
-                        : `${views.length} ${pluralize('view', views.length)}; ${totalTracks}
-                           open ${pluralize('track', totalTracks)}` }))))) : null;
-});
-const SessionManager = observer(({ session }) => {
-    const { classes } = useStyles();
-    const [sessionIndexToDelete, setSessionIndexToDelete] = useState();
-    const [open, setOpen] = useState(false);
-    function handleDialogClose(deleteSession = false) {
-        if (deleteSession && sessionIndexToDelete !== undefined) {
-            session.removeSavedSession(session.savedSessions[sessionIndexToDelete]);
-        }
-        setSessionIndexToDelete(undefined);
-        setOpen(false);
-    }
-    const sessionNameToDelete = sessionIndexToDelete !== undefined
-        ? session.savedSessions[sessionIndexToDelete].name
-        : '';
+import AutosaveSessionsList from './AutosavedSessionsList';
+import RegularSavedSessionsList from './RegularSavedSessionsList';
+const SessionManager = observer(function ({ session, }) {
     return (React.createElement(React.Fragment, null,
-        React.createElement(AutosaveEntry, { session: session }),
-        React.createElement(Paper, { className: classes.root },
-            React.createElement(List, { subheader: React.createElement(ListSubheader, null, "Saved sessions") }, session.savedSessions.length ? (session.savedSessions.map((sessionSnapshot, idx) => {
-                const { views = [] } = sessionSnapshot;
-                const totalTracks = views
-                    .map(view => view.tracks.length)
-                    .reduce((a, b) => a + b, 0);
-                return (React.createElement(ListItem, { button: true, disabled: session.name === sessionSnapshot.name, onClick: () => session.activateSession(sessionSnapshot.name), key: sessionSnapshot.name },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(ViewListIcon, null)),
-                    React.createElement(ListItemText, { primary: sessionSnapshot.name, secondary: session.name === sessionSnapshot.name
-                            ? 'Currently open'
-                            : `${views.length} ${pluralize('view', views.length)}; ${totalTracks}
-                           open ${pluralize('track', totalTracks)}` }),
-                    React.createElement(ListItemSecondaryAction, null,
-                        React.createElement(IconButton, { edge: "end", disabled: session.name === sessionSnapshot.name, "aria-label": "Delete", onClick: () => {
-                                setSessionIndexToDelete(idx);
-                                setOpen(true);
-                            } },
-                            React.createElement(DeleteIcon, null)))));
-            })) : (React.createElement(Typography, { className: classes.message }, "No saved sessions found")))),
-        React.createElement(DeleteDialog, { open: open, sessionNameToDelete: sessionNameToDelete, handleClose: handleDialogClose })));
+        React.createElement(AutosaveSessionsList, { session: session }),
+        React.createElement(RegularSavedSessionsList, { session: session })));
 });
 export default SessionManager;

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

@@ -0,0 +1,15 @@
+import { AbstractSessionModel } from '@jbrowse/core/util';
+export interface SessionSnap {
+    name: string;
+    views?: {
+        tracks?: unknown[];
+    }[];
+    [key: string]: unknown;
+}
+export interface SessionModel extends AbstractSessionModel {
+    savedSessions: SessionSnap[];
+    removeSavedSession: (arg: SessionSnap) => void;
+    activateSession: (arg: string) => void;
+    loadAutosaveSession: () => void;
+    previousAutosaveId: string;
+}

package/esm/SessionManager/components/util.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-menus",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "description": "JBrowse 2 basic menus",
   "keywords": [
     "jbrowse",
@@ -56,5 +56,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9052b295f2d322e729254457ed9fe2231fb22cce"
+  "gitHead": "ee8c2bdc8bd4f1a70b1eefda984f04a2830d9ca0"
 }