@marimo-team/islands 0.22.1-dev27 → 0.22.1-dev28

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/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,
+        },
+      ],
+    });
+  });
+});

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

@@ -0,0 +1,118 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { pick } from "lodash-es";
+import type * as Plotly from "plotly.js";
+import { Arrays } from "@/utils/arrays";
+import { createParser, type PlotlyTemplateParser } from "./parse-from-template";
+
+type AxisName = string;
+type AxisDatum = unknown;
+
+export interface PlotlyClickSelection {
+  points: Record<AxisName, AxisDatum>[] | Plotly.PlotDatum[];
+  indices: number[];
+  range: undefined;
+  selections: unknown[];
+}
+
+const CLICK_SELECTABLE_TRACE_TYPES = new Set([
+  "heatmap",
+  "histogram",
+]);
+
+const STANDARD_POINT_KEYS: string[] = [
+  "x",
+  "y",
+  "z",
+  "lat",
+  "lon",
+  "curveNumber",
+  "pointNumber",
+  "pointNumbers",
+  "pointIndex",
+] as const;
+
+function getPointIndex(point: Plotly.PlotDatum): number | undefined {
+  if (typeof point.pointIndex === "number") {
+    return point.pointIndex;
+  }
+
+  if (typeof point.pointNumber === "number") {
+    return point.pointNumber;
+  }
+
+  return undefined;
+}
+
+function isClickSelectablePoint(point: Plotly.PlotDatum): boolean {
+  const traceType = point.data?.type;
+  return typeof traceType === "string"
+    ? CLICK_SELECTABLE_TRACE_TYPES.has(traceType)
+    : false;
+}
+
+export function extractIndices(points: Plotly.PlotDatum[]): number[] {
+  return points.flatMap((point) => {
+    const index = getPointIndex(point);
+    return typeof index === "number" ? [index] : [];
+  });
+}
+
+/**
+ * This is a hack to extract the points with their original keys,
+ * instead of the ones that Plotly uses internally,
+ * by using the hovertemplate.
+ */
+export function extractPoints(
+  points: Plotly.PlotDatum[],
+): Record<AxisName, AxisDatum>[] {
+  if (!points) {
+    return [];
+  }
+
+  let parser: PlotlyTemplateParser | undefined;
+
+  return points.map((point) => {
+    const standardPointFields = 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),
+    };
+  });
+}
+
+export function extractClickSelection(
+  evt: Readonly<Plotly.PlotMouseEvent>,
+): PlotlyClickSelection | undefined {
+  if (!evt.points?.length) {
+    return undefined;
+  }
+
+  const points = evt.points.filter(isClickSelectablePoint);
+  if (points.length === 0) {
+    return undefined;
+  }
+
+  return {
+    selections: Arrays.EMPTY,
+    points: extractPoints(points),
+    indices: extractIndices(points),
+    range: undefined,
+  };
+}

package/dist/_basePickBy-CsPbmRlg.js

