feat: add parameters in run config ui (#86)

empirical-run · Apr 4, 2024 · ec6e494 · ec6e494
1 parent 448fd46
commit ec6e494
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 29 deletions.
diff --git a/.changeset/tidy-wombats-wait.md b/.changeset/tidy-wombats-wait.md
@@ -0,0 +1,5 @@
+---
+"web": minor
+---
+
+feat: add parameters in run config ui
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -56,7 +56,7 @@ export default function Page(): JSX.Element {
           <div className="flex bg-zinc-900 sticky top-[-1px] z-20 min-w-fit">
             <RunColumnHeaders
               showPrompt={(run: RunCompletion) =>
-                showRunDetails(activeRun ? undefined : run)
+                showRunDetails(activeRun?.id === run.id ? undefined : run)
               }
               headers={tableHeaders}
             />

diff --git a/apps/web/components/run-completion-header.tsx b/apps/web/components/run-completion-header.tsx
@@ -95,31 +95,35 @@ export const RunColumnHeaders = ({
                 #{header.runResult?.id}
               </Badge>
             </section>
-            {header.runResult?.run_config.type === "model" && (
-              <Button
-                variant={"ghost"}
-                onClick={() => showPrompt?.(header.runResult!)}
-                className="self-end"
-                size={"xs"}
-              >
-                <span>{header.active ? "Hide" : "Show"} prompt</span>
-              </Button>
-            )}
+            <Button
+              variant={"secondary"}
+              onClick={() => showPrompt?.(header.runResult!)}
+              className="self-end"
+              size={"xs"}
+            >
+              <span>{header.active ? "Hide" : "Show"} config</span>
+            </Button>
           </section>
-          <Separator orientation="horizontal" className={`${overlayBg}`} />
+
           {header.runResult?.stats?.scores &&
             header.runResult?.stats?.scores.length > 0 && (
-              <section className="flex flex-row space-x-2 text-muted-foreground items-center mx-4 my-2 justify-end">
-                <section className="flex flex-row text-xs gap-1 items-center">
-                  {(header.runResult?.stats?.scores || []).map((s) => (
-                    <>
-                      <section className="flex flex-row gap-1 items-center">
-                        <ScoreBadge title={s.name} score={s.avgScore} />
-                      </section>
-                    </>
-                  ))}
+              <>
+                <Separator
+                  orientation="horizontal"
+                  className={`${overlayBg}`}
+                />
+                <section className="flex flex-row space-x-2 text-muted-foreground items-center mx-4 my-2 justify-end">
+                  <section className="flex flex-row text-xs gap-1 items-center">
+                    {(header.runResult?.stats?.scores || []).map((s) => (
+                      <>
+                        <section className="flex flex-row gap-1 items-center">
+                          <ScoreBadge title={s.name} score={s.avgScore} />
+                        </section>
+                      </>
+                    ))}
+                  </section>
                 </section>
-              </section>
+              </>
             )}
         </section>
       </div>

diff --git a/apps/web/components/run-details.tsx b/apps/web/components/run-details.tsx
@@ -39,21 +39,35 @@ export const RunDetails = ({
       <CardContent>
         <Tabs defaultValue="prompt">
           <TabsList className="w-fit mb-4 rounded-sm">
-            <TabsTrigger value="prompt" className="text-xs rounded-sm">
-              Prompt template
+            {runResult.run_config.type === "model" && (
+              <TabsTrigger value="prompt" className="text-xs rounded-sm">
+                Prompt template
+              </TabsTrigger>
+            )}
+            <TabsTrigger value="parameters" className="text-xs rounded-sm">
+              Parameters
             </TabsTrigger>
           </TabsList>
-          <TabsContent value="prompt">
-            {runResult.run_config.type === "model" && (
+          {runResult.run_config.type === "model" && (
+            <TabsContent value="prompt">
               <CodeViewer
                 value={runResult.run_config.prompt as string}
                 language="prompt"
                 readOnly
               />
-            )}
+            </TabsContent>
+          )}
+          <TabsContent value="parameters">
+            <CodeViewer
+              value={JSON.stringify(
+                runResult.run_config.parameters || "",
+                null,
+                2,
+              )}
+              language="json"
+              readOnly
+            />
           </TabsContent>
-          <TabsContent value="configuration" />
-          <TabsContent value="tools" />
         </Tabs>
       </CardContent>
     </Card>