From ec6e494a5c26de9c4bf9bd25ff352146ee3994cb Mon Sep 17 00:00:00 2001
From: Saikat Mitra <saikatmitra91@gmail.com>
Date: Thu, 4 Apr 2024 13:15:35 +0530
Subject: [PATCH] feat: add parameters in run config ui (#86)

---
 .changeset/tidy-wombats-wait.md               |  5 ++
 apps/web/app/page.tsx                         |  2 +-
 apps/web/components/run-completion-header.tsx | 46 ++++++++++---------
 apps/web/components/run-details.tsx           | 28 ++++++++---
 4 files changed, 52 insertions(+), 29 deletions(-)
 create mode 100644 .changeset/tidy-wombats-wait.md

diff --git a/.changeset/tidy-wombats-wait.md b/.changeset/tidy-wombats-wait.md
new file mode 100644
index 00000000..8d178f79
--- /dev/null
+++ 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
index 81e7c234..015a3dcc 100644
--- 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
index 59b35e63..64860123 100644
--- 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
index 5806b2c9..ff6efbeb 100644
--- 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>