@jbrowse/plugin-spreadsheet-view 2.6.1

package/src/SpreadsheetView/models/Spreadsheet.ts

@@ -0,0 +1,209 @@
+import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings'
+import { getSession, getEnv } from '@jbrowse/core/util'
+import { autorun } from 'mobx'
+import {
+  addDisposer,
+  types,
+  getParent,
+  SnapshotIn,
+  Instance,
+} from 'mobx-state-tree'
+
+// locals
+import { ColumnTypes, AnyColumnType } from './ColumnDataTypes'
+import StaticRowSetModel from './StaticRowSet'
+import RowModel from './Row'
+
+type Row = Instance<typeof RowModel>
+
+const ColumnDefinition = types
+  .model('ColumnDefinition', {
+    name: types.maybe(types.string),
+    dataType: types.optional(AnyColumnType, () => ({
+      type: 'Text',
+    })),
+    // set to true if column is derived from other columns
+    // if the column is derived, each cell will have a
+    // `derivationFunction` that is called to get its value
+    isDerived: false,
+    // if this cell is derived from other cells, execute this function to get
+    // the value
+    derivationFunctionText: types.maybe(types.string),
+  })
+  .views(self => ({
+    get expr() {
+      if (self.isDerived) {
+        // compile this as a jexl expression
+        return stringToJexlExpression(
+          String(self.derivationFunctionText),
+          getEnv(self).pluginManager.jexl,
+        )
+      }
+      return undefined
+    },
+  }))
+
+type RowMenuPosition = { anchorEl: Element; rowNumber: string } | null
+
+/**
+ * #stateModel SpreadsheetViewSpreadsheet
+ * #category view
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+const Spreadsheet = types
+  .model('Spreadsheet', {
+    /**
+     * #property
+     */
+    rowSet: types.optional(StaticRowSetModel, () => StaticRowSetModel.create()),
+    /**
+     * #property
+     */
+    columns: types.array(ColumnDefinition),
+    /**
+     * #property
+     */
+    columnDisplayOrder: types.array(types.number),
+    /**
+     * #property
+     */
+    hasColumnNames: false,
+    /**
+     * #property
+     */
+    sortColumns: types.array(
+      types
+        .model('SortColumns', {
+          columnNumber: types.number,
+          descending: false,
+        })
+        .actions(self => ({
+          switchDirection() {
+            self.descending = !self.descending
+          },
+        })),
+    ),
+
+    assemblyName: types.maybe(types.string),
+  })
+  .volatile(() => ({
+    defaultDataType: ColumnTypes.Text,
+    rowMenuPosition: null as RowMenuPosition,
+    isLoaded: false,
+  }))
+  .views(self => ({
+    /**
+     * #getter
+     */
+    get initialized() {
+      const session = getSession(self)
+      const name = self.assemblyName
+      return name ? session.assemblyManager.get(name)?.initialized : false
+    },
+    /**
+     * #getter
+     */
+    get hideRowSelection() {
+      // just delegates to parent
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return getParent<any>(self).hideRowSelection
+    },
+
+    /**
+     * #getter
+     * list of data type names to be made available in the column
+     * dropdown menu
+     */
+    get dataTypeChoices() {
+      const typeNames = Object.keys(ColumnTypes) as (keyof typeof ColumnTypes)[]
+      return typeNames.map(typeName => {
+        const dataType = ColumnTypes[typeName].create({ type: typeName })
+        const { displayName, categoryName } = dataType
+        return { typeName, displayName, categoryName }
+      })
+    },
+
+    /**
+     * #method
+     */
+    rowSortingComparisonFunction(rowA: Row, rowB: Row) {
+      for (let i = 0; i < self.sortColumns.length; i += 1) {
+        const { columnNumber, descending } = self.sortColumns[i]
+        const { dataType } = self.columns[columnNumber]
+        const result = dataType.compare(
+          rowA.cellsWithDerived[columnNumber],
+          rowB.cellsWithDerived[columnNumber],
+        )
+        if (result) {
+          return descending ? -result : result
+        }
+      }
+      return 0
+    },
+  }))
+  .actions(self => ({
+    afterAttach() {
+      addDisposer(
+        self,
+        autorun(async () => {
+          const session = getSession(self)
+          const { assemblyManager } = session
+          try {
+            if (self.assemblyName) {
+              await assemblyManager.waitForAssembly(self.assemblyName)
+              this.setLoaded(true)
+            }
+          } catch (error) {
+            session.notify(
+              `failed to load assembly ${self.assemblyName} ${error}`,
+              'error',
+            )
+          }
+        }),
+      )
+    },
+
+    /**
+     * #action
+     */
+    setLoaded(flag: boolean) {
+      self.isLoaded = flag
+    },
+
+    /**
+     * #action
+     */
+    setRowMenuPosition(newPosition: RowMenuPosition) {
+      self.rowMenuPosition = newPosition
+    },
+
+    /**
+     * #action
+     */
+    setSortColumns(newSort: NonNullable<SnapshotIn<typeof self.sortColumns>>) {
+      if (newSort) {
+        // @ts-expect-error
+        self.sortColumns = newSort
+      }
+    },
+
+    /**
+     * #action
+     */
+    setColumnType(columnNumber: number, newTypeName: string) {
+      self.columns[columnNumber].dataType = { type: newTypeName }
+    },
+
+    /**
+     * #action
+     */
+    unselectAll() {
+      return self.rowSet.unselectAll()
+    },
+  }))
+
+export type SpreadsheetStateModel = typeof Spreadsheet
+export type SpreadsheetModel = Instance<SpreadsheetStateModel>
+
+export default Spreadsheet

