Made sidebar work properly for traces

apps/evalite-ui/app/routes/eval.$name.trace.$index.tsx

@@ -5,7 +5,10 @@ import {
   type ClientLoaderFunctionArgs,
 } from "@remix-run/react";
 import { SidebarCloseIcon } from "lucide-react";
+import type React from "react";
+import { useContext } from "react";
 import { DisplayInput } from "~/components/display-input";
+import { getScoreState, Score } from "~/components/score";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -18,17 +21,18 @@ import {
   SidebarContent,
   SidebarHeader,
 } from "~/components/ui/sidebar";
+import { TestServerStateContext } from "~/use-subscribe-to-socket";
 
 const SidebarSection = ({
   title,
-  input,
+  children,
 }: {
   title: string;
-  input: unknown;
+  children: React.ReactNode;
 }) => (
   <div className="text-sm">
     <h2 className="font-semibold text-base mb-1">{title}</h2>
-    <DisplayInput shouldTruncateText={false} input={input}></DisplayInput>
+    {children}
   </div>
 );
 
@@ -38,51 +42,89 @@ export const clientLoader = async (args: ClientLoaderFunctionArgs) => {
     resultIndex: args.params.index!,
   });
 
-  return {
-    result,
-  };
+  return result;
 };
 
 export default function Page() {
-  const { result } = useLoaderData<typeof clientLoader>();
+  const { result, prevResult, filepath } = useLoaderData<typeof clientLoader>();
+
+  const serverState = useContext(TestServerStateContext);
+
+  const isRunning =
+    serverState.state.type === "running" &&
+    serverState.state.filepaths.has(filepath);
 
   return (
-    <Sidebar
-      variant="inset"
-      side="right"
-      className="sticky hidden top-0 h-svh w-[400px] border-l"
-    >
+    <>
       <SidebarHeader>
         <div className="flex items-center gap-3">
           <Button size={"icon"} variant="ghost" asChild>
             <Link to={"../../"} preventScrollReset>
-              <SidebarCloseIcon className="size-5" />
+              <SidebarCloseIcon className="size-5 rotate-180" />
             </Link>
           </Button>
           <div>
             <span className="text-primary block font-semibold mb-1">Trace</span>
             <Breadcrumb>
               <BreadcrumbList>
+                <BreadcrumbItem>
+                  <Score
+                    isRunning={isRunning}
+                    score={result.score}
+                    state={getScoreState(result.score, prevResult?.score)}
+                  />
+                </BreadcrumbItem>
+                <Separator orientation="vertical" className="mx-1 h-4" />
                 <BreadcrumbItem>{result.duration}ms</BreadcrumbItem>
-                {/* <Separator orientation="vertical" className="mx-1 h-4" />
-              <BreadcrumbItem>Hello</BreadcrumbItem> */}
               </BreadcrumbList>
             </Breadcrumb>
           </div>
         </div>
         <Separator className="mt-2" />
       </SidebarHeader>
       <SidebarContent className="p-2">
-        <SidebarSection title="Input" input={result.input} />
+        <SidebarSection title="Input">
+          <DisplayInput
+            shouldTruncateText={false}
+            input={result.input}
+          ></DisplayInput>
+        </SidebarSection>
         <Separator className="my-2" />
         {result.expected ? (
           <>
-            <SidebarSection title="Expected" input={result.expected} />
+            <SidebarSection title="Expected">
+              <DisplayInput
+                shouldTruncateText={false}
+                input={result.expected}
+              ></DisplayInput>
+            </SidebarSection>
             <Separator className="my-2" />
           </>
         ) : null}
-        <SidebarSection title="Output" input={result.result} />
+        <SidebarSection title="Output">
+          <DisplayInput
+            shouldTruncateText={false}
+            input={result.result}
+          ></DisplayInput>
+        </SidebarSection>
+        {result.scores.map((score) => (
+          <>
+            <Separator className="my-2" />
+            <SidebarSection key={score.name} title={score.name}>
+              <Score
+                isRunning={isRunning}
+                score={score.score ?? 0}
+                state={getScoreState(
+                  score.score ?? 0,
+                  prevResult?.scores.find(
+                    (prevScore) => prevScore.name === score.name
+                  )?.score
+                )}
+              />
+            </SidebarSection>
+          </>
+        ))}
       </SidebarContent>
-    </Sidebar>
+    </>
   );
 }

