[OPIK-563] Add sections to the sidebar menu (#882)

* [OPIK-563] Add sections to the sidebar menu * fix experiment link on home page
comet-ml · Dec 12, 2024 · b5c8b3a · b5c8b3a
1 parent b7d82d7
commit b5c8b3a
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 40 deletions.
diff --git a/apps/opik-frontend/src/components/layout/PageLayout/PageLayout.tsx b/apps/opik-frontend/src/components/layout/PageLayout/PageLayout.tsx
@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
 import useLocalStorageState from "use-local-storage-state";
 
 const PageLayout = () => {
-  const [expanded = false, setExpanded] =
+  const [expanded = true, setExpanded] =
     useLocalStorageState<boolean>("sidebar-expanded");
 
   return (

diff --git a/apps/opik-frontend/src/components/layout/SideBar/SideBar.tsx b/apps/opik-frontend/src/components/layout/SideBar/SideBar.tsx
@@ -47,53 +47,89 @@ type MenuItem = {
   onClick?: MouseEventHandler<HTMLButtonElement>;
 };
 
-const MAIN_MENU_ITEMS: MenuItem[] = [
+type MenuItemGroup = {
+  id: string;
+  label?: string;
+  items: MenuItem[];
+};
+
+const MAIN_MENU_ITEMS: MenuItemGroup[] = [
   {
     id: "home",
-    path: "/$workspaceName/home",
-    type: MENU_ITEM_TYPE.router,
-    icon: LucideHome,
-    label: "Home",
+    items: [
+      {
+        id: "home",
+        path: "/$workspaceName/home",
+        type: MENU_ITEM_TYPE.router,
+        icon: LucideHome,
+        label: "Home",
+      },
+    ],
   },
   {
-    id: "projects",
-    path: "/$workspaceName/projects",
-    type: MENU_ITEM_TYPE.router,
-    icon: LayoutGrid,
-    label: "Projects",
-    count: "projects",
-  },
-  {
-    id: "prompts",
-    path: "/$workspaceName/prompts",
-    type: MENU_ITEM_TYPE.router,
-    icon: FileTerminal,
-    label: "Prompt library",
-    count: "prompts",
+    id: "observability",
+    label: "Observability",
+    items: [
+      {
+        id: "projects",
+        path: "/$workspaceName/projects",
+        type: MENU_ITEM_TYPE.router,
+        icon: LayoutGrid,
+        label: "Projects",
+        count: "projects",
+      },
+    ],
   },
+
   {
-    id: "datasets",
-    path: "/$workspaceName/datasets",
-    type: MENU_ITEM_TYPE.router,
-    icon: Database,
-    label: "Datasets",
-    count: "datasets",
+    id: "evaluation",
+    label: "Evaluation",
+    items: [
+      {
+        id: "datasets",
+        path: "/$workspaceName/datasets",
+        type: MENU_ITEM_TYPE.router,
+        icon: Database,
+        label: "Datasets",
+        count: "datasets",
+      },
+      {
+        id: "experiments",
+        path: "/$workspaceName/experiments",
+        type: MENU_ITEM_TYPE.router,
+        icon: FlaskConical,
+        label: "Experiments",
+        count: "experiments",
+      },
+    ],
   },
   {
-    id: "experiments",
-    path: "/$workspaceName/experiments",
-    type: MENU_ITEM_TYPE.router,
-    icon: FlaskConical,
-    label: "Experiments",
-    count: "experiments",
+    id: "prompt_engineering",
+    label: "Prompt engineering",
+    items: [
+      {
+        id: "prompts",
+        path: "/$workspaceName/prompts",
+        type: MENU_ITEM_TYPE.router,
+        icon: FileTerminal,
+        label: "Prompt library",
+        count: "prompts",
+      },
+    ],
   },
   {
-    id: "feedback-definitions",
-    path: "/$workspaceName/feedback-definitions",
-    type: MENU_ITEM_TYPE.router,
-    icon: MessageSquare,
-    label: "Feedback definitions",
-    count: "feedbackDefinitions",
+    id: "configuration",
+    label: "Configuration",
+    items: [
+      {
+        id: "feedback-definitions",
+        path: "/$workspaceName/feedback-definitions",
+        type: MENU_ITEM_TYPE.router,
+        icon: MessageSquare,
+        label: "Feedback definitions",
+        count: "feedbackDefinitions",
+      },
+    ],
   },
 ];
 
@@ -330,6 +366,24 @@ const SideBar: React.FunctionComponent<SideBarProps> = ({
     });
   };
 
+  const renderGroups = (groups: MenuItemGroup[]) => {
+    return groups.map((group) => {
+      return (
+        <li key={group.id} className={cn(expanded && "mb-1")}>
+          <div>
+            {group.label && expanded && (
+              <div className="comet-body-s truncate pb-1 pl-2.5 pr-3 pt-3 text-light-slate">
+                {group.label}
+              </div>
+            )}
+
+            <ul>{renderItems(group.items)}</ul>
+          </div>
+        </li>
+      );
+    });
+  };
+
   return (
     <>
       <aside className="comet-sidebar-width h-full border-r transition-all">
@@ -355,7 +409,7 @@ const SideBar: React.FunctionComponent<SideBarProps> = ({
         </div>
         <div className="flex h-[calc(100%-var(--header-height))] flex-col justify-between px-3 py-6">
           <ul className="flex flex-col gap-1">
-            {renderItems(MAIN_MENU_ITEMS)}
+            {renderGroups(MAIN_MENU_ITEMS)}
           </ul>
           <div className="flex flex-col gap-4">
             <Separator />

diff --git a/apps/opik-frontend/src/components/pages/HomePage/EvaluationSection.tsx b/apps/opik-frontend/src/components/pages/HomePage/EvaluationSection.tsx
@@ -33,8 +33,11 @@ export const COLUMNS = convertColumnDataToColumn<Experiment, Experiment>(
       sortable: true,
       customMeta: {
         nameKey: "name",
-        idKey: "id",
+        idKey: "dataset_id",
         resource: RESOURCE_TYPE.experiment,
+        getSearch: (data: Experiment) => ({
+          experiments: [data.id],
+        }),
       },
     },
     {