replace Blueprint HTMLTable

chanzuckerberg · Dec 14, 2022 · 3a52ab8 · 3a52ab8
1 parent 8413c8c
commit 3a52ab8
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 33 deletions.
diff --git a/frontend/src/views/WheresMyGene/components/CellInfoSideBar/index.tsx b/frontend/src/views/WheresMyGene/components/CellInfoSideBar/index.tsx
@@ -1,4 +1,12 @@
-import { Button, Icon } from "czifui";
+import {
+  Button,
+  CellBasic,
+  CellHeader,
+  Icon,
+  Table,
+  TableHeader,
+  TableRow,
+} from "czifui";
 import React, { useCallback, useContext } from "react";
 import { useMarkerGenes } from "src/common/queries/wheresMyGene";
 import { BetaChip } from "src/components/Header/style";
@@ -7,7 +15,8 @@ import { addSelectedGenes } from "../../common/store/actions";
 import {
   ButtonContainer,
   CopyGenesButton,
-  StyledHTMLTable,
+  GeneCellHeader,
+  GeneHeaderWrapper,
   TissueName,
   TooltipButton,
 } from "./style";
@@ -77,10 +86,10 @@ function CellInfoSideBar({
           Add to Dot Plot
         </Button>
       </ButtonContainer>
-      <StyledHTMLTable condensed bordered={false}>
-        <thead>
-          <tr>
-            <td>
+      <Table>
+        <TableHeader>
+          <GeneCellHeader hideSortIcon>
+            <GeneHeaderWrapper>
               Gene{" "}
               <CopyGenesButton
                 onClick={handleCopyGenes}
@@ -91,21 +100,36 @@ function CellInfoSideBar({
               >
                 Copy
               </CopyGenesButton>
-            </td>
-            <td>P-value</td>
-            <td>Effect Size</td>
-          </tr>
-        </thead>
+            </GeneHeaderWrapper>
+          </GeneCellHeader>
+          <CellHeader hideSortIcon horizontalAlign="right">
+            P-value
+          </CellHeader>
+          <CellHeader hideSortIcon horizontalAlign="right">
+            Effect Size
+          </CellHeader>
+        </TableHeader>
         <tbody>
           {Object.entries(data.marker_genes).map((gene) => (
-            <tr key={gene[0]}>
-              <td>{gene[0]}</td>
-              <td>{gene[1].p_value.toPrecision(4)}</td>
-              <td>{gene[1].effect_size.toPrecision(4)}</td>
-            </tr>
+            <TableRow key={gene[0]}>
+              <CellBasic
+                shouldShowTooltipOnHover={false}
+                primaryText={gene[0]}
+              />
+              <CellBasic
+                shouldShowTooltipOnHover={false}
+                horizontalAlign="right"
+                primaryText={gene[1].p_value.toPrecision(4)}
+              />
+              <CellBasic
+                shouldShowTooltipOnHover={false}
+                horizontalAlign="right"
+                primaryText={gene[1].effect_size.toPrecision(4)}
+              />
+            </TableRow>
           ))}
         </tbody>
-      </StyledHTMLTable>
+      </Table>
     </div>
   );
 }

diff --git a/frontend/src/views/WheresMyGene/components/CellInfoSideBar/style.ts b/frontend/src/views/WheresMyGene/components/CellInfoSideBar/style.ts
@@ -1,6 +1,5 @@
-import { HTMLTable } from "@blueprintjs/core";
 import styled from "@emotion/styled";
-import { Button } from "czifui";
+import { Button, CellHeader, CellHeaderProps, getColors } from "czifui";
 
 export const CELL_INFO_SIDEBAR_WIDTH_PX = 400;
 
@@ -10,14 +9,28 @@ export const ButtonContainer = styled.div`
   justify-content: space-between;
 `;
 
-export const StyledHTMLTable = styled(HTMLTable)`
-  & thead td {
-    color: #767676 !important;
-    font-weight: 500;
-  }
-  & td:nth-child(3) {
-    text-align: end;
-  }
+export const GeneHeaderWrapper = styled("span")`
+  display: flex;
+  align-items: center;
+`;
+
+export const GeneCellHeader = styled(CellHeader)`
+  ${(props: CellHeaderProps) => {
+    const { active = false } = props;
+
+    const colors = getColors(props);
+
+    return `
+      &:hover {
+        color: ${active ? colors?.primary[500] : "black"};
+
+        & .MuiButtonBase-root {
+          /* (thuang): Maintain button hover style  */
+          color: ${colors?.primary[500]}
+        }
+      }
+    `;
+  }}
 `;
 
 export const TooltipButton = styled(Button)`
@@ -28,6 +41,7 @@ export const TooltipButton = styled(Button)`
 export const CopyGenesButton = styled(Button)`
   font-weight: 500;
   font-size: 14px;
+  margin-left: 10px;
 `;
 
 export const TissueName = styled.div`

diff --git a/frontend/src/views/WheresMyGene/components/Main/index.tsx b/frontend/src/views/WheresMyGene/components/Main/index.tsx
@@ -32,9 +32,7 @@ import { CellType, GeneExpressionSummary, Tissue } from "../../common/types";
 import { SideBarPositioner, SideBarWrapper, Top, Wrapper } from "../../style";
 import Beta from "../Beta";
 import CellInfoBar from "../CellInfoSideBar";
-import {
-  CELL_INFO_SIDEBAR_WIDTH_PX,
-} from "../CellInfoSideBar/style";
+import { CELL_INFO_SIDEBAR_WIDTH_PX } from "../CellInfoSideBar/style";
 import Filters from "../Filters";
 import GeneSearchBar from "../GeneSearchBar";
 import { EXCLUDE_IN_SCREENSHOT_CLASS_NAME } from "../GeneSearchBar/components/SaveImage";
@@ -44,7 +42,7 @@ import InfoPanel from "../InfoPanel";
 import ColorScale from "../InfoPanel/components/ColorScale";
 import Legend from "../InfoPanel/components/Legend";
 import Loader from "../Loader";
-import { SideBarLabel, StyledSidebarDrawer } from "./style";
+import { BetaWrapper, SideBarLabel, StyledSidebarDrawer } from "./style";
 
 export const INFO_PANEL_WIDTH_PX = 320;
 
@@ -386,9 +384,10 @@ export default function WheresMyGene(): JSX.Element {
             ""
           )}
         </Wrapper>
+        <BetaWrapper>
+          <Beta className={EXCLUDE_IN_SCREENSHOT_CLASS_NAME} />
+        </BetaWrapper>
       </View>
-
-      <Beta className={EXCLUDE_IN_SCREENSHOT_CLASS_NAME} />
     </>
   );
 }
diff --git a/frontend/src/views/WheresMyGene/components/Main/style.ts b/frontend/src/views/WheresMyGene/components/Main/style.ts
@@ -17,3 +17,7 @@ export const StyledSidebarDrawer = styled(Drawer)`
     box-shadow: none;
   }
 `;
+
+export const BetaWrapper = styled("div")`
+  width: 100vw;
+`;