Merge pull request #45 from BioAnalyticResource/yukthiw/fix-efp-toolt…

…ip-in-relative-mode fix: EFP tooltip shows correct information in absolute mode
BioAnalyticResource · Dec 4, 2023 · 538f8d8 · 538f8d8
2 parents ab39d9d + 7343852
commit 538f8d8
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 29 deletions.
diff --git a/Eplant/views/eFP/Tooltips/EFPTooltip.tsx b/Eplant/views/eFP/Tooltips/EFPTooltip.tsx
@@ -9,13 +9,14 @@ import {
   useTheme,
 } from '@mui/material'
 import React from 'react'
-import { EFPGroup, EFPTissue, EFPData } from '../types'
+import { EFPGroup, EFPTissue, EFPData, EFPState } from '../types'
 
 function SVGTooltip(props: {
   el: SVGElement | null
   group: EFPGroup
   tissue: EFPTissue
   data: EFPData
+  state: EFPState
 }) {
   const [open, setOpen] = React.useState(false)
   const theme = useTheme()
@@ -76,33 +77,54 @@ function SVGTooltip(props: {
                     {props.tissue.mean.toFixed(2)}±{props.tissue.std.toFixed(2)}
                   </TableCell>
                 </TableRow>
-                <TableRow>
-                  <TableCell
-                    sx={{
-                      color: theme.palette.secondary.main,
-                      textAlign: 'right',
-                    }}
-                  >
-                    Samples
-                  </TableCell>
-                  <TableCell>{props.tissue.samples}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell
-                    sx={{
-                      color: theme.palette.secondary.main,
-                      textAlign: 'right',
-                      borderBottom: 'none',
-                    }}
-                  >
-                    Log2 fold change vs control
-                  </TableCell>
-                  <TableCell sx={{ borderBottom: 'none' }}>
-                    {Math.log2(
-                      props.tissue.mean / (props.data.control ?? 1),
-                    ).toFixed(2)}
-                  </TableCell>
-                </TableRow>
+                {props.state.colorMode == 'relative' ? (
+                  <>
+                    <TableRow>
+                      <TableCell
+                        sx={{
+                          color: theme.palette.secondary.main,
+                          textAlign: 'right',
+                        }}
+                      >
+                        Samples
+                      </TableCell>
+                      <TableCell>{props.tissue.samples}</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell
+                        sx={{
+                          color: theme.palette.secondary.main,
+                          textAlign: 'right',
+                          borderBottom: 'none',
+                        }}
+                      >
+                        Log2 fold change vs control
+                      </TableCell>
+                      <TableCell sx={{ borderBottom: 'none' }}>
+                        {Math.log2(
+                          props.tissue.mean / (props.data.control ?? 1)
+                        ).toFixed(2)}
+                      </TableCell>
+                    </TableRow>
+                  </>
+                ) : (
+                  <>
+                    <TableRow>
+                      <TableCell
+                        sx={{
+                          color: theme.palette.secondary.main,
+                          textAlign: 'right',
+                          borderBottom: 'none',
+                        }}
+                      >
+                        Samples
+                      </TableCell>
+                      <TableCell sx={{ borderBottom: 'none' }}>
+                        {props.tissue.samples}
+                      </TableCell>
+                    </TableRow>
+                  </>
+                )}
               </TableBody>
             </Table>
           </Box>

diff --git a/Eplant/views/eFP/Tooltips/cellEFPTooltip.tsx b/Eplant/views/eFP/Tooltips/cellEFPTooltip.tsx
@@ -8,14 +8,15 @@ import {
   TableCell,
   useTheme,
 } from '@mui/material'
-import { EFPGroup, EFPTissue, EFPData } from '../types'
+import { EFPGroup, EFPTissue, EFPData, EFPState } from '../types'
 import React from 'react'
 
 function CellSVGTooltip(props: {
   el: SVGElement | null
   group: EFPGroup
   tissue: EFPTissue
   data: EFPData
+  state: EFPState
 }) {
   const [open, setOpen] = React.useState(false)
   const theme = useTheme()

diff --git a/Eplant/views/eFP/index.tsx b/Eplant/views/eFP/index.tsx
@@ -26,6 +26,7 @@ export default class EFP implements View<EFPData, EFPState, EFPAction> {
     group: EFPGroup
     tissue: EFPTissue
     data: EFPData
+    state: EFPState
   }) => React.JSX.Element
   constructor(
     public name: string,
@@ -283,6 +284,7 @@ export default class EFP implements View<EFPData, EFPState, EFPAction> {
               el={el}
               group={group}
               tissue={tissue}
+              state={props.state}
             />
           ))}
       </div>