Allow right clicking synteny features with "Center on feature" action (…

…#4109)
GMOD · Dec 5, 2023 · 941516f · 941516f
1 parent 45ed9d3
commit 941516f
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 2 deletions.
diff --git a/...ns/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx b/...ns/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx
@@ -6,6 +6,8 @@ import {
   getSession,
   isSessionModelWithWidgets,
 } from '@jbrowse/core/util'
+import { Menu } from '@jbrowse/core/ui'
+import { transaction } from 'mobx'
 
 // locals
 import SyntenyTooltip from './SyntenyTooltip'
@@ -14,6 +16,12 @@ import { getId, MAX_COLOR_RANGE } from '../drawSynteny'
 import { LinearSyntenyViewModel } from '../../LinearSyntenyView/model'
 import { transaction } from 'mobx'
 
+interface ClickCoord {
+  clientX: number
+  clientY: number
+  feature: any
+}
+
 const LinearSyntenyRendering = observer(function ({
   model,
 }: {
@@ -25,6 +33,7 @@ const LinearSyntenyRendering = observer(function ({
   const view = getContainingView(model) as LinearSyntenyViewModel
   const height = view.middleComparativeHeight
   const width = view.width
+  const [anchorEl, setAnchorEl] = useState<ClickCoord>()
 
   const [tooltip, setTooltip] = useState('')
   const [currX, setCurrX] = useState<number>()
@@ -58,7 +67,12 @@ const LinearSyntenyRendering = observer(function ({
         ref={k1}
         width={width}
         height={height}
-        style={{ width, height, position: 'absolute', pointerEvents: 'none' }}
+        style={{
+          width,
+          height,
+          position: 'absolute',
+          pointerEvents: 'none',
+        }}
       />
       <canvas
         ref={k2}
@@ -185,6 +199,31 @@ const LinearSyntenyRendering = observer(function ({
             )
           }
         }}
+        onContextMenu={event => {
+          event.preventDefault()
+          const ref1 = model.clickMapCanvas
+          const ref2 = model.cigarClickMapCanvas
+          if (!ref1 || !ref2) {
+            return
+          }
+          const rect = ref1.getBoundingClientRect()
+          const ctx1 = ref1.getContext('2d')
+          const ctx2 = ref2.getContext('2d')
+          if (!ctx1 || !ctx2) {
+            return
+          }
+          const { clientX, clientY } = event
+          const x = clientX - rect.left
+          const y = clientY - rect.top
+          const [r1, g1, b1] = ctx1.getImageData(x, y, 1, 1).data
+          const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats)
+          const id = getId(r1, g1, b1, unitMultiplier)
+          const f = model.featPositions[id]
+          if (f) {
+            model.setClickId(f.f.id())
+            setAnchorEl({ clientX, clientY, feature: f })
+          }
+        }}
         data-testid="synteny_canvas"
         style={{ width, height, position: 'absolute' }}
         width={width * highResolutionScaling}
@@ -215,6 +254,60 @@ const LinearSyntenyRendering = observer(function ({
       {model.mouseoverId && tooltip && currX && currY ? (
         <SyntenyTooltip title={tooltip} />
       ) : null}
+      {anchorEl ? (
+        <Menu
+          onMenuItemClick={(event, callback) => {
+            callback(event)
+            setAnchorEl(undefined)
+          }}
+          anchorEl={{
+            nodeType: 1,
+            getBoundingClientRect: () => {
+              const x = anchorEl.clientX
+              const y = anchorEl.clientY
+              return {
+                top: y,
+                left: x,
+                bottom: y,
+                right: x,
+                width: 0,
+                height: 0,
+                x,
+                y,
+                toJSON() {},
+              }
+            },
+          }}
+          onClose={() => setAnchorEl(undefined)}
+          open={Boolean(anchorEl)}
+          menuItems={[
+            {
+              label: 'Center on feature',
+              onClick: () => {
+                const {
+                  feature: { f },
+                } = anchorEl
+                const start = f.get('start')
+                const end = f.get('end')
+                const refName = f.get('refName')
+                const mate = f.get('mate')
+                view.views[0]
+                  .navToLocString(`${refName}:${start}-${end}`)
+                  .catch(e => {
+                    console.error(e)
+                    getSession(model).notify(`${e}`, 'error')
+                  })
+                view.views[1]
+                  .navToLocString(`${mate.refName}:${mate.start}-${mate.end}`)
+                  .catch(e => {
+                    console.error(e)
+                    getSession(model).notify(`${e}`, 'error')
+                  })
+              },
+            },
+          ]}
+        />
+      ) : null}
     </div>
   )
 })

diff --git a/plugins/linear-comparative-view/src/LinearSyntenyDisplay/model.ts b/plugins/linear-comparative-view/src/LinearSyntenyDisplay/model.ts
@@ -13,7 +13,7 @@ interface Pos {
   offsetPx: number
 }
 
-interface FeatPos {
+export interface FeatPos {
   p11: Pos
   p12: Pos
   p21: Pos