chore: add cellguide to navbar in explorer (#645)

* chore: add cellguide to navbar in explorer * update snapshot * try snapshot again --------- Co-authored-by: Timmy Huang <[email protected]>
chanzuckerberg · Jul 28, 2023 · 2a8496f · 2a8496f
1 parent ff2146e
commit 2a8496f
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git a/client/__tests__/e2e/__snapshots__/e2e.test.ts.snap b/client/__tests__/e2e/__snapshots__/e2e.test.ts.snap
diff --git a/client/src/analytics/events.ts b/client/src/analytics/events.ts
@@ -53,4 +53,5 @@ export enum EVENTS {
   CENSUS_CLICK_NAV = "CENSUS_CLICK_NAV",
   DATASETS_CLICK_NAV = "DATASETS_CLICK_NAV",
   DOCUMENTATION_CLICK_NAV = "DOCUMENTATION_CLICK_NAV",
+  CELL_GUIDE_CLICK_NAV = "CELL_GUIDE_CLICK_NAV",
 }
diff --git a/client/src/components/NavBar/index.tsx b/client/src/components/NavBar/index.tsx
@@ -6,7 +6,7 @@ import { track } from "../../analytics";
 import { EVENTS } from "../../analytics/events";
 import { ROUTES } from "./routes";
 import Icon from "../icon/icon";
-import { Left, LinkWrapper, MainWrapper, Nav, Right, Wrapper } from "./style";
+import { BetaChip, Left, LinkWrapper, MainWrapper, Nav, Right, Wrapper } from "./style";
 import NavDivider from "./components/NavDivider";
 
 function handleMenuClick() {
@@ -75,6 +75,16 @@ const Header = (props: HeaderProps) => {
                 onClick={handleWMGClick}
               />
             </LinkWrapper>
+            <LinkWrapper>
+              <AnchorButton
+                active={false}
+                href={ROUTES.CELL_GUIDE}
+                minimal
+                text="Cell Guide"
+                onClick={handleCellGuideClick}
+              />
+              <BetaChip label="Beta" size="small" />
+            </LinkWrapper>            
             <NavDivider />
             <LinkWrapper>
               <AnchorButton
@@ -157,6 +167,9 @@ const Header = (props: HeaderProps) => {
   function handleWMGClick(): void {
     track(EVENTS.WMG_CLICK_NAV);
   }
+  function handleCellGuideClick(): void {
+    track(EVENTS.CELL_GUIDE_CLICK_NAV);
+  }  
   function handleDatasetsClick(): void {
     track(EVENTS.DATASETS_CLICK_NAV);
   }

diff --git a/client/src/components/NavBar/routes.ts b/client/src/components/NavBar/routes.ts
@@ -9,4 +9,5 @@ export enum ROUTES {
   PREVIEW_POLICIES = "/previewpolicies/",
   WHERE_IS_MY_GENE = "/gene-expression",
   DOCS = "/docs",
+  CELL_GUIDE = "/cellguide",
 }
diff --git a/client/src/components/NavBar/style.ts b/client/src/components/NavBar/style.ts
@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { GRAY, PT_TEXT_COLOR } from "./theme";
 import { HEADER_HEIGHT_PX } from "../../globals";
+import { Chip } from "czifui";
 
 export const Wrapper = styled.div`
   background-color: ${PT_TEXT_COLOR};
@@ -80,3 +81,10 @@ export const LinkWrapper = styled.span`
   display: flex;
   align-items: center;
 `;
+
+export const BetaChip = styled(Chip)`
+  background: #7a41ce;
+  color: white;
+  margin-left: 4px;
+  height: 16px !important;
+`;