Create concept of global hovered state (#4013)

GMOD · Oct 27, 2023 · 7806999 · 7806999
1 parent 479e97e
commit 7806999
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 2 deletions.
diff --git a/packages/core/util/types/index.ts b/packages/core/util/types/index.ts
@@ -92,6 +92,8 @@ export interface AbstractSessionModel extends AbstractViewContainer {
   selection?: unknown
   focusedViewId?: string
   themeName?: string
+  hovered: unknown
+  setHovered: (arg: unknown) => void
   setFocusedViewId?: (id: string) => void
   allThemes?: () => Record<string, ThemeOptions | undefined>
   setSelection: (feature: Feature) => void

diff --git a/packages/product-core/src/Session/BaseSession.ts b/packages/product-core/src/Session/BaseSession.ts
@@ -45,6 +45,13 @@ export function BaseSessionModel<
        * is.
        */
       selection: undefined as unknown,
+      /**
+       * #volatile
+       * this is the globally "hovered" object. can be anything. code that
+       * wants to deal with this should examine it to see what kind of thing it
+       * is.
+       */
+      hovered: undefined as unknown,
     }))
     .views(self => ({
       get root() {
@@ -109,6 +116,12 @@ export function BaseSessionModel<
       clearSelection() {
         self.selection = undefined
       },
+      /**
+       * #action
+       */
+      setHovered(thing: unknown) {
+        self.hovered = thing
+      },
     }))
 }
 

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.tsx
@@ -90,7 +90,22 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
   const HeaderComponent = model.HeaderComponent()
 
   return (
-    <div className={classes.rel} ref={ref}>
+    <div
+      className={classes.rel}
+      ref={ref}
+      onMouseLeave={() => session.setHovered(undefined)}
+      onMouseMove={event => {
+        const c = ref.current
+        if (!c) {
+          return
+        }
+        const { tracks } = model
+        const leftPx = event.clientX - c.getBoundingClientRect().left
+        const hoverPosition = model.pxToBp(leftPx)
+        const hoverFeature = tracks.find(t => t.displays[0].featureUnderMouse)
+        session.setHovered({ hoverPosition, hoverFeature })
+      }}
+    >
       <HeaderComponent model={model} />
       <MiniControlsComponent model={model} />
       <TracksContainer model={model}>

diff --git a/plugins/svg/src/SvgFeatureRenderer/configSchema.ts b/plugins/svg/src/SvgFeatureRenderer/configSchema.ts
@@ -155,7 +155,7 @@ const SvgFeatureRenderer = ConfigurationSchema(
     maxHeight: {
       type: 'integer',
       description: 'the maximum height to be used in a svg rendering',
-      defaultValue: 600,
+      defaultValue: 1200,
     },
 
     /**