From 5fcefad46165f64d9a124ade4b12b0edfb281001 Mon Sep 17 00:00:00 2001 From: Kyle Corbitt Date: Fri, 23 Jun 2023 17:03:26 -0700 Subject: [PATCH] rip out mantine table --- package.json | 1 - pnpm-lock.yaml | 74 ----------- prisma/seed.ts | 3 + src/components/OutputsTable/OutputCell.tsx | 7 +- .../OutputsTable/VariantConfigEditor.tsx | 18 ++- src/components/OutputsTable/VariantHeader.tsx | 3 +- src/components/OutputsTable/index.tsx | 119 ++++++------------ src/server/api/routers/scenarios.router.ts | 3 + 8 files changed, 64 insertions(+), 164 deletions(-) diff --git a/package.json b/package.json index 94625b8..686a72d 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eeab864..ef782c4 100644 --- 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'} diff --git a/prisma/seed.ts b/prisma/seed.ts index 136ad4b..b19b1a0 100644 --- 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", }, diff --git a/src/components/OutputsTable/OutputCell.tsx b/src/components/OutputsTable/OutputCell.tsx index 1566121..9daf1ab 100644 --- 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
{JSON.stringify(output.data.output.choices[0].message.content, null, 2)}
; + return ( +
+ {JSON.stringify(output.data.output.choices[0].message.content, null, 2)} +
+ ); } diff --git a/src/components/OutputsTable/VariantConfigEditor.tsx b/src/components/OutputsTable/VariantConfigEditor.tsx index 896680f..587a90b 100644 --- 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(); }; } diff --git a/src/components/OutputsTable/VariantHeader.tsx b/src/components/OutputsTable/VariantHeader.tsx index 7b24709..c08f8de 100644 --- 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 - + diff --git a/src/components/OutputsTable/index.tsx b/src/components/OutputsTable/index.tsx index 88502fa..d1e7797 100644 --- 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[0]; -}; - -type TableRow = { - scenario: NonNullable[0]; -} & Record; +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[]>(() => { - return [ - { - id: "scenario", - header: "Scenario", - enableColumnDragging: false, - size: 200, - Cell: ({ row }) => , - }, - ...(variants.data?.map( - (variant): MRT_ColumnDef => ({ - id: variant.uiId, - header: variant.label, - Header: , - size: 400, - Cell: ({ row }) => , - }) - ) ?? []), - ]; - }, [variants.data]); - - const tableData = useMemo( - () => - scenarios.data?.map((scenario) => { - return { - scenario, - } as TableRow; - }) ?? [], - [scenarios.data] - ); - if (!variants.data || !scenarios.data) return null; return ( - .mantine-TableHeadCell-Content-Labels": { - width: "100%", - height: "100%", - - "& > .mantine-TableHeadCell-Content-Wrapper": { - width: "100%", - height: "100%", - }, - }, - }, - }, - }} - /> + +
+ + Scenario + + {variants.data.map((variant) => ( + + + + ))} + {scenarios.data.map((scenario) => ( + + + + + {variants.data.map((variant) => ( + + + + ))} + + ))} +
+ ); } diff --git a/src/server/api/routers/scenarios.router.ts b/src/server/api/routers/scenarios.router.ts index 20db290..2e5130a 100644 --- 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", + }, }); }),