Skip to content

Commit

Permalink
[OPIK-706] simplify home page (#1063)
Browse files Browse the repository at this point in the history 
Co-authored-by: Yaroslav Boiko <[email protected]>
  • Loading branch information
@awkoy
awkoy and Yaroslav Boiko authored Jan 17, 2025
1 parent 17b6cb6 commit fd48d17
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 123 deletions.
37 changes: 12 additions & 25 deletions apps/opik-frontend/src/components/pages/HomePage/EvaluationSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand Down
116 changes: 44 additions & 72 deletions apps/opik-frontend/src/components/pages/HomePage/GetStartedSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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">
Expand All @@ -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>
);
};
Expand Down
1 change: 0 additions & 1 deletion apps/opik-frontend/src/components/pages/HomePage/HomePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ const HomePage = () => {
</div>
<GetStartedSection />
<ObservabilitySection />
<div className="h-6"></div>
<EvaluationSection />
</div>
);
Expand Down
37 changes: 12 additions & 25 deletions apps/opik-frontend/src/components/pages/HomePage/ObservabilitySection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";

Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand Down

0 comments on commit fd48d17

Please sign in to comment.