@jbrowse/plugin-data-management 2.2.1 → 2.3.0

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/HierarchicalTrackSelector.tsx

@@ -1,10 +1,6 @@
 import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react'
 import { Fab, Menu, MenuItem } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
-// icons
-import AddIcon from '@mui/icons-material/Add'
-// other
-import AutoSizer from 'react-virtualized-auto-sizer'
 import {
   getSession,
   isSessionModelWithWidgets,
@@ -13,6 +9,10 @@ import {
 } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import { VariableSizeTree } from 'react-vtree'
+import AutoSizer from 'react-virtualized-auto-sizer'
+
+// icons
+import AddIcon from '@mui/icons-material/Add'
 
 // locals
 import { TreeNode, HierarchicalTrackSelectorModel } from '../model'

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}>
@@ -82,7 +68,11 @@ function ToggleConnectionDialog({
                     color="primary"
                   />
                 }
-                label={`${name} (${ellipses(assemblyNames.join(','))})`}
+                label={`${name} ${
+                  assemblyNames.length
+                    ? '(' + ellipses(assemblyNames.join(',')) + ')'
+                    : ''
+                }`}
               />
             )
           })}

package/src/HierarchicalTrackSelectorWidget/components/__snapshots__/HierarchicalTrackSelector.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`HierarchicalTrackSelector widget renders nothing with no assembly 1`] = `
 <button
-  class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary css-tbl9bo-MuiButtonBase-root-MuiFab-root-fab"
+  class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary css-15opis6-MuiButtonBase-root-MuiFab-root-fab"
   tabindex="0"
   type="button"
 >

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'
@@ -62,6 +67,7 @@ export function generateHierarchy(
   model: HierarchicalTrackSelectorModel,
   trackConfigurations: AnyConfigurationModel[],
   collapsed: { get: (arg: string) => boolean | undefined },
+  extra?: string,
 ) {
   const hierarchy = { children: [] as TreeNode[] } as TreeNode
   const { filterText, view } = model
@@ -86,7 +92,7 @@ export function generateHierarchy(
       for (let i = 0; i < categories.length; i++) {
         const category = categories[i]
         const ret = currLevel.children.find(c => c.name === category)
-        const id = categories.slice(0, i + 1).join(',')
+        const id = extra + '-' + categories.slice(0, i + 1).join(',')
         if (!ret) {
           const n = {
             children: [],
@@ -135,7 +141,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))
@@ -223,10 +229,7 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
         const conns =
           (assembly &&
             connectionInstances
-              ?.filter(c =>
-                hasAnyOverlap(assembly.allAliases, getConf(c, 'assemblyNames')),
-              )
-              .map(c => ({
+              ?.map(c => ({
                 // @ts-ignore
                 id: getSnapshot(c).configuration,
                 name: getConf(c, 'name'),
@@ -234,7 +237,8 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
                 state: {
                   expanded: true,
                 },
-              }))) ||
+              }))
+              .filter(f => f.children.length)) ||
           []
 
         return {
@@ -249,13 +253,14 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
 
       connectionHierarchy(
         assemblyName: string,
-        connection: { tracks: AnyConfigurationModel[] },
+        connection: { name: string; tracks: AnyConfigurationModel[] },
       ) {
         return generateHierarchy(
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           self as any,
           self.connectionTrackConfigurations(assemblyName, connection),
           self.collapsed,
+          connection.name,
         )
       },
     }))

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(

package/src/PluginStoreWidget/components/__snapshots__/PluginStoreWidget.test.js.snap

@@ -501,28 +501,6 @@ exports[`<PluginStoreWidget /> renders with the available plugins 1`] = `
                     SequencePlugin
                   </p>
                 </li>
-                <li
-                  class="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-ypie1g-MuiListItem-root"
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="This plugin was installed by an administrator, you cannot remove it."
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1a34d00-MuiSvgIcon-root-lockedPluginTooltip"
-                    data-mui-internal-clone-element="true"
-                    data-testid="LockIcon"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
-                    />
-                  </svg>
-                  <p
-                    class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
-                  >
-                    TrackHubRegistryPlugin
-                  </p>
-                </li>
                 <li
                   class="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-ypie1g-MuiListItem-root"
                 >

