@jbrowse/plugin-linear-comparative-view 2.6.1

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@jbrowse/plugin-linear-comparative-view",
+  "version": "2.6.1",
+  "description": "JBrowse 2 linear comparative view",
+  "keywords": [
+    "jbrowse",
+    "jbrowse2"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://jbrowse.org",
+  "bugs": "https://github.com/GMOD/jbrowse-components/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GMOD/jbrowse-components.git",
+    "directory": "plugins/linear-comparative-view"
+  },
+  "author": "JBrowse Team",
+  "distMain": "dist/index.js",
+  "srcMain": "src/index.tsx",
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "src",
+    "esm"
+  ],
+  "scripts": {
+    "build": "npm-run-all build:*",
+    "test": "cd ../..; jest plugins/linear-comparative-view",
+    "prepublishOnly": "yarn test",
+    "prepack": "yarn build && yarn useDist",
+    "postpack": "yarn useSrc",
+    "useDist": "node ../../scripts/useDist.js",
+    "useSrc": "node ../../scripts/useSrc.js",
+    "prebuild": "npm run clean",
+    "build:esm": "tsc --build tsconfig.build.esm.json",
+    "build:es5": "tsc --build tsconfig.build.es5.json",
+    "clean": "rimraf dist esm *.tsbuildinfo"
+  },
+  "dependencies": {
+    "@mui/icons-material": "^5.0.1",
+    "@popperjs/core": "^2.0.0",
+    "clone": "^2.1.2",
+    "copy-to-clipboard": "^3.3.1",
+    "file-saver": "^2.0.0",
+    "react-popper": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@jbrowse/core": "^2.0.0",
+    "@jbrowse/plugin-alignments": "^2.0.0",
+    "@jbrowse/plugin-linear-genome-view": "^2.0.0",
+    "@mui/material": "^5.0.0",
+    "mobx": "^6.0.0",
+    "mobx-react": "^7.0.0",
+    "mobx-state-tree": "^5.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "rxjs": "^7.0.0",
+    "tss-react": "^4.0.0"
+  },
+  "distModule": "esm/index.js",
+  "srcModule": "src/index.ts",
+  "module": "esm/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "1cbe7ba097fb2d2763c776e5e429e4670cdd583c"
+}

package/src/LGVSyntenyDisplay/configSchemaF.ts

@@ -0,0 +1,22 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { linearPileupDisplayConfigSchemaFactory } from '@jbrowse/plugin-alignments'
+
+/**
+ * #config LGVSyntenyDisplay
+ */
+function configSchemaF(pluginManager: PluginManager) {
+  return ConfigurationSchema(
+    'LGVSyntenyDisplay',
+    {},
+    {
+      /**
+       * #baseConfiguration
+       */
+      baseConfiguration: linearPileupDisplayConfigSchemaFactory(pluginManager),
+      explicitlyTyped: true,
+    },
+  )
+}
+
+export default configSchemaF

package/src/LGVSyntenyDisplay/index.ts

@@ -0,0 +1,20 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
+import configSchemaF from './configSchemaF'
+import stateModelF from './model'
+import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addDisplayType(() => {
+    const configSchema = configSchemaF(pluginManager)
+    const stateModel = stateModelF(configSchema)
+    return new DisplayType({
+      name: 'LGVSyntenyDisplay',
+      configSchema,
+      stateModel,
+      trackType: 'SyntenyTrack',
+      viewType: 'LinearGenomeView',
+      ReactComponent: BaseLinearDisplayComponent,
+    })
+  })
+}

package/src/LGVSyntenyDisplay/model.ts

