@jbrowse/app-core 2.6.1

package/src/ui/App/DrawerWidget.tsx

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

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

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

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

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

package/src/ui/App/ViewPanel.tsx

@@ -0,0 +1,63 @@
+import React, { Suspense } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import { observer } from 'mobx-react'
+
+// locals
+import {
+  getEnv,
+  AbstractViewModel,
+  SessionWithDrawerWidgets,
+} from '@jbrowse/core/util'
+import { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel'
+
+// ui elements
+import ErrorMessage from '@jbrowse/core/ui/ErrorMessage'
+import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses'
+import { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu'
+
+// locals
+import ViewContainer from './ViewContainer'
+
+type AppSession = SessionWithDrawerWidgets & {
+  savedSessionNames: string[]
+  menus: { label: string; menuItems: JBMenuItem[] }[]
+  snackbarMessages: SnackbarMessage[]
+  renameCurrentSession: (arg: string) => void
+  popSnackbarMessage: () => unknown
+}
+
+const ViewPanel = observer(function ({
+  view,
+  session,
+}: {
+  view: AbstractViewModel
+  session: AppSession
+}) {
+  const { pluginManager } = getEnv(session)
+  const viewType = pluginManager.getViewType(view.type)
+  if (!viewType) {
+    throw new Error(`unknown view type ${view.type}`)
+  }
+  const { ReactComponent } = viewType
+  return (
+    <ViewContainer
+      view={view}
+      onClose={() => session.removeView(view)}
+      onMinimize={() => view.setMinimized(!view.minimized)}
+    >
+      {!view.minimized ? (
+        <ErrorBoundary
+          FallbackComponent={({ error }) => <ErrorMessage error={error} />}
+        >
+          <Suspense fallback={<LoadingEllipses variant="h6" />}>
+            <ReactComponent model={view} session={session} />
+          </Suspense>
+        </ErrorBoundary>
+      ) : (
+        false
+      )}
+    </ViewContainer>
+  )
+})
+
+export default ViewPanel

package/src/ui/App/index.ts

@@ -0,0 +1 @@
+export * from './App'

package/src/ui/index.ts

@@ -0,0 +1 @@
+export * from './App'