@jbrowse/plugin-spreadsheet-view 2.6.1

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

@@ -0,0 +1,173 @@
+import React from 'react'
+import {
+  IconButton,
+  TextField,
+  MenuItem,
+  InputAdornment,
+  Select,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import MakeSpreadsheetColumnType from './MakeSpreadsheetColumnType'
+import { types, getPropertyMembers } from 'mobx-state-tree'
+import { observer } from 'mobx-react'
+import {
+  getPropertyType,
+  getEnumerationValues,
+  getSubType,
+} from '@jbrowse/core/util/mst-reflection'
+
+// icons
+import ClearIcon from '@mui/icons-material/Clear'
+
+const OPERATIONS = [
+  'equals',
+  'contains',
+  'does not contain',
+  'does not equal',
+  'starts with',
+  'ends with',
+]
+
+// NOTE: assembly names, if present, are ignored in all of these predicates
+const OPERATION_PREDICATES = {
+  contains: (textInCell, stringToFind) => {
+    return textInCell.toLowerCase().includes(stringToFind)
+  },
+  equals: (textInCell, stringToFind) => {
+    return textInCell.toLowerCase() === stringToFind
+  },
+  'starts with': (textInCell, stringToFind) => {
+    return textInCell.toLowerCase().indexOf(stringToFind) === 0
+  },
+  'ends with': (textInCell, stringToFind) => {
+    const index = textInCell.toLowerCase().indexOf(stringToFind)
+    if (index === -1) {
+      return false
+    }
+    return index === textInCell.length - stringToFind.length
+  },
+} as { [key: string]: (a: string, b: string) => boolean }
+
+OPERATION_PREDICATES['does not contain'] = (textInCell, stringToFind) => {
+  return !OPERATION_PREDICATES.contains(textInCell, stringToFind)
+}
+OPERATION_PREDICATES['does not equal'] = (textInCell, stringToFind) => {
+  return !OPERATION_PREDICATES.equals(textInCell, stringToFind)
+}
+
+const useStyles = makeStyles()({
+  textFilterControlAdornment: { marginRight: '-18px' },
+  textFilterControl: {
+    margin: 0,
+    '& .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 = 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="text"
+          value={filterModel.stringToFind}
+          onChange={evt => filterModel.setString(evt.target.value)}
+          className={classes.textFilterControl}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment
+                className={classes.textFilterControlAdornment}
+                position="end"
+              >
+                <IconButton
+                  aria-label="clear filter"
+                  onClick={() => filterModel.setString('')}
+                >
+                  <ClearIcon />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+        />
+      </>
+    )
+  },
+)
+
+// MST model for the column filter control
+const ColumnTextFilter = types
+  .model('ColumnTextFilter', {
+    type: types.literal('Text'),
+    columnNumber: types.integer,
+    stringToFind: '',
+    operation: types.optional(types.enumeration(OPERATIONS), OPERATIONS[0]),
+  })
+  .views(self => ({
+    // returns a function that tests the given row
+    get predicate() {
+      const { stringToFind, columnNumber, operation } = self // avoid closing over self
+      if (!stringToFind) {
+        return function alwaysTrue() {
+          return true
+        }
+      }
+      const s = stringToFind.toLowerCase() // case insensitive match
+
+      // 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 predicate = OPERATION_PREDICATES[operation]
+        if (!predicate) {
+          throw new Error(`"${operation}" not implemented in location filter`)
+        }
+        return predicate(cell.text, s)
+      }
+    },
+  }))
+  .actions(self => ({
+    setString(s: string) {
+      self.stringToFind = s
+    },
+    setOperation(op: string) {
+      self.operation = op
+    },
+  }))
+  .volatile(() => ({ ReactComponent: FilterReactComponent }))
+
+const TextColumnType = MakeSpreadsheetColumnType('Text', {
+  compare(cellA: { text: string }, cellB: { text: string }) {
+    return cellA.text.localeCompare(cellB.text)
+  },
+  FilterModelType: ColumnTextFilter,
+})
+
+export { TextColumnType as TextColumn, ColumnTextFilter as FilterModelType }

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

