From fd48d178c3cfb4fc5e4e1aa9f05d70e8b5b73dbb Mon Sep 17 00:00:00 2001
From: Yaroslav Boiko <y.boikodevelop@gmail.com>
Date: Fri, 17 Jan 2025 11:34:13 +0100
Subject: [PATCH] [OPIK-706] simplify home page (#1063)

Co-authored-by: Yaroslav Boiko <yaroslavboiko@ip-192-168-1-16.ec2.internal>
---
 .../pages/HomePage/EvaluationSection.tsx      |  37 ++----
 .../pages/HomePage/GetStartedSection.tsx      | 116 +++++++-----------
 .../components/pages/HomePage/HomePage.tsx    |   1 -
 .../pages/HomePage/ObservabilitySection.tsx   |  37 ++----
 4 files changed, 68 insertions(+), 123 deletions(-)

diff --git a/apps/opik-frontend/src/components/pages/HomePage/EvaluationSection.tsx b/apps/opik-frontend/src/components/pages/HomePage/EvaluationSection.tsx
index e7a0933da4..2d66e7cf6a 100644
--- a/apps/opik-frontend/src/components/pages/HomePage/EvaluationSection.tsx
+++ b/apps/opik-frontend/src/components/pages/HomePage/EvaluationSection.tsx
@@ -3,7 +3,7 @@ import { keepPreviousData } from "@tanstack/react-query";
 import useLocalStorageState from "use-local-storage-state";
 import { ColumnPinningState } from "@tanstack/react-table";
 import { Link } from "@tanstack/react-router";
-import { Book } from "lucide-react";
+import { ArrowRight } from "lucide-react";
 import get from "lodash/get";
 
 import DataTable from "@/components/shared/DataTable/DataTable";
@@ -18,7 +18,6 @@ import { COLUMN_NAME_ID, COLUMN_SELECT_ID, COLUMN_TYPE } from "@/types/shared";
 import { RESOURCE_TYPE } from "@/components/shared/ResourceLink/ResourceLink";
 import { Experiment } from "@/types/datasets";
 import { convertColumnDataToColumn } from "@/lib/table";
-import { buildDocsUrl } from "@/lib/utils";
 import { formatDate } from "@/lib/date";
 
 const COLUMNS_WIDTH_KEY = "home-experiments-columns-width";
@@ -138,29 +137,10 @@ const EvaluationSection: React.FunctionComponent = () => {
   }
 
   return (
-    <div className="pb-4">
-      <div className="flex items-center justify-between gap-8 pb-4 pt-2">
-        <div className="flex items-center gap-2">
-          <h2 className="comet-body-accented truncate break-words">
-            Evaluation
-          </h2>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" asChild>
-            <a
-              href={buildDocsUrl("/evaluation/concepts")}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <Book className="mr-2 size-4 shrink-0" />
-              Learn more
-            </a>
-          </Button>
-          <Link to="/$workspaceName/experiments" params={{ workspaceName }}>
-            <Button variant="outline">View all experiments</Button>
-          </Link>
-        </div>
-      </div>
+    <div className="pb-4 pt-2">
+      <h2 className="comet-body-accented truncate break-words pb-3">
+        Evaluation
+      </h2>
       <DataTable
         columns={COLUMNS}
         data={experiments}
@@ -174,6 +154,13 @@ const EvaluationSection: React.FunctionComponent = () => {
           </DataTableNoData>
         }
       />
+      <div className="flex justify-end pt-1">
+        <Link to="/$workspaceName/experiments" params={{ workspaceName }}>
+          <Button variant="ghost" className="flex items-center gap-1 pr-0">
+            All experiments <ArrowRight className="size-4" />
+          </Button>
+        </Link>
+      </div>
       <AddExperimentDialog
         key={resetDialogKeyRef.current}
         open={openDialog}
diff --git a/apps/opik-frontend/src/components/pages/HomePage/GetStartedSection.tsx b/apps/opik-frontend/src/components/pages/HomePage/GetStartedSection.tsx
index 392a43f6d6..bee9ac9b9f 100644
--- a/apps/opik-frontend/src/components/pages/HomePage/GetStartedSection.tsx
+++ b/apps/opik-frontend/src/components/pages/HomePage/GetStartedSection.tsx
@@ -1,15 +1,11 @@
-import React from "react";
-import { ArrowRight, MessageCircle, MousePointer, X } from "lucide-react";
+import React, { useState } from "react";
+import { FlaskConical, InspectionPanel, MousePointer, X } from "lucide-react";
 import useLocalStorageState from "use-local-storage-state";
-import { keepPreviousData } from "@tanstack/react-query";
-
-import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Link } from "@tanstack/react-router";
 import useAppStore from "@/store/AppStore";
-import useDemoProject from "@/api/projects/useDemoProject";
 import { buildDocsUrl } from "@/lib/utils";
+import AddExperimentDialog from "../ExperimentsShared/AddExperimentDialog";
+import { Link } from "@tanstack/react-router";
 
 const GetStartedSection = () => {
   const workspaceName = useAppStore((state) => state.activeWorkspaceName);
@@ -19,23 +15,19 @@ const GetStartedSection = () => {
       defaultValue: false,
     },
   );
+  const [isNewExperimentDialogOpened, setIsNewExperimentDialogOpened] =
+    useState<boolean>(false);
 
-  const { data: project, isPending } = useDemoProject(
-    { workspaceName },
-    {
-      enabled: !hide,
-      placeholderData: keepPreviousData,
-    },
-  );
+  const openNewExperimentDialog = () => setIsNewExperimentDialogOpened(true);
 
-  if (hide || isPending) return null;
+  if (hide) return null;
 
   return (
     <div>
       <div className="flex items-center justify-between gap-8 pb-4 pt-2">
         <div className="flex items-center gap-2">
           <h2 className="comet-body-accented truncate break-words">
-            Get started with Opik
+            Get started
           </h2>
         </div>
         <div className="flex items-center gap-2">
@@ -49,62 +41,42 @@ const GetStartedSection = () => {
         </div>
       </div>
       <div className="flex gap-x-4">
-        {project && (
-          <Alert>
-            <MousePointer className="size-4" />
-            <AlertTitle>Explore our demo project</AlertTitle>
-            <AlertDescription>
-              Browse our curated examples to draw inspiration for your own LLM
-              projects.
-            </AlertDescription>
-            <Link
-              to="/$workspaceName/projects/$projectId"
-              params={{ workspaceName, projectId: project.id }}
-            >
-              <Button variant="ghost" size="sm" className="-ml-2">
-                Go to demo project
-                <ArrowRight className="ml-1 size-4 shrink-0" />
-              </Button>
-            </Link>
-          </Alert>
-        )}
-        <Alert>
-          <MessageCircle className="size-4" />
-          <AlertTitle>Log a trace</AlertTitle>
-          <AlertDescription>
-            The first step in integrating Opik with your codebase is to track
-            your LLM calls.
-          </AlertDescription>
-          <Button variant="ghost" size="sm" asChild>
-            <a
-              href={buildDocsUrl("/tracing/log_traces")}
-              target="_blank"
-              rel="noreferrer"
-            >
-              Start logging traces
-              <ArrowRight className="ml-1 size-4 shrink-0" />
-            </a>
-          </Button>
-        </Alert>
-        <Alert>
-          <MessageCircle className="size-4" />
-          <AlertTitle>Run an experiment</AlertTitle>
-          <AlertDescription>
-            An experiment is a single evaluation of your LLM application.
-          </AlertDescription>
-          <Button variant="ghost" size="sm" asChild>
-            <a
-              href={buildDocsUrl("/evaluation/evaluate_your_llm")}
-              target="_blank"
-              rel="noreferrer"
-            >
-              Start running experiments
-              <ArrowRight className="ml-1 size-4 shrink-0" />
-            </a>
-          </Button>
-        </Alert>
+        <a
+          href={buildDocsUrl("/tracing/log_traces")}
+          target="_blank"
+          rel="noreferrer"
+          className="flex w-full max-w-[300px] cursor-pointer items-center gap-3 rounded-md border bg-white p-4 transition-shadow hover:shadow-md"
+        >
+          <div className="flex size-[24px] items-center justify-center rounded bg-[#DAFBF0] ">
+            <InspectionPanel className="size-3.5 text-[#295747]" />
+          </div>
+          <div className="comet-body-s">Log a trace</div>
+        </a>
+        <div
+          onClick={openNewExperimentDialog}
+          className="flex w-full max-w-[300px] cursor-pointer items-center gap-3 rounded-md border bg-white p-4 transition-shadow hover:shadow-md"
+        >
+          <div className="flex size-[24px] items-center justify-center rounded bg-[#FDE2F6] ">
+            <MousePointer className="size-3.5 text-[#72275F]" />
+          </div>
+          <div className="comet-body-s">Run an experiment</div>
+        </div>
+        <Link
+          className="flex w-full max-w-[300px] cursor-pointer items-center gap-3 rounded-md border bg-white p-4 transition-shadow hover:shadow-md"
+          to={"/$workspaceName/playground"}
+          params={{ workspaceName }}
+        >
+          <div className="flex size-[24px] items-center justify-center rounded bg-[#EFE2FD] ">
+            <FlaskConical className="size-3.5 text-[#491B7E]" />
+          </div>
+          <div className="comet-body-s">Try out playground</div>
+        </Link>
+
+        <AddExperimentDialog
+          open={isNewExperimentDialogOpened}
+          setOpen={setIsNewExperimentDialogOpened}
+        />
       </div>
-      <Separator className="my-6" />
     </div>
   );
 };
diff --git a/apps/opik-frontend/src/components/pages/HomePage/HomePage.tsx b/apps/opik-frontend/src/components/pages/HomePage/HomePage.tsx
index 5db0bfb617..1e50be86c8 100644
--- a/apps/opik-frontend/src/components/pages/HomePage/HomePage.tsx
+++ b/apps/opik-frontend/src/components/pages/HomePage/HomePage.tsx
@@ -17,7 +17,6 @@ const HomePage = () => {
       </div>
       <GetStartedSection />
       <ObservabilitySection />
-      <div className="h-6"></div>
       <EvaluationSection />
     </div>
   );
diff --git a/apps/opik-frontend/src/components/pages/HomePage/ObservabilitySection.tsx b/apps/opik-frontend/src/components/pages/HomePage/ObservabilitySection.tsx
index 610d75daef..90047045a0 100644
--- a/apps/opik-frontend/src/components/pages/HomePage/ObservabilitySection.tsx
+++ b/apps/opik-frontend/src/components/pages/HomePage/ObservabilitySection.tsx
@@ -3,7 +3,7 @@ import { keepPreviousData } from "@tanstack/react-query";
 import useLocalStorageState from "use-local-storage-state";
 import { ColumnPinningState } from "@tanstack/react-table";
 import { Link } from "@tanstack/react-router";
-import { Book } from "lucide-react";
+import { ArrowRight } from "lucide-react";
 
 import DataTable from "@/components/shared/DataTable/DataTable";
 import DataTableNoData from "@/components/shared/DataTableNoData/DataTableNoData";
@@ -18,7 +18,6 @@ import { RESOURCE_TYPE } from "@/components/shared/ResourceLink/ResourceLink";
 import { Project } from "@/types/projects";
 import { formatDate } from "@/lib/date";
 import { convertColumnDataToColumn } from "@/lib/table";
-import { buildDocsUrl } from "@/lib/utils";
 
 const COLUMNS_WIDTH_KEY = "home-projects-columns-width";
 
@@ -111,29 +110,10 @@ const ObservabilitySection: React.FunctionComponent = () => {
   }
 
   return (
-    <div className="pb-4">
-      <div className="flex items-center justify-between gap-8 pb-4 pt-2">
-        <div className="flex items-center gap-2">
-          <h2 className="comet-body-accented truncate break-words">
-            Observability
-          </h2>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" asChild>
-            <a
-              href={buildDocsUrl("/tracing/log_traces")}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <Book className="mr-2 size-4 shrink-0" />
-              Learn more
-            </a>
-          </Button>
-          <Link to="/$workspaceName/projects" params={{ workspaceName }}>
-            <Button variant="outline">View all projects</Button>
-          </Link>
-        </div>
-      </div>
+    <div className="pt-12">
+      <h2 className="comet-body-accented truncate break-words pb-3">
+        Observability
+      </h2>
       <DataTable
         columns={COLUMNS}
         data={projects}
@@ -147,6 +127,13 @@ const ObservabilitySection: React.FunctionComponent = () => {
           </DataTableNoData>
         }
       />
+      <div className="flex justify-end pt-1">
+        <Link to="/$workspaceName/projects" params={{ workspaceName }}>
+          <Button variant="ghost" className="flex items-center gap-1 pr-0">
+            All projects <ArrowRight className="size-4" />
+          </Button>
+        </Link>
+      </div>
       <AddEditProjectDialog
         key={resetDialogKeyRef.current}
         open={openDialog}