@marimo-team/frontend 0.22.1-dev26 → 0.22.1-dev28

package/src/css/globals.css

@@ -148,46 +148,72 @@
   --shadow-xxs: 0px 0px 2px 0px var(--base-shadow-darker);
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-xs: 1px 1px 2px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
+  --shadow-xs:
+    1px 1px 2px 0px var(--base-shadow),
+    0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-sm: 2px 2px 2px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
+  --shadow-sm:
+    2px 2px 2px 0px var(--base-shadow),
+    0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-md: 4px 4px 4px 0px var(--base-shadow), 0 0px 4px 0px hsl(0deg 0% 60% / var(--base-shadow-opacity));
+  --shadow-md:
+    4px 4px 4px 0px var(--base-shadow),
+    0 0px 4px 0px hsl(0deg 0% 60% / var(--base-shadow-opacity));
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-lg: 5px 6px 4px 0px var(--base-shadow), 0 0px 4px 0px hsl(0deg 0% 75% / var(--base-shadow-opacity));
+  --shadow-lg:
+    5px 6px 4px 0px var(--base-shadow),
+    0 0px 4px 0px hsl(0deg 0% 75% / var(--base-shadow-opacity));
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-xl: 8px 9px 4px 0px var(--base-shadow), 0 0px 6px 0px hsl(0deg 0% 85% / var(--base-shadow-opacity));
+  --shadow-xl:
+    8px 9px 4px 0px var(--base-shadow),
+    0 0px 6px 0px hsl(0deg 0% 85% / var(--base-shadow-opacity));
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-2xl: 10px 12px 10px 0px var(--base-shadow), 0 0px 8px 0px hsl(0deg 0% 90% / var(--base-shadow-opacity));
+  --shadow-2xl:
+    10px 12px 10px 0px var(--base-shadow),
+    0 0px 8px 0px hsl(0deg 0% 90% / var(--base-shadow-opacity));
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-xs-solid: 1px 1px 0px 0px var(--base-shadow-darker), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
+  --shadow-xs-solid:
+    1px 1px 0px 0px var(--base-shadow-darker),
+    0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-sm-solid: 2px 2px 0px 0px var(--base-shadow-darker), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
+  --shadow-sm-solid:
+    2px 2px 0px 0px var(--base-shadow-darker),
+    0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-md-solid: 4px 4px 0px 0px var(--base-shadow-darker), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);
+  --shadow-md-solid:
+    4px 4px 0px 0px var(--base-shadow-darker),
+    0 0px 2px 0px hsl(0deg 0% 60% / 50%);
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-lg-solid: 5px 6px 0px 0px var(--base-shadow-darker), 0 0px 4px 0px hsl(0deg 0% 75% / 50%);
+  --shadow-lg-solid:
+    5px 6px 0px 0px var(--base-shadow-darker),
+    0 0px 4px 0px hsl(0deg 0% 75% / 50%);
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-xl-solid: 7px 8px 0px 0px var(--base-shadow-darker), 0 0px 4px 0px hsl(0deg 0% 85% / 50%);
+  --shadow-xl-solid:
+    7px 8px 0px 0px var(--base-shadow-darker),
+    0 0px 4px 0px hsl(0deg 0% 85% / 50%);
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-2xl-solid: 10px 12px 0px 0px var(--base-shadow-darker), 0 0px 8px 0px hsl(0deg 0% 90% / 50%);
+  --shadow-2xl-solid:
+    10px 12px 0px 0px var(--base-shadow-darker),
+    0 0px 8px 0px hsl(0deg 0% 90% / 50%);
 
   /* Solid shadows with lighter shade color */
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-sm-solid-shade: 2px 2px 0px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
+  --shadow-sm-solid-shade:
+    2px 2px 0px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
 
   /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-md-solid-shade: 4px 4px 0px 0px var(--base-shadow), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);
+  --shadow-md-solid-shade:
+    4px 4px 0px 0px var(--base-shadow), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);
 }

package/src/plugins/impl/DataEditorPlugin.tsx

@@ -76,8 +76,10 @@ export const DataEditorPlugin = createPlugin<Edits>("marimo-data-editor", {
     );
   });
 
-interface Props
-  extends Omit<DataEditorProps<object>, "data" | "onAddEdits" | "onAddRows"> {
+interface Props extends Omit<
+  DataEditorProps<object>,
+  "data" | "onAddEdits" | "onAddRows"
+> {
   data: TableData<object>;
   edits: Edits;
   onEdits: Setter<Edits>;

package/src/plugins/impl/FormPlugin.tsx

@@ -80,8 +80,7 @@ export const FormPlugin = createPlugin("marimo-form")
   });
 
 export interface FormWrapperProps<T>
