Update: Move Lineage to its own page under Resources in sidebar

Co-Authored-By: Francisco Javier Arceo <arceofrancisco@gmail.com>
feast-dev · franciscojavierarceo · May 4, 2025 · May 3, 2025 · May 4, 2025 · May 4, 2025
commit 3c84796e516c7cb7b261afa9c7da4dcdeee585a6
@@ -23,6 +23,7 @@ import DataSourceInstance from "./pages/data-sources/DataSourceInstance";
 import RootProjectSelectionPage from "./pages/RootProjectSelectionPage";
 import DatasetInstance from "./pages/saved-data-sets/DatasetInstance";
 import PermissionsIndex from "./pages/permissions/Index";
+import LineageIndex from "./pages/lineage/Index";
 import NoProjectGuard from "./components/NoProjectGuard";
 
 import TabsRegistryContext, {
@@ -145,6 +146,7 @@ const FeastUISansProvidersInner = ({
                       element={<DatasetInstance />}
                     />
                     <Route path="permissions/" element={<PermissionsIndex />} />
+                    <Route path="lineage/" element={<LineageIndex />} />
                   </Route>
                 </Route>
                 <Route path="*" element={<NoMatch />} />

@@ -64,20 +64,24 @@ const SideNav = () => {
 
   const sideNav: React.ComponentProps<typeof EuiSideNav>["items"] = [
     {
-      name: (
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <Link to={`${baseUrl}/`} style={{ marginRight: '5px' }}>Home</Link>
-          <span>|</span>
-          <Link to={`${baseUrl}?tab=visualization`} style={{ marginLeft: '5px' }}>Lineage</Link>
-        </div>
-      ),
-      id: htmlIdGenerator("homeLineage")(),
+      name: "Home",
+      id: htmlIdGenerator("home")(),
+      renderItem: (props) => <Link {...props} to={`${baseUrl}/`} />,
       isSelected: useMatchSubpath(`${baseUrl}`),
     },
     {
       name: "Resources",
       id: htmlIdGenerator("resources")(),
       items: [
+        {
+          name: "Lineage",
+          id: htmlIdGenerator("lineage")(),
+          icon: <EuiIcon type="graphApp" />,
+          renderItem: (props) => (
+            <Link {...props} to={`${baseUrl}/lineage`} />
+          ),
+          isSelected: useMatchSubpath(`${baseUrl}/lineage`),
+        },
         {
           name: dataSourcesLabel,
           id: htmlIdGenerator("dataSources")(),

@@ -0,0 +1,54 @@
+import React, { useContext } from "react";
+import {
+  EuiPageTemplate,
+  EuiTitle,
+  EuiSpacer,
+  EuiSkeletonText,
+  EuiEmptyPrompt,
+} from "@elastic/eui";
+
+import { useDocumentTitle } from "../../hooks/useDocumentTitle";
+import useLoadRegistry from "../../queries/useLoadRegistry";
+import RegistryPathContext from "../../contexts/RegistryPathContext";
+import RegistryVisualizationTab from "../../components/RegistryVisualizationTab";
+import { useParams } from "react-router-dom";
+
+const LineagePage = () => {
+  useDocumentTitle("Feast Lineage");
+  const registryUrl = useContext(RegistryPathContext);
+  const { isLoading, isSuccess, isError, data } = useLoadRegistry(registryUrl);
+  const { projectName } = useParams<{ projectName: string }>();
+
+  return (
+    <EuiPageTemplate panelled>
+      <EuiPageTemplate.Section>
+        <EuiTitle size="l">
+          <h1>
+            {isLoading && <EuiSkeletonText lines={1} />}
+            {isSuccess && data?.project && `${data.project} Lineage`}
+          </h1>
+        </EuiTitle>
+        <EuiSpacer />
+
+        {isError && (
+          <EuiEmptyPrompt
+            iconType="alert"
+            color="danger"
+            title={<h2>Error Loading Project Configs</h2>}
+            body={
+              <p>
+                There was an error loading the Project Configurations.
+                Please check that <code>feature_store.yaml</code> file is
+                available and well-formed.
+              </p>
+            }
+          />
+        )}
+
+        {isSuccess && <RegistryVisualizationTab />}
+      </EuiPageTemplate.Section>
+    </EuiPageTemplate>
+  );
+};
+
+export default LineagePage;