@jbrowse/plugin-menus 2.6.1

package/src/HelpWidget/index.ts

@@ -0,0 +1,10 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { ElementId } from '@jbrowse/core/util/types/mst'
+import { types } from 'mobx-state-tree'
+
+export const configSchema = ConfigurationSchema('HelpWidget', {})
+
+export const stateModel = types.model('HelpWidget', {
+  id: ElementId,
+  type: types.literal('HelpWidget'),
+})

package/src/ImportSessionWidget/components/ImportError.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Paper, Typography } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+// icons
+import ErrorIcon from '@mui/icons-material/Error'
+
+const useStyles = makeStyles()(theme => ({
+  error: {
+    margin: theme.spacing(2),
+  },
+  errorHeader: {
+    background: theme.palette.error.light,
+    color: theme.palette.error.contrastText,
+    padding: theme.spacing(2),
+    textAlign: 'center',
+  },
+  errorMessage: {
+    padding: theme.spacing(2),
+  },
+}))
+
+export default function ImportError({ error }: { error: unknown }) {
+  const { classes } = useStyles()
+  return (
+    <Paper className={classes.error}>
+      <div className={classes.errorHeader}>
+        <ErrorIcon color="inherit" fontSize="large" />
+        <div>
+          <Typography variant="h6" color="inherit" align="center">
+            Import error
+          </Typography>
+        </div>
+      </div>
+      <Typography className={classes.errorMessage}>{`${error}`}</Typography>
+    </Paper>
+  )
+}