@@ -0,0 +1,177 @@
+import {
+  ConfigurationReference,
+  AnyConfigurationSchemaType,
+} from '@jbrowse/core/configuration'
+import {
+  getSession,
+  getContainingTrack,
+  getContainingView,
+  Feature,
+} from '@jbrowse/core/util'
+import {
+  MismatchParser,
+  linearPileupDisplayStateModelFactory,
+} from '@jbrowse/plugin-alignments'
+import { IAnyStateTreeNode, types } from 'mobx-state-tree'
+import { when } from 'mobx'
+
+// locals
+import { LinearSyntenyViewModel } from '../LinearSyntenyView/model'
+
+type LSV = LinearSyntenyViewModel
+
+const { parseCigar } = MismatchParser
+
+function findPosInCigar(cigar: string[], startX: number) {
+  let featX = 0
+  let mateX = 0
+  for (let i = 0; i < cigar.length; i++) {
+    const len = +cigar[i]
+    const op = cigar[i + 1]
+    const min = Math.min(len, startX - featX)
+
+    if (featX >= startX) {
+      break
+    } else if (op === 'I') {
+      mateX += len
+    } else if (op === 'D') {
+      featX += min
+    } else if (op === 'M') {
+      mateX += min
+      featX += min
+    }
+  }
+  return [featX, mateX]
+}
+
+async function navToSynteny(feature: Feature, self: IAnyStateTreeNode) {
+  const session = getSession(self)
+  const track = getContainingTrack(self)
+  const view = getContainingView(self)
+  const reg = view.dynamicBlocks.contentBlocks[0]
+  const cigar = feature.get('CIGAR')
+  const strand = feature.get('strand')
+  const regStart = reg.start
+  const regEnd = reg.end
+  const featStart = feature.get('start')
+  const featEnd = feature.get('end')
+  const mate = feature.get('mate')
+  const mateStart = mate.start
+  const mateEnd = mate.end
+  const mateAsm = mate.assemblyName
+  const mateRef = mate.refName
+  const featAsm = reg.assemblyName
+  const featRef = reg.refName
+
+  let rMateStart: number
+  let rMateEnd: number
+  let rFeatStart: number
+  let rFeatEnd: number
+
+  if (cigar) {
+    const p = parseCigar(cigar)
+    const [fStartX, mStartX] = findPosInCigar(p, regStart - featStart)
+    const [fEndX, mEndX] = findPosInCigar(p, regEnd - featStart)
+
+    // avoid multiply by 0 with strand undefined
+    const flipper = strand === -1 ? -1 : 1
+    rFeatStart = featStart + fStartX
+    rFeatEnd = featStart + fEndX
+    rMateStart = (strand === -1 ? mateEnd : mateStart) + mStartX * flipper
+    rMateEnd = (strand === -1 ? mateEnd : mateStart) + mEndX * flipper
+  } else {
+    rFeatStart = featStart
+    rFeatEnd = featEnd
+    rMateStart = mateStart
+    rMateEnd = mateEnd
+  }
+  const trackId = track.configuration.trackId
+
+  const view2 = session.addView('LinearSyntenyView', {
+    type: 'LinearSyntenyView',
+    views: [
+      {
+        id: `${Math.random()}`,
+        type: 'LinearGenomeView',
+        hideHeader: true,
+      },
+      {
+        id: `${Math.random()}`,
+        type: 'LinearGenomeView',
+        hideHeader: true,
+      },
+    ],
+    tracks: [
+      {
+        configuration: trackId,
+        type: 'SyntenyTrack',
+        displays: [
+          {
+            type: 'LinearSyntenyDisplay',
+            configuration: `${trackId}-LinearSyntenyDisplay`,
+          },
+        ],
+      },
+    ],
+  }) as LSV
+  const f = (n: number) => Math.floor(n)
+  const l1 = `${featRef}:${f(rFeatStart)}-${f(rFeatEnd)}`
+  const m1 = Math.min(rMateStart, rMateEnd)
+  const m2 = Math.max(rMateStart, rMateEnd)
+  const l2 = `${mateRef}:${f(m1)}-${f(m2)}${strand === -1 ? '[rev]' : ''}`
+  await when(() => view2.width !== undefined)
+  await Promise.all([
+    view2.views[0].navToLocString(l1, featAsm),
+    view2.views[1].navToLocString(l2, mateAsm),
+  ])
+}
+
+/**
+ * #stateModel LGVSyntenyDisplay
+ * extends `LinearPileupDisplay`, displays location of "synteny" feature in a
+ * plain LGV, allowing linking out to external synteny views
+ */
+function stateModelFactory(schema: AnyConfigurationSchemaType) {
+  return types
+    .compose(
+      'LGVSyntenyDisplay',
+      linearPileupDisplayStateModelFactory(schema),
+      types.model({
+        /**
+         * #property
+         */
+        type: types.literal('LGVSyntenyDisplay'),
+        /**
+         * #property
+         */
+        configuration: ConfigurationReference(schema),
+      }),
+    )
+    .views(self => {
+      const superContextMenuItems = self.contextMenuItems
+      return {
+        contextMenuItems() {
+          const feature = self.contextMenuFeature
+          return [
+            ...superContextMenuItems(),
+            ...(feature
+              ? [
+                  {
+                    label: 'Open synteny view for this position',
+                    onClick: () => navToSynteny(feature, self),
+                  },
+                ]
+              : []),
+          ]
+        },
+      }
+    })
+    .actions(self => ({
+      afterCreate() {
+        // use color by strand to help indicate inversions better
+        self.setColorScheme({ type: 'strand' })
+      },
+    }))
+}
+
+export default stateModelFactory

package/src/LaunchLinearSyntenyView.ts