package/src/SpreadsheetView/models/SpreadsheetView.test.ts

@@ -0,0 +1,8 @@
+import SpreadsheetView from './SpreadsheetView'
+
+describe('Spreadsheet View mst model', () => {
+  it('can instantiate with empty args', () => {
+    const view = SpreadsheetView.create({ type: 'SpreadsheetView' })
+    expect(view).toBeTruthy()
+  })
+})

package/src/SpreadsheetView/models/SpreadsheetView.ts

@@ -0,0 +1,243 @@
+import {
+  types,
+  getParent,
+  getEnv,
+  cast,
+  SnapshotIn,
+  Instance,
+} from 'mobx-state-tree'
+import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models'
+import { readConfObject } from '@jbrowse/core/configuration'
+import { MenuItem } from '@jbrowse/core/ui'
+import { getSession } from '@jbrowse/core/util'
+
+// icons
+import DoneIcon from '@mui/icons-material/Done'
+import FolderOpenIcon from '@mui/icons-material/FolderOpen'
+
+import SpreadsheetModel from './Spreadsheet'
+import ImportWizardModel from './ImportWizard'
+import FilterControlsModel from './FilterControls'
+
+type Spreadsheet = Instance<typeof SpreadsheetModel>
+
+export type MenuItemWithDisabledCallback = MenuItem & {
+  disabled?:
+    | boolean
+    | ((
+        viewModel: unknown,
+        spreadsheetModel: Spreadsheet,
+        rowNumber: number,
+        row: Spreadsheet['rowSet']['rows'][0],
+      ) => boolean)
+}
+
+const defaultRowMenuItems: MenuItemWithDisabledCallback[] = [
+  {
+    label: 'Toggle select',
+    icon: DoneIcon,
+    onClick(_view: unknown, spreadsheet: Spreadsheet) {
+      const rowNumber = spreadsheet.rowMenuPosition?.rowNumber
+      if (rowNumber !== undefined) {
+        spreadsheet.rowSet.rows[+rowNumber - 1].toggleSelect()
+      }
+    },
+  },
+]
+
+const minHeight = 40
+const defaultHeight = 440
+
+/**
+ * #stateModel SpreadsheetView
+ * #category view
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+const model = types
+  .model('SpreadsheetView', {
+    /**
+     * #property
+     */
+    type: types.literal('SpreadsheetView'),
+    /**
+     * #property
+     */
+    offsetPx: 0,
+    /**
+     * #property
+     */
+    height: types.optional(
+      types.refinement(
+        'SpreadsheetViewHeight',
+        types.number,
+        n => n >= minHeight,
+      ),
+      defaultHeight,
+    ),
+    /**
+     * #property
+     */
+    hideVerticalResizeHandle: false,
+    /**
+     * #property
+     */
+    hideFilterControls: false,
+    /**
+     * #property
+     */
+    filterControls: types.optional(FilterControlsModel, () =>
+      FilterControlsModel.create({}),
+    ),
+    /**
+     * #property
+     * switch specifying whether we are showing the import wizard or the
+     * spreadsheet in our viewing area
+     */
+    mode: types.optional(
+      types.enumeration('SpreadsheetViewMode', ['import', 'display']),
+      'import',
+    ),
+    /**
+     * #property
+     */
+    importWizard: types.optional(ImportWizardModel, () =>
+      ImportWizardModel.create(),
+    ),
+    /**
+     * #property
+     */
+    spreadsheet: types.maybe(SpreadsheetModel),
+  })
+  .volatile(() => ({
+    width: 400,
+    rowMenuItems: defaultRowMenuItems,
+  }))
+  .views(self => ({
+    /**
+     * #getter
+     */
+    get readyToDisplay() {
+      return !!self.spreadsheet && self.spreadsheet.isLoaded
+    },
+    /**
+     * #getter
+     */
+    get hideRowSelection() {
+      return !!getEnv(self).hideRowSelection
+    },
+    /**
+     * #getter
+     */
+    get outputRows() {
+      if (self.spreadsheet && self.spreadsheet.rowSet.isLoaded) {
+        const selected = self.spreadsheet.rowSet.selectedFilteredRows
+        if (selected.length) {
+          return selected
+        }
+        return self.spreadsheet.rowSet.sortedFilteredRows
+      }
+      return undefined
+    },
+    /**
+     * #getter
+     */
+    get assembly() {
+      const name = self.spreadsheet?.assemblyName
+      if (name) {
+        const assemblies = getSession(self).assemblies
+        return assemblies?.find(asm => readConfObject(asm, 'name') === name)
+      }
+      return undefined
+    },
+  }))
+  .actions(self => ({
+    /**
+     * #action
+     */
+    setRowMenuItems(newItems: MenuItem[]) {
+      self.rowMenuItems = newItems
+    },
+    /**
+     * #action
+     */
+    setWidth(newWidth: number) {
+      self.width = newWidth
+      return self.width
+    },
+    /**
+     * #action
+     */
+    setHeight(newHeight: number) {
+      self.height = newHeight > minHeight ? newHeight : minHeight
+      return self.height
+    },
+    /**
+     * #action
+     */
+    resizeHeight(distance: number) {
+      const oldHeight = self.height
+      const newHeight = this.setHeight(self.height + distance)
+      return newHeight - oldHeight
+    },
+    /**
+     * #action
+     */
+    resizeWidth(distance: number) {
+      const oldWidth = self.width
+      const newWidth = this.setWidth(self.width + distance)
+      return newWidth - oldWidth
+    },
+
+    /**
+     * #action
+     * load a new spreadsheet and set our mode to display it
+     */
+    displaySpreadsheet(spreadsheet: SnapshotIn<typeof SpreadsheetModel>) {
+      self.filterControls.clearAllFilters()
+      self.spreadsheet = cast(spreadsheet)
+      self.mode = 'display'
+    },
+    /**
+     * #action
+     */
+    setImportMode() {
+      self.mode = 'import'
+    },
+    /**
+     * #action
+     */
+    setDisplayMode() {
+      if (self.readyToDisplay) {
+        self.mode = 'display'
+      }
+    },
+    /**
+     * #action
+     */
+    closeView() {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      getParent<any>(self, 2).removeView(self)
+    },
+  }))
+  .views(self => ({
+    /**
+     * #method
+     */
+    menuItems() {
+      return [
+        {
+          label: 'Return to import form',
+          onClick: () => self.setImportMode(),
+          icon: FolderOpenIcon,
+        },
+      ]
+    },
+  }))
+
+const SpreadsheetView = types.compose(BaseViewModel, model)
+
+export type SpreadsheetViewStateModel = typeof SpreadsheetView
+export type SpreadsheetViewModel = Instance<SpreadsheetViewStateModel>
+
+export default SpreadsheetView

