Merge pull request #80 from classmodel/presets

Add presets

Author: sverhoeven

apps/class-solid/README.md

@@ -48,3 +48,16 @@ pnpm test -- --ui --headed
 This allows you to trigger tests from the [playwright ui](https://playwright.dev/docs/test-ui-mode) and enable [watch mode](https://playwright.dev/docs/test-ui-mode#watch-mode).
 
 ## This project was created with the [Solid CLI](https://solid-cli.netlify.app)
+
+## Presets
+
+An experiment can get started from a preset.
+
+The presets are stored in the `src/lib/presets/` directory.
+The format is JSON with content adhering to the [JSON schema](https://github.com/classmodel/class-web/blob/main/packages/class/src/config.json).
+
+The `src/lib/presets.ts` is used as an index of presets.
+If you add a preset the `src/lib/presets.ts` file needs to be updated.
+
+An experiment from a preset can be opened from a url like `?preset=<preset-name>`.
+For example to load <src/lib/presets/death-valley.json> use `http://localhost:3000/?preset=Death%20Valley`.

apps/class-solid/src/components/Analysis.tsx

@@ -1,6 +1,6 @@
 import { BmiClass } from "@classmodel/class/bmi";
+import type { Config } from "@classmodel/class/config";
 import type { ClassOutput } from "@classmodel/class/runner";
-import type { PartialConfig } from "@classmodel/class/validate";
 import {
   type Accessor,
   For,
@@ -59,30 +59,33 @@ interface FlatExperiment {
   label: string;
   color: string;
   linestyle: string;
-  config: PartialConfig;
+  config: Config;
   output?: ClassOutput;
 }
 
 // Create a derived store for looping over all outputs:
 const flatExperiments: () => FlatExperiment[] = createMemo(() => {
   return experiments
-    .filter((e) => e.running === false) // skip running experiments
+    .filter((e) => e.output.running === false) // skip running experiments
     .flatMap((e, i) => {
       const reference = {
         color: colors[0],
         linestyle: linestyles[i % 5],
-        label: e.name,
-        config: e.reference.config,
-        output: e.reference.output,
+        label: e.config.reference.name,
+        config: e.config.reference,
+        output: e.output.reference,
       };
 
-      const permutations = e.permutations.map((p, j) => ({
-        label: `${e.name}/${p.name}`,
-        color: colors[(j + 1) % 10],
-        linestyle: linestyles[i % 5],
-        config: p.config,
-        output: p.output,
-      }));
+      const permutations = e.config.permutations.map((config, j) => {
+        const output = e.output.permutations[j];
+        return {
+          label: `${e.config.reference.name}/${config.name}`,
+          color: colors[(j + 1) % 10],
+          linestyle: linestyles[i % 5],
+          config,
+          output,
+        };
+      });
       return [reference, ...permutations];
     });
 });

apps/class-solid/src/components/Experiment.tsx

@@ -6,8 +6,10 @@ import {
   createUniqueId,
   onCleanup,
 } from "solid-js";
+import { unwrap } from "solid-js/store";
 import { Button, buttonVariants } from "~/components/ui/button";
 import { createArchive, toConfigBlob } from "~/lib/download";
+import { findPresetByName } from "~/lib/presets";
 import {
   type Experiment,
   addExperiment,
@@ -46,15 +48,17 @@ export function AddExperimentDialog(props: {
   onClose: () => void;
   open: boolean;
 }) {
-  const initialExperiment = () => {
+  const defaultPreset = findPresetByName();
+  const initialExperimentConfig = createMemo(() => {
     return {
-      name: `My experiment ${props.nextIndex}`,
-      description: "",
-      reference: { config: {} },
+      preset: "Default",
+      reference: {
+        ...structuredClone(defaultPreset.config),
+        name: `My experiment ${props.nextIndex}`,
+      },
       permutations: [],
-      running: false as const,
     };
-  };
+  });
 
   function setOpen(value: boolean) {
     if (!value) {
@@ -66,19 +70,19 @@ export function AddExperimentDialog(props: {
     <Dialog open={props.open} onOpenChange={setOpen}>
       <DialogContent class="min-w-[33%]">
         <DialogHeader>
-          <DialogTitle class="mr-10">Experiment</DialogTitle>
+          <DialogTitle class="mr-10 flex justify-between gap-1">
+            Experiment
+            <span class="text-gray-300 text-sm ">
+              Preset: {defaultPreset.config.name}
+            </span>
+          </DialogTitle>
         </DialogHeader>
         <ExperimentConfigForm
           id="experiment-form"
-          experiment={initialExperiment()}
+          experiment={initialExperimentConfig()}
           onSubmit={(newConfig) => {
             props.onClose();
-            const { title, description, ...strippedConfig } = newConfig;
-            addExperiment(
-              strippedConfig,
-              title ?? initialExperiment().name,
-              description ?? initialExperiment().description,
-            );
+            addExperiment(newConfig);
           }}
         />
         <DialogFooter>
@@ -104,20 +108,19 @@ export function ExperimentSettingsDialog(props: {
       </DialogTrigger>
       <DialogContent class="min-w-[33%]">
         <DialogHeader>
-          <DialogTitle class="mr-10">Experiment</DialogTitle>
+          <DialogTitle class="mr-10 flex justify-between gap-1">
+            Experiment
+            <span class="text-gray-300 text-sm ">
+              Preset: {props.experiment.config.preset}
+            </span>
+          </DialogTitle>
         </DialogHeader>
         <ExperimentConfigForm
           id="experiment-form"
-          experiment={props.experiment}
+          experiment={props.experiment.config}
           onSubmit={(newConfig) => {
             setOpen(false);
-            const { title, description, ...strippedConfig } = newConfig;
-            modifyExperiment(
-              props.experimentIndex,
-              strippedConfig,
-              title ?? props.experiment.name,
-              description ?? props.experiment.description,
-            );
+            modifyExperiment(props.experimentIndex, newConfig);
           }}
         />
         <DialogFooter>
@@ -164,14 +167,14 @@ function RunningIndicator(props: { progress: number | false }) {
 
 function DownloadExperimentConfiguration(props: { experiment: Experiment }) {
   const downloadUrl = createMemo(() => {
-    return URL.createObjectURL(toConfigBlob(props.experiment));
+    return URL.createObjectURL(toConfigBlob(unwrap(props.experiment.config)));
   });
 
   onCleanup(() => {
     URL.revokeObjectURL(downloadUrl());
   });
 
-  const filename = `class-${props.experiment.name}.json`;
+  const filename = `class-${props.experiment.config.reference.name}.json`;
   return (
     <a href={downloadUrl()} download={filename} type="application/json">
       Configuration
@@ -182,7 +185,7 @@ function DownloadExperimentConfiguration(props: { experiment: Experiment }) {
 function DownloadExperimentArchive(props: { experiment: Experiment }) {
   const [url, setUrl] = createSignal<string>("");
   createEffect(async () => {
-    const archive = await createArchive(props.experiment);
+    const archive = await createArchive(unwrap(props.experiment));
     if (!archive) {
       return;
     }
@@ -191,7 +194,7 @@ function DownloadExperimentArchive(props: { experiment: Experiment }) {
     onCleanup(() => URL.revokeObjectURL(objectUrl));
   });
 
-  const filename = `class-${props.experiment.name}.zip`;
+  const filename = `class-${props.experiment.config.reference.name}.zip`;
   return (
     <a href={url()} download={filename} type="application/zip">
       Configuration and output
@@ -236,9 +239,9 @@ export function ExperimentCard(props: {
       aria-describedby={descriptionId}
     >
       <CardHeader>
-        <CardTitle id={id}>{experiment().name}</CardTitle>
+        <CardTitle id={id}>{experiment().config.reference.name}</CardTitle>
         <CardDescription id={descriptionId}>
-          {experiment().description}
+          {experiment().config.reference.description}
         </CardDescription>
       </CardHeader>
       <CardContent>
@@ -247,10 +250,10 @@ export function ExperimentCard(props: {
           experimentIndex={experimentIndex()}
         />
       </CardContent>
-      <CardFooter>
+      <CardFooter class="gap-1">
         <Show
-          when={!experiment().running}
-          fallback={<RunningIndicator progress={experiment().running} />}
+          when={!experiment().output.running}
+          fallback={<RunningIndicator progress={experiment().output.running} />}
         >
           <DownloadExperiment experiment={experiment()} />
           <ExperimentSettingsDialog

apps/class-solid/src/components/ExperimentConfigForm.tsx

@@ -1,12 +1,10 @@
-import { pruneDefaults } from "@classmodel/class/validate";
+import type { Config } from "@classmodel/class/config";
+import { pruneConfig } from "@classmodel/class/config_utils";
 import { type SubmitHandler, createForm } from "@modular-forms/solid";
 import { createMemo } from "solid-js";
-import type { Experiment } from "~/lib/store";
-import {
-  type NamedConfig,
-  jsonSchemaOfNamedConfig,
-  validate,
-} from "./NamedConfig";
+import { unwrap } from "solid-js/store";
+import type { ExperimentConfig } from "~/lib/experiment_config";
+import { findPresetByName } from "~/lib/presets";
 import { ObjectField } from "./ObjectField";
 import { ajvForm } from "./ajvForm";
 
@@ -16,24 +14,22 @@ export function ExperimentConfigForm({
   onSubmit,
 }: {
   id: string;
-  experiment: Experiment;
-  onSubmit: (c: NamedConfig) => void;
+  experiment: ExperimentConfig;
+  onSubmit: (c: Config) => void;
 }) {
-  const initialValues = createMemo(() => {
-    return {
-      title: experiment.name,
-      description: experiment.description,
-      ...pruneDefaults(experiment.reference.config),
-    };
-  });
-  const [_, { Form, Field }] = createForm<NamedConfig>({
+  const preset = createMemo(() => findPresetByName(experiment.preset));
+
+  const initialValues = createMemo(() =>
+    pruneConfig(unwrap(experiment.reference), unwrap(preset().config)),
+  );
+  const [_, { Form, Field }] = createForm<Config>({
     initialValues: initialValues(),
-    validate: ajvForm(validate),
+    validate: ajvForm(preset().validate),
   });
 
-  const handleSubmit: SubmitHandler<NamedConfig> = (values, event) => {
-    // Use validate to coerce strings to numbers
-    validate(values);
+  const handleSubmit: SubmitHandler<Config> = (values, event) => {
+    // Use ajv to coerce strings to numbers and fill in defaults
+    preset().validate(values);
     onSubmit(values);
   };
 
@@ -46,8 +42,8 @@ export function ExperimentConfigForm({
     >
       <div>
         <ObjectField
-          schema={jsonSchemaOfNamedConfig}
-          value={pruneDefaults(experiment.reference.config)}
+          schema={preset().schema}
+          value={initialValues()}
           Field={Field}
         />
       </div>

apps/class-solid/src/components/NamedConfig.tsx

@@ -1,18 +1,13 @@
-import { type Sweep, performSweep } from "@classmodel/class/sweep";
+import type { Config } from "@classmodel/class/config";
 import {
   type PartialConfig,
-  overwriteDefaultsInJsonSchema,
-} from "@classmodel/class/validate";
-import { For, createMemo, createSignal } from "solid-js";
+  mergeConfigurations,
+} from "@classmodel/class/config_utils";
+import { type Sweep, performSweep } from "@classmodel/class/sweep";
+import { For, createSignal } from "solid-js";
 import { unwrap } from "solid-js/store";
 import { Button } from "~/components/ui/button";
-import {
-  type Experiment,
-  type Permutation,
-  runExperiment,
-  setExperiments,
-} from "~/lib/store";
-import { jsonSchemaOfNamedConfig } from "./NamedConfig";
+import { type Experiment, runExperiment, setExperiments } from "~/lib/store";
 import {
   Dialog,
   DialogContent,
@@ -35,28 +30,25 @@ function nameForPermutation(config: PartialConfig): string {
   return chunks.join(",");
 }
 
-function config2permutation(config: PartialConfig): Permutation {
+function config2permutation(reference: Config, config: PartialConfig): Config {
   return {
-    config,
+    ...mergeConfigurations(reference, config),
     name: nameForPermutation(config),
+    description: "",
   };
 }
 
-function configs2Permutations(configs: PartialConfig[]): Permutation[] {
-  return configs.map(config2permutation);
+function configs2Permutations(
+  reference: Config,
+  configs: PartialConfig[],
+): Config[] {
+  return configs.map((c) => config2permutation(reference, c));
 }
 
 export function PermutationSweepButton(props: {
   experiment: Experiment;
   experimentIndex: number;
 }) {
-  const jsonSchemaOfPermutation = createMemo(() => {
-    return overwriteDefaultsInJsonSchema(
-      jsonSchemaOfNamedConfig,
-      unwrap(props.experiment.reference.config),
-    );
-  });
-
   const sweeps: Sweep[] = [
     {
       section: "initialState",
@@ -76,9 +68,12 @@ export function PermutationSweepButton(props: {
 
   function addSweep() {
     const configs = performSweep(sweeps);
-    const perms = configs2Permutations(configs);
+    const perms = configs2Permutations(
+      unwrap(props.experiment.config.reference),
+      configs,
+    );
     setOpen(false);
-    setExperiments(props.experimentIndex, "permutations", perms);
+    setExperiments(props.experimentIndex, "config", "permutations", perms);
     runExperiment(props.experimentIndex);
   }
   const [open, setOpen] = createSignal(false);