From dea661e9481711bdabccf3f9922267666a39c445 Mon Sep 17 00:00:00 2001
From: Stefan Verhoeven <stefan.verhoeven@gmail.com>
Date: Tue, 8 Apr 2025 16:40:26 +0200
Subject: [PATCH 1/5] In legend replace line with inert checkbox

---
 .../src/components/plots/Legend.tsx           | 25 ++------
 .../src/components/ui/checkbox.tsx            | 62 +++++++++++++++++++
 2 files changed, 67 insertions(+), 20 deletions(-)
 create mode 100644 apps/class-solid/src/components/ui/checkbox.tsx

diff --git a/apps/class-solid/src/components/plots/Legend.tsx b/apps/class-solid/src/components/plots/Legend.tsx
index ec29bc79..f1452b24 100644
--- a/apps/class-solid/src/components/plots/Legend.tsx
+++ b/apps/class-solid/src/components/plots/Legend.tsx
@@ -1,5 +1,6 @@
 import { For } from "solid-js";
 import { cn } from "~/lib/utils";
+import { Checkbox } from "../ui/checkbox";
 import type { ChartData } from "./ChartContainer";
 import { useChartContext } from "./ChartContainer";
 
@@ -19,26 +20,10 @@ export function Legend<T>(props: LegendProps<T>) {
     >
       <For each={props.entries()}>
         {(d) => (
-          <>
-            <span class="flex items-center">
-              <svg
-                width="1.5rem"
-                height="1rem"
-                overflow="visible"
-                viewBox="0 0 50 20"
-              >
-                <title>legend</title>
-                <path
-                  fill="none"
-                  stroke={d.color}
-                  stroke-dasharray={d.linestyle}
-                  stroke-width="4"
-                  d="M 0 12 L 45 12"
-                />
-              </svg>
-              <p style={`color: ${d.color}`}>{d.label}</p>
-            </span>
-          </>
+          <div class=" flex gap-1">
+            <Checkbox checked />
+            <p style={`color: ${d.color}`}>{d.label}</p>
+          </div>
         )}
       </For>
     </div>
diff --git a/apps/class-solid/src/components/ui/checkbox.tsx b/apps/class-solid/src/components/ui/checkbox.tsx
new file mode 100644
index 00000000..783011a8
--- /dev/null
+++ b/apps/class-solid/src/components/ui/checkbox.tsx
@@ -0,0 +1,62 @@
+import type { ValidComponent } from "solid-js";
+import { Match, Switch, splitProps } from "solid-js";
+
+import * as CheckboxPrimitive from "@kobalte/core/checkbox";
+import type { PolymorphicProps } from "@kobalte/core/polymorphic";
+
+import { cn } from "~/lib/utils";
+
+type CheckboxRootProps<T extends ValidComponent = "div"> =
+  CheckboxPrimitive.CheckboxRootProps<T> & { class?: string | undefined };
+
+const Checkbox = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, CheckboxRootProps<T>>,
+) => {
+  const [local, others] = splitProps(props as CheckboxRootProps, ["class"]);
+  return (
+    <CheckboxPrimitive.Root
+      class={cn("items-top group relative flex space-x-2", local.class)}
+      {...others}
+    >
+      <CheckboxPrimitive.Input class="peer" />
+      <CheckboxPrimitive.Control class="size-4 shrink-0 rounded-sm border border-primary ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 data-[checked]:border-none data-[indeterminate]:border-none data-[checked]:bg-primary data-[indeterminate]:bg-primary data-[checked]:text-primary-foreground data-[indeterminate]:text-primary-foreground">
+        <CheckboxPrimitive.Indicator>
+          <Switch>
+            <Match when={!others.indeterminate}>
+              {/* biome-ignore lint/a11y/noSvgWithoutTitle: want to use tooltip for something else */}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="size-4"
+              >
+                <path d="M5 12l5 5l10 -10" />
+              </svg>
+            </Match>
+            <Match when={others.indeterminate}>
+              {/* biome-ignore lint/a11y/noSvgWithoutTitle: want to use tooltip for something else */}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="size-4"
+              >
+                <path d="M5 12l14 0" />
+              </svg>
+            </Match>
+          </Switch>
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Control>
+    </CheckboxPrimitive.Root>
+  );
+};
+
+export { Checkbox };

