Separate config modification from experiment creation + implement dup…

…licate and configure functionality"
classmodel · Aug 8, 2024 · 748e44b · 748e44b
1 parent d9fbc23
commit 748e44b
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 49 deletions.
diff --git a/apps/class-solid/src/components/Experiment.tsx b/apps/class-solid/src/components/Experiment.tsx
@@ -1,6 +1,7 @@
 import { type ClassConfig, classConfig } from "@classmodel/class/config";
 import type { ClassOutput } from "@classmodel/class/runner";
 import { createSignal, createUniqueId } from "solid-js";
+import { unwrap } from "solid-js/store";
 import { Button } from "~/components/ui/button";
 import { runClass } from "~/lib/runner";
 import { experiments, setExperiments } from "~/lib/store";
@@ -32,56 +33,67 @@ export interface Experiment {
   output: ClassOutput | undefined;
 }
 
-export async function addDefaultExperiment() {
+export async function runExperiment(id: string) {
+  const expProxy = experiments.find((exp) => exp.id === id);
+  if (!expProxy) {
+    throw new Error("No experiment with id {id}");
+  }
+  const exp = unwrap(expProxy);
+  const newOutput = await runClass(exp.config);
+  setExperiments((e) => e.id === exp.id, "output", newOutput);
+}
+
+export function addExperiment() {
   const id = createUniqueId();
   const config = classConfig.parse({});
-  const output = await runClass(config);
-  const newExperiment = {
+  const newExperiment: Experiment = {
     name: "My experiment",
-    description: "Default experiment",
+    description: "Standard experiment",
     id,
     config,
-    output,
+    output: undefined,
   };
   setExperiments(experiments.length, newExperiment);
+  return newExperiment;
 }
 
-export function AddCustomExperiment() {
-  const config = classConfig.parse({});
-  const [open, setOpen] = createSignal(false);
+export function duplicateExperiment(id: string) {
+  const newId = createUniqueId();
+  const copy = experiments.find((e) => e.id === id);
+  setExperiments(experiments.length, { ...copy, id: newId });
+}
+
+function deleteExperiment(id: string) {
+  setExperiments(experiments.filter((exp) => exp.id !== id));
+}
+
+export function ModifyExperiment(experiment: Experiment) {
+  const [open, setOpen] = createSignal(true);
   return (
     <Dialog open={open()} onOpenChange={setOpen}>
-      <DialogTrigger variant="outline" size="lg" as={Button<"button">}>
-        Add custom experiment
+      <DialogTrigger variant="outline" as={Button<"button">}>
+        <MdiCog />
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Add custom experiment</DialogTitle>
-          <DialogDescription>
-            Configure your custom experiment here.
-          </DialogDescription>
+          <DialogTitle>Experiment {experiment.id}</DialogTitle>
+          <DialogDescription>{experiment.description}</DialogDescription>
         </DialogHeader>
         <ExperimentConfigForm
-          // TODO: not sure if passing around ids like this is the proper way to do things in solidjs
-          // note, id ius used as form target in submit button below;
-          id="experiment-config-form"
-          config={config}
+          id={experiment.id}
+          config={experiment.config}
           onSubmit={async (config) => {
-            const id = createUniqueId();
-            const output = await runClass(config);
-            const newExperiment = {
-              name: "My experiment",
-              description: "Custom experiment",
-              id,
+            setExperiments(
+              (exp, i) => exp.id === experiment.id,
+              "config",
               config,
-              output,
-            };
-            setExperiments(experiments.length, newExperiment);
+            );
             setOpen(false);
+            await runExperiment(experiment.id);
           }}
         />
         <DialogFooter>
-          <Button type="submit" form="experiment-config-form">
+          <Button type="submit" form={experiment.id}>
             Run
           </Button>
         </DialogFooter>
@@ -90,10 +102,6 @@ export function AddCustomExperiment() {
   );
 }
 
-function deleteExperiment(experiment: Experiment) {
-  setExperiments(experiments.filter((exp) => exp.id !== experiment.id));
-}
-
 export function ExperimentCard(experiment: Experiment) {
   return (
     <Card class="w-[380px]">
@@ -108,15 +116,14 @@ export function ExperimentCard(experiment: Experiment) {
         <Button variant="outline">
           <MdiDownload />
         </Button>
-        {/* TODO: implement "configure" functionality */}
-        <Button variant="outline">
-          <MdiCog />
-        </Button>
-        {/* TODO: implement duplicate functionality */}
+        <ModifyExperiment {...experiment} />
         <Button variant="outline">
-          <MdiContentCopy />
+          <MdiContentCopy onClick={() => duplicateExperiment(experiment.id)} />
         </Button>
-        <Button variant="outline" onClick={() => deleteExperiment(experiment)}>
+        <Button
+          variant="outline"
+          onClick={() => deleteExperiment(experiment.id)}
+        >
           <MdiDelete />
         </Button>
       </CardFooter>

diff --git a/apps/class-solid/src/routes/index.tsx b/apps/class-solid/src/routes/index.tsx
@@ -1,11 +1,7 @@
 import { For, Show } from "solid-js";
 
 import { AnalysisCard, addAnalysis } from "~/components/Analysis";
-import {
-  AddCustomExperiment,
-  ExperimentCard,
-  addDefaultExperiment,
-} from "~/components/Experiment";
+import { ExperimentCard, addExperiment } from "~/components/Experiment";
 import { Button } from "~/components/ui/button";
 import { Flex } from "~/components/ui/flex";
 
@@ -26,13 +22,10 @@ export default function Home() {
         </For>
         <div>
           <div>
-            <Button variant="outline" size="lg" onClick={addDefaultExperiment}>
-              Add default experiment
+            <Button variant="outline" size="lg" onClick={addExperiment}>
+              Add experiment
             </Button>
           </div>
-          <div>
-            <AddCustomExperiment />
-          </div>
           <div>
             <Button variant="outline" size="lg">
               Upload experiment config (not implemented)