@jbrowse/plugin-spreadsheet-view 2.6.1

package/src/SpreadsheetView/components/ColumnFilterControls.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { Grid, IconButton, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+import { getParent } from 'mobx-state-tree'
+import { makeStyles } from 'tss-react/mui'
+
+// icons
+import FilterIcon from '@mui/icons-material/FilterList'
+import CloseIcon from '@mui/icons-material/Close'
+
+const useStyles = makeStyles()(theme => ({
+  columnName: {
+    verticalAlign: 'middle',
+    paddingRight: '0.3em',
+  },
+  columnFilter: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    boxSizing: 'border-box',
+    width: '100%',
+    position: 'relative',
+  },
+  filterIcon: {
+    position: 'relative',
+    top: '12px',
+  },
+  filterIconBg: {
+    background: theme.palette.tertiary.main,
+    color: 'white',
+    padding: theme.spacing(1.5),
+  },
+}))
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function FilterOperations({ filterModel }: { filterModel: any }) {
+  if (filterModel) {
+    return <filterModel.ReactComponent filterModel={filterModel} />
+  }
+  return null
+}
+
+const ColumnFilterControls = observer(function ({
+  viewModel,
+  filterModel,
+  columnNumber,
+  height,
+}: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+any) {
+  const { classes } = useStyles()
+
+  const columnDefinition = viewModel.spreadsheet.columns[columnNumber]
+  if (!columnDefinition) {
+    throw new Error('no column definition! filters are probably out of date')
+  }
+  return (
+    <Grid
+      container
+      direction="row"
+      className={classes.columnFilter}
+      style={{ height }}
+    >
+      <Grid item className={classes.filterIconBg}>
+        <FilterIcon className={classes.filterIcon} />
+      </Grid>
+      <Grid item>
+        <IconButton
+          onClick={() =>
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            getParent<any>(filterModel, 2).removeColumnFilter(filterModel)
+          }
+          title="remove filter"
+        >
+          <CloseIcon />
+        </IconButton>
+        <Typography className={classes.columnName} component="span">
+          {columnDefinition.name}
+        </Typography>{' '}
+        <FilterOperations filterModel={filterModel} />
+      </Grid>
+    </Grid>
+  )
+})
+
+export default ColumnFilterControls

package/src/SpreadsheetView/components/ColumnMenu.tsx