package/src/ImportSessionWidget/components/ImportSessionWidget.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react'
+import { Button, Paper, Typography, alpha } from '@mui/material'
+import { getSession } from '@jbrowse/core/util'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { useDropzone } from 'react-dropzone'
+
+// icons
+import CloudUploadIcon from '@mui/icons-material/CloudUpload'
+
+// locals
+import ImportError from './ImportError'
+import { IAnyStateTreeNode } from 'mobx-state-tree'
+
+const MAX_FILE_SIZE = 512 * 1024 ** 2 // 512 MiB
+
+function styledBy(property: string, mapping: { [key: string]: string }) {
+  return (props: { [key: string]: string }) => mapping[props[property]]
+}
+
+// @ts-expect-error
+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,
+    borderColor: styledBy('isDragActive', {
+      true: theme.palette.secondary.light,
+      false: theme.palette.divider,
+    }),
+    borderStyle: 'dashed',
+    backgroundColor: styledBy('isDragActive', {
+      true: alpha(
+        theme.palette.text.primary,
+        theme.palette.action.hoverOpacity,
+      ),
+      false: theme.palette.background.default,
+    }),
+    outline: 'none',
+    transition: 'border .24s ease-in-out',
+    '&:focus': {
+      borderColor: theme.palette.secondary.light,
+    },
+  },
+  uploadIcon: {
+    color: theme.palette.text.secondary,
+  },
+}))
+
+function ImportSession({ model }: { model: IAnyStateTreeNode }) {
+  const [error, setError] = useState<unknown>()
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    // @ts-expect-error
+    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(', ')}`,
+          )
+        } else {
+          const sessionText = await acceptedFiles[0].text()
+          getSession(model).setSession(JSON.parse(sessionText).session)
+        }
+      } catch (e) {
+        console.error(e)
+        setError(e)
+      }
+    },
+  })
+
+  // @ts-expect-error
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { classes } = useStyles({ isDragActive }) as any
+
+  return (
+    <div className={classes.root}>
+      <Paper className={classes.paper}>
+        <div {...getRootProps({ className: classes.dropZone })}>
+          <input {...getInputProps()} />
+          <CloudUploadIcon className={classes.uploadIcon} fontSize="large" />
+          <Typography color="textSecondary" align="center" variant="body1">
+            Drag and drop files here
+          </Typography>
+          <Typography color="textSecondary" align="center" variant="body2">
+            or
+          </Typography>
+          <Button color="primary" variant="contained">
+            Browse Files
+          </Button>
+        </div>
+      </Paper>
+      {error ? <ImportError error={error} /> : null}
+    </div>
+  )
+}
+
+export default observer(ImportSession)

package/src/ImportSessionWidget/index.ts

@@ -0,0 +1,10 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { ElementId } from '@jbrowse/core/util/types/mst'
+import { types } from 'mobx-state-tree'
+
+export const configSchema = ConfigurationSchema('ImportSessionWidget', {})
+
+export const stateModel = types.model('ImportSessionWidget', {
+  id: ElementId,
+  type: types.literal('ImportSessionWidget'),
+})

package/src/SessionManager/components/DeleteDialog.tsx

@@ -0,0 +1,41 @@
+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,
+}: {
+  sessionNameToDelete: string
+  open: boolean
+  handleClose: (arg?: boolean) => void
+}) {
+  return (
+    <Dialog
+      open={open}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+      title={`Delete session "${sessionNameToDelete}"?`}
+    >
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          This action cannot be undone
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => handleClose()} color="primary">
+          Cancel
+        </Button>
+        <Button onClick={() => handleClose(true)} color="primary" autoFocus>
+          Delete
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

package/src/SessionManager/components/SessionManager.test.tsx

@@ -0,0 +1,14 @@
+import { createTestSession } from '@jbrowse/web/src/rootModel'
+
+import React from 'react'
+import { render } from '@testing-library/react'
+import SessionManager from './SessionManager'
+jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
+
+describe('<SessionManager />', () => {
+  it('renders', () => {
+    const session = createTestSession()
+    const { container } = render(<SessionManager session={session} />)
+    expect(container.firstChild).toMatchSnapshot()
+  })
+})

package/src/SessionManager/components/SessionManager.tsx

@@ -0,0 +1,166 @@
+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 { observer } from 'mobx-react'
+import pluralize from 'pluralize'
+import { AbstractSessionModel } from '@jbrowse/core/util'
+
+// 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),
+  },
+}))
+
+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
+}
+
+const AutosaveEntry = observer(({ session }: { session: SessionModel }) => {
+  const { classes } = useStyles()
+  const autosavedSession = JSON.parse(
+    localStorage.getItem(session.previousAutosaveId) || '{}',
+  ).session as SessionSnap
+
+  const { views = [] } = autosavedSession || {}
+  const totalTracks = views
+    .map(view => view.tracks.length)
+    .reduce((a, b) => a + b, 0)
+
+  return autosavedSession ? (
+    <Paper className={classes.root}>
+      <List subheader={<ListSubheader>Previous autosaved entry</ListSubheader>}>
+        <ListItem button onClick={() => session.loadAutosaveSession()}>
+          <ListItemIcon>
+            <ViewListIcon />
+          </ListItemIcon>
+          <ListItemText
+            primary={autosavedSession.name}
+            secondary={
+              session.name === autosavedSession.name
+                ? 'Currently open'
+                : `${views.length} ${pluralize(
+                    'view',
+                    views.length,
+                  )}; ${totalTracks}
+                           open ${pluralize('track', totalTracks)}`
+            }
+          />
+        </ListItem>
+      </List>
+    </Paper>
+  ) : null
+})
+
+const SessionManager = observer(({ session }: { session: SessionModel }) => {
+  const { classes } = useStyles()
+  const [sessionIndexToDelete, setSessionIndexToDelete] = useState<number>()
+  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
+      : ''
+
+  return (
+    <>
+      <AutosaveEntry session={session} />
+      <Paper className={classes.root}>
+        <List subheader={<ListSubheader>Saved sessions</ListSubheader>}>
+          {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 (
+                <ListItem
+                  button
+                  disabled={session.name === sessionSnapshot.name}
+                  onClick={() => session.activateSession(sessionSnapshot.name)}
+                  key={sessionSnapshot.name}
+                >
+                  <ListItemIcon>
+                    <ViewListIcon />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary={sessionSnapshot.name}
+                    secondary={
+                      session.name === sessionSnapshot.name
+                        ? 'Currently open'
+                        : `${views.length} ${pluralize(
+                            'view',
+                            views.length,
+                          )}; ${totalTracks}
+                           open ${pluralize('track', totalTracks)}`
+                    }
+                  />
+                  <ListItemSecondaryAction>
+                    <IconButton
+                      edge="end"
+                      disabled={session.name === sessionSnapshot.name}
+                      aria-label="Delete"
+                      onClick={() => {
+                        setSessionIndexToDelete(idx)
+                        setOpen(true)
+                      }}
+                    >
+                      <DeleteIcon />
+                    </IconButton>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              )
+            })
+          ) : (
+            <Typography className={classes.message}>
+              No saved sessions found
+            </Typography>
+          )}
+        </List>
+      </Paper>
+      <DeleteDialog
+        open={open}
+        sessionNameToDelete={sessionNameToDelete}
+        handleClose={handleDialogClose}
+      />
+    </>
+  )
+})
+
+export default SessionManager

package/src/SessionManager/components/__snapshots__/SessionManager.test.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SessionManager /> renders 1`] = `
+<div
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1l9cidk-MuiPaper-root-root"
+>
+  <ul
+    class="MuiList-root MuiList-padding MuiList-subheader css-p64g7a-MuiList-root"
+  >
+    <li
+      class="MuiListSubheader-root MuiListSubheader-gutters MuiListSubheader-sticky css-uob957-MuiListSubheader-root"
+    >
+      Saved sessions
+    </li>
+    <p
+      class="MuiTypography-root MuiTypography-body1 css-g9z2qm-MuiTypography-root-message"
+    >
+      No saved sessions found
+    </p>
+  </ul>
+</div>
+`;

