Add genotype to multi-variant mouseover (#4799)

package.json

@@ -100,7 +100,7 @@
     "dependency-graph": "^1.0.0",
     "dotenv": "^16.3.1",
     "dotenv-expand": "^11.0.3",
-    "electron": "34.0.0",
+    "electron": "34.0.1",
     "electron-builder": "^25.1.6",
     "electron-mock-ipc": "^0.3.8",
     "eslint": "^9.17.0",

packages/core/ui/BaseTooltip.tsx

@@ -1,4 +1,5 @@
 import {
+  offset,
   useClientPoint,
   useFloating,
   useInteractions,
@@ -43,6 +44,7 @@ export default function BaseTooltip({
   const { refs, floatingStyles, context } = useFloating({
     placement,
     strategy: 'fixed',
+    middleware: [offset(5)],
   })
 
   const clientPoint = useClientPoint(context, clientPointCoords)

packages/web-core/src/BaseWebSession/index.ts

@@ -417,6 +417,7 @@ export function BaseWebSession({
             },
             icon: CopyIcon,
           },
+          { type: 'divider' },
         ]
       },
 

plugins/alignments/src/LinearPileupDisplay/SharedLinearPileupDisplayMixin.ts

@@ -553,7 +553,6 @@ export function SharedLinearPileupDisplayMixin(
         trackMenuItems() {
           return [
             ...superTrackMenuItems(),
-
             {
               label: 'Set feature height...',
               priority: 1,

plugins/alignments/src/LinearSNPCoverageDisplay/model.ts

@@ -4,6 +4,7 @@ import { getConf, readConfObject } from '@jbrowse/core/configuration'
 import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain'
 import { getContainingView } from '@jbrowse/core/util'
 import { linearWiggleDisplayModelFactory } from '@jbrowse/plugin-wiggle'
+import VisibilityIcon from '@mui/icons-material/Visibility'
 import { observable } from 'mobx'
 import { cast, getEnv, isAlive, types } from 'mobx-state-tree'
 
@@ -52,15 +53,15 @@ function stateModelFactory(
         /**
          * #property
          */
-        drawInterbaseCounts: types.maybe(types.boolean),
+        showInterbaseCounts: types.maybe(types.boolean),
         /**
          * #property
          */
-        drawIndicators: types.maybe(types.boolean),
+        showInterbaseIndicators: types.maybe(types.boolean),
         /**
          * #property
          */
-        drawArcs: types.maybe(types.boolean),
+        showArcs: types.maybe(types.boolean),
         /**
          * #property
          */
@@ -158,42 +159,44 @@ function stateModelFactory(
           const configBlob =
             getConf(self, ['renderers', self.rendererTypeName]) || {}
 
-          const { drawArcs, drawInterbaseCounts, drawIndicators } = self
+          const { showArcs, showInterbaseCounts, showInterbaseIndicators } =
+            self
           return self.rendererType.configSchema.create(
             {
               ...configBlob,
-              drawInterbaseCounts:
-                drawInterbaseCounts ?? configBlob.drawInterbaseCounts,
-              drawIndicators: drawIndicators ?? configBlob.drawIndicators,
-              drawArcs: drawArcs ?? configBlob.drawArcs,
+              showInterbaseCounts:
+                showInterbaseCounts ?? configBlob.showInterbaseCounts,
+              showInterbaseIndicators:
+                showInterbaseIndicators ?? configBlob.showInterbaseIndicators,
+              showArcs: showArcs ?? configBlob.showArcs,
             },
             getEnv(self),
           )
         },
         /**
          * #getter
          */
-        get drawArcsSetting() {
+        get showArcsSetting() {
           return (
-            self.drawArcs ?? readConfObject(this.rendererConfig, 'drawArcs')
+            self.showArcs ?? readConfObject(this.rendererConfig, 'showArcs')
           )
         },
         /**
          * #getter
          */
-        get drawInterbaseCountsSetting() {
+        get showInterbaseCountsSetting() {
           return (
-            self.drawInterbaseCounts ??
-            readConfObject(this.rendererConfig, 'drawInterbaseCounts')
+            self.showInterbaseCounts ??
+            readConfObject(this.rendererConfig, 'showInterbaseCounts')
           )
         },
         /**
          * #getter
          */
-        get drawIndicatorsSetting() {
+        get showInterbaseIndicatorsSetting() {
           return (
-            self.drawIndicators ??
-            readConfObject(this.rendererConfig, 'drawIndicators')
+            self.showInterbaseIndicators ??
+            readConfObject(this.rendererConfig, 'showInterbaseIndicators')
           )
         },
 
@@ -233,20 +236,20 @@ function stateModelFactory(
       /**
        * #action
        */
-      toggleDrawIndicators() {
-        self.drawIndicators = !self.drawIndicatorsSetting
+      setShowInterbaseIndicators(arg: boolean) {
+        self.showInterbaseIndicators = arg
       },
       /**
        * #action
        */
-      toggleDrawInterbaseCounts() {
-        self.drawInterbaseCounts = !self.drawInterbaseCountsSetting
+      setShowInterbaseCounts(arg: boolean) {
+        self.showInterbaseCounts = arg
       },
       /**
        * #action
        */
-      toggleDrawArcs() {
-        self.drawArcs = !self.drawArcsSetting
+      setShowArcs(arg: boolean) {
+        self.showArcs = arg
       },
     }))
     .actions(self => ({
@@ -360,27 +363,32 @@ function stateModelFactory(
           return [
             ...superTrackMenuItems(),
             {
-              label: 'Draw insertion/clipping indicators',
+              label: 'Show insertion/clipping indicators',
+              icon: VisibilityIcon,
               type: 'checkbox',
-              checked: self.drawIndicatorsSetting,
+              checked: self.showInterbaseIndicatorsSetting,
               onClick: () => {
-                self.toggleDrawIndicators()
+                self.setShowInterbaseIndicators(
+                  !self.showInterbaseIndicatorsSetting,
+                )
               },
             },
             {
-              label: 'Draw insertion/clipping counts',
+              label: 'Show insertion/clipping counts',
+              icon: VisibilityIcon,
               type: 'checkbox',
-              checked: self.drawInterbaseCountsSetting,
+              checked: self.showInterbaseCountsSetting,
               onClick: () => {
-                self.toggleDrawInterbaseCounts()
+                self.setShowInterbaseCounts(self.showInterbaseCountsSetting)
               },
             },
             {
-              label: 'Draw arcs',
+              label: 'Show arcs',
+              icon: VisibilityIcon,
               type: 'checkbox',
-              checked: self.drawArcsSetting,
+              checked: self.showArcsSetting,
               onClick: () => {
-                self.toggleDrawArcs()
+                self.setShowArcs(self.showArcsSetting)
               },
             },
           ]

plugins/alignments/src/SNPCoverageRenderer/configSchema.ts

@@ -28,15 +28,15 @@ const SNPCoverageRenderer = ConfigurationSchema(
     /**
      * #slot
      */
-    drawArcs: {
+    showArcs: {
       type: 'boolean',
       description: 'Draw sashimi-style arcs for intron features',
       defaultValue: true,
     },
     /**
      * #slot
      */
-    drawInterbaseCounts: {
+    showInterbaseCounts: {
       type: 'boolean',
       description:
         'draw count "upsidedown histogram" of the interbase events that don\'t contribute to the coverage count so are not drawn in the normal histogram',
@@ -45,7 +45,7 @@ const SNPCoverageRenderer = ConfigurationSchema(
     /**
      * #slot
      */
-    drawIndicators: {
+    showInterbaseIndicators: {
       type: 'boolean',
       description:
         'draw a triangular indicator where an event has been detected',

plugins/alignments/src/SNPCoverageRenderer/makeImage.ts

@@ -71,9 +71,9 @@ export async function makeImage(
   const originLinear = getOrigin('linear')
 
   const indicatorThreshold = readConfObject(cfg, 'indicatorThreshold')
-  const drawInterbaseCounts = readConfObject(cfg, 'drawInterbaseCounts')
-  const drawArcs = readConfObject(cfg, 'drawArcs')
-  const drawIndicators = readConfObject(cfg, 'drawIndicators')
+  const showInterbaseCounts = readConfObject(cfg, 'showInterbaseCounts')
+  const showArcs = readConfObject(cfg, 'showArcs')
+  const showInterbaseIndicators = readConfObject(cfg, 'showInterbaseIndicators')
 
   // get the y coordinate that we are plotting at, this can be log scale
   const toY = (n: number) => height - (viewScale(n) || 0) + offset
@@ -295,7 +295,7 @@ export async function makeImage(
     }
 
     const interbaseEvents = Object.keys(snpinfo.noncov)
-    if (drawInterbaseCounts) {
+    if (showInterbaseCounts) {
       let curr = 0
       for (const base of interbaseEvents) {
         const { entryDepth } = snpinfo.noncov[base]!
@@ -311,7 +311,7 @@ export async function makeImage(
       }
     }
 
-    if (drawIndicators) {
+    if (showInterbaseIndicators) {
       let accum = 0
       let max = 0
       let maxBase = ''
@@ -343,7 +343,7 @@ export async function makeImage(
     prevTotal = score0
   }
 
-  if (drawArcs) {
+  if (showArcs) {
     for (const f of feats) {
       if (f.get('type') !== 'skip') {
         continue

plugins/legacy-jbrowse/package.json

@@ -39,7 +39,7 @@
     "@gmod/nclist": "^2.0.0",
     "crc": "^4.0.0",
     "generic-filehandle2": "^1.0.0",
-    "get-value": "^3.0.1",
+    "get-value": "^3.0.0",
     "set-value": "^4.0.1"
   },
   "peerDependencies": {

plugins/linear-genome-view/src/BaseLinearDisplay/components/TooLargeMessage.tsx

@@ -1,10 +1,12 @@
 import { Button } from '@mui/material'
+import { observer } from 'mobx-react'
+import { isAlive } from 'mobx-state-tree'
 
 import BlockMsg from '../components/BlockMsg'
 
 import type { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter'
 
-function TooLargeMessage({
+const TooLargeMessage = observer(function ({
   model,
 }: {
   model: {
@@ -21,8 +23,10 @@ function TooLargeMessage({
       action={
         <Button
           onClick={() => {
-            model.setFeatureDensityStatsLimit(model.featureDensityStats)
-            model.reload()
+            if (isAlive(model)) {
+              model.setFeatureDensityStatsLimit(model.featureDensityStats)
+              model.reload()
+            }
           }}
         >
           Force load
@@ -36,6 +40,6 @@ function TooLargeMessage({
         .join('. ')}
     />
   )
-}
+})
 
 export default TooLargeMessage

plugins/linear-genome-view/src/LinearGenomeView/components/ZoomControls.tsx

@@ -78,49 +78,18 @@ const ZoomControls = observer(function ({
 
       <CascadingMenuButton
         menuItems={[
-          {
-            label: 'Zoom in 2x',
-            icon: ZoomIn,
+          ...[100, 50, 10].map(r => ({
+            label: `Zoom in ${r}x`,
             onClick: () => {
-              model.zoom(model.bpPerPx / 2)
-            },
-          },
-          {
-            label: 'Zoom in 15x',
-            icon: ZoomIn,
-            onClick: () => {
-              model.zoom(model.bpPerPx / 15)
-            },
-          },
-          {
-            label: 'Zoom in 100x',
-            icon: ZoomIn,
-            onClick: () => {
-              model.zoom(model.bpPerPx / 100)
-            },
-          },
-          {
-            label: 'Zoom out 2x',
-            icon: ZoomOut,
-            onClick: () => {
-              model.zoom(model.bpPerPx * 2)
-            },
-          },
-          {
-            label: 'Zoom out 15x',
-
-            icon: ZoomOut,
-            onClick: () => {
-              model.zoom(model.bpPerPx * 15)
+              model.zoom(model.bpPerPx / r)
             },
-          },
-          {
-            label: 'Zoom out 100x',
-            icon: ZoomOut,
+          })),
+          ...[10, 50, 100].map(r => ({
+            label: `Zoom out ${r}x`,
             onClick: () => {
-              model.zoom(model.bpPerPx * 100)
+              model.zoom(model.bpPerPx * r)
             },
-          },
+          })),
         ]}
       >
         <MoreVert />