@jbrowse/plugin-data-management 2.4.2 → 2.6.1

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

@@ -1,26 +1,91 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`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-15opis6-MuiButtonBase-root-MuiFab-root-fab"
-  tabindex="0"
-  type="button"
+<div
+  data-testid="hierarchical_track_selector"
 >
-  <svg
-    aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
-    data-testid="AddIcon"
-    focusable="false"
-    viewBox="0 0 24 24"
+  <div
+    style="display: flex;"
   >
-    <path
-      d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-    />
-  </svg>
-  <span
-    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-  />
-</button>
+    <button
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1kgqocu-MuiButtonBase-root-MuiIconButton-root-menuIcon"
+      tabindex="0"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
+        data-testid="MenuIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+        />
+      </svg>
+      <span
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+      />
+    </button>
+    <div
+      class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-rlnh8o-MuiFormControl-root-MuiTextField-root-searchBox"
+    >
+      <label
+        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
+        data-shrink="false"
+        for="mui-1"
+        id="mui-1-label"
+      >
+        Filter tracks
+      </label>
+      <div
+        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1blad95-MuiInputBase-root-MuiInput-root"
+      >
+        <input
+          aria-invalid="false"
+          class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-nz481w-MuiInputBase-input-MuiInput-input"
+          id="mui-1"
+          type="text"
+          value=""
+        />
+        <div
+          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
+        >
+          <button
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
+            tabindex="0"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
+              data-testid="ClearIcon"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              />
+            </svg>
+            <span
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-1c8zr45-MuiButtonBase-root-MuiButton-root-menuIcon"
+      tabindex="0"
+      type="button"
+    >
+      Open faceted selector
+      <span
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+      />
+    </button>
+  </div>
+</div>
 `;
 
 exports[`renders with a couple of categorized tracks 1`] = `
@@ -56,8 +121,8 @@ exports[`renders with a couple of categorized tracks 1`] = `
       <label
         class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
         data-shrink="false"
-        for="mui-5"
-        id="mui-5-label"
+        for="mui-6"
+        id="mui-6-label"
       >
         Filter tracks
       </label>
@@ -67,7 +132,7 @@ exports[`renders with a couple of categorized tracks 1`] = `
         <input
           aria-invalid="false"
           class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-nz481w-MuiInputBase-input-MuiInput-input"
-          id="mui-5"
+          id="mui-6"
           type="text"
           value=""
         />
@@ -144,8 +209,8 @@ exports[`renders with a couple of uncategorized tracks 1`] = `
       <label
         class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
         data-shrink="false"
-        for="mui-1"
-        id="mui-1-label"
+        for="mui-2"
+        id="mui-2-label"
       >
         Filter tracks
       </label>
