Take output out of solid store + finer progress report

classmodel · Nov 8, 2024 · 0dff547 · 0dff547
1 parent c2ee658
commit 0dff547
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 100 deletions.
diff --git a/apps/class-solid/src/components/Analysis.tsx b/apps/class-solid/src/components/Analysis.tsx
@@ -1,6 +1,12 @@
-import { For, Match, Switch, createMemo, createUniqueId } from "solid-js";
+import { For, Match, Show, Switch, createMemo, createUniqueId } from "solid-js";
 import { getVerticalProfiles } from "~/lib/profiles";
-import { type Analysis, deleteAnalysis, experiments } from "~/lib/store";
+import {
+  type Analysis,
+  deleteAnalysis,
+  experiments,
+  outputForExperiment,
+  outputForPermutation,
+} from "~/lib/store";
 import LinePlot from "./LinePlot";
 import { MdiCog, MdiContentCopy, MdiDelete, MdiDownload } from "./icons";
 import { Button } from "./ui/button";
@@ -29,21 +35,23 @@ const linestyles = ["none", "5,5", "10,10", "15,5,5,5", "20,10,5,5,5,10"];
 export function TimeSeriesPlot() {
   const chartData = createMemo(() => {
     return experiments
-      .filter((e) => e.reference.output)
+      .filter((e) => e.running === false) // Skip running experiments
       .flatMap((e, i) => {
+        const experimentOutput = outputForExperiment(e);
         const permutationRuns = e.permutations.map((perm, j) => {
+          const permOutput = outputForPermutation(experimentOutput, j);
           return {
             label: `${e.name}/${perm.name}`,
-            y: perm.output === undefined ? [] : perm.output.h,
-            x: perm.output === undefined ? [] : perm.output.t,
+            y: permOutput.h ?? [],
+            x: permOutput.t ?? [],
             color: colors[(j + 1) % 10],
             linestyle: linestyles[i % 5],
           };
         });
         return [
           {
-            y: e.reference.output === undefined ? [] : e.reference.output.h,
-            x: e.reference.output === undefined ? [] : e.reference.output.t,
+            y: experimentOutput?.reference.h ?? [],
+            x: experimentOutput?.reference.t ?? [],
             label: e.name,
             color: colors[0],
             linestyle: linestyles[i],
@@ -66,33 +74,42 @@ export function VerticalProfilePlot() {
   const variable = "theta";
   const time = -1;
   const profileData = createMemo(() => {
-    return experiments.flatMap((e, i) => {
-      const permutations = e.permutations.map((p, j) => {
-        // TODO get additional config info from reference
-        // permutations probably usually don't have gammaq/gammatetha set?
-        return {
-          color: colors[(j + 1) % 10],
-          linestyle: linestyles[i % 5],
-          label: `${e.name}/${p.name}`,
-          ...getVerticalProfiles(p.output, p.config, variable, time),
-        };
-      });
+    return experiments
+      .filter((e) => e.running === false) // Skip running experiments
+      .flatMap((e, i) => {
+        const experimentOutput = outputForExperiment(e);
+        const permutations = e.permutations.map((p, j) => {
+          // TODO get additional config info from reference
+          // permutations probably usually don't have gammaq/gammatetha set?
+          const permOutput = outputForPermutation(experimentOutput, j);
+          return {
+            color: colors[(j + 1) % 10],
+            linestyle: linestyles[i % 5],
+            label: `${e.name}/${p.name}`,
+            ...getVerticalProfiles(permOutput, p.config, variable, time),
+          };
+        });
 
-      return [
-        {
-          label: e.name,
-          color: colors[0],
-          linestyle: linestyles[i],
-          ...getVerticalProfiles(
-            e.reference.output,
-            e.reference.config,
-            variable,
-            time,
-          ),
-        },
-        ...permutations,
-      ];
-    });
+        return [
+          {
+            label: e.name,
+            color: colors[0],
+            linestyle: linestyles[i],
+            ...getVerticalProfiles(
+              experimentOutput?.reference ?? {
+                t: [],
+                h: [],
+                theta: [],
+                dtheta: [],
+              },
+              e.reference.config,
+              variable,
+              time,
+            ),
+          },
+          ...permutations,
+        ];
+      });
   });
   return (
     <LinePlot
@@ -109,26 +126,39 @@ function FinalHeights() {
     <ul>
       <For each={experiments}>
         {(experiment) => {
-          const h = () =>
-            experiment.reference.output?.h[
-              experiment.reference.output.h.length - 1
-            ] || 0;
+          const h = () => {
+            const experimentOutput = outputForExperiment(experiment);
+            return (
+              experimentOutput?.reference.h[
+                experimentOutput.reference.h.length - 1
+              ] || 0
+            );
+          };
           return (
-            <>
+            <Show when={!experiment.running}>
               <li class="mb-2" title={experiment.name}>
                 {experiment.name}: {h().toFixed()} m
               </li>
               <For each={experiment.permutations}>
-                {(perm) => {
-                  const h = () => perm.output?.h[perm.output.h.length - 1] || 0;
+                {(perm, permIndex) => {
+                  const h = () => {
+                    const experimentOutput = outputForExperiment(experiment);
+                    const permOutput = outputForPermutation(
+                      experimentOutput,
+                      permIndex(),
+                    );
+                    return permOutput.h?.length
+                      ? permOutput.h[permOutput.h.length - 1]
+                      : 0;
+                  };
                   return (
                     <li title={`${experiment.name}/${perm.name}`}>
                       {experiment.name}/{perm.name}: {h().toFixed()} m
                     </li>
                   );
                 }}
               </For>
-            </>
+            </Show>
           );
         }}
       </For>

diff --git a/apps/class-solid/src/components/Experiment.tsx b/apps/class-solid/src/components/Experiment.tsx
@@ -52,7 +52,7 @@ export function AddExperimentDialog(props: {
       description: "",
       reference: { config: {} },
       permutations: [],
-      running: false,
+      running: false as const,
     };
   };
 
@@ -130,14 +130,15 @@ export function ExperimentSettingsDialog(props: {
   );
 }
 
-function RunningIndicator() {
+function RunningIndicator(props: { progress: number | false }) {
   return (
-    <div class="flex">
+    <div class="flex" role="status" aria-live="polite">
       <svg
         class="-ml-1 mr-3 h-5 w-5 animate-spin"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
+        aria-hidden="true"
       >
         <title>Running</title>
         <circle
@@ -154,7 +155,9 @@ function RunningIndicator() {
           d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
         />
       </svg>
-      <span>Running ...</span>
+      <span>
+        Running {props.progress ? (props.progress * 100).toFixed() : 100}% ...
+      </span>
     </div>
   );
 }
@@ -180,6 +183,9 @@ function DownloadExperimentArchive(props: { experiment: Experiment }) {
   const [url, setUrl] = createSignal<string>("");
   createEffect(async () => {
     const archive = await createArchive(props.experiment);
+    if (!archive) {
+      return;
+    }
     const objectUrl = URL.createObjectURL(archive);
     setUrl(objectUrl);
     onCleanup(() => URL.revokeObjectURL(objectUrl));
@@ -242,7 +248,10 @@ export function ExperimentCard(props: {
         />
       </CardContent>
       <CardFooter>
-        <Show when={!experiment().running} fallback={<RunningIndicator />}>
+        <Show
+          when={!experiment().running}
+          fallback={<RunningIndicator progress={experiment().running} />}
+        >
           <DownloadExperiment experiment={experiment()} />
           <ExperimentSettingsDialog
             experiment={experiment()}

diff --git a/apps/class-solid/src/lib/download.ts b/apps/class-solid/src/lib/download.ts
@@ -1,7 +1,7 @@
 import type { ClassOutput } from "@classmodel/class/runner";
 import type { ExperimentConfigSchema } from "@classmodel/class/validate";
 import { BlobReader, BlobWriter, ZipWriter } from "@zip.js/zip.js";
-import type { Experiment } from "./store";
+import { type Experiment, outputForExperiment } from "./store";
 
 export function toConfig(experiment: Experiment): ExperimentConfigSchema {
   return {
@@ -40,22 +40,29 @@ export async function createArchive(experiment: Experiment) {
     type: "application/json",
   });
   await zipWriter.add("config.json", new BlobReader(configBlob));
+  const output = outputForExperiment(experiment);
+  if (!output) {
+    return;
+  }
 
-  if (experiment.reference.output) {
-    const csvBlob = new Blob([outputToCsv(experiment.reference.output)], {
+  if (output.reference) {
+    const csvBlob = new Blob([outputToCsv(output.reference)], {
       type: "text/csv",
     });
     await zipWriter.add(`${experiment.name}.csv`, new BlobReader(csvBlob));
   }
 
-  for (const permutation of experiment.permutations) {
-    const output = permutation.output;
-    if (output) {
-      const csvBlob = new Blob([outputToCsv(output)], {
+  let permIndex = 0;
+  for (const perm of experiment.permutations) {
+    const name = perm.name;
+    const permutationOutput = output.permutations[permIndex];
+    if (output && name) {
+      const csvBlob = new Blob([outputToCsv(permutationOutput)], {
         type: "text/csv",
       });
-      await zipWriter.add(`${permutation.name}.csv`, new BlobReader(csvBlob));
+      await zipWriter.add(`${name}.csv`, new BlobReader(csvBlob));
     }
+    permIndex++;
   }
   await zipWriter.close();
   return await zipFileWriter.getData();