@jbrowse/plugin-data-management 2.0.1 → 2.1.0

package/src/AddTrackWidget/components/DefaultAddTrackWorkflow.tsx

@@ -0,0 +1,205 @@
+import React, { useState } from 'react'
+import {
+  Alert,
+  Button,
+  Step,
+  StepContent,
+  StepLabel,
+  Stepper,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+import {
+  getSession,
+  isElectron,
+  supportedIndexingAdapters,
+} from '@jbrowse/core/util'
+import { getConf } from '@jbrowse/core/configuration'
+import { observer } from 'mobx-react'
+import { getEnv } from 'mobx-state-tree'
+
+// locals
+import ConfirmTrack from './ConfirmTrack'
+import TrackSourceSelect from './TrackSourceSelect'
+
+import { AddTrackModel } from '../model'
+
+const useStyles = makeStyles()(theme => ({
+  root: {
+    marginTop: theme.spacing(1),
+  },
+  stepper: {
+    backgroundColor: theme.palette.background.default,
+  },
+  button: {
+    marginTop: theme.spacing(1),
+    marginRight: theme.spacing(1),
+  },
+  actionsContainer: {
+    marginBottom: theme.spacing(2),
+  },
+  stepContent: {
+    margin: theme.spacing(1),
+  },
+  alertContainer: {
+    padding: `${theme.spacing(2)}px 0px ${theme.spacing(2)}px 0px`,
+  },
+}))
+
+const steps = ['Enter track data', 'Confirm track type']
+
+function AddTrackWorkflow({ model }: { model: AddTrackModel }) {
+  const [activeStep, setActiveStep] = useState(0)
+  const { classes } = useStyles()
+  const { pluginManager } = getEnv(model)
+  const { rootModel } = pluginManager
+  const { jobsManager } = rootModel
+  const session = getSession(model)
+  const {
+    assembly,
+    trackAdapter,
+    trackData,
+    trackName,
+    trackType,
+    textIndexTrack,
+    textIndexingConf,
+  } = model
+  const [trackErrorMessage, setTrackErrorMessage] = useState<string>()
+
+  function getStepContent(step: number) {
+    switch (step) {
+      case 0:
+        return <TrackSourceSelect model={model} />
+      case 1:
+        return <ConfirmTrack model={model} />
+      default:
+        return <Typography>Unknown step</Typography>
+    }
+  }
+
+  async function handleNext() {
+    if (activeStep !== steps.length - 1) {
+      setActiveStep(activeStep + 1)
+      return
+    }
+
+    const trackId = [
+      `${trackName.toLowerCase().replace(/ /g, '_')}-${Date.now()}`,
+      `${session.adminMode ? '' : '-sessionTrack'}`,
+    ].join('')
+
+    const assemblyInstance = session.assemblyManager.get(assembly)
+
+    if (trackAdapter && trackAdapter.type !== 'UNKNOWN') {
+      session.addTrackConf({
+        trackId,
+        type: trackType,
+        name: trackName,
+        assemblyNames: [assembly],
+        adapter: {
+          ...trackAdapter,
+          sequenceAdapter: getConf(assemblyInstance, ['sequence', 'adapter']),
+        },
+      })
+      if (model.view) {
+        model.view.showTrack(trackId)
+        if (
+          isElectron &&
+          textIndexTrack &&
+          supportedIndexingAdapters(trackAdapter.type)
+        ) {
+          const attr = textIndexingConf || {
+            attributes: ['Name', 'ID'],
+            exclude: ['CDS', 'exon'],
+          }
+          const indexName = trackName + '-index'
+          const newEntry = {
+            indexingParams: {
+              ...attr,
+              assemblies: [assembly],
+              tracks: [trackId],
+              indexType: 'perTrack',
+              name: indexName,
+              timestamp: new Date().toISOString(),
+            },
+            name: indexName,
+            cancelCallback: () => jobsManager.abortJob(),
+          }
+          jobsManager.queueJob(newEntry)
+        }
+      } else {
+        session.notify(
+          'Open a new view, or use the track selector in an existing view, to view this track',
+          'info',
+        )
+      }
+      model.clearData()
+      session.hideWidget(model)
+    } else {
+      setTrackErrorMessage(
+        'Failed to add track.\nThe configuration of this file is not currently supported.',
+      )
+    }
+  }
+
+  function handleBack() {
+    setTrackErrorMessage(undefined)
+    setActiveStep(activeStep - 1)
+  }
+
+  function isNextDisabled() {
+    switch (activeStep) {
+      case 0:
+        return !trackData
+      case 1:
+        return !(trackName && trackType && trackAdapter?.type && assembly)
+      default:
+        return true
+    }
+  }
+
+  return (
+    <div className={classes.root}>
+      <Stepper
+        className={classes.stepper}
+        activeStep={activeStep}
+        orientation="vertical"
+      >
+        {steps.map((label, idx) => (
+          <Step key={label}>
+            <StepLabel>{label}</StepLabel>
+            <StepContent>
+              {getStepContent(idx)}
+              <div className={classes.actionsContainer}>
+                <Button
+                  disabled={activeStep === 0}
+                  onClick={handleBack}
+                  className={classes.button}
+                >
+                  Back
+                </Button>
+                <Button
+                  disabled={isNextDisabled()}
+                  variant="contained"
+                  color="primary"
+                  onClick={handleNext}
+                  className={classes.button}
+                  data-testid="addTrackNextButton"
+                >
+                  {activeStep === steps.length - 1 ? 'Add' : 'Next'}
+                </Button>
+              </div>
+              {trackErrorMessage ? (
+                <div className={classes.alertContainer}>
+                  <Alert severity="error">{trackErrorMessage}</Alert>
+                </div>
+              ) : null}
+            </StepContent>
+          </Step>
+        ))}
+      </Stepper>
+    </div>
+  )
+}
+export default observer(AddTrackWorkflow)

package/src/HierarchicalTrackSelectorWidget/components/Header.tsx

@@ -0,0 +1,287 @@
+import React, { Suspense, lazy, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+import { Badge, IconButton, InputAdornment, TextField } from '@mui/material'
+// icons
+import ClearIcon from '@mui/icons-material/Clear'
+import MenuIcon from '@mui/icons-material/Menu'
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'
+import { Cable } from '@jbrowse/core/ui/Icons'
+
+// other
+import JBrowseMenu, { MenuItem } from '@jbrowse/core/ui/Menu'
+import {
+  getSession,
+  isSessionModelWithWidgets,
+  isSessionModelWithConnections,
+  isSessionWithAddTracks,
+} from '@jbrowse/core/util'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { observer } from 'mobx-react'
+import { getEnv } from 'mobx-state-tree'
+
+// locals
+import { HierarchicalTrackSelectorModel } from '../model'
+
+// lazy components
+const CloseConnectionDialog = lazy(() => import('./CloseConnectionDialog'))
+const DeleteConnectionDialog = lazy(() => import('./DeleteConnectionDialog'))
+const ManageConnectionsDialog = lazy(() => import('./ManageConnectionsDialog'))
+const ToggleConnectionsDialog = lazy(() => import('./ToggleConnectionsDialog'))
+
+const useStyles = makeStyles()(theme => ({
+  searchBox: {
+    margin: theme.spacing(2),
+  },
+  menuIcon: {
+    marginRight: theme.spacing(1),
+    marginBottom: 0,
+  },
+}))
+
+interface ModalArgs {
+  connectionConf: AnyConfigurationModel
+  safelyBreakConnection: Function
+  dereferenceTypeCount: { [key: string]: number }
+  name: string
+}
+
+interface DialogDetails {
+  name: string
+  connectionConf: AnyConfigurationModel
+}
+
+function HierarchicalTrackSelectorHeader({
+  model,
+  setHeaderHeight,
+  setAssemblyIdx,
+  assemblyIdx,
+}: {
+  model: HierarchicalTrackSelectorModel
+  setHeaderHeight: (n: number) => void
+  setAssemblyIdx: (n: number) => void
+  assemblyIdx: number
+}) {
+  const { classes } = useStyles()
+  const session = getSession(model)
+  const [connectionEl, setConnectionEl] = useState<HTMLButtonElement>()
+  const [selectionEl, setSelectionEl] = useState<HTMLButtonElement>()
+  const [menuEl, setMenuEl] = useState<HTMLButtonElement>()
+  const [modalInfo, setModalInfo] = useState<ModalArgs>()
+  const [deleteDlgDetails, setDeleteDlgDetails] = useState<DialogDetails>()
+  const [connectionManagerOpen, setConnectionManagerOpen] = useState(false)
+  const [connectionToggleOpen, setConnectionToggleOpen] = useState(false)
+  const { assemblyNames } = model
+  const assemblyName = assemblyNames[assemblyIdx]
+
+  function breakConnection(
+    connectionConf: AnyConfigurationModel,
+    deletingConnection?: boolean,
+  ) {
+    const name = readConfObject(connectionConf, 'name')
+
+    // @ts-ignore
+    const result = session.prepareToBreakConnection(connectionConf)
+    if (result) {
+      const [safelyBreakConnection, dereferenceTypeCount] = result
+      if (Object.keys(dereferenceTypeCount).length > 0) {
+        setModalInfo({
+          connectionConf,
+          safelyBreakConnection,
+          dereferenceTypeCount,
+          name,
+        })
+      } else {
+        safelyBreakConnection()
+      }
+    }
+    if (deletingConnection) {
+      setDeleteDlgDetails({ name, connectionConf })
+    }
+  }
+
+  const connectionMenuItems = [
+    {
+      label: 'Turn on/off connections...',
+      onClick: () => setConnectionToggleOpen(true),
+    },
+  ]
+
+  if (isSessionModelWithConnections(session)) {
+    connectionMenuItems.unshift({
+      label: 'Add connection',
+      onClick: () => {
+        if (isSessionModelWithWidgets(session)) {
+          session.showWidget(
+            session.addWidget('AddConnectionWidget', 'addConnectionWidget'),
+          )
+        }
+      },
+    })
+
+    connectionMenuItems.push({
+      label: 'Delete connections...',
+      onClick: () => setConnectionManagerOpen(true),
+    })
+  }
+
+  const assemblyMenuItems =
+    assemblyNames.length > 1
+      ? [
+          {
+            label: 'Select assembly...',
+            subMenu: assemblyNames.map((name, idx) => ({
+              label: name,
+              onClick: () => setAssemblyIdx(idx),
+            })),
+          },
+        ]
+      : []
+
+  const menuItems = [
+    {
+      label: 'Add track...',
+      onClick: () => {
+        if (isSessionModelWithWidgets(session)) {
+          session.showWidget(
+            session.addWidget('AddTrackWidget', 'addTrackWidget', {
+              view: model.view.id,
+            }),
+          )
+        }
+      },
+    },
+
+    ...assemblyMenuItems,
+  ]
+
+  const items = getEnv(model).pluginManager.evaluateExtensionPoint(
+    'TrackSelector-multiTrackMenuItems',
+  ) as MenuItem[]
+  return (
+    <div
+      ref={ref => setHeaderHeight(ref?.getBoundingClientRect().height || 0)}
+      data-testid="hierarchical_track_selector"
+    >
+      <div style={{ display: 'flex' }}>
+        {isSessionWithAddTracks(session) && (
+          <IconButton
+            className={classes.menuIcon}
+            onClick={event => setMenuEl(event.currentTarget)}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+
+        {session.makeConnection && (
+          <IconButton
+            className={classes.menuIcon}
+            onClick={event => setConnectionEl(event.currentTarget)}
+          >
+            <Cable />
+          </IconButton>
+        )}
+
+        {model.selection.length ? (
+          <IconButton
+            className={classes.menuIcon}
+            onClick={event => setSelectionEl(event.currentTarget)}
+          >
+            <Badge badgeContent={model.selection.length} color="primary">
+              <ShoppingCartIcon />
+            </Badge>
+          </IconButton>
+        ) : null}
+
+        <TextField
+          className={classes.searchBox}
+          label="Filter tracks"
+          value={model.filterText}
+          onChange={event => model.setFilterText(event.target.value)}
+          fullWidth
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton color="secondary" onClick={model.clearFilterText}>
+                  <ClearIcon />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+        />
+      </div>
+      <JBrowseMenu
+        anchorEl={connectionEl}
+        open={Boolean(connectionEl)}
+        onMenuItemClick={(_, callback) => {
+          callback()
+          setConnectionEl(undefined)
+        }}
+        onClose={() => setConnectionEl(undefined)}
+        menuItems={connectionMenuItems}
+      />
+      <JBrowseMenu
+        anchorEl={menuEl}
+        open={Boolean(menuEl)}
+        onMenuItemClick={(_, callback) => {
+          callback()
+          setMenuEl(undefined)
+        }}
+        onClose={() => setMenuEl(undefined)}
+        menuItems={menuItems}
+      />
+      <JBrowseMenu
+        anchorEl={selectionEl}
+        open={Boolean(selectionEl)}
+        onMenuItemClick={(_, callback) => {
+          callback()
+          setSelectionEl(undefined)
+        }}
+        onClose={() => setSelectionEl(undefined)}
+        menuItems={[
+          { label: 'Clear', onClick: () => model.clearSelection() },
+          ...items.map(item => ({
+            ...item,
+            ...('onClick' in item
+              ? { onClick: () => item.onClick(model) }
+              : {}),
+          })),
+        ]}
+      />
+      <Suspense fallback={<div />}>
+        {modalInfo ? (
+          <CloseConnectionDialog
+            modalInfo={modalInfo}
+            setModalInfo={setModalInfo}
+          />
+        ) : null}
+        {deleteDlgDetails ? (
+          <DeleteConnectionDialog
+            handleClose={() => setDeleteDlgDetails(undefined)}
+            deleteDialogDetails={deleteDlgDetails}
+            session={session}
+          />
+        ) : null}
+        {connectionManagerOpen ? (
+          <ManageConnectionsDialog
+            handleClose={() => setConnectionManagerOpen(false)}
+            breakConnection={breakConnection}
+            session={session}
+          />
+        ) : null}
+        {connectionToggleOpen ? (
+          <ToggleConnectionsDialog
+            handleClose={() => setConnectionToggleOpen(false)}
+            session={session}
+            breakConnection={breakConnection}
+            assemblyName={assemblyName}
+          />
+        ) : null}
+      </Suspense>
+    </div>
+  )
+}
+
+export default observer(HierarchicalTrackSelectorHeader)