@@ -155,7 +220,7 @@ exports[`renders with a couple of uncategorized tracks 1`] = `
         <input
           aria-invalid="false"
           class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-nz481w-MuiInputBase-input-MuiInput-input"
-          id="mui-1"
+          id="mui-2"
           type="text"
           value=""
         />

package/src/HierarchicalTrackSelectorWidget/components/dialogs/CloseConnectionDialog.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import {
-  Dialog,
-  DialogTitle,
   DialogContent,
   DialogContentText,
   Button,
@@ -9,23 +7,23 @@ import {
   ListItem,
   DialogActions,
 } from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
 
-function CloseConnectionDialog({
+export default observer(function CloseConnectionDialog({
   modalInfo = {},
-  setModalInfo,
+  onClose,
 }: {
   modalInfo?: {
     name?: string
     dereferenceTypeCount?: { [key: string]: number }
-    safelyBreakConnection?: Function
+    safelyBreakConnection?: () => void
   }
-  setModalInfo: Function
+  onClose: () => void
 }) {
   const { name, dereferenceTypeCount, safelyBreakConnection } = modalInfo
   return (
-    <Dialog open>
-      <DialogTitle>Close connection &quot;{name}&quot;</DialogTitle>
+    <Dialog open maxWidth="lg" title={`Close connection "${name}"`}>
       <DialogContent>
         {dereferenceTypeCount ? (
           <>
@@ -44,7 +42,7 @@ function CloseConnectionDialog({
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button onClick={() => setModalInfo()} color="primary">
+        <Button onClick={() => onClose()} color="primary">
           Cancel
         </Button>
         <Button
@@ -53,7 +51,7 @@ function CloseConnectionDialog({
             modalInfo
               ? () => {
                   safelyBreakConnection?.()
-                  setModalInfo()
+                  onClose()
                 }
               : () => {}
           }
@@ -64,6 +62,4 @@ function CloseConnectionDialog({
       </DialogActions>
     </Dialog>
   )
-}
-
-export default observer(CloseConnectionDialog)
+})

package/src/HierarchicalTrackSelectorWidget/components/dialogs/DeleteConnectionDialog.tsx

@@ -8,7 +8,7 @@ import {
   Button,
 } from '@mui/material'
 import { observer } from 'mobx-react'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration'
 import { AbstractSessionModel } from '@jbrowse/core/util'
 
 function DeleteConnectionDialog({

package/src/HierarchicalTrackSelectorWidget/components/dialogs/ToggleConnectionsDialog.tsx

@@ -27,7 +27,73 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-function ToggleConnectionDialog({
+const ConnectionRow = observer(function ConnectionRow({
+  conf,
+  session,
+  breakConnection,
+}: {
+  conf: AnyConfigurationModel
+  session: AbstractSessionModel
+  breakConnection: (arg: AnyConfigurationModel) => void
+}) {
+  const { connectionInstances: instances = [] } = session
+  const name = readConfObject(conf, 'name')
+  const assemblyNames = readConfObject(conf, 'assemblyNames')
+  const found = instances.find(conn => name === conn.name)
+  return (
+    <FormControlLabel
+      key={conf.connectionId}
+      control={
+        <Checkbox
+          checked={!!found}
+          onChange={() => {
+            if (found) {
+              breakConnection(conf)
+            } else {
+              session.makeConnection?.(conf)
+            }
+          }}
+          color="primary"
+        />
+      }
+      label={[
+        name,
+        assemblyNames.length ? `(${ellipses(assemblyNames.join(','))})` : '',
+      ]
+        .filter(f => !!f)
+        .join(' ')}
+    />
+  )
+})
+
+const ConnectionList = observer(function ConnectionsList({
+  session,
+  breakConnection,
+}: {
+  session: AbstractSessionModel
+  breakConnection: (arg: AnyConfigurationModel) => void
+}) {
+  const { classes } = useStyles()
+  return (
+    <div className={classes.connectionContainer}>
+      {!session.connections.length ? (
+        <Typography>No connections found</Typography>
+      ) : (
+        session.connections.map((conf, idx) => (
+          <div key={conf.name + '_' + idx}>
+            <ConnectionRow
+              conf={conf}
+              session={session}
+              breakConnection={breakConnection}
+            />
+          </div>
+        ))
+      )}
+    </div>
+  )
+})
+
+export default observer(function ToggleConnectionDialog({
   session,
   handleClose,
   breakConnection,
@@ -36,8 +102,6 @@ function ToggleConnectionDialog({
   session: AbstractSessionModel
   breakConnection: (arg: AnyConfigurationModel) => void
 }) {
-  const { classes } = useStyles()
-  const { connections, connectionInstances: instances = [] } = session
   return (
     <Dialog
       open
@@ -47,39 +111,7 @@ function ToggleConnectionDialog({
     >
       <DialogContent>
         <Typography>Use the checkbox to turn on/off connections</Typography>
-        <div className={classes.connectionContainer}>
-          {connections.map(conf => {
-            const name = readConfObject(conf, 'name')
-            const assemblyNames = readConfObject(conf, 'assemblyNames')
-            const found = instances.find(conn => name === conn.name)
-            return (
-              <FormControlLabel
-                key={conf.connectionId}
-                control={
-                  <Checkbox
-                    checked={!!found}
-                    onChange={() => {
-                      if (found) {
-                        breakConnection(conf)
-                      } else {
-                        session.makeConnection?.(conf)
-                      }
-                    }}
-                    color="primary"
-                  />
-                }
-                label={`${name} ${
-                  assemblyNames.length
-                    ? '(' + ellipses(assemblyNames.join(',')) + ')'
-                    : ''
-                }`}
-              />
-            )
-          })}
-          {!connections.length ? (
-            <Typography>No connections found</Typography>
-          ) : null}
-        </div>
+        <ConnectionList session={session} breakConnection={breakConnection} />
       </DialogContent>
       <DialogActions>
         <Button
@@ -92,6 +124,4 @@ function ToggleConnectionDialog({
       </DialogActions>
     </Dialog>
   )
-}
-
-export default observer(ToggleConnectionDialog)
+})

package/src/HierarchicalTrackSelectorWidget/components/faceted/FacetedHeader.tsx

@@ -14,6 +14,8 @@ export default function FacetedHeader({
   setFilterText,
   setUseShoppingCart,
   setHideSparse,
+  setShowOptions,
+  showOptions,
   hideSparse,
   useShoppingCart,
   filterText,
@@ -22,7 +24,9 @@ export default function FacetedHeader({
   setFilterText: (arg: string) => void
   setUseShoppingCart: (arg: boolean) => void
   setHideSparse: (arg: boolean) => void
+  setShowOptions: (arg: boolean) => void
   filterText: string
+  showOptions: boolean
   useShoppingCart: boolean
   hideSparse: boolean
   model: HierarchicalTrackSelectorModel
@@ -79,6 +83,12 @@ export default function FacetedHeader({
             checked: hideSparse,
             type: 'checkbox',
           },
+          {
+            label: 'Show extra table options',
+            onClick: () => setShowOptions(!showOptions),
+            checked: showOptions,
+            type: 'checkbox',
+          },
         ]}
       />
     </>

package/src/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.tsx

@@ -3,11 +3,12 @@ import { IconButton } from '@mui/material'
 import { transaction } from 'mobx'
 import { observer } from 'mobx-react'
 import { getRoot, resolveIdentifier } from 'mobx-state-tree'
-import { DataGrid, GridCellParams } from '@mui/x-data-grid'
+import { DataGrid, GridCellParams, GridToolbar } from '@mui/x-data-grid'
 
 // jbrowse
 import { getTrackName } from '@jbrowse/core/util/tracks'
-import { ResizeHandle, SanitizedHTML } from '@jbrowse/core/ui'
+import { ResizeHandle } from '@jbrowse/core/ui'
+import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML'
 import JBrowseMenu from '@jbrowse/core/ui/Menu'
 import ResizeBar, { useResizeBar } from '@jbrowse/core/ui/ResizeBar'
 import {
@@ -45,19 +46,19 @@ export default observer(function FacetedSelector({
 }: {
   model: HierarchicalTrackSelectorModel
 }) {
-  const { assemblyNames, view, selection } = model
+  const { view, selection } = model
   const { pluginManager } = getEnv(model)
   const { ref, scrollLeft } = useResizeBar()
 
   const [filterText, setFilterText] = useState('')
+  const [showOptions, setShowOptions] = useState(false)
   const [info, setInfo] = useState<InfoArgs>()
   const [useShoppingCart, setUseShoppingCart] = useState(false)
   const [hideSparse, setHideSparse] = useState(true)
   const [panelWidth, setPanelWidth] = useState(400)
-
-  const assemblyName = assemblyNames[0]
   const session = getSession(model)
   const filterDebounced = useDebounce(filterText, 400)
+  const tracks = view.tracks as AnyConfigurationModel[]
   const [filters, dispatch] = useReducer(
     (
       state: Record<string, string[]>,
@@ -71,8 +72,7 @@ export default observer(function FacetedSelector({
   const rows = useMemo(() => {
     // metadata is spread onto the object for easier access and sorting
     // by the mui data grid (it's unable to sort by nested objects)
-    return model
-      .trackConfigurations(assemblyName)
+    return model.trackConfigurations
       .filter(conf => matches(filterDebounced, conf, session))
       .map(track => {
         const metadata = readConfObject(track, 'metadata')
@@ -87,7 +87,7 @@ export default observer(function FacetedSelector({
           ...metadata,
         }
       })
-  }, [assemblyName, model, filterDebounced, session])
+  }, [model, filterDebounced, session])
 
   const filteredNonMetadataKeys = useMemo(
     () =>
@@ -107,9 +107,10 @@ export default observer(function FacetedSelector({
     [hideSparse, rows],
   )
 
-  const fields = useMemo(() => {
-    return ['name', ...filteredNonMetadataKeys, ...filteredMetadataKeys]
-  }, [filteredNonMetadataKeys, filteredMetadataKeys])
+  const fields = useMemo(
+    () => ['name', ...filteredNonMetadataKeys, ...filteredMetadataKeys],
+    [filteredNonMetadataKeys, filteredMetadataKeys],
+  )
 
   const [widths, setWidths] = useState({
     name:
@@ -135,7 +136,7 @@ export default observer(function FacetedSelector({
         ),
       ]),
     ),
-  } as { [key: string]: number })
+  } as { [key: string]: number | undefined })
 
   const [visible, setVisible] = useState(
     Object.fromEntries(fields.map(c => [c, true])),
@@ -185,7 +186,7 @@ export default observer(function FacetedSelector({
         const { value, id, row } = params
         return (
           <>
-            <SanitizedHTML html={value} />
+            <SanitizedHTML html={value as string} />
             <IconButton
               onClick={e =>
                 setInfo({
@@ -200,30 +201,27 @@ export default observer(function FacetedSelector({
           </>
         )
       },
-      width: widthsDebounced.name || 100, // can be undefined before useEffect update
+      width: widthsDebounced.name ?? 100,
     },
     ...filteredNonMetadataKeys.map(e => ({
       field: e,
-      width: widthsDebounced[e] || 100, // can be undefined before useEffect update
+      width: widthsDebounced[e] ?? 100,
       renderCell: (params: GridCellParams) => {
         const { value } = params
-        return value ? <SanitizedHTML html={value} /> : ''
+        return value ? <SanitizedHTML html={value as string} /> : ''
       },
     })),
     ...filteredMetadataKeys.map(e => ({
       field: e,
-      width: widthsDebounced[e] || 100, // can be undefined before useEffect update
+      width: widthsDebounced[e] ?? 100,
       renderCell: (params: GridCellParams) => {
         const { value } = params
-        return value ? <SanitizedHTML html={value} /> : ''
+        return value ? <SanitizedHTML html={value as string} /> : ''
       },
     })),
   ]
 
-  const shownTrackIds = view.tracks.map(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (t: any) => t.configuration.trackId,
-  ) as string[]
+  const shownTrackIds = tracks.map(t => t.configuration.trackId as string)
 
   const arrFilters = Object.entries(filters).filter(f => f[1].length > 0)
   return (
@@ -242,9 +240,11 @@ export default observer(function FacetedSelector({
       ) : null}
       <FacetedHeader
         setHideSparse={setHideSparse}
+        setShowOptions={setShowOptions}
         setFilterText={setFilterText}
         setUseShoppingCart={setUseShoppingCart}
         hideSparse={hideSparse}
+        showOptions={showOptions}
         filterText={filterText}
         useShoppingCart={useShoppingCart}
         model={model}
@@ -267,7 +267,7 @@ export default observer(function FacetedSelector({
         >
           <ResizeBar
             checkbox
-            widths={Object.values(widths)}
+            widths={Object.values(widths).map(f => f ?? 100)}
             setWidths={newWidths =>
               setWidths(
                 Object.fromEntries(
@@ -286,11 +286,11 @@ export default observer(function FacetedSelector({
             )}
             columnVisibilityModel={visible}
             onColumnVisibilityModelChange={newModel => setVisible(newModel)}
-            headerHeight={35}
+            columnHeaderHeight={35}
             checkboxSelection
-            disableSelectionOnClick
+            disableRowSelectionOnClick
             keepNonExistentRowsSelected
-            onSelectionModelChange={userSelectedIds => {
+            onRowSelectionModelChange={userSelectedIds => {
               if (!useShoppingCart) {
                 const a1 = shownTrackIds
                 const a2 = userSelectedIds as string[]
@@ -309,9 +309,13 @@ export default observer(function FacetedSelector({
                 model.setSelection(tracks)
               }
             }}
-            selectionModel={
+            rowSelectionModel={
               useShoppingCart ? selection.map(s => s.trackId) : shownTrackIds
             }
+            slots={{ toolbar: showOptions ? GridToolbar : null }}
+            slotProps={{
+              toolbar: { printOptions: { disableToolbarButton: true } },
+            }}
             columns={columns}
             rowHeight={25}
           />