@jbrowse/plugin-data-management 2.3.2 → 2.3.4

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HierarchicalTrackSelector widget renders nothing with no assembly 1`] = `
+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"
@@ -23,7 +23,7 @@ exports[`HierarchicalTrackSelector widget renders nothing with no assembly 1`] =
 </button>
 `;
 
-exports[`HierarchicalTrackSelector widget renders with a couple of categorized tracks 1`] = `
+exports[`renders with a couple of categorized tracks 1`] = `
 <div
   data-testid="hierarchical_track_selector"
 >
@@ -50,25 +50,6 @@ exports[`HierarchicalTrackSelector widget renders with a couple of categorized t
         class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
-    <button
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1m9x3cr-MuiButtonBase-root-MuiIconButton-root-menuIcon"
-      tabindex="0"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-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
-        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"
     >
@@ -81,7 +62,7 @@ exports[`HierarchicalTrackSelector widget renders with a couple of categorized t
         Filter tracks
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1wz39fi-MuiInputBase-root-MuiInput-root"
+        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"
@@ -116,11 +97,21 @@ exports[`HierarchicalTrackSelector widget renders with a couple of categorized t
         </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[`HierarchicalTrackSelector widget renders with a couple of uncategorized tracks 1`] = `
+exports[`renders with a couple of uncategorized tracks 1`] = `
 <div
   data-testid="hierarchical_track_selector"
 >
@@ -147,25 +138,6 @@ exports[`HierarchicalTrackSelector widget renders with a couple of uncategorized
         class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
       />
     </button>
-    <button
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1m9x3cr-MuiButtonBase-root-MuiIconButton-root-menuIcon"
-      tabindex="0"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-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
-        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"
     >
@@ -178,7 +150,7 @@ exports[`HierarchicalTrackSelector widget renders with a couple of uncategorized
         Filter tracks
       </label>
       <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1wz39fi-MuiInputBase-root-MuiInput-root"
+        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"
@@ -213,6 +185,16 @@ exports[`HierarchicalTrackSelector widget renders with a couple of uncategorized
         </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>
 `;

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

@@ -0,0 +1,138 @@
+import React, { useState } from 'react'
+import {
+  Typography,
+  FormControl,
+  Select,
+  IconButton,
+  Tooltip,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+// icon
+import ClearIcon from '@mui/icons-material/Clear'
+import MinimizeIcon from '@mui/icons-material/Minimize'
+import AddIcon from '@mui/icons-material/Add'
+
+const useStyles = makeStyles()(theme => ({
+  facet: {
+    margin: 0,
+    marginLeft: theme.spacing(2),
+  },
+  select: {
+    marginBottom: theme.spacing(2),
+  },
+}))
+
+function FacetFilter({
+  column,
+  vals,
+  width,
+  dispatch,
+  filters,
+}: {
+  column: { field: string }
+  vals: [string, number][]
+  width: number
+  dispatch: (arg: { key: string; val: string[] }) => void
+  filters: Record<string, string[]>
+}) {
+  const { classes } = useStyles()
+  const [visible, setVisible] = useState(true)
+  return (
+    <FormControl key={column.field} className={classes.facet} style={{ width }}>
+      <div style={{ display: 'flex' }}>
+        <Typography>{column.field}</Typography>
+        <Tooltip title="Clear selection on this facet filter">
+          <IconButton
+            onClick={() => {
+              dispatch({ key: column.field, val: [] })
+            }}
+            size="small"
+          >
+            <ClearIcon />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Minimize/expand this facet filter">
+          <IconButton onClick={() => setVisible(!visible)} size="small">
+            {visible ? <MinimizeIcon /> : <AddIcon />}
+          </IconButton>
+        </Tooltip>
+      </div>
+      {visible ? (
+        <Select
+          multiple
+          native
+          className={classes.select}
+          value={filters[column.field]}
+          onChange={event => {
+            // @ts-ignore
+            const { options } = event.target
+            const val: string[] = []
+            const len = options.length
+            for (let i = 0; i < len; i++) {
+              if (options[i].selected) {
+                val.push(options[i].value)
+              }
+            }
+            dispatch({ key: column.field, val })
+          }}
+        >
+          {vals
+            .sort((a, b) => a[0].localeCompare(b[0]))
+            .map(([name, count]) => (
+              <option key={name} value={name}>
+                {name} ({count})
+              </option>
+            ))}
+        </Select>
+      ) : null}
+    </FormControl>
+  )
+}
+
+export default function FacetFilters({
+  rows,
+  columns,
+  dispatch,
+  filters,
+  width,
+}: {
+  rows: Record<string, unknown>[]
+  filters: Record<string, string[]>
+  columns: { field: string }[]
+  dispatch: (arg: { key: string; val: string[] }) => void
+  width: number
+}) {
+  const facets = columns.slice(1)
+  const uniqs = facets.map(() => new Map<string, number>())
+  rows.forEach(row => {
+    facets.forEach((column, index) => {
+      const elt = uniqs[index]
+      const key = `${row[column.field] || ''}`
+      const val = elt.get(key)
+      // we don't allow filtering on empty yet
+      if (key) {
+        if (val !== undefined) {
+          elt.set(key, val + 1)
+        } else {
+          elt.set(key, 1)
+        }
+      }
+    })
+  })
+
+  return (
+    <div>
+      {facets.map((column, index) => (
+        <FacetFilter
+          key={column.field}
+          vals={Array.from(uniqs[index])}
+          column={column}
+          width={width}
+          dispatch={dispatch}
+          filters={filters}
+        />
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { DialogContent } from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
+import { observer } from 'mobx-react'
+
+// locals
+import { HierarchicalTrackSelectorModel } from '../../model'
+import FacetedSelector from './FacetedSelector'
+
+function FacetedDlg(props: {
+  handleClose: () => void
+  model: HierarchicalTrackSelectorModel
+}) {
+  const { handleClose } = props
+  return (
+    <Dialog
+      open
+      onClose={handleClose}
+      maxWidth="xl"
+      title="Faceted track selector"
+    >
+      <DialogContent>
+        <FacetedSelector {...props} />
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default observer(FacetedDlg)

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

@@ -0,0 +1,86 @@
+import React, { useState } from 'react'
+import { Grid, IconButton, InputAdornment, TextField } from '@mui/material'
+import { Menu } from '@jbrowse/core/ui'
+
+// icons
+import ClearIcon from '@mui/icons-material/Clear'
+import MoreVert from '@mui/icons-material/MoreVert'
+
+// locals
+import ShoppingCart from '../ShoppingCart'
+import { HierarchicalTrackSelectorModel } from '../../model'
+
+export default function FacetedHeader({
+  setFilterText,
+  setUseShoppingCart,
+  setHideSparse,
+  hideSparse,
+  useShoppingCart,
+  filterText,
+  model,
+}: {
+  setFilterText: (arg: string) => void
+  setUseShoppingCart: (arg: boolean) => void
+  setHideSparse: (arg: boolean) => void
+  filterText: string
+  useShoppingCart: boolean
+  hideSparse: boolean
+  model: HierarchicalTrackSelectorModel
+}) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+
+  return (
+    <>
+      <Grid container spacing={4} alignItems="center">
+        <Grid item>
+          <TextField
+            label="Search..."
+            value={filterText}
+            onChange={event => setFilterText(event.target.value)}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton onClick={() => setFilterText('')}>
+                    <ClearIcon />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+        </Grid>
+
+        <Grid item>
+          <IconButton onClick={event => setAnchorEl(event.currentTarget)}>
+            <MoreVert />
+          </IconButton>
+        </Grid>
+        <Grid item>
+          <ShoppingCart model={model} />
+        </Grid>
+      </Grid>
+      <Menu
+        anchorEl={anchorEl}
+        open={!!anchorEl}
+        onClose={() => setAnchorEl(null)}
+        onMenuItemClick={(_event, callback) => {
+          callback()
+          setAnchorEl(null)
+        }}
+        menuItems={[
+          {
+            label: 'Add tracks to selection instead of turning them on/off',
+            onClick: () => setUseShoppingCart(!useShoppingCart),
+            type: 'checkbox',
+            checked: useShoppingCart,
+          },
+          {
+            label: 'Hide sparse metadata columns',
+            onClick: () => setHideSparse(!hideSparse),
+            checked: hideSparse,
+            type: 'checkbox',
+          },
+        ]}
+      />
+    </>
+  )
+}