From b01ae677f534e6d1460754422db7090463871f9f Mon Sep 17 00:00:00 2001
From: arcticfly <41524992+arcticfly@users.noreply.github.com>
Date: Tue, 11 Jul 2023 01:17:01 -0600
Subject: [PATCH] Show more experiment content on screen, hide individual cost
 and time (#35)

* Fit more text on screen

* Hide individual cost and time
---
 .../OutputsTable/OutputCell/OutputStats.tsx   | 29 ++++++++++++-------
 .../OutputsTable/ScenarioEditor.tsx           | 11 ++++---
 src/components/OutputsTable/index.tsx         |  1 +
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/OutputsTable/OutputCell/OutputStats.tsx b/src/components/OutputsTable/OutputCell/OutputStats.tsx
index eebc882..4491300 100644
--- a/src/components/OutputsTable/OutputCell/OutputStats.tsx
+++ b/src/components/OutputsTable/OutputCell/OutputStats.tsx
@@ -9,6 +9,9 @@ import { HStack, Icon, Text } from "@chakra-ui/react";
 import { BsCheck, BsClock, BsCurrencyDollar, BsX } from "react-icons/bs";
 import { CostTooltip } from "~/components/tooltip/CostTooltip";
 
+const SHOW_COST = false;
+const SHOW_TIME = false;
+
 export const OutputStats = ({
   model,
   modelOutput,
@@ -32,8 +35,10 @@ export const OutputStats = ({
 
   const cost = promptCost + completionCost;
 
+  if (!evals.length) return null;
+
   return (
-    <HStack align="center" color="gray.500" fontSize="xs" mt={2}>
+    <HStack align="center" color="gray.500" fontSize="2xs" mt={{ base: 0, md: 1 }}>
       <HStack flex={1}>
         {evals.map((evaluation) => {
           const passed = evaluateOutput(modelOutput, scenario, evaluation);
@@ -49,16 +54,20 @@ export const OutputStats = ({
           );
         })}
       </HStack>
-      <CostTooltip promptTokens={promptTokens} completionTokens={completionTokens} cost={cost}>
-        <HStack spacing={0}>
-          <Icon as={BsCurrencyDollar} />
-          <Text mr={1}>{cost.toFixed(3)}</Text>
+      {SHOW_COST && (
+        <CostTooltip promptTokens={promptTokens} completionTokens={completionTokens} cost={cost}>
+          <HStack spacing={0}>
+            <Icon as={BsCurrencyDollar} />
+            <Text mr={1}>{cost.toFixed(3)}</Text>
+          </HStack>
+        </CostTooltip>
+      )}
+      {SHOW_TIME && (
+        <HStack spacing={0.5}>
+          <Icon as={BsClock} />
+          <Text>{(timeToComplete / 1000).toFixed(2)}s</Text>
         </HStack>
-      </CostTooltip>
-      <HStack spacing={0.5}>
-        <Icon as={BsClock} />
-        <Text>{(timeToComplete / 1000).toFixed(2)}s</Text>
-      </HStack>
+      )}
     </HStack>
   );
 };
diff --git a/src/components/OutputsTable/ScenarioEditor.tsx b/src/components/OutputsTable/ScenarioEditor.tsx
index ef15b27..38115f2 100644
--- a/src/components/OutputsTable/ScenarioEditor.tsx
+++ b/src/components/OutputsTable/ScenarioEditor.tsx
@@ -5,7 +5,7 @@ import { type Scenario } from "./types";
 import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
 import { useState } from "react";
 
-import { Box, Button, Flex, HStack, Icon, Spinner, Stack, Tooltip } from "@chakra-ui/react";
+import { Box, Button, Flex, HStack, Icon, Spinner, Stack, Tooltip, VStack } from "@chakra-ui/react";
 import { cellPadding } from "../constants";
 import { BsX } from "react-icons/bs";
 import { RiDraggable } from "react-icons/ri";
@@ -120,7 +120,7 @@ export default function ScenarioEditor({
       {variableLabels.length === 0 ? (
         <Box color="gray.500">{vars.data ? "No scenario variables configured" : "Loading..."}</Box>
       ) : (
-        <Stack>
+        <VStack spacing={1}>
           {variableLabels.map((key) => {
             const value = values[key] ?? "";
             const layoutDirection = value.length > 20 ? "column" : "row";
@@ -130,11 +130,12 @@ export default function ScenarioEditor({
                 direction={layoutDirection}
                 alignItems={layoutDirection === "column" ? "flex-start" : "center"}
                 flexWrap="wrap"
+                width="full"
               >
                 <Box
                   bgColor="blue.100"
                   color="blue.600"
-                  px={2}
+                  px={1}
                   my="3px"
                   fontSize="xs"
                   fontWeight="bold"
@@ -146,6 +147,8 @@ export default function ScenarioEditor({
                   py={1}
                   placeholder="empty"
                   borderRadius="sm"
+                  fontSize="sm"
+                  lineHeight={1.2}
                   value={value}
                   onChange={(e) => {
                     setValues((prev) => ({ ...prev, [key]: e.target.value }));
@@ -187,7 +190,7 @@ export default function ScenarioEditor({
               </Button>
             </HStack>
           )}
-        </Stack>
+        </VStack>
       )}
     </HStack>
   );
diff --git a/src/components/OutputsTable/index.tsx b/src/components/OutputsTable/index.tsx
index 4451ba3..9a81740 100644
--- a/src/components/OutputsTable/index.tsx
+++ b/src/components/OutputsTable/index.tsx
@@ -47,6 +47,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
           borderRightWidth: 1,
         },
       }}
+      fontSize="sm"
     >
       <GridItem
         display="flex"