@jbrowse/plugin-data-management 2.6.1 → 2.6.2

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

@@ -1,138 +0,0 @@
-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-expect-error
-            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>())
-  for (const row of rows) {
-    for (const [index, column] of facets.entries()) {
-      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, 1)
-        } else {
-          elt.set(key, val + 1)
-        }
-      }
-    }
-  }
-
-  return (
-    <div>
-      {facets.map((column, index) => (
-        <FacetFilter
-          key={column.field}
-          vals={[...uniqs[index]]}
-          column={column}
-          width={width}
-          dispatch={dispatch}
-          filters={filters}
-        />
-      ))}
-    </div>
-  )
-}

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

@@ -1,29 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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,
-  setShowOptions,
-  showOptions,
-  hideSparse,
-  useShoppingCart,
-  filterText,
-  model,
-}: {
-  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
-}) {
-  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',
-          },
-          {
-            label: 'Show extra table options',
-            onClick: () => setShowOptions(!showOptions),
-            checked: showOptions,
-            type: 'checkbox',
-          },
-        ]}
-      />
-    </>
-  )
-}

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

@@ -1,342 +0,0 @@
-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, GridToolbar } from '@mui/x-data-grid'
-
-// jbrowse
-import { getTrackName } from '@jbrowse/core/util/tracks'
-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 {
-  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 { 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 session = getSession(model)
-  const filterDebounced = useDebounce(filterText, 400)
-  const tracks = view.tracks as AnyConfigurationModel[]
-  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
-      .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,
-        }
-      })
-  }, [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.flatMap(row => getRootKeys(row.metadata)))].filter(f =>
-        !hideSparse
-          ? true
-          : rows.map(r => r.metadata[f]).filter(f => !!f).length > 5,
-      ),
-    [hideSparse, rows],
-  )
-
-  const fields = useMemo(
-    () => ['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 | undefined })
-
-  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 as string} />
-            <IconButton
-              onClick={e =>
-                setInfo({
-                  target: e.currentTarget,
-                  id: id as string,
-                  conf: row.conf,
-                })
-              }
-            >
-              <MoreHoriz />
-            </IconButton>
-          </>
-        )
-      },
-      width: widthsDebounced.name ?? 100,
-    },
-    ...filteredNonMetadataKeys.map(e => ({
-      field: e,
-      width: widthsDebounced[e] ?? 100,
-      renderCell: (params: GridCellParams) => {
-        const { value } = params
-        return value ? <SanitizedHTML html={value as string} /> : ''
-      },
-    })),
-    ...filteredMetadataKeys.map(e => ({
-      field: e,
-      width: widthsDebounced[e] ?? 100,
-      renderCell: (params: GridCellParams) => {
-        const { value } = params
-        return value ? <SanitizedHTML html={value as string} /> : ''
-      },
-    })),
-  ]
-
-  const shownTrackIds = tracks.map(t => 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}
-        setShowOptions={setShowOptions}
-        setFilterText={setFilterText}
-        setUseShoppingCart={setUseShoppingCart}
-        hideSparse={hideSparse}
-        showOptions={showOptions}
-        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).map(f => f ?? 100)}
-            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)}
-            columnHeaderHeight={35}
-            checkboxSelection
-            disableRowSelectionOnClick
-            keepNonExistentRowsSelected
-            onRowSelectionModelChange={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)
-              }
-            }}
-            rowSelectionModel={
-              useShoppingCart ? selection.map(s => s.trackId) : shownTrackIds
-            }
-            slots={{ toolbar: showOptions ? GridToolbar : null }}
-            slotProps={{
-              toolbar: { printOptions: { disableToolbarButton: true } },
-            }}
-            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

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