ripped out mantine, replaced with chakra

src/components/OutputsTable/EditableVariantLabel.tsx

@@ -1,8 +1,8 @@
 import { useRef } from "react";
-import { Title } from "@mantine/core";
 import { type PromptVariant } from "./types";
 import { api } from "~/utils/api";
 import { useHandledAsyncCallback } from "~/utils/hooks";
+import { Heading } from "@chakra-ui/react";
 
 export default function EditableVariantLabel(props: { variant: PromptVariant }) {
   const labelRef = useRef<HTMLHeadingElement | null>(null);
@@ -20,8 +20,15 @@ export default function EditableVariantLabel(props: { variant: PromptVariant })
   }, [mutation, props.variant.id, props.variant.label]);
 
   return (
-    <Title order={4} ref={labelRef} contentEditable suppressContentEditableWarning onBlur={onBlur}>
+    <Heading
+      fontWeight="bold"
+      size="md"
+      ref={labelRef}
+      contentEditable
+      suppressContentEditableWarning
+      onBlur={onBlur}
+    >
       {props.variant.label}
-    </Title>
+    </Heading>
   );
 }

src/components/OutputsTable/OutputCell.tsx

@@ -1,6 +1,6 @@
 import { api } from "~/utils/api";
 import { PromptVariant, Scenario } from "./types";
-import { Center } from "@mantine/core";
+import { Center } from "@chakra-ui/react";
 
 export default function OutputCell({
   scenario,

src/components/OutputsTable/ScenarioHeader.tsx

@@ -1,9 +1,9 @@
 import { api } from "~/utils/api";
 import { isEqual } from "lodash";
 import { PromptVariant, Scenario } from "./types";
-import { Badge, Button, Group, Stack, TextInput, Textarea, Tooltip } from "@mantine/core";
 import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
 import { useState } from "react";
+import { Badge, Button, Flex, HStack, Stack, Textarea } from "@chakra-ui/react";
 
 export default function ScenarioHeader({ scenario }: { scenario: Scenario }) {
   const savedValues = scenario.variableValues as Record<string, string>;
@@ -31,21 +31,23 @@ export default function ScenarioHeader({ scenario }: { scenario: Scenario }) {
     <Stack>
       {variableLabels.map((key) => {
         return (
-          <Textarea
-            key={key}
-            label={key}
-            value={values[key] ?? ""}
-            onChange={(e) => {
-              setValues((prev) => ({ ...prev, [key]: e.target.value }));
-            }}
-            autosize
-            rows={1}
-            maxRows={20}
-          />
+          <Flex key={key}>
+            <Badge>{key}</Badge>
+            <Textarea
+              key={key}
+              value={values[key] ?? ""}
+              onChange={(e) => {
+                setValues((prev) => ({ ...prev, [key]: e.target.value }));
+              }}
+              rows={1}
+              // TODO: autosize
+              maxRows={20}
+            />
+          </Flex>
         );
       })}
       {hasChanged && (
-        <Group spacing={4} position="right">
+        <HStack spacing={4}>
           <Button
             size="xs"
             onClick={() => {
@@ -58,7 +60,7 @@ export default function ScenarioHeader({ scenario }: { scenario: Scenario }) {
           <Button size="xs" onClick={onSave}>
             Save
           </Button>
-        </Group>
+        </HStack>
       )}
     </Stack>
   );

src/components/OutputsTable/VariantConfigEditor.tsx

@@ -1,7 +1,6 @@
-import { Box, Button, Group, Stack, Title, Tooltip } from "@mantine/core";
+import { Box, Button, HStack, Tooltip } from "@chakra-ui/react";
 import { useMonaco } from "@monaco-editor/react";
 import { useRef, useEffect, useState, useCallback } from "react";
-import { set } from "zod";
 import { useHandledAsyncCallback, useModifierKeyLabel } from "~/utils/hooks";
 
 let isThemeDefined = false;
@@ -109,23 +108,23 @@ export default function VariantConfigEditor(props: {
     <Box w="100%" pos="relative">
       <div id={editorId} style={{ height: "300px", width: "100%" }}></div>
       {isChanged && (
-        <Group sx={{ position: "absolute", bottom: 0, right: 0 }} spacing={4}>
+        <HStack pos="absolute" bottom={0} right={0} spacing={4}>
           <Button
+            colorScheme="gray"
             size="xs"
             onClick={() => {
               editorRef.current?.setValue(props.savedConfig);
               checkForChanges();
             }}
-            color="gray"
           >
             Reset
           </Button>
-          <Tooltip label={`${modifierKey} + Enter`} withArrow>
-            <Button size="xs" onClick={onSave}>
+          <Tooltip label={`${modifierKey} + Enter`}>
+            <Button size="xs" onClick={onSave} colorScheme="blue">
               Save
             </Button>
           </Tooltip>
-        </Group>
+        </HStack>
       )}
     </Box>
   );

src/components/OutputsTable/VariantHeader.tsx

@@ -1,15 +1,15 @@
-import { Stack, Title } from "@mantine/core";
 import { useCallback } from "react";
 import type { PromptVariant } from "./types";
 import { api } from "~/utils/api";
-import { notifications } from "@mantine/notifications";
 import { type JSONSerializable } from "~/server/types";
 import VariantConfigEditor from "./VariantConfigEditor";
 import EditableVariantLabel from "./EditableVariantLabel";
+import { Stack, useToast } from "@chakra-ui/react";
 
 export default function VariantHeader({ variant }: { variant: PromptVariant }) {
   const replaceWithConfig = api.promptVariants.replaceWithConfig.useMutation();
   const utils = api.useContext();
+  const toast = useToast();
 
   const onSave = useCallback(
     async (currentConfig: string) => {
@@ -17,10 +17,12 @@ export default function VariantHeader({ variant }: { variant: PromptVariant }) {
       try {
         parsedConfig = JSON.parse(currentConfig) as JSONSerializable;
       } catch (e) {
-        notifications.show({
+        toast({
           title: "Invalid JSON",
-          message: "Please fix the JSON before saving.",
-          color: "red",
+          description: "Please fix the JSON before saving.",
+          status: "error",
+          duration: 5000,
+          position: "top",
         });
         return;
       }

src/components/OutputsTable/index.tsx

@@ -4,11 +4,11 @@ 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";
+import { Box, Heading } from "@chakra-ui/react";
 
-const cellPaddingX = 8;
-const cellPaddingY = 4;
+const cellPaddingX = 4;
+const cellPaddingY = 2;
 
 export default function OutputsTable({ experimentId }: { experimentId: string | undefined }) {
   const variants = api.promptVariants.list.useQuery(
@@ -24,7 +24,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
   if (!variants.data || !scenarios.data) return null;
 
   return (
-    <Box p={12}>
+    <Box p={4}>
       <div
         style={{
           display: "grid",
@@ -33,7 +33,9 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
         }}
       >
         <Box px={cellPaddingX} py={cellPaddingY} display="flex" sx={{}}>
-          <Title order={4}>Scenario</Title>
+          <Heading size="md" fontWeight="bold">
+            Scenario
+          </Heading>
         </Box>
         {variants.data.map((variant) => (
           <Box key={variant.uiId} px={cellPaddingX} py={cellPaddingY}>