fix: add census link in explorer (#625)

* add census link in explorer * add + style divider * change component declaration * rm duplicate components * manually update e2e test * update to include two backslashes --------- Co-authored-by: Joyce Yan <[email protected]>
chanzuckerberg · Jun 21, 2023 · 202a90f · 202a90f
1 parent 2d35450
commit 202a90f
Show file tree

Hide file tree

Showing 5 changed files with 37 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
@@ -50,6 +50,7 @@ export enum EVENTS {
   EXPLORER_GENE_INFO_BUTTON_CLICKED = "EXPLORER_GENE_INFO_BUTTON_CLICKED",
   WMG_CLICK_NAV = "WMG_CLICK_NAV",
   COLLECTIONS_CLICK_NAV = "COLLECTIONS_CLICK_NAV",
+  CENSUS_CLICK_NAV = "CENSUS_CLICK_NAV",
   DATASETS_CLICK_NAV = "DATASETS_CLICK_NAV",
-  DOCUMENTATION_CLICK_NAV = "DOCUMENTATION_CLICK_NAV"
+  DOCUMENTATION_CLICK_NAV = "DOCUMENTATION_CLICK_NAV",
 }
diff --git a/client/src/components/NavBar/components/NavDivider/index.tsx b/client/src/components/NavBar/components/NavDivider/index.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+import { NavDivider as Divider } from "./style";
+
+const NavDivider = () => <Divider flexItem orientation="vertical" />;
+export default NavDivider;
diff --git a/client/src/components/NavBar/components/NavDivider/style.ts b/client/src/components/NavBar/components/NavDivider/style.ts
@@ -0,0 +1,12 @@
+import { Divider } from "@material-ui/core";
+import { CommonThemeProps, getColors } from "czifui";
+import styled from "@emotion/styled";
+
+const gray500 = (props: CommonThemeProps) => getColors(props)?.gray[500];
+
+export const NavDivider = styled(Divider)`
+  background-color: ${gray500};
+  border: none;
+  width: 1px;
+  height: inherit;
+`;
diff --git a/client/src/components/NavBar/index.tsx b/client/src/components/NavBar/index.tsx
@@ -7,11 +7,14 @@ import { EVENTS } from "../../analytics/events";
 import { ROUTES } from "./routes";
 import Icon from "../icon/icon";
 import { Left, LinkWrapper, MainWrapper, Nav, Right, Wrapper } from "./style";
+import NavDivider from "./components/NavDivider";
 
 function handleMenuClick() {
   track(EVENTS.EXPLORER_MENU_BUTTON_CLICKED);
 }
 
+const CENSUS_LINK = "https://cellxgene-census.readthedocs.io/en/latest";
+
 interface HeaderProps {
   tosURL?: string;
   privacyURL?: string;
@@ -72,6 +75,17 @@ const Header = (props: HeaderProps) => {
                 onClick={handleWMGClick}
               />
             </LinkWrapper>
+            <NavDivider />
+            <LinkWrapper>
+              <AnchorButton
+                href={CENSUS_LINK}
+                minimal
+                onClick={handleCensusClick}
+                rel="noopener"
+                target="_self"
+                text="Census"
+              />
+            </LinkWrapper>
           </Nav>
         </Left>
         <Right>
@@ -149,6 +163,9 @@ const Header = (props: HeaderProps) => {
   function handleCollectionsClick(): void {
     track(EVENTS.COLLECTIONS_CLICK_NAV);
   }
+  function handleCensusClick(): void {
+    track(EVENTS.CENSUS_CLICK_NAV);
+  }
   function handleDocumentationClick(): void {
     track(EVENTS.DOCUMENTATION_CLICK_NAV);
   }