Replace experiment.id with index

classmodel · Sep 23, 2024 · 0aa21ff · 0aa21ff
1 parent eecbbd2
commit 0aa21ff
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 94 deletions.
diff --git a/apps/class-solid/src/components/Experiment.tsx b/apps/class-solid/src/components/Experiment.tsx
@@ -40,10 +40,11 @@ import {
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
 
-export function ExperimentSettingsDialog(experiment: Experiment) {
-  const [open, setOpen] = createSignal(
-    experiment.reference.output === undefined,
-  );
+export function ExperimentSettingsDialog(props: {
+  experiment: Experiment;
+  experimentIndex: number;
+}) {
+  const [open, setOpen] = createSignal(false);
 
   return (
     <Dialog open={open()} onOpenChange={setOpen}>
@@ -56,15 +57,15 @@ export function ExperimentSettingsDialog(experiment: Experiment) {
         </DialogHeader>
         <ExperimentConfigForm
           id="experiment-form"
-          experiment={experiment}
+          experiment={props.experiment}
           onSubmit={(newConfig) => {
             setOpen(false);
             const { title, description, ...strippedConfig } = newConfig;
             modifyExperiment(
-              experiment.id,
+              props.experimentIndex,
               strippedConfig,
-              title ?? experiment.name,
-              description ?? experiment.description,
+              title ?? props.experiment.name,
+              description ?? props.experiment.description,
             );
           }}
         />
@@ -133,7 +134,7 @@ function DownloadExperimentArchive(props: { experiment: Experiment }) {
     onCleanup(() => URL.revokeObjectURL(objectUrl));
   });
 
-  const filename = `class-${props.experiment.id}.zip`;
+  const filename = `class-${props.experiment.name}.zip`;
   return (
     <a href={url()} download={filename} type="application/json">
       Config + output
@@ -162,31 +163,42 @@ function DownloadExperiment(props: { experiment: Experiment }) {
   );
 }
 
-export function ExperimentCard(experiment: Experiment) {
+export function ExperimentCard(props: {
+  experiment: Experiment;
+  experimentIndex: number;
+}) {
+  const experiment = () => props.experiment;
+  const experimentIndex = () => props.experimentIndex;
   return (
     <Card class="w-[380px]">
       <CardHeader>
-        <CardTitle>{experiment.name}</CardTitle>
-        <CardDescription>{experiment.description}</CardDescription>
+        <CardTitle>{experiment().name}</CardTitle>
+        <CardDescription>{experiment().description}</CardDescription>
       </CardHeader>
       <CardContent>
-        <PermutationsList experiment={experiment} />
+        <PermutationsList
+          experiment={experiment()}
+          experimentIndex={experimentIndex()}
+        />
       </CardContent>
       <CardFooter>
-        <Show when={!experiment.running} fallback={<RunningIndicator />}>
-          <DownloadExperiment experiment={experiment} />
-          <ExperimentSettingsDialog {...experiment} />
+        <Show when={!experiment().running} fallback={<RunningIndicator />}>
+          <DownloadExperiment experiment={experiment()} />
+          <ExperimentSettingsDialog
+            experiment={experiment()}
+            experimentIndex={experimentIndex()}
+          />
           <Button
             variant="outline"
             title="Duplicate experiment"
-            onClick={() => duplicateExperiment(experiment.id)}
+            onClick={() => duplicateExperiment(experimentIndex())}
           >
             <MdiContentCopy />
           </Button>
           <Button
             variant="outline"
             title="Delete experiment"
-            onClick={() => deleteExperiment(experiment.id)}
+            onClick={() => deleteExperiment(experimentIndex())}
           >
             <MdiDelete />
           </Button>

diff --git a/apps/class-solid/src/components/PermutationsList.tsx b/apps/class-solid/src/components/PermutationsList.tsx
@@ -55,7 +55,7 @@ function PermutationConfigForm(props: {
     },
   });
 
-  const handleSubmit: SubmitHandler<ClassConfig> = (values, event) => {
+  const handleSubmit: SubmitHandler<ClassConfig> = (values: ClassConfig) => {
     // Parse only for validation
     const data = classConfig.parse(values);
     // TODO if parse fails, show error
@@ -80,7 +80,10 @@ function PermutationConfigForm(props: {
   );
 }
 
-function AddPermutationButton(props: { experiment: Experiment }) {
+function AddPermutationButton(props: {
+  experiment: Experiment;
+  experimentIndex: number;
+}) {
   const [open, setOpen] = createSignal(false);
   const permutationName = `${props.experiment.permutations.length + 1}`;
   return (
@@ -97,7 +100,7 @@ function AddPermutationButton(props: { experiment: Experiment }) {
         <DialogHeader>
           <DialogTitle class="mr-10">
             Permutation on reference configuration of experiment{" "}
-            {props.experiment.id}
+            {props.experiment.name}
           </DialogTitle>
         </DialogHeader>
         <PermutationConfigForm
@@ -107,7 +110,7 @@ function AddPermutationButton(props: { experiment: Experiment }) {
           onSubmit={(config) => {
             const { title, description, ...strippedConfig } = config;
             setPermutationConfigInExperiment(
-              props.experiment.id,
+              props.experimentIndex,
               -1,
               strippedConfig,
               title ?? permutationName,
@@ -127,6 +130,7 @@ function AddPermutationButton(props: { experiment: Experiment }) {
 
 function EditPermutationButton(props: {
   experiment: Experiment;
+  experimentIndex: number;
   permutationIndex: number;
 }) {
   const [open, setOpen] = createSignal(false);
@@ -145,7 +149,7 @@ function EditPermutationButton(props: {
         <DialogHeader>
           <DialogTitle>
             Permutation on reference configuration of experiment{" "}
-            {props.experiment.id}
+            {props.experiment.name}
           </DialogTitle>
         </DialogHeader>
         <PermutationConfigForm
@@ -155,7 +159,7 @@ function EditPermutationButton(props: {
           onSubmit={(config) => {
             const { title, description, ...strippedConfig } = config;
             setPermutationConfigInExperiment(
-              props.experiment.id,
+              props.experimentIndex,
               props.permutationIndex,
               strippedConfig,
               title ?? permutationName,
@@ -208,6 +212,7 @@ function PermutationDifferenceButton(props: {
 
 function PermutationInfo(props: {
   experiment: Experiment;
+  experimentIndex: number;
   permutationIndex: number;
   perm: Permutation;
 }) {
@@ -220,6 +225,7 @@ function PermutationInfo(props: {
       />
       <EditPermutationButton
         experiment={props.experiment}
+        experimentIndex={props.experimentIndex}
         permutationIndex={props.permutationIndex}
       />
       <DropdownMenu>
@@ -234,7 +240,7 @@ function PermutationInfo(props: {
           <DropdownMenuItem
             onClick={() =>
               deletePermutationFromExperiment(
-                props.experiment.id,
+                props.experimentIndex,
                 props.permutationIndex,
               )
             }
@@ -243,15 +249,18 @@ function PermutationInfo(props: {
           </DropdownMenuItem>
           <DropdownMenuItem
             onClick={() => {
-              duplicatePermutation(props.experiment.id, props.permutationIndex);
+              duplicatePermutation(
+                props.experimentIndex,
+                props.permutationIndex,
+              );
             }}
           >
             <MdiContentCopy /> Duplicate permutation
           </DropdownMenuItem>
           <DropdownMenuItem
             onClick={() => {
               promotePermutationToExperiment(
-                props.experiment.id,
+                props.experimentIndex,
                 props.permutationIndex,
               );
             }}
@@ -261,7 +270,7 @@ function PermutationInfo(props: {
           <DropdownMenuItem
             onClick={() => {
               swapPermutationAndReferenceConfiguration(
-                props.experiment.id,
+                props.experimentIndex,
                 props.permutationIndex,
               );
             }}
@@ -274,18 +283,25 @@ function PermutationInfo(props: {
   );
 }
 
-export function PermutationsList(props: { experiment: Experiment }) {
+export function PermutationsList(props: {
+  experimentIndex: number;
+  experiment: Experiment;
+}) {
   return (
     <fieldset class="border">
       <legend class="flex flex-row items-center gap-2">
         Permutations
-        <AddPermutationButton experiment={props.experiment} />
+        <AddPermutationButton
+          experiment={props.experiment}
+          experimentIndex={props.experimentIndex}
+        />
       </legend>
       <ul>
         <For each={props.experiment.permutations}>
           {(perm, permutationIndex) => (
             <li>
               <PermutationInfo
+                experimentIndex={props.experimentIndex}
                 experiment={props.experiment}
                 permutationIndex={permutationIndex()}
                 perm={perm}