@jbrowse/app-core 2.6.1 → 2.6.3

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>
-  )
-})

package/src/ui/App/ViewLauncher.tsx

@@ -1,64 +0,0 @@
-import React, { useState } from 'react'
-import {
-  Button,
-  FormControl,
-  MenuItem,
-  Paper,
-  Select,
-  Typography,
-} from '@mui/material'
-import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
-
-// locals
-import { getEnv, SessionWithDrawerWidgets } from '@jbrowse/core/util'
-
-// ui elements
-import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu'
-import { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel'
-
-type AppSession = SessionWithDrawerWidgets & {
-  savedSessionNames: string[]
-  menus: { label: string; menuItems: JBMenuItem[] }[]
-  renameCurrentSession: (arg: string) => void
-  snackbarMessages: SnackbarMessage[]
-  popSnackbarMessage: () => unknown
-}
-
-const useStyles = makeStyles()(theme => ({
-  selectPaper: {
-    padding: theme.spacing(4),
-  },
-}))
-
-const ViewLauncher = observer(({ session }: { session: AppSession }) => {
-  const { classes } = useStyles()
-  const { pluginManager } = getEnv(session)
-  const viewTypes = pluginManager.getElementTypeRecord('view').all()
-  const [value, setValue] = useState(viewTypes[0]?.name)
-  return (
-    <Paper className={classes.selectPaper}>
-      <Typography>Select a view to launch</Typography>
-      <FormControl style={{ margin: 2 }}>
-        <Select value={value} onChange={event => setValue(event.target.value)}>
-          {viewTypes.map(({ displayName, name }) => (
-            <MenuItem key={name} value={name}>
-              {displayName}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-      <FormControl style={{ margin: 2 }}>
-        <Button
-          onClick={() => session.addView(value, {})}
-          variant="contained"
-          color="primary"
-        >
-          Launch view
-        </Button>
-      </FormControl>
-    </Paper>
-  )
-})
-
-export default ViewLauncher

package/src/ui/App/ViewMenu.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-import {
-  SvgIconProps,
-  IconButtonProps as IconButtonPropsType,
-} from '@mui/material'
-import { observer } from 'mobx-react'
-import { getSession } from '@jbrowse/core/util'
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models'
-
-// icons
-import MenuIcon from '@mui/icons-material/Menu'
-import ArrowDownward from '@mui/icons-material/ArrowDownward'
-import ArrowUpward from '@mui/icons-material/ArrowUpward'
-
-const ViewMenu = observer(function ({
-  model,
-  IconButtonProps,
-  IconProps,
-}: {
-  model: IBaseViewModel
-  IconButtonProps?: IconButtonPropsType
-  IconProps: SvgIconProps
-}) {
-  const { menuItems } = model
-  const session = getSession(model)
-
-  const items = [
-    ...(session.views.length > 1
-      ? [
-          {
-            label: 'Move view up',
-            icon: ArrowUpward,
-            onClick: () => session.moveViewUp(model.id),
-          },
-          {
-            label: 'Move view down',
-            icon: ArrowDownward,
-            onClick: () => session.moveViewDown(model.id),
-          },
-        ]
-      : []),
-
-    // <=1.3.3 didn't use a function, so check as value also
-    ...((typeof menuItems === 'function' ? menuItems() : menuItems) || []),
-  ]
-
-  return items.length ? (
-    <CascadingMenuButton menuItems={items} data-testid="view_menu_icon">
-      <MenuIcon {...IconProps} fontSize="small" />
-    </CascadingMenuButton>
-  ) : null
-})
-export default ViewMenu