Add skew-T log-p diagrams (#75)

* Start porting https://github.com/rsobash/d3-skewt/ to solidjs

* Make axis ticks and tick format settable + polish code
* Add and plot dummy data, looks like a real sounding now
* Add title to card and rename to thermodynamic diagram
* Change soundingdata format
* Convert CLASS output to soundingdata format (proof of concept)
* Split skewT background from lines
* Plot thermodynamic diagrams for all experiments/permutations
* Highlight lines on hover using either tailwind or solid event
* Change size of lineplots
* Consistent font
* Move legend out of lineplot
* Reuse legend component in thermodynamic diagram
* Make sure all plots share same margins etc. + enable axis labels on skewT
* Use analysis also in index.tsx, and turn off final height for production
* Start refactoring plotting code
* disable failing test as final height is no longer available

Author: Peter9192

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

@@ -1,8 +1,9 @@
 import { For, Match, Show, Switch, createMemo, createUniqueId } from "solid-js";
-import { getVerticalProfiles } from "~/lib/profiles";
+import { getThermodynamicProfiles, getVerticalProfiles } from "~/lib/profiles";
 import { type Analysis, deleteAnalysis, experiments } from "~/lib/store";
-import LinePlot from "./LinePlot";
 import { MdiCog, MdiContentCopy, MdiDelete, MdiDownload } from "./icons";
+import LinePlot from "./plots/LinePlot";
+import { SkewTPlot } from "./plots/skewTlogP";
 import { Button } from "./ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 
@@ -37,19 +38,25 @@ export function TimeSeriesPlot() {
           .map((perm, j) => {
             return {
               label: `${e.name}/${perm.name}`,
-              y: perm.output?.h ?? [],
-              x: perm.output?.t ?? [],
               color: colors[(j + 1) % 10],
               linestyle: linestyles[i % 5],
+              data:
+                perm.output?.t.map((tVal, i) => ({
+                  x: tVal,
+                  y: perm.output?.h[i] || Number.NaN,
+                })) || [],
             };
           });
         return [
           {
-            y: experimentOutput?.h ?? [],
-            x: experimentOutput?.t ?? [],
             label: e.name,
             color: colors[0],
             linestyle: linestyles[i],
+            data:
+              experimentOutput?.t.map((tVal, i) => ({
+                x: tVal,
+                y: experimentOutput?.h[i] || Number.NaN,
+              })) || [],
           },
           ...permutationRuns,
         ];
@@ -79,7 +86,7 @@ export function VerticalProfilePlot() {
             color: colors[(j + 1) % 10],
             linestyle: linestyles[i % 5],
             label: `${e.name}/${p.name}`,
-            ...getVerticalProfiles(p.output, p.config, variable, time),
+            data: getVerticalProfiles(p.output, p.config, variable, time),
           };
         });
 
