Time slider

apps/class-solid/src/components/plots/Axes.tsx

@@ -9,7 +9,7 @@ type AxisProps = {
   domain?: () => [number, number]; // TODO: is this needed for reactivity?
   label?: string;
   tickValues?: number[];
-  tickFormat?: (n: number | { valueOf(): number }) => string;
+  tickFormat?: (n: number) => string;
 };
 
 export const AxisBottom = (props: AxisProps) => {
@@ -80,14 +80,17 @@ export const AxisLeft = (props: AxisProps) => {
  * 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] {
+export function getNiceAxisLimits(
+  data: number[],
+  extraMargin = 0,
+): [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;
+  const niceMin = Math.floor(min / step) * step - extraMargin * step;
+  const niceMax = Math.ceil(max / step) * step + extraMargin * step;
 
   return [niceMin, niceMax];
 }

apps/class-solid/src/components/plots/ChartContainer.tsx

@@ -61,7 +61,7 @@ export function ChartContainer(props: {
     const scaleX = supportedScales[chart.scalePropsX.type]()
       .range(chart.scalePropsX.range)
       .domain(chart.scalePropsX.domain);
-    // .nice(); // TODO: could use this instead of getNiceAxisLimits
+    // .nice(); // TODO: could use this instead of getNiceAxisLimits but messes up skewT
     updateChart("scaleX", () => scaleX);
   });
 

apps/class-solid/src/components/plots/Line.tsx

@@ -0,0 +1,32 @@
+import * as d3 from "d3";
+import { createSignal } from "solid-js";
+import type { ChartData } from "./ChartContainer";
+import { useChartContext } from "./ChartContainer";
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export function Line(d: ChartData<Point>) {
+  const [chart, updateChart] = useChartContext();
+  const [hovered, setHovered] = createSignal(false);
+
+  const l = d3.line<Point>(
+    (d) => chart.scaleX(d.x),
+    (d) => chart.scaleY(d.y),
+  );
+  return (
+    <path
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      fill="none"
+      stroke={d.color}
+      stroke-dasharray={d.linestyle}
+      stroke-width={hovered() ? 5 : 3}
+      d={l(d.data) || ""}
+    >
+      <title>{d.label}</title>
+    </path>
+  );
+}

apps/class-solid/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import type { Component, ComponentProps } from "solid-js";
+import { splitProps } from "solid-js";
+
+import { cn } from "~/lib/utils";
+
+const Label: Component<ComponentProps<"label">> = (props) => {
+  const [local, others] = splitProps(props, ["class"]);
+  return (
+    <label
+      class={cn(
+        "font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        local.class,
+      )}
+      {...others}
+    />
+  );
+};
+
+export { Label };

apps/class-solid/src/components/ui/slider.tsx

@@ -0,0 +1,112 @@
+import type { JSX, ValidComponent } from "solid-js";
+import { splitProps } from "solid-js";
+
+import type { PolymorphicProps } from "@kobalte/core/polymorphic";
+import * as SliderPrimitive from "@kobalte/core/slider";
+
+import { Label } from "~/components/ui/label";
+import { cn } from "~/lib/utils";
+
+type SliderRootProps<T extends ValidComponent = "div"> =
+  SliderPrimitive.SliderRootProps<T> & {
+    class?: string | undefined;
+  };
+
+const Slider = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, SliderRootProps<T>>,
+) => {
+  const [local, others] = splitProps(props as SliderRootProps, ["class"]);
+  return (
+    <SliderPrimitive.Root
+      class={cn(
+        "relative flex w-full touch-none select-none flex-col items-center",
+        local.class,
+      )}
+      {...others}
+    />
+  );
+};
+
+type SliderTrackProps<T extends ValidComponent = "div"> =
+  SliderPrimitive.SliderTrackProps<T> & {
+    class?: string | undefined;
+  };
+
+const SliderTrack = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, SliderTrackProps<T>>,
+) => {
+  const [local, others] = splitProps(props as SliderTrackProps, ["class"]);
+  return (
+    <SliderPrimitive.Track
+      class={cn(
+        "relative h-2 w-full grow rounded-full bg-secondary",
+        local.class,
+      )}
+      {...others}
+    />
+  );
+};
+
+type SliderFillProps<T extends ValidComponent = "div"> =
+  SliderPrimitive.SliderFillProps<T> & {
+    class?: string | undefined;
+  };
+
+const SliderFill = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, SliderFillProps<T>>,
+) => {
+  const [local, others] = splitProps(props as SliderFillProps, ["class"]);
+  return (
+    <SliderPrimitive.Fill
+      class={cn("absolute h-full rounded-full bg-primary", local.class)}
+      {...others}
+    />
+  );
+};
+
+type SliderThumbProps<T extends ValidComponent = "span"> =
+  SliderPrimitive.SliderThumbProps<T> & {
+    class?: string | undefined;
+    children?: JSX.Element;
+  };
+
+const SliderThumb = <T extends ValidComponent = "span">(
+  props: PolymorphicProps<T, SliderThumbProps<T>>,
+) => {
+  const [local, others] = splitProps(props as SliderThumbProps, [
+    "class",
+    "children",
+  ]);
+  return (
+    <SliderPrimitive.Thumb
+      class={cn(
+        "top-[-6px] block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        local.class,
+      )}
+      {...others}
+    >
+      <SliderPrimitive.Input />
+    </SliderPrimitive.Thumb>
+  );
+};
+
+const SliderLabel = <T extends ValidComponent = "label">(
+  props: PolymorphicProps<T, SliderPrimitive.SliderLabelProps<T>>,
+) => {
+  return <SliderPrimitive.Label as={Label} {...props} />;
+};
+
+const SliderValueLabel = <T extends ValidComponent = "label">(
+  props: PolymorphicProps<T, SliderPrimitive.SliderValueLabelProps<T>>,
+) => {
+  return <SliderPrimitive.ValueLabel as={Label} {...props} />;
+};
+
+export {
+  Slider,
+  SliderTrack,
+  SliderFill,
+  SliderThumb,
+  SliderLabel,
+  SliderValueLabel,
+};

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

