Fix selected synteny feature getting unselected after scroll (#3578)

GMOD · May 18, 2023 · 28ce3ee · 28ce3ee
1 parent 46d9acb
commit 28ce3ee
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 114 deletions.
diff --git a/...management/src/PluginStoreWidget/components/__snapshots__/PluginStoreWidget.test.tsx.snap b/...management/src/PluginStoreWidget/components/__snapshots__/PluginStoreWidget.test.tsx.snap
@@ -789,7 +789,7 @@ exports[`renders with the available plugins 1`] = `
                     class="MuiTypography-root MuiTypography-h5 css-1ldbtdh-MuiTypography-root"
                   >
                     <a
-                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1py4a5k-MuiTypography-root-MuiLink-root"
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-ygjubp-MuiTypography-root-MuiLink-root"
                       href="https://github.com/GMOD/jbrowse-plugin-msaview#readme"
                       rel="noopener"
                       target="_blank"

diff --git a/...ns/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx b/...ns/linear-comparative-view/src/LinearSyntenyDisplay/components/LinearSyntenyRendering.tsx
@@ -79,7 +79,7 @@ export default observer(function LinearSyntenyRendering({
           const [r2, g2, b2] = ctx2.getImageData(x, y, 1, 1).data
           const unitMultiplier = Math.floor(MAX_COLOR_RANGE / model.numFeats)
           const id = getId(r1, g1, b1, unitMultiplier)
-          model.setMouseoverId(id)
+          model.setMouseoverId(model.featPositions[id]?.f.id())
           if (id === -1) {
             setTooltip('')
           } else if (model.featPositions[id]) {
@@ -93,8 +93,13 @@ export default observer(function LinearSyntenyRendering({
               assemblyName: string
               identity?: number
               name?: string
+              mate: {
+                start: number
+                end: number
+                refName: string
+                name: string
+              }
             }
-            // @ts-expect-error
             const f2 = f1.mate
             const unitMultiplier2 = Math.floor(MAX_COLOR_RANGE / cigar.length)
             const cigarIdx = getId(r2, g2, b2, unitMultiplier2)
@@ -125,7 +130,7 @@ export default observer(function LinearSyntenyRendering({
             setTooltip(tooltip.join('<br/>'))
           }
         }}
-        onMouseLeave={() => model.setMouseoverId(-1)}
+        onMouseLeave={() => model.setMouseoverId(undefined)}
         onClick={event => {
           const ref1 = model.clickMapCanvas
           const ref2 = model.cigarClickMapCanvas
@@ -143,10 +148,13 @@ export default observer(function LinearSyntenyRendering({
           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)
-          model.setClickId(id)
           const f = model.featPositions[id]
+          if (!f) {
+            return
+          }
+          model.setClickId(f.f.id())
           const session = getSession(model)
-          if (f && isSessionModelWithWidgets(session)) {
+          if (isSessionModelWithWidgets(session)) {
             session.showWidget(
               session.addWidget('SyntenyFeatureWidget', 'syntenyFeature', {
                 featureData: {
@@ -184,7 +192,7 @@ export default observer(function LinearSyntenyRendering({
         width={width}
         height={height}
       />
-      {model.mouseoverId !== -1 && tooltip && currX && currY ? (
+      {model.mouseoverId && tooltip && currX && currY ? (
         <SyntenyTooltip x={currX} y={currY} title={tooltip} />
       ) : null}
     </div>

diff --git a/plugins/linear-comparative-view/src/LinearSyntenyDisplay/drawSynteny.ts b/plugins/linear-comparative-view/src/LinearSyntenyDisplay/drawSynteny.ts
@@ -234,12 +234,12 @@ export function drawMouseoverSynteny(model: LinearSyntenyDisplayModel) {
   ctx.resetTransform()
   ctx.scale(highResolutionScaling, highResolutionScaling)
   ctx.clearRect(0, 0, width, height)
-  if (mouseoverId !== -1 && model.features && model.features[mouseoverId]) {
-    const feature = model.featPositions[mouseoverId]
+  const feature1 = model.featMap[mouseoverId || '']
+  if (feature1) {
     ctx.fillStyle = 'rgb(0,0,0,0.1)'
     drawMatchSimple({
       cb: ctx => ctx.fill(),
-      feature,
+      feature: feature1,
       ctx,
       oobLimit,
       viewWidth: view.width,
@@ -248,14 +248,13 @@ export function drawMouseoverSynteny(model: LinearSyntenyDisplayModel) {
       height,
     })
   }
-
-  if (clickId !== -1 && model.features && model.featPositions[clickId]) {
-    const feature = model.featPositions[clickId]
+  const feature2 = model.featMap[clickId || '']
+  if (feature2) {
     ctx.strokeStyle = 'rgb(0, 0, 0, 0.9)'
 
     drawMatchSimple({
       cb: ctx => ctx.stroke(),
-      feature,
+      feature: feature2,
       ctx,
       oobLimit,
       viewWidth: view.width,

diff --git a/plugins/linear-comparative-view/src/LinearSyntenyDisplay/model.ts b/plugins/linear-comparative-view/src/LinearSyntenyDisplay/model.ts
@@ -72,10 +72,10 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       featPositions: [] as FeatPos[],
 
       // currently mouse'd over feature
-      mouseoverId: -1,
+      mouseoverId: undefined as string | undefined,
 
       // currently click'd over feature
-      clickId: -1,
+      clickId: undefined as string | undefined,
 
       // currently mouseover'd CIGAR subfeature
       cigarMouseoverId: -1,
@@ -114,7 +114,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       /**
        * #action
        */
-      setMouseoverId(arg: number) {
+      setMouseoverId(arg?: string) {
         self.mouseoverId = arg
       },
       /**
@@ -126,7 +126,7 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
       /**
        * #action
        */
-      setClickId(arg: number) {
+      setClickId(arg?: string) {
         self.clickId = arg
       },
     }))

diff --git a/plugins/menus/src/AboutWidget/components/__snapshots__/AboutWidget.test.tsx.snap b/plugins/menus/src/AboutWidget/components/__snapshots__/AboutWidget.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<AboutWidget /> renders 1`] = `
     JBrowse is a
      
     <a
-      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1ps4owl-MuiTypography-root-MuiLink-root"
+      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1bhi0za-MuiTypography-root-MuiLink-root"
       href="http://gmod.org/"
       rel="noopener noreferrer"
       target="_blank"
@@ -45,7 +45,7 @@ exports[`<AboutWidget /> renders 1`] = `
     <ul>
       <li>
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1ps4owl-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1bhi0za-MuiTypography-root-MuiLink-root"
           href="http://google.com"
           rel="noopener noreferrer"
           target="_blank"

