@jbrowse/plugin-data-management 1.7.11 → 2.1.0

package/src/HierarchicalTrackSelectorWidget/components/Node.tsx

@@ -0,0 +1,284 @@
+import React, { useState } from 'react'
+import {
+  Checkbox,
+  FormControlLabel,
+  IconButton,
+  Tooltip,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+// icons
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
+import ArrowRightIcon from '@mui/icons-material/ArrowRight'
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
+
+// other
+import { HierarchicalTrackSelectorModel, TreeNode } from '../model'
+import JBrowseMenu from '@jbrowse/core/ui/Menu'
+import { getSession } from '@jbrowse/core/util'
+
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { getAllChildren } from './util'
+
+const useStyles = makeStyles()(theme => ({
+  compactCheckbox: {
+    padding: 0,
+  },
+
+  checkboxLabel: {
+    marginRight: 0,
+    '&:hover': {
+      backgroundColor: '#eee',
+    },
+  },
+
+  contrastColor: {
+    color: theme.palette.secondary.contrastText,
+  },
+
+  // this accordionBase element's small padding is used to give a margin to
+  // accordionColor it a "margin" because the virtualized elements can't really
+  // use margin in a conventional way (it doesn't affect layout)
+  accordionBase: {
+    display: 'flex',
+  },
+
+  accordionCard: {
+    padding: 3,
+    cursor: 'pointer',
+    display: 'flex',
+  },
+
+  nestingLevelMarker: {
+    position: 'absolute',
+    borderLeft: '1.5px solid #555',
+  },
+  // accordionColor set's display:flex so that the child accordionText use
+  // vertically centered text
+  accordionColor: {
+    // @ts-ignore
+    background: theme.palette.tertiary?.main,
+    // @ts-ignore
+    color: theme.palette.tertiary?.contrastText,
+    width: '100%',
+    display: 'flex',
+    paddingLeft: 5,
+  },
+
+  // margin:auto 0 to center text vertically
+  accordionText: {
+    margin: 'auto 0',
+  },
+}))
+
+export interface InfoArgs {
+  target: HTMLElement
+  id: string
+  conf: AnyConfigurationModel
+}
+
+function treeToMap(tree: TreeNode, map = new Map<string, TreeNode>()) {
+  if (tree.id && tree.children.length) {
+    map.set(tree.id, tree)
+  }
+  for (let i = 0; i < tree.children.length; i++) {
+    const node = tree.children[i]
+    treeToMap(node, map)
+  }
+  return map
+}
+
+function isUnsupported(name = '') {
+  return name.endsWith('(Unsupported)') || name.endsWith('(Unknown)')
+}
+
+// An individual node in the track selector. Note: manually sets cursor:
+// pointer improves usability for what can be clicked
+export default function Node(props: {
+  data: {
+    nestingLevel: number
+    checked: boolean
+    conf: AnyConfigurationModel
+    drawerPosition: unknown
+    id: string
+    isLeaf: boolean
+    name: string
+    onChange: Function
+    toggleCollapse: (arg: string) => void
+    tree: TreeNode
+    selected: boolean
+    model: HierarchicalTrackSelectorModel
+  }
+  isOpen: boolean
+  style?: { height: number }
+  setOpen: (arg: boolean) => void
+}) {
+  const { data, isOpen, style, setOpen } = props
+  const {
+    checked,
+    conf,
+    drawerPosition,
+    id,
+    isLeaf,
+    model,
+    name,
+    nestingLevel,
+    onChange,
+    selected,
+    toggleCollapse,
+    tree,
+  } = data
+
+  const { classes } = useStyles()
+  const width = 10
+  const [menuEl, setMenuEl] = useState<HTMLElement | null>(null)
+  const [info, setInfo] = useState<InfoArgs>()
+  const marginLeft = nestingLevel * width + (isLeaf ? width : 0)
+  const description = (conf && readConfObject(conf, ['description'])) || ''
+
+  return (
+    <div style={style} className={!isLeaf ? classes.accordionBase : undefined}>
+      {new Array(nestingLevel).fill(0).map((_, idx) => (
+        <div
+          key={`mark-${idx}`}
+          style={{ left: idx * width + 4, height: style?.height }}
+          className={classes.nestingLevelMarker}
+        />
+      ))}
+      <div
+        className={!isLeaf ? classes.accordionCard : undefined}
+        onClick={() => {
+          if (!menuEl) {
+            toggleCollapse(id)
+            setOpen(!isOpen)
+          }
+        }}
+        style={{
+          marginLeft,
+          whiteSpace: 'nowrap',
+          width: '100%',
+        }}
+      >
+        <div className={!isLeaf ? classes.accordionColor : undefined}>
+          {!isLeaf ? (
+            <div className={classes.accordionText}>
+              <Typography>
+                {isOpen ? <ArrowDropDownIcon /> : <ArrowRightIcon />}
+                {name}
+                <IconButton
+                  onClick={event => {
+                    setMenuEl(event.currentTarget)
+                    event.stopPropagation()
+                  }}
+                  className={classes.contrastColor}
+                >
+                  <MoreHorizIcon />
+                </IconButton>
+              </Typography>
+            </div>
+          ) : (
+            <>
+              <Tooltip
+                title={description + (selected ? ' (in selection)' : '')}
+                placement={drawerPosition === 'left' ? 'right' : 'left'}
+              >
+                <FormControlLabel
+                  className={classes.checkboxLabel}
+                  control={
+                    <Checkbox
+                      className={classes.compactCheckbox}
+                      checked={checked}
+                      onChange={() => onChange(id)}
+                      disabled={isUnsupported(name)}
+                      inputProps={{
+                        // @ts-ignore
+                        'data-testid': `htsTrackEntry-${id}`,
+                      }}
+                    />
+                  }
+                  label={
+                    <div
+                      style={{
+                        background: selected ? '#cccc' : undefined,
+                        padding: 1,
+                      }}
+                    >
+                      {name}
+                    </div>
+                  }
+                />
+              </Tooltip>
+              <IconButton
+                onClick={e => setInfo({ target: e.currentTarget, id, conf })}
+                style={{ padding: 0 }}
+                color="secondary"
+                data-testid={`htsTrackEntryMenu-${id}`}
+              >
+                <MoreHorizIcon />
+              </IconButton>
+            </>
+          )}
+          {menuEl ? (
+            <JBrowseMenu
+              anchorEl={menuEl}
+              menuItems={[
+                {
+                  label: 'Add to selection',
+                  onClick: () =>
+                    model.addToSelection(
+                      getAllChildren(treeToMap(tree).get(id)),
+                    ),
+                },
+                {
+                  label: 'Remove from selection',
+                  onClick: () =>
+                    model.removeFromSelection(
+                      getAllChildren(treeToMap(tree).get(id)),
+                    ),
+                },
+              ]}
+              onMenuItemClick={(_event, callback) => {
+                callback()
+                setMenuEl(null)
+              }}
+              open={Boolean(menuEl)}
+              onClose={() => setMenuEl(null)}
+            />
+          ) : null}
+
+          {info ? (
+            <JBrowseMenu
+              anchorEl={info?.target}
+              menuItems={[
+                ...(getSession(model).getTrackActionMenuItems?.(info.conf) ||
+                  []),
+                {
+                  label: 'Add to selection',
+                  onClick: () => model.addToSelection([info.conf]),
+                },
+                ...(selected
+                  ? [
+                      {
+                        label: 'Remove from selection',
+                        onClick: () => model.removeFromSelection([info.conf]),
+                      },
+                    ]
+                  : []),
+              ]}
+              onMenuItemClick={(_event, callback) => {
+                callback()
+                setInfo(undefined)
+              }}
+              open={Boolean(info)}
+              onClose={() => setInfo(undefined)}
+            />
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/HierarchicalTrackSelectorWidget/components/ToggleConnectionsDialog.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
 import {
+  Button,
+  Checkbox,
   Dialog,
   DialogTitle,
   DialogContent,
   DialogActions,
-  Button,
   FormControlLabel,
-  Checkbox,
   IconButton,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 import { observer } from 'mobx-react'
 import {
   AnyConfigurationModel,
@@ -19,7 +19,7 @@ import {
 } from '@jbrowse/core/configuration'
 import { AbstractSessionModel } from '@jbrowse/core/util'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   closeButton: {
     position: 'absolute',
     right: theme.spacing(1),
@@ -44,7 +44,7 @@ function ToggleConnectionDialog({
   assemblyName: string
   breakConnection: (arg: AnyConfigurationModel) => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { connections, connectionInstances: instances = [] } = session
   const assemblySpecificConnections = connections.filter(c => {
     const configAssemblyNames = readConfObject(c, 'assemblyNames')

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

@@ -2,26 +2,23 @@
 
 exports[`HierarchicalTrackSelector widget renders nothing with no assembly 1`] = `
 <button
-  class="MuiButtonBase-root MuiFab-root makeStyles-fab MuiFab-secondary"
+  class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-secondary tss-jdumxy-fab css-kznubb-MuiButtonBase-root-MuiFab-root"
   tabindex="0"
   type="button"
 >
-  <span
-    class="MuiFab-label"
+  <svg
+    aria-hidden="true"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+    data-testid="AddIcon"
+    focusable="false"
+    viewBox="0 0 24 24"
   >
-    <svg
-      aria-hidden="true"
-      class="MuiSvgIcon-root"
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <path
-        d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-      />
-    </svg>
-  </span>
+    <path
+      d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+    />
+  </svg>
   <span
-    class="MuiTouchRipple-root"
+    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
   />
 </button>
 `;
@@ -34,96 +31,101 @@ exports[`HierarchicalTrackSelector widget renders with a couple of categorized t
     style="display: flex;"
   >
     <button
-      class="MuiButtonBase-root MuiIconButton-root makeStyles-menuIcon"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium tss-1imaff4-menuIcon css-78trlr-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
-      <span
-        class="MuiIconButton-label"
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        data-testid="MenuIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
       >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
-          />
-        </svg>
-      </span>
+        <path
+          d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+        />
+      </svg>
       <span
-        class="MuiTouchRipple-root"
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
     <button
-      class="MuiButtonBase-root MuiIconButton-root makeStyles-menuIcon"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium tss-1imaff4-menuIcon css-78trlr-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
-      <span
-        class="MuiIconButton-label"
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        focusable="false"
+        viewBox="0 0 24 24"
       >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z"
-          />
-        </svg>
-      </span>
+        <path
+          d="M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z"
+        />
+      </svg>
       <span
-        class="MuiTouchRipple-root"
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
     <div
-      class="MuiFormControl-root MuiTextField-root makeStyles-searchBox MuiFormControl-fullWidth"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root tss-11q958z-searchBox css-wb57ya-MuiFormControl-root-MuiTextField-root"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+        class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root"
         data-shrink="false"
+        for="mui-5"
+        id="mui-5-label"
       >
         Filter tracks
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+          class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputAdornedEnd css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+          id="mui-5"
           type="text"
           value=""
         />
         <div
-          class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
         >
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary MuiIconButton-sizeMedium css-1gws2xf-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
-            <span
-              class="MuiIconButton-label"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+              data-testid="ClearIcon"
+              focusable="false"
+              viewBox="0 0 24 24"
             >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.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>
+              <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"
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
             />
           </button>
         </div>
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+        >
+          <legend
+            class="css-1ftyaf0"
+          >
+            <span>
+              Filter tracks
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
   </div>
@@ -138,96 +140,101 @@ exports[`HierarchicalTrackSelector widget renders with a couple of uncategorized
     style="display: flex;"
   >
     <button
-      class="MuiButtonBase-root MuiIconButton-root makeStyles-menuIcon"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium tss-1imaff4-menuIcon css-78trlr-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
-      <span
-        class="MuiIconButton-label"
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        data-testid="MenuIcon"
+        focusable="false"
+        viewBox="0 0 24 24"
       >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
-          />
-        </svg>
-      </span>
+        <path
+          d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+        />
+      </svg>
       <span
-        class="MuiTouchRipple-root"
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
     <button
-      class="MuiButtonBase-root MuiIconButton-root makeStyles-menuIcon"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium tss-1imaff4-menuIcon css-78trlr-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
-      <span
-        class="MuiIconButton-label"
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+        focusable="false"
+        viewBox="0 0 24 24"
       >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z"
-          />
-        </svg>
-      </span>
+        <path
+          d="M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z"
+        />
+      </svg>
       <span
-        class="MuiTouchRipple-root"
+        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
     <div
-      class="MuiFormControl-root MuiTextField-root makeStyles-searchBox MuiFormControl-fullWidth"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root tss-11q958z-searchBox css-wb57ya-MuiFormControl-root-MuiTextField-root"
     >
       <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+        class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-14s5rfu-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-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
       >
         <input
           aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+          class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputAdornedEnd css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
+          id="mui-1"
           type="text"
           value=""
         />
         <div
-          class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1laqsz7-MuiInputAdornment-root"
         >
           <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary MuiIconButton-sizeMedium css-1gws2xf-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
-            <span
-              class="MuiIconButton-label"
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+              data-testid="ClearIcon"
+              focusable="false"
+              viewBox="0 0 24 24"
             >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M19 6.41L17.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>
+              <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"
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
             />
           </button>
         </div>
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+        >
+          <legend
+            class="css-1ftyaf0"
+          >
+            <span>
+              Filter tracks
+            </span>
+          </legend>
+        </fieldset>
       </div>
     </div>
   </div>

package/src/HierarchicalTrackSelectorWidget/components/util.ts

@@ -0,0 +1,11 @@
+import { AnyConfigurationModel } from '@jbrowse/core/configuration'
+import { TreeNode } from '../model'
+
+export function getAllChildren(subtree?: TreeNode): AnyConfigurationModel[] {
+  // @ts-ignore
+  return (
+    subtree?.children.map(t =>
+      t.children.length ? getAllChildren(t) : (t.conf as AnyConfigurationModel),
+    ) || []
+  ).flat(Infinity)
+}

package/src/HierarchicalTrackSelectorWidget/configSchema.ts

@@ -0,0 +1,3 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+const configSchema = ConfigurationSchema('HierarchicalTrackSelectorWidget', {})
+export default configSchema