@jbrowse/plugin-data-management 2.2.1 → 2.2.2

package/src/AssemblyManager/AssemblyTable.tsx

@@ -9,112 +9,80 @@ import {
   TableHead,
   TableRow,
   Paper,
-  Typography,
 } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-import CreateIcon from '@mui/icons-material/Create'
-import DeleteIcon from '@mui/icons-material/Delete'
 import {
   readConfObject,
   AnyConfigurationModel,
 } from '@jbrowse/core/configuration'
 
-const useStyles = makeStyles()(() => ({
-  table: {
-    minWidth: 500,
-    minHeight: 150,
-  },
-  buttonCell: {
-    padding: 3,
-  },
-  button: {
-    display: 'inline-block',
-    padding: 3,
-    minHeight: 0,
-    minWidth: 0,
-  },
-}))
-
-const AssemblyTable = observer(
-  ({
-    rootModel,
-    setIsAssemblyBeingEdited,
-    setAssemblyBeingEdited,
-  }: {
-    rootModel: {
-      jbrowse: {
-        removeAssemblyConf: (arg: string) => void
-        assemblies: AnyConfigurationModel[]
-      }
-    }
-    setIsAssemblyBeingEdited(arg: boolean): void
-    setAssemblyBeingEdited(arg: AnyConfigurationModel): void
-  }) => {
-    const { classes } = useStyles()
+import CreateIcon from '@mui/icons-material/Create'
+import DeleteIcon from '@mui/icons-material/Delete'
 
-    function removeAssembly(name: string) {
-      rootModel.jbrowse.removeAssemblyConf(name)
+const AssemblyTable = observer(function ({
+  rootModel,
+  setIsAssemblyBeingEdited,
+  setAssemblyBeingEdited,
+}: {
+  rootModel: {
+    jbrowse: {
+      removeAssemblyConf: (arg: string) => void
+      assemblies: AnyConfigurationModel[]
     }
+  }
+  setIsAssemblyBeingEdited(arg: boolean): void
+  setAssemblyBeingEdited(arg: AnyConfigurationModel): void
+}) {
+  function removeAssembly(name: string) {
+    rootModel.jbrowse.removeAssemblyConf(name)
+  }
 
-    const rows = rootModel.jbrowse.assemblies.map(assembly => {
-      const name = readConfObject(assembly, 'name')
-      const displayName = readConfObject(assembly, 'displayName')
-      const aliases = readConfObject(assembly, 'aliases')
-      return (
-        <TableRow key={name}>
-          <TableCell>{name}</TableCell>
-          <TableCell>{displayName}</TableCell>
-          <TableCell>{aliases ? aliases.toString() : ''}</TableCell>
-          <TableCell className={classes.buttonCell}>
-            <IconButton
-              data-testid={`${name}-edit`}
-              className={classes.button}
-              onClick={() => {
-                setIsAssemblyBeingEdited(true)
-                setAssemblyBeingEdited(assembly)
-              }}
-            >
-              <CreateIcon color="primary" />
-            </IconButton>
-            <IconButton
-              data-testid={`${name}-delete`}
-              className={classes.button}
-              onClick={() => {
-                removeAssembly(name)
-              }}
-            >
-              <DeleteIcon color="error" />
-            </IconButton>
-          </TableCell>
-        </TableRow>
-      )
-    })
+  const { assemblies } = rootModel.jbrowse
 
-    return (
-      <TableContainer component={Paper}>
-        <Table className={classes.table}>
-          <TableHead>
-            <TableRow>
-              <TableCell>
-                <Typography variant="h5">Name</Typography>
-              </TableCell>
-              <TableCell>
-                <Typography variant="h5">Display name</Typography>
-              </TableCell>
-              <TableCell>
-                <Typography variant="h5">Aliases</Typography>
-              </TableCell>
-              <TableCell>
-                <Typography variant="h5">Actions</Typography>
-              </TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>{rows}</TableBody>
-        </Table>
-      </TableContainer>
-    )
-  },
-)
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Display name</TableCell>
+            <TableCell>Aliases</TableCell>
+            <TableCell>Actions</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {assemblies.map(assembly => {
+            const name = readConfObject(assembly, 'name')
+            const displayName = readConfObject(assembly, 'displayName')
+            const aliases = readConfObject(assembly, 'aliases')
+            return (
+              <TableRow key={name}>
+                <TableCell>{name}</TableCell>
+                <TableCell>{displayName}</TableCell>
+                <TableCell>{aliases ? aliases.toString() : ''}</TableCell>
+                <TableCell>
+                  <IconButton
+                    data-testid={`${name}-edit`}
+                    onClick={() => {
+                      setIsAssemblyBeingEdited(true)
+                      setAssemblyBeingEdited(assembly)
+                    }}
+                  >
+                    <CreateIcon color="primary" />
+                  </IconButton>
+                  <IconButton
+                    data-testid={`${name}-delete`}
+                    onClick={() => removeAssembly(name)}
+                  >
+                    <DeleteIcon color="error" />
+                  </IconButton>
+                </TableCell>
+              </TableRow>
+            )
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+})
 
 export default AssemblyTable

package/src/HierarchicalTrackSelectorWidget/components/ManageConnectionsDialog.tsx

@@ -1,16 +1,14 @@
 import React from 'react'
 import {
   Button,
-  Dialog,
-  DialogTitle,
   DialogContent,
   DialogActions,
   IconButton,
   Tooltip,
   Typography,
 } from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
 import { makeStyles } from 'tss-react/mui'
-import CloseIcon from '@mui/icons-material/Close'
 import { observer } from 'mobx-react'
 import {
   AnyConfigurationModel,
@@ -18,14 +16,10 @@ import {
 } from '@jbrowse/core/configuration'
 import { AbstractSessionModel } from '@jbrowse/core/util'
 
-const useStyles = makeStyles()(theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
+// icons
+import CloseIcon from '@mui/icons-material/Close'
 
+const useStyles = makeStyles()(theme => ({
   connectionContainer: {
     margin: theme.spacing(4),
     width: 500,
@@ -44,16 +38,7 @@ function ManageConnectionsDlg({
   const { classes } = useStyles()
   const { adminMode, connections, sessionConnections } = session
   return (
-    <Dialog open onClose={handleClose} maxWidth="lg">
-      <DialogTitle>
-        Delete connections
-        <IconButton
-          className={classes.closeButton}
-          onClick={() => handleClose()}
-        >
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
+    <Dialog open onClose={handleClose} maxWidth="lg" title="Delete connections">
       <DialogContent>
         <Typography>
           Click the X icon to delete the connection from your config completely

package/src/HierarchicalTrackSelectorWidget/components/ToggleConnectionsDialog.tsx

@@ -2,16 +2,13 @@ import React from 'react'
 import {
   Button,
   Checkbox,
-  Dialog,
-  DialogTitle,
   DialogContent,
   DialogActions,
   FormControlLabel,
-  IconButton,
   Typography,
 } from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
 import { makeStyles } from 'tss-react/mui'
-import CloseIcon from '@mui/icons-material/Close'
 import { observer } from 'mobx-react'
 import {
   AnyConfigurationModel,
@@ -24,13 +21,6 @@ export function ellipses(slug: string) {
 }
 
 const useStyles = makeStyles()(theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500],
-  },
-
   connectionContainer: {
     width: 500,
     margin: theme.spacing(4),
@@ -49,16 +39,12 @@ function ToggleConnectionDialog({
   const { classes } = useStyles()
   const { connections, connectionInstances: instances = [] } = session
   return (
-    <Dialog open onClose={handleClose} maxWidth="lg">
-      <DialogTitle>
-        Turn on/off connections
-        <IconButton
-          className={classes.closeButton}
-          onClick={() => handleClose()}
-        >
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
+    <Dialog
+      open
+      onClose={handleClose}
+      maxWidth="lg"
+      title="Turn on/off connections"
+    >
       <DialogContent>
         <Typography>Use the checkbox to turn on/off connections</Typography>
         <div className={classes.connectionContainer}>

package/src/HierarchicalTrackSelectorWidget/model.ts

@@ -4,7 +4,12 @@ import {
   readConfObject,
   AnyConfigurationModel,
 } from '@jbrowse/core/configuration'
-import { AbstractSessionModel, getSession, getEnv } from '@jbrowse/core/util'
+import {
+  AbstractSessionModel,
+  dedupe,
+  getSession,
+  getEnv,
+} from '@jbrowse/core/util'
 import { getTrackName } from '@jbrowse/core/util/tracks'
 import { ElementId } from '@jbrowse/core/util/types/mst'
 import PluginManager from '@jbrowse/core/PluginManager'
@@ -135,7 +140,7 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
     }))
     .actions(self => ({
       addToSelection(elt: AnyConfigurationModel[]) {
-        self.selection = [...self.selection, ...elt]
+        self.selection = dedupe([...self.selection, ...elt], e => e.trackId)
       },
       removeFromSelection(elt: AnyConfigurationModel[]) {
         self.selection = self.selection.filter(f => !elt.includes(f))

package/src/PluginStoreWidget/components/CustomPluginForm.tsx

@@ -7,7 +7,6 @@ import {
   Collapse,
   Dialog,
   DialogActions,
-  DialogTitle,
   DialogContent,
   DialogContentText,
   TextField,
@@ -16,18 +15,12 @@ import { makeStyles } from 'tss-react/mui'
 
 // icons
 import IconButton from '@mui/material/IconButton'
-import CloseIcon from '@mui/icons-material/Close'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 
 // locals
 import { PluginStoreModel } from '../model'
 
 const useStyles = makeStyles()(theme => ({
-  closeButton: {
-    position: 'absolute',
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-  },
   dialogContent: {
     display: 'flex',
     flexDirection: 'column',
@@ -114,17 +107,7 @@ function CustomPluginForm({
   }
 
   return (
-    <Dialog open={open} onClose={handleClose}>
-      <DialogTitle>
-        Add custom plugin
-        <IconButton
-          size="medium"
-          className={classes.closeButton}
-          onClick={() => onClose()}
-        >
-          <CloseIcon />
-        </IconButton>
-      </DialogTitle>
+    <Dialog open={open} onClose={handleClose} title="Add custom plugin">
       <form onSubmit={handleSubmit}>
         <DialogContent className={classes.dialogContent}>
           <DialogContentText>

package/src/PluginStoreWidget/components/PluginStoreWidget.tsx

@@ -61,6 +61,7 @@ function PluginStoreWidget({ model }: { model: PluginStoreModel }) {
     const controller = new AbortController()
     const { signal } = controller
 
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
       try {
         const response = await fetch(