From b28f4cad57c699b3bec483baa629de0ecece4fb2 Mon Sep 17 00:00:00 2001
From: arcticfly <41524992+arcticfly@users.noreply.github.com>
Date: Sun, 13 Aug 2023 03:26:58 -0700
Subject: [PATCH] Remove scenarios header from output table card (#151)

---
 app/src/components/OutputsTable/ScenarioRow.tsx   |  9 +++++++--
 .../components/OutputsTable/ScenariosHeader.tsx   | 15 +--------------
 app/src/components/OutputsTable/index.tsx         |  2 +-
 3 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/app/src/components/OutputsTable/ScenarioRow.tsx b/app/src/components/OutputsTable/ScenarioRow.tsx
index 9af9c57..474738e 100644
--- a/app/src/components/OutputsTable/ScenarioRow.tsx
+++ b/app/src/components/OutputsTable/ScenarioRow.tsx
@@ -10,6 +10,7 @@ const ScenarioRow = (props: {
   variants: PromptVariant[];
   canHide: boolean;
   rowStart: number;
+  isFirst: boolean;
   isLast: boolean;
 }) => {
   const [isHovered, setIsHovered] = useState(false);
@@ -23,11 +24,13 @@ const ScenarioRow = (props: {
         onMouseLeave={() => setIsHovered(false)}
         sx={isHovered ? highlightStyle : undefined}
         bgColor="white"
-        borderLeftWidth={1}
-        {...borders}
         rowStart={props.rowStart}
         colStart={1}
+        borderLeftWidth={1}
+        borderTopWidth={props.isFirst ? 1 : 0}
+        borderTopLeftRadius={props.isFirst ? 8 : 0}
         borderBottomLeftRadius={props.isLast ? 8 : 0}
+        {...borders}
       >
         <ScenarioEditor scenario={props.scenario} hovered={isHovered} canHide={props.canHide} />
       </GridItem>
@@ -40,6 +43,8 @@ const ScenarioRow = (props: {
           bgColor="white"
           rowStart={props.rowStart}
           colStart={i + 2}
+          borderTopWidth={props.isFirst ? 1 : 0}
+          borderTopRightRadius={props.isFirst && i === props.variants.length - 1 ? 8 : 0}
           borderBottomRightRadius={props.isLast && i === props.variants.length - 1 ? 8 : 0}
           {...borders}
         >
diff --git a/app/src/components/OutputsTable/ScenariosHeader.tsx b/app/src/components/OutputsTable/ScenariosHeader.tsx
index 62d20ea..aaca359 100644
--- a/app/src/components/OutputsTable/ScenariosHeader.tsx
+++ b/app/src/components/OutputsTable/ScenariosHeader.tsx
@@ -48,20 +48,7 @@ export const ScenariosHeader = () => {
   );
 
   return (
-    <HStack
-      w="100%"
-      py={cellPadding.y}
-      px={cellPadding.x}
-      align="center"
-      spacing={0}
-      borderTopRightRadius={8}
-      borderTopLeftRadius={8}
-      bgColor="white"
-      borderWidth={1}
-      borderBottomWidth={0}
-      borderColor="gray.300"
-      mt={8}
-    >
+    <HStack w="100%" py={cellPadding.y} px={cellPadding.x} align="center" spacing={0}>
       <Text fontSize={16} fontWeight="bold">
         Scenarios ({scenarios.data?.count})
       </Text>
diff --git a/app/src/components/OutputsTable/index.tsx b/app/src/components/OutputsTable/index.tsx
index 45c5402..1dd10e4 100644
--- a/app/src/components/OutputsTable/index.tsx
+++ b/app/src/components/OutputsTable/index.tsx
@@ -86,7 +86,6 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
         colSpan={allCols - 1}
         rowStart={variantHeaderRows + 1}
         colStart={1}
-        {...borders}
         borderRightWidth={0}
       >
         <ScenariosHeader />
@@ -99,6 +98,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
           scenario={scenario}
           variants={variants.data}
           canHide={visibleScenariosCount > 1}
+          isFirst={i === 0}
           isLast={i === visibleScenariosCount - 1}
         />
       ))}