From 0fa3af4e9f57e60c4256c44691a89d3a0ff17e18 Mon Sep 17 00:00:00 2001
From: Kyle Corbitt <kyle@corbt.com>
Date: Thu, 22 Jun 2023 11:48:39 -0700
Subject: [PATCH] some styling improvements

---
 .env.example                          |  3 ++
 src/components/OutputsTable/index.tsx | 44 +++++++++++++++++++++------
 src/components/nav/AppNav.tsx         | 13 ++++----
 src/pages/experiments/[id].tsx        | 12 ++++++--
 src/utils/hooks.ts                    | 12 ++++++++
 5 files changed, 65 insertions(+), 19 deletions(-)
 create mode 100644 src/utils/hooks.ts

diff --git a/.env.example b/.env.example
index c1464a2..da5726c 100644
--- a/.env.example
+++ b/.env.example
@@ -23,3 +23,6 @@ NEXTAUTH_URL="http://localhost:3000"
 # Next Auth Discord Provider
 DISCORD_CLIENT_ID=""
 DISCORD_CLIENT_SECRET=""
+
+NODE_ENV="development"
+OPENAI_API_KEY=""
\ No newline at end of file
diff --git a/src/components/OutputsTable/index.tsx b/src/components/OutputsTable/index.tsx
index 9810e1d..5251a6b 100644
--- a/src/components/OutputsTable/index.tsx
+++ b/src/components/OutputsTable/index.tsx
@@ -11,18 +11,29 @@ type TableRow = {
   scenario: NonNullable<RouterOutputs["scenarios"]["list"]>[0];
 } & Record<string, CellData>;
 
