Restore concept of linking synteny views (#4774)

* Revert "Remove the concept of linking the views in the synteny view (#4428)" This reverts commit 855ea1c. * Restore link views synteny
GMOD · Jan 17, 2025 · cfa7895 · cfa7895
1 parent ba16ba9
commit cfa7895
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 10 deletions.
diff --git a/plugins/linear-comparative-view/src/LinearComparativeView/model.ts b/plugins/linear-comparative-view/src/LinearComparativeView/model.ts
@@ -5,7 +5,7 @@ import { avg, getSession, isSessionModelWithWidgets } from '@jbrowse/core/util'
 import { ElementId } from '@jbrowse/core/util/types/mst'
 import FolderOpenIcon from '@mui/icons-material/FolderOpen'
 import { autorun } from 'mobx'
-import { addDisposer, cast, getPath, types } from 'mobx-state-tree'
+import { addDisposer, cast, getPath, onAction, types } from 'mobx-state-tree'
 
 import type { LinearSyntenyViewHelperStateModel } from '../LinearSyntenyViewHelper/stateModelFactory'
 import type PluginManager from '@jbrowse/core/PluginManager'
@@ -51,6 +51,10 @@ function stateModelFactory(pluginManager: PluginManager) {
          * #property
          */
         showIntraviewLinks: true,
+        /**
+         * #property
+         */
+        linkViews: false,
         /**
          * #property
          */
@@ -115,6 +119,27 @@ function stateModelFactory(pluginManager: PluginManager) {
       },
     }))
     .actions(self => ({
+      afterAttach() {
+        // doesn't link showTrack/hideTrack, doesn't make sense in
+        // synteny views most time
+        const actions = new Set([
+          'horizontalScroll',
+          'zoomTo',
+          'setScaleFactor',
+        ])
+        addDisposer(
+          self,
+          onAction(self, param => {
+            if (self.linkViews) {
+              const { name, path, args } = param
+              if (actions.has(name) && path) {
+                this.onSubviewAction(name, path, args)
+              }
+            }
+          }),
+        )
+      },
+
       // automatically removes session assemblies associated with this view
       // e.g. read vs ref
       beforeDestroy() {
@@ -163,7 +188,12 @@ function stateModelFactory(pluginManager: PluginManager) {
         l.setHeight(newHeight)
         return l.height
       },
-
+      /**
+       * #action
+       */
+      setLinkViews(arg: boolean) {
+        self.linkViews = arg
+      },
       /**
        * #action
        */

diff --git a/plugins/linear-comparative-view/src/LinearSyntenyView/model.ts b/plugins/linear-comparative-view/src/LinearSyntenyView/model.ts
@@ -3,6 +3,7 @@ import { lazy } from 'react'
 
 import { getSession } from '@jbrowse/core/util'
 import CropFreeIcon from '@mui/icons-material/CropFree'
+import LinkIcon from '@mui/icons-material/Link'
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera'
 import VisibilityIcon from '@mui/icons-material/Visibility'
 import { saveAs } from 'file-saver'
@@ -62,14 +63,14 @@ export default function stateModelFactory(pluginManager: PluginManager) {
       /**
        * #action
        */
-      toggleCurves() {
-        self.drawCurves = !self.drawCurves
+      setDrawCurves(arg: boolean) {
+        self.drawCurves = arg
       },
       /**
        * #action
        */
-      toggleCIGAR() {
-        self.drawCIGAR = !self.drawCIGAR
+      setDrawCIGAR(arg: boolean) {
+        self.drawCIGAR = arg
       },
       /**
        * #action
@@ -122,25 +123,41 @@ export default function stateModelFactory(pluginManager: PluginManager) {
             },
             {
               label: 'Draw CIGAR',
-              onClick: self.toggleCIGAR,
+              onClick: () => {
+                self.setDrawCIGAR(!self.drawCIGAR)
+              },
               checked: self.drawCIGAR,
               type: 'checkbox',
               description: 'Draws per-base CIGAR level alignments',
             },
+            {
+              label: 'Link views',
+              type: 'checkbox',
+              checked: self.linkViews,
+              icon: LinkIcon,
+              onClick: () => {
+                self.setLinkViews(!self.linkViews)
+              },
+            },
             {
               label: 'Use curved lines',
               type: 'checkbox',
               checked: self.drawCurves,
-              onClick: self.toggleCurves,
               icon: Curves,
+              onClick: () => {
+                self.setDrawCurves(!self.drawCurves)
+              },
             },
             {
               label: 'Export SVG',
               icon: PhotoCameraIcon,
               onClick: (): void => {
                 getSession(self).queueDialog(handleClose => [
                   ExportSvgDialog,
-                  { model: self, handleClose },
+                  {
+                    model: self,
+                    handleClose,
+                  },
                 ])
               },
             },
@@ -158,7 +175,10 @@ export default function stateModelFactory(pluginManager: PluginManager) {
               onClick: () => {
                 getSession(self).queueDialog(handleClose => [
                   ExportSvgDialog,
-                  { model: self, handleClose },
+                  {
+                    model: self,
+                    handleClose,
+                  },
                 ])
               },
             },