On click add experiment "from scratch", show experiment form in dialo…

…g, on form submit then add to store and run Tried to have dialog inside dropdown, but that did not work so made them siblings
classmodel · Sep 23, 2024 · d05d1b4 · d05d1b4
1 parent 0aa21ff
commit d05d1b4
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 7 deletions.
diff --git a/apps/class-solid/src/components/Experiment.tsx b/apps/class-solid/src/components/Experiment.tsx
@@ -10,6 +10,7 @@ import { Button, buttonVariants } from "~/components/ui/button";
 import { createArchive, toConfigBlob } from "~/lib/download";
 import {
   type Experiment,
+  addExperiment,
   deleteExperiment,
   duplicateExperiment,
   modifyExperiment,
@@ -40,6 +41,56 @@ import {
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
 
+export function AddExperimentDialog(props: {
+  nextIndex: number;
+  onClose: () => void;
+  open: boolean;
+}) {
+  const initialExperiment = () => {
+    return {
+      name: `My experiment ${props.nextIndex}`,
+      description: "",
+      reference: { config: {} },
+      permutations: [],
+      running: false,
+    };
+  };
+
+  function setOpen(value: boolean) {
+    if (!value) {
+      props.onClose();
+    }
+  }
+
+  return (
+    <Dialog open={props.open} onOpenChange={setOpen}>
+      <DialogContent class="min-w-[33%]">
+        <DialogHeader>
+          <DialogTitle class="mr-10">Experiment</DialogTitle>
+        </DialogHeader>
+        <ExperimentConfigForm
+          id="experiment-form"
+          experiment={initialExperiment()}
+          onSubmit={(newConfig) => {
+            props.onClose();
+            const { title, description, ...strippedConfig } = newConfig;
+            addExperiment(
+              strippedConfig,
+              title ?? initialExperiment().name,
+              description ?? initialExperiment().description,
+            );
+          }}
+        />
+        <DialogFooter>
+          <Button type="submit" form="experiment-form">
+            Run
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 export function ExperimentSettingsDialog(props: {
   experiment: Experiment;
   experimentIndex: number;

diff --git a/apps/class-solid/src/lib/store.ts b/apps/class-solid/src/lib/store.ts
@@ -106,21 +106,22 @@ function findExperiment(index: number) {
   return exp;
 }
 
-export function addExperiment(
+export async function addExperiment(
   config: Partial<ClassConfig> = {},
   name?: string,
+  description?: string,
 ) {
   const newExperiment: Experiment = {
     name: name ?? `My experiment ${experiments.length}`,
-    description: "Standard experiment",
+    description: description ?? "Standard experiment",
     reference: {
       config,
     },
     permutations: [],
     running: false,
   };
   setExperiments(experiments.length, newExperiment);
-  return newExperiment;
+  await runExperiment(experiments.length - 1);
 }
 
 const ExperimentConfigSchema = z.object({

diff --git a/apps/class-solid/src/routes/index.tsx b/apps/class-solid/src/routes/index.tsx
@@ -1,7 +1,7 @@
-import { For, Show } from "solid-js";
+import { For, Show, createSignal } from "solid-js";
 
 import { AnalysisCard, addAnalysis } from "~/components/Analysis";
-import { ExperimentCard } from "~/components/Experiment";
+import { AddExperimentDialog, ExperimentCard } from "~/components/Experiment";
 import { UploadExperiment } from "~/components/UploadExperiment";
 import { MdiPlusBox } from "~/components/icons";
 import {
@@ -14,10 +14,11 @@ import {
 } from "~/components/ui/dropdown-menu";
 import { Flex } from "~/components/ui/flex";
 
-import { addExperiment, experiments } from "~/lib/store";
+import { experiments } from "~/lib/store";
 import { analyses } from "~/lib/store";
 
 export default function Home() {
+  const [openAddDialog, setOpenAddDialog] = createSignal(false);
   return (
     <main class="mx-auto p-4 text-center text-gray-700">
       <h2 class="my-8 text-4xl">
@@ -30,7 +31,7 @@ export default function Home() {
             <DropdownMenuLabel>Add experiment</DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuItem
-              onClick={() => addExperiment()}
+              onClick={() => setOpenAddDialog(true)}
               class="cursor-pointer"
             >
               From scratch
@@ -44,6 +45,11 @@ export default function Home() {
           </DropdownMenuContent>
         </DropdownMenu>
       </h2>
+      <AddExperimentDialog
+        nextIndex={experiments.length + 1}
+        open={openAddDialog()}
+        onClose={() => setOpenAddDialog(false)}
+      />
 
       <Flex justifyContent="center" class="flex-wrap gap-4">
         <For each={experiments}>