@jbrowse/plugin-spreadsheet-view 2.6.1

package/src/SpreadsheetView/components/ImportWizard.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  FormGroup,
+  FormLabel,
+  FormControlLabel,
+  RadioGroup,
+  Radio,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import { getRoot } from 'mobx-state-tree'
+import { AbstractRootModel, getSession } from '@jbrowse/core/util'
+import { FileSelector, ErrorMessage, AssemblySelector } from '@jbrowse/core/ui'
+
+// locals
+import { ImportWizardModel } from '../models/ImportWizard'
+import NumberEditor from './NumberEditor'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()({
+  container: {
+    margin: '0 auto',
+    maxWidth: '25em',
+    padding: 20,
+  },
+})
+
+const ImportWizard = observer(({ model }: { model: ImportWizardModel }) => {
+  const session = getSession(model)
+  const { classes } = useStyles()
+  const { assemblyNames, assemblyManager } = session
+  const {
+    fileType,
+    canCancel,
+    fileSource,
+    isReadyToOpen,
+    fileTypes,
+    hasColumnNameLine,
+    error,
+  } = model
+  const [selected, setSelected] = useState(assemblyNames[0])
+  const err = assemblyManager.get(selected)?.error || error
+  const showRowControls = fileType === 'CSV' || fileType === 'TSV'
+  const rootModel = getRoot(model)
+
+  return (
+    <div className={classes.container}>
+      {err ? <ErrorMessage error={err} /> : null}
+      <div>
+        <FormControl component="fieldset">
+          <FormLabel component="legend">Tabular file</FormLabel>
+          <FormGroup>
+            <FileSelector
+              location={fileSource}
+              setLocation={arg => model.setFileSource(arg)}
+              rootModel={rootModel as AbstractRootModel}
+            />
+          </FormGroup>
+        </FormControl>
+      </div>
+      <div>
+        <FormControl component="fieldset">
+          <FormLabel component="legend">File Type</FormLabel>
+          <RadioGroup row aria-label="file type" name="type" value={fileType}>
+            {fileTypes.map(fileTypeName => (
+              <FormControlLabel
+                key={fileTypeName}
+                checked={fileType === fileTypeName}
+                value={fileTypeName}
+                onClick={() => model.setFileType(fileTypeName)}
+                control={<Radio />}
+                label={fileTypeName}
+              />
+            ))}
+          </RadioGroup>
+        </FormControl>
+      </div>
+      {showRowControls ? (
+        <div>
+          <FormControl component="fieldset">
+            <FormLabel component="legend">Column Names</FormLabel>
+            <FormControlLabel
+              disabled={!showRowControls}
+              label="has column names on line"
+              labelPlacement="end"
+              control={
+                <Checkbox
+                  checked={hasColumnNameLine}
+                  onClick={() => model.toggleHasColumnNameLine()}
+                />
+              }
+            />
+            <NumberEditor
+              model={model}
+              disabled={!showRowControls || !hasColumnNameLine}
+              modelPropName="columnNameLineNumber"
+              modelSetterName="setColumnNameLineNumber"
+            />
+          </FormControl>
+        </div>
+      ) : null}
+      <div>
+        <AssemblySelector
+          session={session}
+          selected={selected}
+          onChange={val => setSelected(val)}
+        />
+      </div>
+      <div>
+        {canCancel ? (
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={() => model.cancelButton()}
+            disabled={!canCancel}
+          >
+            Cancel
+          </Button>
+        ) : null}{' '}
+        <Button
+          disabled={!isReadyToOpen || !!err}
+          variant="contained"
+          data-testid="open_spreadsheet"
+          color="primary"
+          onClick={() => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            model.import(selected)
+          }}
+        >
+          Open
+        </Button>
+      </div>
+    </div>
+  )
+})
+
+export default ImportWizard

package/src/SpreadsheetView/components/NumberEditor.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react'
+import { TextField } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+
+// locals
+import { ImportWizardModel } from '../models/ImportWizard'
+
+const useStyles = makeStyles()({
+  textField: {
+    width: '2rem',
+    verticalAlign: 'baseline',
+  },
+})
+
+export default observer(function ({
+  model,
+  disabled,
+  modelPropName,
+  modelSetterName,
+}: {
+  model: ImportWizardModel
+  disabled: boolean
+  modelPropName: string
+  modelSetterName: string
+}) {
+  // @ts-expect-error
+  const [val, setVal] = useState(model[modelPropName])
+  const { classes } = useStyles()
+  useEffect(() => {
+    const num = Number.parseInt(val, 10)
+    if (!Number.isNaN(num)) {
+      if (num > 0) {
+        // @ts-expect-error
+        model[modelSetterName](num)
+      } else {
+        setVal(1)
+      }
+    }
+  }, [model, modelSetterName, val])
+  return (
+    <TextField
+      value={val}
+      disabled={disabled}
+      type="number"
+      onChange={evt => setVal(evt.target.value)}
+      className={classes.textField}
+    />
+  )
+})

