@jbrowse/plugin-dotplot-view 2.6.1

package/src/DotplotDisplay/stateModelFactory.tsx

@@ -0,0 +1,196 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react'
+import { ThemeOptions } from '@mui/material'
+import { types, Instance } from 'mobx-state-tree'
+import {
+  getConf,
+  ConfigurationReference,
+  AnyConfigurationSchemaType,
+} from '@jbrowse/core/configuration'
+import { getParentRenderProps } from '@jbrowse/core/util/tracks'
+import {
+  getContainingView,
+  makeAbortableReaction,
+  ReactRendering,
+} from '@jbrowse/core/util'
+import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
+
+// locals
+import ServerSideRenderedBlockContent from '../ServerSideRenderedBlockContent'
+import { renderBlockData, renderBlockEffect } from './renderDotplotBlock'
+import { DotplotViewModel, ExportSvgOptions } from '../DotplotView/model'
+
+/**
+ * #stateModel DotplotDisplay
+ * #category display
+ */
+export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
+  return types
+    .compose(
+      'DotplotDisplay',
+      BaseDisplay,
+      types
+        .model({
+          /**
+           * #property
+           */
+          type: types.literal('DotplotDisplay'),
+          /**
+           * #property
+           */
+          configuration: ConfigurationReference(configSchema),
+        })
+        .volatile(() => ({
+          warnings: [] as { message: string; effect: string }[],
+          renderInProgress: undefined as AbortController | undefined,
+          filled: false,
+          data: undefined as any,
+          reactElement: undefined as React.ReactElement | undefined,
+          message: undefined as string | undefined,
+          renderingComponent: undefined as any,
+          ReactComponent2:
+            ServerSideRenderedBlockContent as unknown as React.FC<any>,
+        })),
+    )
+    .views(self => ({
+      get shouldDisplay() {
+        const view = getContainingView(self)
+        return (
+          view.vview.bpPerPx === self.data.bpPerPxY &&
+          view.hview.bpPerPx === self.data.bpPerPxX
+        )
+      },
+      /**
+       * #getter
+       */
+      get rendererTypeName() {
+        return getConf(self, ['renderer', 'type'])
+      },
+      /**
+       * #method
+       */
+      renderProps() {
+        return {
+          ...getParentRenderProps(self),
+          rpcDriverName: self.rpcDriverName,
+          displayModel: self,
+          config: self.configuration.renderer,
+        }
+      },
+    }))
+    .views(self => ({
+      /**
+       * #method
+       */
+      async renderSvg(opts: ExportSvgOptions & { theme: ThemeOptions }) {
+        const props = renderBlockData(self)
+        if (!props) {
+          return null
+        }
+
+        const { rendererType, rpcManager, renderProps } = props
+        const rendering = await rendererType.renderInClient(rpcManager, {
+          ...renderProps,
+          exportSVG: opts,
+          theme: opts.theme || renderProps.theme,
+        })
+        const { hview, vview } = getContainingView(self) as DotplotViewModel
+        const offX = -hview.offsetPx + rendering.offsetX
+        const offY = -vview.offsetPx + rendering.offsetY
+        return (
+          <g transform={`translate(${offX} ${-offY})`}>
+            <ReactRendering rendering={rendering} />
+          </g>
+        )
+      },
+    }))
+    .actions(self => {
+      let renderInProgress: undefined | AbortController
+
+      return {
+        afterAttach() {
+          makeAbortableReaction(
+            self,
+            () => renderBlockData(self),
+            blockData => renderBlockEffect(blockData),
+            {
+              name: `${self.type} ${self.id} rendering`,
+              delay: 500,
+              fireImmediately: true,
+            },
+            this.setLoading,
+            this.setRendered,
+            this.setError,
+          )
+        },
+        /**
+         * #action
+         */
+        setLoading(abortController: AbortController) {
+          self.filled = false
+          self.message = undefined
+          self.reactElement = undefined
+          self.data = undefined
+          self.error = undefined
+          self.renderingComponent = undefined
+          renderInProgress = abortController
+        },
+        /**
+         * #action
+         */
+        setMessage(messageText: string) {
+          if (renderInProgress && !renderInProgress.signal.aborted) {
+            renderInProgress.abort()
+          }
+          self.filled = false
+          self.message = messageText
+          self.reactElement = undefined
+          self.data = undefined
+          self.error = undefined
+          self.renderingComponent = undefined
+          renderInProgress = undefined
+        },
+        /**
+         * #action
+         */
+        setRendered(args?: {
+          data: any
+          reactElement: React.ReactElement
+          renderingComponent: React.Component
+        }) {
+          if (args === undefined) {
+            return
+          }
+          const { data, reactElement, renderingComponent } = args
+          self.warnings = data.warnings
+          self.filled = true
+          self.message = undefined
+          self.reactElement = reactElement
+          self.data = data
+          self.error = undefined
+          self.renderingComponent = renderingComponent
+          renderInProgress = undefined
+        },
+        /**
+         * #action
+         */
+        setError(error: unknown) {
+          console.error(error)
+          if (renderInProgress && !renderInProgress.signal.aborted) {
+            renderInProgress.abort()
+          }
+          // the rendering failed for some reason
+          self.filled = false
+          self.message = undefined
+          self.reactElement = undefined
+          self.data = undefined
+          self.error = error
+          self.renderingComponent = undefined
+          renderInProgress = undefined
+        },
+      }
+    })
+}
+
+export type DotplotDisplayStateModel = ReturnType<typeof stateModelFactory>
+export type DotplotDisplayModel = Instance<DotplotDisplayStateModel>

