@jbrowse/app-core 2.6.1

package/src/RootMenu/index.ts

@@ -0,0 +1,157 @@
+import { MenuItem } from '@jbrowse/core/ui/Menu'
+import { types } from 'mobx-state-tree'
+
+export interface Menu {
+  label: string
+  menuItems: MenuItem[]
+}
+export function RootAppMenuMixin() {
+  return types.model({}).actions(s => {
+    const self = s as { menus: Menu[] }
+    return {
+      /**
+       * #action
+       */
+      setMenus(newMenus: Menu[]) {
+        self.menus = newMenus
+      },
+      /**
+       * #action
+       * Add a top-level menu
+       * @param menuName - Name of the menu to insert.
+       * @returns The new length of the top-level menus array
+       */
+      appendMenu(menuName: string) {
+        return self.menus.push({ label: menuName, menuItems: [] })
+      },
+      /**
+       * #action
+       * Insert a top-level menu
+       * @param menuName - Name of the menu to insert.
+       * @param position - Position to insert menu. If negative, counts from th
+       * end, e.g. `insertMenu('My Menu', -1)` will insert the menu as the
+       * second-to-last one.
+       * @returns The new length of the top-level menus array
+       */
+      insertMenu(menuName: string, position: number) {
+        self.menus.splice(
+          (position < 0 ? self.menus.length : 0) + position,
+          0,
+          {
+            label: menuName,
+            menuItems: [],
+          },
+        )
+        return self.menus.length
+      },
+      /**
+       * #action
+       * Add a menu item to a top-level menu
+       * @param menuName - Name of the top-level menu to append to.
+       * @param menuItem - Menu item to append.
+       * @returns The new length of the menu
+       */
+      appendToMenu(menuName: string, menuItem: MenuItem) {
+        const menu = self.menus.find(m => m.label === menuName)
+        if (!menu) {
+          self.menus.push({ label: menuName, menuItems: [menuItem] })
+          return 1
+        }
+        return menu.menuItems.push(menuItem)
+      },
+      /**
+       * #action
+       * Insert a menu item into a top-level menu
+       * @param menuName - Name of the top-level menu to insert into
+       * @param menuItem - Menu item to insert
+       * @param position - Position to insert menu item. If negative, counts
+       * from the end, e.g. `insertMenu('My Menu', -1)` will insert the menu as
+       * the second-to-last one.
+       * @returns The new length of the menu
+       */
+      insertInMenu(menuName: string, menuItem: MenuItem, position: number) {
+        const menu = self.menus.find(m => m.label === menuName)
+        if (!menu) {
+          self.menus.push({ label: menuName, menuItems: [menuItem] })
+          return 1
+        }
+        const insertPosition =
+          position < 0 ? menu.menuItems.length + position : position
+        menu.menuItems.splice(insertPosition, 0, menuItem)
+        return menu.menuItems.length
+      },
+      /**
+       * #action
+       * Add a menu item to a sub-menu
+       * @param menuPath - Path to the sub-menu to add to, starting with the
+       * top-level menu (e.g. `['File', 'Insert']`).
+       * @param menuItem - Menu item to append.
+       * @returns The new length of the sub-menu
+       */
+      appendToSubMenu(menuPath: string[], menuItem: MenuItem) {
+        let topMenu = self.menus.find(m => m.label === menuPath[0])
+        if (!topMenu) {
+          const idx = this.appendMenu(menuPath[0])
+          topMenu = self.menus[idx - 1]
+        }
+        let { menuItems: subMenu } = topMenu
+        const pathSoFar = [menuPath[0]]
+        menuPath.slice(1).forEach(menuName => {
+          pathSoFar.push(menuName)
+          let sm = subMenu.find(mi => 'label' in mi && mi.label === menuName)
+          if (!sm) {
+            const idx = subMenu.push({ label: menuName, subMenu: [] })
+            sm = subMenu[idx - 1]
+          }
+          if (!('subMenu' in sm)) {
+            throw new Error(
+              `"${menuName}" in path "${pathSoFar}" is not a subMenu`,
+            )
+          }
+          subMenu = sm.subMenu
+        })
+        return subMenu.push(menuItem)
+      },
+      /**
+       * #action
+       * Insert a menu item into a sub-menu
+       * @param menuPath - Path to the sub-menu to add to, starting with the
+       * top-level menu (e.g. `['File', 'Insert']`).
+       * @param menuItem - Menu item to insert.
+       * @param position - Position to insert menu item. If negative, counts
+       * from the end, e.g. `insertMenu('My Menu', -1)` will insert the menu as
+       * the second-to-last one.
+       * @returns The new length of the sub-menu
+       */
+      insertInSubMenu(
+        menuPath: string[],
+        menuItem: MenuItem,
+        position: number,
+      ) {
+        let topMenu = self.menus.find(m => m.label === menuPath[0])
+        if (!topMenu) {
+          const idx = this.appendMenu(menuPath[0])
+          topMenu = self.menus[idx - 1]
+        }
+        let { menuItems: subMenu } = topMenu
+        const pathSoFar = [menuPath[0]]
+        menuPath.slice(1).forEach(menuName => {
+          pathSoFar.push(menuName)
+          let sm = subMenu.find(mi => 'label' in mi && mi.label === menuName)
+          if (!sm) {
+            const idx = subMenu.push({ label: menuName, subMenu: [] })
+            sm = subMenu[idx - 1]
+          }
+          if (!('subMenu' in sm)) {
+            throw new Error(
+              `"${menuName}" in path "${pathSoFar}" is not a subMenu`,
+            )
+          }
+          subMenu = sm.subMenu
+        })
+        subMenu.splice(position, 0, menuItem)
+        return subMenu.length
+      },
+    }
+  })
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './ui'
+export * from './HistoryManagement'
+export * from './JBrowseConfig'
+export * from './JBrowseModel'
+export * from './Assemblies'
+export * from './RootMenu'

package/src/ui/App/App.tsx

@@ -0,0 +1,117 @@
+import React, { Suspense, lazy } from 'react'
+import { AppBar } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { SessionWithDrawerWidgets } from '@jbrowse/core/util'
+import Snackbar from '@jbrowse/core/ui/Snackbar'
+import { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel'
+import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu'
+
+// locals
+import AppToolbar from './AppToolbar'
+import ViewLauncher from './ViewLauncher'
+import ViewPanel from './ViewPanel'
+import DialogQueue from './DialogQueue'
+import AppFab from './AppFab'
+
+const DrawerWidget = lazy(() => import('./DrawerWidget'))
+
+const useStyles = makeStyles()(theme => ({
+  root: {
+    display: 'grid',
+    height: '100vh',
+    width: '100%',
+    colorScheme: theme.palette.mode,
+  },
+  appContainer: {
+    gridColumn: 'main',
+    display: 'grid',
+    gridTemplateRows: '[menubar] min-content [components] auto',
+    height: '100vh',
+  },
+  viewContainer: {
+    overflowY: 'auto',
+    gridRow: 'components',
+  },
+  appBar: {
+    flexGrow: 1,
+    gridRow: 'menubar',
+  },
+}))
+
+type Props = {
+  HeaderButtons?: React.ReactElement
+  session: SessionWithDrawerWidgets & {
+    savedSessionNames: string[]
+    menus: { label: string; menuItems: JBMenuItem[] }[]
+    renameCurrentSession: (arg: string) => void
+    snackbarMessages: SnackbarMessage[]
+    popSnackbarMessage: () => unknown
+  }
+}
+
+const LazyDrawerWidget = observer(function (props: Props) {
+  const { session } = props
+  return (
+    <Suspense fallback={<React.Fragment />}>
+      <DrawerWidget session={session} />
+    </Suspense>
+  )
+})
+
+const ViewContainer = observer(function (props: Props) {
+  const { session } = props
+  const { views } = session
+  const { classes } = useStyles()
+  return (
+    <div className={classes.viewContainer}>
+      {views.length > 0 ? (
+        views.map(view => (
+          <ViewPanel key={`view-${view.id}`} view={view} session={session} />
+        ))
+      ) : (
+        <ViewLauncher {...props} />
+      )}
+
+      {/* blank space at the bottom of screen allows scroll */}
+      <div style={{ height: 300 }} />
+    </div>
+  )
+})
+
+const App = observer(function (props: Props) {
+  const { session } = props
+  const { classes } = useStyles()
+  const { minimized, visibleWidget, drawerWidth, drawerPosition } = session
+  const drawerVisible = visibleWidget && !minimized
+  const d = drawerVisible ? `[drawer] ${drawerWidth}px` : undefined
+  const grid =
+    drawerPosition === 'right' ? ['[main] 1fr', d] : [d, '[main] 1fr']
+
+  return (
+    <div
+      className={classes.root}
+      style={{ gridTemplateColumns: grid?.filter(f => !!f).join(' ') }}
+    >
+      {drawerVisible && drawerPosition === 'left' ? (
+        <LazyDrawerWidget session={session} />
+      ) : null}
+      <DialogQueue session={session} />
+      <div className={classes.appContainer}>
+        <AppBar className={classes.appBar} position="static">
+          <AppToolbar {...props} />
+        </AppBar>
+        <ViewContainer {...props} />
+      </div>
+      <AppFab session={session} />
+
+      {drawerVisible && drawerPosition === 'right' ? (
+        <LazyDrawerWidget session={session} />
+      ) : null}
+
+      <Snackbar session={session} />
+    </div>
+  )
+})
+
+export { App }

package/src/ui/App/AppFab.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Fab, Tooltip } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { SessionWithDrawerWidgets } from '@jbrowse/core/util'
+
+// icons
+import LaunchIcon from '@mui/icons-material/Launch'
+
+const useStyles = makeStyles()(theme => ({
+  left: {
+    zIndex: 10000,
+    position: 'fixed',
+    bottom: theme.spacing(2),
+    left: theme.spacing(2),
+  },
+  right: {
+    zIndex: 10000,
+    position: 'fixed',
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
+  },
+}))
+
+export default observer(function AppFab({
+  session,
+}: {
+  session: SessionWithDrawerWidgets
+}) {
+  const { minimized, activeWidgets, drawerPosition } = session
+  const { classes } = useStyles()
+
+  return activeWidgets.size > 0 && minimized ? (
+    <Tooltip title="Open drawer widget">
+      <Fab
+        className={drawerPosition === 'right' ? classes.right : classes.left}
+        color="primary"
+        data-testid="drawer-maximize"
+        onClick={() => session.showWidgetDrawer()}
+      >
+        <LaunchIcon />
+      </Fab>
+    </Tooltip>
+  ) : null
+})

package/src/ui/App/AppToolbar.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { Toolbar, Tooltip } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { SessionWithDrawerWidgets } from '@jbrowse/core/util'
+import DropDownMenu from '@jbrowse/core/ui/DropDownMenu'
+import EditableTypography from '@jbrowse/core/ui/EditableTypography'
+import AppLogo from '@jbrowse/core/ui/AppLogo'
+import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu'
+import { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel'
+
+const useStyles = makeStyles()(theme => ({
+  grow: {
+    flexGrow: 1,
+  },
+  inputBase: {
+    color: theme.palette.primary.contrastText,
+  },
+  inputRoot: {
+    '&:hover': {
+      backgroundColor: theme.palette.primary.light,
+    },
+  },
+  inputFocused: {
+    borderColor: theme.palette.secondary.main,
+    backgroundColor: theme.palette.primary.light,
+  },
+}))
+
+type AppSession = SessionWithDrawerWidgets & {
+  savedSessionNames: string[]
+  menus: { label: string; menuItems: JBMenuItem[] }[]
+  renameCurrentSession: (arg: string) => void
+  snackbarMessages: SnackbarMessage[]
+  popSnackbarMessage: () => unknown
+}
+
+const AppToolbar = observer(function ({
+  session,
+  HeaderButtons = <div />,
+}: {
+  HeaderButtons?: React.ReactElement
+  session: AppSession
+}) {
+  const { classes } = useStyles()
+  const { savedSessionNames, name, menus } = session
+
+  return (
+    <Toolbar>
+      {menus.map(menu => (
+        <DropDownMenu
+          key={menu.label}
+          menuTitle={menu.label}
+          menuItems={menu.menuItems}
+          session={session}
+        />
+      ))}
+      <div className={classes.grow} />
+      <Tooltip title="Rename Session" arrow>
+        <EditableTypography
+          value={name}
+          setValue={newName => {
+            if (savedSessionNames?.includes(newName)) {
+              session.notify(
+                `Cannot rename session to "${newName}", a saved session with that name already exists`,
+                'warning',
+              )
+            } else {
+              session.renameCurrentSession(newName)
+            }
+          }}
+          variant="body1"
+          classes={{
+            inputBase: classes.inputBase,
+            inputRoot: classes.inputRoot,
+            inputFocused: classes.inputFocused,
+          }}
+        />
+      </Tooltip>
+      {HeaderButtons}
+      <div className={classes.grow} />
+      <div style={{ width: 150, maxHeight: 48 }}>
+        <AppLogo session={session} />
+      </div>
+    </Toolbar>
+  )
+})
+
+export default AppToolbar

package/src/ui/App/DialogQueue.tsx

@@ -0,0 +1,22 @@
+import React, { Suspense } from 'react'
+import { observer } from 'mobx-react'
+
+// locals
+import { SessionWithDrawerWidgets } from '@jbrowse/core/util'
+
+export default observer(function ({
+  session,
+}: {
+  session: SessionWithDrawerWidgets
+}) {
+  const { DialogComponent, DialogProps } = session
+  return (
+    <>
+      {DialogComponent ? (
+        <Suspense fallback={<React.Fragment />}>
+          <DialogComponent {...DialogProps} />
+        </Suspense>
+      ) : null}
+    </>
+  )
+})

package/src/ui/App/Drawer.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Paper } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import ResizeHandle from '@jbrowse/core/ui/ResizeHandle'
+import { SessionWithDrawerWidgets } from '@jbrowse/core/util/types'
+
+const useStyles = makeStyles()(theme => ({
+  paper: {
+    overflowY: 'auto',
+    height: '100%',
+    zIndex: theme.zIndex.drawer,
+    outline: 'none',
+    background: theme.palette.background.default,
+  },
+  resizeHandle: {
+    width: 4,
+    position: 'fixed',
+    top: 0,
+    zIndex: theme.zIndex.drawer + 1,
+  },
+}))
+
+function Drawer({
+  children,
+  session,
+}: {
+  children: React.ReactNode
+  session: SessionWithDrawerWidgets
+}) {
+  const { drawerPosition, drawerWidth } = session
+  const { classes } = useStyles()
+
+  return (
+    <Paper className={classes.paper} elevation={16} square>
+      {drawerPosition === 'right' ? (
+        <ResizeHandle
+          onDrag={session.resizeDrawer}
+          className={classes.resizeHandle}
+          vertical
+        />
+      ) : null}
+      {children}
+      {drawerPosition === 'left' ? (
+        <ResizeHandle
+          onDrag={session.resizeDrawer}
+          className={classes.resizeHandle}
+          style={{ left: drawerWidth }}
+          vertical
+        />
+      ) : null}
+    </Paper>
+  )
+}
+
+export default observer(Drawer)