@@ -0,0 +1,34 @@
+import LocString from './LocString'
+import LocRef from './LocRef'
+import LocStart from './LocStart'
+import LocEnd from './LocEnd'
+import { NumberColumn as Number } from './Number'
+import { TextColumn as Text } from './Text'
+import { types, IAnyModelType } from 'mobx-state-tree'
+
+const ColumnTypes = {
+  Number,
+  Text,
+  LocString,
+  LocRef,
+  LocStart,
+  LocEnd,
+}
+
+const allColumnTypes = Object.values(ColumnTypes)
+const AnyColumnType = types.union(...allColumnTypes)
+const AnyFilterModelType = types.union(
+  ...allColumnTypes
+    .map(columnType => {
+      // just instantiate the blank types to get their filter model types
+      const { FilterModelType } = columnType.create({
+        // @ts-expect-error
+        type: columnType.properties.type.value,
+      })
+      return FilterModelType as unknown as IAnyModelType
+    })
+    // some column types might not have filter machinery, filter those out
+    .filter(t => !!t),
+)
+
+export { ColumnTypes, AnyColumnType, AnyFilterModelType }

package/src/SpreadsheetView/models/FilterControls.ts

@@ -0,0 +1,95 @@
+import { types, getParent, SnapshotIn } from 'mobx-state-tree'
+import { AnyFilterModelType as AnyColumnFilter } from './ColumnDataTypes'
+
+// filter that finds a simple string in any of the cells of a row
+const RowFullTextFilter = types
+  .model('RowFullTextFilter', {
+    type: types.literal('RowFullText'),
+    stringToFind: '',
+  })
+  .views(self => ({
+    // returns a function that tests the given row
+    get predicate() {
+      let s = self.stringToFind // avoid closing over self
+      if (!s) {
+        return function alwaysTrue() {
+          return true
+        }
+      }
+      s = s.toLowerCase()
+      return function stringPredicate(
+        _sheet: unknown,
+        row: { cellsWithDerived: { text: string }[] },
+      ) {
+        const { cellsWithDerived } = row
+        for (const cell of cellsWithDerived) {
+          // note: case insensitive
+          if (cell.text && cell.text.toLowerCase().includes(s)) {
+            return true
+          }
+        }
+        return false
+      }
+    },
+  }))
+  .actions(self => ({
+    setString(s: string) {
+      self.stringToFind = s
+    },
+    clear() {
+      self.stringToFind = ''
+    },
+  }))
+
+const model = types
+  .model('SpreadsheetFilterControls', {
+    rowFullText: types.optional(
+      RowFullTextFilter,
+      () =>
+        ({
+          type: 'RowFullText',
+          stringToFind: '',
+        } as SnapshotIn<typeof RowFullTextFilter>),
+    ),
+    columnFilters: types.array(AnyColumnFilter),
+  })
+  .views(self => ({
+    get filters() {
+      return [self.rowFullText, ...self.columnFilters].filter(f => !!f)
+    },
+    setRowFullTextFilter(stringToFind: string) {
+      // @ts-expect-error
+      self.rowFullText = {
+        type: 'RowFullText',
+        stringToFind,
+      }
+    },
+    rowPassesFilters(sheet: unknown, row: unknown) {
+      for (let i = 0; i < this.filters.length; i += 1) {
+        if (!this.filters[i].predicate(sheet, row)) {
+          return false
+        }
+      }
+      return true
+    },
+  }))
+  .actions(self => ({
+    addBlankColumnFilter(columnNumber: number) {
+      const { dataType } =
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        getParent<any>(self).spreadsheet.columns[columnNumber]
+      self.columnFilters.push({
+        type: dataType.type,
+        columnNumber,
+      })
+    },
+    removeColumnFilter(filter: typeof AnyColumnFilter) {
+      return self.columnFilters.remove(filter)
+    },
+    clearAllFilters() {
+      self.columnFilters.clear()
+      self.rowFullText.clear()
+    },
+  }))
+
+export default model