@@ -1,110 +0,0 @@
-import { B as isArray_default, C as isArrayLike_default, H as _baseGetTag_default, R as identity_default, S as _isIterateeCall_default, T as _baseRest_default, V as isObjectLike_default, f as keysIn_default, k as eq_default } from "./isArrayLikeObject-LXbTYiBa.js";
-import { t as isSymbol_default } from "./isSymbol-DCbjQG_U.js";
-import { i as _castPath_default, n as _baseGet_default, s as _arrayMap_default } from "./get-Wu1vTRhN.js";
-import { n as toFinite_default, t as _baseSet_default } from "./_baseSet-Cs7YTRXk.js";
-import { C as keys_default, E as _baseFindIndex_default, S as _baseFlatten_default, f as _baseIteratee_default, h as _hasPath_default, u as _baseEach_default } from "./_baseUniq--7il0Js0.js";
-function toInteger(f) {
-  var V = toFinite_default(f), H = V % 1;
-  return V === V ? H ? V - H : V : 0;
-}
-var toInteger_default = toInteger;
-function flatten(f) {
-  return f != null && f.length ? _baseFlatten_default(f, 1) : [];
-}
-var flatten_default = flatten, objectProto = Object.prototype, hasOwnProperty$1 = objectProto.hasOwnProperty, defaults_default = _baseRest_default(function(f, V) {
-  f = Object(f);
-  var H = -1, U = V.length, G = U > 2 ? V[2] : void 0;
-  for (G && _isIterateeCall_default(V[0], V[1], G) && (U = 1); ++H < U; ) for (var K = V[H], Y = keysIn_default(K), X = -1, Z = Y.length; ++X < Z; ) {
-    var Q = Y[X], $ = f[Q];
-    ($ === void 0 || eq_default($, objectProto[Q]) && !hasOwnProperty$1.call(f, Q)) && (f[Q] = K[Q]);
-  }
-  return f;
-});
-function last(f) {
-  var V = f == null ? 0 : f.length;
-  return V ? f[V - 1] : void 0;
-}
-var last_default = last;
-function createFind(f) {
-  return function(H, U, W) {
-    var G = Object(H);
-    if (!isArrayLike_default(H)) {
-      var K = _baseIteratee_default(U, 3);
-      H = keys_default(H), U = function(f2) {
-        return K(G[f2], f2, G);
-      };
-    }
-    var q = f(H, U, W);
-    return q > -1 ? G[K ? H[q] : q] : void 0;
-  };
-}
-var _createFind_default = createFind, nativeMax = Math.max;
-function findIndex(f, V, H) {
-  var U = f == null ? 0 : f.length;
-  if (!U) return -1;
-  var W = H == null ? 0 : toInteger_default(H);
-  return W < 0 && (W = nativeMax(U + W, 0)), _baseFindIndex_default(f, _baseIteratee_default(V, 3), W);
-}
-var find_default = _createFind_default(findIndex);
-function baseMap(f, H) {
-  var U = -1, W = isArrayLike_default(f) ? Array(f.length) : [];
-  return _baseEach_default(f, function(f2, V, G) {
-    W[++U] = H(f2, V, G);
-  }), W;
-}
-var _baseMap_default = baseMap;
-function map(V, H) {
-  return (isArray_default(V) ? _arrayMap_default : _baseMap_default)(V, _baseIteratee_default(H, 3));
-}
-var map_default = map, hasOwnProperty = Object.prototype.hasOwnProperty;
-function baseHas(f, V) {
-  return f != null && hasOwnProperty.call(f, V);
-}
-var _baseHas_default = baseHas;
-function has(f, V) {
-  return f != null && _hasPath_default(f, V, _baseHas_default);
-}
-var has_default = has, stringTag = "[object String]";
-function isString(V) {
-  return typeof V == "string" || !isArray_default(V) && isObjectLike_default(V) && _baseGetTag_default(V) == stringTag;
-}
-var isString_default = isString;
-function baseLt(f, V) {
-  return f < V;
-}
-var _baseLt_default = baseLt;
-function baseExtremum(f, V, H) {
-  for (var U = -1, W = f.length; ++U < W; ) {
-    var G = f[U], K = V(G);
-    if (K != null && (q === void 0 ? K === K && !isSymbol_default(K) : H(K, q))) var q = K, J = G;
-  }
-  return J;
-}
-var _baseExtremum_default = baseExtremum;
-function min(f) {
-  return f && f.length ? _baseExtremum_default(f, identity_default, _baseLt_default) : void 0;
-}
-var min_default = min;
-function basePickBy(f, V, H) {
-  for (var U = -1, W = V.length, G = {}; ++U < W; ) {
-    var K = V[U], q = _baseGet_default(f, K);
-    H(q, K) && _baseSet_default(G, _castPath_default(K, f), q);
-  }
-  return G;
-}
-var _basePickBy_default = basePickBy;
-export {
-  isString_default as a,
-  _baseMap_default as c,
-  defaults_default as d,
-  flatten_default as f,
-  _baseLt_default as i,
-  find_default as l,
-  min_default as n,
-  has_default as o,
-  toInteger_default as p,
-  _baseExtremum_default as r,
-  map_default as s,
-  _basePickBy_default as t,
-  last_default as u
-};

package/dist/_baseSet-Cs7YTRXk.js

@@ -1,27 +0,0 @@
-import { O as _assignValue_default, j as _isIndex_default, z as isObject_default } from "./isArrayLikeObject-LXbTYiBa.js";
-import { i as _castPath_default, r as _toKey_default } from "./get-Wu1vTRhN.js";
-import { t as toNumber_default } from "./toNumber-55tjPCWr.js";
-var INFINITY = Infinity, MAX_INTEGER = 17976931348623157e292;
-function toFinite(e) {
-  return e ? (e = toNumber_default(e), e === INFINITY || e === -INFINITY ? (e < 0 ? -1 : 1) * MAX_INTEGER : e === e ? e : 0) : e === 0 ? e : 0;
-}
-var toFinite_default = toFinite;
-function baseSet(a, o, s, c) {
-  if (!isObject_default(a)) return a;
-  o = _castPath_default(o, a);
-  for (var l = -1, u = o.length, d = u - 1, f = a; f != null && ++l < u; ) {
-    var p = _toKey_default(o[l]), m = s;
-    if (p === "__proto__" || p === "constructor" || p === "prototype") return a;
-    if (l != d) {
-      var h = f[p];
-      m = c ? c(h, p, f) : void 0, m === void 0 && (m = isObject_default(h) ? h : _isIndex_default(o[l + 1]) ? [] : {});
-    }
-    _assignValue_default(f, p, m), f = f[p];
-  }
-  return a;
-}
-var _baseSet_default = baseSet;
-export {
-  toFinite_default as n,
-  _baseSet_default as t
-};