@jbrowse/plugin-spreadsheet-view 2.6.1 → 2.6.2

package/src/SpreadsheetView/components/CellData.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-import { Instance } from 'mobx-state-tree'
-
-// locals
-import SpreadsheetStateModel from '../models/Spreadsheet'
-
-type SpreadsheetModel = Instance<typeof SpreadsheetStateModel>
-
-const CellData = observer(function ({
-  cell,
-  spreadsheetModel,
-  columnNumber,
-}: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  cell: any
-  spreadsheetModel: SpreadsheetModel
-  columnNumber: number
-}) {
-  const ret = spreadsheetModel.columns[columnNumber]
-  if (ret && 'dataType' in ret && ret.dataType.DataCellReactComponent) {
-    return (
-      <ret.dataType.DataCellReactComponent
-        cell={cell}
-        dataType={ret.dataType}
-        columnNumber={columnNumber}
-        spreadsheet={spreadsheetModel}
-      />
-    )
-  }
-
-  return cell.text
-})
-
-export default CellData

package/src/SpreadsheetView/components/ColumnFilterControls.tsx

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

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

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

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

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

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