package/src/DotplotReadVsRef/DotplotReadVsRef.ts

@@ -0,0 +1,115 @@
+import { getConf } from '@jbrowse/core/configuration'
+import { getSession, Feature, gatherOverlaps } from '@jbrowse/core/util'
+import {
+  LinearPileupDisplayModel,
+  MismatchParser,
+} from '@jbrowse/plugin-alignments'
+
+// locals
+import { ReducedFeature } from '../util'
+
+const { featurizeSA, getClip, getTag, getLength, getLengthSansClipping } =
+  MismatchParser
+
+export function onClick(feature: Feature, self: LinearPileupDisplayModel) {
+  const session = getSession(self)
+  try {
+    const cigar = feature.get('CIGAR')
+    const clipPos = getClip(cigar, 1)
+    const flags = feature.get('flags')
+    const strand = feature.get('strand')
+    const readName = feature.get('name')
+    const readAssembly = `${readName}_assembly_${Date.now()}`
+    const { parentTrack } = self
+    const [trackAssembly] = getConf(parentTrack, 'assemblyNames')
+    const assemblyNames = [trackAssembly, readAssembly]
+    const trackId = `track-${Date.now()}`
+    const trackName = `${readName}_vs_${trackAssembly}`
+    const SA = (getTag(feature, 'SA') as string) || ''
+    const SA2 = featurizeSA(SA, feature.id(), strand, readName, true)
+
+    const feat = feature.toJSON()
+    feat.strand = 1
+    feat.mate = {
+      refName: readName,
+      start: clipPos,
+      end: clipPos + getLengthSansClipping(cigar),
+    }
+
+    // if secondary alignment or supplementary, calculate length from SA[0]'s
+    // CIGAR which is the primary alignments. otherwise it is the primary
+    // alignment just use seq.length if primary alignment
+    const totalLength = getLength(flags & 2048 ? SA2[0].CIGAR : cigar)
+
+    const features = [feat, ...SA2] as ReducedFeature[]
+
+    features.sort((a, b) => a.clipPos - b.clipPos)
+
+    const refLength = features.reduce((a, f) => a + f.end - f.start, 0)
+
+    session.addView('DotplotView', {
+      type: 'DotplotView',
+      hview: {
+        offsetPx: 0,
+        bpPerPx: refLength / 800,
+        displayedRegions: gatherOverlaps(
+          features.map((f, index) => {
+            const { start, end, refName } = f
+            return {
+              start,
+              end,
+              refName,
+              index,
+              assemblyName: trackAssembly,
+            }
+          }),
+        ),
+      },
+      vview: {
+        offsetPx: 0,
+        bpPerPx: totalLength / 400,
+        minimumBlockWidth: 0,
+        interRegionPaddingWidth: 0,
+        displayedRegions: [
+          {
+            assemblyName: readAssembly,
+            start: 0,
+            end: totalLength,
+            refName: readName,
+          },
+        ],
+      },
+
+      viewTrackConfigs: [
+        {
+          type: 'SyntenyTrack',
+          assemblyNames,
+          adapter: {
+            type: 'FromConfigAdapter',
+            features,
+          },
+          trackId,
+          name: trackName,
+        },
+      ],
+      assemblyNames,
+      tracks: [
+        {
+          configuration: trackId,
+          type: 'SyntenyTrack',
+          displays: [
+            {
+              type: 'DotplotDisplay',
+              configuration: `${trackId}-DotplotDisplay`,
+            },
+          ],
+        },
+      ],
+
+      displayName: `${readName} vs ${trackAssembly}`,
+    })
+  } catch (e) {
+    console.error(e)
+    session.notify(`${e}`, 'error')
+  }
+}