package/src/SpreadsheetView/models/StaticRowSet.ts

@@ -0,0 +1,65 @@
+import RowModel from './Row'
+import { types, getParent } from 'mobx-state-tree'
+
+const StaticRowModel = types
+  .model('StaticRowSet', {
+    isLoaded: types.literal(true),
+    rows: types.array(RowModel),
+  })
+  .views(self => ({
+    get count() {
+      return self.rows.length
+    },
+
+    get passingFiltersCount() {
+      return this.sortedFilteredRows.length
+    },
+
+    get selectedCount() {
+      return this.selectedRows.length
+    },
+
+    get selectedAndPassingFiltersCount() {
+      return this.selectedFilteredRows.length
+    },
+
+    get sortedRows() {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const parent = getParent<any>(self)
+      return [...self.rows].sort(parent.rowSortingComparisonFunction)
+    },
+
+    get selectedRows() {
+      return self.rows.filter(r => r.isSelected)
+    },
+
+    get selectedFilteredRows() {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const sheet = getParent<any>(self)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const view = getParent<any>(sheet)
+      const { filterControls } = view
+      return this.selectedRows.filter(row =>
+        filterControls.rowPassesFilters(sheet, row),
+      )
+    },
+
+    // the set of all rows that pass the filters, sorted
+    get sortedFilteredRows() {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const sheet = getParent<any>(self)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const view = getParent<any>(sheet)
+      const { filterControls } = view
+      return self.rows
+        .filter(row => filterControls.rowPassesFilters(sheet, row))
+        .sort(sheet.rowSortingComparisonFunction)
+    },
+  }))
+  .actions(self => ({
+    unselectAll() {
+      self.rows.forEach(row => row.unSelect())
+    },
+  }))
+
+export default StaticRowModel