@jbrowse/plugin-data-management 2.5.0 → 2.6.2

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,346 +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 { assemblyNames, 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 [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.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(() => {
-    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 as string} />
-            <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 as string} /> : ''
-      },
-    })),
-    ...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 as string} /> : ''
-      },
-    })),
-  ]
-
-  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}
-        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)}
-            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)
-}

package/src/HierarchicalTrackSelectorWidget/components/tree/HamburgerMenu.tsx

@@ -1,195 +0,0 @@
-import React, { Suspense, lazy, useState } from 'react'
-import { IconButton } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import JBrowseMenu from '@jbrowse/core/ui/Menu'
-import {
-  getSession,
-  isSessionModelWithWidgets,
-  isSessionModelWithConnections,
-} from '@jbrowse/core/util'
-import {
-  AnyConfigurationModel,
-  readConfObject,
-} from '@jbrowse/core/configuration'
-
-// icons
-import MenuIcon from '@mui/icons-material/Menu'
-
-// locals
-import { HierarchicalTrackSelectorModel } from '../../model'
-
-// lazy components
-const CloseConnectionDlg = lazy(
-  () => import('../dialogs/CloseConnectionDialog'),
-)
-const DeleteConnectionDlg = lazy(
-  () => import('../dialogs/DeleteConnectionDialog'),
-)
-const ManageConnectionsDlg = lazy(
-  () => import('../dialogs/ManageConnectionsDialog'),
-)
-const ToggleConnectionsDlg = lazy(
-  () => import('../dialogs/ToggleConnectionsDialog'),
-)
-
-const useStyles = makeStyles()(theme => ({
-  menuIcon: {
-    marginRight: theme.spacing(1),
-    marginBottom: 0,
-  },
-}))
-
-interface ModalArgs {
-  connectionConf: AnyConfigurationModel
-  safelyBreakConnection: Function
-  dereferenceTypeCount: { [key: string]: number }
-  name: string
-}
-
-interface DialogDetails {
-  name: string
-  connectionConf: AnyConfigurationModel
-}
-
-export default observer(function HamburgerMenu({
-  model,
-  setAssemblyIdx,
-}: {
-  model: HierarchicalTrackSelectorModel
-  setAssemblyIdx: Function
-}) {
-  const session = getSession(model)
-  const [menuEl, setMenuEl] = useState<HTMLButtonElement>()
-  const [modalInfo, setModalInfo] = useState<ModalArgs>()
-  const [deleteDlgDetails, setDeleteDlgDetails] = useState<DialogDetails>()
-  const [connectionToggleOpen, setConnectionToggleOpen] = useState(false)
-  const [connectionManagerOpen, setConnectionManagerOpen] = useState(false)
-  const { classes } = useStyles()
-  const { assemblyNames } = model
-
-  function breakConnection(
-    connectionConf: AnyConfigurationModel,
-    deletingConnection?: boolean,
-  ) {
-    const name = readConfObject(connectionConf, 'name')
-    const result = session.prepareToBreakConnection(connectionConf)
-    if (result) {
-      const [safelyBreakConnection, dereferenceTypeCount] = result
-      if (Object.keys(dereferenceTypeCount).length > 0) {
-        setModalInfo({
-          connectionConf,
-          safelyBreakConnection,
-          dereferenceTypeCount,
-          name,
-        })
-      } else {
-        safelyBreakConnection()
-      }
-    }
-    if (deletingConnection) {
-      setDeleteDlgDetails({ name, connectionConf })
-    }
-  }
-
-  const connectionMenuItems = [
-    {
-      label: 'Turn on/off connections...',
-      onClick: () => setConnectionToggleOpen(true),
-    },
-  ]
-
-  if (isSessionModelWithConnections(session)) {
-    connectionMenuItems.unshift({
-      label: 'Add connection...',
-      onClick: () => {
-        if (isSessionModelWithWidgets(session)) {
-          session.showWidget(
-            session.addWidget('AddConnectionWidget', 'addConnectionWidget'),
-          )
-        }
-      },
-    })
-
-    connectionMenuItems.push({
-      label: 'Delete connections...',
-      onClick: () => setConnectionManagerOpen(true),
-    })
-  }
-  return (
-    <>
-      <IconButton
-        className={classes.menuIcon}
-        onClick={event => setMenuEl(event.currentTarget)}
-      >
-        <MenuIcon />
-      </IconButton>
-
-      <JBrowseMenu
-        anchorEl={menuEl}
-        open={Boolean(menuEl)}
-        onMenuItemClick={(_, callback) => {
-          callback()
-          setMenuEl(undefined)
-        }}
-        onClose={() => setMenuEl(undefined)}
-        menuItems={[
-          {
-            label: 'Add track...',
-            onClick: () => {
-              if (isSessionModelWithWidgets(session)) {
-                session.showWidget(
-                  session.addWidget('AddTrackWidget', 'addTrackWidget', {
-                    view: model.view.id,
-                  }),
-                )
-              }
-            },
-          },
-          ...(session.makeConnection ? connectionMenuItems : []),
-
-          ...(assemblyNames.length > 1
-            ? [
-                {
-                  label: 'Select assembly...',
-                  subMenu: assemblyNames.map((name, idx) => ({
-                    label: name,
-                    onClick: () => setAssemblyIdx(idx),
-                  })),
-                },
-              ]
-            : []),
-        ]}
-      />
-      <Suspense fallback={<div />}>
-        {modalInfo ? (
-          <CloseConnectionDlg
-            modalInfo={modalInfo}
-            setModalInfo={setModalInfo}
-          />
-        ) : null}
-        {deleteDlgDetails ? (
-          <DeleteConnectionDlg
-            handleClose={() => setDeleteDlgDetails(undefined)}
-            deleteDialogDetails={deleteDlgDetails}
-            session={session}
-          />
-        ) : null}
-        {connectionManagerOpen ? (
-          <ManageConnectionsDlg
-            handleClose={() => setConnectionManagerOpen(false)}
-            breakConnection={breakConnection}
-            session={session}
-          />
-        ) : null}
-        {connectionToggleOpen ? (
-          <ToggleConnectionsDlg
-            handleClose={() => setConnectionToggleOpen(false)}
-            session={session}
-            breakConnection={breakConnection}
-          />
-        ) : null}
-      </Suspense>
-    </>
-  )
-})