@@ -1,6 +1,6 @@
 import type { ClassOutput } from "@classmodel/class/runner";
 import type { PartialConfig } from "@classmodel/class/validate";
-import type { Point } from "~/components/plots/LinePlot";
+import type { Point } from "~/components/plots/Line";
 
 // Get vertical profiles for a single class run
 export function getVerticalProfiles(
@@ -16,7 +16,7 @@ export function getVerticalProfiles(
 
   // Extract height profile
   const height = output.h.slice(t)[0];
-  const dh = 400; // how much free troposphere to display?
+  const dh = 1600; // how much free troposphere to display?
   const hProfile = [0, height, height, height + dh];
 
   if (variable === "theta") {

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

@@ -312,7 +312,7 @@ export function addAnalysis(name: string) {
         type: "profiles",
         name: "Vertical profiles",
         variable: "Potential temperature [K]",
-        time: -1,
+        time: Number.POSITIVE_INFINITY,
       } as ProfilesAnalysis;
       break;
     case "Thermodynamic diagram":
@@ -321,7 +321,7 @@ export function addAnalysis(name: string) {
         description: "",
         type: "skewT",
         name: "Thermodynamic diagram",
-        time: -1,
+        time: Number.POSITIVE_INFINITY,
       } as SkewTAnalysis;
       break;
     default:

apps/class-solid/tests/share.spec.ts

@@ -31,19 +31,7 @@ test("Create share link from an experiment", async ({ page }) => {
   const config1 = await parseDownload(downloadPromise1);
   expect(config1.reference.initialState?.h_0).toEqual(800);
 
-  // // Check that shared experiment has been run by
-  // // checking height in final height analysis
-  // const finalHeightAnalysis = sharedPage.getByRole("article", {
-  //   name: "Final height",
-  // });
-  // const finalHeightOfExperiment = finalHeightAnalysis.getByRole("listitem", {
-  //   name: "My experiment 1",
-  //   exact: true,
-  // });
-  // expect(await finalHeightOfExperiment.textContent()).toMatch(
-  //   /My experiment 1: \d+ m/,
-  // );
-  // TODO: implement alternative check to see that experiment finished
+  // TODO: finalheight is gone; implement alternative check to see that experiment finished
 });
 
 test("Given large app state, sharing is not possible", async ({ page }) => {