fix: info panel tabs (#1030)

chanzuckerberg · Jul 10, 2024 · 68c42d5 · 68c42d5
1 parent 2c4d9b0
commit 68c42d5
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 54 deletions.
diff --git a/.infra/rdev/values.yaml b/.infra/rdev/values.yaml
@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-69b280f3
+        tag: sha-30de7b0e
       replicaCount: 1
       env:
         # env vars common to all deployment stages

diff --git a/client/src/components/diffexNotice/index.tsx b/client/src/components/diffexNotice/index.tsx
@@ -2,6 +2,7 @@
 import React, { useState, useEffect } from "react";
 import Snackbar from "@mui/material/Snackbar";
 import MuiAlert from "@mui/material/Alert";
+import { noop } from "lodash";
 import { Link } from "../geneExpression/infoPanel/geneInfo/style";
 
 interface Props {
@@ -40,7 +41,7 @@ function DiffexNotice(props: Props): JSX.Element {
       onClose={handleClose}
       anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
       sx={{ width: "423px" }}
-      ClickAwayListenerProps={{ onClickAway: undefined }}
+      ClickAwayListenerProps={{ onClickAway: noop }}
     >
       <MuiAlert
         onClose={handleClose}

diff --git a/client/src/components/geneExpression/infoPanel/index.tsx b/client/src/components/geneExpression/infoPanel/index.tsx
@@ -1,51 +1,50 @@
-import React from "react";
+import React, { useState, ChangeEvent, useEffect } from "react";
 import { connect } from "react-redux";
 import { AnchorButton, ButtonGroup } from "@blueprintjs/core";
+import { Tabs, Tab } from "czifui";
+
 import {
   CollapseToggle,
   InfoPanelContent,
   InfoPanelHeader,
-  InfoPanelTabs,
   InfoPanelWrapper,
-  StyledAnchorButton,
 } from "./style";
 import GeneInfo from "./geneInfo";
 import DatasetInfo from "./datasetInfo";
 import { Props, mapStateToProps } from "./types";
 
 function InfoPanel(props: Props) {
   const { activeTab, dispatch, infoPanelMinimized, infoPanelHidden } = props;
+  const [value, setValue] = useState(1);
+
+  const handleTabsChange = (
+    _: ChangeEvent<Record<string, unknown>>,
+    tabsValue: unknown
+  ) => {
+    setValue(tabsValue as number);
+    dispatch({
+      type: "toggle active info panel",
+      activeTab: tabsValue === 0 ? "Gene" : "Dataset",
+    });
+  };
+
+  useEffect(() => {
+    setValue(activeTab === "Gene" ? 0 : 1);
+  }, [activeTab]);
 
   return (
     <InfoPanelWrapper
       isHidden={infoPanelHidden}
       isMinimized={infoPanelMinimized}
     >
-      <InfoPanelHeader data-testid="info-panel-header">
-        <InfoPanelTabs>
-          <StyledAnchorButton
-            className={activeTab === "Gene" ? "active" : ""}
-            minimal
-            text="Gene"
-            onClick={() =>
-              dispatch({
-                type: "toggle active info panel",
-                activeTab: "Gene",
-              })
-            }
-          />
-          <StyledAnchorButton
-            className={activeTab === "Dataset" ? "active" : ""}
-            minimal
-            text="Dataset"
-            onClick={() =>
-              dispatch({
-                type: "toggle active info panel",
-                activeTab: "Dataset",
-              })
-            }
-          />
-        </InfoPanelTabs>
+      <InfoPanelHeader
+        data-testid="info-panel-header"
+        style={{ paddingBottom: "5px" }}
+      >
+        <Tabs value={value} sdsSize="small" onChange={handleTabsChange}>
+          <Tab label="Gene" />
+          <Tab label="Dataset" />
+        </Tabs>
         <CollapseToggle>
           <ButtonGroup
             style={{

diff --git a/client/src/components/geneExpression/infoPanel/style.ts b/client/src/components/geneExpression/infoPanel/style.ts
@@ -1,6 +1,4 @@
 import styled from "@emotion/styled";
-import { fontBodyXs } from "czifui";
-import { AnchorButton } from "@blueprintjs/core";
 import { gray300 } from "../../theme";
 
 interface InfoPanelWrapperProps {
@@ -35,37 +33,18 @@ export const InfoPanelHeader = styled.div`
   width: 100%;
   border-top: 1px solid ${gray300};
   border-bottom: 1px solid ${gray300};
-  padding: 10px 0px 5px 10px;
-  height: 38px;
+  padding: 16px 0px 8px 10px;
+  height: 35px;
   position: absolute;
   background: white;
   z-index: 1;
 `;
 
-export const StyledAnchorButton = styled(AnchorButton)`
-  ${fontBodyXs}
-  color: #ccc;
-
-  &.active {
-    font-weight: 600;
-    color: black;
-    border-bottom: 3px solid #0073ff;
-    border-radius: 0px;
-  }
-`;
-
-export const InfoPanelTabs = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: 200px;
-  justify-content: space-between;
-`;
-
 export const CollapseToggle = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   width: 50px;
-  padding: 0px 0px 0px 20px;
+  padding: 0px 0px 7px 20px;
   cursor: pointer;
 `;