package/src/SpreadsheetView/models/ImportWizard.ts

@@ -0,0 +1,203 @@
+import { types, getParent, Instance } from 'mobx-state-tree'
+import { openLocation } from '@jbrowse/core/util/io'
+import { getSession, getEnv } from '@jbrowse/core/util'
+
+// 30MB
+const IMPORT_SIZE_LIMIT = 30_000_000
+
+const fileTypes = ['CSV', 'TSV', 'VCF', 'BED', 'BEDPE', 'STAR-Fusion']
+const fileTypeParsers = {
+  CSV: () =>
+    import('../importAdapters/ImportUtils').then(r => r.parseCsvBuffer),
+  TSV: () =>
+    import('../importAdapters/ImportUtils').then(r => r.parseTsvBuffer),
+  VCF: () => import('../importAdapters/VcfImport').then(r => r.parseVcfBuffer),
+  BED: () => import('../importAdapters/BedImport').then(r => r.parseBedBuffer),
+  BEDPE: () =>
+    import('../importAdapters/BedImport').then(r => r.parseBedPEBuffer),
+  'STAR-Fusion': () =>
+    import('../importAdapters/STARFusionImport').then(
+      r => r.parseSTARFusionBuffer,
+    ),
+}
+// regexp used to guess the type of a file or URL from its file extension
+const fileTypesRegexp = new RegExp(`\\.(${fileTypes.join('|')})(\\.gz)?$`, 'i')
+
+/**
+ * #stateModel SpreadsheetImportWizard
+ * #category view
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+const ImportWizard = types
+  .model('SpreadsheetImportWizard', {
+    /**
+     * #property
+     */
+    fileType: types.optional(types.enumeration(fileTypes), 'CSV'),
+    /**
+     * #property
+     */
+    hasColumnNameLine: true,
+    /**
+     * #property
+     */
+    columnNameLineNumber: 1,
+    /**
+     * #property
+     */
+    selectedAssemblyName: types.maybe(types.string),
+  })
+  .volatile(() => ({
+    fileTypes,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fileSource: undefined as any,
+    error: undefined as unknown,
+    loading: false,
+  }))
+  .views(self => ({
+    get isReadyToOpen() {
+      return (
+        !self.error &&
+        self.fileSource &&
+        (self.fileSource.blobId ||
+          self.fileSource.localPath ||
+          self.fileSource.uri)
+      )
+    },
+    get canCancel() {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return getParent<any>(self).readyToDisplay
+    },
+
+    get fileName() {
+      return (
+        self.fileSource.uri ||
+        self.fileSource.localPath ||
+        (self.fileSource.blobId && self.fileSource.name)
+      )
+    },
+
+    get requiresUnzip() {
+      return this.fileName.endsWith('gz')
+    },
+
+    isValidRefName(refName: string, assemblyName?: string) {
+      const { assemblyManager } = getSession(self)
+      if (!assemblyName) {
+        return false
+      }
+      return assemblyManager.isValidRefName(refName, assemblyName)
+    },
+  }))
+  .actions(self => ({
+    setSelectedAssemblyName(s: string) {
+      self.selectedAssemblyName = s
+    },
+    setFileSource(newSource: unknown) {
+      self.fileSource = newSource
+      self.error = undefined
+
+      if (self.fileSource) {
+        // try to autodetect the file type, ignore errors
+        const name = self.fileName
+
+        if (name) {
+          const match = fileTypesRegexp.exec(name)
+          if (match && match[1]) {
+            self.fileType =
+              match[1] === 'tsv' && name.includes('star-fusion')
+                ? 'STAR-Fusion'
+                : match[1].toUpperCase()
+          }
+        }
+      }
+    },
+
+    toggleHasColumnNameLine() {
+      self.hasColumnNameLine = !self.hasColumnNameLine
+    },
+
+    setColumnNameLineNumber(newnumber: number) {
+      if (newnumber > 0) {
+        self.columnNameLineNumber = newnumber
+      }
+    },
+
+    setFileType(typeName: string) {
+      self.fileType = typeName
+    },
+
+    setError(error: unknown) {
+      console.error(error)
+      self.loading = false
+      self.error = error
+    },
+
+    setLoaded() {
+      self.loading = false
+      self.error = undefined
+    },
+
+    cancelButton() {
+      self.error = undefined
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      getParent<any>(self).setDisplayMode()
+    },
+
+    // fetch and parse the file, make a new Spreadsheet model for it,
+    // then set the parent to display it
+    async import(assemblyName: string) {
+      if (!self.fileSource) {
+        return
+      }
+
+      if (self.loading) {
+        throw new Error('Cannot import, load already in progress')
+      }
+
+      self.selectedAssemblyName = assemblyName
+      self.loading = true
+      const type = self.fileType as keyof typeof fileTypeParsers
+      const typeParser = await fileTypeParsers[type]()
+      if (!typeParser) {
+        throw new Error(`cannot open files of type '${self.fileType}'`)
+      }
+
+      const { unzip } = await import('@gmod/bgzf-filehandle')
+      const { pluginManager } = getEnv(self)
+      const filehandle = openLocation(self.fileSource, pluginManager)
+      try {
+        const stat = await filehandle.stat()
+        if (stat.size > IMPORT_SIZE_LIMIT) {
+          throw new Error(
+            `File is too big. Tabular files are limited to at most ${(
+              IMPORT_SIZE_LIMIT / 1000
+            ).toLocaleString()}kb.`,
+          )
+        }
+      } catch (e) {
+        // not required for stat to succeed to proceed, but it is helpful
+        console.warn(e)
+      }
+
+      try {
+        await filehandle
+          .readFile()
+          .then(buffer => (self.requiresUnzip ? unzip(buffer) : buffer))
+          .then(buffer => typeParser(buffer, self))
+          .then(spreadsheet => {
+            this.setLoaded()
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            getParent<any>(self).displaySpreadsheet(spreadsheet)
+          })
+      } catch (e) {
+        this.setError(e)
+      }
+    },
+  }))
+
+export type ImportWizardStateModel = typeof ImportWizard
+export type ImportWizardModel = Instance<ImportWizardStateModel>
+
+export default ImportWizard

package/src/SpreadsheetView/models/Row.ts

@@ -0,0 +1,46 @@
+import { types, getParent } from 'mobx-state-tree'
+
+const CellModel = types.model('SpreadsheetCell', {
+  text: types.string,
+  extendedData: types.maybe(types.frozen()),
+})
+
+const RowModel = types
+  .model('SpreadsheetRow', {
+    id: types.identifier,
+    cells: types.array(CellModel),
+    extendedData: types.maybe(types.frozen()),
+    isSelected: false,
+  })
+  .actions(self => ({
+    toggleSelect() {
+      self.isSelected = !self.isSelected
+    },
+    unSelect() {
+      self.isSelected = false
+    },
+    select() {
+      self.isSelected = true
+    },
+    setExtendedData(data: unknown) {
+      self.extendedData = data
+    },
+  }))
+  .views(self => ({
+    get cellsWithDerived() {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const { columns } = getParent<any>(self, 3)
+      let i = 0
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return columns.map((column: { isDerived: boolean; expr: any }) => {
+        if (column.isDerived) {
+          return column.expr.evalSync({
+            row: self,
+          })
+        }
+        return self.cells[i++]
+      })
+    },
+  }))
+
+export default RowModel