Persist analyses (#191)

* See if ?preset works to load experiment remotely

* Only hide toast on success + allow toast of failure to be closed manually

* Load experiment from remote URL via `?e=<remote-url>`

Fixes #158

* Embed json file into README

* Do not try to parse non-200 responses

* Plot pressure, temperature and relative humidity from observations

Fixes #184

* If shareable link is too large give hosting state file as alternative

* Always clear adress bar from `?s=...`

* more e to s replacements + spelling

* Use union type for Analysis + setAnalysis on loading state

It is before setExperiments to have now plots being added by runExperiment

* Encode/decode analyses array using a JSON schema validator + move Analysis types to src/lib/analysis_type.ts

Moved types so type and its derived JSON schema are in same file.

* Make oneOfs the same

Author: sverhoeven

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

@@ -27,20 +27,18 @@ import {
   createUniqueId,
 } from "solid-js";
 import { createStore } from "solid-js/store";
+import type {
+  Analysis,
+  ProfilesAnalysis,
+  SkewTAnalysis,
+  TimeseriesAnalysis,
+} from "~/lib/analysis_type";
 import type { Observation } from "~/lib/experiment_config";
 import {
   observationsForProfile,
   observationsForSounding,
 } from "~/lib/profiles";
-import {
-  type Analysis,
-  type ProfilesAnalysis,
-  type SkewTAnalysis,
-  type TimeseriesAnalysis,
-  deleteAnalysis,
-  experiments,
-  updateAnalysis,
-} from "~/lib/store";
+import { deleteAnalysis, experiments, updateAnalysis } from "~/lib/store";
 import { MdiCamera, MdiDelete, MdiImageFilterCenterFocus } from "./icons";
 import { AxisBottom, AxisLeft, getNiceAxisLimits } from "./plots/Axes";
 import { Chart, ChartContainer, type ChartData } from "./plots/ChartContainer";

apps/class-solid/src/lib/analysis_type.ts

@@ -0,0 +1,87 @@
+import { ajv } from "@classmodel/class/validate";
+import { type DefinedError, type JSONSchemaType, ValidationError } from "ajv";
+
+export interface BaseAnalysis {
+  id: string;
+  description: string;
+  type: string;
+  name: string;
+}
+
+export type TimeseriesAnalysis = BaseAnalysis & {
+  xVariable: string;
+  yVariable: string;
+};
+
+export type ProfilesAnalysis = BaseAnalysis & {
+  variable: string;
+  time: number;
+};
+
+export type SkewTAnalysis = BaseAnalysis & {
+  time: number;
+};
+
+export type Analysis = TimeseriesAnalysis | ProfilesAnalysis | SkewTAnalysis;
+export const analysisNames = [
+  "Vertical profiles",
+  "Timeseries",
+  "Thermodynamic diagram",
+];
+
+export function parseAnalysis(raw: unknown): Analysis {
+  const schema = {
+    oneOf: [
+      {
+        type: "object",
+        required: [
+          "id",
+          "description",
+          "type",
+          "name",
+          "xVariable",
+          "yVariable",
+        ],
+        properties: {
+          id: { type: "string" },
+          description: { type: "string" },
+          type: { const: "timeseries" },
+          name: { type: "string" },
+          xVariable: { type: "string" },
+          yVariable: { type: "string" },
+        },
+        additionalProperties: false,
+      },
+      {
+        type: "object",
+        required: ["id", "description", "type", "name", "variable", "time"],
+        properties: {
+          id: { type: "string" },
+          description: { type: "string" },
+          type: { const: "profiles" },
+          name: { type: "string" },
+          variable: { type: "string" },
+          time: { type: "number" },
+        },
+        additionalProperties: false,
+      },
+      {
+        type: "object",
+        required: ["id", "description", "type", "name", "time"],
+        properties: {
+          id: { type: "string" },
+          description: { type: "string" },
+          type: { const: "skewT" },
+          name: { type: "string" },
+          time: { type: "number" },
+        },
+        additionalProperties: false,
+      },
+    ],
+  } as unknown as JSONSchemaType<Analysis>;
+  const validate = ajv.compile(schema);
+  if (!validate(raw)) {
+    throw new ValidationError(validate.errors as DefinedError[]);
+  }
+  return raw;
+}

apps/class-solid/src/lib/encode.ts

@@ -1,12 +1,14 @@
 import { pruneConfig } from "@classmodel/class/config_utils";
 import { unwrap } from "solid-js/store";
+import { parseAnalysis } from "./analysis_type";
+import type { Analysis } from "./analysis_type";
 import {
   type ExperimentConfig,
   type PartialExperimentConfig,
   parseExperimentConfig,
 } from "./experiment_config";
 import { findPresetByName } from "./presets";
-import type { Analysis, Experiment } from "./store";
+import type { Experiment } from "./store";
 
 export function decodeAppState(encoded: string): [Experiment[], Analysis[]] {
   const decoded = decodeURI(encoded);
@@ -28,8 +30,14 @@ export function decodeAppState(encoded: string): [Experiment[], Analysis[]] {
   } else {
     console.error("No experiments found in ", encoded);
   }
-
   const analyses: Analysis[] = [];
+  if (typeof parsed === "object" && Array.isArray(parsed.analyses)) {
+    for (const analysisRaw of parsed.analyses) {
+      const analysis = parseAnalysis(analysisRaw);
+      analyses.push(analysis);
+    }
+  }
+
   return [experiments, analyses];
 }
 
@@ -38,8 +46,10 @@ export function encodeAppState(
   analyses: Analysis[],
 ) {
   const rawExperiments = unwrap(experiments);
+  const rawAnalyses = unwrap(analyses);
   const minimizedState = {
     experiments: rawExperiments.map((exp) => toPartial(exp.config)),
+    analyses: rawAnalyses,
   };
   return encodeURI(JSON.stringify(minimizedState, undefined, 0));
 }

apps/class-solid/src/lib/store.ts

@@ -8,6 +8,12 @@ import {
   mergeConfigurations,
   pruneConfig,
 } from "@classmodel/class/config_utils";
+import type {
+  Analysis,
+  ProfilesAnalysis,
+  SkewTAnalysis,
+  TimeseriesAnalysis,
+} from "./analysis_type";
 import { decodeAppState } from "./encode";
 import { parseExperimentConfig } from "./experiment_config";
 import type { ExperimentConfig } from "./experiment_config";
@@ -233,41 +239,11 @@ export function swapPermutationAndReferenceConfiguration(
 
 export async function loadStateFromString(rawState: string): Promise<void> {
   const [loadedExperiments, loadedAnalyses] = decodeAppState(rawState);
+  setAnalyses(loadedAnalyses);
   setExperiments(loadedExperiments);
   await Promise.all(loadedExperiments.map((_, i) => runExperiment(i)));
 }
 
-export interface Analysis {
-  id: string;
-  description: string;
-  type: string;
-  name: string;
-}
-
-export type TimeseriesAnalysis = Analysis & {
-  xVariable: string;
-  yVariable: string;
-};
-
-export type ProfilesAnalysis = Analysis & {
-  variable: string;
-  time: number;
-};
-
-export type SkewTAnalysis = Analysis & {
-  time: number;
-};
-
-export type AnalysisType =
-  | TimeseriesAnalysis
-  | ProfilesAnalysis
-  | SkewTAnalysis;
-export const analysisNames = [
-  "Vertical profiles",
-  "Timeseries",
-  "Thermodynamic diagram",
-];
-
 export function addAnalysis(name: string) {
   let newAnalysis: Analysis;
 

apps/class-solid/src/routes/index.tsx

@@ -16,7 +16,8 @@ import { Flex } from "~/components/ui/flex";
 import { Toaster } from "~/components/ui/toast";
 import { onPageLoad } from "~/lib/state";
 
-import { addAnalysis, analysisNames, experiments } from "~/lib/store";
+import { analysisNames } from "~/lib/analysis_type";
+import { addAnalysis, experiments } from "~/lib/store";
 import { analyses } from "~/lib/store";
 
 export default function Home() {