-  extends Omit<Data, "elementId">,
-    Functions {
+  extends Omit<Data, "elementId">, Functions {
   children: React.ReactNode;
   currentValue: T;
   newValue: T;

package/src/plugins/impl/__tests__/SliderPlugin.test.tsx

@@ -9,6 +9,35 @@ import { store } from "@/core/state/jotai";
 import type { IPluginProps } from "../../types";
 import { SliderPlugin } from "../SliderPlugin";
 
+vi.mock("@/components/ui/slider", () => ({
+  Slider: ({
+    disabled,
+    onValueChange,
+    onValueCommit,
+    value,
+  }: {
+    disabled?: boolean;
+    onValueChange?: (value: number[]) => void;
+    onValueCommit?: (value: number[]) => void;
+    value: number[];
+  }) => (
+    <div>
+      <button
+        aria-label="Slider change"
+        disabled={disabled}
+        onClick={() => onValueChange?.([value[0] + 1])}
+        type="button"
+      />
+      <button
+        aria-label="Slider commit"
+        disabled={disabled}
+        onClick={() => onValueCommit?.(value)}
+        type="button"
+      />
+    </div>
+  ),
+}));
+
 SetupMocks.resizeObserver();
 
 describe("SliderPlugin", () => {
@@ -51,46 +80,45 @@ describe("SliderPlugin", () => {
     const plugin = new SliderPlugin();
     const setValue = vi.fn();
     const props = createProps(false, false, setValue);
-    const { container } = render(plugin.render(props));
+    const { getByRole } = render(plugin.render(props));
 
     act(() => {
       vi.advanceTimersByTime(0);
     });
 
-    const thumb = container.querySelector('[role="slider"]');
-    expect(thumb).toBeTruthy();
+    const changeButton = getByRole("button", { name: "Slider change" });
 
-    // Radix UI Slider updates on keyboard ArrowRight/ArrowLeft
     act(() => {
-      (thumb as HTMLElement)?.focus();
-      fireEvent.keyDown(thumb!, { key: "ArrowRight" });
+      fireEvent.click(changeButton);
     });
 
     expect(setValue).toHaveBeenCalledWith(6);
   });
 
-  it("slider does not trigger setValue immediately when debounce is true", () => {
+  it("slider waits until commit before calling setValue when debounce is true", () => {
     const plugin = new SliderPlugin();
     const setValue = vi.fn();
     const props = createProps(true, false, setValue);
-    const { container } = render(plugin.render(props));
+    const { getByRole } = render(plugin.render(props));
 
     act(() => {
       vi.advanceTimersByTime(0);
     });
 
-    const thumb = container.querySelector('[role="slider"]');
+    const changeButton = getByRole("button", { name: "Slider change" });
+    const commitButton = getByRole("button", { name: "Slider commit" });
 
     act(() => {
-      (thumb as HTMLElement)?.focus();
-      // Simulate just a programmatic change that Radix would trigger via pointer move
-      // which fires onValueChange but not onValueCommit yet
-      // Because we can't easily separated Radix's internal pointer events in jsdom, we
-      // test the main issue: editable input. We can trust Radix's onValueChange vs onValueCommit.
+      fireEvent.click(changeButton);
     });
 
-    // We verified above that NumberField works when debounce=true
     expect(setValue).not.toHaveBeenCalled();
+
+    act(() => {
+      fireEvent.click(commitButton);
+    });
+
+    expect(setValue).toHaveBeenCalledWith(6);
   });
 
   it("editable input triggers setValue immediately even when slider debounce is true", () => {

package/src/plugins/impl/data-frames/forms/__tests__/form.test.tsx

@@ -44,16 +44,14 @@ describe("renderZodSchema", () => {
     [...TransformTypeSchema.options],
     (z) => getUnionLiteral(z).value,
   );
-  it.each(
-    Object.entries(options),
-  )("should render a form %s", (name, schema: z.ZodType<
-    unknown,
-    FieldValues
-  >) => {
-    const expected = render(<Subject schema={schema} />);
+  it.each(Object.entries(options))(
+    "should render a form %s",
+    (name, schema: z.ZodType<unknown, FieldValues>) => {
+      const expected = render(<Subject schema={schema} />);
 
-    expect(expected.asFragment()).toMatchSnapshot();
-  });
+      expect(expected.asFragment()).toMatchSnapshot();
+    },
+  );
 });
 
 const options = [

package/src/plugins/impl/plotly/PlotlyPlugin.tsx

@@ -15,7 +15,11 @@ import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useScript } from "@/hooks/useScript";
 import { Arrays } from "@/utils/arrays";
 import { Objects } from "@/utils/objects";
-import { createParser, type PlotlyTemplateParser } from "./parse-from-template";
+import {
+  extractClickSelection,
+  extractIndices,
+  extractPoints,
+} from "./selection";
 import { usePlotlyLayout } from "./usePlotlyLayout";
 
 interface Data {
@@ -23,12 +27,9 @@ interface Data {
   config: Partial<Plotly.Config>;
 }
 
-type AxisName = string;
-type AxisDatum = unknown;
-
 type T =
   | {
-      points?: Record<AxisName, AxisDatum>[] | Plotly.PlotDatum[];
+      points?: Record<string, unknown>[] | Plotly.PlotDatum[];
       indices?: number[];
       range?: {
         x?: number[];
@@ -202,19 +203,13 @@ export const PlotlyComponent = memo(
           if (!evt) {
             return;
           }
-          // Only handle clicks for chart types where box/lasso selection
-          // (onSelected) doesn't work, such as heatmaps.
-          const isHeatmap = evt.points.some(
-            (point) => point.data?.type === "heatmap",
-          );
-          if (!isHeatmap) {
+
+          const clickSelection = extractClickSelection(evt);
+          if (!clickSelection) {
             return;
           }
-          setValue((prev) => ({
-            ...prev,
-            points: extractPoints(evt.points),
-            indices: evt.points.map((point) => point.pointIndex),
-          }));
+
+          setValue((prev) => ({ ...prev, ...clickSelection }));
         })}
         onSelected={useEvent((evt: Readonly<Plotly.PlotSelectionEvent>) => {
           if (!evt) {
@@ -226,7 +221,7 @@ export const PlotlyComponent = memo(
             selections:
               "selections" in evt ? (evt.selections as unknown[]) : [],
             points: extractPoints(evt.points),
-            indices: evt.points.map((point) => point.pointIndex),
+            indices: extractIndices(evt.points),
             range: evt.range,
           }));
         })}
@@ -241,54 +236,3 @@ export const PlotlyComponent = memo(
   },
 );
 PlotlyComponent.displayName = "PlotlyComponent";
-
-/**
- * This is a hack to extract the points with their original keys,
- * instead of the ones that Plotly uses internally,
- * by using the hovertemplate.
- */
-const STANDARD_POINT_KEYS: string[] = [
-  "x",
-  "y",
-  "z",
-  "lat",
-  "lon",
-  "curveNumber",
-  "pointNumber",
-  "pointNumbers",
-  "pointIndex",
-];
-
-function extractPoints(
-  points: Plotly.PlotDatum[],
-): Record<AxisName, AxisDatum>[] {
-  if (!points) {
-    return [];
-  }
-
-  let parser: PlotlyTemplateParser | undefined;
-
-  return points.map((point) => {
-    const standardPointFields = Objects.pick(point, STANDARD_POINT_KEYS);
-
-    // Get the first hovertemplate
-    const hovertemplate = Array.isArray(point.data.hovertemplate)
-      ? point.data.hovertemplate[0]
-      : point.data.hovertemplate;
-
-    // For chart types with standard point keys (e.g. heatmaps),
-    // or when there's no hovertemplate, pick keys directly from the point.
-    if (!hovertemplate || point.data?.type === "heatmap") {
-      return standardPointFields;
-    }
-
-    // Update or create a parser
-    parser = parser
-      ? parser.update(hovertemplate)
-      : createParser(hovertemplate);
-    return {
-      ...standardPointFields,
-      ...parser.parse(point),
-    };
-  });
-}

package/src/plugins/impl/plotly/__tests__/selection.test.ts

@@ -0,0 +1,237 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type * as Plotly from "plotly.js";
+import { describe, expect, it } from "vitest";
+import {
+  extractClickSelection,
+  extractIndices,
+  extractPoints,
+} from "../selection";
+
+interface PlotlyPointInput {
+  data: {
+    type: string;
+    hovertemplate?: string | string[];
+  };
+  [key: string]: unknown;
+}
+
+function makePoint(point: PlotlyPointInput): Plotly.PlotDatum {
+  return point as unknown as Plotly.PlotDatum;
+}
+
+function makeClickEvent(
+  points: Plotly.PlotDatum[],
+): Readonly<Plotly.PlotMouseEvent> {
+  return { points } as unknown as Readonly<Plotly.PlotMouseEvent>;
+}
+
+describe("extractIndices", () => {
+  it("prefers pointIndex and falls back to pointNumber", () => {
+    const points = [
+      makePoint({
+        pointIndex: 2,
+        pointNumber: 99,
+        data: { type: "scatter" },
+      }),
+      makePoint({
+        pointNumber: 4,
+        data: { type: "scattergl" },
+      }),
+      makePoint({
+        data: { type: "heatmap" },
+      }),
+    ];
+
+    expect(extractIndices(points)).toEqual([2, 4]);
+  });
+});
+
+describe("extractPoints", () => {
+  it("extracts parsed scatter payload fields from the hovertemplate", () => {
+    const points = [
+      makePoint({
+        x: 3,
+        y: 7,
+        curveNumber: 0,
+        pointIndex: 1,
+        customdata: ["B"],
+        data: {
+          type: "scatter",
+          hovertemplate:
+            "label=%{customdata[0]}<br>x=%{x}<br>y=%{y}<extra></extra>",
+        },
+      }),
+    ];
+
+    expect(extractPoints(points)).toEqual([
+      {
+        x: 3,
+        y: 7,
+        curveNumber: 0,
+        pointIndex: 1,
+        label: "B",
+      },
+    ]);
+  });
+
+  it("keeps standard heatmap keys without hovertemplate parsing", () => {
+    const points = [
+      makePoint({
+        x: "B",
+        y: "Row 2",
+        z: 6,
+        curveNumber: 0,
+        pointIndex: 5,
+        data: { type: "heatmap", hovertemplate: "ignored=%{z}" },
+      }),
+    ];
+
+    expect(extractPoints(points)).toEqual([
+      {
+        x: "B",
+        y: "Row 2",
+        z: 6,
+        curveNumber: 0,
+        pointIndex: 5,
+      },
+    ]);
+  });
+});
+
+describe("extractClickSelection", () => {
+  it("returns undefined for unsupported trace types", () => {
+    const event = makeClickEvent([
+      makePoint({
+        x: "A",
+        y: 10,
+        pointIndex: 0,
+        data: { type: "bar" },
+      }),
+    ]);
+
+    expect(extractClickSelection(event)).toBeUndefined();
+  });
+
+  it("returns undefined when all points are non-click-selectable trace types", () => {
+    // scatter and scattergl use onSelected (box/lasso) for selection, not onClick.
+    // Clicks on these traces fire both plotly_click and plotly_selected; the
+    // latter provides a range and must be the authoritative source.
+    const event = makeClickEvent([
+      makePoint({
+        x: "ignore",
+        y: 1,
+        pointIndex: 0,
+        data: { type: "bar" },
+      }),
+      makePoint({
+        x: 2,
+        y: 5,
+        curveNumber: 1,
+        pointIndex: 3,
+        data: { type: "scatter" },
+      }),
+      makePoint({
+        x: 4,
+        y: 12,
+        curveNumber: 2,
+        pointNumber: 5,
+        data: { type: "scattergl" },
+      }),
+    ]);
+
+    expect(extractClickSelection(event)).toBeUndefined();
+  });
+
+  it("filters unsupported points and preserves supported click payloads", () => {
+    // bar is unsupported; histogram is supported and its pointNumbers must be
+    // forwarded so the backend can recover the exact sample rows.
+    const event = makeClickEvent([
+      makePoint({
+        x: "ignore",
+        y: 1,
+        pointIndex: 0,
+        data: { type: "bar" },
+      }),
+      makePoint({
+        x: 8,
+        y: 3,
+        curveNumber: 1,
+        pointNumber: 2,
+        pointNumbers: [4, 5, 6],
+        data: { type: "histogram" },
+      }),
+    ]);
+
+    expect(extractClickSelection(event)).toEqual({
+      selections: [],
+      range: undefined,
+      indices: [2],
+      points: [
+        {
+          x: 8,
+          y: 3,
+          curveNumber: 1,
+          pointNumber: 2,
+          pointNumbers: [4, 5, 6],
+        },
+      ],
+    });
+  });
+
+  it("preserves histogram pointNumbers for backend row extraction", () => {
+    const event = makeClickEvent([
+      makePoint({
+        x: 8,
+        y: 2,
+        curveNumber: 0,
+        pointNumber: 3,
+        pointNumbers: [6, 7],
+        data: { type: "histogram" },
+      }),
+    ]);
+
+    expect(extractClickSelection(event)).toEqual({
+      selections: [],
+      range: undefined,
+      indices: [3],
+      points: [
+        {
+          x: 8,
+          y: 2,
+          curveNumber: 0,
+          pointNumber: 3,
+          pointNumbers: [6, 7],
+        },
+      ],
+    });
+  });
+
+  it("preserves standard heatmap click payloads", () => {
+    const event = makeClickEvent([
+      makePoint({
+        x: "C",
+        y: "Row 3",
+        z: 11,
+        curveNumber: 0,
+        pointIndex: 10,
+        data: { type: "heatmap" },
+      }),
+    ]);
+
+    expect(extractClickSelection(event)).toEqual({
+      selections: [],
+      range: undefined,
+      indices: [10],
+      points: [
+        {
+          x: "C",
+          y: "Row 3",
+          z: 11,
+          curveNumber: 0,
+          pointIndex: 10,
+        },
+      ],
+    });
+  });
+});