package/src/SessionManager/index.ts

@@ -0,0 +1,10 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { ElementId } from '@jbrowse/core/util/types/mst'
+import { types } from 'mobx-state-tree'
+
+export const configSchema = ConfigurationSchema('SessionManager', {})
+
+export const stateModel = types.model('SessionManager', {
+  id: ElementId,
+  type: types.literal('SessionManager'),
+})

package/src/index.test.ts

@@ -0,0 +1,12 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import ThisPlugin from '.'
+
+test("won't add if already added", () => {
+  const pluginManager = new PluginManager([new ThisPlugin()])
+  pluginManager.createPluggableElements()
+  pluginManager.configure()
+
+  expect(() => pluginManager.addPlugin(new ThisPlugin())).toThrow(
+    /JBrowse already configured, cannot add plugins/,
+  )
+})

package/src/index.ts

@@ -0,0 +1,100 @@
+import { lazy } from 'react'
+import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType'
+import Plugin from '@jbrowse/core/Plugin'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { SessionWithWidgets, isAbstractMenuManager } from '@jbrowse/core/util'
+
+import HelpIcon from '@mui/icons-material/Help'
+import InfoIcon from '@mui/icons-material/Info'
+
+import {
+  configSchema as aboutConfigSchema,
+  stateModel as aboutStateModel,
+} from './AboutWidget'
+import {
+  configSchema as helpConfigSchema,
+  stateModel as helpStateModel,
+} from './HelpWidget'
+import {
+  configSchema as importSessionConfigSchema,
+  stateModel as importSessionStateModel,
+} from './ImportSessionWidget'
+import {
+  configSchema as sessionManagerConfigSchema,
+  stateModel as sessionManagerStateModel,
+} from './SessionManager'
+
+export default class extends Plugin {
+  name = 'MenusPlugin'
+
+  install(pluginManager: PluginManager) {
+    pluginManager.addWidgetType(() => {
+      return new WidgetType({
+        name: 'AboutWidget',
+        heading: 'About',
+        configSchema: aboutConfigSchema,
+        stateModel: aboutStateModel,
+        ReactComponent: lazy(
+          () => import('./AboutWidget/components/AboutWidget'),
+        ),
+      })
+    })
+
+    pluginManager.addWidgetType(() => {
+      return new WidgetType({
+        name: 'HelpWidget',
+        heading: 'Help',
+        configSchema: helpConfigSchema,
+        stateModel: helpStateModel,
+        ReactComponent: lazy(
+          () => import('./HelpWidget/components/HelpWidget'),
+        ),
+      })
+    })
+
+    pluginManager.addWidgetType(() => {
+      return new WidgetType({
+        name: 'ImportSessionWidget',
+        heading: 'Import session',
+        configSchema: importSessionConfigSchema,
+        stateModel: importSessionStateModel,
+        ReactComponent: lazy(
+          () => import('./ImportSessionWidget/components/ImportSessionWidget'),
+        ),
+      })
+    })
+
+    pluginManager.addWidgetType(() => {
+      return new WidgetType({
+        name: 'SessionManager',
+        heading: 'Sessions',
+        configSchema: sessionManagerConfigSchema,
+        stateModel: sessionManagerStateModel,
+        ReactComponent: lazy(
+          () => import('./SessionManager/components/SessionManager'),
+        ),
+      })
+    })
+  }
+
+  configure(pluginManager: PluginManager) {
+    if (isAbstractMenuManager(pluginManager.rootModel)) {
+      pluginManager.rootModel.appendToMenu('Help', {
+        label: 'About',
+        icon: InfoIcon,
+        onClick: (session: SessionWithWidgets) => {
+          const widget = session.addWidget('AboutWidget', 'aboutWidget')
+          session.showWidget(widget)
+        },
+      })
+      pluginManager.rootModel.appendToMenu('Help', {
+        label: 'Help',
+        icon: HelpIcon,
+        onClick: (session: SessionWithWidgets) => {
+          const widget = session.addWidget('HelpWidget', 'helpWidget')
+          session.showWidget(widget)
+        },
+      })
+    }
+  }
+}