Add tooltip

GMOD · Nov 6, 2023 · b3d77a5 · b3d77a5
1 parent ea4ac71
commit b3d77a5
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 51 deletions.
diff --git a/plugins/arc/src/LinearPairedArcDisplay/components/Arcs.tsx b/plugins/arc/src/LinearPairedArcDisplay/components/Arcs.tsx
@@ -1,10 +1,11 @@
-import React, { useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { observer } from 'mobx-react'
 import {
   AbstractSessionModel,
   Feature,
   getContainingView,
   getSession,
+  measureText,
 } from '@jbrowse/core/util'
 import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
@@ -13,6 +14,7 @@ import { parseBreakend } from '@gmod/vcf'
 
 // local
 import { LinearArcDisplayModel } from '../model'
+import { Tooltip } from 'react-svg-tooltip'
 
 type LGV = LinearGenomeViewModel
 
@@ -38,7 +40,8 @@ function f(feature: Feature, alt?: string) {
     mateEnd = e
     mateStart = e - 1
     mateRefName = feature.get('INFO')?.CHR2 ?? refName
-    // re-adjust the arc to be from start to end of feature
+    // re-adjust the arc to be from start to end of feature by re-assigning end
+    // to the 'mate'
     start = feature.get('start')
     end = feature.get('start') + 1
   } else if (bnd?.MatePosition) {
@@ -54,12 +57,22 @@ function f(feature: Feature, alt?: string) {
   }
 }
 
+function makeSummary(feature: Feature, alt?: string) {
+  return [
+    feature.get('name'),
+    feature.get('id'),
+    feature.get('INFO')?.SVTYPE,
+    alt,
+  ]
+    .filter(f => !!f)
+    .join(' - ')
+}
+
 const Arc = observer(function ({
   model,
   feature,
   alt,
   assembly,
-  session,
   view,
 }: {
   feature: Feature
@@ -70,20 +83,18 @@ const Arc = observer(function ({
   view: LinearGenomeViewModel
 }) {
   const [mouseOvered, setMouseOvered] = useState(false)
-  const { selection } = session
   const { height } = model
   const { k1, k2 } = f(feature, alt)
-  const c =
-    // @ts-expect-error
-    selection?.id?.() === feature.id()
-      ? 'red'
-      : getConf(model, 'color', { feature })
+  const ref = useRef<SVGPathElement>(null)
+  const c = getConf(model, 'color', { feature, alt })
   const ra1 = assembly.getCanonicalRefName(k1.refName) || k1.refName
   const ra2 = assembly.getCanonicalRefName(k2.refName) || k2.refName
   const p1 = k1.start
   const p2 = k2.start
   const r1 = view.bpToPx({ refName: ra1, coord: p1 })?.offsetPx
   const r2 = view.bpToPx({ refName: ra2, coord: p2 })?.offsetPx
+  const caption = makeSummary(feature, alt)
+  const tooltipWidth = 20 + measureText(caption)
 
   if (r1 !== undefined && r2 !== undefined) {
     const radius = (r2 - r1) / 2
@@ -95,16 +106,40 @@ const Arc = observer(function ({
     const right = p2
 
     return (
-      <path
-        d={`M ${left} 0 C ${left} ${destY}, ${right} ${destY}, ${right} 0`}
-        stroke={mouseOvered ? 'green' : c}
-        strokeWidth={2}
-        onMouseOut={() => setMouseOvered(false)}
-        onMouseOver={() => setMouseOvered(true)}
-        onClick={() => model.selectFeature(feature)}
-        fill="transparent"
-        pointerEvents="stroke"
-      />
+      <>
+        <path
+          d={`M ${left} 0 C ${left} ${destY}, ${right} ${destY}, ${right} 0`}
+          ref={ref}
+          stroke={mouseOvered ? 'red' : c}
+          strokeWidth={3}
+          onMouseOut={() => setMouseOvered(false)}
+          onMouseOver={() => setMouseOvered(true)}
+          onClick={() => model.selectFeature(feature)}
+          fill="none"
+          pointerEvents="stroke"
+        />
+        <Tooltip triggerRef={ref}>
+          <rect
+            x={12}
+            y={0}
+            width={tooltipWidth}
+            height={20}
+            rx={5}
+            ry={5}
+            fill="black"
+            fillOpacity="50%"
+          />
+          <text
+            x={22}
+            y={14}
+            fontSize={10}
+            fill="white"
+            textLength={tooltipWidth - 20}
+          >
+            {caption}
+          </text>
+        </Tooltip>
+      </>
     )
   }
   return null

diff --git a/plugins/arc/src/LinearPairedArcDisplay/components/BaseDisplayComponent.tsx b/plugins/arc/src/LinearPairedArcDisplay/components/BaseDisplayComponent.tsx
@@ -1,14 +1,10 @@
 import React from 'react'
 import { LoadingEllipses } from '@jbrowse/core/ui'
-import {
-  BlockMsg,
-  LinearGenomeViewModel,
-} from '@jbrowse/plugin-linear-genome-view'
+import { BlockMsg } from '@jbrowse/plugin-linear-genome-view'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 
 // local
-import { getContainingView } from '@jbrowse/core/util'
 import { LinearArcDisplayModel } from '../model'
 
 const useStyles = makeStyles()(theme => ({

diff --git a/plugins/arc/src/LinearPairedArcDisplay/configSchema.ts b/plugins/arc/src/LinearPairedArcDisplay/configSchema.ts
@@ -14,8 +14,8 @@ export function configSchemaFactory(name: string) {
       color: {
         type: 'color',
         description: 'the color of the arcs',
-        defaultValue: 'darkblue',
-        contextVariable: ['feature'],
+        defaultValue: 'jexl:defaultPairedArcColor(feature,alt)',
+        contextVariable: ['feature', 'alt'],
       },
     },
     {

diff --git a/plugins/arc/src/LinearPairedArcDisplay/fetchChains.ts b/plugins/arc/src/LinearPairedArcDisplay/fetchChains.ts
@@ -53,7 +53,6 @@ export async function fetchChains(self: LinearArcDisplayModel) {
     regions: view.staticBlocks.contentBlocks,
     adapterConfig: self.adapterConfig,
   })) as Feature[]
-  console.log({ ret })
 
   self.setFeatures(ret)
   self.setLoading(false)

diff --git a/plugins/arc/src/LinearPairedArcDisplay/model.ts b/plugins/arc/src/LinearPairedArcDisplay/model.ts
@@ -6,7 +6,6 @@ import {
 } from '@jbrowse/core/configuration'
 import { Instance, types } from 'mobx-state-tree'
 import {
-  getEnv,
   Feature,
   getSession,
   isSessionModelWithWidgets,

diff --git a/plugins/arc/src/index.ts b/plugins/arc/src/index.ts
@@ -14,8 +14,23 @@ export default class ArcPlugin extends Plugin {
 
     pluginManager.jexl.addFunction(
       'logThickness',
-      (feature: Feature, attributeName: string) => {
-        return Math.log(feature.get(attributeName) + 1)
+      (feature: Feature, attributeName: string) =>
+        Math.log(feature.get(attributeName) + 1),
+    )
+    pluginManager.jexl.addFunction(
+      'defaultPairedArcColor',
+      (_feature: Feature, alt: string) => {
+        if (alt.startsWith('<DEL')) {
+          return 'darkblue'
+        } else if (alt.startsWith('<DUP')) {
+          return 'darkgreen'
+        } else if (alt.startsWith('<CNV')) {
+          return 'darkblue'
+        } else if (alt.startsWith('<INV')) {
+          return 'green'
+        } else {
+          return 'green'
+        }
       },
     )
   }

diff --git a/...s/breakpoint-split-view/src/BreakpointSplitView/components/BreakpointSplitViewOverlay.tsx b/...s/breakpoint-split-view/src/BreakpointSplitView/components/BreakpointSplitViewOverlay.tsx
@@ -1,5 +1,4 @@
 import React, { useRef } from 'react'
-import BreakpointSplitView from '..'
 
 import { makeStyles } from 'tss-react/mui'
 
@@ -38,12 +37,11 @@ const BreakpointSplitViewOverlay = observer(function ({
         }}
       >
         {matchedTracks.map(track => (
-          // note: we must pass ref down, because the child component
-          // needs to getBoundingClientRect on the this components SVG,
-          // and we cannot rely on using getBoundingClientRect in this
-          // component to make sure this works because if it gets
-          // shifted around by another element, this will not re-render
-          // necessarily
+          // note: we must pass ref down, because the child component needs to
+          // getBoundingClientRect on the this components SVG, and we cannot
+          // rely on using getBoundingClientRect in this component to make
+          // sure this works because if it gets shifted around by another
+          // element, this will not re-render necessarily
           <Overlay
             parentRef={ref}
             key={track.configuration.trackId}

diff --git a/...management/src/PluginStoreWidget/components/__snapshots__/PluginStoreWidget.test.tsx.snap b/...management/src/PluginStoreWidget/components/__snapshots__/PluginStoreWidget.test.tsx.snap
@@ -453,7 +453,7 @@ exports[`renders with the available plugins 1`] = `
                     <p
                       class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
                     >
-                      ArcRenderer
+                      MenusPlugin
                     </p>
                   </li>
                   <li
@@ -475,7 +475,7 @@ exports[`renders with the available plugins 1`] = `
                     <p
                       class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
                     >
-                      MenusPlugin
+                      RdfPlugin
                     </p>
                   </li>
                   <li
@@ -497,7 +497,7 @@ exports[`renders with the available plugins 1`] = `
                     <p
                       class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
                     >
-                      RdfPlugin
+                      SequencePlugin
                     </p>
                   </li>
                   <li
@@ -519,7 +519,7 @@ exports[`renders with the available plugins 1`] = `
                     <p
                       class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
                     >
-                      SequencePlugin
+                      VariantsPlugin
                     </p>
                   </li>
                   <li
@@ -541,7 +541,7 @@ exports[`renders with the available plugins 1`] = `
                     <p
                       class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
                     >
-                      VariantsPlugin
+                      WigglePlugin
                     </p>
                   </li>
                   <li
@@ -563,7 +563,7 @@ exports[`renders with the available plugins 1`] = `
                     <p
                       class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
                     >
-                      WigglePlugin
+                      GCContentPlugin
                     </p>
                   </li>
                   <li
@@ -585,7 +585,7 @@ exports[`renders with the available plugins 1`] = `
                     <p
                       class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
                     >
-                      GCContentPlugin
+                      SpreadsheetViewPlugin
                     </p>
                   </li>
                   <li
@@ -607,7 +607,7 @@ exports[`renders with the available plugins 1`] = `
                     <p
                       class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
                     >
-                      SpreadsheetViewPlugin
+                      SvInspectorViewPlugin
                     </p>
                   </li>
                   <li
@@ -629,7 +629,7 @@ exports[`renders with the available plugins 1`] = `
                     <p
                       class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
                     >
-                      SvInspectorViewPlugin
+                      BreakpointSplitViewPlugin
                     </p>
                   </li>
                   <li
@@ -651,7 +651,7 @@ exports[`renders with the available plugins 1`] = `
                     <p
                       class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
                     >
-                      BreakpointSplitViewPlugin
+                      HicPlugin
                     </p>
                   </li>
                   <li
@@ -673,7 +673,7 @@ exports[`renders with the available plugins 1`] = `
                     <p
                       class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
                     >
-                      HicPlugin
+                      TrixPlugin
                     </p>
                   </li>
                   <li
@@ -695,7 +695,7 @@ exports[`renders with the available plugins 1`] = `
                     <p
                       class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
                     >
-                      TrixPlugin
+                      GridBookmarkPlugin
                     </p>
                   </li>
                   <li
@@ -717,7 +717,7 @@ exports[`renders with the available plugins 1`] = `
                     <p
                       class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
                     >
-                      GridBookmarkPlugin
+                      ComparativeAdaptersPlugin
                     </p>
                   </li>
                   <li
@@ -739,7 +739,7 @@ exports[`renders with the available plugins 1`] = `
                     <p
                       class="MuiTypography-root MuiTypography-body1 css-k0xfey-MuiTypography-root"
                     >
-                      ComparativeAdaptersPlugin
+                      ArcRenderer
                     </p>
                   </li>
                 </ul>