From be125ef58f9eda88fb9390f01bed33fd66b8194c Mon Sep 17 00:00:00 2001 From: Kavin Valli Date: Thu, 12 Dec 2024 15:35:20 -0500 Subject: [PATCH] fix experiments add header button (#3048) --- .../shared/themed/table/themedTable.tsx | 154 ++++----- .../experiments/table/AddColumnDialog.tsx | 42 +-- .../experiments/table/AddColumnHeader.tsx | 33 +- .../experiments/table/ExperimentTable.tsx | 195 +++++------ .../components/tableElementsRenderer.tsx | 304 ++++++++---------- .../table/scores/ScoresEvaluatorsConfig.tsx | 52 +-- .../templates/prompts/id/promptIdPage.tsx | 78 ++--- .../templates/prompts/id/promptPlayground.tsx | 71 ++-- .../sessions/sessionId/Tree/RequestNode.tsx | 113 +++---- .../sessions/sessionId/Tree/Tree.tsx | 54 ++-- 10 files changed, 456 insertions(+), 640 deletions(-) diff --git a/web/components/shared/themed/table/themedTable.tsx b/web/components/shared/themed/table/themedTable.tsx index 647e9c80fc..5698242360 100644 --- a/web/components/shared/themed/table/themedTable.tsx +++ b/web/components/shared/themed/table/themedTable.tsx @@ -38,7 +38,6 @@ import { import useOnboardingContext, { ONBOARDING_STEPS, } from "@/components/layout/onboardingContext"; -import { OnboardingPopover } from "@/components/templates/onboarding/OnboardingPopover"; import { useRouter, useSearchParams } from "next/navigation"; import { RequestViews } from "./RequestViews"; @@ -373,85 +372,73 @@ export default function ThemedTable( {rows.map((row, index) => ( - { + { handleRowSelect(row.original, index); - }, - align: "start", - alignOffset: 10, - }} + }) + } > - { - handleRowSelect(row.original, index); - }) - } - > - {showCheckboxes && ( - - {}} // Handle individual row selection - className="text-slate-700 dark:text-slate-400" - /> - - )} - {row.getVisibleCells().map((cell, i) => ( - - {dataLoading && - (cell.column.id == "requestText" || - cell.column.id == "responseText") ? ( - -   - - ) : ( - flexRender( - cell.column.columnDef.cell, - cell.getContext() - ) + {showCheckboxes && ( + + - ))} - - + onChange={() => {}} // Handle individual row selection + className="text-slate-700 dark:text-slate-400" + /> + + )} + {row.getVisibleCells().map((cell, i) => ( + + {dataLoading && + (cell.column.id == "requestText" || + cell.column.id == "responseText") ? ( + +   + + ) : ( + flexRender( + cell.column.columnDef.cell, + cell.getContext() + ) + )} + + ))} + ))} @@ -463,18 +450,7 @@ export default function ThemedTable( {rightPanel && ( <> {isOnboardingVisible && currentStep === 1 ? ( - { - router.push(`/sessions/${sessionData?.sessionId}`); - }, - align: "center", - side: "left", - }} - > -
{rightPanel}
- +
{rightPanel}
) : ( <> diff --git a/web/components/templates/prompts/experiments/table/AddColumnDialog.tsx b/web/components/templates/prompts/experiments/table/AddColumnDialog.tsx index f4b16442aa..7d5c442dca 100644 --- a/web/components/templates/prompts/experiments/table/AddColumnDialog.tsx +++ b/web/components/templates/prompts/experiments/table/AddColumnDialog.tsx @@ -7,7 +7,6 @@ import { FlaskConicalIcon } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import PromptPlayground from "../../id/promptPlayground"; import { useJawnClient } from "@/lib/clients/jawnHook"; -import { OnboardingPopover } from "@/components/templates/onboarding/OnboardingPopover"; import useOnboardingContext, { ONBOARDING_STEPS, } from "@/components/layout/onboardingContext"; @@ -131,33 +130,24 @@ const AddColumnDialog = ({ } > - -
-
- -

- Add Prompt -

-
-

- Forked from -

- - - {(promptVersionTemplateData?.metadata?.label as string) ?? - `v${promptVersionTemplateData?.major_version}.${promptVersionTemplateData?.minor_version}`} - -
+
+
+ +

+ Add Prompt +

+
+

+ Forked from +

+ + + {(promptVersionTemplateData?.metadata?.label as string) ?? + `v${promptVersionTemplateData?.major_version}.${promptVersionTemplateData?.minor_version}`} +
- +
{promptVersionTemplateData && ( = ({ <> - { - setSelectedForkFromPromptVersionId( - experimentPromptVersions?.[0].id - ); - setIsAddDialogOpen(true); - setIsDropdownOpen(false); - }, - delayMs: 1000, - }} + - + + + Add Column + + diff --git a/web/components/templates/prompts/experiments/table/ExperimentTable.tsx b/web/components/templates/prompts/experiments/table/ExperimentTable.tsx index abcc02c17a..ba6111ddd8 100644 --- a/web/components/templates/prompts/experiments/table/ExperimentTable.tsx +++ b/web/components/templates/prompts/experiments/table/ExperimentTable.tsx @@ -50,7 +50,6 @@ import ScoresEvaluatorsConfig from "./scores/ScoresEvaluatorsConfig"; import ScoresGraphContainer from "./scores/ScoresGraphContainer"; import { useOrg } from "@/components/layout/org/organizationContext"; import { cn } from "@/lib/utils"; -import { OnboardingPopover } from "@/components/templates/onboarding/OnboardingPopover"; import { useJawnClient } from "@/lib/clients/jawnHook"; import useOnboardingContext, { ONBOARDING_STEPS, @@ -595,125 +594,109 @@ export function ExperimentTable({ )} >
- - - - {table.getHeaderGroups().map((headerGroup, i) => ( +
+ + {table.getHeaderGroups().map((headerGroup, i) => ( + + {headerGroup.headers.map((header, index) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} +
+
+
+ {index < headerGroup.headers.length - 1 && ( +
+ )} + {/*
*/} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( - {headerGroup.headers.map((header, index) => ( - ( + - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} -
-
-
- {index < headerGroup.headers.length - 1 && ( -
+ {flexRender( + cell.column.columnDef.cell, + cell.getContext() )} - {/*
*/} - + ))} - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext() - )} - - ))} - - )) - ) : ( - - - No results. - - - )} - -
- + )) + ) : ( + + + No results. + + + )} + +
- - - + + Add row + { return ( - setShowViewPrompt(true)} >
setShowViewPrompt(true)} + className={cn( + "flex flex-col", + Object.keys(promptVersionIdScore.data?.data ?? {}).length + ? "gap-4" + : "gap-0" + )} + onClick={(e) => e.stopPropagation()} > -
e.stopPropagation()} - > - {promptVersionIdScore.data && ( -
- {selectedScoreKey ? ( -
e.stopPropagation()} - > -
-

- {(selectedScoreKey ?? "") - .toString() - .replace("-hcone-bool", "") ?? ""} -

- { - e.stopPropagation(); - queryClient.setQueryData( - ["selectedScoreKey", experimentId], - null - ); - }} - /> -
-
-

- avg:{" "} - { - promptVersionIdScore.data?.data?.[selectedScoreKey] - ?.value - } -

-

- max:{" "} - { - promptVersionIdScore.data?.data?.[selectedScoreKey] - ?.max - } -

-

- min:{" "} - { - promptVersionIdScore.data?.data?.[selectedScoreKey] - ?.min - } -

-
+ {promptVersionIdScore.data && ( +
+ {selectedScoreKey ? ( +
e.stopPropagation()} + > +
+

+ {(selectedScoreKey ?? "") + .toString() + .replace("-hcone-bool", "") ?? ""} +

+ { + e.stopPropagation(); + queryClient.setQueryData( + ["selectedScoreKey", experimentId], + null + ); + }} + />
- ) : ( - Object.entries( - ( - promptVersionIdScore.data as { - data: Record; +
+

+ avg:{" "} + { + promptVersionIdScore.data?.data?.[selectedScoreKey] + ?.value + } +

+

+ max:{" "} + { + promptVersionIdScore.data?.data?.[selectedScoreKey] + ?.max } - )?.data ?? {} - ).map(([key, value]) => { - const color = scoreColorMapping[key]?.color; - return ( - { - e.stopPropagation(); - queryClient.setQueryData( - ["selectedScoreKey", experimentId], - key - ); - }} - > -

- {key?.toString().replace("-hcone-bool", "") ?? ""}:{" "} - {value?.value} - - ); - }) - )} -
- )} -
- {icon(promptTemplate?.model ?? "")} - - {promptTemplate?.model} - +

+

+ min:{" "} + { + promptVersionIdScore.data?.data?.[selectedScoreKey] + ?.min + } +

+
+
+ ) : ( + Object.entries( + ( + promptVersionIdScore.data as { + data: Record; + } + )?.data ?? {} + ).map(([key, value]) => { + const color = scoreColorMapping[key]?.color; + return ( + { + e.stopPropagation(); + queryClient.setQueryData( + ["selectedScoreKey", experimentId], + key + ); + }} + > +
+ {key?.toString().replace("-hcone-bool", "") ?? ""}:{" "} + {value?.value} + + ); + }) + )}
+ )} +
+ {icon(promptTemplate?.model ?? "")} + + {promptTemplate?.model} +
- { - setShowViewPrompt(false); - }} - submitText="Save" - initialModel={promptTemplate?.model ?? ""} - isPromptCreatedFromUi={false} - defaultEditMode={false} - editMode={false} - playgroundMode="experiment-compact" - className="border rounded-md border-slate-200 dark:border-slate-700" - />
- + { + setShowViewPrompt(false); + }} + submitText="Save" + initialModel={promptTemplate?.model ?? ""} + isPromptCreatedFromUi={false} + defaultEditMode={false} + editMode={false} + playgroundMode="experiment-compact" + className="border rounded-md border-slate-200 dark:border-slate-700" + /> +
@@ -356,54 +346,36 @@ const PromptColumnHeader = ({ }) => { const { isOnboardingVisible, currentStep } = useOnboardingContext(); return ( - -
-

- {label} -

- {onForkColumn && onRunColumn && ( - - + + + +
+ )} +
); }; diff --git a/web/components/templates/prompts/experiments/table/scores/ScoresEvaluatorsConfig.tsx b/web/components/templates/prompts/experiments/table/scores/ScoresEvaluatorsConfig.tsx index 3f3e7c3946..6eac1b5389 100644 --- a/web/components/templates/prompts/experiments/table/scores/ScoresEvaluatorsConfig.tsx +++ b/web/components/templates/prompts/experiments/table/scores/ScoresEvaluatorsConfig.tsx @@ -21,7 +21,6 @@ import { cn } from "@/lib/utils"; import useOnboardingContext, { ONBOARDING_STEPS, } from "@/components/layout/onboardingContext"; -import { OnboardingPopover } from "@/components/templates/onboarding/OnboardingPopover"; const ScoresEvaluatorsConfig = memo( ({ experimentId }: { experimentId: string }) => { @@ -159,24 +158,14 @@ const ScoresEvaluatorsConfig = memo( ).length ) .map((evaluator, i) => ( - addEvaluator.mutate(evaluator.id), - }} - setDataWhen={i === 0} - open={i === 0} + - - {evaluator.name} ({evaluator.scoring_type}) - - + {evaluator.name} ({evaluator.scoring_type}) + ))} @@ -247,25 +236,18 @@ const ScoresEvaluatorsConfig = memo( Error running evaluators )} - runEvaluators.mutate(), - }} + - + {runEvaluators.isLoading ? "Running..." : "Run Evaluators"} + {runEvaluators.isLoading && ( + + )} +
diff --git a/web/components/templates/prompts/id/promptIdPage.tsx b/web/components/templates/prompts/id/promptIdPage.tsx index a06a19c1ad..683789d1bf 100644 --- a/web/components/templates/prompts/id/promptIdPage.tsx +++ b/web/components/templates/prompts/id/promptIdPage.tsx @@ -79,7 +79,6 @@ import { cn } from "@/lib/utils"; import useOnboardingContext, { ONBOARDING_STEPS, } from "@/components/layout/onboardingContext"; -import { OnboardingPopover } from "../../onboarding/OnboardingPopover"; interface PromptIdPageProps { id: string; @@ -657,30 +656,21 @@ const PromptIdPage = (props: PromptIdPageProps) => {
- -
- { - await createSubversion(history, model); - }} - submitText="Test" - initialModel={model} - isPromptCreatedFromUi={ - prompt?.metadata?.createdFromUi as boolean | undefined - } - className="border-y border-slate-200 dark:border-slate-700" - /> -
- +
+ { + await createSubversion(history, model); + }} + submitText="Test" + initialModel={model} + isPromptCreatedFromUi={ + prompt?.metadata?.createdFromUi as boolean | undefined + } + className="border-y border-slate-200 dark:border-slate-700" + /> +
{ - { + + startExperiment( promptVersion.id, promptVersion.helicone_template - ); - }, - align: "end", - side: "bottom", - sideOffset: 80, - alignOffset: -10, - }} - triggerAsChild={false} - > - - - startExperiment( - promptVersion.id, - promptVersion.helicone_template - ) - } - > - - Experiment - - - + ) + } + > + + Experiment + + ) : ( <> diff --git a/web/components/templates/prompts/id/promptPlayground.tsx b/web/components/templates/prompts/id/promptPlayground.tsx index 5f68800f62..abb678c357 100644 --- a/web/components/templates/prompts/id/promptPlayground.tsx +++ b/web/components/templates/prompts/id/promptPlayground.tsx @@ -20,7 +20,6 @@ import { getResponseMessage, } from "../../requests/chatComponent/messageUtils"; import { cn } from "@/lib/utils"; -import { OnboardingPopover } from "../../onboarding/OnboardingPopover"; export type Input = { id: string; @@ -338,47 +337,37 @@ const PromptPlayground: React.FC = ({ Add Message
- { - onSubmit && onSubmit(currentChat, selectedModel || ""); - }, - }} - modal={true} - > -
-
Model
- + + + + + {MODEL_LIST.map((model) => ( + + {model.label} + + ))} + + + {playgroundMode === "prompt" && ( + - )} -
- + Save prompt + + )} +
)}
diff --git a/web/components/templates/sessions/sessionId/Tree/RequestNode.tsx b/web/components/templates/sessions/sessionId/Tree/RequestNode.tsx index c82f3b27cc..3817ba2167 100644 --- a/web/components/templates/sessions/sessionId/Tree/RequestNode.tsx +++ b/web/components/templates/sessions/sessionId/Tree/RequestNode.tsx @@ -8,7 +8,6 @@ import { TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; -import { OnboardingPopover } from "@/components/templates/onboarding/OnboardingPopover"; import { useRouter } from "next/navigation"; import { useQuery } from "@tanstack/react-query"; import { useOrg } from "@/components/layout/org/organizationContext"; @@ -100,71 +99,57 @@ export function RequestNode(props: { : "LLM"; return ( - { - router.push(`/prompts/${promptData.data?.id}`); - }, - align: "start", - side: "right", - className: "sm:max-w-2xl", - }} - triggerAsChild={false} +
+ node.children + ? setCloseChildren(!closeChildren) + : setSelectedRequestId(node.trace?.request_id ?? "") + } > -
- node.children - ? setCloseChildren(!closeChildren) - : setSelectedRequestId(node.trace?.request_id ?? "") - } - > - - -
- {type} -
- - -
- {label ?? NAME_FOR[type as keyof typeof NAME_FOR](node)} -
- - {isTruncated && ( - - {node.trace?.request.model} - - )} - - - {isRequestSingleChild ? "" : `(${node.duration})`} - - - - {node.trace?.request.status && ( - + + +
+ {type} +
+ + +
+ {label ?? NAME_FOR[type as keyof typeof NAME_FOR](node)} +
+ + {isTruncated && ( + + {node.trace?.request.model} + )} - + + + {isRequestSingleChild ? "" : `(${node.duration})`} + + + + {node.trace?.request.status && ( + + )} -
- + +
); } diff --git a/web/components/templates/sessions/sessionId/Tree/Tree.tsx b/web/components/templates/sessions/sessionId/Tree/Tree.tsx index 1d4038fe9b..c4447b20ab 100644 --- a/web/components/templates/sessions/sessionId/Tree/Tree.tsx +++ b/web/components/templates/sessions/sessionId/Tree/Tree.tsx @@ -12,7 +12,6 @@ import { TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; -import { OnboardingPopover } from "@/components/templates/onboarding/OnboardingPopover"; export interface TreeNodeProps { node: TreeNodeData; @@ -209,40 +208,25 @@ export const Tree: React.FC = ({ sessionId, }) => { return ( - { - selectedRequestIdDispatch[1]( - onBoardingRequestTrace?.request_id ?? "" - ); - }, - }} +
-
- {data.children && - data.children.map((child, index) => ( - - ))} -
- + {data.children && + data.children.map((child, index) => ( + + ))} +
); };