From d81405172c5e79976f879a84842b35a077e46f89 Mon Sep 17 00:00:00 2001
From: Drew Harris <harrisd@smu.edu>
Date: Fri, 30 Aug 2024 14:10:49 -0500
Subject: [PATCH 1/3] styling: redesign sidebar

---
 .../analytics/src/components/Sidebar.tsx      | 219 ++++++++++--------
 frontends/shared/ui/Tooltip.tsx               |  13 +-
 2 files changed, 127 insertions(+), 105 deletions(-)

diff --git a/frontends/analytics/src/components/Sidebar.tsx b/frontends/analytics/src/components/Sidebar.tsx
index 15b519012f..4e50673b72 100644
--- a/frontends/analytics/src/components/Sidebar.tsx
+++ b/frontends/analytics/src/components/Sidebar.tsx
@@ -1,10 +1,10 @@
-import { Show, useContext, For, createMemo } from "solid-js";
+import { Show, useContext, For } from "solid-js";
 import { OrgContext } from "../contexts/OrgContext";
 import { UserContext } from "../contexts/UserAuthContext";
 import { DatasetAndUsage } from "shared/types";
 import { usePathname } from "../hooks/usePathname";
 import { useBetterNav } from "../utils/useBetterNav";
-import { Select } from "shared/ui";
+import { Select, Tooltip } from "shared/ui";
 import {
   AiOutlineLineChart,
   AiOutlineTable,
@@ -50,6 +50,21 @@ const navbarRoutes = [
   },
 ];
 
