feat: Added efp stroke change on hover (#62)

* feat: Added stroke change on hover for EFP tooltips * Added stroke change on hover for cellEFP * small refactor * removed commented out code
BioAnalyticResource · Dec 22, 2023 · d8d2fa7 · d8d2fa7
1 parent eaefae0
commit d8d2fa7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/Eplant/views/eFP/Tooltips/EFPTooltip.tsx b/Eplant/views/eFP/Tooltips/EFPTooltip.tsx
@@ -11,6 +11,26 @@ import {
 import React from 'react'
 import { EFPGroup, EFPTissue, EFPData, EFPState } from '../types'
 
+export const setStroke = (
+  el: Element | null,
+  colour: string,
+  width: string,
+) => {
+  // For multigroup SVGs, recursively sets stroke of all path elements
+  if (el) {
+    if (el.firstElementChild?.children.length === 0) {
+      for (const child of el.children) {
+        child.setAttribute('stroke-width', width)
+        child.setAttribute('stroke', colour)
+      }
+    } else {
+      for (const child of el.children) {
+        setStroke(child, colour, width)
+      }
+    }
+  }
+}
+
 function SVGTooltip(props: {
   el: SVGElement | null
   group: EFPGroup
@@ -23,9 +43,11 @@ function SVGTooltip(props: {
   React.useEffect(() => {
     const enterListener = () => {
       setOpen(true)
+      setStroke(props.el, theme.palette.secondary.contrastText, '1.5')
     }
     const leaveListener = () => {
       setOpen(false)
+      setStroke(props.el, theme.palette.secondary.dark, '0.5')
     }
     if (props.el) {
       props.el.addEventListener('mouseenter', enterListener)
@@ -102,7 +124,7 @@ function SVGTooltip(props: {
                       </TableCell>
                       <TableCell sx={{ borderBottom: 'none' }}>
                         {Math.log2(
-                          props.tissue.mean / (props.data.control ?? 1)
+                          props.tissue.mean / (props.data.control ?? 1),
                         ).toFixed(2)}
                       </TableCell>
                     </TableRow>

diff --git a/Eplant/views/eFP/Tooltips/cellEFPTooltip.tsx b/Eplant/views/eFP/Tooltips/cellEFPTooltip.tsx
@@ -10,6 +10,7 @@ import {
 } from '@mui/material'
 import { EFPGroup, EFPTissue, EFPData, EFPState } from '../types'
 import React from 'react'
+import { setStroke } from './EFPTooltip'
 
 function CellSVGTooltip(props: {
   el: SVGElement | null
@@ -20,12 +21,15 @@ function CellSVGTooltip(props: {
 }) {
   const [open, setOpen] = React.useState(false)
   const theme = useTheme()
+
   React.useEffect(() => {
     const enterListener = () => {
       setOpen(true)
+      setStroke(props.el, '#000000', '3')
     }
     const leaveListener = () => {
       setOpen(false)
+      setStroke(props.el, '#FFFFFF', '2')
     }
     if (props.el) {
       props.el.addEventListener('mouseenter', enterListener)