@jbrowse/plugin-sv-inspector 2.6.1

package/src/LaunchSvInspectorView/index.ts

@@ -0,0 +1,41 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { AbstractSessionModel } from '@jbrowse/core/util'
+import { SvInspectorViewModel } from '../SvInspectorView/models/SvInspectorView'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addToExtensionPoint(
+    'LaunchView-SvInspectorView',
+    // @ts-expect-error
+    async ({
+      session,
+      assembly,
+      uri,
+      fileType,
+    }: {
+      session: AbstractSessionModel
+      assembly: string
+      uri: string
+      fileType?: string
+    }) => {
+      // add view, make typescript happy with return type
+      const view = session.addView('SvInspectorView') as SvInspectorViewModel
+
+      if (!view) {
+        throw new Error('Failed to initialize view')
+      }
+      const exts = uri.split('.')
+      let ext = exts?.pop()?.toUpperCase()
+      if (ext === 'GZ') {
+        ext = exts?.pop()?.toUpperCase()
+      }
+
+      view.spreadsheetView.importWizard.setFileType(fileType || ext || '')
+      view.spreadsheetView.importWizard.setSelectedAssemblyName(assembly)
+      view.spreadsheetView.importWizard.setFileSource({
+        uri,
+        locationType: 'UriLocation',
+      })
+      await view.spreadsheetView.importWizard.import(assembly)
+    },
+  )
+}

package/src/SvInspectorView/components/CircularViewOptions.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { Grid, FormControlLabel, Checkbox } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+// locals
+import { SvInspectorViewModel } from '../models/SvInspectorView'
+
+const useStyles = makeStyles()(theme => ({
+  circularViewOptions: {
+    padding: theme.spacing(1),
+  },
+}))
+
+const CircularViewOptions = observer(function ({
+  svInspector,
+}: {
+  svInspector: SvInspectorViewModel
+}) {
+  const { classes } = useStyles()
+
+  return (
+    <Grid
+      container
+      className={classes.circularViewOptions}
+      style={{ height: svInspector.circularViewOptionsBarHeight }}
+    >
+      <Grid item>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={svInspector.onlyDisplayRelevantRegionsInCircularView}
+              onChange={e =>
+                svInspector.setOnlyDisplayRelevantRegionsInCircularView(
+                  e.target.checked,
+                )
+              }
+            />
+          }
+          label="show only regions with data"
+        />
+      </Grid>
+    </Grid>
+  )
+})
+
+export default CircularViewOptions

package/src/SvInspectorView/components/SvInspectorView.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+import { ResizeHandle } from '@jbrowse/core/ui'
+
+// locals
+import { SvInspectorViewModel } from '../models/SvInspectorView'
+import CircularViewOptions from './CircularViewOptions'
+
+const useStyles = makeStyles()(theme => ({
+  resizeHandleVert: {
+    background: theme.palette.action.selected,
+    width: 4,
+    boxSizing: 'border-box',
+    borderTop: '1px solid #fafafa',
+  },
+  resizeHandleHoriz: {
+    background: theme.palette.action.selected,
+    height: 4,
+    boxSizing: 'border-box',
+    borderTop: '1px solid #fafafa',
+  },
+  viewControls: {
+    margin: 0,
+  },
+  viewsContainer: {
+    display: 'flex',
+  },
+  container: {
+    overflow: 'hidden',
+  },
+}))
+
+export default observer(function SvInspectorView({
+  model,
+}: {
+  model: SvInspectorViewModel
+}) {
+  const { classes } = useStyles()
+
+  const {
+    SpreadsheetViewReactComponent,
+    CircularViewReactComponent,
+    showCircularView,
+  } = model
+
+  return (
+    <div className={classes.container}>
+      <div className={classes.viewsContainer}>
+        <div
+          style={{ width: model.spreadsheetView.width }}
+          className={classes.container}
+        >
+          <SpreadsheetViewReactComponent model={model.spreadsheetView} />
+        </div>
+
+        {showCircularView ? (
+          <>
+            <ResizeHandle
+              onDrag={distance => {
+                const ret1 = model.circularView.resizeWidth(-distance)
+                return model.spreadsheetView.resizeWidth(-ret1)
+              }}
+              vertical
+              flexbox
+              className={classes.resizeHandleVert}
+            />
+            <div style={{ width: model.circularView.width }}>
+              <CircularViewOptions svInspector={model} />
+              <CircularViewReactComponent model={model.circularView} />
+            </div>
+          </>
+        ) : null}
+      </div>
+      <ResizeHandle
+        onDrag={model.resizeHeight}
+        className={classes.resizeHandleHoriz}
+      />
+    </div>
+  )
+})

