@jbrowse/plugin-data-management 2.3.3 → 2.4.0

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',
+          },
+        ]}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,339 @@
+import React, { useMemo, useState, useEffect, useReducer } from 'react'
+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'
+
+// jbrowse
+import { getTrackName } from '@jbrowse/core/util/tracks'
+import { ResizeHandle, SanitizedHTML } from '@jbrowse/core/ui'
+import JBrowseMenu from '@jbrowse/core/ui/Menu'
+import ResizeBar, { useResizeBar } from '@jbrowse/core/ui/ResizeBar'
+import {
+  getEnv,
+  getSession,
+  measureGridWidth,
+  useDebounce,
+} from '@jbrowse/core/util'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+
+// icons
+import MoreHoriz from '@mui/icons-material/MoreHoriz'
+
+// locals
+import { matches, HierarchicalTrackSelectorModel } from '../../model'
+import FacetedHeader from './FacetedHeader'
+import FacetFilters from './FacetFilters'
+import { getRootKeys } from './util'
+
+const nonMetadataKeys = ['category', 'adapter', 'description'] as const
+
+export interface InfoArgs {
+  target: HTMLElement
+  id: string
+  conf: AnyConfigurationModel
+}
+
+const frac = 0.75
+
+export default observer(function FacetedSelector({
+  model,
+}: {
+  model: HierarchicalTrackSelectorModel
+}) {
+  const { assemblyNames, view, selection } = model
+  const { pluginManager } = getEnv(model)
+  const { ref, scrollLeft } = useResizeBar()
+
+  const [filterText, setFilterText] = useState('')
+  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 [filters, dispatch] = useReducer(
+    (
+      state: Record<string, string[]>,
+      update: { key: string; val: string[] },
+    ) => {
+      return { ...state, [update.key]: update.val }
+    },
+    {},
+  )
+
+  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)
+      .filter(conf => matches(filterDebounced, conf, session))
+      .map(track => {
+        const metadata = readConfObject(track, 'metadata')
+        return {
+          id: track.trackId,
+          conf: track,
+          name: getTrackName(track, session),
+          category: readConfObject(track, 'category')?.join(', '),
+          adapter: readConfObject(track, 'adapter')?.type,
+          description: readConfObject(track, 'description'),
+          metadata,
+          ...metadata,
+        }
+      })
+  }, [assemblyName, model, filterDebounced, session])
+
+  const filteredNonMetadataKeys = useMemo(
+    () =>
+      nonMetadataKeys.filter(f =>
+        !hideSparse ? true : rows.map(r => r[f]).filter(f => !!f).length > 5,
+      ),
+    [hideSparse, rows],
+  )
+
+  const filteredMetadataKeys = useMemo(
+    () =>
+      [...new Set(rows.map(row => getRootKeys(row.metadata)).flat())].filter(
+        f =>
+          !hideSparse
+            ? true
+            : rows.map(r => r.metadata[f]).filter(f => !!f).length > 5,
+      ),
+    [hideSparse, rows],
+  )
+
+  const fields = useMemo(() => {
+    return ['name', ...filteredNonMetadataKeys, ...filteredMetadataKeys]
+  }, [filteredNonMetadataKeys, filteredMetadataKeys])
+
+  const [widths, setWidths] = useState({
+    name:
+      measureGridWidth(
+        rows.map(r => r.name),
+        { maxWidth: 500, stripHTML: true },
+      ) + 15,
+    ...Object.fromEntries(
+      filteredNonMetadataKeys.map(e => [
+        e,
+        measureGridWidth(
+          rows.map(r => r[e]),
+          { maxWidth: 400, stripHTML: true },
+        ),
+      ]),
+    ),
+    ...Object.fromEntries(
+      filteredMetadataKeys.map(e => [
+        e,
+        measureGridWidth(
+          rows.map(r => r.metadata[e]),
+          { maxWidth: 400, stripHTML: true },
+        ),
+      ]),
+    ),
+  } as { [key: string]: number })
+
+  const [visible, setVisible] = useState(
+    Object.fromEntries(fields.map(c => [c, true])),
+  )
+  useEffect(() => {
+    setVisible(visible => ({
+      ...Object.fromEntries(fields.map(c => [c, true])),
+      ...visible,
+    }))
+  }, [fields])
+
+  useEffect(() => {
+    setWidths(widths => ({
+      name: widths.name,
+      ...Object.fromEntries(
+        filteredNonMetadataKeys
+          .filter(f => visible[f])
+          .map(e => [
+            e,
+            measureGridWidth(
+              rows.map(r => r[e]),
+              { stripHTML: true, maxWidth: 400 },
+            ),
+          ]),
+      ),
+      ...Object.fromEntries(
+        filteredMetadataKeys
+          .filter(f => visible[f])
+          .map(e => [
+            e,
+            measureGridWidth(
+              rows.map(r => r.metadata[e]),
+              { stripHTML: true, maxWidth: 400 },
+            ),
+          ]),
+      ),
+    }))
+  }, [filteredMetadataKeys, visible, filteredNonMetadataKeys, hideSparse, rows])
+
+  const widthsDebounced = useDebounce(widths, 400)
+
+  const columns = [
+    {
+      field: 'name',
+      hideable: false,
+      renderCell: (params: GridCellParams) => {
+        const { value, id, row } = params
+        return (
+          <>
+            <SanitizedHTML html={value} />
+            <IconButton
+              onClick={e =>
+                setInfo({
+                  target: e.currentTarget,
+                  id: id as string,
+                  conf: row.conf,
+                })
+              }
+            >
+              <MoreHoriz />
+            </IconButton>
+          </>
+        )
+      },
+      width: widthsDebounced.name || 100, // can be undefined before useEffect update
+    },
+    ...filteredNonMetadataKeys.map(e => ({
+      field: e,
+      width: widthsDebounced[e] || 100, // can be undefined before useEffect update
+      renderCell: (params: GridCellParams) => {
+        const { value } = params
+        return value ? <SanitizedHTML html={value} /> : ''
+      },
+    })),
+    ...filteredMetadataKeys.map(e => ({
+      field: e,
+      width: widthsDebounced[e] || 100, // can be undefined before useEffect update
+      renderCell: (params: GridCellParams) => {
+        const { value } = params
+        return value ? <SanitizedHTML html={value} /> : ''
+      },
+    })),
+  ]
+
+  const shownTrackIds = view.tracks.map(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (t: any) => t.configuration.trackId,
+  ) as string[]
+
+  const arrFilters = Object.entries(filters).filter(f => f[1].length > 0)
+  return (
+    <>
+      {info ? (
+        <JBrowseMenu
+          anchorEl={info?.target}
+          menuItems={session.getTrackActionMenuItems?.(info.conf) || []}
+          onMenuItemClick={(_event, callback) => {
+            callback()
+            setInfo(undefined)
+          }}
+          open={!!info}
+          onClose={() => setInfo(undefined)}
+        />
+      ) : null}
+      <FacetedHeader
+        setHideSparse={setHideSparse}
+        setFilterText={setFilterText}
+        setUseShoppingCart={setUseShoppingCart}
+        hideSparse={hideSparse}
+        filterText={filterText}
+        useShoppingCart={useShoppingCart}
+        model={model}
+      />
+
+      <div
+        ref={ref}
+        style={{
+          display: 'flex',
+          overflow: 'hidden',
+          height: window.innerHeight * frac,
+          width: window.innerWidth * frac,
+        }}
+      >
+        <div
+          style={{
+            height: window.innerHeight * frac,
+            width: window.innerWidth * frac - panelWidth,
+          }}
+        >
+          <ResizeBar
+            checkbox
+            widths={Object.values(widths)}
+            setWidths={newWidths =>
+              setWidths(
+                Object.fromEntries(
+                  Object.entries(widths).map((entry, idx) => [
+                    entry[0],
+                    newWidths[idx],
+                  ]),
+                ),
+              )
+            }
+            scrollLeft={scrollLeft}
+          />
+          <DataGrid
+            rows={rows.filter(row =>
+              arrFilters.every(([key, val]) => val.includes(row[key])),
+            )}
+            columnVisibilityModel={visible}
+            onColumnVisibilityModelChange={newModel => setVisible(newModel)}
+            headerHeight={35}
+            checkboxSelection
+            disableSelectionOnClick
+            keepNonExistentRowsSelected
+            onSelectionModelChange={userSelectedIds => {
+              if (!useShoppingCart) {
+                const a1 = shownTrackIds
+                const a2 = userSelectedIds as string[]
+                // synchronize the user selection with the view
+                // see share https://stackoverflow.com/a/33034768/2129219
+                transaction(() => {
+                  a1.filter(x => !a2.includes(x)).map(t => view.hideTrack(t))
+                  a2.filter(x => !a1.includes(x)).map(t => view.showTrack(t))
+                })
+              } else {
+                const root = getRoot(model)
+                const schema = pluginManager.pluggableConfigSchemaType('track')
+                const tracks = userSelectedIds.map(id =>
+                  resolveIdentifier(schema, root, id),
+                )
+                model.setSelection(tracks)
+              }
+            }}
+            selectionModel={
+              useShoppingCart ? selection.map(s => s.trackId) : shownTrackIds
+            }
+            columns={columns}
+            rowHeight={25}
+          />
+        </div>
+        <ResizeHandle
+          vertical
+          onDrag={dist => setPanelWidth(panelWidth - dist)}
+          style={{ background: 'grey', width: 5 }}
+        />
+        <div
+          style={{ width: panelWidth, overflowY: 'auto', overflowX: 'hidden' }}
+        >
+          <FacetFilters
+            width={panelWidth - 10}
+            rows={rows}
+            columns={columns}
+            dispatch={dispatch}
+            filters={filters}
+          />
+        </div>
+      </div>
+    </>
+  )
+})

package/src/HierarchicalTrackSelectorWidget/components/faceted/util.ts

@@ -0,0 +1,5 @@
+export function getRootKeys(obj: Record<string, unknown>) {
+  return Object.entries(obj)
+    .map(([key, val]) => (typeof val === 'string' ? key : ''))
+    .filter(f => !!f)
+}