Centralize tooltip

GMOD · Jan 28, 2025 · f4a7c0c · f4a7c0c
1 parent 06e057e
commit f4a7c0c
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 217 deletions.
diff --git a/plugins/variants/src/MultiLinearVariantDisplay/components/Crosshair.tsx b/plugins/variants/src/MultiLinearVariantDisplay/components/Crosshair.tsx
@@ -1,11 +1,10 @@
-import { SanitizedHTML } from '@jbrowse/core/ui'
-import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
 import { getContainingView } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import type { MultiLinearVariantDisplayModel } from '../model'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import MultiVariantTooltip from '../../shared/MultiVariantTooltip'
 
 const useStyles = makeStyles()({
   rel: {
@@ -49,28 +48,8 @@ const Crosshair = observer(function ({
         <line x1={0} x2={width} y1={y} y2={y} stroke="black" />
         <line x1={mouseX} x2={mouseX} y1={0} y2={height} stroke="black" />
       </svg>
-      <BaseTooltip>
-        {source.color ? (
-          <div
-            className={classes.color}
-            style={{
-              backgroundColor: source.color,
-            }}
-          />
-        ) : null}
-        <SanitizedHTML
-          html={Object.entries({ ...source, genotype: hoveredGenotype })
-            .filter(
-              ([key, val]) =>
-                key !== 'color' &&
-                key !== 'name' &&
-                key !== 'HP' &&
-                val !== undefined,
-            )
-            .map(([key, value]) => `${key}:${value}`)
-            .join('<br/>')}
-        />
-      </BaseTooltip>
+
+      <MultiVariantTooltip source={{ ...source, hoveredGenotype }} />
     </div>
   ) : null
 })

diff --git a/plugins/variants/src/MultiLinearVariantDisplay/model.ts b/plugins/variants/src/MultiLinearVariantDisplay/model.ts
@@ -73,7 +73,7 @@ export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
     .views(self => {
       return {
         get canDisplayLabels() {
-          return self.rowHeight > 8
+          return self.rowHeight > 8 && self.showSidebarLabelsSetting
         },
         /**
          * #getter
@@ -108,9 +108,8 @@ export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
           const superProps = self.adapterProps()
           return {
             ...superProps,
-            notReady: superProps.notReady || !self.sources,
-            displayModel: self,
-            rpcDriverName: self.rpcDriverName,
+            notReady:
+              superProps.notReady || !self.sources || !self.featuresVolatile,
             height: self.height,
             totalHeight: self.totalHeight,
             renderingMode: self.renderingMode,
@@ -132,7 +131,12 @@ export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
               const { getMultiVariantSourcesAutorun } = await import(
                 '../getMultiVariantSourcesAutorun'
               )
+              const { getMultiVariantFeaturesAutorun } = await import(
+                '../getMultiVariantFeaturesAutorun'
+              )
+
               getMultiVariantSourcesAutorun(self)
+              getMultiVariantFeaturesAutorun(self)
             } catch (e) {
               if (isAlive(self)) {
                 console.error(e)

diff --git a/plugins/variants/src/MultiLinearVariantMatrixDisplay/components/Crosshair.tsx b/plugins/variants/src/MultiLinearVariantMatrixDisplay/components/Crosshair.tsx
@@ -1,9 +1,9 @@
-import { SanitizedHTML } from '@jbrowse/core/ui'
-import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
 import { getContainingView } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
+import MultiVariantTooltip from '../../shared/MultiVariantTooltip'
+
 import type { MultiLinearVariantMatrixDisplayModel } from '../model'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
@@ -34,25 +34,7 @@ const Crosshair = observer(function ({
         <line x1={0} x2={width} y1={mouseY} y2={mouseY} stroke="black" />
         <line x1={mouseX} x2={mouseX} y1={0} y2={height} stroke="black" />
       </svg>
-      <BaseTooltip>
-        {source.color ? (
-          <div
-            style={{
-              width: 10,
-              height: 10,
-              backgroundColor: source.color,
-            }}
-          />
-        ) : null}
-        <SanitizedHTML
-          html={Object.entries({ ...source, genotype: hoveredGenotype })
-            .filter(
-              ([key]) => key !== 'color' && key !== 'name' && key !== 'HP',
-            )
-            .map(([key, value]) => `${key}:${value}`)
-            .join('<br/>')}
-        />
-      </BaseTooltip>
+      <MultiVariantTooltip source={{ ...source, hoveredGenotype }} />
     </>
   ) : null
 })

diff --git a/plugins/variants/src/MultiLinearVariantRenderer/makeImageData.ts b/plugins/variants/src/MultiLinearVariantRenderer/makeImageData.ts
@@ -50,7 +50,6 @@ export async function makeImageData(
     bpPerPx,
     renderingMode,
   } = props
-  console.log({ minorAlleleFrequencyFilter })
   const region = regions[0]!
   const mafs = getFeaturesThatPassMinorAlleleFrequencyFilter(
     features.values(),

diff --git a/plugins/variants/src/shared/MultiVariantBaseModel.tsx b/plugins/variants/src/shared/MultiVariantBaseModel.tsx
@@ -193,11 +193,13 @@ export default function MultiVariantBaseModelF(
               if (info?.isPhased) {
                 const ploidy = info.maxPloidy
                 for (let i = 0; i < ploidy; i++) {
+                  const id = `${row.name} HP${i}`
                   rows.push({
                     ...sources[row.name],
                     ...row,
-                    label: `${row.name} HP${i}`,
+                    label: id,
                     HP: i,
+                    id: id,
                   })
                 }
               }
@@ -208,6 +210,7 @@ export default function MultiVariantBaseModelF(
                 ...sources[row.name],
                 ...row,
                 label: row.name,
+                id: row.name,
               })
             }
           }

diff --git a/plugins/variants/src/shared/MultiVariantTooltip.tsx b/plugins/variants/src/shared/MultiVariantTooltip.tsx
@@ -0,0 +1,35 @@
+import { SanitizedHTML } from '@jbrowse/core/ui'
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
+
+export default function MultiVariantTooltip({
+  source,
+}: {
+  source: { color?: string; [key: string]: unknown }
+}) {
+  return (
+    <BaseTooltip>
+      {source.color ? (
+        <div
+          style={{
+            width: 10,
+            height: 10,
+            backgroundColor: source.color,
+          }}
+        />
+      ) : null}
+      <SanitizedHTML
+        html={Object.entries(source)
+          .filter(
+            ([key, val]) =>
+              key !== 'color' &&
+              key !== 'name' &&
+              key !== 'HP' &&
+              key !== 'id' &&
+              val !== undefined,
+          )
+          .map(([key, value]) => `${key}:${value}`)
+          .join('<br/>')}
+      />
+    </BaseTooltip>
+  )
+}
diff --git a/plugins/variants/src/shared/SourcesGrid.tsx b/plugins/variants/src/shared/SourcesGrid.tsx
@@ -1,21 +1,15 @@
 import { useState } from 'react'
 
 import { SanitizedHTML } from '@jbrowse/core/ui'
-import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker'
+import ColorPicker from '@jbrowse/core/ui/ColorPicker'
 import { getStr, measureGridWidth } from '@jbrowse/core/util'
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
-import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown'
-import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp'
-import { Button } from '@mui/material'
+
 import { DataGrid } from '@mui/x-data-grid'
 import { makeStyles } from 'tss-react/mui'
 
-// locals
-import { moveDown, moveUp } from './util'
-
 import type { Source } from '../types'
 import type { GridColDef } from '@mui/x-data-grid'
+import SourcesGridHeader from './SourcesGridHeader'
 
 // icons
 
@@ -43,15 +37,22 @@ function SourcesGrid({
 }) {
   const { classes } = useStyles()
   const [selected, setSelected] = useState([] as string[])
-  const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0]!
+  const {
+    id: _id,
+    name: _name,
+    color: _color,
+    baseUri: _baseUri,
+    HP: _HP,
+    ...rest
+  } = rows[0]!
   const [currSort, setCurrSort] = useState<SortField>({
     idx: 0,
     field: null,
   })
 
   return (
     <div>
-      <GridHeader
+      <SourcesGridHeader
         selected={selected}
         rows={rows}
         showTips={showTips}
@@ -141,85 +142,4 @@ function SourcesGrid({
   )
 }
 
-function GridHeader({
-  selected,
-  onChange,
-  rows,
-  showTips,
-}: {
-  onChange: (arg: Source[]) => void
-  rows: Source[]
-  selected: string[]
-  showTips: boolean
-}) {
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-  const [widgetColor, setWidgetColor] = useState('blue')
-  return (
-    <>
-      <Button
-        disabled={!selected.length}
-        onClick={event => {
-          setAnchorEl(event.currentTarget)
-        }}
-      >
-        Change color of selected items
-      </Button>
-      <Button
-        onClick={() => {
-          onChange(moveUp([...rows], selected))
-        }}
-        disabled={!selected.length}
-      >
-        <KeyboardArrowUpIcon />
-        {showTips ? 'Move selected items up' : null}
-      </Button>
-      <Button
-        onClick={() => {
-          onChange(moveDown([...rows], selected))
-        }}
-        disabled={!selected.length}
-      >
-        <KeyboardArrowDownIcon />
-        {showTips ? 'Move selected items down' : null}
-      </Button>
-      <Button
-        onClick={() => {
-          onChange(moveUp([...rows], selected, rows.length))
-        }}
-        disabled={!selected.length}
-      >
-        <KeyboardDoubleArrowUpIcon />
-        {showTips ? 'Move selected items to top' : null}
-      </Button>
-      <Button
-        onClick={() => {
-          onChange(moveDown([...rows], selected, rows.length))
-        }}
-        disabled={!selected.length}
-      >
-        <KeyboardDoubleArrowDownIcon />
-        {showTips ? 'Move selected items to bottom' : null}
-      </Button>
-      <ColorPopover
-        anchorEl={anchorEl}
-        color={widgetColor}
-        onChange={c => {
-          setWidgetColor(c)
-          selected.forEach(id => {
-            const elt = rows.find(f => f.name === id)
-            if (elt) {
-              elt.color = c
-            }
-          })
-
-          onChange([...rows])
-        }}
-        onClose={() => {
-          setAnchorEl(null)
-        }}
-      />
-    </>
-  )
-}
-
 export default SourcesGrid