package/src/SvInspectorView/index.ts

@@ -0,0 +1,41 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
+
+import ReactComponent from './components/SvInspectorView'
+import stateModelFactory from './models/SvInspectorView'
+import { Feature, getContainingView, getSession } from '@jbrowse/core/util'
+import { IAnyStateTreeNode } from 'mobx-state-tree'
+
+function defaultOnChordClick(
+  feature: Feature,
+  chordTrack: IAnyStateTreeNode,
+  pluginManager: PluginManager,
+) {
+  const session = getSession(chordTrack)
+  session.setSelection(feature)
+  const view = getContainingView(chordTrack)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const viewType = pluginManager.getViewType('BreakpointSplitView') as any
+  const viewSnapshot = viewType.snapshotFromBreakendFeature(feature, view)
+
+  // try to center the offsetPx
+  viewSnapshot.views[0].offsetPx -= view.width / 2 + 100
+  viewSnapshot.views[1].offsetPx -= view.width / 2 + 100
+  viewSnapshot.featureData = feature.toJSON()
+
+  session.addView('BreakpointSplitView', viewSnapshot)
+}
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.jexl.addFunction('defaultOnChordClick', defaultOnChordClick)
+
+  pluginManager.addViewType(() => {
+    const stateModel = stateModelFactory(pluginManager)
+    return new ViewType({
+      name: 'SvInspectorView',
+      displayName: 'SV inspector',
+      stateModel,
+      ReactComponent,
+    })
+  })
+}

package/src/SvInspectorView/models/SvInspectorView.ts

