test

lunary-ai · Mar 30, 2024 · ca129ec · ca129ec
1 parent 6e7356f
commit ca129ec
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 71 deletions.
diff --git a/packages/frontend/components/evals/ResultsMatrix.tsx b/packages/frontend/components/evals/ResultsMatrix.tsx
@@ -120,9 +120,7 @@ export default function ResultsMatrix({ data }) {
           <thead>
             <tr>
               <th>Prompt</th>
-              {!!highestNumberOfVariables && (
-                <th colSpan={highestNumberOfVariables}>Variables</th>
-              )}
+              {!!highestNumberOfVariables && <th>Variables</th>}
               {providers.map((provider, i) => (
                 <th key={i}>
                   <HoverCard
@@ -168,22 +166,21 @@ export default function ResultsMatrix({ data }) {
                     </HoverCard>
                   </td>
                   {!!highestNumberOfVariables && (
-                    <td
-                      colSpan={highestNumberOfVariables}
-                      className={classes["nested-cell"]}
-                    >
-                      <tr>
-                        {variableKeys.map((variable, j) => (
-                          <th key={j}>{variable}</th>
-                        ))}
-                      </tr>
-                      {variableVariations.map((variableVariation, k) => (
-                        <tr key={k}>
-                          {variableKeys.map((variable, l) => (
-                            <td key={l}>{variableVariation[variable]}</td>
+                    <td className={classes["nested-cell"]}>
+                      <div className={classes["variable-grid"]}>
+                        <div className={classes["variable-row"]}>
+                          {variableKeys.map((variable, j) => (
+                            <div key={j}>{variable}</div>
                           ))}
-                        </tr>
-                      ))}
+                        </div>
+                        {variableVariations.map((variableVariation, k) => (
+                          <div className={classes["variable-row"]} key={k}>
+                            {variableKeys.map((variable, l) => (
+                              <div key={l}>{variableVariation[variable]}</div>
+                            ))}
+                          </div>
+                        ))}
+                      </div>
                     </td>
                   )}
                   {providers.map((provider, k) => (

diff --git a/packages/frontend/components/evals/index.module.css b/packages/frontend/components/evals/index.module.css
@@ -31,4 +31,24 @@
     padding: 0;
     border: none;
   }
+
+  .variable-grid {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .variable-row {
+    flex: 1;
+
+    display: flex;
+    justify-content: space-between;
+
+    > div {
+      border: 1px solid var(--mantine-color-default-border);
+      padding: 16px;
+      flex: 1 1 0;
+      text-align: center;
+    }
+  }
 }
diff --git a/packages/frontend/pages/evaluations/[id].tsx b/packages/frontend/pages/evaluations/[id].tsx
@@ -28,7 +28,7 @@ import { useRouter } from "next/router"
 
 export default function EvalResults() {
   const router = useRouter()
-  // const [groupBy, setGroupBy] = useState<"none" | "provider" | "prompt">("none")
+
   const id = router.query.id as string
 
   const { data, isLoading: loading } = useProjectSWR(
@@ -40,14 +40,6 @@ export default function EvalResults() {
   const { checklist } = useChecklist(evaluation?.checklistId)
   const { dataset } = useDataset(evaluation?.datasetId)
 
-  const uniqueProviders = Array.from(
-    new Set(data?.map((result) => JSON.stringify(result.provider))),
-  )
-
-  const uniquePrompts = Array.from(
-    new Set(data?.map((result) => result.promptId)),
-  )
-
   return (
     <Container size="100%">
       <Stack>
@@ -86,57 +78,13 @@ export default function EvalResults() {
           </Stack>
         </Card>
 
-        {/* <Group>
-          <Text>Group results by:</Text>
-          <SegmentedControl
-            w={200}
-            size="xs"
-            data={[
-              {
-                value: "none",
-                label: "None",
-              },
-              {
-                value: "provider",
-                label: "Model",
-              },
-              {
-                value: "prompt",
-                label: "Prompt",
-              },
-            ]}
-            value={groupBy}
-            onChange={(value) =>
-              setGroupBy(value as "none" | "provider" | "prompt")
-            }
-          />
-        </Group> */}
-
         {loading ? (
           <Loader />
         ) : (
           <>
             {data?.length > 0 ? (
               <Stack gap="xl">
                 <ResultsMatrix data={data} />
-                {/* {groupBy === "provider" &&
-                  uniqueProviders.map((model) => (
-                    <ResultsMatrix
-                      key={model}
-                      data={data.filter(
-                        (result) => JSON.stringify(result.provider) === model,
-                      )}
-                    />
-                  ))}
-                {groupBy === "prompt" &&
-                  uniquePrompts.map((promptId) => (
-                    <ResultsMatrix
-                      key={promptId}
-                      data={data.filter(
-                        (result) => result.promptId === promptId,
-                      )}
-                    />
-                  ))} */}
               </Stack>
             ) : (
               <p>No data</p>