diff --git a/plugins/menus/src/HelpWidget/components/__snapshots__/HelpWidget.test.js.snap b/plugins/menus/src/HelpWidget/components/__snapshots__/HelpWidget.test.js.snap
@@ -18,7 +18,7 @@ exports[`<HelpWidget /> renders 1`] = `
   <ul>
     <li>
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1ps4owl-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1bhi0za-MuiTypography-root-MuiLink-root"
         href="https://github.com/GMOD/jbrowse-components/discussions"
         rel="noopener noreferrer"
         target="_blank"
@@ -28,7 +28,7 @@ exports[`<HelpWidget /> renders 1`] = `
     </li>
     <li>
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1ps4owl-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1bhi0za-MuiTypography-root-MuiLink-root"
         href="https://github.com/GMOD/jbrowse-components/issues/new/choose"
         rel="noopener noreferrer"
         target="_blank"
@@ -38,7 +38,7 @@ exports[`<HelpWidget /> renders 1`] = `
     </li>
     <li>
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1ps4owl-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1bhi0za-MuiTypography-root-MuiLink-root"
         href="https://jbrowse.org/jb2/docs/user_guide"
         rel="noopener noreferrer"
         target="_blank"
@@ -48,7 +48,7 @@ exports[`<HelpWidget /> renders 1`] = `
     </li>
     <li>
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1ps4owl-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1bhi0za-MuiTypography-root-MuiLink-root"
         href="https://jbrowse.org/jb2/docs/"
         rel="noopener noreferrer"
         target="_blank"