@@ -88,7 +95,7 @@ export function VerticalProfilePlot() {
             label: e.name,
             color: colors[0],
             linestyle: linestyles[i],
-            ...getVerticalProfiles(
+            data: getVerticalProfiles(
               e.reference.output ?? {
                 t: [],
                 h: [],
@@ -113,6 +120,39 @@ export function VerticalProfilePlot() {
   );
 }
 
+export function ThermodynamicPlot() {
+  const time = -1;
+  const skewTData = 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}`,
+          data: getThermodynamicProfiles(p.output, p.config, time),
+        };
+      });
+
+      return [
+        {
+          label: e.name,
+          color: colors[0],
+          linestyle: linestyles[i],
+          data: getThermodynamicProfiles(
+            e.reference.output,
+            e.reference.config,
+            time,
+          ),
+        },
+        ...permutations,
+      ];
+    });
+  });
+  return <SkewTPlot data={skewTData} />;
+}
+
 /** Simply show the final height for each experiment that has output */
 function FinalHeights() {
   return (
@@ -154,7 +194,7 @@ function FinalHeights() {
 export function AnalysisCard(analysis: Analysis) {
   const id = createUniqueId();
   return (
-    <Card class="w-[500px]" role="article" aria-labelledby={id}>
+    <Card class="min-w-[500px]" role="article" aria-labelledby={id}>
       <CardHeader class="flex-row items-center justify-between py-2 pb-6">
         {/* TODO: make name & description editable */}
         <CardTitle id={id}>{analysis.name}</CardTitle>
@@ -183,6 +223,7 @@ export function AnalysisCard(analysis: Analysis) {
       </CardHeader>
       <CardContent class="min-h-[450px]">
         <Switch fallback={<p>Unknown analysis type</p>}>
+          {/* @ts-ignore: kept for developers, but not included in production */}
           <Match when={analysis.type === "finalheight"}>
             <FinalHeights />
           </Match>
@@ -192,6 +233,9 @@ export function AnalysisCard(analysis: Analysis) {
           <Match when={analysis.type === "profiles"}>
             <VerticalProfilePlot />
           </Match>
+          <Match when={analysis.type === "skewT"}>
+            <ThermodynamicPlot />
+          </Match>
         </Switch>
       </CardContent>
     </Card>

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

@@ -9,23 +9,26 @@ interface AxisProps {
   transform?: string;
   tickCount?: number;
   label?: string;
+  tickValues?: number[];
+  tickFormat?: (n: number | { valueOf(): number }) => string;
+  decreasing?: boolean;
 }
 
-export const AxisBottom = (props: AxisProps) => {
-  const ticks = () => {
-    const domain = props.scale.domain();
-    const tickCount = props.tickCount || 5;
+const ticks = (props: AxisProps) => {
+  const domain = props.scale.domain();
+  const generateTicks = (domain = [0, 1], tickCount = 5) => {
     const step = (domain[1] - domain[0]) / (tickCount - 1);
-
-    return [...Array(tickCount).keys()].map((i) => {
-      const value = domain[0] + i * step;
-      return {
-        value,
-        position: props.scale(value),
-      };
-    });
+    return [...Array(10).keys()].map((i) => domain[0] + i * step);
   };
 
+  const values = props.tickValues
+    ? props.tickValues.filter((x) => x >= domain[0] && x <= domain[1])
+    : generateTicks(domain, props.tickCount);
+  return values.map((value) => ({ value, position: props.scale(value) }));
+};
+
+export const AxisBottom = (props: AxisProps) => {
+  const format = props.tickFormat ? props.tickFormat : d3.format(".3g");
   return (
     <g transform={props.transform}>
       <line
@@ -35,12 +38,12 @@ export const AxisBottom = (props: AxisProps) => {
         y2="0"
         stroke="currentColor"
       />
-      <For each={ticks()}>
+      <For each={ticks(props)}>
         {(tick) => (
           <g transform={`translate(${tick.position}, 0)`}>
             <line y2="6" stroke="currentColor" />
             <text y="9" dy="0.71em" text-anchor="middle">
-              {d3.format(".3g")(tick.value)}
+              {format(tick.value)}
             </text>
           </g>
         )}
@@ -53,21 +56,8 @@ export const AxisBottom = (props: AxisProps) => {
 };
 
 export const AxisLeft = (props: AxisProps) => {
-  const ticks = () => {
-    const domain = props.scale.domain();
-    const tickCount = props.tickCount || 5;
-    const step = (domain[1] - domain[0]) / (tickCount - 1);
-
-    return [...Array(tickCount).keys()].map((i) => {
-      const value = domain[0] + i * step;
-      return {
-        value,
-        position: props.scale(value),
-      };
-    });
-  };
-
-  const labelpos = props.scale.range().reduce((a, b) => a + b) / 2;
+  const format = props.tickFormat ? props.tickFormat : d3.format(".0f");
+  const yAnchor = props.decreasing ? 0 : 1;
   return (
     <g transform={props.transform}>
       <line
@@ -77,23 +67,39 @@ export const AxisLeft = (props: AxisProps) => {
         y2={props.scale.range()[1]}
         stroke="currentColor"
       />
-      <For each={ticks()}>
+      <For each={ticks(props)}>
         {(tick) => (
           <g transform={`translate(0, ${tick.position})`}>
             <line x2="-6" stroke="currentColor" />
             <text x="-9" dy="0.32em" text-anchor="end">
-              {tick.value.toFixed()}
+              {format(tick.value)}
             </text>
           </g>
         )}
       </For>
       <text
-        y={props.scale.range()[1]}
+        y={props.scale.range()[yAnchor]}
         text-anchor="end"
-        transform="translate(-65, 20) rotate(-90)"
+        transform="translate(-45, 0) rotate(-90)"
       >
         {props.label}
       </text>
     </g>
   );
 };
+
+/**
+ * Calculate a "nice" step size by rounding up to the nearest power of 10
+ * Snap the min and max to the nearest multiple of step
+ */
+export function getNiceAxisLimits(data: number[]): [number, number] {
+  const max = Math.max(...data);
+  const min = Math.min(...data);
+  const range = max - min;
+  const step = 10 ** Math.floor(Math.log10(range));
+
+  const niceMin = Math.floor(min / step) * step;
+  const niceMax = Math.ceil(max / step) * step;
+
+  return [niceMin, niceMax];
+}

apps/class-solid/src/components/Axes.tsx …lass-solid/src/components/plots/Axes.tsxapps/class-solid/src/components/Axes.tsx renamed to apps/class-solid/src/components/plots/Axes.tsx apps/class-solid/src/components/Axes.tsx renamed to apps/class-solid/src/components/plots/Axes.tsx

@@ -0,0 +1,9 @@
+export interface ChartData<T> {
+  label: string;
+  color: string;
+  linestyle: string;
+  data: T[];
+}
+
+// TODO: would be nice to create a chartContainer/context that manages logic like
+// width/height/margins etc. that should be consistent across different plots.