@@ -0,0 +1,166 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { iterMap } from '@jbrowse/core/util'
+import { Menu } from '@jbrowse/core/ui'
+import { MenuItem } from '@jbrowse/core/ui/Menu'
+import { SpreadsheetModel } from '../models/Spreadsheet'
+import { SpreadsheetViewModel } from '../models/SpreadsheetView'
+
+// icons
+import CheckIcon from '@mui/icons-material/Check'
+import FilterListIcon from '@mui/icons-material/FilterList'
+import PermDataSettingIcon from '@mui/icons-material/PermDataSetting'
+import SortIcon from '@mui/icons-material/Sort'
+
+const ColumnMenu = observer(function ({
+  viewModel,
+  spreadsheetModel,
+  currentColumnMenu,
+  setColumnMenu,
+}: {
+  spreadsheetModel: SpreadsheetModel
+  viewModel: SpreadsheetViewModel
+  currentColumnMenu?: { colNumber: number; anchorEl: HTMLElement }
+  setColumnMenu: (arg?: { anchorEl: HTMLElement; colNumber: number }) => void
+}) {
+  const columnMenuClose = () => setColumnMenu(undefined)
+  const columnNumber = currentColumnMenu?.colNumber || 0
+  const sortMenuClick = (descending: boolean) => {
+    spreadsheetModel.setSortColumns([
+      {
+        columnNumber,
+        descending,
+      },
+    ])
+  }
+
+  const { dataTypeChoices } = spreadsheetModel
+
+  // make a Map of categoryName => [entry...]
+  type Record = (typeof dataTypeChoices)[0]
+  type RecordGroup = { isCategory: boolean; subMenuItems: Record[] }
+  const dataTypeTopLevelMenu = new Map<string, Record | RecordGroup>()
+  dataTypeChoices.forEach(dataTypeRecord => {
+    const { displayName, categoryName } = dataTypeRecord
+    if (categoryName) {
+      let entry = dataTypeTopLevelMenu.get(categoryName) as RecordGroup
+      if (!entry) {
+        entry = {
+          isCategory: true,
+          subMenuItems: [],
+        }
+        dataTypeTopLevelMenu.set(categoryName, entry)
+      }
+      entry.subMenuItems.push(dataTypeRecord)
+    } else {
+      dataTypeTopLevelMenu.set(displayName, dataTypeRecord)
+    }
+  })
+
+  const { columns, sortColumns } = spreadsheetModel
+  const dataType = currentColumnMenu && columns[columnNumber].dataType
+  const dataTypeName = dataType?.type || ''
+  const dataTypeDisplayName =
+    (currentColumnMenu && columns[columnNumber].dataType.displayName) || ''
+
+  const isSortingAscending =
+    !!currentColumnMenu &&
+    sortColumns.some(
+      c => c.columnNumber === currentColumnMenu.colNumber && !c.descending,
+    )
+  const isSortingDescending =
+    !!currentColumnMenu &&
+    sortColumns.some(
+      c => c.columnNumber === currentColumnMenu.colNumber && c.descending,
+    )
+
+  const menuItems = [
+    // top-level column menu
+    {
+      label: 'Sort ascending',
+      icon: SortIcon,
+      type: 'radio',
+      checked: isSortingAscending,
+      onClick: () => sortMenuClick(false),
+    },
+    {
+      label: 'Sort descending',
+      icon: SortIcon,
+      type: 'radio',
+      checked: isSortingDescending,
+      onClick: () => sortMenuClick(true),
+    },
+    {
+      label: 'No sort',
+      icon: SortIcon,
+      type: 'radio',
+      checked: !isSortingDescending && !isSortingAscending,
+      onClick: () => spreadsheetModel.setSortColumns([]),
+    },
+    // data type menu
+    {
+      label: `Type: ${dataTypeDisplayName}`,
+      icon: PermDataSettingIcon,
+      subMenu: iterMap(
+        dataTypeTopLevelMenu.entries(),
+        ([displayName, record]) => {
+          if ('typeName' in record && record.typeName) {
+            const { typeName } = record
+            return {
+              label: displayName || typeName,
+              icon: dataTypeName === typeName ? CheckIcon : undefined,
+              onClick: () =>
+                spreadsheetModel.setColumnType(columnNumber, typeName),
+            }
+          } else if ('subMenuItems' in record && record.subMenuItems) {
+            const { subMenuItems } = record
+            return {
+              label: displayName,
+              icon: subMenuItems.some(i => i.typeName === dataTypeName)
+                ? CheckIcon
+                : undefined,
+              subMenu: subMenuItems.map(({ typeName, displayName }) => ({
+                label: displayName,
+                icon: typeName === dataTypeName ? CheckIcon : undefined,
+                onClick: () =>
+                  spreadsheetModel.setColumnType(columnNumber, typeName),
+              })),
+            }
+          } else {
+            return null
+          }
+        },
+      ).filter(Boolean),
+    },
+  ] as MenuItem[]
+
+  // don't display the filter item if this data type doesn't have filtering
+  // implemented
+  if (dataType?.hasFilter) {
+    menuItems.push({
+      label: 'Create filter',
+      icon: FilterListIcon,
+      onClick: () =>
+        viewModel.filterControls.addBlankColumnFilter(columnNumber),
+    })
+  }
+
+  return (
+    <Menu
+      anchorEl={currentColumnMenu?.anchorEl}
+      open={Boolean(currentColumnMenu)}
+      onMenuItemClick={(_event, callback) => {
+        callback()
+        columnMenuClose()
+      }}
+      onClose={columnMenuClose}
+      menuItems={menuItems}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+    />
+  )
+})
+
+export default ColumnMenu

