@jbrowse/app-core 2.6.1 → 2.6.2

package/src/ui/App/App.tsx

@@ -1,117 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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)

package/src/ui/App/DrawerWidget.tsx

@@ -1,238 +0,0 @@
-import React, { Suspense, useState } from 'react'
-import { ErrorBoundary } from 'react-error-boundary'
-import {
-  AppBar,
-  FormControl,
-  IconButton,
-  Menu,
-  MenuItem,
-  Select,
-  Toolbar,
-  Tooltip,
-  Typography,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { getEnv } from '@jbrowse/core/util'
-import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses'
-import ErrorMessage from '@jbrowse/core/ui/ErrorMessage'
-import { SessionWithDrawerWidgets } from '@jbrowse/core/util/types'
-
-// icons
-import DeleteIcon from '@mui/icons-material/Delete'
-import CloseIcon from '@mui/icons-material/Close'
-import MinimizeIcon from '@mui/icons-material/Minimize'
-import MoreVertIcon from '@mui/icons-material/MoreVert'
-
-// locals
-import Drawer from './Drawer'
-
-const useStyles = makeStyles()(theme => ({
-  formControl: {
-    margin: 0,
-  },
-  spacer: {
-    flexGrow: 1,
-  },
-  drawerSelect: {
-    margin: 0,
-    color: theme.palette.secondary.contrastText,
-  },
-
-  dropDownIcon: {
-    color: theme.palette.secondary.contrastText,
-  },
-  header: {
-    background: theme.palette.secondary.main,
-  },
-}))
-
-const DrawerHeader = observer(function ({
-  session,
-  setToolbarHeight,
-}: {
-  session: SessionWithDrawerWidgets
-  setToolbarHeight: (arg: number) => void
-}) {
-  const { pluginManager } = getEnv(session)
-  const { visibleWidget, activeWidgets, drawerPosition } = session
-  const { classes } = useStyles()
-
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-
-  return (
-    <AppBar
-      position="sticky"
-      className={classes.header}
-      ref={ref => setToolbarHeight(ref?.getBoundingClientRect().height || 0)}
-    >
-      <Toolbar disableGutters>
-        <FormControl className={classes.formControl}>
-          <Select
-            value={visibleWidget?.id}
-            data-testid="widget-drawer-selects"
-            className={classes.drawerSelect}
-            classes={{ icon: classes.dropDownIcon }}
-            renderValue={widgetId => {
-              const widget = session.activeWidgets.get(widgetId)
-              if (!widget) {
-                return (
-                  <Typography variant="h6" color="inherit">
-                    Unknown widget
-                  </Typography>
-                )
-              }
-              const widgetType = pluginManager.getWidgetType(widget.type)
-              const { HeadingComponent, heading } = widgetType
-              return HeadingComponent ? (
-                <HeadingComponent model={widget} />
-              ) : (
-                <Typography variant="h6" color="inherit">
-                  {heading}
-                </Typography>
-              )
-            }}
-            onChange={e => {
-              const w = session.activeWidgets.get(e.target.value)
-              if (w) {
-                session.showWidget(w)
-              } else {
-                session.notify(`Widget not found ${e.target.value}`, 'warning')
-              }
-            }}
-          >
-            {[...activeWidgets.values()].map(widget => {
-              const widgetType = pluginManager.getWidgetType(widget.type)
-              const { HeadingComponent, heading } = widgetType
-              return (
-                <MenuItem
-                  data-testid={`widget-drawer-selects-item-${widget.type}`}
-                  key={widget.id}
-                  value={widget.id}
-                >
-                  {HeadingComponent ? (
-                    <HeadingComponent model={widget} />
-                  ) : (
-                    <Typography variant="h6" color="inherit">
-                      {heading}
-                    </Typography>
-                  )}
-                  <IconButton
-                    data-testid={`${widget.type}-drawer-delete`}
-                    color="inherit"
-                    aria-label="Delete"
-                    onClick={() => session.hideWidget(widget)}
-                  >
-                    <DeleteIcon />
-                  </IconButton>
-                </MenuItem>
-              )
-            })}
-          </Select>
-        </FormControl>
-        <div className={classes.spacer} />
-        <div>
-          <IconButton
-            data-testid="drawer-close"
-            color="inherit"
-            onClick={event => setAnchorEl(event.currentTarget)}
-          >
-            <MoreVertIcon />
-          </IconButton>
-          <Tooltip title="Minimize drawer">
-            <IconButton
-              data-testid="drawer-minimize"
-              color="inherit"
-              onClick={() => {
-                session.notify(
-                  `Drawer minimized, click button on ${drawerPosition} side of screen to re-open`,
-                  'info',
-                )
-                session.minimizeWidgetDrawer()
-              }}
-            >
-              <MinimizeIcon />
-            </IconButton>
-          </Tooltip>
-          <Tooltip title="Close drawer">
-            <IconButton
-              data-testid="drawer-close"
-              color="inherit"
-              onClick={() => session.hideWidget(visibleWidget)}
-            >
-              <CloseIcon />
-            </IconButton>
-          </Tooltip>
-        </div>
-      </Toolbar>
-      <Menu
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={() => setAnchorEl(null)}
-      >
-        {['left', 'right'].map(option => (
-          <MenuItem
-            key={option}
-            selected={drawerPosition === 'option'}
-            onClick={() => {
-              session.setDrawerPosition(option)
-              setAnchorEl(null)
-            }}
-          >
-            {option}
-          </MenuItem>
-        ))}
-      </Menu>
-    </AppBar>
-  )
-})
-
-const DrawerWidget = observer(function ({
-  session,
-}: {
-  session: SessionWithDrawerWidgets
-}) {
-  const { visibleWidget } = session
-  const { pluginManager } = getEnv(session)
-
-  const DrawerComponent = visibleWidget
-    ? (pluginManager.evaluateExtensionPoint(
-        'Core-replaceWidget',
-        pluginManager.getWidgetType(visibleWidget.type).ReactComponent,
-        {
-          session,
-          model: visibleWidget,
-        },
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ) as React.FC<any>)
-    : null
-
-  // we track the toolbar height because components that use virtualized
-  // height want to be able to fill the contained, minus the toolbar height
-  // (the position static/sticky is included in AutoSizer estimates)
-  const [toolbarHeight, setToolbarHeight] = useState(0)
-
-  return (
-    <Drawer session={session}>
-      <DrawerHeader session={session} setToolbarHeight={setToolbarHeight} />
-      <Suspense fallback={<LoadingEllipses />}>
-        <ErrorBoundary
-          FallbackComponent={({ error }) => <ErrorMessage error={error} />}
-        >
-          {DrawerComponent ? (
-            <>
-              <DrawerComponent
-                model={visibleWidget}
-                session={session}
-                toolbarHeight={toolbarHeight}
-              />
-              <div style={{ height: 300 }} />
-            </>
-          ) : null}
-        </ErrorBoundary>
-      </Suspense>
-    </Drawer>
-  )
-})
-
-export default DrawerWidget

package/src/ui/App/ViewContainer.tsx

@@ -1,76 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { IconButton, Paper, useTheme } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { useWidthSetter } from '@jbrowse/core/util'
-import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models'
-
-// icons
-import CloseIcon from '@mui/icons-material/Close'
-import MinimizeIcon from '@mui/icons-material/Minimize'
-import AddIcon from '@mui/icons-material/Add'
-
-// locals
-import ViewMenu from './ViewMenu'
-import ViewContainerTitle from './ViewContainerTitle'
-
-const useStyles = makeStyles()(theme => ({
-  viewContainer: {
-    overflow: 'hidden',
-    background: theme.palette.secondary.main,
-    margin: theme.spacing(0.5),
-    padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
-  },
-  icon: {
-    color: theme.palette.secondary.contrastText,
-  },
-  grow: {
-    flexGrow: 1,
-  },
-}))
-
-export default observer(function ({
-  view,
-  onClose,
-  onMinimize,
-  children,
-}: {
-  view: IBaseViewModel
-  onClose: () => void
-  onMinimize: () => void
-  children: React.ReactNode
-}) {
-  const { classes } = useStyles()
-  const theme = useTheme()
-  const ref = useWidthSetter(view, theme.spacing(1))
-  const scrollRef = useRef<HTMLDivElement>(null)
-
-  // scroll the view into view when first mounted. note: this effect will run
-  // only once, because of the empty array second param
-  useEffect(() => {
-    scrollRef.current?.scrollIntoView?.({ block: 'center' })
-  }, [])
-
-  return (
-    <Paper ref={ref} elevation={12} className={classes.viewContainer}>
-      <div ref={scrollRef} style={{ display: 'flex' }}>
-        <ViewMenu model={view} IconProps={{ className: classes.icon }} />
-        <div className={classes.grow} />
-
-        <ViewContainerTitle view={view} />
-        <div className={classes.grow} />
-        <IconButton data-testid="minimize_view" onClick={onMinimize}>
-          {view.minimized ? (
-            <AddIcon className={classes.icon} fontSize="small" />
-          ) : (
-            <MinimizeIcon className={classes.icon} fontSize="small" />
-          )}
-        </IconButton>
-        <IconButton data-testid="close_view" onClick={onClose}>
-          <CloseIcon className={classes.icon} fontSize="small" />
-        </IconButton>
-      </div>
-      <Paper>{children}</Paper>
-    </Paper>
-  )
-})

package/src/ui/App/ViewContainerTitle.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import { Tooltip } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-
-// locals
-import EditableTypography from '@jbrowse/core/ui/EditableTypography'
-import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes'
-
-const useStyles = makeStyles()(theme => ({
-  input: {
-    paddingBottom: 0,
-    paddingTop: 2,
-  },
-  inputBase: {
-    color: theme.palette.secondary.contrastText,
-  },
-  inputRoot: {
-    '&:hover': {
-      backgroundColor: theme.palette.secondary.light,
-    },
-  },
-  inputFocused: {
-    borderColor: theme.palette.primary.main,
-    backgroundColor: theme.palette.secondary.light,
-  },
-}))
-export default observer(function ViewContainerTitle({
-  view,
-}: {
-  view: IBaseViewModel
-}) {
-  const { classes } = useStyles()
-  return (
-    <Tooltip title="Rename view" arrow>
-      <EditableTypography
-        value={
-          view.displayName ||
-          // @ts-expect-error
-          `${view.assemblyNames?.join(',') || 'Untitled view'}${
-            view.minimized ? ' (minimized)' : ''
-          }`
-        }
-        setValue={val => view.setDisplayName(val)}
-        variant="body2"
-        classes={{
-          input: classes.input,
-          inputBase: classes.inputBase,
-          inputRoot: classes.inputRoot,
-          inputFocused: classes.inputFocused,
-        }}
-      />
-    </Tooltip>
-  )
-})