From 956ca798c89bca12003cd5378ecfb8e1c62072d5 Mon Sep 17 00:00:00 2001
From: Stefan Verhoeven <stefan.verhoeven@gmail.com>
Date: Tue, 8 Apr 2025 17:17:26 +0200
Subject: [PATCH 2/5] Add checkboxes to legends, remove line in legend

---
 apps/class-solid/src/components/Analysis.tsx  | 48 +++++++++++++++++--
 .../src/components/plots/Legend.tsx           |  7 ++-
 .../src/components/plots/skewTlogP.tsx        | 40 +++++++++++++---
 3 files changed, 84 insertions(+), 11 deletions(-)

diff --git a/apps/class-solid/src/components/Analysis.tsx b/apps/class-solid/src/components/Analysis.tsx
index 96dddabd..4c6c9d98 100644
--- a/apps/class-solid/src/components/Analysis.tsx
+++ b/apps/class-solid/src/components/Analysis.tsx
@@ -6,11 +6,13 @@ import {
   For,
   Match,
   type Setter,
+  Show,
   Switch,
   createEffect,
   createMemo,
   createUniqueId,
 } from "solid-js";
+import { createStore } from "solid-js/store";
 import type { Observation } from "~/lib/experiment_config";
 import {
   getThermodynamicProfiles,
@@ -140,15 +142,34 @@ export function TimeSeriesPlot({ analysis }: { analysis: TimeseriesAnalysis }) {
       };
     });
 
+  const [toggles, setToggles] = createStore<Record<string, boolean>>({});
+
+  // Initialize all lines as visible
+  createEffect(() => {
+    for (const d of chartData()) {
+      setToggles(d.label, true);
+    }
+  });
+
+  function toggleLine(label: string, value: boolean) {
+    setToggles(label, value);
+  }
+
   return (
     <>
       {/* TODO: get label for yVariable from model config */}
       <ChartContainer>
-        <Legend entries={chartData} />
+        <Legend entries={chartData} toggles={toggles} onChange={toggleLine} />
         <Chart title="Timeseries plot" formatX={formatSeconds}>
           <AxisBottom domain={xLim} label="Time [s]" />
           <AxisLeft domain={yLim} label={analysis.yVariable} />
-          <For each={chartData()}>{(d) => Line(d)}</For>
+          <For each={chartData()}>
+            {(d) => (
+              <Show when={toggles[d.label]}>
+                <Line {...d} />
+              </Show>
+            )}
+          </For>
         </Chart>
       </ChartContainer>
       <div class="flex justify-around">
@@ -220,11 +241,32 @@ export function VerticalProfilePlot({
       };
     });
 