package/src/SpreadsheetView/components/DataRow.tsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import { Checkbox, IconButton, FormControlLabel } from '@mui/material'
+import { observer } from 'mobx-react'
+import { Instance } from 'mobx-state-tree'
+import { indigo } from '@mui/material/colors'
+import { makeStyles } from 'tss-react/mui'
+
+// icons
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown'
+
+// locals
+import SpreadsheetStateModel from '../models/Spreadsheet'
+import RowStateModel from '../models/Row'
+import CellData from './CellData'
+
+type SpreadsheetModel = Instance<typeof SpreadsheetStateModel>
+type RowModel = Instance<typeof RowStateModel>
+
+const useStyles = makeStyles()(theme => ({
+  rowNumCell: {
+    textAlign: 'left',
+    border: `1px solid ${theme.palette.action.disabledBackground}`,
+    position: 'relative',
+    padding: '0 2px 0 0',
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+  },
+  rowNumber: {
+    fontWeight: 'normal',
+    display: 'inline-block',
+    flex: 'none',
+    paddingRight: '20px',
+    margin: 0,
+    whiteSpace: 'nowrap',
+  },
+  rowMenuButton: {
+    padding: 0,
+    margin: 0,
+    position: 'absolute',
+    right: 0,
+    display: 'inline-block',
+    whiteSpace: 'nowrap',
+    flex: 'none',
+  },
+  rowMenuButtonIcon: {},
+  rowSelector: {
+    position: 'relative',
+    top: '-2px',
+    margin: 0,
+    padding: '0 0.2rem',
+  },
+
+  dataRowSelected: {
+    background: indigo[100],
+    '& th': {
+      background: indigo[100],
+    },
+  },
+}))
+
+const DataRow = observer(function ({
+  rowModel,
+  rowNumber,
+  spreadsheetModel,
+}: {
+  rowModel: RowModel
+  rowNumber: string
+  spreadsheetModel: SpreadsheetModel
+}) {
+  const { classes } = useStyles()
+  const { hideRowSelection, columnDisplayOrder } = spreadsheetModel
+  let rowClass = ''
+  if (rowModel.isSelected) {
+    rowClass += `${classes.dataRowSelected}`
+  }
+
+  function labelClick(evt: React.MouseEvent) {
+    rowModel.toggleSelect()
+    evt.stopPropagation()
+    evt.preventDefault()
+  }
+
+  return (
+    <tr className={rowClass}>
+      <td className={classes.rowNumCell} onClick={labelClick}>
+        {hideRowSelection ? (
+          <FormControlLabel
+            className={classes.rowNumber}
+            control={
+              <Checkbox
+                className={classes.rowSelector}
+                checked={rowModel.isSelected}
+                onClick={labelClick}
+              />
+            }
+            label={rowModel.id}
+          />
+        ) : null}
+        <IconButton
+          className={classes.rowMenuButton}
+          onClick={event => {
+            spreadsheetModel.setRowMenuPosition({
+              anchorEl: event.currentTarget,
+              rowNumber,
+            })
+            event.preventDefault()
+            event.stopPropagation()
+          }}
+        >
+          <ArrowDropDown className={classes.rowMenuButtonIcon} />
+        </IconButton>
+      </td>
+      {columnDisplayOrder.map(colNumber => (
+        <td key={colNumber}>
+          <CellData
+            cell={rowModel.cellsWithDerived[colNumber]}
+            spreadsheetModel={spreadsheetModel}
+            columnNumber={colNumber}
+          />
+        </td>
+      ))}
+    </tr>
+  )
+})
+
+export default DataRow