@@ -0,0 +1,86 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { AbstractSessionModel } from '@jbrowse/core/util'
+import { LinearSyntenyViewModel } from './LinearSyntenyView/model'
+import { when } from 'mobx'
+
+type LSV = LinearSyntenyViewModel
+
+export default function LaunchLinearSyntenyView(pluginManager: PluginManager) {
+  pluginManager.addToExtensionPoint(
+    'LaunchView-LinearSyntenyView',
+    // @ts-expect-error
+    async ({
+      session,
+      views,
+      tracks = [],
+    }: {
+      session: AbstractSessionModel
+      views: { loc: string; assembly: string; tracks?: string[] }[]
+      tracks?: string[]
+    }) => {
+      try {
+        const { assemblyManager } = session
+        const model = session.addView('LinearSyntenyView', {}) as LSV
+
+        await when(() => !!model.width)
+
+        model.setViews(
+          await Promise.all(
+            views.map(async view => {
+              const asm = await assemblyManager.waitForAssembly(view.assembly)
+              if (!asm) {
+                throw new Error(`Assembly ${view.assembly} failed to load`)
+              }
+              return {
+                type: 'LinearGenomeView' as const,
+                bpPerPx: 1,
+                offsetPx: 0,
+                hideHeader: true,
+                displayedRegions: asm.regions,
+              }
+            }),
+          ),
+        )
+
+        await Promise.all(model.views.map(view => when(() => view.initialized)))
+
+        const idsNotFound = [] as string[]
+        await Promise.all(
+          views.map(async (data, idx) => {
+            const view = model.views[idx]
+            const { loc, tracks = [] } = data
+            await view.navToLocString(loc)
+            tracks.forEach(track => tryTrack(view, track, idsNotFound))
+          }),
+        )
+
+        tracks.forEach(track => tryTrack(model, track, idsNotFound))
+
+        if (idsNotFound.length) {
+          throw new Error(
+            `Could not resolve identifiers: ${idsNotFound.join(',')}`,
+          )
+        }
+      } catch (e) {
+        session.notify(`${e}`, 'error')
+        throw e
+      }
+    },
+  )
+}
+
+function tryTrack(
+  model: { showTrack: (arg: string) => void },
+  trackId: string,
+  idsNotFound: string[],
+) {
+  try {
+    model.showTrack(trackId)
+  } catch (e) {
+    if (`${e}`.match('Could not resolve identifier')) {
+      idsNotFound.push(trackId)
+    } else {
+      throw e
+    }
+  }
+}

package/src/LinearComparativeDisplay/configSchemaF.ts

@@ -0,0 +1,22 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+
+/**
+ * #config LinearComparativeDisplay
+ */
+function configSchemaFactory(pluginManager: any) {
+  return ConfigurationSchema(
+    'LinearComparativeDisplay',
+    {},
+    {
+      explicitlyTyped: true,
+
+      /**
+       * #identifier
+       */
+      explicitIdentifier: 'displayId',
+    },
+  )
+}
+
+export default configSchemaFactory

package/src/LinearComparativeDisplay/index.ts

@@ -0,0 +1,21 @@
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+import configSchemaFactory from './configSchemaF'
+import stateModelFactory from './stateModelFactory'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addDisplayType(() => {
+    const configSchema = configSchemaFactory(pluginManager)
+    return new DisplayType({
+      name: 'LinearComparativeDisplay',
+      configSchema,
+      stateModel: stateModelFactory(configSchema),
+      trackType: 'SyntenyTrack',
+      viewType: 'LinearComparativeView',
+      ReactComponent: () => {
+        return null
+      },
+    })
+  })
+}

package/src/LinearComparativeDisplay/stateModelFactory.ts