+const dashboardURL = import.meta.env.VITE_DASHBOARD_URL as string;
+
+const domainNavbarRoutes = [
+  {
+    href: dashboardURL,
+    label: "Dashboard",
+    icon: TbLayoutDashboard,
+  },
+  {
+    href: "https://docs.trieve.ai/api-reference/",
+    label: "API Docs",
+    icon: AiOutlineApi,
+  },
+];
+
 export const Sidebar = (props: NavbarProps) => {
   const userContext = useContext(UserContext);
   const orgContext = useContext(OrgContext);
@@ -57,8 +72,6 @@ export const Sidebar = (props: NavbarProps) => {
   const pathname = usePathname();
   const navigate = useBetterNav();
 
-  const dashboardURL = import.meta.env.VITE_DASHBOARD_URL as string;
-
   const logOut = () => {
     void fetch(`${apiHost}/auth?redirect_uri=${window.origin}`, {
       method: "DELETE",
@@ -76,118 +89,122 @@ export const Sidebar = (props: NavbarProps) => {
     });
   };
 
-  //Construct a7b64c7f-01ad-43b2-aaaf-c78192ca3d72/start?org=ca34dafa-7826-41b4-9953-cd58617834f1
-  const orgDatasetParams = createMemo(() => {
-    const orgId = orgContext?.selectedOrg().id;
-    const datasetId = props.selectedDataset?.dataset.id;
-    let params = "";
-    if (datasetId) params += datasetId;
-    if (orgId && datasetId) params += `/start?org=${orgId}`;
-    return params;
-  });
-
   return (
-    <div class="relative hidden h-screen flex-col justify-start overflow-y-auto border border-r-neutral-300 bg-neutral-100 p-4 lg:flex">
-      <div class="flex items-center gap-1">
-        <img
-          class="h-12 w-12 cursor-pointer"
-          src="https://cdn.trieve.ai/trieve-logo.png"
-          alt="Logo"
-        />
-        <div>
-          <div class="text-2xl font-semibold leading-none">Trieve</div>
-          <div class="pl-1 text-sm leading-tight text-neutral-600">
-            Analytics
+    <div class="relative hidden h-screen flex-col justify-start overflow-y-auto border border-r-neutral-300 bg-neutral-100 lg:flex">
+      <div class="flex flex-grow flex-col p-4">
+        <div class="flex items-center gap-1">
+          <img
+            class="h-12 w-12 cursor-pointer"
+            src="https://cdn.trieve.ai/trieve-logo.png"
+            alt="Logo"
+          />
+          <div>
+            <div class="text-2xl font-semibold leading-none">Trieve</div>
+            <div class="pl-1 text-sm leading-tight text-neutral-600">
+              Analytics
+            </div>
           </div>
         </div>
-      </div>
-      <div class="border-neutral-20 h-4 border-b" />
-      <div>
-        <Select
-          label={<div class="pt-2 text-sm opacity-60">Organization</div>}
-          class="min-w-[220px]"
-          options={userContext?.user().orgs || []}
-          display={(org) => org.name}
-          onSelected={(e) => {
-            orgContext.selectOrg(e.id);
-          }}
-          selected={orgContext.selectedOrg()}
-          id="dataset-select"
-        />
-      </div>
-      <Show when={props.datasetOptions.length > 0 && props.selectedDataset}>
-        {(selected) => (
+        <div class="border-neutral-20 h-4 border-b" />
+        <div>
           <Select
-            label={<div class="pt-2 text-sm opacity-60">Dataset</div>}
+            label={<div class="pt-2 text-sm opacity-60">Organization</div>}
             class="min-w-[220px]"
-            options={props.datasetOptions}
-            display={(dataset) => dataset.dataset.name}
+            options={userContext?.user().orgs || []}
+            display={(org) => org.name}
             onSelected={(e) => {
-              props.setSelectedDataset(e);
+              orgContext.selectOrg(e.id);
             }}
-            selected={selected()}
+            selected={orgContext.selectedOrg()}
             id="dataset-select"
           />
-        )}
-      </Show>
-      <div class="border-neutral-20 h-4 border-b" />
-      <div class="flex flex-col gap-4 px-2 pt-4">
-        <For each={navbarRoutes}>
-          {(link) => {
-            return (
-              <div
-                role="link"
-                classList={{
-                  "cursor-pointer flex items-center gap-2": true,
-                  "text-purple-900 underline": pathname() === link.href,
-                  "text-black": pathname() !== link.href,
-                }}
-                onClick={() => {
-                  navigate(link.href);
+        </div>
+        <Show when={props.datasetOptions.length > 0 && props.selectedDataset}>
+          {(selected) => (
+            <Select
+              label={<div class="pt-2 text-sm opacity-60">Dataset</div>}
+              class="min-w-[220px]"
+              options={props.datasetOptions}
+              display={(dataset) => dataset.dataset.name}
+              onSelected={(e) => {
+                props.setSelectedDataset(e);
+              }}
+              selected={selected()}
+              id="dataset-select"
+            />
+          )}
+        </Show>
+        <div class="border-neutral-20 h-4 border-b" />
+        <div class="flex flex-grow flex-col justify-between">
+          <div class="flex flex-col gap-4 px-2 pt-4">
+            <For each={navbarRoutes}>
+              {(link) => {
+                return (
+                  <div
+                    role="link"
+                    classList={{
+                      "cursor-pointer flex items-center gap-2": true,
+                      "text-purple-900 underline": pathname() === link.href,
+                      "text-black": pathname() !== link.href,
+                    }}
+                    onClick={() => {
+                      navigate(link.href);
+                    }}
+                  >
+                    {link.icon({ size: "18px" })}
+                    {link.label}
+                  </div>
+                );
+              }}
+            </For>
+          </div>
+          <div>
+            <div class="h-4 border-b border-neutral-400/50" />
+
+            <div class="flex flex-col gap-2 px-2 pt-4">
+              <For each={domainNavbarRoutes}>
+                {(link) => {
+                  return (
+                    <div
+                      role="link"
+                      classList={{
+                        "cursor-pointer flex items-center gap-2": true,
+                        "text-purple-900 underline": pathname() === link.href,
+                        "text-black": pathname() !== link.href,
+                      }}
+                      onClick={() => {
+                        window.open(link.href);
+                      }}
+                    >
+                      {link.icon({ size: "18px" })}
+                      {link.label}
+                    </div>
+                  );
                 }}
-              >
-                {link.icon({ size: "18px" })}
-                {link.label}
-              </div>
-            );
-          }}
-        </For>
-      </div>
-      <div class="absolute bottom-0 left-0 right-0 flex flex-col items-start border-t border-t-neutral-300 bg-neutral-200/50">
-        <div class="flex flex-col px-4 pt-4">
-          <button type="button" class="hover:text-fuchsia-800">
-            <a
-              href={`${dashboardURL}/dashboard/dataset/${orgDatasetParams()}`}
-              class="flex w-full flex-row items-center gap-2"
-              target="_blank"
-            >
-              Dashboard
-              <TbLayoutDashboard class="text-sm" />
-            </a>
-          </button>
-          <button type="button" class="hover:text-fuchsia-800">
-            <a
-              href="https://docs.trieve.ai/api-reference/"
-              class="flex w-full flex-row items-center gap-2"
-              target="_blank"
-            >
-              API Docs
-              <AiOutlineApi class="text-sm" />
-            </a>
-          </button>
+              </For>
+            </div>
+          </div>
         </div>
-        <hr class="my-2 w-full border border-neutral-300" />
-        <div class="px-4 pb-4">
+      </div>
+      <div class="justify-self-end border-t border-t-neutral-300 bg-neutral-200/50">
+        <div class="flex w-full items-center justify-between gap-2 px-6 py-4">
           <div class="flex items-center gap-2">
-            <p>{userContext?.user().email}</p>
             <AiOutlineUser class="h-4 w-4" />
+            <span>{userContext?.user().email}</span>
           </div>
-          <button
-            class="flex items-center gap-2 hover:text-fuchsia-800"
-            onClick={logOut}
+          <Tooltip
+            tooltipClass="text-sm border border-neutral-300 bg-neutral-200 min-w-max"
+            unsetWidth
+            tooltipText="Log Out"
+            direction="top"
           >
-            Log Out <IoLogOutOutline class="inline-block h-4 w-4" />
-          </button>
+            <button
+              class="flex items-center gap-2 justify-self-end p-1 pl-2 opacity-60 hover:text-fuchsia-800"
+              onClick={logOut}
+            >
+              <IoLogOutOutline class="inline-block h-4 w-4" />
+            </button>
+          </Tooltip>
         </div>
       </div>
     </div>
diff --git a/frontends/shared/ui/Tooltip.tsx b/frontends/shared/ui/Tooltip.tsx
index 35c6c04b77..c433549e30 100644
--- a/frontends/shared/ui/Tooltip.tsx
+++ b/frontends/shared/ui/Tooltip.tsx
@@ -4,9 +4,12 @@ import type { JSX } from "solid-js/jsx-runtime";
 export type TooltipDirection = "top" | "bottom" | "left" | "right";
 
 export interface TooltipProps {
-  body: JSX.Element;
+  body?: JSX.Element;
+  children?: JSX.Element;
   tooltipText: string;
   direction?: TooltipDirection;
+  tooltipClass?: string;
+  unsetWidth?: boolean;
 }
 
 export const Tooltip = (props: TooltipProps) => {
@@ -24,13 +27,15 @@ export const Tooltip = (props: TooltipProps) => {
           setShow(false);
         }}
       >
-        {props.body}
+        {props.children ? props.children : props.body}
       </div>
       <Show when={show()}>
         <div
+          class={props.tooltipClass}
           classList={{
-            "absolute z-10 inline-block w-[300px] rounded bg-[#fffee6] p-2 text-center shadow-lg dark:bg-[#fffee6] text-black text-wrap":
+            "absolute z-10 inline-block rounded bg-[#fffee6] p-2 text-center shadow-lg dark:bg-[#fffee6] text-black text-wrap":
               true,
+            "w-[300px]": !props.unsetWidth,
             "bottom-full left-1/2 -translate-x-1/2 translate-y-3":
               direction() === "top",
             "right-full top-1/2 -translate-y-1/2 -translate-x-3":
@@ -38,7 +43,7 @@ export const Tooltip = (props: TooltipProps) => {
             "left-full top-1/2 -translate-y-1/2 translate-x-3":
               direction() === "right",
             "top-full left-1/2 -translate-x-1/2 translate-y-3":
-              direction() === "bottom"
+              direction() === "bottom",
           }}
         >
           {props.tooltipText}

From 75ade4da5c605a1b5895ec341bb657e03e3cfe1b Mon Sep 17 00:00:00 2001
From: Drew Harris <harrisd@smu.edu>
Date: Fri, 30 Aug 2024 14:14:58 -0500
Subject: [PATCH 2/3] feat: add chat and serach playground

---
 frontends/analytics/src/components/Sidebar.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontends/analytics/src/components/Sidebar.tsx b/frontends/analytics/src/components/Sidebar.tsx
index 4e50673b72..72a05ac5e0 100644
--- a/frontends/analytics/src/components/Sidebar.tsx
+++ b/frontends/analytics/src/components/Sidebar.tsx
@@ -63,6 +63,16 @@ const domainNavbarRoutes = [
     label: "API Docs",
     icon: AiOutlineApi,
   },
+  {
+    href: "https://search.trieve.ai",
+    label: "Search Playground",
+    icon: HiOutlineMagnifyingGlass,
+  },
+  {
+    href: "https://chat.trieve.ai",
+    label: "Chat Playground",
+    icon: IoChatboxOutline,
+  },
 ];
 
 export const Sidebar = (props: NavbarProps) => {
@@ -168,7 +178,7 @@ export const Sidebar = (props: NavbarProps) => {
                     <div
                       role="link"
                       classList={{
-                        "cursor-pointer flex items-center gap-2": true,
+                        "cursor-pointer flex items-center text-sm gap-2": true,
                         "text-purple-900 underline": pathname() === link.href,
                         "text-black": pathname() !== link.href,
                       }}
@@ -176,7 +186,7 @@ export const Sidebar = (props: NavbarProps) => {
                         window.open(link.href);
                       }}
                     >
-                      {link.icon({ size: "18px" })}
+                      {link.icon({ size: "14px" })}
                       {link.label}
                     </div>
                   );

From f51381c5615841d9b4561e9d594ed3584eeddc74 Mon Sep 17 00:00:00 2001
From: Drew <drew@Drews-MacBook-Pro.local>
Date: Tue, 3 Sep 2024 10:49:00 -0500
Subject: [PATCH 3/3] feat: use env variables and context for sidebar links

---
 .../analytics/src/components/Sidebar.tsx      | 72 +++++++++++--------
 1 file changed, 41 insertions(+), 31 deletions(-)

diff --git a/frontends/analytics/src/components/Sidebar.tsx b/frontends/analytics/src/components/Sidebar.tsx
index 72a05ac5e0..a3890cf884 100644
--- a/frontends/analytics/src/components/Sidebar.tsx
+++ b/frontends/analytics/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { Show, useContext, For } from "solid-js";
+import { Show, useContext, For, createMemo } from "solid-js";
 import { OrgContext } from "../contexts/OrgContext";
 import { UserContext } from "../contexts/UserAuthContext";
 import { DatasetAndUsage } from "shared/types";
@@ -51,34 +51,44 @@ const navbarRoutes = [
 ];
 
 const dashboardURL = import.meta.env.VITE_DASHBOARD_URL as string;
-
-const domainNavbarRoutes = [
-  {
-    href: dashboardURL,
-    label: "Dashboard",
-    icon: TbLayoutDashboard,
-  },
-  {
-    href: "https://docs.trieve.ai/api-reference/",
-    label: "API Docs",
-    icon: AiOutlineApi,
-  },
-  {
-    href: "https://search.trieve.ai",
-    label: "Search Playground",
-    icon: HiOutlineMagnifyingGlass,
-  },
-  {
-    href: "https://chat.trieve.ai",
-    label: "Chat Playground",
-    icon: IoChatboxOutline,
-  },
-];
+const searchUrl = import.meta.env.VITE_SEARCH_UI_URL as string;
+const chatUrl = import.meta.env.VITE_CHAT_UI_URL as string;
 
 export const Sidebar = (props: NavbarProps) => {
   const userContext = useContext(UserContext);
   const orgContext = useContext(OrgContext);
 
+  const domainNavbarRoutes = createMemo(() => {
+    const domainNavbarRoutes = [
+      {
+        href: `${dashboardURL}/dashboard/dataset/${props.selectedDataset
+          ?.dataset.id}/start?org=${orgContext.selectedOrg().id}`,
+        label: "Dashboard",
+        icon: TbLayoutDashboard,
+      },
+      {
+        href: "https://docs.trieve.ai/api-reference/",
+        label: "API Docs",
+        icon: AiOutlineApi,
+      },
+      {
+        href: `${searchUrl}?organization=${
+          orgContext.selectedOrg().id
+        }&dataset=${props.selectedDataset?.dataset.id}`,
+        label: "Search Playground",
+        icon: HiOutlineMagnifyingGlass,
+      },
+      {
+        href: `${chatUrl}?organization=${
+          orgContext.selectedOrg().id
+        }&dataset=${props.selectedDataset?.dataset.id}`,
+        label: "Chat Playground",
+        icon: IoChatboxOutline,
+      },
+    ];
+    return domainNavbarRoutes;
+  });
+
   const pathname = usePathname();
   const navigate = useBetterNav();
 
@@ -172,23 +182,23 @@ export const Sidebar = (props: NavbarProps) => {
             <div class="h-4 border-b border-neutral-400/50" />
 
             <div class="flex flex-col gap-2 px-2 pt-4">
-              <For each={domainNavbarRoutes}>
+              <For each={domainNavbarRoutes()}>
                 {(link) => {
                   return (
-                    <div
+                    <a
                       role="link"
                       classList={{
-                        "cursor-pointer flex items-center text-sm gap-2": true,
+                        "cursor-pointer flex items-center text-sm gap-2 hover:text-fuchsia-500":
+                          true,
                         "text-purple-900 underline": pathname() === link.href,
                         "text-black": pathname() !== link.href,
                       }}
-                      onClick={() => {
-                        window.open(link.href);
-                      }}
+                      href={link.href}
+                      target="_blank"
                     >
                       {link.icon({ size: "14px" })}
                       {link.label}
-                    </div>
+                    </a>
                   );
                 }}
               </For>