+  function chartData() {
+    return [...profileData(), ...observations()];
+  }
+
+  const [toggles, setToggles] = createStore<Record<string, boolean>>({});
+
+  // Initialize all lines as visible
+  createEffect(() => {
+    for (const d of chartData()) {
+      setToggles(d.label, true);
+    }
+  });
+
+  function toggleLine(label: string, value: boolean) {
+    setToggles(label, value);
+  }
+
   return (
     <>
       <div class="flex flex-col gap-2">
         <ChartContainer>
-          <Legend entries={() => [...profileData(), ...observations()]} />
+          <Legend
+            entries={() => [...profileData(), ...observations()]}
+            toggles={toggles}
+            onChange={toggleLine}
+          />
           <Chart title="Vertical profile plot">
             <AxisBottom domain={xLim} label={analysis.variable} />
             <AxisLeft domain={yLim} label="Height[m]" />
diff --git a/apps/class-solid/src/components/plots/Legend.tsx b/apps/class-solid/src/components/plots/Legend.tsx
index f1452b24..b43dc689 100644
--- a/apps/class-solid/src/components/plots/Legend.tsx
+++ b/apps/class-solid/src/components/plots/Legend.tsx
@@ -6,6 +6,8 @@ import { useChartContext } from "./ChartContainer";
 
 export interface LegendProps<T> {
   entries: () => ChartData<T>[];
+  toggles: Record<string, boolean>;
+  onChange: (key: string, value: boolean) => void;
 }
 
 export function Legend<T>(props: LegendProps<T>) {
@@ -21,7 +23,10 @@ export function Legend<T>(props: LegendProps<T>) {
       <For each={props.entries()}>
         {(d) => (
           <div class=" flex gap-1">
-            <Checkbox checked />
+            <Checkbox
+              checked={props.toggles[d.label]}
+              onChange={(v) => props.onChange(d.label, v)}
+            />
             <p style={`color: ${d.color}`}>{d.label}</p>
           </div>
         )}
diff --git a/apps/class-solid/src/components/plots/skewTlogP.tsx b/apps/class-solid/src/components/plots/skewTlogP.tsx
index 66b6586c..8999e677 100644
--- a/apps/class-solid/src/components/plots/skewTlogP.tsx
+++ b/apps/class-solid/src/components/plots/skewTlogP.tsx
@@ -1,6 +1,7 @@
 // Code modified from https://github.com/rsobash/d3-skewt/ (MIT license)
 import * as d3 from "d3";
-import { For, createSignal } from "solid-js";
+import { For, Show, createEffect, createSignal } from "solid-js";
+import { createStore } from "solid-js/store";
 import { AxisBottom, AxisLeft } from "./Axes";
 import type { ChartData, SupportedScaleTypes } from "./ChartContainer";
 import {
@@ -149,9 +150,7 @@ function Sounding(data: ChartData<SoundingRecord>) {
 
 // Note: using temperatures in Kelvin as that's easiest to get from CLASS, but
 // perhaps not the most interoperable with other sounding data sources.
-export function SkewTPlot({
-  data,
-}: { data: () => ChartData<SoundingRecord>[] }) {
+export function SkewTPlot(props: { data: () => ChartData<SoundingRecord>[] }) {
   const pressureLines = [1000, 850, 700, 500, 300, 200, 100];
   const temperatureLines = d3.range(-100, 45, 10);
 
@@ -161,9 +160,30 @@ export function SkewTPlot({
     pressureGrid.map((pressure) => [pressure, temperature]),
   );
 
+  const [toggles, setToggles] = createStore<Record<string, boolean>>({});
+
+  // Initialize all lines as visible
+  createEffect(() => {
+    for (const d of props.data()) {
+      setToggles(d.label, true);
+    }
+  });
+
+  function toggleLine(label: string, value: boolean) {
+    setToggles(label, value);
+  }
+
+  function whendryAdiabat(i: number) {
+    const cd = props.data()[i];
+    if (!toggles || !cd) {
+      return true;
+    }
+    return toggles[cd.label];
+  }
+
   return (
     <ChartContainer>
-      <Legend entries={data} />
+      <Legend entries={props.data} toggles={toggles} onChange={toggleLine} />
       <Chart
         title="Thermodynamic diagram"
         formatX={d3.format(".0d")}
@@ -184,8 +204,14 @@ export function SkewTPlot({
         <ClipPath />
         <For each={temperatureLines}>{(t) => SkewTGridLine(t)}</For>
         <For each={pressureLines}>{(p) => LogPGridLine(p)}</For>
-        <For each={dryAdiabats}>{(d) => DryAdiabat(d)}</For>
-        <For each={data()}>{(d) => Sounding(d)}</For>
+        <For each={dryAdiabats}>{(d) => <DryAdiabat {...d} />}</For>
+        <For each={props.data()}>
+          {(d, i) => (
+            <Show when={whendryAdiabat(i())}>
+              <Sounding {...d} />
+            </Show>
+          )}
+        </For>
       </Chart>
     </ChartContainer>
   );

From 477874b11633e5c2c4cb902f59ac03336069af49 Mon Sep 17 00:00:00 2001
From: Stefan Verhoeven <stefan.verhoeven@gmail.com>
Date: Tue, 8 Apr 2025 17:23:48 +0200
Subject: [PATCH 3/5] Hide lines in vertical profiles plot when unchecked

---
 apps/class-solid/src/components/Analysis.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/class-solid/src/components/Analysis.tsx b/apps/class-solid/src/components/Analysis.tsx
index 4c6c9d98..d2147bc6 100644
--- a/apps/class-solid/src/components/Analysis.tsx
+++ b/apps/class-solid/src/components/Analysis.tsx
@@ -270,8 +270,20 @@ export function VerticalProfilePlot({
           <Chart title="Vertical profile plot">
             <AxisBottom domain={xLim} label={analysis.variable} />
             <AxisLeft domain={yLim} label="Height[m]" />
-            <For each={profileData()}>{(d) => Line(d)}</For>
-            <For each={observations()}>{(d) => Line(d)}</For>
+            <For each={profileData()}>
+              {(d) => (
+                <Show when={toggles[d.label]}>
+                  <Line {...d} />
+                </Show>
+              )}
+            </For>
+            <For each={observations()}>
+              {(d) => (
+                <Show when={toggles[d.label]}>
+                  <Line {...d} />
+                </Show>
+              )}
+            </For>
           </Chart>
         </ChartContainer>
         <Picker

From 8d745e3a4754eeb7e408fe3634274ba1042ad48a Mon Sep 17 00:00:00 2001
From: Stefan Verhoeven <stefan.verhoeven@gmail.com>
Date: Tue, 8 Apr 2025 18:44:54 +0200
Subject: [PATCH 4/5] Correct name

---
 apps/class-solid/src/components/plots/skewTlogP.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/class-solid/src/components/plots/skewTlogP.tsx b/apps/class-solid/src/components/plots/skewTlogP.tsx
index 8999e677..26bb9852 100644
--- a/apps/class-solid/src/components/plots/skewTlogP.tsx
+++ b/apps/class-solid/src/components/plots/skewTlogP.tsx
@@ -173,7 +173,7 @@ export function SkewTPlot(props: { data: () => ChartData<SoundingRecord>[] }) {
     setToggles(label, value);
   }
 
-  function whendryAdiabat(i: number) {
+  function showSounding(i: number) {
     const cd = props.data()[i];
     if (!toggles || !cd) {
       return true;
@@ -207,7 +207,7 @@ export function SkewTPlot(props: { data: () => ChartData<SoundingRecord>[] }) {
         <For each={dryAdiabats}>{(d) => <DryAdiabat {...d} />}</For>
         <For each={props.data()}>
           {(d, i) => (
-            <Show when={whendryAdiabat(i())}>
+            <Show when={showSounding(i())}>
               <Sounding {...d} />
             </Show>
           )}

From 66cf6199ec367bfc478690da73b0185439b14dc7 Mon Sep 17 00:00:00 2001
From: Peter Kalverla <peter.kalverla@gmx.com>
Date: Thu, 10 Apr 2025 14:58:51 +0200
Subject: [PATCH 5/5] Legend formatting

---
 .../src/components/plots/Legend.tsx           | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/apps/class-solid/src/components/plots/Legend.tsx b/apps/class-solid/src/components/plots/Legend.tsx
index b43dc689..db78173c 100644
--- a/apps/class-solid/src/components/plots/Legend.tsx
+++ b/apps/class-solid/src/components/plots/Legend.tsx
@@ -1,6 +1,5 @@
 import { For } from "solid-js";
-import { cn } from "~/lib/utils";
-import { Checkbox } from "../ui/checkbox";
+import { createUniqueId } from "solid-js";
 import type { ChartData } from "./ChartContainer";
 import { useChartContext } from "./ChartContainer";
 
@@ -15,21 +14,29 @@ export function Legend<T>(props: LegendProps<T>) {
 
   return (
     <div
-      class={cn(
-        "flex flex-wrap justify-end text-sm tracking-tight",
-        `w-[${chart.width}px]`,
-      )}
+      class={"flex flex-wrap justify-end gap-2 text-sm tracking-tight"}
+      style={`max-width: ${chart.width}px;`}
     >
       <For each={props.entries()}>
-        {(d) => (
-          <div class=" flex gap-1">
-            <Checkbox
-              checked={props.toggles[d.label]}
-              onChange={(v) => props.onChange(d.label, v)}
-            />
-            <p style={`color: ${d.color}`}>{d.label}</p>
-          </div>
-        )}
+        {(d) => {
+          const id = createUniqueId();
+          return (
+            <div
+              class="flex items-center gap-1"
+              style={`color: ${d.color}; accent-color: ${d.color}`}
+            >
+              <input
+                type="checkbox"
+                checked={props.toggles[d.label]}
+                onChange={(v) =>
+                  props.onChange(d.label, v.currentTarget.checked)
+                }
+                id={id}
+              />
+              <label for={id}>{d.label}</label>
+            </div>
+          );
+        }}
       </For>
     </div>
   );