@@ -0,0 +1,212 @@
+import {
+  readConfObject,
+  ConfigurationReference,
+  AnyConfigurationSchemaType,
+} from '@jbrowse/core/configuration'
+import { types, getSnapshot, Instance } from 'mobx-state-tree'
+import {
+  dedupe,
+  Feature,
+  getContainingView,
+  getSession,
+  makeAbortableReaction,
+} from '@jbrowse/core/util'
+import { getRpcSessionId } from '@jbrowse/core/util/tracks'
+import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
+import { LinearComparativeViewModel } from '../LinearComparativeView/model'
+
+/**
+ * #stateModel LinearComparativeDisplay
+ */
+function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
+  return types
+    .compose(
+      'LinearComparativeDisplay',
+      BaseDisplay,
+      types.model({
+        /**
+         * #property
+         */
+        type: types.literal('LinearComparativeDisplay'),
+        /**
+         * #property
+         */
+        configuration: ConfigurationReference(configSchema),
+        /**
+         * #property
+         */
+        height: 100,
+      }),
+    )
+    .volatile((/* self */) => ({
+      renderInProgress: undefined as AbortController | undefined,
+      features: undefined as Feature[] | undefined,
+      message: undefined as string | undefined,
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      renderProps() {
+        return {
+          rpcDriverName: self.rpcDriverName,
+          displayModel: self,
+          highResolutionScaling: 2,
+        }
+      },
+    }))
+    .actions(self => {
+      let renderInProgress: undefined | AbortController
+
+      return {
+        /**
+         * #action
+         * controlled by a reaction
+         */
+        setLoading(abortController: AbortController) {
+          self.message = undefined
+          self.error = undefined
+          renderInProgress = abortController
+        },
+
+        /**
+         * #action
+         * controlled by a reaction
+         */
+        setMessage(messageText: string) {
+          if (renderInProgress && !renderInProgress.signal.aborted) {
+            renderInProgress.abort()
+          }
+          self.message = messageText
+          self.error = undefined
+          renderInProgress = undefined
+        },
+
+        /**
+         * #action
+         * controlled by a reaction
+         */
+        setRendered(args?: { features: Feature[] }) {
+          if (!args) {
+            return
+          }
+          const { features } = args
+          const existingFeatures = self.features || []
+
+          const featIds = new Set(existingFeatures.map(f => f.id()) || [])
+          const newFeatIds = new Set(features?.map(f => f.id()) || [])
+
+          let foundNewFeatureNotInExistingMap = false
+          let foundExistingFeatureNotInNewMap = false
+          for (let i = 0; i < features.length; i++) {
+            if (!featIds.has(features[i].id())) {
+              foundNewFeatureNotInExistingMap = true
+              break
+            }
+          }
+          for (let i = 0; i < existingFeatures.length; i++) {
+            if (!newFeatIds.has(existingFeatures[i].id())) {
+              foundExistingFeatureNotInNewMap = true
+              break
+            }
+          }
+
+          self.message = undefined
+          self.error = undefined
+          renderInProgress = undefined
+
+          if (
+            foundNewFeatureNotInExistingMap ||
+            foundExistingFeatureNotInNewMap ||
+            !self.features
+          ) {
+            self.features = features
+          }
+        },
+
+        /**
+         * #action
+         * controlled by a reaction
+         */
+        setError(error: unknown) {
+          console.error(error)
+          if (renderInProgress && !renderInProgress.signal.aborted) {
+            renderInProgress.abort()
+          }
+          // the rendering failed for some reason
+          self.message = undefined
+          self.error = error
+          renderInProgress = undefined
+        },
+      }
+    })
+    .actions(self => ({
+      afterAttach() {
+        makeAbortableReaction(
+          // @ts-expect-error
+          self,
+          renderBlockData,
+          renderBlockEffect,
+          {
+            name: `${self.type} ${self.id} rendering`,
+            delay: 1000,
+            fireImmediately: true,
+          },
+          self.setLoading,
+          self.setRendered,
+          self.setError,
+        )
+      },
+    }))
+}
+function renderBlockData(self: LinearComparativeDisplay) {
+  const { rpcManager } = getSession(self)
+  const display = self
+
+  // Alternative to readConfObject(config) is below used because renderProps is
+  // something under our control.  Compare to serverSideRenderedBlock
+  readConfObject(self.configuration)
+
+  const { adapterConfig } = self
+  const parent = getContainingView(self) as LinearComparativeViewModel
+  const sessionId = getRpcSessionId(self)
+  getSnapshot(parent)
+
+  return parent.initialized
+    ? {
+        rpcManager,
+        renderProps: {
+          ...display.renderProps(),
+          view: parent,
+          adapterConfig,
+          sessionId,
+          timeout: 1000000,
+          self,
+        },
+      }
+    : undefined
+}
+
+async function renderBlockEffect(props: ReturnType<typeof renderBlockData>) {
+  if (!props) {
+    return
+  }
+
+  const { rpcManager, renderProps } = props
+  const { adapterConfig } = renderProps
+  const view0 = renderProps.view.views[0]
+
+  const features = (await rpcManager.call('getFeats', 'CoreGetFeatures', {
+    regions: view0.staticBlocks.contentBlocks,
+    sessionId: 'getFeats',
+    adapterConfig,
+  })) as Feature[]
+
+  return {
+    features: dedupe(features, f => f.id()),
+  }
+}
+
+export default stateModelFactory
+export type LinearComparativeDisplayModel = ReturnType<typeof stateModelFactory>
+export type LinearComparativeDisplay = Instance<LinearComparativeDisplayModel>