fix: address explorer feedback issues

frontend/package.json

@@ -45,6 +45,7 @@
     "d3": "^7.9.0",
     "d3-array": "^3.2.4",
     "date-fns": "^4.1.0",
+    "katex": "^0.16.44",
     "lucide-react": "^0.564.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

frontend/src/components/diagnostics/ensembleChart.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import { KNOWN_CATEGORY_ORDERS, sortCategories } from "./ensembleChart";
+
+type NamedItem = { name: string };
+
+function items(...names: string[]): NamedItem[] {
+  return names.map((name) => ({ name }));
+}
+
+function names(sorted: NamedItem[]): string[] {
+  return sorted.map((item) => item.name);
+}
+
+describe("KNOWN_CATEGORY_ORDERS", () => {
+  it("includes Annual variants before seasons", () => {
+    const season = KNOWN_CATEGORY_ORDERS.season;
+    expect(season.indexOf("Annual")).toBeLessThan(season.indexOf("DJF"));
+    expect(season.indexOf("DJF")).toBeLessThan(season.indexOf("MAM"));
+    expect(season.indexOf("MAM")).toBeLessThan(season.indexOf("JJA"));
+    expect(season.indexOf("JJA")).toBeLessThan(season.indexOf("SON"));
+  });
+});
+
+describe("sortCategories", () => {
+  it("sorts seasons chronologically via auto-detection", () => {
+    const input = items("SON", "DJF", "JJA", "MAM");
+    const result = names(sortCategories(input));
+    expect(result).toEqual(["DJF", "MAM", "JJA", "SON"]);
+  });
+
+  it("sorts Annual before seasons via auto-detection", () => {
+    const input = items("SON", "Annual", "DJF", "JJA", "MAM");
+    const result = names(sortCategories(input));
+    expect(result).toEqual(["Annual", "DJF", "MAM", "JJA", "SON"]);
+  });
+
+  it("handles lowercase annual variant", () => {
+    const input = items("SON", "annual", "DJF", "MAM", "JJA");
+    const result = names(sortCategories(input));
+    expect(result).toEqual(["annual", "DJF", "MAM", "JJA", "SON"]);
+  });
+
+  it("handles ANN variant", () => {
+    const input = items("SON", "ANN", "DJF", "MAM", "JJA");
+    const result = names(sortCategories(input));
+    expect(result).toEqual(["ANN", "DJF", "MAM", "JJA", "SON"]);
+  });
+
+  it("preserves original order for non-season data", () => {
+    const input = items("region_c", "region_a", "region_b");
+    const result = names(sortCategories(input));
+    expect(result).toEqual(["region_c", "region_a", "region_b"]);
+  });
+
+  it("uses explicit category order when provided", () => {
+    const input = items("c", "a", "b");
+    const result = names(sortCategories(input, ["a", "b", "c"]));
+    expect(result).toEqual(["a", "b", "c"]);
+  });
+
+  it("puts items not in explicit order at the end", () => {
+    const input = items("c", "unknown", "a", "b");
+    const result = names(sortCategories(input, ["a", "b", "c"]));
+    expect(result).toEqual(["a", "b", "c", "unknown"]);
+  });
+
+  it("returns empty array for empty input", () => {
+    expect(sortCategories([])).toEqual([]);
+  });
+
+  it("does not auto-detect when categories don't fully match a known order", () => {
+    // "Temperature" is not in any known order, so no sorting applied
+    const input = items("Temperature", "DJF", "MAM");
+    const result = names(sortCategories(input));
+    expect(result).toEqual(["Temperature", "DJF", "MAM"]);
+  });
+});

frontend/src/components/diagnostics/ensembleChart.tsx

@@ -23,16 +23,16 @@ import useMousePositionAndWidth from "@/hooks/useMousePosition";
 import { createScaledTickFormatter } from "../execution/values/series/utils";
 
 // Well-known category orderings for common climate dimensions
-const KNOWN_CATEGORY_ORDERS: Record<string, string[]> = {
-  // Meteorological seasons
-  season: ["DJF", "MAM", "JJA", "SON"],
+export const KNOWN_CATEGORY_ORDERS: Record<string, string[]> = {
+  // Meteorological seasons (Annual first, then chronological)
+  season: ["Annual", "annual", "ANN", "DJF", "MAM", "JJA", "SON"],
 };
 
 /**
  * Sort chart categories using a known ordering if one exists,
  * otherwise preserve the original order.
  */
-function sortCategories<T extends { name: string }>(
+export function sortCategories<T extends { name: string }>(
   items: T[],
   categoryOrder?: string[],
 ): T[] {
@@ -319,8 +319,8 @@ export const EnsembleChart = ({
 
   const fmt = valueFormatter ?? createScaledTickFormatter(yDomain);
 
-  // Hide x-axis when there are too many items (threshold: 6)
-  const shouldShowXAxis = sortedChartData.length <= 6;
+  // Rotate x-axis labels when there are many items to keep them visible
+  const shouldRotateXAxis = sortedChartData.length > 6;
 
   // Adjust spacing based on number of items
   // make them closer together when there are many
@@ -345,7 +345,14 @@ export const EnsembleChart = ({
             tickLine={false}
             axisLine={{ stroke: "#E5E7EB" }}
             tickMargin={10}
-            hide={!shouldShowXAxis}
+            angle={shouldRotateXAxis ? -45 : 0}
+            textAnchor={shouldRotateXAxis ? "end" : "middle"}
+            height={shouldRotateXAxis ? 100 : 30}
+            interval={
+              sortedChartData.length > 20
+                ? Math.floor(sortedChartData.length / 20)
+                : 0
+            }
           />
           <YAxis
             width={64}

frontend/src/components/diagnostics/figure.tsx

@@ -1,32 +1,46 @@
 import { cva, type VariantProps } from "class-variance-authority";
+import { useMemo } from "react";
 import type { ExecutionOutput } from "@/client";
+import { containsLatex, renderLatexToHtml } from "@/lib/latex";
 import { cn } from "@/lib/utils";
 
-const figureVariants = cva(
-  // Improve transitions to include background and border for smoother dark toggles
-  "object-contain",
-  {
-    variants: {
-      size: {
-        default: "max-h-96",
-        large: "h-[600px] max-h-full",
-      },
-    },
-    defaultVariants: {
-      size: "default",
+const figureVariants = cva("object-contain", {
+  variants: {
+    size: {
+      default: "max-h-96",
+      large: "h-[600px] max-h-full",
     },
   },
-);
+  defaultVariants: {
+    size: "default",
+  },
+});
 
 export function Figure({
   url,
   long_name,
   size,
 }: ExecutionOutput & VariantProps<typeof figureVariants>) {
+  const hasLatex = long_name ? containsLatex(long_name) : false;
+  const captionHtml = useMemo(
+    () => (hasLatex ? renderLatexToHtml(long_name) : null),
+    [long_name, hasLatex],
+  );
+
   return (
     <div className="flex flex-col items-center gap-2">
       <img src={url} alt={long_name} className={cn(figureVariants({ size }))} />
-      <small className="text-muted-foreground line-clamp-3">{long_name}</small>
+      {captionHtml ? (
+        <small
+          className="text-muted-foreground line-clamp-3"
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: HTML is generated by KaTeX renderToString from trusted backend data, not user input
+          dangerouslySetInnerHTML={{ __html: captionHtml }}
+        />
+      ) : (
+        <small className="text-muted-foreground line-clamp-3">
+          {long_name}
+        </small>
+      )}
     </div>
   );
 }