refactor: Header component

src/Viewer.module.css

@@ -1,47 +1,3 @@
-.header {
-  --header-content-height: 24px;
-
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  width: auto;
-  height: fit-content;
-  min-height: var(--header-content-height);
-  padding: 12px 30px;
-  border-bottom: 1px solid var(--color-borders);
-  gap: 10px;
-  position: sticky;
-  background-color: var(--color-background);
-  z-index: 100;
-  top: 0;
-  left: 0;
-}
-
-.header > div {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.headerLeft {
-  gap: 20px;
-}
-
-.header h2 {
-  margin: 0;
-  line-height: normal;
-}
-
-.verticalDivider {
-  height: var(--header-content-height);
-  width: 1px;
-  background-color: var(--color-dividers);
-  display: inline-block;
-}
-
 .mainContent {
   margin: 8px 30px;
 }
@@ -107,7 +63,7 @@
 }
 
 .colorizeCanvas {
-  border: 1px solid var(--color-borders);
+  border-top: 1px solid var(--color-borders);
 }
 
 .canvasPanel .timeControls {

src/Viewer.tsx

@@ -9,9 +9,7 @@ import {
 import { Checkbox, notification, Slider, Tabs } from "antd";
 import { NotificationConfig } from "antd/es/notification/interface";
 import React, { ReactElement, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
-import styled from "styled-components";
 
-import { AicsLogoSVG } from "./assets";
 import { ColorizeCanvas, Dataset, Track } from "./colorizer";
 import {
   DEFAULT_CATEGORICAL_PALETTE_KEY,
@@ -46,6 +44,7 @@ import ColorRampDropdown from "./components/Dropdowns/ColorRampDropdown";
 import HelpDropdown from "./components/Dropdowns/HelpDropdown";
 import SelectionDropdown from "./components/Dropdowns/SelectionDropdown";
 import Export from "./components/Export";
+import { Header, HeaderLogo } from "./components/Header";
 import HoverTooltip from "./components/HoverTooltip";
 import IconButton from "./components/IconButton";
 import LabeledRangeSlider from "./components/LabeledRangeSlider";
@@ -57,18 +56,6 @@ import { FeatureThresholdsTab, PlotTab, ScatterPlotTab, SettingsTab } from "./co
 // TODO: Refactor with styled-components
 import styles from "./Viewer.module.css";
 
-const AicsLogoLink = styled.a`
-  position: relative;
-  width: 180px;
-  height: 46px;
-`;
-
-const StyledAicsLogo = styled(AicsLogoSVG)`
-  left: 0;
-  top: 0;
-  position: absolute;
-`;
-
 function Viewer(): ReactElement {
   // STATE INITIALIZATION /////////////////////////////////////////////////////////
   const theme = useContext(AppThemeContext);
@@ -710,14 +697,8 @@ function Viewer(): ReactElement {
 
       {/* Header bar: Contains dataset, feature, color ramp, and other top-level functionality. */}
       {/* TODO: Split into its own component? */}
-      <div className={styles.header}>
-        <div className={styles.headerLeft}>
-          <AicsLogoLink href="https://www.allencell.org/" rel="noopener noreferrer">
-            <StyledAicsLogo />
-          </AicsLogoLink>
-          <span className={styles.verticalDivider}></span>
-          <h1 style={{ whiteSpace: "nowrap" }}>Timelapse Colorizer</h1>
-        </div>
+      <Header>
+        <HeaderLogo />
         {/* <h3>Dataset Name</h3> */}
         <FlexRowAlignCenter $gap={12}>
           <FlexRowAlignCenter $gap={2}>
@@ -740,7 +721,7 @@ function Viewer(): ReactElement {
           </FlexRowAlignCenter>
           <HelpDropdown />
         </FlexRowAlignCenter>
-      </div>
+      </Header>
 
       {/** Main Content: Contains canvas and plot, ramp controls, time controls, etc. */}
       <div className={styles.mainContent}>

src/components/Header/Header.tsx

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+/**
+ * Top title bar for the app, which will stick to the top of the page.
+ * Child components will be spaced apart evenly.
+ * */
+const Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  width: auto;
+  height: fit-content;
+  min-height: var(--header-content-height);
+  padding: 12px 30px;
+  border-bottom: 1px solid var(--color-borders);
+  gap: 10px;
+  position: sticky;
+  background-color: var(--color-background);
+  z-index: 100;
+  top: 0;
+  left: 0;
+`;
+
+export default Header;

src/components/Header/HeaderLogo.tsx

@@ -0,0 +1,44 @@
+import React, { ReactElement } from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+
+import { AicsLogoSVG } from "../../assets";
+import { FlexRowAlignCenter, VisuallyHidden } from "../../styles/utils";
+
+const AicsLogoLink = styled.a`
+  position: relative;
+  width: 180px;
+  height: 46px;
+`;
+
+const StyledAicsLogo = styled(AicsLogoSVG)`
+  left: 0;
+  top: 0;
+  position: absolute;
+`;
+
+const VerticalDivider = styled.div`
+  height: 24px;
+  width: 1px;
+  background-color: var(--color-dividers);
+  display: inline-block;
+`;
+
+/**
+ * The logo for the header, with links for the
+ * @returns
+ */
+export default function HeaderLogo(): ReactElement {
+  return (
+    <FlexRowAlignCenter $gap={20}>
+      <AicsLogoLink href="https://www.allencell.org/" rel="noopener noreferrer" target="_blank">
+        <StyledAicsLogo title={"https://www.allencell.org"} />
+      </AicsLogoLink>
+      <VerticalDivider />
+      <Link to="/">
+        <h1 style={{ whiteSpace: "nowrap" }}>Timelapse Colorizer</h1>
+        <VisuallyHidden>(go to home page)</VisuallyHidden>
+      </Link>
+    </FlexRowAlignCenter>
+  );
+}

src/components/Header/index.tsx

@@ -0,0 +1,4 @@
+import Header from "./Header";
+import HeaderLogo from "./HeaderLogo";
+
+export { HeaderLogo, Header };

src/main.tsx

@@ -7,8 +7,7 @@ import ErrorPage from "./routes/ErrorPage";
 import Viewer from "./Viewer";
 
 // Set up react router
-// Use HashRouter for GitHub Pages support, so additional paths are routed to
-// the base app instead of trying to open pages that don't exist.
+
 const router = createHashRouter([
   {
     path: "/",

src/routes/ErrorPage.tsx

@@ -4,6 +4,8 @@ import { ErrorResponse, Link, useRouteError } from "react-router-dom";
 
 import { FlexColumnAlignCenter } from "../styles/utils";
 
+import { Header, HeaderLogo } from "../components/Header";
+
 const isErrorResponse = (error: unknown): error is ErrorResponse => {
   return typeof (error as ErrorResponse).status === "number" && typeof (error as ErrorResponse).statusText === "string";
 };
@@ -21,13 +23,18 @@ export default function ErrorPage(): ReactElement {
   }
 
   return (
-    <FlexColumnAlignCenter style={{ width: "100%", padding: "40px" }}>
-      <h1>{errorMessage}</h1>
-      <p>Sorry, something went wrong.</p>
-      <br />
-      <Link to="/">
-        <Button type="primary">Return to homepage</Button>
-      </Link>
-    </FlexColumnAlignCenter>
+    <div>
+      <Header>
+        <HeaderLogo />
+      </Header>
+      <FlexColumnAlignCenter style={{ width: "100%", padding: "40px" }}>
+        <h1>{errorMessage}</h1>
+        <p>Sorry, something went wrong.</p>
+        <br />
+        <Link to="/">
+          <Button type="primary">Return to homepage</Button>
+        </Link>
+      </FlexColumnAlignCenter>
+    </div>
   );
 }