Working mouseover

Author: cmdcolin

plugins/canvas/src/LinearWebGLFeatureDisplay/components/WebGLFeatureComponent.tsx

@@ -717,8 +717,18 @@ const WebGLFeatureComponent = observer(function WebGLFeatureComponent({
           (vr.end - vr.start) / (vr.screenEndPx - vr.screenStartPx)
         const leftPx =
           vr.screenStartPx + (feature.startBp - vr.start) / blockBpPerPx
-        const rightPx =
+        let rightPx =
           vr.screenStartPx + (feature.endBp - vr.start) / blockBpPerPx
+
+        // Expand to include label area
+        const labelData = data.floatingLabelsData[featureId]
+        if (labelData) {
+          for (const label of labelData.floatingLabels) {
+            const labelWidth = measureText(label.text, 11)
+            rightPx = Math.max(rightPx, leftPx + labelWidth)
+          }
+        }
+
         const featureWidth = rightPx - leftPx
         const topPx = feature.topPx - scrollY
         const heightPx = feature.bottomPx - feature.topPx
@@ -787,16 +797,58 @@ const WebGLFeatureComponent = observer(function WebGLFeatureComponent({
       )
     }
 
-    if (
-      model.selectedFeatureId &&
-      model.selectedFeatureId !== hoveredFeature?.featureId &&
-      model.selectedFeatureId !== hoveredSubfeature?.featureId
-    ) {
-      addFeatureOverlay(
-        model.selectedFeatureId,
-        'rgba(0, 100, 255, 0.2)',
-        'selected',
-      )
+    if (model.selectedFeatureId) {
+      for (const vr of visibleRegions) {
+        const data = rpcDataMap.get(vr.regionNumber)
+        if (!data) {
+          continue
+        }
+        const feature = data.flatbushItems.find(
+          f => f.featureId === model.selectedFeatureId,
+        )
+        if (!feature) {
+          continue
+        }
+        if (feature.endBp < vr.start || feature.startBp > vr.end) {
+          continue
+        }
+
+        const blockBpPerPx =
+          (vr.end - vr.start) / (vr.screenEndPx - vr.screenStartPx)
+        const leftPx =
+          vr.screenStartPx + (feature.startBp - vr.start) / blockBpPerPx
+        let rightPx =
+          vr.screenStartPx + (feature.endBp - vr.start) / blockBpPerPx
+
+        // Expand to include label area
+        const selLabelData = data.floatingLabelsData[model.selectedFeatureId]
+        if (selLabelData) {
+          for (const label of selLabelData.floatingLabels) {
+            const labelWidth = measureText(label.text, 11)
+            rightPx = Math.max(rightPx, leftPx + labelWidth)
+          }
+        }
+
+        const featureWidth = rightPx - leftPx
+        const topPx = feature.topPx - scrollY
+        const heightPx = feature.bottomPx - feature.topPx
+
+        overlays.push(
+          <div
+            key={`selected-${vr.regionNumber}`}
+            style={{
+              position: 'absolute',
+              left: leftPx - 2,
+              top: topPx - 2,
+              width: featureWidth + 4,
+              height: heightPx + 4,
+              border: '2px solid rgba(0, 100, 255, 0.8)',
+              borderRadius: 3,
+              pointerEvents: 'none',
+            }}
+          />,
+        )
+      }
     }
 
     return overlays.length > 0 ? overlays : null

plugins/canvas/src/LinearWebGLFeatureDisplay/model.ts

@@ -11,6 +11,7 @@ import {
   getContainingTrack,
   getContainingView,
   getSession,
+  isFeature,
   isSessionModelWithWidgets,
 } from '@jbrowse/core/util'
 import { addDisposer, flow, isAlive, types } from '@jbrowse/mobx-state-tree'
@@ -73,6 +74,8 @@ export default function stateModelFactory(
         configuration: ConfigurationReference(configSchema),
         trackShowLabels: types.maybe(types.boolean),
         trackShowDescriptions: types.maybe(types.boolean),
+        trackGeneGlyphMode: types.maybe(types.string),
+        showOnlyGenes: false,
       }),
     )
     .preProcessSnapshot((snap: any) => {
@@ -126,6 +129,23 @@ export default function stateModelFactory(
         )
       },
 
+      get geneGlyphMode(): string {
+        return (
+          self.trackGeneGlyphMode ??
+          getConf(self, ['renderer', 'geneGlyphMode'])
+        )
+      },
+
+      get selectedFeatureId() {
+        if (isAlive(self)) {
+          const { selection } = getSession(self)
+          if (isFeature(selection)) {
+            return selection.id()
+          }
+        }
+        return undefined
+      },
+
       get colorByCDS() {
         const view = getContainingView(self) as LGV
         return (view as unknown as { colorByCDS?: boolean }).colorByCDS ?? false
@@ -267,6 +287,14 @@ export default function stateModelFactory(
         self.trackShowDescriptions = value
       },
 
+      setGeneGlyphMode(value: string) {
+        self.trackGeneGlyphMode = value
+      },
+
+      setShowOnlyGenes(value: boolean) {
+        self.showOnlyGenes = value
+      },
+
       showContextMenuForFeature(featureInfo: FlatbushItem) {
         const feature = new SimpleFeature({
           id: featureInfo.featureId,
@@ -362,6 +390,7 @@ export default function stateModelFactory(
             ...baseRendererConfig,
             showLabels: self.showLabels,
             showDescriptions: self.showDescriptions,
+            geneGlyphMode: self.geneGlyphMode,
           }
           const result = (await rpcManager.call(
             session.id ?? '',
@@ -374,6 +403,7 @@ export default function stateModelFactory(
               bpPerPx,
               colorByCDS: self.colorByCDS,
               sequenceAdapter: self.sequenceAdapter,
+              showOnlyGenes: self.showOnlyGenes,
             },
           )) as WebGLFeatureDataResult
 
@@ -419,6 +449,8 @@ export default function stateModelFactory(
       let prevShowLabels: boolean | undefined
       let prevShowDescriptions: boolean | undefined
       let prevColorByCDS: boolean | undefined
+      let prevGeneGlyphMode: string | undefined
+      let prevShowOnlyGenes: boolean | undefined
       let prevSettingsInitialized = false
 
       return {
@@ -493,11 +525,15 @@ export default function stateModelFactory(
                 const showLabels = self.showLabels
                 const showDescriptions = self.showDescriptions
                 const colorByCDS = self.colorByCDS
+                const geneGlyphMode = self.geneGlyphMode
+                const showOnlyGenes = self.showOnlyGenes
                 if (
                   prevSettingsInitialized &&
                   (showLabels !== prevShowLabels ||
                     showDescriptions !== prevShowDescriptions ||
-                    colorByCDS !== prevColorByCDS)
+                    colorByCDS !== prevColorByCDS ||
+                    geneGlyphMode !== prevGeneGlyphMode ||
+                    showOnlyGenes !== prevShowOnlyGenes)
                 ) {
                   if (self.loadedRegions.size > 0) {
                     refetchForCurrentView()
@@ -507,6 +543,8 @@ export default function stateModelFactory(
                 prevShowLabels = showLabels
                 prevShowDescriptions = showDescriptions
                 prevColorByCDS = colorByCDS
+                prevGeneGlyphMode = geneGlyphMode
+                prevShowOnlyGenes = showOnlyGenes
               },
               {
                 name: 'SettingsRefetch',
@@ -568,13 +606,38 @@ export default function stateModelFactory(
                   self.setShowDescriptions(!self.showDescriptions)
                 },
               },
+              {
+                label: 'Show only genes',
+                type: 'checkbox',
+                checked: self.showOnlyGenes,
+                onClick: () => {
+                  self.setShowOnlyGenes(!self.showOnlyGenes)
+                },
+              },
             ],
           },
+          {
+            label: 'Gene glyph',
+            subMenu: (
+              [
+                { value: 'all', label: 'All transcripts' },
+                { value: 'longest', label: 'Longest transcript' },
+                { value: 'longestCoding', label: 'Longest coding transcript' },
+              ] as const
+            ).map(({ value, label }) => ({
+              label,
+              type: 'radio' as const,
+              checked: self.geneGlyphMode === value,
+              onClick: () => {
+                self.setGeneGlyphMode(value)
+              },
+            })),
+          },
         ]
       },
     }))
     .postProcessSnapshot(snap => {
-      const { trackShowLabels, trackShowDescriptions, ...rest } = snap as Omit<
+      const { trackShowLabels, trackShowDescriptions, trackGeneGlyphMode, showOnlyGenes, ...rest } = snap as Omit<
         typeof snap,
         symbol
       >
@@ -583,6 +646,8 @@ export default function stateModelFactory(
         // Only persist if explicitly set (not undefined)
         ...(trackShowLabels !== undefined && { trackShowLabels }),
         ...(trackShowDescriptions !== undefined && { trackShowDescriptions }),
+        ...(trackGeneGlyphMode !== undefined && { trackGeneGlyphMode }),
+        ...(showOnlyGenes && { showOnlyGenes }),
       } as typeof snap
     })
 }

plugins/canvas/src/RenderWebGLFeatureDataRPC/executeRenderWebGLFeatureData.ts

@@ -547,6 +547,7 @@ export async function executeRenderWebGLFeatureData({
     bpPerPx: requestedBpPerPx,
     colorByCDS,
     sequenceAdapter,
+    showOnlyGenes,
     statusCallback = () => {},
     stopToken,
   } = args as RenderWebGLFeatureDataArgs & {
@@ -565,7 +566,7 @@ export async function executeRenderWebGLFeatureData({
     assemblyName: region.assemblyName ?? '',
   }
 
-  const featuresArray = await updateStatus(
+  let featuresArray = await updateStatus(
     'Fetching features',
     statusCallback,
     () =>
@@ -576,6 +577,10 @@ export async function executeRenderWebGLFeatureData({
 
   checkStopToken2(stopTokenCheck)
 
+  if (showOnlyGenes) {
+    featuresArray = featuresArray.filter(f => f.get('type') === 'gene')
+  }
+
   // Genomic positions are integers, but region bounds from the view can be fractional.
   // Use floor to get integer reference point for storing position offsets.
   const regionStart = Math.floor(region.start)
@@ -817,9 +822,31 @@ export async function executeRenderWebGLFeatureData({
   let subfeatureFlatbushData = new ArrayBuffer(0)
 
   if (flatbushItems.length > 0) {
+    const reversed = region.reversed ?? false
     const featureIndex = new Flatbush(flatbushItems.length)
     for (const item of flatbushItems) {
-      featureIndex.add(item.startBp, item.topPx, item.endBp, item.bottomPx)
+      let hitStartBp = item.startBp
+      let hitEndBp = item.endBp
+      const labelData = floatingLabelsData[item.featureId]
+      if (labelData) {
+        let maxLabelWidthPx = 0
+        for (const label of labelData.floatingLabels) {
+          const w = measureText(label.text, 11)
+          if (w > maxLabelWidthPx) {
+            maxLabelWidthPx = w
+          }
+        }
+        const featureWidthPx = (item.endBp - item.startBp) / bpPerPx
+        if (maxLabelWidthPx > featureWidthPx) {
+          const extraBp = (maxLabelWidthPx - featureWidthPx) * bpPerPx
+          if (reversed) {
+            hitStartBp -= extraBp
+          } else {
+            hitEndBp += extraBp
+          }
+        }
+      }
+      featureIndex.add(hitStartBp, item.topPx, hitEndBp, item.bottomPx)
     }
     featureIndex.finish()
     flatbushData = featureIndex.data

plugins/canvas/src/RenderWebGLFeatureDataRPC/types.ts

@@ -23,6 +23,7 @@ export interface RenderWebGLFeatureDataArgs {
   bpPerPx: number
   colorByCDS?: boolean
   sequenceAdapter?: Record<string, unknown>
+  showOnlyGenes?: boolean
 }
 
 export interface WebGLFeatureDataResult {