@jbrowse/plugin-data-management 2.2.1 → 2.3.0

package/src/AssemblyManager/AssemblyAddForm.tsx

@@ -1,63 +1,38 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
-import FileSelector from '@jbrowse/core/ui/FileSelector'
-import { FileLocation } from '@jbrowse/core/util/types'
 import { Button, Grid, MenuItem, Paper, TextField } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import AddIcon from '@mui/icons-material/Add'
+import { FileSelector } from '@jbrowse/core/ui'
+import { FileLocation } from '@jbrowse/core/util/types'
 
-const useStyles = makeStyles()(theme => ({
-  root: {
-    flexGrow: 1,
-    overflow: 'hidden',
-    padding: theme.spacing(0, 3),
-  },
-  paper: {
-    margin: `${theme.spacing(1)}px auto`,
-    padding: theme.spacing(2),
-  },
-  createButton: {
-    marginTop: '1em',
-    justifyContent: 'center',
-  },
-  paperContent: {
-    flex: 'auto',
-    margin: `${theme.spacing(1)}px auto`,
-    padding: theme.spacing(1),
-    overflow: 'auto',
-  },
-}))
+// icons
+import AddIcon from '@mui/icons-material/Add'
 
-const AdapterSelector = observer(
-  ({
-    adapterSelection,
-    setAdapterSelection,
-    adapterTypes,
-  }: {
-    adapterSelection: string
-    setAdapterSelection: Function
-    adapterTypes: string[]
-  }) => {
-    return (
-      <TextField
-        value={adapterSelection}
-        label="Type"
-        select
-        helperText="Type of adapter to use"
-        fullWidth
-        onChange={event => {
-          setAdapterSelection(event.target.value)
-        }}
-      >
-        {adapterTypes.map(str => (
-          <MenuItem key={str} value={str}>
-            {str}
-          </MenuItem>
-        ))}
-      </TextField>
-    )
-  },
-)
+const AdapterSelector = observer(function ({
+  adapterSelection,
+  setAdapterSelection,
+  adapterTypes,
+}: {
+  adapterSelection: string
+  setAdapterSelection: Function
+  adapterTypes: string[]
+}) {
+  return (
+    <TextField
+      value={adapterSelection}
+      label="Type"
+      select
+      helperText="Type of adapter to use"
+      fullWidth
+      onChange={event => setAdapterSelection(event.target.value)}
+    >
+      {adapterTypes.map(str => (
+        <MenuItem key={str} value={str}>
+          {str}
+        </MenuItem>
+      ))}
+    </TextField>
+  )
+})
 
 const AdapterInput = observer(
   ({
@@ -145,141 +120,131 @@ const AdapterInput = observer(
 
 const blank = { uri: '' } as FileLocation
 
-const AssemblyAddForm = observer(
-  ({
-    rootModel,
-    setFormOpen,
-  }: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    rootModel: any
-    setFormOpen: Function
-  }) => {
-    const { classes } = useStyles()
-
-    const adapterTypes = [
-      'IndexedFastaAdapter',
-      'BgzipFastaAdapter',
-      'TwoBitAdapter',
-    ]
+const AssemblyAddForm = observer(function ({
+  rootModel,
+  setFormOpen,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  rootModel: any
+  setFormOpen: Function
+}) {
+  const adapterTypes = [
+    'IndexedFastaAdapter',
+    'BgzipFastaAdapter',
+    'TwoBitAdapter',
+  ]
 
-    const [assemblyName, setAssemblyName] = useState('')
-    const [assemblyDisplayName, setAssemblyDisplayName] = useState('')
-    const [adapterSelection, setAdapterSelection] = useState(adapterTypes[0])
-    const [fastaLocation, setFastaLocation] = useState(blank)
-    const [faiLocation, setFaiLocation] = useState(blank)
-    const [gziLocation, setGziLocation] = useState(blank)
-    const [twoBitLocation, setTwoBitLocation] = useState(blank)
-    const [chromSizesLocation, setChromSizesLocation] = useState(blank)
+  const [assemblyName, setAssemblyName] = useState('')
+  const [assemblyDisplayName, setAssemblyDisplayName] = useState('')
+  const [adapterSelection, setAdapterSelection] = useState(adapterTypes[0])
+  const [fastaLocation, setFastaLocation] = useState(blank)
+  const [faiLocation, setFaiLocation] = useState(blank)
+  const [gziLocation, setGziLocation] = useState(blank)
+  const [twoBitLocation, setTwoBitLocation] = useState(blank)
+  const [chromSizesLocation, setChromSizesLocation] = useState(blank)
 
-    function createAssembly() {
-      if (assemblyName === '') {
-        rootModel.session.notify("Can't create an assembly without a name")
-      } else {
-        setFormOpen(false)
-        let newAssembly
-        if (adapterSelection === 'IndexedFastaAdapter') {
-          newAssembly = {
-            name: assemblyName,
-            displayName: assemblyDisplayName,
-            sequence: {
-              adapter: {
-                type: 'IndexedFastaAdapter',
-                fastaLocation,
-                faiLocation,
-              },
+  function createAssembly() {
+    if (assemblyName === '') {
+      rootModel.session.notify("Can't create an assembly without a name")
+    } else {
+      setFormOpen(false)
+      let newAssembly
+      if (adapterSelection === 'IndexedFastaAdapter') {
+        newAssembly = {
+          name: assemblyName,
+          displayName: assemblyDisplayName,
+          sequence: {
+            adapter: {
+              type: 'IndexedFastaAdapter',
+              fastaLocation,
+              faiLocation,
             },
-          }
-        } else if (adapterSelection === 'BgzipFastaAdapter') {
-          newAssembly = {
-            name: assemblyName,
-            displayName: assemblyDisplayName,
-            sequence: {
-              adapter: {
-                type: 'BgzipFastaAdapter',
-                fastaLocation,
-                faiLocation,
-                gziLocation,
-              },
+          },
+        }
+      } else if (adapterSelection === 'BgzipFastaAdapter') {
+        newAssembly = {
+          name: assemblyName,
+          displayName: assemblyDisplayName,
+          sequence: {
+            adapter: {
+              type: 'BgzipFastaAdapter',
+              fastaLocation,
+              faiLocation,
+              gziLocation,
             },
-          }
-        } else if (adapterSelection === 'TwoBitAdapter') {
-          newAssembly = {
-            name: assemblyName,
-            displayName: assemblyDisplayName,
-            sequence: {
-              adapter: {
-                type: 'TwoBitAdapter',
-                twoBitLocation,
-                chromSizesLocation,
-              },
+          },
+        }
+      } else if (adapterSelection === 'TwoBitAdapter') {
+        newAssembly = {
+          name: assemblyName,
+          displayName: assemblyDisplayName,
+          sequence: {
+            adapter: {
+              type: 'TwoBitAdapter',
+              twoBitLocation,
+              chromSizesLocation,
             },
-          }
+          },
         }
-        rootModel.jbrowse.addAssemblyConf(newAssembly)
-        rootModel.session.notify(
-          `Successfully added ${assemblyName} assembly to JBrowse 2`,
-          'success',
-        )
       }
+      rootModel.jbrowse.addAssemblyConf(newAssembly)
+      rootModel.session.notify(
+        `Successfully added ${assemblyName} assembly to JBrowse 2`,
+        'success',
+      )
     }
+  }
 
-    return (
-      <div className={classes.root}>
-        <Paper className={classes.paper}>
-          <TextField
-            id="assembly-name"
-            inputProps={{ 'data-testid': 'assembly-name' }}
-            label="Assembly name"
-            helperText="The assembly name e.g. hg38"
-            variant="outlined"
-            value={assemblyName}
-            onChange={event => setAssemblyName(event.target.value)}
-          />
-          <TextField
-            id="assembly-name"
-            inputProps={{ 'data-testid': 'assembly-display-name' }}
-            label="Assembly display name"
-            helperText='A human readable display name for the assembly e.g. "Homo sapiens (hg38)"'
-            variant="outlined"
-            value={assemblyDisplayName}
-            onChange={event => setAssemblyDisplayName(event.target.value)}
-          />
-          <AdapterSelector
-            adapterSelection={adapterSelection}
-            setAdapterSelection={setAdapterSelection}
-            adapterTypes={adapterTypes}
-          />
-          <div className={classes.paperContent}>
-            <AdapterInput
-              adapterSelection={adapterSelection}
-              fastaLocation={fastaLocation}
-              setFastaLocation={setFastaLocation}
-              faiLocation={faiLocation}
-              setFaiLocation={setFaiLocation}
-              gziLocation={gziLocation}
-              setGziLocation={setGziLocation}
-              twoBitLocation={twoBitLocation}
-              setTwoBitLocation={setTwoBitLocation}
-              chromSizesLocation={chromSizesLocation}
-              setChromSizesLocation={setChromSizesLocation}
-            />
-          </div>
-        </Paper>
-        <Grid container className={classes.createButton}>
-          <Grid item>
-            <Button
-              variant="contained"
-              color="secondary"
-              startIcon={<AddIcon />}
-              onClick={createAssembly}
-            >
-              Create new assembly
-            </Button>
-          </Grid>
-        </Grid>
-      </div>
-    )
-  },
-)
+  return (
+    <div>
+      <Paper>
+        <TextField
+          id="assembly-name"
+          inputProps={{ 'data-testid': 'assembly-name' }}
+          label="Assembly name"
+          helperText="The assembly name e.g. hg38"
+          variant="outlined"
+          value={assemblyName}
+          onChange={event => setAssemblyName(event.target.value)}
+        />
+        <TextField
+          id="assembly-name"
+          inputProps={{ 'data-testid': 'assembly-display-name' }}
+          label="Assembly display name"
+          helperText='A human readable display name for the assembly e.g. "Homo sapiens (hg38)"'
+          variant="outlined"
+          value={assemblyDisplayName}
+          onChange={event => setAssemblyDisplayName(event.target.value)}
+        />
+        <AdapterSelector
+          adapterSelection={adapterSelection}
+          setAdapterSelection={setAdapterSelection}
+          adapterTypes={adapterTypes}
+        />
+        <AdapterInput
+          adapterSelection={adapterSelection}
+          fastaLocation={fastaLocation}
+          setFastaLocation={setFastaLocation}
+          faiLocation={faiLocation}
+          setFaiLocation={setFaiLocation}
+          gziLocation={gziLocation}
+          setGziLocation={setGziLocation}
+          twoBitLocation={twoBitLocation}
+          setTwoBitLocation={setTwoBitLocation}
+          chromSizesLocation={chromSizesLocation}
+          setChromSizesLocation={setChromSizesLocation}
+        />
+      </Paper>
+      <Button
+        variant="contained"
+        color="secondary"
+        startIcon={<AddIcon />}
+        onClick={createAssembly}
+      >
+        Create new assembly
+      </Button>
+    </div>
+  )
+})
 
 export default AssemblyAddForm

package/src/AssemblyManager/AssemblyEditor.tsx

@@ -9,7 +9,11 @@ const AssemblyEditor = observer(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     assembly: any
   }) => {
-    return <ConfigurationEditor model={{ target: assembly }} />
+    return (
+      <div style={{ maxHeight: 600, overflow: 'auto' }}>
+        <ConfigurationEditor model={{ target: assembly }} />
+      </div>
+    )
   },
 )
 

package/src/AssemblyManager/AssemblyManager.test.tsx

@@ -29,7 +29,7 @@ const mockRootModel = {
 }
 
 describe('AssemblyManager GUI', () => {
-  it('renders succesfully', () => {
+  it('renders successfully', () => {
     const { getByText } = render(
       <AssemblyManager rootModel={mockRootModel} onClose={() => {}} />,
     )

package/src/AssemblyManager/AssemblyManager.tsx

@@ -1,151 +1,84 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
 import { AnyConfigurationModel } from '@jbrowse/core/configuration'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-} from '@mui/material'
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
-import CloseIcon from '@mui/icons-material/Close'
+import { Button, DialogActions, DialogContent } from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
+
+// icons
 import AddIcon from '@mui/icons-material/Add'
 
+// locals
 import AssemblyTable from './AssemblyTable'
 import AssemblyAddForm from './AssemblyAddForm'
 import AssemblyEditor from './AssemblyEditor'
 
-const useStyles = makeStyles()(theme => ({
-  titleBox: {
-    color: '#fff',
-    backgroundColor: theme.palette.primary.main,
-    textAlign: 'center',
-  },
-  dialogContent: {
-    width: '100%',
-  },
-  backButton: {
-    color: '#fff',
-    position: 'absolute',
-    left: theme.spacing(4),
-    top: theme.spacing(4),
-  },
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-}))
-
-const AssemblyManager = observer(
-  ({
-    rootModel,
-    onClose,
-  }: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    rootModel: any
-    onClose: (arg: boolean) => void
-  }) => {
-    const { classes } = useStyles()
-    const [isFormOpen, setFormOpen] = useState(false)
-    const [isAssemblyBeingEdited, setIsAssemblyBeingEdited] = useState(false)
-    const [assemblyBeingEdited, setAssemblyBeingEdited] =
-      useState<AnyConfigurationModel>()
+const AssemblyManager = observer(function ({
+  rootModel,
+  onClose,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  rootModel: any
+  onClose: (arg: boolean) => void
+}) {
+  const [isFormOpen, setFormOpen] = useState(false)
+  const [isAssemblyBeingEdited, setIsAssemblyBeingEdited] = useState(false)
+  const [assemblyBeingEdited, setAssemblyBeingEdited] =
+    useState<AnyConfigurationModel>()
 
-    const showAssemblyTable = !isFormOpen && !isAssemblyBeingEdited
+  const showAssemblyTable = !isFormOpen && !isAssemblyBeingEdited
 
-    return (
-      <Dialog open onClose={() => onClose(false)}>
-        <DialogTitle className={classes.titleBox}>
-          {showAssemblyTable ? 'Assembly manager' : null}
-          {isFormOpen ? (
-            <>
-              <IconButton
-                aria-label="back"
-                className={classes.backButton}
-                onClick={() => setFormOpen(false)}
-              >
-                <ArrowBackIosIcon />
-              </IconButton>
-              Add new assembly
-            </>
-          ) : null}
-          {isAssemblyBeingEdited ? (
-            <>
-              <IconButton
-                aria-label="back"
-                className={classes.backButton}
-                onClick={() => setIsAssemblyBeingEdited(false)}
-              >
-                <ArrowBackIosIcon />
-              </IconButton>
-              {returnAssemblyName(assemblyBeingEdited)}
-            </>
-          ) : null}
-          <IconButton
-            aria-label="close"
-            className={classes.closeButton}
-            onClick={() => onClose(false)}
+  return (
+    <Dialog open onClose={() => onClose(false)} title="Assembly manager">
+      <DialogContent>
+        {showAssemblyTable ? (
+          <AssemblyTable
+            rootModel={rootModel}
+            setIsAssemblyBeingEdited={setIsAssemblyBeingEdited}
+            setAssemblyBeingEdited={setAssemblyBeingEdited}
+          />
+        ) : null}
+        {isAssemblyBeingEdited ? (
+          <AssemblyEditor assembly={assemblyBeingEdited} />
+        ) : null}
+        {isFormOpen ? (
+          <AssemblyAddForm rootModel={rootModel} setFormOpen={setFormOpen} />
+        ) : null}
+      </DialogContent>
+      <DialogActions>
+        {isFormOpen ? (
+          <Button variant="contained" onClick={() => setFormOpen(false)}>
+            Back
+          </Button>
+        ) : null}
+        {isAssemblyBeingEdited ? (
+          <Button
+            variant="contained"
+            onClick={() => setIsAssemblyBeingEdited(false)}
           >
-            <CloseIcon />
-          </IconButton>
-        </DialogTitle>
-        <DialogContent>
-          <div className={classes.dialogContent}>
-            {showAssemblyTable ? (
-              <AssemblyTable
-                rootModel={rootModel}
-                setIsAssemblyBeingEdited={setIsAssemblyBeingEdited}
-                setAssemblyBeingEdited={setAssemblyBeingEdited}
-              />
-            ) : null}
-            {isAssemblyBeingEdited ? (
-              <AssemblyEditor assembly={assemblyBeingEdited} />
-            ) : null}
-            {isFormOpen ? (
-              <AssemblyAddForm
-                rootModel={rootModel}
-                setFormOpen={setFormOpen}
-              />
-            ) : null}
-          </div>
-        </DialogContent>
-        <DialogActions>
-          {showAssemblyTable ? (
-            <>
-              <Button
-                color="secondary"
-                variant="contained"
-                onClick={() => onClose(false)}
-              >
-                Close
-              </Button>
-              <Button
-                variant="contained"
-                color="secondary"
-                startIcon={<AddIcon />}
-                onClick={() => setFormOpen(true)}
-              >
-                Add new assembly
-              </Button>
-            </>
-          ) : null}
-        </DialogActions>
-      </Dialog>
-    )
-  },
-)
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function returnAssemblyName(assembly: any) {
-  if (assembly !== undefined) {
-    return assembly.name
-  }
-  return null
-}
+            Back
+          </Button>
+        ) : null}
+        {showAssemblyTable ? (
+          <>
+            <Button
+              color="secondary"
+              variant="contained"
+              onClick={() => onClose(false)}
+            >
+              Close
+            </Button>
+            <Button
+              variant="contained"
+              startIcon={<AddIcon />}
+              onClick={() => setFormOpen(true)}
+            >
+              Add new assembly
+            </Button>
+          </>
+        ) : null}
+      </DialogActions>
+    </Dialog>
+  )
+})
 
 export default AssemblyManager