package/src/SpreadsheetView/components/DataTable.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { getParent, Instance } from 'mobx-state-tree'
+import { makeStyles } from 'tss-react/mui'
+
+// locals
+import SpreadsheetStateModel from '../models/Spreadsheet'
+import RowStateModel from '../models/Row'
+import RowMenu from './RowMenu'
+import DataRow from './DataRow'
+import DataTableHeader from './DataTableHeader'
+
+type SpreadsheetModel = Instance<typeof SpreadsheetStateModel>
+type RowModel = Instance<typeof RowStateModel>
+
+const useStyles = makeStyles()(theme => ({
+  dataTable: {
+    borderCollapse: 'collapse',
+    '& td': {
+      border: `1px solid ${theme.palette.action.disabledBackground}`,
+      padding: '0.2rem',
+      maxWidth: '50em',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+  },
+
+  emptyMessage: {
+    captionSide: 'bottom',
+  },
+}))
+
+const DataTableBody = observer(function ({
+  rows,
+  spreadsheetModel,
+  page,
+  rowsPerPage,
+}: {
+  rows: RowModel[]
+  spreadsheetModel: SpreadsheetModel
+  page: number
+  rowsPerPage: number
+}) {
+  return (
+    <tbody>
+      {rows.slice(rowsPerPage * page, rowsPerPage * (page + 1)).map(row => (
+        <DataRow
+          key={row.id}
+          rowNumber={row.id}
+          spreadsheetModel={spreadsheetModel}
+          rowModel={row}
+        />
+      ))}
+    </tbody>
+  )
+})
+
+const DataTable = observer(function ({
+  model,
+  page,
+  rowsPerPage,
+}: {
+  model: SpreadsheetModel
+  page: number
+  rowsPerPage: number
+}) {
+  const { rowSet } = model
+  const { classes } = useStyles()
+  const rows = rowSet.sortedFilteredRows
+  return (
+    <>
+      <RowMenu viewModel={getParent(model)} spreadsheetModel={model} />
+      <table className={classes.dataTable}>
+        <DataTableHeader model={model} />
+        <DataTableBody
+          rows={rows}
+          spreadsheetModel={model}
+          page={page}
+          rowsPerPage={rowsPerPage}
+        />
+        {!rows.length ? (
+          <caption className={classes.emptyMessage}>
+            {rowSet.count ? 'no rows match criteria' : 'no rows present'}
+          </caption>
+        ) : null}
+      </table>
+    </>
+  )
+})
+
+export default DataTable

package/src/SpreadsheetView/components/DataTableHeader.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react'
+import { IconButton, Tooltip } from '@mui/material'
+import { observer } from 'mobx-react'
+import { getParent } from 'mobx-state-tree'
+import { makeStyles } from 'tss-react/mui'
+
+// icons
+import CropFreeIcon from '@mui/icons-material/CropFree'
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown'
+
+// locals
+import { SpreadsheetModel } from '../models/Spreadsheet'
+import ColumnMenu from './ColumnMenu'
+import SortIndicator from './SortIndicator'
+import { numToColName } from './util'
+
+interface ColMenu {
+  colNumber: number
+  anchorEl: HTMLElement
+}
+
+const useStyles = makeStyles()(theme => ({
+  columnHead: {
+    fontWeight: 'normal',
+    background: theme.palette.mode === 'dark' ? '#333' : '#eee',
+    position: 'sticky',
+    top: 0,
+    zIndex: 2,
+    whiteSpace: 'nowrap',
+  },
+
+  columnButtonContainer: {
+    display: 'none',
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    background: theme.palette.background.paper,
+    height: '100%',
+  },
+
+  topLeftCorner: {
+    background: theme.palette.mode === 'dark' ? '#333' : '#eee',
+    zIndex: 2,
+    position: 'sticky',
+    top: 0,
+    minWidth: theme.spacing(2),
+    textAlign: 'left',
+  },
+}))
+
+const DataTableHeader = observer(function ({
+  model,
+}: {
+  model: SpreadsheetModel
+}) {
+  const { classes } = useStyles()
+  const { columnDisplayOrder, columns, hasColumnNames, rowSet } = model
+  const [currentColumnMenu, setColumnMenu] = useState<ColMenu>()
+  const [currentHoveredColumn, setHoveredColumn] = useState<number>()
+
+  return (
+    <>
+      <thead>
+        <tr>
+          <th className={classes.topLeftCorner}>
+            <Tooltip title="Unselect all" placement="right">
+              <span>
+                <IconButton
+                  onClick={() => model.unselectAll()}
+                  disabled={!rowSet.selectedCount}
+                >
+                  <CropFreeIcon />
+                </IconButton>
+              </span>
+            </Tooltip>
+          </th>
+          {columnDisplayOrder.map(colNumber => (
+            <th
+              className={classes.columnHead}
+              key={colNumber}
+              onMouseOver={() => setHoveredColumn(colNumber)}
+              onMouseOut={() => setHoveredColumn(undefined)}
+            >
+              <SortIndicator model={model} columnNumber={colNumber} />
+              {(hasColumnNames && columns[colNumber]?.name) ||
+                numToColName(colNumber)}
+              <div
+                className={classes.columnButtonContainer}
+                style={{
+                  display:
+                    currentHoveredColumn === colNumber ||
+                    currentColumnMenu?.colNumber === colNumber
+                      ? 'block'
+                      : 'none',
+                }}
+              >
+                <IconButton
+                  onClick={evt => {
+                    setColumnMenu({
+                      colNumber,
+                      anchorEl: evt.currentTarget,
+                    })
+                  }}
+                >
+                  <ArrowDropDown />
+                </IconButton>
+              </div>
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <ColumnMenu
+        viewModel={getParent(model)}
+        spreadsheetModel={model}
+        currentColumnMenu={currentColumnMenu}
+        setColumnMenu={setColumnMenu}
+      />
+    </>
+  )
+})
+
+export default DataTableHeader

package/src/SpreadsheetView/components/GlobalFilterControls.tsx

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react'
+
+import { IconButton, InputAdornment, TextField } from '@mui/material'
+import ClearIcon from '@mui/icons-material/Clear'
+import FilterIcon from '@mui/icons-material/FilterList'
+
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+import { useDebounce } from '@jbrowse/core/util'
+
+const useStyles = makeStyles()({
+  textFilterControlEndAdornment: {
+    marginRight: '-18px',
+  },
+})
+
+const TextFilter = observer(function ({
+  textFilter,
+}: {
+  textFilter: { stringToFind: string; setString: (arg: string) => void }
+}) {
+  const { classes } = useStyles()
+  // this paragraph is silliness to debounce the text filter input
+  const [textFilterValue, setTextFilterValue] = useState(
+    textFilter.stringToFind,
+  )
+  const debouncedTextFilter = useDebounce(textFilterValue, 500)
+  useEffect(() => {
+    textFilter.setString(debouncedTextFilter)
+  }, [debouncedTextFilter, textFilter])
+
+  return (
+    <div>
+      <TextField
+        label="text filter"
+        value={textFilterValue}
+        onChange={evt => setTextFilterValue(evt.target.value)}
+        variant="outlined"
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <FilterIcon />
+            </InputAdornment>
+          ),
+          endAdornment: (
+            <InputAdornment
+              className={classes.textFilterControlEndAdornment}
+              position="end"
+            >
+              <IconButton
+                aria-label="clear filter"
+                onClick={() => setTextFilterValue('')}
+              >
+                <ClearIcon />
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+      />
+    </div>
+  )
+})
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const GlobalFilterControls = observer(({ model }: { model: any }) => {
+  const textFilter = model.filterControls.rowFullText
+  return <TextFilter textFilter={textFilter} />
+})
+
+export default GlobalFilterControls