@@ -0,0 +1,406 @@
+import clone from 'clone'
+import { autorun, reaction } from 'mobx'
+import { types, getParent, addDisposer, Instance } from 'mobx-state-tree'
+
+import PluginManager from '@jbrowse/core/PluginManager'
+import { getSession, Region } from '@jbrowse/core/util'
+import { readConfObject } from '@jbrowse/core/configuration'
+import { ElementId } from '@jbrowse/core/util/types/mst'
+import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models'
+import { SpreadsheetViewStateModel } from '@jbrowse/plugin-spreadsheet-view'
+import { CircularViewStateModel } from '@jbrowse/plugin-circular-view'
+
+// icons
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import FolderOpenIcon from '@mui/icons-material/FolderOpen'
+
+// locals
+import {
+  canOpenBreakpointSplitViewFromTableRow,
+  openBreakpointSplitViewFromTableRow,
+  getFeatureForRow,
+} from './breakpointSplitViewFromTableRow'
+
+/**
+ * #stateModel SvInspectorView
+ * #category view
+ * combination of a spreadsheetview and a circularview
+ */
+function SvInspectorViewF(pluginManager: PluginManager) {
+  const SpreadsheetViewType = pluginManager.getViewType('SpreadsheetView')
+  const CircularViewType = pluginManager.getViewType('CircularView')
+
+  const SpreadsheetModel =
+    SpreadsheetViewType.stateModel as SpreadsheetViewStateModel
+  const CircularModel = CircularViewType.stateModel as CircularViewStateModel
+
+  const minHeight = 400
+  const defaultHeight = 550
+  const headerHeight = 52
+  const circularViewOptionsBarHeight = 52
+  return types
+    .compose(
+      BaseViewModel,
+      types.model('SvInspectorView', {
+        /**
+         * #property
+         */
+        id: ElementId,
+        /**
+         * #property
+         */
+        type: types.literal('SvInspectorView'),
+
+        /**
+         * #property
+         */
+        height: types.optional(
+          types.refinement(
+            'SvInspectorViewHeight',
+            types.number,
+            n => n >= minHeight,
+          ),
+          defaultHeight,
+        ),
+        /**
+         * #property
+         */
+        onlyDisplayRelevantRegionsInCircularView: false,
+        /**
+         * #property
+         * switch specifying whether we are showing the import wizard or the
+         * spreadsheet in our viewing area
+         */
+        mode: types.optional(
+          types.enumeration('SvInspectorViewMode', ['import', 'display']),
+          'import',
+        ),
+        /**
+         * #property
+         */
+        spreadsheetView: types.optional(SpreadsheetModel, () =>
+          SpreadsheetModel.create({
+            type: 'SpreadsheetView',
+            hideVerticalResizeHandle: true,
+          }),
+        ),
+        /**
+         * #property
+         */
+        circularView: types.optional(CircularModel, () =>
+          CircularModel.create({
+            type: 'CircularView',
+            hideVerticalResizeHandle: true,
+            hideTrackSelectorButton: true,
+            disableImportForm: true,
+          }),
+        ),
+      }),
+    )
+    .volatile(() => ({
+      width: 800,
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get selectedRows() {
+        // @ts-expect-error
+        return self.spreadsheetView.rowSet.selectedRows
+      },
+      /**
+       * #getter
+       */
+      get assemblyName() {
+        const { assembly } = self.spreadsheetView
+        return assembly ? readConfObject(assembly, 'name') : undefined
+      },
+      /**
+       * #getter
+       */
+      get showCircularView() {
+        return self.spreadsheetView.mode === 'display'
+      },
+
+      /**
+       * #getter
+       */
+      get features() {
+        const session = getSession(self)
+        const { spreadsheetView } = self
+        const { outputRows = [] } = spreadsheetView
+        return outputRows
+          .map((r, i) => getFeatureForRow(session, spreadsheetView, r, i))
+          .filter(f => !!f)
+      },
+      /**
+       * #getter
+       */
+      get featuresAdapterConfigSnapshot() {
+        return {
+          type: 'FromConfigAdapter',
+          features: this.features,
+        }
+      },
+      /**
+       * #getter
+       */
+      get featureRefNames() {
+        const refs = this.features.map(r => r.refName)
+        const CHR2 = this.features.flatMap(r => r.INFO?.CHR2).filter(f => !!f)
+        return [...refs, ...CHR2]
+      },
+      /**
+       * #getter
+       */
+      get featuresCircularTrackConfiguration() {
+        return {
+          type: 'VariantTrack',
+          trackId: `sv-inspector-variant-track-${self.id}`,
+          name: 'features from tabular data',
+          adapter: this.featuresAdapterConfigSnapshot,
+          assemblyNames: [this.assemblyName],
+          displays: [
+            {
+              type: 'ChordVariantDisplay',
+              displayId: `sv-inspector-variant-track-chord-display-${self.id}`,
+              onChordClick: `jexl:defaultOnChordClick(feature, track, pluginManager)`,
+              renderer: { type: 'StructuralVariantChordRenderer' },
+            },
+          ],
+        }
+      },
+    }))
+    .volatile(() => ({
+      SpreadsheetViewReactComponent: SpreadsheetViewType.ReactComponent,
+      CircularViewReactComponent: CircularViewType.ReactComponent,
+      circularViewOptionsBarHeight,
+    }))
+    .actions(self => ({
+      /**
+       * #action
+       */
+      setWidth(newWidth: number) {
+        self.width = newWidth
+      },
+      /**
+       * #action
+       */
+      setHeight(newHeight: number) {
+        self.height = newHeight > minHeight ? newHeight : minHeight
+        return self.height
+      },
+      /**
+       * #action
+       */
+      setImportMode() {
+        self.spreadsheetView.setImportMode()
+      },
+      /**
+       * #action
+       */
+      setDisplayMode() {
+        self.spreadsheetView.setDisplayMode()
+      },
+      /**
+       * #action
+       */
+      closeView() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        getParent<any>(self, 2).removeView(self)
+      },
+      /**
+       * #action
+       */
+      setDisplayedRegions(regions: Region[]) {
+        self.circularView.setDisplayedRegions(regions)
+      },
+      /**
+       * #action
+       */
+      setOnlyDisplayRelevantRegionsInCircularView(val: boolean) {
+        self.onlyDisplayRelevantRegionsInCircularView = Boolean(val)
+      },
+    }))
+    .views(self => ({
+      /**
+       * #method
+       */
+      menuItems() {
+        return [
+          {
+            label: 'Return to import form',
+            onClick: () => self.setImportMode(),
+            icon: FolderOpenIcon,
+          },
+        ]
+      },
+    }))
+    .actions(self => ({
+      /**
+       * #action
+       */
+      resizeHeight(distance: number) {
+        const oldHeight = self.height
+        const newHeight = self.setHeight(self.height + distance)
+        return newHeight - oldHeight
+      },
+      afterAttach() {
+        // synchronize subview widths
+        addDisposer(
+          self,
+          autorun(
+            () => {
+              const borderWidth = 1
+              if (self.showCircularView) {
+                const spreadsheetWidth = Math.round(self.width * 0.66)
+                const circularViewWidth = self.width - spreadsheetWidth
+                self.spreadsheetView.setWidth(spreadsheetWidth - borderWidth)
+                self.circularView.setWidth(circularViewWidth)
+              } else {
+                self.spreadsheetView.setWidth(self.width)
+              }
+            },
+            { name: 'SvInspectorView width binding' },
+          ),
+        )
+        // synchronize subview heights
+        addDisposer(
+          self,
+          autorun(
+            () => {
+              self.spreadsheetView.setHeight(self.height - headerHeight)
+              self.circularView.setHeight(
+                self.height - headerHeight - circularViewOptionsBarHeight,
+              )
+            },
+            { name: 'SvInspectorView height binding' },
+          ),
+        )
+
+        // bind circularview displayedRegions to spreadsheet assembly, mediated
+        // by the onlyRelevantRegions toggle
+        addDisposer(
+          self,
+          autorun(
+            async () => {
+              const {
+                assemblyName,
+                onlyDisplayRelevantRegionsInCircularView,
+                circularView,
+                featureRefNames,
+              } = self
+              const { tracks } = circularView
+              const { assemblyManager } = getSession(self)
+              if (!assemblyName) {
+                return
+              }
+              const asm = await assemblyManager.waitForAssembly(assemblyName)
+              if (!asm) {
+                return
+              }
+
+              const { getCanonicalRefName, regions = [] } = asm
+              if (onlyDisplayRelevantRegionsInCircularView) {
+                if (tracks.length === 1) {
+                  try {
+                    // canonicalize the store's ref names if necessary
+                    const refSet = new Set(
+                      featureRefNames.map(r => getCanonicalRefName(r) || r),
+                    )
+
+                    circularView.setDisplayedRegions(
+                      clone(regions.filter(r => refSet.has(r.refName))),
+                    )
+                  } catch (e) {
+                    circularView.setError(e)
+                  }
+                }
+              } else {
+                circularView.setDisplayedRegions(regions)
+              }
+            },
+            { name: 'SvInspectorView displayed regions bind' },
+          ),
+        )
+
+        // bind circularview tracks to our track snapshot view
+        addDisposer(
+          self,
+          reaction(
+            () => ({
+              generatedTrackConf: self?.featuresCircularTrackConfiguration,
+              assemblyName: self?.assemblyName,
+            }),
+            data => {
+              if (!data) {
+                return
+              }
+              const { assemblyName, generatedTrackConf } = data
+              const { circularView } = self
+              // hide any visible tracks
+              circularView.tracks.forEach(t =>
+                circularView.hideTrack(t.configuration.trackId),
+              )
+
+              // put our track in as the only track
+              if (assemblyName && generatedTrackConf) {
+                // @ts-expect-error
+                circularView.addTrackConf(generatedTrackConf, {
+                  assemblyName,
+                })
+              }
+            },
+            {
+              name: 'SvInspectorView track configuration binding',
+              fireImmediately: true,
+            },
+          ),
+        )
+
+        // bind spreadsheetView row menu actions to us
+        addDisposer(
+          self,
+          autorun(() => {
+            self.spreadsheetView.setRowMenuItems(
+              // these are the MenuItem entries for the row menu actions in the
+              // spreadsheet view.  these are installed into the child
+              // SpreadsheetView using an autorun below
+              [
+                {
+                  label: 'Open split detail view',
+                  icon: OpenInNewIcon,
+                  // @ts-expect-error
+                  disabled(spreadsheetView, spreadsheet, rowNumber, row) {
+                    return !canOpenBreakpointSplitViewFromTableRow(
+                      self,
+                      spreadsheetView,
+                      spreadsheet,
+                      row,
+                      rowNumber,
+                    )
+                  },
+
+                  // @ts-expect-error
+                  onClick(spreadsheetView, spreadsheet, rowNumber, row) {
+                    openBreakpointSplitViewFromTableRow(
+                      self,
+                      spreadsheetView,
+                      spreadsheet,
+                      row,
+                      rowNumber,
+                    )
+                  },
+                },
+              ],
+            )
+          }),
+        )
+      },
+    }))
+}
+
+export type SvInspectorViewStateModel = ReturnType<typeof SvInspectorViewF>
+export type SvInspectorViewModel = Instance<SvInspectorViewStateModel>
+
+export default SvInspectorViewF