package/src/ucsc-trackhub/model.ts

@@ -0,0 +1,119 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { BaseConnectionModelFactory } from '@jbrowse/core/pluggableElementTypes/models'
+import {
+  ConfigurationReference,
+  readConfObject,
+  getConf,
+} from '@jbrowse/core/configuration'
+import { getSession } from '@jbrowse/core/util'
+import { types } from 'mobx-state-tree'
+
+// locals
+import configSchema from './configSchema'
+import {
+  fetchGenomesFile,
+  fetchHubFile,
+  fetchTrackDbFile,
+  generateTracks,
+} from './ucscTrackHub'
+
+export default function UCSCTrackHubConnection(pluginManager: PluginManager) {
+  return types
+    .compose(
+      'UCSCTrackHubConnection',
+      BaseConnectionModelFactory(pluginManager),
+      types.model({
+        configuration: ConfigurationReference(configSchema),
+        type: types.literal('UCSCTrackHubConnection'),
+      }),
+    )
+    .actions(self => ({
+      async connect() {
+        const session = getSession(self)
+        try {
+          const connectionName = getConf(self, 'name')
+          const hubFileLocation = getConf(self, 'hubTxtLocation')
+          const hubFile = await fetchHubFile(hubFileLocation)
+          const genomeFile = hubFile.get('genomesFile')
+          if (!genomeFile) {
+            throw new Error('genomesFile not found on hub')
+          }
+
+          const hubUri = new URL(hubFileLocation.uri, hubFileLocation.baseUri)
+          const genomesFileLocation = hubUri
+            ? {
+                uri: new URL(genomeFile, hubUri).href,
+                locationType: 'UriLocation',
+              }
+            : {
+                localPath: genomeFile,
+                locationType: 'LocalPathLocation',
+              }
+          const genomesFile = await fetchGenomesFile(genomesFileLocation)
+          const trackDbData = []
+          for (const [genomeName, genome] of genomesFile) {
+            const assemblyNames = getConf(self, 'assemblyNames')
+            if (
+              assemblyNames.length > 0 &&
+              !assemblyNames.includes(genomeName)
+            ) {
+              continue
+            }
+            const conf = session.assemblies.find(
+              a => readConfObject(a, 'name') === genomeName,
+            )
+            if (!conf) {
+              throw new Error(
+                `Cannot find assembly for "${genomeName}" from the genomes file for connection "${connectionName}"`,
+              )
+            }
+            const trackDb = genome.get('trackDb')
+            if (!trackDb) {
+              throw new Error('genomesFile not found on hub')
+            }
+            const trackDbFileLocation = hubUri
+              ? {
+                  uri: new URL(trackDb, new URL(genomeFile, hubUri)).href,
+                  locationType: 'UriLocation',
+                }
+              : {
+                  localPath: trackDb,
+                  locationType: 'LocalPathLocation',
+                }
+            trackDbData.push([
+              trackDbFileLocation,
+              await fetchTrackDbFile(trackDbFileLocation),
+              genomeName,
+              conf,
+            ] as const)
+          }
+          for (const [
+            trackDbFileLocation,
+            trackDbFile,
+            genomeName,
+            conf,
+          ] of trackDbData) {
+            const sequenceAdapter = readConfObject(conf, [
+              'sequence',
+              'adapter',
+            ])
+            self.addTrackConfs(
+              generateTracks(
+                trackDbFile,
+                trackDbFileLocation,
+                genomeName,
+                sequenceAdapter,
+              ),
+            )
+          }
+        } catch (e) {
+          console.error(e)
+          session.notify(
+            `There was a problem connecting to the UCSC Track Hub "${self.configuration.name}". Please make sure you have entered a valid hub.txt file. The error that was thrown is: "${e}"`,
+            'error',
+          )
+          session.breakConnection(self.configuration)
+        }
+      },
+    }))
+}