Progress

mattpocock · Dec 5, 2024 · d8a31c3 · d8a31c3
1 parent 00d4a66
commit d8a31c3
Show file tree

Hide file tree

Showing 9 changed files with 185 additions and 88 deletions.
diff --git a/apps/evalite-ui/app/components/display-input.tsx b/apps/evalite-ui/app/components/display-input.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useLayoutEffect } from "react";
+import React, { useState, useRef, useLayoutEffect, Fragment } from "react";
 import ReactMarkdown from "react-markdown";
 import { Button } from "./ui/button";
 import { ChevronDown } from "lucide-react";
@@ -11,34 +11,49 @@ type DisplayStatus =
   | "showing-show-more-button"
   | "showing-more";
 
-const DisplayText = ({ input }: { input: string }) => {
+const DisplayText = ({
+  input,
+  shouldTruncateText,
+  Wrapper,
+}: {
+  input: string;
+  Wrapper: React.ElementType<{ children: React.ReactNode }>;
+  shouldTruncateText: boolean;
+}) => {
   const [status, setStatus] = useState<DisplayStatus>(
     "no-show-more-button-required"
   );
   const contentRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
-    if (contentRef.current) {
+    if (contentRef.current && shouldTruncateText) {
       if (contentRef.current.scrollHeight > MAX_HEIGHT) {
         setStatus("showing-show-more-button");
       }
     }
-  }, [input]);
+  }, [input, shouldTruncateText]);
 
   return (
     <div>
-      <div
-        ref={contentRef}
-        style={{
-          maxHeight: status === "showing-more" ? "none" : `${MAX_HEIGHT}px`,
-          overflow: "hidden",
-        }}
-      >
-        <ReactMarkdown className="prose prose-sm">{input}</ReactMarkdown>
-      </div>
-      {status === "showing-show-more-button" && (
+      <Wrapper>
+        <div
+          ref={contentRef}
+          style={{
+            maxHeight:
+              status === "showing-show-more-button" && shouldTruncateText
+                ? `${MAX_HEIGHT}px`
+                : "none",
+            overflow: "hidden",
+          }}
+        >
+          <ReactMarkdown className="prose prose-sm">{input}</ReactMarkdown>
+        </div>
+      </Wrapper>
+      {status === "showing-show-more-button" && shouldTruncateText && (
         <Button
-          onClick={() => setStatus("showing-more")}
+          onClick={() => {
+            setStatus("showing-more");
+          }}
           variant="secondary"
           size="sm"
           className="mt-3"
@@ -55,11 +70,10 @@ const DisplayJSON = ({ input }: { input: object }) => {
   return (
     <JSONTree
       data={input}
-      invertTheme
       hideRoot
       theme={{
         scheme: "grayscale",
-        base00: "#101010",
+        base00: "transparent",
         base01: "#252525",
         base02: "#464646",
         base03: "#525252",
@@ -80,14 +94,33 @@ const DisplayJSON = ({ input }: { input: object }) => {
   );
 };
 
-export const DisplayInput = (props: { input: unknown }) => {
-  if (typeof props.input === "string") {
-    return <DisplayText input={props.input} />;
+export const DisplayInput = (props: {
+  input: unknown;
+  shouldTruncateText: boolean;
+  Wrapper?: React.FC<{ children: React.ReactNode }>;
+}) => {
+  const Wrapper = props.Wrapper || Fragment;
+  if (typeof props.input === "string" || typeof props.input === "number") {
+    return (
+      <DisplayText
+        Wrapper={Wrapper}
+        input={props.input.toString()}
+        shouldTruncateText={props.shouldTruncateText}
+      />
+    );
   }
 
   if (typeof props.input === "object" && props.input !== null) {
-    return <DisplayJSON input={props.input} />;
+    return (
+      <Wrapper>
+        <DisplayJSON input={props.input} />
+      </Wrapper>
+    );
   }
 
-  return JSON.stringify(props.input, null, 2);
+  return (
+    <Wrapper>
+      <pre>{JSON.stringify(props.input, null, 2)}</pre>
+    </Wrapper>
+  );
 };
diff --git a/apps/evalite-ui/app/components/page-layout.tsx b/apps/evalite-ui/app/components/page-layout.tsx
@@ -1,14 +1,12 @@
-import { Link } from "@remix-run/react";
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
-  BreadcrumbSeparator,
 } from "./ui/breadcrumb";
 import { Separator } from "./ui/separator";
-import { SidebarInset, SidebarTrigger } from "./ui/sidebar";
+import { SidebarTrigger } from "./ui/sidebar";
 
 export const InnerPageLayout = ({
   children,
@@ -22,7 +20,7 @@ export const InnerPageLayout = ({
   children: React.ReactNode;
 }) => {
   return (
-    <div className="flex flex-col bg-background relative flex-1 min-h-svh">
+    <div className="flex flex-col bg-background relative flex-1 min-h-svh max-w-7xl">
       <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
         <div className="flex flex-1 items-center gap-2 px-3">
           <SidebarTrigger />

diff --git a/apps/evalite-ui/app/components/ui/button.tsx b/apps/evalite-ui/app/components/ui/button.tsx
@@ -1,11 +1,11 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -31,26 +31,26 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/apps/evalite-ui/app/components/ui/sidebar.tsx b/apps/evalite-ui/app/components/ui/sidebar.tsx
@@ -278,7 +278,7 @@ const SidebarTrigger = React.forwardRef<
       }}
       {...props}
     >
-      <PanelLeft />
+      <PanelLeft className="size-4" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );

diff --git a/apps/evalite-ui/app/routes/eval.$name.trace.$index.tsx b/apps/evalite-ui/app/routes/eval.$name.trace.$index.tsx
@@ -1,25 +1,37 @@
 import { getEvalResult } from "@evalite/core/sdk";
-import { useLoaderData, type ClientLoaderFunctionArgs } from "@remix-run/react";
-import { PlusIcon } from "lucide-react";
-import { SidebarRight } from "~/components/sidebar-right";
+import {
+  Link,
+  useLoaderData,
+  type ClientLoaderFunctionArgs,
+} from "@remix-run/react";
+import { SidebarCloseIcon } from "lucide-react";
+import { DisplayInput } from "~/components/display-input";
 import {
   Breadcrumb,
   BreadcrumbItem,
-  BreadcrumbLink,
   BreadcrumbList,
-  BreadcrumbPage,
 } from "~/components/ui/breadcrumb";
+import { Button } from "~/components/ui/button";
 import { Separator } from "~/components/ui/separator";
 import {
   Sidebar,
   SidebarContent,
-  SidebarFooter,
   SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
 } from "~/components/ui/sidebar";
 
+const SidebarSection = ({
+  title,
+  input,
+}: {
+  title: string;
+  input: unknown;
+}) => (
+  <div className="text-sm">
+    <h2 className="font-semibold text-base mb-1">{title}</h2>
+    <DisplayInput shouldTruncateText={false} input={input}></DisplayInput>
+  </div>
+);
+
 export const clientLoader = async (args: ClientLoaderFunctionArgs) => {
   const result = await getEvalResult({
     name: args.params.name!,
@@ -40,31 +52,37 @@ export default function Page() {
       side="right"
       className="sticky hidden top-0 h-svh w-[400px] border-l"
     >
-      <SidebarHeader className="">
-        <div>
-          <span className="text-sm text-primary block font-semibold">
-            Trace
-          </span>
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>Hello</BreadcrumbItem>
-              <Separator orientation="vertical" className="mx-1 h-4" />
-              <BreadcrumbItem>Hello</BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
+      <SidebarHeader>
+        <div className="flex items-center gap-3">
+          <Button size={"icon"} variant="ghost" asChild>
+            <Link to={"../../"} preventScrollReset>
+              <SidebarCloseIcon className="size-5" />
+            </Link>
+          </Button>
+          <div>
+            <span className="text-primary block font-semibold mb-1">Trace</span>
+            <Breadcrumb>
+              <BreadcrumbList>
+                <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></SidebarContent>
-      <SidebarFooter>
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton>
-              <PlusIcon />
-              <span>New Calendar</span>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarFooter>
+      <SidebarContent className="p-2">
+        <SidebarSection title="Input" input={result.input} />
+        <Separator className="my-2" />
+        {result.expected ? (
+          <>
+            <SidebarSection title="Expected" input={result.expected} />
+            <Separator className="my-2" />
+          </>
+        ) : null}
+        <SidebarSection title="Output" input={result.result} />
+      </SidebarContent>
     </Sidebar>
   );
 }