package/src/SpreadsheetView/components/RowCountMessage.tsx

@@ -0,0 +1,44 @@
+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 RowCountMessage = observer(function ({
+  spreadsheet,
+}: {
+  spreadsheet: SpreadsheetModel
+}) {
+  if (spreadsheet.rowSet.isLoaded) {
+    const {
+      passingFiltersCount,
+      count,
+      selectedCount,
+      selectedAndPassingFiltersCount,
+    } = spreadsheet.rowSet
+
+    let rowMessage
+    if (passingFiltersCount !== count) {
+      rowMessage = `${spreadsheet.rowSet.passingFiltersCount} rows of ${spreadsheet.rowSet.count} total`
+      if (selectedCount) {
+        rowMessage += `, ${selectedAndPassingFiltersCount} selected`
+        const selectedAndNotPassingFiltersCount =
+          selectedCount - selectedAndPassingFiltersCount
+        if (selectedAndNotPassingFiltersCount) {
+          rowMessage += ` (${selectedAndNotPassingFiltersCount} selected rows do not pass filters)`
+        }
+      }
+    } else {
+      rowMessage = `${spreadsheet.rowSet.count} rows`
+      if (selectedCount) {
+        rowMessage += `, ${selectedCount} selected`
+      }
+    }
+    return <>{rowMessage}</>
+  }
+  return null
+})
+export default RowCountMessage

package/src/SpreadsheetView/components/RowMenu.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { Menu, MenuItem } from '@jbrowse/core/ui'
+import { Instance } from 'mobx-state-tree'
+
+// locals
+import SpreadsheetModel from '../models/Spreadsheet'
+import ViewModel from '../models/SpreadsheetView'
+
+const RowMenu = observer(function ({
+  viewModel,
+  spreadsheetModel,
+}: {
+  viewModel: Instance<typeof ViewModel>
+  spreadsheetModel: Instance<typeof SpreadsheetModel>
+}) {
+  const currentRowMenu = spreadsheetModel.rowMenuPosition
+  const { setRowMenuPosition } = spreadsheetModel
+
+  const rowMenuClose = () => {
+    setRowMenuPosition(null)
+  }
+
+  const rowNumber = spreadsheetModel.rowMenuPosition?.rowNumber
+  if (rowNumber === undefined) {
+    return null
+  }
+
+  const row = spreadsheetModel.rowSet.rows[+rowNumber - 1]
+
+  function handleMenuItemClick(_event: unknown, callback: Function) {
+    callback(viewModel, spreadsheetModel, rowNumber, row)
+    rowMenuClose()
+  }
+
+  // got through and evaluate all the `disabled` callbacks of the menu items
+  const menuItems: MenuItem[] = viewModel.rowMenuItems.map(item => {
+    if (typeof item.disabled === 'function') {
+      const disabled = item.disabled(
+        viewModel,
+        spreadsheetModel,
+        +rowNumber,
+        row,
+      )
+      return { ...item, disabled }
+    }
+    return item
+  })
+
+  return (
+    <Menu
+      anchorEl={currentRowMenu && currentRowMenu.anchorEl}
+      open={Boolean(currentRowMenu)}
+      onMenuItemClick={handleMenuItemClick}
+      onClose={rowMenuClose}
+      menuItems={menuItems}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+    />
+  )
+})
+
+export default RowMenu

package/src/SpreadsheetView/components/SortIndicator.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { makeStyles } from 'tss-react/mui'
+
+// icons
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import { SpreadsheetModel } from '../models/Spreadsheet'
+
+const useStyles = makeStyles()({
+  sortIndicator: {
+    position: 'relative',
+    top: '0.2rem',
+    fontSize: '1rem',
+  },
+})
+
+export default function SortIndicator({
+  model,
+  columnNumber,
+}: {
+  model: SpreadsheetModel
+  columnNumber: number
+}) {
+  const { classes } = useStyles()
+  const sortSpec = model.sortColumns.find(c => c.columnNumber === columnNumber)
+
+  if (sortSpec) {
+    const { descending } = sortSpec
+    return descending ? (
+      <KeyboardArrowUpIcon className={classes.sortIndicator} />
+    ) : (
+      <KeyboardArrowDownIcon className={classes.sortIndicator} />
+    )
+  }
+  return null
+}

