@jbrowse/plugin-spreadsheet-view 2.6.1 → 2.6.2

package/src/SpreadsheetView/components/ImportWizard.tsx

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

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

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

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

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

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

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

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

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

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

@@ -1,14 +0,0 @@
-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)
-})