@jbrowse/plugin-spreadsheet-view 2.6.1

package/src/SpreadsheetView/index.ts

@@ -0,0 +1,20 @@
+import { lazy } from 'react'
+import { ViewType } from '@jbrowse/core/pluggableElementTypes'
+import PluginManager from '@jbrowse/core/PluginManager'
+import stateModel from './models/SpreadsheetView'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addViewType(() => {
+    return new ViewType({
+      name: 'SpreadsheetView',
+      displayName: 'Spreadsheet view',
+      stateModel,
+      ReactComponent: lazy(() => import('./components/SpreadsheetView')),
+    })
+  })
+}
+
+export {
+  type SpreadsheetViewModel,
+  type SpreadsheetViewStateModel,
+} from './models/SpreadsheetView'

package/src/SpreadsheetView/models/ColumnDataTypes/LocEnd.ts

@@ -0,0 +1,21 @@
+import MakeSpreadsheetColumnType from './MakeSpreadsheetColumnType'
+import { FilterModelType as NumberFilterModel } from './Number'
+import { types } from 'mobx-state-tree'
+
+const FilterModelType = types.compose(
+  NumberFilterModel,
+  types.model({
+    type: types.literal('LocEnd'),
+  }),
+)
+
+const LocEnd = MakeSpreadsheetColumnType('LocEnd', {
+  categoryName: 'Location',
+  displayName: 'End',
+  compare(cellA: { text: string }, cellB: { text: string }) {
+    return parseFloat(cellA.text) - parseFloat(cellB.text)
+  },
+  FilterModelType,
+})
+
+export default LocEnd

package/src/SpreadsheetView/models/ColumnDataTypes/LocRef.ts

@@ -0,0 +1,21 @@
+import MakeSpreadsheetColumnType from './MakeSpreadsheetColumnType'
+import { FilterModelType as NumberFilterModel } from './Text'
+import { types } from 'mobx-state-tree'
+
+const FilterModelType = types.compose(
+  NumberFilterModel,
+  types.model({
+    type: types.literal('LocRef'),
+  }),
+)
+
+const LocRef = MakeSpreadsheetColumnType('LocRef', {
+  categoryName: 'Location',
+  displayName: 'Reference seq',
+  compare(cellA: { text: string }, cellB: { text: string }) {
+    return cellA.text.localeCompare(cellB.text)
+  },
+  FilterModelType,
+})
+
+export default LocRef

package/src/SpreadsheetView/models/ColumnDataTypes/LocStart.ts

@@ -0,0 +1,21 @@
+import MakeSpreadsheetColumnType from './MakeSpreadsheetColumnType'
+import { types } from 'mobx-state-tree'
+import { FilterModelType as NumberFilterModel } from './Number'
+
+const FilterModelType = types.compose(
+  NumberFilterModel,
+  types.model({
+    type: types.literal('LocStart'),
+  }),
+)
+
+const LocStart = MakeSpreadsheetColumnType('LocStart', {
+  categoryName: 'Location',
+  displayName: 'Start',
+  compare(cellA: { text: string }, cellB: { text: string }) {
+    return parseFloat(cellA.text) - parseFloat(cellB.text)
+  },
+  FilterModelType,
+})
+
+export default LocStart

package/src/SpreadsheetView/models/ColumnDataTypes/LocString.tsx

