saving prompt configs works

src/components/OutputsTable/VariantConfigEditor.tsx

@@ -0,0 +1,78 @@
+import { Box, Button, Stack, Title } from "@mantine/core";
+import { useMonaco } from "@monaco-editor/react";
+import { useRef, useEffect, useState } from "react";
+import { set } from "zod";
+import { useHandledAsyncCallback } from "~/utils/hooks";
+
+let isThemeDefined = false;
+
+export default function VariantConfigEditor(props: {
+  initialConfig: string;
+  onSave: (currentConfig: string) => Promise<void>;
+}) {
+  const monaco = useMonaco();
+  const editorRef = useRef<ReturnType<NonNullable<typeof monaco>["editor"]["create"]> | null>(null);
+  const [editorId] = useState(() => `editor_${Math.random().toString(36).substring(7)}`);
+  const [isChanged, setIsChanged] = useState(false);
+
+  const [onSave] = useHandledAsyncCallback(async () => {
+    const currentConfig = editorRef.current?.getValue();
+    if (!currentConfig) return;
+    await props.onSave(currentConfig);
+  }, [props.onSave]);
+
+  useEffect(() => {
+    if (monaco) {
+      if (!isThemeDefined) {
+        monaco.editor.defineTheme("customTheme", {
+          base: "vs",
+          inherit: true,
+          rules: [],
+          colors: {
+            "editor.background": "#fafafa",
+          },
+        });
+        isThemeDefined = true;
+      }
+
+      editorRef.current = monaco.editor.create(document.getElementById(editorId) as HTMLElement, {
+        value: props.initialConfig,
+        language: "json",
+        theme: "customTheme",
+        lineNumbers: "off",
+        minimap: { enabled: false },
+        wrappingIndent: "indent",
+        wrappingStrategy: "advanced",
+        wordWrap: "on",
+        folding: false,
+        scrollbar: { vertical: "hidden", alwaysConsumeMouseWheel: false },
+        wordWrapBreakAfterCharacters: "",
+        wordWrapBreakBeforeCharacters: "",
+      });
+
+      editorRef.current.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, onSave);
+
+      editorRef.current.onDidChangeModelContent(() => {
+        const currentConfig = editorRef.current?.getValue();
+        if (currentConfig !== props.initialConfig) {
+          setIsChanged(true);
+        } else {
+          setIsChanged(false);
+        }
+      });
+
+      return () => editorRef.current?.dispose();
+    }
+  }, [monaco, editorId, props.initialConfig, onSave]);
+
+  return (
+    <Box w="100%" pos="relative">
+      <div id={editorId} style={{ height: "300px", width: "100%" }}></div>
+      {isChanged && (
+        <Button size="xs" sx={{ position: "absolute", bottom: 0, right: 0 }} onClick={onSave}>
+          Save
+        </Button>
+      )}
+    </Box>
+  );
+}

src/components/OutputsTable/VariantHeader.tsx

@@ -1,59 +1,59 @@
-import { Header, Stack, Title } from "@mantine/core";
-import { PromptVariant } from "@prisma/client";
+import { Button, Stack, Title } from "@mantine/core";
 import { useMonaco } from "@monaco-editor/react";
-import { useEffect, useRef, useState } from "react";
-
-let isThemeDefined = false;
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { PromptVariant } from "./types";
+import { api } from "~/utils/api";
+import { useHandledAsyncCallback } from "~/utils/hooks";
+import { notifications } from "@mantine/notifications";
+import { type JSONSerializable } from "~/server/types";
+import VariantConfigEditor from "./VariantConfigEditor";
 
 export default function VariantHeader({ variant }: { variant: PromptVariant }) {
-  const monaco = useMonaco();
-  const editorRef = useRef(null);
-  const [editorId] = useState(() => `editor_${Math.random().toString(36).substring(7)}`);
+  const replaceWithConfig = api.promptVariants.replaceWithConfig.useMutation();
+  const utils = api.useContext();
 
-  useEffect(() => {
-    if (monaco && !isThemeDefined) {
-      monaco.editor.defineTheme("customTheme", {
-        base: "vs",
-        inherit: true,
-        rules: [],
-        colors: {
-          "editor.background": "#fafafa",
-        },
-      });
-      isThemeDefined = true;
-    }
-  }, [monaco]);
-
-  useEffect(() => {
-    if (monaco) {
-      editorRef.current = monaco.editor.create(document.getElementById(editorId), {
-        value: JSON.stringify(variant.config, null, 2),
-        language: "json",
-        theme: "customTheme",
-        lineNumbers: "off",
-        minimap: { enabled: false },
-        wrappingIndent: "indent",
-        wrappingStrategy: "advanced",
-        wordWrap: "on",
-        folding: false,
-        scrollbar: { vertical: "hidden" },
-        wordWrapBreakAfterCharacters: "",
-        wordWrapBreakBeforeCharacters: "",
-      });
-    }
-
-    // Clean up the editor instance on unmount
-    return () => {
-      if (editorRef.current) {
-        editorRef.current.dispose();
+  const onSave = useCallback(
+    async (currentConfig: string) => {
+      let parsedConfig: JSONSerializable;
+      try {
+        parsedConfig = JSON.parse(currentConfig) as JSONSerializable;
+      } catch (e) {
+        notifications.show({
+          title: "Invalid JSON",
+          message: "Please fix the JSON before saving.",
+          color: "red",
+        });
+        return;
       }
-    };
-  }, [monaco, variant, editorId]);
+
+      if (parsedConfig === null) {
+        notifications.show({
+          title: "Invalid JSON",
+          message: "Please fix the JSON before saving.",
+          color: "red",
+        });
+        return;
+      }
+
+      await replaceWithConfig.mutateAsync({
+        id: variant.id,
+        config: currentConfig,
+      });
+
+      await utils.promptVariants.list.invalidate();
+
+      // TODO: invalidate the variants query
+    },
+    [variant.id, replaceWithConfig]
+  );
 
   return (
     <Stack w="100%">
       <Title order={4}>{variant.label}</Title>
-      <div id={editorId} style={{ height: "300px", width: "100%" }}></div>
+      <VariantConfigEditor
+        initialConfig={JSON.stringify(variant.config, null, 2)}
+        onSave={onSave}
+      />
     </Stack>
   );
 }

src/components/OutputsTable/index.tsx

@@ -30,8 +30,12 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
     { enabled: !!experimentId }
   );
 
-  const columns = useMemo<MRT_ColumnDef<TableRow>[]>(
-    () => [
+  const columns = useMemo<MRT_ColumnDef<TableRow>[]>(() => {
+    console.log(
+      "rebuilding cols",
+      variants.data?.map((variant) => variant.label)
+    );
+    return [
       {
         id: "scenario",
         header: "Scenario",
@@ -50,9 +54,8 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
           Cell: ({ row }) => <OutputCell scenario={row.original.scenario} variant={variant} />,
         })
       ) ?? []),
-    ],
-    [variants.data]
-  );
+    ];
+  }, [variants.data]);
 
   const tableData = useMemo(
     () =>
@@ -84,6 +87,9 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
       enableHiding={false}
       enableColumnActions={false}
       enableColumnResizing
+      state={{
+        columnOrder: ["scenario", ...variants.data.map((variant) => variant.id)],
+      }}
       mantineTableProps={{
         sx: {
           th: {