-export default function OutputsTable({ experimentId }: { experimentId: string }) {
-  const experiment = api.experiments.get.useQuery({ id: experimentId });
+export default function OutputsTable({ experimentId }: { experimentId: string | undefined }) {
+  const experiment = api.experiments.get.useQuery(
+    { id: experimentId as string },
+    { enabled: !!experimentId }
+  );
 
-  const variants = api.promptVariants.list.useQuery({ experimentId: experimentId });
+  const variants = api.promptVariants.list.useQuery(
+    { experimentId: experimentId as string },
+    { enabled: !!experimentId }
+  );
 
-  const scenarios = api.scenarios.list.useQuery({ experimentId: experimentId });
+  const scenarios = api.scenarios.list.useQuery(
+    { experimentId: experimentId as string },
+    { enabled: !!experimentId }
+  );
 
   const columns = useMemo<MRT_ColumnDef<TableRow>[]>(
     () => [
       {
         id: "scenario",
         header: "Scenario",
+        enableColumnDragging: false,
+        size: 200,
         Cell: ({ row }) => {
           return <div>{JSON.stringify(row.original.scenario.variableValues)}</div>;
         },
@@ -31,6 +42,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string })
         (variant): MRT_ColumnDef<TableRow> => ({
           id: variant.id,
           header: variant.label,
+          // size: 300,
           Cell: ({ row }) => {
             const cellData = row.original[variant.id];
             return (
@@ -50,15 +62,29 @@ export default function OutputsTable({ experimentId }: { experimentId: string })
       scenarios.data?.map((scenario) => {
         return {
           scenario,
-          // ...variants.data?.reduce(
-          //   (acc, variant) => ({ ...acc, [variant.id]: { variant, scenario } }),
-          //   {} as Record<string, CellData>
-          // ),
         } as TableRow;
       }) ?? [],
     [variants.data, scenarios.data]
   );
 
-  return <MantineReactTable columns={columns} data={tableData} enableFullScreenToggle={false} />;
+  return (
+    <MantineReactTable
+      mantinePaperProps={{
+        withBorder: false,
+        shadow: "none",
+      }}
+      columns={columns}
+      data={tableData}
+      enableBottomToolbar={false}
+      enableTopToolbar={false}
+      enableColumnDragging
+      enableGlobalFilter={false}
+      enableFilters={false}
+      enableDensityToggle={false}
+      enableFullScreenToggle={false}
+      enableHiding={false}
+      enableRowDragging
+    />
+  );
   // return <div>OutputsTable</div>;
 }
diff --git a/src/components/nav/AppNav.tsx b/src/components/nav/AppNav.tsx
index bdc4697..8cf7892 100644
--- a/src/components/nav/AppNav.tsx
+++ b/src/components/nav/AppNav.tsx
@@ -60,10 +60,10 @@ const useStyles = createStyles((theme) => ({
 
   linkActive: {
     "&, &:hover": {
-      backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
-      color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color,
+      backgroundColor: theme.fn.variant({ variant: "dark", color: theme.primaryColor }).background,
+      color: theme.fn.variant({ variant: "dark", color: theme.primaryColor }).color,
       [`& .${getStylesRef("icon")}`]: {
-        color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color,
+        color: theme.fn.variant({ variant: "dark", color: theme.primaryColor }).color,
       },
     },
   },
@@ -99,14 +99,13 @@ export default function AppNav(props: { children: React.ReactNode; title?: strin
   ));
 
   return (
-    <Group h="100vh">
+    <Box mih="100vh" sx={{ display: "flex" }}>
       <Head>
         <title>{props.title && `${props.title} | `}Prompt Bench</title>
       </Head>
-      <Navbar height="100%" width={{ sm: 250 }} p="md">
+      <Navbar height="100vh" width={{ sm: 250 }} p="md" bg="gray.1">
         <Navbar.Section grow>
           <Group className={classes.header} position="apart">
-            {/* <MantineLogo size={28} /> */}
             <Code sx={{ fontWeight: 700 }}>v3.1.2</Code>
           </Group>
           {links}
@@ -125,6 +124,6 @@ export default function AppNav(props: { children: React.ReactNode; title?: strin
         </Navbar.Section>
       </Navbar>
       <Box sx={{ flex: 1 }}>{props.children}</Box>
-    </Group>
+    </Box>
   );
 }
diff --git a/src/pages/experiments/[id].tsx b/src/pages/experiments/[id].tsx
index 23ff10e..abdc882 100644
--- a/src/pages/experiments/[id].tsx
+++ b/src/pages/experiments/[id].tsx
@@ -1,4 +1,4 @@
-import { Center } from "@mantine/core";
+import { Box, Center } from "@mantine/core";
 import { useRouter } from "next/router";
 import OutputsTable from "~/components/OutputsTable";
 import AppNav from "~/components/nav/AppNav";
@@ -7,7 +7,11 @@ import { api } from "~/utils/api";
 export default function Experiment() {
   const router = useRouter();
 
-  const experiment = api.experiments.get.useQuery({ id: router.query.id as string });
+  console.log(router.query.id);
+  const experiment = api.experiments.get.useQuery(
+    { id: router.query.id as string },
+    { enabled: !!router.query.id }
+  );
 
   if (!experiment.data) {
     return (
@@ -21,7 +25,9 @@ export default function Experiment() {
 
   return (
     <AppNav title={experiment.data.label}>
-      <OutputsTable experimentId={router.query.id as string} />
+      <Box sx={{ minHeight: "100vh" }}>
+        <OutputsTable experimentId={router.query.id as string | undefined} />
+      </Box>
     </AppNav>
   );
 }
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
new file mode 100644
index 0000000..94f7a26
--- /dev/null
+++ b/src/utils/hooks.ts
@@ -0,0 +1,12 @@
+import { useRouter } from "next/router";
+import { api } from "~/utils/api";
+
+export const useExperiment = () => {
+  const router = useRouter();
+  const experiment = api.experiments.get.useQuery(
+    { id: router.query.id as string },
+    { enabled: !!router.query.id }
+  );
+
+  return experiment;
+};