rip out mantine table

package.json

@@ -32,7 +32,6 @@
     "dayjs": "^1.11.8",
     "dotenv": "^16.3.1",
     "lodash": "^4.17.21",
-    "mantine-react-table": "1.0.0-beta.13",
     "next": "^13.4.2",
     "next-auth": "^4.22.1",
     "react": "18.2.0",

pnpm-lock.yaml

@@ -68,9 +68,6 @@ dependencies:
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
-  mantine-react-table:
-    specifier: 1.0.0-beta.13
-    version: 1.0.0-beta.13(@emotion/react@11.11.1)(@mantine/core@6.0.14)(@mantine/dates@6.0.14)(@mantine/hooks@6.0.14)(@tabler/icons-react@2.22.0)(react-dom@18.2.0)(react@18.2.0)
   next:
     specifier: ^13.4.2
     version: 13.4.2(react-dom@18.2.0)(react@18.2.0)
@@ -1055,13 +1052,6 @@ packages:
     resolution: {integrity: sha512-lOsGHqRPIKNARMWHHFkUUJH78C8ptQmUcDnumFBUI4YLRKFouKa7uAZL3ZfuH0HjDpOhsnWqUYZ7FhMCLcGpAQ==}
     dev: false
 
-  /@tanstack/match-sorter-utils@8.8.4:
-    resolution: {integrity: sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==}
-    engines: {node: '>=12'}
-    dependencies:
-      remove-accents: 0.4.2
-    dev: false
-
   /@tanstack/query-core@4.29.7:
     resolution: {integrity: sha512-GXG4b5hV2Loir+h2G+RXhJdoZhJLnrBWsuLB2r0qBRyhWuXq9w/dWxzvpP89H0UARlH6Mr9DiVj4SMtpkF/aUA==}
     dev: false
@@ -1084,36 +1074,6 @@ packages:
       use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
 
