Use extendPluggableElement for context menu items

plugins/alignments/src/LinearPileupDisplay/model.ts

@@ -353,7 +353,7 @@ const stateModelFactory = (
           return rendererType
         },
 
-        get contextMenuItems() {
+        contextMenuItems() {
           const feat = self.contextMenuFeature
           const contextMenuItems = feat
             ? [
@@ -378,12 +378,6 @@ const stateModelFactory = (
                 },
               ]
             : []
-          self.additionalContextMenuItemCallbacks.forEach(
-            (callback: Function) => {
-              const menuItems = callback(feat, self, pluginManager)
-              contextMenuItems.push(...menuItems)
-            },
-          )
           return contextMenuItems
         },
 

plugins/alignments/src/LinearSNPCoverageDisplay/models/model.ts

@@ -194,7 +194,7 @@ const stateModelFactory = (
           return true
         },
 
-        get contextMenuItems() {
+        contextMenuItems() {
           return []
         },
 

plugins/alignments/src/index.ts

@@ -29,6 +29,7 @@ import {
   configSchemaFactory as linearPileupDisplayConfigSchemaFactory,
   modelFactory as linearPileupDisplayModelFactory,
 } from './LinearPileupDisplay'
+import { LinearPileupDisplayModel } from './LinearPileupDisplay/model'
 import {
   configSchemaFactory as linearSNPCoverageDisplayConfigSchemaFactory,
   modelFactory as linearSNPCoverageDisplayModelFactory,
@@ -48,6 +49,7 @@ import {
 } from './PileupRPC/rpcMethods'
 
 export { MismatchParser }
+export type { LinearPileupDisplayModel }
 
 export default class AlignmentsPlugin extends Plugin {
   name = 'AlignmentsPlugin'

plugins/dotplot-view/src/index.ts

@@ -5,7 +5,6 @@ import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType'
 
 import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
 import AddIcon from '@material-ui/icons/Add'
-import { autorun } from 'mobx'
 import PluginManager from '@jbrowse/core/PluginManager'
 import {
   AbstractSessionModel,
@@ -15,10 +14,8 @@ import {
 
 import { getConf } from '@jbrowse/core/configuration'
 import { Feature } from '@jbrowse/core/util/simpleFeature'
-import { AbstractDisplayModel } from '@jbrowse/core/util/types'
 import TimelineIcon from '@material-ui/icons/Timeline'
 import { MismatchParser } from '@jbrowse/plugin-alignments'
-import { IAnyStateTreeNode } from 'mobx-state-tree'
 import {
   configSchemaFactory as dotplotDisplayConfigSchemaFactory,
   stateModelFactory as dotplotDisplayStateModelFactory,
@@ -35,15 +32,15 @@ import {
   AdapterClass as PAFAdapter,
 } from './PAFAdapter'
 import ComparativeRender from './DotplotRenderer/ComparativeRenderRpc'
+import { PluggableElementType } from '@jbrowse/core/pluggableElementTypes'
+import { LinearPileupDisplayModel } from '@jbrowse/plugin-alignments'
 
 const { parseCigar } = MismatchParser
 
 interface Track {
   id: string
   type: string
   displays: {
-    addAdditionalContextMenuItemCallback: Function
-    additionalContextMenuItemCallbacks: Function[]
     id: string
     type: string
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -176,85 +173,17 @@ interface ReducedFeature {
   seqLength: number
 }
 
-export default class DotplotPlugin extends Plugin {
-  name = 'DotplotPlugin'
-
-  install(pluginManager: PluginManager) {
-    pluginManager.addViewType(() => {
-      return new ViewType({
-        name: 'DotplotView',
-        stateModel: stateModelFactory(pluginManager),
-        ReactComponent: lazy(
-          () => import('./DotplotView/components/DotplotView'),
-        ),
-      })
-    })
-
-    pluginManager.addDisplayType(() => {
-      const configSchema = dotplotDisplayConfigSchemaFactory(pluginManager)
-      return new DisplayType({
-        name: 'DotplotDisplay',
-        configSchema,
-        stateModel: dotplotDisplayStateModelFactory(configSchema),
-        trackType: 'SyntenyTrack',
-        viewType: 'DotplotView',
-        ReactComponent: DotplotDisplayReactComponent,
-      })
-    })
-
-    pluginManager.addRendererType(
-      () =>
-        new DotplotRenderer({
-          name: 'DotplotRenderer',
-          configSchema: dotplotRendererConfigSchema,
-          ReactComponent: DotplotRendererReactComponent,
-          pluginManager,
-        }),
-    )
-
-    pluginManager.addAdapterType(
-      () =>
-        new AdapterType({
-          name: 'PAFAdapter',
-          configSchema: PAFAdapterConfigSchema,
-          AdapterClass: PAFAdapter,
-        }),
-    )
-
-    // install our comparative rendering rpc callback
-    pluginManager.addRpcMethod(() => new ComparativeRender(pluginManager))
-  }
-
-  configure(pluginManager: PluginManager) {
-    if (isAbstractMenuManager(pluginManager.rootModel)) {
-      pluginManager.rootModel.appendToSubMenu(['File', 'Add'], {
-        label: 'Dotplot view',
-        icon: TimelineIcon,
-        onClick: (session: AbstractSessionModel) => {
-          session.addView('DotplotView', {})
-        },
-      })
-    }
-
-    const cb = (
-      feature: Feature,
-      display: AbstractDisplayModel & IAnyStateTreeNode,
-    ) => {
-      const { parentTrack } = display
-      return feature
-        ? [
-            {
-              label: 'Dotplot of read vs ref',
-              icon: AddIcon,
-              onClick: () => {
-                const session = getSession(display)
+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 origStrand = feature.get('strand')
     const SA: string = getTag(feature, 'SA') || ''
     const readName = feature.get('name')
     const readAssembly = `${readName}_assembly`
+    const { parentTrack } = self
     const [trackAssembly] = getConf(parentTrack, 'assemblyNames')
     const assemblyNames = [trackAssembly, readAssembly]
     const trackId = `track-${Date.now()}`
@@ -267,10 +196,7 @@ export default class DotplotPlugin extends Plugin {
         const saLength = getLength(saCigar)
         const saLengthSansClipping = getLengthSansClipping(saCigar)
         const saStrandNormalized = saStrand === '-' ? -1 : 1
-                    const saClipPos = getClip(
-                      saCigar,
-                      saStrandNormalized * origStrand,
-                    )
+        const saClipPos = getClip(saCigar, saStrandNormalized * origStrand)
         const saRealStart = +saStart - 1
         return {
           refName: saRef,
@@ -306,17 +232,11 @@ export default class DotplotPlugin extends Plugin {
       flags & 2048 ? supplementaryAlignments[0].CIGAR : cigar,
     )
 
-                const features = [
-                  feat,
-                  ...supplementaryAlignments,
-                ] as ReducedFeature[]
+    const features = [feat, ...supplementaryAlignments] as ReducedFeature[]
 
     features.sort((a, b) => a.clipPos - b.clipPos)
 
-                const refLength = features.reduce(
-                  (a, f) => a + f.end - f.start,
-                  0,
-                )
+    const refLength = features.reduce((a, f) => a + f.end - f.start, 0)
 
     session.addView('DotplotView', {
       type: 'DotplotView',
@@ -390,46 +310,107 @@ export default class DotplotPlugin extends Plugin {
       ],
       displayName: `${readName} vs ${trackAssembly}`,
     })
-              },
-            },
-          ]
-        : []
-    }
-    function addContextMenu(view: View) {
-      if (view.type === 'LinearGenomeView') {
-        view.tracks.forEach(track => {
-          if (track.type === 'AlignmentsTrack') {
-            track.displays.forEach(display => {
-              if (
-                display.type === 'LinearPileupDisplay' &&
-                !display.additionalContextMenuItemCallbacks.includes(cb)
-              ) {
-                display.addAdditionalContextMenuItemCallback(cb)
-              } else if (
-                display.type === 'LinearAlignmentsDisplay' &&
-                display.PileupDisplay &&
-                !display.PileupDisplay.additionalContextMenuItemCallbacks.includes(
-                  cb,
-                )
-              ) {
-                display.PileupDisplay.addAdditionalContextMenuItemCallback(cb)
+  } catch (e) {
+    console.error(e)
+    session.notify(`${e}`, 'error')
   }
-            })
 }
+
+export default class DotplotPlugin extends Plugin {
+  name = 'DotplotPlugin'
+
+  install(pluginManager: PluginManager) {
+    pluginManager.addViewType(() => {
+      return new ViewType({
+        name: 'DotplotView',
+        stateModel: stateModelFactory(pluginManager),
+        ReactComponent: lazy(
+          () => import('./DotplotView/components/DotplotView'),
+        ),
+      })
+    })
+
+    pluginManager.addDisplayType(() => {
+      const configSchema = dotplotDisplayConfigSchemaFactory(pluginManager)
+      return new DisplayType({
+        name: 'DotplotDisplay',
+        configSchema,
+        stateModel: dotplotDisplayStateModelFactory(configSchema),
+        trackType: 'SyntenyTrack',
+        viewType: 'DotplotView',
+        ReactComponent: DotplotDisplayReactComponent,
+      })
     })
+
+    pluginManager.addRendererType(
+      () =>
+        new DotplotRenderer({
+          name: 'DotplotRenderer',
+          configSchema: dotplotRendererConfigSchema,
+          ReactComponent: DotplotRendererReactComponent,
+          pluginManager,
+        }),
+    )
+
+    pluginManager.addAdapterType(
+      () =>
+        new AdapterType({
+          name: 'PAFAdapter',
+          configSchema: PAFAdapterConfigSchema,
+          AdapterClass: PAFAdapter,
+        }),
+    )
+
+    // install our comparative rendering rpc callback
+    pluginManager.addRpcMethod(() => new ComparativeRender(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
+                    if (!feature) {
+                      return superContextMenuItems()
+                    }
+                    const newMenuItems = [
+                      ...superContextMenuItems(),
+                      {
+                        label: 'Dotplot of read vs ref',
+                        icon: AddIcon,
+                        onClick: () => onClick(feature, self),
+                      },
+                    ]
+
+                    return newMenuItems
+                  },
+                },
               }
+            },
+          )
+
+          ;(pluggableElement as DisplayType).stateModel = newStateModel
         }
-    autorun(() => {
-      const session = pluginManager.rootModel?.session as Session | undefined
-      if (session) {
-        session.views.forEach(view => {
-          if (view.views) {
-            view.views.forEach(v => addContextMenu(v))
-          } else {
-            addContextMenu(view)
+        return pluggableElement
+      },
+    )
   }
+
+  configure(pluginManager: PluginManager) {
+    if (isAbstractMenuManager(pluginManager.rootModel)) {
+      pluginManager.rootModel.appendToSubMenu(['File', 'Add'], {
+        label: 'Dotplot view',
+        icon: TimelineIcon,
+        onClick: (session: AbstractSessionModel) => {
+          session.addView('DotplotView', {})
+        },
       })
     }
-    })
   }
 }