package/src/SpreadsheetView/components/Spreadsheet.test.ts

@@ -0,0 +1,17 @@
+import { numToColName } from './util'
+
+describe('num to col name', () => {
+  const cases = [
+    [10, 'K'],
+    [26, 'AA'],
+    [0, 'A'],
+    [25, 'Z'],
+    [27 * 26 - 1, 'ZZ'],
+  ] as const
+
+  cases.forEach(([input, output]) => {
+    test(`${input} -> ${output}`, () => {
+      expect(numToColName(input)).toBe(output)
+    })
+  })
+})

package/src/SpreadsheetView/components/Spreadsheet.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { Instance } from 'mobx-state-tree'
+import { makeStyles } from 'tss-react/mui'
+
+// locals
+import SpreadsheetStateModel from '../models/Spreadsheet'
+import { LoadingEllipses } from '@jbrowse/core/ui'
+import DataTable from './DataTable'
+
+type SpreadsheetModel = Instance<typeof SpreadsheetStateModel>
+
+const useStyles = makeStyles()(theme => ({
+  root: {
+    position: 'relative',
+    marginBottom: theme.spacing(1),
+    background: theme.palette.background.paper,
+    overflow: 'auto',
+  },
+}))
+
+const Spreadsheet = observer(function ({
+  model,
+  height,
+  page,
+  rowsPerPage,
+}: {
+  model: SpreadsheetModel
+  height: number
+  page: number
+  rowsPerPage: number
+}) {
+  const { classes } = useStyles()
+
+  return (
+    <div className={classes.root} style={{ height }}>
+      {model?.rowSet?.isLoaded && model.initialized ? (
+        <DataTable model={model} page={page} rowsPerPage={rowsPerPage} />
+      ) : (
+        <LoadingEllipses variant="h6" />
+      )}
+    </div>
+  )
+})
+
+export default Spreadsheet

package/src/SpreadsheetView/components/SpreadsheetView.tsx

@@ -0,0 +1,119 @@
+import React, { useState } from 'react'
+import { Grid } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { ResizeHandle } from '@jbrowse/core/ui'
+
+// locals
+import ImportWizard from './ImportWizard'
+import Spreadsheet from './Spreadsheet'
+import GlobalFilterControls from './GlobalFilterControls'
+import ColumnFilterControls from './ColumnFilterControls'
+import { SpreadsheetViewModel } from '../models/SpreadsheetView'
+import StatusBar from './StatusBar'
+
+const headerHeight = 52
+const colFilterHeight = 46
+const statusBarHeight = 40
+
+const useStyles = makeStyles()(theme => ({
+  header: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    boxSizing: 'border-box',
+    height: headerHeight,
+    paddingLeft: theme.spacing(1),
+  },
+  contentArea: {
+    overflow: 'auto',
+  },
+  resizeHandle: {
+    height: 3,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    background: theme.palette.action.disabled,
+    boxSizing: 'border-box',
+    borderTop: '1px solid #fafafa',
+  },
+}))
+
+export default observer(function ({ model }: { model: SpreadsheetViewModel }) {
+  const { classes } = useStyles()
+  const {
+    spreadsheet,
+    filterControls,
+    hideFilterControls,
+    hideVerticalResizeHandle,
+    mode,
+    height,
+  } = model
+  const [page, setPage] = useState(0)
+  const [rowsPerPage, setRowsPerPage] = useState(100)
+
+  return (
+    <div>
+      {mode !== 'display' || hideFilterControls ? null : (
+        <>
+          <Grid container direction="row" className={classes.header}>
+            <Grid item>
+              <GlobalFilterControls model={model} />
+            </Grid>
+          </Grid>
+          {filterControls.columnFilters.map((f, i) => (
+            <ColumnFilterControls
+              key={`${f.columnNumber}-${i}`}
+              viewModel={model}
+              filterModel={f}
+              columnNumber={f.columnNumber}
+              height={colFilterHeight}
+            />
+          ))}
+        </>
+      )}
+
+      {mode === 'import' ? (
+        <ImportWizard model={model.importWizard} />
+      ) : (
+        <div className={classes.contentArea}>
+          <div
+            style={{
+              position: 'relative',
+              display: mode === 'display' ? undefined : 'none',
+            }}
+          >
+            {spreadsheet ? (
+              <Spreadsheet
+                page={page}
+                rowsPerPage={rowsPerPage}
+                model={spreadsheet}
+                height={
+                  height -
+                  headerHeight -
+                  filterControls.columnFilters.length * colFilterHeight -
+                  statusBarHeight
+                }
+              />
+            ) : null}
+          </div>
+        </div>
+      )}
+      {spreadsheet ? (
+        <StatusBar
+          page={page}
+          setPage={setPage}
+          rowsPerPage={rowsPerPage}
+          setRowsPerPage={setRowsPerPage}
+          mode={mode}
+          spreadsheet={spreadsheet}
+        />
+      ) : null}
+      {hideVerticalResizeHandle ? null : (
+        <ResizeHandle
+          onDrag={model.resizeHeight}
+          className={classes.resizeHandle}
+        />
+      )}
+    </div>
+  )
+})