-  /@tanstack/react-table@8.9.2(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-Irvw4wqVF9hhuYzmNrlae4IKdlmgSyoRWnApSLebvYzqHoi5tEsYzBj6YPd0hX78aB/L+4w/jgK2eBQVpGfThQ==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      react: '>=16'
-      react-dom: '>=16'
-    dependencies:
-      '@tanstack/table-core': 8.9.2
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
-  /@tanstack/react-virtual@3.0.0-beta.54(react@18.2.0):
-    resolution: {integrity: sha512-D1mDMf4UPbrtHRZZriCly5bXTBMhylslm4dhcHqTtDJ6brQcgGmk8YD9JdWBGWfGSWPKoh2x1H3e7eh+hgPXtQ==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@tanstack/virtual-core': 3.0.0-beta.54
-      react: 18.2.0
-    dev: false
-
-  /@tanstack/table-core@8.9.2:
-    resolution: {integrity: sha512-ajc0OF+karBAdaSz7OK09rCoAHB1XI1+wEhu+tDNMPc+XcO+dTlXXN/Vc0a8vym4kElvEjXEDd9c8Zfgt4bekA==}
-    engines: {node: '>=12'}
-    dev: false
-
-  /@tanstack/virtual-core@3.0.0-beta.54:
-    resolution: {integrity: sha512-jtkwqdP2rY2iCCDVAFuaNBH3fiEi29aTn2RhtIoky8DTTiCdc48plpHHreLwmv1PICJ4AJUUESaq3xa8fZH8+g==}
-    dev: false
-
   /@trpc/client@10.26.0(@trpc/server@10.26.0):
     resolution: {integrity: sha512-ojHxQFIE97rBEGPK8p1ijbzo0T1IdEBoJ9fFSgWWL9FMuEEA/DNQ9s0uuiOrDKhCCdTFT1unfRharoJhB2/O2w==}
     peerDependencies:
@@ -2505,11 +2465,6 @@ packages:
     dependencies:
       function-bind: 1.1.1
 
-  /highlight-words@1.2.2:
-    resolution: {integrity: sha512-Mf4xfPXYm8Ay1wTibCrHpNWeR2nUMynMVFkXCi4mbl+TEgmNOe+I4hV7W3OCZcSvzGL6kupaqpfHOemliMTGxQ==}
-    engines: {node: '>= 16', npm: '>= 8'}
-    dev: false
-
   /hoist-non-react-statics@3.3.2:
     resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
     dependencies:
@@ -2886,31 +2841,6 @@ packages:
     dependencies:
       yallist: 4.0.0
 
-  /mantine-react-table@1.0.0-beta.13(@emotion/react@11.11.1)(@mantine/core@6.0.14)(@mantine/dates@6.0.14)(@mantine/hooks@6.0.14)(@tabler/icons-react@2.22.0)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-GOC536sjdsWgct9ErNjyWmn54PHxAt6PcvnGnUCeECF5MoyY2mNO3ukgD377dGL0b+e+kjCXCxY4W7MHV1/WqQ==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@emotion/react': '>=11'
-      '@mantine/core': '>=6'
-      '@mantine/dates': '>=6'
-      '@mantine/hooks': '>=6'
-      '@tabler/icons-react': '>=2'
-      react: '>=17.0'
-      react-dom: '>=17.0'
-    dependencies:
-      '@emotion/react': 11.11.1(@types/react@18.2.6)(react@18.2.0)
-      '@mantine/core': 6.0.14(@emotion/react@11.11.1)(@mantine/hooks@6.0.14)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
-      '@mantine/dates': 6.0.14(@mantine/core@6.0.14)(@mantine/hooks@6.0.14)(dayjs@1.11.8)(react@18.2.0)
-      '@mantine/hooks': 6.0.14(react@18.2.0)
-      '@tabler/icons-react': 2.22.0(react@18.2.0)
-      '@tanstack/match-sorter-utils': 8.8.4
-      '@tanstack/react-table': 8.9.2(react-dom@18.2.0)(react@18.2.0)
-      '@tanstack/react-virtual': 3.0.0-beta.54(react@18.2.0)
-      highlight-words: 1.2.2
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
     dev: true
@@ -3459,10 +3389,6 @@ packages:
       functions-have-names: 1.2.3
     dev: true
 
-  /remove-accents@0.4.2:
-    resolution: {integrity: sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==}
-    dev: false
-
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}

prisma/seed.ts

@@ -76,18 +76,21 @@ await prisma.testScenario.createMany({
   data: [
     {
       experimentId,
+      sortIndex: 0,
       variableValues: {
         state: "Washington",
       },
     },
     {
       experimentId,
+      sortIndex: 1,
       variableValues: {
         state: "California",
       },
     },
     {
       experimentId,
+      sortIndex: 2,
       variableValues: {
         state: "Utah",
       },

src/components/OutputsTable/OutputCell.tsx

@@ -1,5 +1,6 @@
 import { api } from "~/utils/api";
 import { PromptVariant, Scenario } from "./types";
+import { Center } from "@mantine/core";
 
 export default function OutputCell({
   scenario,
@@ -15,5 +16,9 @@ export default function OutputCell({
 
   if (!output.data) return null;
 
-  return <div>{JSON.stringify(output.data.output.choices[0].message.content, null, 2)}</div>;
+  return (
+    <Center h="100%">
+      {JSON.stringify(output.data.output.choices[0].message.content, null, 2)}
+    </Center>
+  );
 }

src/components/OutputsTable/VariantConfigEditor.tsx

@@ -45,7 +45,9 @@ export default function VariantConfigEditor(props: {
         isThemeDefined = true;
       }
 
-      editorRef.current = monaco.editor.create(document.getElementById(editorId) as HTMLElement, {
+      const container = document.getElementById(editorId) as HTMLElement;
+
+      editorRef.current = monaco.editor.create(container, {
         value: props.savedConfig,
         language: "json",
         theme: "customTheme",
@@ -55,7 +57,13 @@ export default function VariantConfigEditor(props: {
         wrappingStrategy: "advanced",
         wordWrap: "on",
         folding: false,
-        scrollbar: { vertical: "hidden", alwaysConsumeMouseWheel: false },
+        scrollbar: {
+          vertical: "hidden",
+          alwaysConsumeMouseWheel: false,
+          verticalScrollbarSize: 0,
+
+          // Don't let you scroll to an empty line
+        },
         wordWrapBreakAfterCharacters: "",
         wordWrapBreakBeforeCharacters: "",
       });
@@ -69,7 +77,13 @@ export default function VariantConfigEditor(props: {
 
       editorRef.current.onDidChangeModelContent(checkForChanges);
 
+      const resizeObserver = new ResizeObserver(() => {
+        editorRef.current?.layout();
+      });
+      resizeObserver.observe(container);
+
       return () => {
+        resizeObserver.disconnect();
         editorRef.current?.dispose();
       };
     }

src/components/OutputsTable/VariantHeader.tsx

@@ -45,8 +45,7 @@ export default function VariantHeader({ variant }: { variant: PromptVariant }) {
   );
 
   return (
-    // title="" to hide the title text that mantine-react-table likes to add
+    <Stack w="100%">
-    <Stack w="100%" title="">
       <EditableVariantLabel variant={variant} />
       <VariantConfigEditor savedConfig={JSON.stringify(variant.config, null, 2)} onSave={onSave} />
     </Stack>

src/components/OutputsTable/index.tsx

@@ -1,19 +1,14 @@
-import { MRT_ColumnDef, MantineReactTable } from "mantine-react-table";
 import { useMemo } from "react";
 import { RouterOutputs, api } from "~/utils/api";
-import { PromptVariant } from "./types";
+import { type PromptVariant } from "./types";
 import VariantHeader from "./VariantHeader";
 import OutputCell from "./OutputCell";
 import ScenarioHeader from "./ScenarioHeader";
+import { Box, Header, Title } from "@mantine/core";
+import React from "react";
 
-type CellData = {
+const cellPaddingX = 8;
-  variant: PromptVariant;
+const cellPaddingY = 4;
-  scenario: NonNullable<RouterOutputs["scenarios"]["list"]>[0];
-};
-
-type TableRow = {
-  scenario: NonNullable<RouterOutputs["scenarios"]["list"]>[0];
-} & Record<string, CellData>;
 
 export default function OutputsTable({ experimentId }: { experimentId: string | undefined }) {
   const variants = api.promptVariants.list.useQuery(
@@ -26,82 +21,38 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
     { enabled: !!experimentId }
   );
 
-  const columns = useMemo<MRT_ColumnDef<TableRow>[]>(() => {
-    return [
-      {
-        id: "scenario",
-        header: "Scenario",
-        enableColumnDragging: false,
-        size: 200,
-        Cell: ({ row }) => <ScenarioHeader scenario={row.original.scenario} />,
-      },
-      ...(variants.data?.map(
-        (variant): MRT_ColumnDef<TableRow> => ({
-          id: variant.uiId,
-          header: variant.label,
-          Header: <VariantHeader variant={variant} />,
-          size: 400,
-          Cell: ({ row }) => <OutputCell scenario={row.original.scenario} variant={variant} />,
-        })
-      ) ?? []),
-    ];
-  }, [variants.data]);
-
-  const tableData = useMemo(
-    () =>
-      scenarios.data?.map((scenario) => {
-        return {
-          scenario,
-        } as TableRow;
-      }) ?? [],
-    [scenarios.data]
-  );
-
   if (!variants.data || !scenarios.data) return null;
 
   return (
-    <MantineReactTable
+    <Box p={12}>
-      mantinePaperProps={{
+      <div
-        withBorder: false,
+        style={{
-        shadow: "none",
+          display: "grid",
-      }}
+          gridTemplateColumns: `200px repeat(${variants.data.length}, minmax(300px, 1fr))`,
-      columns={columns}
+          overflowX: "auto",
-      data={tableData}
+        }}
-      enableBottomToolbar={false}
+      >
-      enableTopToolbar={false}
+        <Box px={cellPaddingX} py={cellPaddingY} display="flex" sx={{}}>
-      enableColumnDragging
+          <Title order={4}>Scenario</Title>
-      enableGlobalFilter={false}
+        </Box>
-      enableFilters={false}
+        {variants.data.map((variant) => (
-      enableDensityToggle={false}
+          <Box key={variant.uiId} px={cellPaddingX} py={cellPaddingY}>
-      enableFullScreenToggle={false}
+            <VariantHeader key={variant.uiId} variant={variant} />
-      enableHiding={false}
+          </Box>
-      enableColumnActions={false}
+        ))}
-      enableColumnResizing
+        {scenarios.data.map((scenario) => (
-      mantineTableProps={{
+          <React.Fragment key={scenario.uiId}>
-        sx: {
+            <Box px={cellPaddingX} py={cellPaddingY}>
-          th: {
+              <ScenarioHeader scenario={scenario} />
-            verticalAlign: "bottom",
+            </Box>
-          },
+            {variants.data.map((variant) => (
-          "& .mantine-TableHeadCell-Content": {
+              <Box key={variant.id} px={cellPaddingX} py={cellPaddingY}>
-            width: "100%",
+                <OutputCell key={variant.id} scenario={scenario} variant={variant} />
-            height: "100%",
+              </Box>
-
+            ))}
-            "& .mantine-TableHeadCell-Content-Actions": {
+          </React.Fragment>
-              alignSelf: "flex-start",
+        ))}
-            },
+      </div>
-
+    </Box>
-            "& > .mantine-TableHeadCell-Content-Labels": {
-              width: "100%",
-              height: "100%",
-
-              "& > .mantine-TableHeadCell-Content-Wrapper": {
-                width: "100%",
-                height: "100%",
-              },
-            },
-          },
-        },
-      }}
-    />
   );
 }

src/server/api/routers/scenarios.router.ts

@@ -9,6 +9,9 @@ export const scenariosRouter = createTRPCRouter({
         experimentId: input.experimentId,
         visible: true,
       },
+      orderBy: {
+        sortIndex: "asc",
+      },
     });
   }),