rip out mantine table

2023-06-23 17:03:26 -07:00
parent 2b0c2ad603
commit 5fcefad461
8 changed files with 64 additions and 164 deletions
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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'}
--- a/prisma/seed.ts
+++ b/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",
      },
--- a/src/components/OutputsTable/OutputCell.tsx
+++ b/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>
+  );
 }
--- a/src/components/OutputsTable/VariantConfigEditor.tsx
+++ b/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();
      };
    }
--- a/src/components/OutputsTable/VariantHeader.tsx
+++ b/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%" title="">
+    <Stack w="100%">
      <EditableVariantLabel variant={variant} />
      <VariantConfigEditor savedConfig={JSON.stringify(variant.config, null, 2)} onSave={onSave} />
    </Stack>
--- a/src/components/OutputsTable/index.tsx
+++ b/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 = {
-  variant: PromptVariant;
-  scenario: NonNullable<RouterOutputs["scenarios"]["list"]>[0];
-};
-
-type TableRow = {
-  scenario: NonNullable<RouterOutputs["scenarios"]["list"]>[0];
-} & Record<string, CellData>;
+const cellPaddingX = 8;
+const cellPaddingY = 4;

 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
-      mantinePaperProps={{
-        withBorder: false,
-        shadow: "none",
+    <Box p={12}>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `200px repeat(${variants.data.length}, minmax(300px, 1fr))`,
+          overflowX: "auto",
        }}
-      columns={columns}
-      data={tableData}
-      enableBottomToolbar={false}
-      enableTopToolbar={false}
-      enableColumnDragging
-      enableGlobalFilter={false}
-      enableFilters={false}
-      enableDensityToggle={false}
-      enableFullScreenToggle={false}
-      enableHiding={false}
-      enableColumnActions={false}
-      enableColumnResizing
-      mantineTableProps={{
-        sx: {
-          th: {
-            verticalAlign: "bottom",
-          },
-          "& .mantine-TableHeadCell-Content": {
-            width: "100%",
-            height: "100%",
-
-            "& .mantine-TableHeadCell-Content-Actions": {
-              alignSelf: "flex-start",
-            },
-
-            "& > .mantine-TableHeadCell-Content-Labels": {
-              width: "100%",
-              height: "100%",
-
-              "& > .mantine-TableHeadCell-Content-Wrapper": {
-                width: "100%",
-                height: "100%",
-              },
-            },
-          },
-        },
-      }}
-    />
+      >
+        <Box px={cellPaddingX} py={cellPaddingY} display="flex" sx={{}}>
+          <Title order={4}>Scenario</Title>
+        </Box>
+        {variants.data.map((variant) => (
+          <Box key={variant.uiId} px={cellPaddingX} py={cellPaddingY}>
+            <VariantHeader key={variant.uiId} variant={variant} />
+          </Box>
+        ))}
+        {scenarios.data.map((scenario) => (
+          <React.Fragment key={scenario.uiId}>
+            <Box px={cellPaddingX} py={cellPaddingY}>
+              <ScenarioHeader scenario={scenario} />
+            </Box>
+            {variants.data.map((variant) => (
+              <Box key={variant.id} px={cellPaddingX} py={cellPaddingY}>
+                <OutputCell key={variant.id} scenario={scenario} variant={variant} />
+              </Box>
+            ))}
+          </React.Fragment>
+        ))}
+      </div>
+    </Box>
  );
 }
--- a/src/server/api/routers/scenarios.router.ts
+++ b/src/server/api/routers/scenarios.router.ts
@@ -9,6 +9,9 @@ export const scenariosRouter = createTRPCRouter({
        experimentId: input.experimentId,
        visible: true,
      },
+      orderBy: {
+        sortIndex: "asc",
+      },
    });
  }),