@@ -0,0 +1,328 @@
+import React from 'react'
+import {
+  IconButton,
+  TextField,
+  MenuItem,
+  InputAdornment,
+  Select,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { types, getParent, getPropertyMembers } from 'mobx-state-tree'
+
+// jbrowse imports
+import {
+  getPropertyType,
+  getEnumerationValues,
+  getSubType,
+} from '@jbrowse/core/util/mst-reflection'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import {
+  doesIntersect2,
+  isContainedWithin,
+  compareLocs,
+  getSession,
+  parseLocString,
+} from '@jbrowse/core/util'
+
+// icons
+import ClearIcon from '@mui/icons-material/Clear'
+
+// locals
+import MakeSpreadsheetColumnType from './MakeSpreadsheetColumnType'
+
+type LGV = LinearGenomeViewModel
+
+const useStyles = makeStyles()({
+  textFilterControlAdornment: { marginRight: '-18px' },
+  textFilterControl: {
+    '& .MuiInput-formControl': {
+      marginTop: 8,
+    },
+    '& .MuiInputLabel-formControl': {
+      top: '-7px',
+      '&.MuiInputLabel-shrink': {
+        top: '-3px',
+      },
+    },
+  },
+})
+
+// React component for the column filter control
+const FilterReactComponent = observer(function ({
+  filterModel,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  filterModel: any
+}) {
+  const { classes } = useStyles()
+  const operationChoices = getEnumerationValues(
+    getSubType(getPropertyType(getPropertyMembers(filterModel), 'operation')),
+  )
+  return (
+    <>
+      <Select
+        value={filterModel.operation}
+        onChange={event => filterModel.setOperation(String(event.target.value))}
+      >
+        {operationChoices.map(name => (
+          <MenuItem key={name} value={name}>
+            {name}
+          </MenuItem>
+        ))}
+      </Select>{' '}
+      <TextField
+        label="range"
+        placeholder="chr1:100-200"
+        error={filterModel.locStringIsInvalid}
+        value={filterModel.locString}
+        onChange={evt => filterModel.setLocString(evt.target.value)}
+        className={classes.textFilterControl}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment
+              className={classes.textFilterControlAdornment}
+              position="end"
+            >
+              <IconButton
+                aria-label="clear filter"
+                onClick={() => filterModel.setLocString('')}
+              >
+                <ClearIcon />
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+      />
+    </>
+  )
+})
+
+const OPERATIONS = [
+  'overlaps with',
+  'contained within',
+  'fully contains',
+  'does not overlap',
+  'not contained within',
+  'does not contain',
+]
+
+interface Loc {
+  start: number
+  end: number
+  refName: string
+}
+
+// NOTE: assembly names, if present, are ignored in all of these predicates
+const OPERATION_PREDICATES = {
+  'overlaps with': (cellLocation, specifiedLocation) => {
+    return (
+      cellLocation.refName === specifiedLocation.refName &&
+      doesIntersect2(
+        cellLocation.start,
+        cellLocation.end,
+        specifiedLocation.start,
+        specifiedLocation.end,
+      )
+    )
+  },
+  'contained within': (cellLocation, specifiedLocation) => {
+    return (
+      cellLocation.refName === specifiedLocation.refName &&
+      isContainedWithin(
+        cellLocation.start,
+        cellLocation.end,
+        specifiedLocation.start,
+        specifiedLocation.end,
+      )
+    )
+  },
+  'fully contains': (cellLocation, specifiedLocation) => {
+    return (
+      cellLocation.refName === specifiedLocation.refName &&
+      isContainedWithin(
+        specifiedLocation.start,
+        specifiedLocation.end,
+        cellLocation.start,
+        cellLocation.end,
+      )
+    )
+  },
+} as { [key: string]: (a: Loc, b: Loc) => boolean }
+
+OPERATION_PREDICATES['does not overlap'] = (
+  cellLocation,
+  specifiedLocation,
+) => {
+  return !OPERATION_PREDICATES['overlaps with'](cellLocation, specifiedLocation)
+}
+OPERATION_PREDICATES['not contained within'] = (
+  cellLocation,
+  specifiedLocation,
+) => {
+  return !OPERATION_PREDICATES['contained within'](
+    cellLocation,
+    specifiedLocation,
+  )
+}
+OPERATION_PREDICATES['does not contain'] = (
+  cellLocation,
+  specifiedLocation,
+) => {
+  return !OPERATION_PREDICATES['fully contains'](
+    cellLocation,
+    specifiedLocation,
+  )
+}
+
+// MST model for the column filter control
+const FilterModelType = types
+  .model('ColumnLocStringFilter', {
+    type: types.literal('LocString'),
+    columnNumber: types.integer,
+    locString: '',
+    operation: types.optional(types.enumeration(OPERATIONS), OPERATIONS[0]),
+  })
+  .views(self => ({
+    get locStringIsInvalid() {
+      if (self.locString) {
+        const parsed = this.parsedLocString
+        return (
+          !parsed ||
+          parsed.refName === '' ||
+          typeof parsed.start !== 'number' ||
+          typeof parsed.end !== 'number' ||
+          parsed.start > parsed.end
+        )
+      }
+      return false
+    },
+    get parsedLocString() {
+      const session = getSession(self)
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const model = getParent<any>(self, 3).spreadsheet
+      const { assemblyName } = model
+      try {
+        return parseLocString(self.locString, refName =>
+          session.assemblyManager.isValidRefName(refName, assemblyName),
+        )
+      } catch (e) {
+        return undefined
+      }
+    },
+  }))
+  .views(self => ({
+    // returns a function that tests the given row
+    get predicate() {
+      const {
+        locString,
+        locStringIsInvalid,
+        parsedLocString,
+        operation,
+        columnNumber,
+      } = self // avoid closing over self
+      if (!locString || locStringIsInvalid || !parsedLocString) {
+        return function alwaysTrue() {
+          return true
+        }
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return function stringPredicate(_sheet: any, row: any) {
+        const { cellsWithDerived: cells } = row
+        const cell = cells[columnNumber]
+
+        if (!cell || !cell.text || !cell.extendedData) {
+          return false
+        }
+        const parsedCellText = cell.extendedData
+        if (!parsedCellText.refName) {
+          return false
+        }
+
+        const predicate = OPERATION_PREDICATES[operation]
+        if (!predicate) {
+          throw new Error(`"${operation}" not implemented in location filter`)
+        }
+
+        return predicate(parsedCellText, parsedLocString as Loc)
+      }
+    },
+  }))
+  .actions(self => ({
+    setLocString(s: string) {
+      self.locString = s
+    },
+    setOperation(op: string) {
+      self.operation = op
+    },
+  }))
+  .volatile(() => ({ ReactComponent: FilterReactComponent }))
+
+// opens a new LGV at the location described in the locString in the cell text
+
+async function locationLinkClick(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  spreadsheet: any,
+  _columnNumber: number,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  cell: any,
+) {
+  const session = getSession(spreadsheet)
+  const { assemblyName } = spreadsheet
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { id } = getParent<any>(spreadsheet)
+
+  const newViewId = `${id}_${assemblyName}`
+  let view = session.views.find(v => v.id === newViewId) as LGV
+  if (!view) {
+    view = session.addView('LinearGenomeView', {
+      id: newViewId,
+    }) as LGV
+  }
+  await view.navToLocString(cell.text, assemblyName)
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type DataCell = any
+
+const DataCellReactComponent = observer(function ({
+  cell,
+  columnNumber,
+  spreadsheet,
+}: DataCell) {
+  return (
+    <a
+      onClick={async evt => {
+        evt.preventDefault()
+        const session = getSession(spreadsheet)
+        try {
+          await locationLinkClick(spreadsheet, columnNumber, cell)
+        } catch (e) {
+          console.error(e)
+          session.notify(`${e}`, 'error')
+        }
+      }}
+      title="open a new linear genome view here"
+      href="#link"
+    >
+      {cell.text}
+    </a>
+  )
+})
+
+const LocStringColumnType = MakeSpreadsheetColumnType('LocString', {
+  categoryName: 'Location',
+  displayName: 'Full location',
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  compare(cellA: { extendedData: any }, cellB: { extendedData: any }) {
+    return compareLocs(cellA.extendedData, cellB.extendedData)
+  },
+  FilterModelType,
+  DataCellReactComponent,
+})
+
+export default LocStringColumnType

package/src/SpreadsheetView/models/ColumnDataTypes/MakeSpreadsheetColumnType.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react'
+import { types } from 'mobx-state-tree'
+
+/** utility function for assembling the MST model of a column data type */
+export default function MakeSpreadsheetColumnType(
+  name: string,
+  {
+    DataCellReactComponent = null,
+    FilterModelType = null,
+    compare,
+    displayName = undefined,
+    categoryName = undefined,
+  }: {
+    compare?: any
+    DataCellReactComponent?: React.FC<any> | null
+    FilterModelType?: any
+    displayName?: string
+    categoryName?: string
+  },
+) {
+  return types
+    .model(`ColumnDataType${name}`, {
+      type: types.literal(name),
+    })
+    .volatile(() => ({
+      DataCellReactComponent,
+      FilterModelType: FilterModelType,
+      displayName: displayName || name,
+      categoryName,
+    }))
+    .views(() => ({
+      compare,
+      get hasFilter() {
+        return !!FilterModelType
+      },
+    }))
+}

package/src/SpreadsheetView/models/ColumnDataTypes/Number.tsx

@@ -0,0 +1,177 @@
+import React from 'react'
+import { types } from 'mobx-state-tree'
+import { observer } from 'mobx-react'
+import { MenuItem, Select, TextField } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import MakeSpreadsheetColumnType from './MakeSpreadsheetColumnType'
+
+const OPERATIONS = [
+  'equals',
+  'greater than',
+  'less than',
+  'between',
+  'not between',
+]
+
+// NOTE: assembly names, if present, are ignored in all of these predicates
+const OPERATION_PREDICATES = {
+  equals: (numberInCell, firstNumber) => {
+    return numberInCell === firstNumber
+  },
+  'greater than': (numberInCell, firstNumber) => {
+    return numberInCell > firstNumber
+  },
+  'less than': (numberInCell, firstNumber) => {
+    return numberInCell < firstNumber
+  },
+  between: (numberInCell, firstNumber, secondNumber) => {
+    return (
+      numberInCell > firstNumber &&
+      secondNumber !== undefined &&
+      numberInCell < secondNumber
+    )
+  },
+} as { [key: string]: (arg0: number, a: number, b?: number) => boolean }
+
+OPERATION_PREDICATES['not between'] = (
+  numberInCell,
+  firstNumber,
+  secondNumber,
+) => {
+  return !OPERATION_PREDICATES.between(numberInCell, firstNumber, secondNumber)
+}
+
+const useStyles = makeStyles()({
+  textFilterControlAdornment: { marginRight: '-18px' },
+  textFilterControl: {
+    '& .MuiInput-formControl': {
+      marginTop: 8,
+    },
+    '& .MuiInputLabel-formControl': {
+      top: '-7px',
+      '&.MuiInputLabel-shrink': {
+        top: '-3px',
+      },
+    },
+  },
+})
+
+// React component for the column filter control
+const FilterReactComponent = observer(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ({ filterModel }: { filterModel: any }) => {
+    const { classes } = useStyles()
+
+    const operationChoices = OPERATIONS
+
+    return (
+      <>
+        <Select
+          value={filterModel.operation}
+          onChange={e => filterModel.setOperation(String(e.target.value))}
+        >
+          {operationChoices.map(name => (
+            <MenuItem key={name} value={name}>
+              {name}
+            </MenuItem>
+          ))}
+        </Select>{' '}
+        <TextField
+          label="number"
+          placeholder="123"
+          type="number"
+          error={filterModel.firstNumberIsInvalid}
+          defaultValue={filterModel.firstNumber}
+          onChange={evt => {
+            filterModel.setFirstNumber(parseFloat(evt.target.value))
+          }}
+          className={classes.textFilterControl}
+        />
+        {filterModel.operation !== 'between' &&
+        filterModel.operation !== 'not between' ? null : (
+          <>
+            {' and '}
+            <TextField
+              label="number"
+              placeholder="456"
+              type="number"
+              error={filterModel.secondNumberIsInvalid}
+              defaultValue={filterModel.secondNumber}
+              onChange={evt =>
+                filterModel.setSecondNumber(parseFloat(evt.target.value))
+              }
+              className={classes.textFilterControl}
+            />
+          </>
+        )}
+      </>
+    )
+  },
+)
+
+// MST model for the column filter control
+const FilterModelType = types
+  .model('ColumnNumberFilter', {
+    type: types.literal('Number'),
+    columnNumber: types.integer,
+    firstNumber: types.maybe(types.number),
+    secondNumber: types.maybe(types.number),
+    operation: types.optional(types.enumeration(OPERATIONS), OPERATIONS[0]),
+  })
+  .views(self => ({
+    // returns a function that tests the given row
+    get predicate() {
+      if (typeof self.firstNumber !== 'number') {
+        return function alwaysTrue() {
+          return true
+        }
+      }
+
+      const { firstNumber, secondNumber, operation, columnNumber } = self // avoid closing over self
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return function stringPredicate(_sheet: any, row: any) {
+        const { cellsWithDerived } = row
+        const cell = cellsWithDerived[columnNumber]
+
+        if (!cell || !cell.text) {
+          return false
+        }
+
+        const parsedCellText = parseFloat(cell.text)
+        if (typeof parsedCellText !== 'number') {
+          return false
+        }
+
+        const predicate = OPERATION_PREDICATES[operation]
+        if (!predicate) {
+          throw new Error(`"${operation}" not implemented in location filter`)
+        }
+
+        return predicate(parsedCellText, firstNumber, secondNumber)
+      }
+    },
+  }))
+  .actions(self => ({
+    setFirstNumber(n: number) {
+      self.firstNumber =
+        Number.isNaN(n) || typeof n !== 'number' ? undefined : n
+    },
+    setSecondNumber(n: number) {
+      self.secondNumber =
+        Number.isNaN(n) || typeof n !== 'number' ? undefined : n
+    },
+    setOperation(op: string) {
+      self.operation = op
+    },
+  }))
+  .volatile(() => ({ ReactComponent: FilterReactComponent }))
+
+const NumberColumn = MakeSpreadsheetColumnType('Number', {
+  compare(cellA: { text: string }, cellB: { text: string }) {
+    return parseFloat(cellA.text) - parseFloat(cellB.text)
+  },
+  FilterModelType,
+})
+
+export { NumberColumn, FilterModelType }