From f19e002a6c07a0d6912a0ecdcd6ad2415141bea6 Mon Sep 17 00:00:00 2001
From: Jamie Waese <jamie@waese.com>
Date: Wed, 3 Jan 2024 21:31:20 -0500
Subject: [PATCH] prettier EFP tooltip

---
 Eplant/View/viewData.ts                  |   1 +
 Eplant/views/eFP/Tooltips/EFPTooltip.tsx | 103 ++++++++---------------
 2 files changed, 35 insertions(+), 69 deletions(-)

diff --git a/Eplant/View/viewData.ts b/Eplant/View/viewData.ts
index 948ede94..25d1e62f 100644
--- a/Eplant/View/viewData.ts
+++ b/Eplant/View/viewData.ts
@@ -87,6 +87,7 @@ export function useViewData<T, S, A>(
   const id = (view?.id ?? 'generic-view') + '-' + useViewID()
   const [viewData, setViewData] = useAtom(getViewAtom(key))
   const [viewState, setViewState] = useAtom(getViewStateAtom(id))
+  // console.log(viewData)
 
   // If there is no cached viewData then load it using the view's loader
   React.useEffect(() => {
diff --git a/Eplant/views/eFP/Tooltips/EFPTooltip.tsx b/Eplant/views/eFP/Tooltips/EFPTooltip.tsx
index 9325ddcf..531eedda 100644
--- a/Eplant/views/eFP/Tooltips/EFPTooltip.tsx
+++ b/Eplant/views/eFP/Tooltips/EFPTooltip.tsx
@@ -31,6 +31,30 @@ export const setStroke = (
   }
 }
 
+function KeyValueRow(props: {
+  label: string,
+  value: string | number
+}) {
+
+  return <TableRow>
+  <TableCell
+    sx={theme => ({
+      color: theme.palette.text.secondary,
+      textAlign: 'left',
+      border: 'none',
+    })}
+  >
+    {props.label}
+  </TableCell>
+  <TableCell
+      sx={theme => ({
+      color: theme.palette.text.primary,
+      textAlign: 'right',
+      border: 'none'
+    })}>{props.value}</TableCell>
+</TableRow>
+}
+
 function SVGTooltip(props: {
   el: SVGElement | null
   group: EFPGroup
@@ -75,78 +99,19 @@ function SVGTooltip(props: {
           >
             <Table size="small">
               <TableBody>
-                <TableRow>
-                  <TableCell
-                    sx={{
-                      color: theme.palette.secondary.main,
-                      textAlign: 'right',
-                    }}
-                  >
-                    Sample name
-                  </TableCell>
-                  <TableCell>{props.tissue.name}</TableCell>
-                </TableRow>
-                <TableRow>
-                  <TableCell
-                    sx={{
-                      color: theme.palette.secondary.main,
-                      textAlign: 'right',
-                    }}
-                  >
-                    Level
-                  </TableCell>
-                  <TableCell>
-                    {props.tissue.mean.toFixed(2)}±{props.tissue.std.toFixed(2)}
+                <TableRow> 
+                  <TableCell colSpan={2} sx={{
+                    fontSize: 'medium',
+                    fontWeight: '500',
+                    border: 'none'
+                  }}>
+                  {props.tissue.name}
                   </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(
+                <KeyValueRow label="Level" value={`${props.tissue.mean.toFixed(2)}±${props.tissue.std.toFixed(2)}`}/>
+                <KeyValueRow label="Log2 fold change vs control" value={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>
-                  </>
-                )}
+                        ).toFixed(2)}/>
               </TableBody>
             </Table>
           </Box>