package/src/DotplotReadVsRef/index.ts

@@ -0,0 +1,50 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import {
+  PluggableElementType,
+  ViewType,
+} from '@jbrowse/core/pluggableElementTypes'
+import { LinearPileupDisplayModel } from '@jbrowse/plugin-alignments'
+
+// icons
+import AddIcon from '@mui/icons-material/Add'
+
+// local
+import { onClick } from './DotplotReadVsRef'
+
+export default function DotplotReadVsRefMenuItem(pluginManager: PluginManager) {
+  pluginManager.addToExtensionPoint(
+    'Core-extendPluggableElement',
+    (pluggableElement: PluggableElementType) => {
+      if (pluggableElement.name === 'LinearPileupDisplay') {
+        const { stateModel } = pluggableElement as ViewType
+        const newStateModel = stateModel.extend(
+          (self: LinearPileupDisplayModel) => {
+            const superContextMenuItems = self.contextMenuItems
+            return {
+              views: {
+                contextMenuItems() {
+                  const feature = self.contextMenuFeature
+                  return [
+                    ...superContextMenuItems(),
+                    ...(feature
+                      ? [
+                          {
+                            label: 'Dotplot of read vs ref',
+                            icon: AddIcon,
+                            onClick: () => onClick(feature, self),
+                          },
+                        ]
+                      : []),
+                  ]
+                },
+              },
+            }
+          },
+        )
+
+        ;(pluggableElement as ViewType).stateModel = newStateModel
+      }
+      return pluggableElement
+    },
+  )
+}

package/src/DotplotRenderer/ComparativeRenderRpc.ts

@@ -0,0 +1,87 @@
+import { checkAbortSignal } from '@jbrowse/core/util'
+import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType'
+import ComparativeRenderer, {
+  RenderArgs as ComparativeRenderArgs,
+  RenderArgsSerialized as ComparativeRenderArgsSerialized,
+  RenderResults,
+  ResultsSerialized,
+} from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType'
+import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals'
+
+interface RenderArgs extends ComparativeRenderArgs {
+  adapterConfig: {}
+  rendererType: string
+}
+
+interface RenderArgsSerialized extends ComparativeRenderArgsSerialized {
+  adapterConfig: {}
+  rendererType: string
+}
+
+/**
+ * call a synteny renderer with the given args
+ * param views: a set of views that each contain a set of regions
+ * used instead of passing regions directly as in render()
+ */
+export default class ComparativeRender extends RpcMethodType {
+  name = 'ComparativeRender'
+
+  async renameRegionsIfNeeded(args: RenderArgs, rend: ComparativeRenderer) {
+    return rend.renameRegionsIfNeeded(args)
+  }
+
+  getRenderer(rendererType: string) {
+    const pm = this.pluginManager
+    return pm.getRendererType(rendererType) as ComparativeRenderer
+  }
+
+  async serializeArguments(args: RenderArgs, rpcDriver: string) {
+    const { rendererType } = args
+    const renderer = this.getRenderer(rendererType)
+    const n = (await super.serializeArguments(args, rpcDriver)) as RenderArgs
+    const result = await this.renameRegionsIfNeeded(n, renderer)
+
+    return rpcDriver === 'MainThreadRpcDriver'
+      ? result
+      : renderer.serializeArgsInClient(result)
+  }
+
+  async execute(
+    args: RenderArgsSerialized & { signal?: RemoteAbortSignal },
+    rpcDriver: string,
+  ) {
+    let deserializedArgs = args
+    if (rpcDriver !== 'MainThreadRpcDriver') {
+      deserializedArgs = await this.deserializeArguments(args, rpcDriver)
+    }
+    const { sessionId, rendererType, signal } = deserializedArgs
+    if (!sessionId) {
+      throw new Error('must pass a unique session id')
+    }
+
+    checkAbortSignal(signal)
+
+    const renderer = this.getRenderer(rendererType)
+    return rpcDriver === 'MainThreadRpcDriver'
+      ? renderer.render(deserializedArgs)
+      : renderer.renderInWorker(deserializedArgs)
+  }
+
+  async deserializeReturn(
+    val: RenderResults | ResultsSerialized,
+    args: RenderArgs,
+    rpcDriver: string,
+  ): Promise<unknown> {
+    const ret = (await super.deserializeReturn(
+      val,
+      args,
+      rpcDriver,
+    )) as ResultsSerialized
+    if (rpcDriver === 'MainThreadRpcDriver') {
+      return ret
+    }
+
+    const renderer = this.getRenderer(args.rendererType)
+    return renderer.deserializeResultsInClient(ret, args)
+  }
+}