feat: move breadcrumb up into nav

app/src/App.tsx

@@ -56,7 +56,7 @@ export function AppRoot() {
       <ThemeProvider theme={theme}>
         <RelayEnvironmentProvider environment={RelayEnvironment}>
           <GlobalStyles />
-          <Suspense fallback={"Loading..."}>
+          <Suspense>
             <App preloadedQuery={preloadedQuery} />
           </Suspense>
         </RelayEnvironmentProvider>

app/src/Routes.tsx

@@ -2,16 +2,26 @@ import React from "react";
 import { Route, createRoutesFromElements, RouterProvider } from "react-router";
 import { Home, Embedding, embeddingLoader, Layout } from "./pages";
 import { createBrowserRouter } from "react-router-dom";
+import { EmbeddingLoaderQuery$data } from "./pages/__generated__/EmbeddingLoaderQuery.graphql";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route path="/" element={<Layout />}>
+    <Route path="/" element={<Layout />} handle={{ crumb: () => "Home" }}>
       <Route index element={<Home />} />
-      <Route
-        path="/embeddings/:embeddingDimensionId"
-        element={<Embedding />}
-        loader={embeddingLoader}
-      />
+      <Route path="/embeddings">
+        <Route
+          path="/embeddings/:embeddingDimensionId"
+          element={<Embedding />}
+          loader={embeddingLoader}
+          handle={{
+            // `crumb` is your own abstraction, we decided
+            // to make this one a function so we can pass
+            // the data from the loader to it so that our
+            // breadcrumb is made up of dynamic content
+            crumb: (data: EmbeddingLoaderQuery$data) => data.embedding.name,
+          }}
+        />
+      </Route>
     </Route>
   )
 );

app/src/components/nav/NavBreadcrumb.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Breadcrumbs, Item } from "@arizeai/components";
+import { useMatches, useNavigate } from "react-router";
+
+export type CrumbFn = (data: unknown) => string;
+type Matches = ReturnType<typeof useMatches>;
+type Match = Matches[number];
+type RouteMatchWithCrumb = Match & {
+  handle: {
+    crumb: CrumbFn;
+  };
+};
+
+function isRouteMatchWithCrumb(match: Match): match is RouteMatchWithCrumb {
+  return (
+    typeof match.handle == "object" &&
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    typeof (match.handle as any)?.crumb === "function"
+  );
+}
+
+export function NavBreadcrumb() {
+  const navigate = useNavigate();
+  const matches = useMatches();
+  // Get rid of any matches that don't have handle and crumb
+  const matchesWithCrumb = matches.filter(isRouteMatchWithCrumb);
+
+  console.dir(matchesWithCrumb);
+  return (
+    <Breadcrumbs
+      onAction={(index) => {
+        // Action here is the index of the breadcrumb
+        navigate(matchesWithCrumb[Number(index)].pathname);
+      }}
+    >
+      {matchesWithCrumb.map((match, index) => (
+        <Item key={index}>{match.handle.crumb(match.data)}</Item>
+      ))}
+    </Breadcrumbs>
+  );
+}

app/src/components/nav/Navbar.tsx

@@ -9,24 +9,23 @@ const navCSS = (theme: Theme) => css`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
 `;
 
 const brandCSS = (theme: Theme) =>
   css`
     color: ${theme.textColors.white90};
     font-size: ${theme.typography.sizes.large.fontSize}px;
     text-decoration: none;
-    display: flex;
-    flex-direction: row;
     svg {
       margin-right: ${theme.spacing.margin8}px;
     }
   `;
 
 const BrandSVG = () => (
   <svg
-    width="20"
-    height="20"
+    width="22"
+    height="22"
     viewBox="0 0 27 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -96,7 +95,6 @@ export function Brand() {
   return (
     <Link to="/" css={brandCSS}>
       <BrandSVG />
-      Phoenix
     </Link>
   );
 }

app/src/components/nav/index.tsx

@@ -1 +1,2 @@
 export * from "./Navbar";
+export * from "./NavBreadcrumb";

app/src/pages/Embedding.tsx

@@ -1,19 +1,13 @@
 import React from "react";
 import { fetchQuery, graphql } from "react-relay";
-import { LoaderFunctionArgs, useLoaderData, useNavigate } from "react-router";
+import { LoaderFunctionArgs } from "react-router";
 import RelayEnvironment from "../RelayEnvironment";
-import {
-  EmbeddingLoaderQuery,
-  EmbeddingLoaderQuery$data,
-} from "./__generated__/EmbeddingLoaderQuery.graphql";
-import { Breadcrumbs, Item } from "@arizeai/components";
+import { EmbeddingLoaderQuery } from "./__generated__/EmbeddingLoaderQuery.graphql";
 import { css } from "@emotion/react";
 import { DriftPointCloud } from "../components/canvas";
 import { data as primaryData } from "../data/umapData";
 
 export function Embedding() {
-  const navigate = useNavigate();
-  const data = useLoaderData() as EmbeddingLoaderQuery$data;
   return (
     <main
       css={(theme) => css`
@@ -25,17 +19,6 @@ export function Embedding() {
         }
       `}
     >
-      <Breadcrumbs
-        onAction={(action) => {
-          if (action === "model") {
-            navigate("/");
-          }
-        }}
-      >
-        <Item key="model">Model</Item>
-        <Item>Embeddings</Item>
-        <Item>{data.embedding.name}</Item>
-      </Breadcrumbs>
       <div
         css={css`
           width: 100%;

app/src/pages/Home.tsx

@@ -1,11 +1,5 @@
 import { css } from "@emotion/react";
-import {
-  TabbedCard,
-  Tabs,
-  TabPane,
-  Breadcrumbs,
-  Item,
-} from "@arizeai/components";
+import { TabbedCard, Tabs, TabPane } from "@arizeai/components";
 import { ModelSchemaTable, ModelEmbeddingsTable } from "../components/model";
 import React from "react";
 import { graphql, useLazyLoadQuery } from "react-relay";
@@ -28,16 +22,9 @@ export function Home(_props: HomePageProps) {
       css={(theme) =>
         css`
           margin: ${theme.spacing.margin8}px;
-          nav {
-            margin-bottom: ${theme.spacing.margin8}px;
-          }
         `
       }
     >
-      <Breadcrumbs>
-        <Item key="model">Model</Item>
-        <Item key="overview">Overview</Item>
-      </Breadcrumbs>
       <TabbedCard
         title="Model Schema"
         variant="compact"

app/src/pages/Layout.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Brand, Navbar, GitHubLink } from "../components/nav";
+import { Brand, Navbar, GitHubLink, NavBreadcrumb } from "../components/nav";
 import { Outlet } from "react-router";
 import { css } from "@emotion/react";
 
@@ -10,11 +10,13 @@ const linksCSS = css`
   list-style: none;
   padding-inline-start: 0;
 `;
+
 export function Layout() {
   return (
     <>
       <Navbar>
         <Brand />
+        <NavBreadcrumb />
         <ul css={linksCSS}>
           <li>
             <GitHubLink />