package/src/SpreadsheetView/components/StatusBar.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { FormGroup, TablePagination } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+// locals
+import RowCountMessage from './RowCountMessage'
+import { SpreadsheetModel } from '../models/Spreadsheet'
+import { observer } from 'mobx-react'
+
+const statusBarHeight = 40
+
+const useStyles = makeStyles()(theme => ({
+  statusBar: {
+    height: statusBarHeight,
+    boxSizing: 'border-box',
+    borderTop: '1px outset #b1b1b1',
+    paddingLeft: theme.spacing(1),
+  },
+  verticallyCenter: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+  spacer: {
+    flexGrow: 1,
+  },
+}))
+
+const StatusBar = observer(function StatusBar({
+  page,
+  rowsPerPage,
+  setPage,
+  setRowsPerPage,
+  spreadsheet,
+  mode,
+}: {
+  page: number
+  mode: string
+  spreadsheet: SpreadsheetModel
+  rowsPerPage: number
+  setPage: (arg: number) => void
+  setRowsPerPage: (arg: number) => void
+}) {
+  const { classes } = useStyles()
+  return (
+    <div
+      className={classes.statusBar}
+      style={{ display: mode === 'display' ? undefined : 'none' }}
+    >
+      {spreadsheet ? (
+        <FormGroup row>
+          <div className={classes.verticallyCenter}>
+            <RowCountMessage spreadsheet={spreadsheet} />
+          </div>
+          <div className={classes.spacer} />
+          <TablePagination
+            rowsPerPageOptions={[10, 25, 100, 1000]}
+            count={spreadsheet.rowSet.count}
+            component="div"
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={(_, newPage) => setPage(newPage)}
+            onRowsPerPageChange={event => {
+              setRowsPerPage(+event.target.value)
+              setPage(0)
+            }}
+          />
+          <div className={classes.spacer} />
+        </FormGroup>
+      ) : null}
+    </div>
+  )
+})
+
+export default StatusBar

package/src/SpreadsheetView/components/util.ts

@@ -0,0 +1,16 @@
+function letterFor(n: number) {
+  return String.fromCharCode(n + 65)
+}
+
+export function numToColName(num: number) {
+  if (num >= 0) {
+    if (num < 26) {
+      return letterFor(num)
+    }
+    if (num < 27 * 26) {
+      return letterFor(Math.floor(num / 26 - 1)) + letterFor(num % 26)
+    }
+  }
+
+  throw new RangeError('column number out of range')
+}

package/src/SpreadsheetView/importAdapters/BedImport.test.ts

@@ -0,0 +1,14 @@
+import { promises as fsPromises } from 'fs'
+import path from 'path'
+
+import { removeBedHeaders } from './BedImport'
+
+test('bed header trimming', async () => {
+  const filepath = path.join(__dirname, '..', 'test_data', 'foo.bed')
+  const buf = await fsPromises.readFile(filepath)
+  expect(buf[0]).toEqual(98)
+  expect(buf[1]).toEqual(114)
+  const trimmedBuffer = removeBedHeaders(buf)
+  expect(trimmedBuffer[0]).toEqual(99)
+  expect(trimmedBuffer.length).toBe(275)
+})