From 6510b26b1e0cf380cb959554eba1c1bbac077ef3 Mon Sep 17 00:00:00 2001
From: Kyle Corbitt <kyle@corbt.com>
Date: Wed, 5 Jul 2023 18:11:12 -0700
Subject: [PATCH] re-attach scenarios

---
 .../OutputsTable/NewEvaluationButton.tsx      | 40 -------------------
 src/components/OutputsTable/index.tsx         | 32 +++------------
 src/server/ScenarioHeader.tsx                 |  4 +-
 3 files changed, 8 insertions(+), 68 deletions(-)
 delete mode 100644 src/components/OutputsTable/NewEvaluationButton.tsx

diff --git a/src/components/OutputsTable/NewEvaluationButton.tsx b/src/components/OutputsTable/NewEvaluationButton.tsx
deleted file mode 100644
index 58e93fe..0000000
--- a/src/components/OutputsTable/NewEvaluationButton.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Button, type ButtonProps, HStack, Spinner, Icon } from "@chakra-ui/react";
-import { BsPlus } from "react-icons/bs";
-import { api } from "~/utils/api";
-import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
-
-// Extracted Button styling into reusable component
-const StyledButton = ({ children, onClick }: ButtonProps) => (
-  <Button
-    fontWeight="normal"
-    bgColor="transparent"
-    _hover={{ bgColor: "gray.100" }}
-    px={2}
-    onClick={onClick}
-  >
-    {children}
-  </Button>
-);
-
-export default function NewEvaluationButton() {
-  const experiment = useExperiment();
-  const mutation = api.scenarios.create.useMutation();
-  const utils = api.useContext();
-
-  const [onClick] = useHandledAsyncCallback(async () => {
-    if (!experiment.data) return;
-    await mutation.mutateAsync({
-      experimentId: experiment.data.id,
-    });
-    await utils.scenarios.list.invalidate();
-  }, [mutation]);
-
-  return (
-    <HStack spacing={2}>
-      <StyledButton onClick={onClick}>
-        <Icon as={BsPlus} boxSize={6} />
-        Add Evaluation
-      </StyledButton>
-    </HStack>
-  );
-}
diff --git a/src/components/OutputsTable/index.tsx b/src/components/OutputsTable/index.tsx
index e669471..4b648d5 100644
--- a/src/components/OutputsTable/index.tsx
+++ b/src/components/OutputsTable/index.tsx
@@ -1,7 +1,6 @@
-import { Grid, GridItem, Heading, type SystemStyleObject } from "@chakra-ui/react";
+import { Box, Grid, GridItem, Heading, type SystemStyleObject } from "@chakra-ui/react";
 import ScenarioHeader from "~/server/ScenarioHeader";
 import { api } from "~/utils/api";
-import NewEvaluationButton from "./NewEvaluationButton";
 import NewScenarioButton from "./NewScenarioButton";
 import NewVariantButton from "./NewVariantButton";
 import ScenarioRow from "./ScenarioRow";
@@ -41,12 +40,12 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
           borderBottomWidth: 1,
           borderRightWidth: 1,
         },
-        "> *:last-child": {
-          borderRightWidth: 0,
-        },
       }}
     >
-      <GridItem borderBottomWidth={0} rowSpan={2} />
+      <GridItem display="flex" alignItems="flex-end" rowSpan={2}>
+        <ScenarioHeader />
+      </GridItem>
+
       {variants.data.map((variant) => (
         <GridItem key={variant.uiId} padding={0} sx={stickyHeaderStyle} borderTopWidth={1}>
           <VariantHeader variant={variant} />
@@ -67,31 +66,12 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
           <VariantConfigEditor variant={variant} />
         </GridItem>
       ))}
-      <GridItem
-        display="flex"
-        alignItems="flex-end"
-        borderRightWidth={0}
-        pt={4}
-        sx={{ ...stickyHeaderStyle, top: -4 }}
-      >
-        <ScenarioHeader />
-      </GridItem>
-      <GridItem colSpan={allCols - 1} borderRightWidth={0} />
-
       {scenarios.data.map((scenario) => (
         <ScenarioRow key={scenario.uiId} scenario={scenario} variants={variants.data} />
       ))}
-      <GridItem borderBottomWidth={0} w="100%" colSpan={allCols} padding={0}>
+      <GridItem borderBottomWidth={0} borderRightWidth={0} w="100%" colSpan={allCols} padding={0}>
         <NewScenarioButton />
       </GridItem>
-      {/* <GridItem borderBottomWidth={0} colSpan={allCols} px={2} pt={4}>
-        <Heading size="sm" fontWeight="bold" flex={1}>
-          Evaluations
-        </Heading>
-      </GridItem>
-      <GridItem borderBottomWidth={0} w="100%" colSpan={allCols} padding={0}>
-        <NewEvaluationButton />
-      </GridItem> */}
     </Grid>
   );
 }
diff --git a/src/server/ScenarioHeader.tsx b/src/server/ScenarioHeader.tsx
index 4fc9e4f..b3a24ca 100644
--- a/src/server/ScenarioHeader.tsx
+++ b/src/server/ScenarioHeader.tsx
@@ -38,7 +38,7 @@ export default function ScenarioHeader() {
     <Stack flex={1} px={cellPadding.x} py={cellPadding.y}>
       <HStack>
         <Heading size="sm" fontWeight="bold" flex={1}>
-          Scenarios
+          Scenario
         </Heading>
         {
           <Button
@@ -48,7 +48,7 @@ export default function ScenarioHeader() {
             rightIcon={<Icon as={editing ? BsCheck : BsChevronDown} />}
             onClick={() => setEditing((editing) => !editing)}
           >
-            {editing ? "Finish" : "Configure"}
+            {editing ? "Finish" : "Edit Vars"}
           </Button>
         }
       </HStack>