apps/evalite-ui/app/routes/eval.$name.tsx

@@ -11,6 +11,7 @@ import { DisplayInput } from "~/components/display-input";
 import { InnerPageLayout } from "~/components/page-layout";
 import { getScoreState, Score } from "~/components/score";
 import { MyLineChart } from "~/components/ui/line-chart";
+import { Sidebar } from "~/components/ui/sidebar";
 import {
   Table,
   TableBody,
@@ -59,6 +60,8 @@ export default function Page() {
     (result) => result.expected !== undefined
   );
 
+  const isTraceRoute = location.pathname.includes("trace");
+
   return (
     <>
       <InnerPageLayout
@@ -91,7 +94,7 @@ export default function Page() {
                 </Link>
               );
               return (
-                <TableRow key={result.input as any}>
+                <TableRow key={JSON.stringify(result.input)}>
                   <TableCell>
                     <DisplayInput
                       input={result.input}
@@ -148,7 +151,15 @@ export default function Page() {
           </TableBody>
         </Table>
       </InnerPageLayout>
-      <Outlet />
+      <div
+        className={cn(
+          "absolute top-0 h-svh w-[700px] border-l p-2 bg-sidebar",
+          "transition-[left,right,width] ease-linear shadow-lg",
+          isTraceRoute ? "right-0" : "right-[-700px]"
+        )}
+      >
+        <Outlet />
+      </div>
     </>
   );
 }

packages/evalite-core/src/sdk.ts

@@ -8,14 +8,14 @@ const BASE_URL = "http://localhost:3006";
 
 export const getEvals = async (): Promise<GetJsonDbEvalsResult> => {
   const res = await fetch(`${BASE_URL}/api/evals`);
-  return res.json() as Promise<GetJsonDbEvalsResult>;
+  return res.json() as any;
 };
 
 export const getEvalRunsByName = async (
   name: string
 ): Promise<JsonDBEval[]> => {
   const res = await fetch(`${BASE_URL}/api/eval?name=${name}`);
-  return res.json() as Promise<JsonDBEval[]>;
+  return res.json() as any;
 };
 
 export const getEvalRun = async (opts: {
@@ -25,15 +25,19 @@ export const getEvalRun = async (opts: {
   const res = await fetch(
     `${BASE_URL}/api/eval/run?name=${opts.name}&timestamp=${opts.timestamp}`
   );
-  return res.json() as Promise<JsonDbResult>;
+  return res.json() as any;
 };
 
 export const getEvalResult = async (opts: {
   name: string;
   resultIndex: string;
-}): Promise<JsonDbResult> => {
+}): Promise<{
+  filepath: string;
+  result: JsonDbResult;
+  prevResult: JsonDbResult | undefined;
+}> => {
   const res = await fetch(
     `${BASE_URL}/api/eval/result?name=${opts.name}&index=${opts.resultIndex}`
   );
-  return res.json() as Promise<JsonDbResult>;
+  return res.json() as any;
 };

packages/evalite-core/src/server.ts

@@ -145,10 +145,14 @@ export const createServer = (opts: { jsonDbLocation: string }) => {
         return res.code(404).send();
       }
 
+      const previousRun = fileData[req.query.name]?.[1];
+
+      const prevResult = previousRun?.results[index];
+
       return res
         .code(200)
         .header("access-control-allow-origin", "*")
-        .send(result);
+        .send({ result, prevResult, filepath: run.filepath });
     },
   });
 

packages/example/src/content-generation.eval.ts

@@ -39,7 +39,7 @@ evalite("Content generation", {
         Return only the tweet.
         Do not use emojis.
         Do not use hashtags.
-        Use code examples where required.
+        Use code examples if needed.
       `,
     });