@marimo-team/islands 0.22.1-dev8 → 0.22.1

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

@@ -0,0 +1,114 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, render, waitFor } from "@testing-library/react";
+import { Suspense } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import type { Setter } from "@/plugins/types";
+import { PlotlyComponent } from "../PlotlyPlugin";
+
+SetupMocks.resizeObserver();
+
+type CapturedPlotProps = {
+  onClick?: (event: {
+    points: {
+      data?: { type?: string };
+      x?: string | number;
+      y?: string | number;
+      pointIndex?: number;
+      pointNumber?: number;
+      curveNumber?: number;
+    }[];
+  }) => void;
+} | null;
+
+let capturedPlotProps: CapturedPlotProps = null;
+
+vi.mock("../Plot", () => ({
+  Plot: (props: CapturedPlotProps) => {
+    capturedPlotProps = props;
+    return <div data-testid="plotly-mock" />;
+  },
+}));
+
+vi.mock("../usePlotlyLayout", () => ({
+  usePlotlyLayout: ({
+    originalFigure,
+  }: {
+    originalFigure: {
+      data: unknown[];
+      layout: Record<string, unknown>;
+      frames: unknown[] | null;
+    };
+  }) => ({
+    figure: originalFigure,
+    layout: originalFigure.layout,
+    handleReset: vi.fn(),
+  }),
+}));
+
+vi.mock("@/hooks/useScript", () => ({
+  useScript: () => "ready",
+}));
+
+vi.mock("react-use-event-hook", () => ({
+  default: <T,>(callback: T) => callback,
+}));
+
+describe("PlotlyPlugin", () => {
+  it("clicking a bar selects that bar", async () => {
+    const setValue = vi.fn<Setter<unknown>>();
+
+    render(
+      <Suspense fallback={null}>
+        <PlotlyComponent
+          figure={{
+            data: [{ type: "bar" }],
+            layout: {},
+            frames: null,
+          }}
+          value={undefined}
+          setValue={setValue}
+          host={document.createElement("div")}
+          config={{}}
+        />
+      </Suspense>,
+    );
+
+    await waitFor(() => {
+      expect(capturedPlotProps).not.toBeNull();
+    });
+
+    act(() => {
+      capturedPlotProps?.onClick?.({
+        points: [
+          {
+            data: { type: "bar" },
+            x: "Feb",
+            y: 18,
+            pointIndex: 1,
+            pointNumber: 1,
+            curveNumber: 0,
+          },
+        ],
+      });
+    });
+
+    expect(setValue).toHaveBeenCalledTimes(1);
+    const updater = setValue.mock.calls[0][0] as (value: unknown) => unknown;
+    expect(updater({})).toEqual({
+      selections: [],
+      points: [
+        {
+          x: "Feb",
+          y: 18,
+          curveNumber: 0,
+          pointNumber: 1,
+          pointIndex: 1,
+        },
+      ],
+      indices: [1],
+      range: undefined,
+    });
+  });
+});

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

@@ -0,0 +1,199 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type * as Plotly from "plotly.js";
+import { describe, expect, it, vi } from "vitest";
+import {
+  extractIndices,
+  extractPoints,
+  hasPureLineTrace,
+  lineSelectionButtons,
+  type ModeBarButton,
+  mergeModeBarButtonsToAdd,
+  shouldHandleClickSelection,
+} from "../selection";
+
+function createTrace(trace: Partial<Plotly.PlotData>): Plotly.Data {
+  return trace as unknown as Plotly.Data;
+}
+
+function createPlotDatum<T extends object>(overrides: T): Plotly.PlotDatum & T {
+  return overrides as unknown as Plotly.PlotDatum & T;
+}
+
+describe("hasPureLineTrace", () => {
+  it("detects scatter and scattergl traces that are pure lines", () => {
+    expect(
+      hasPureLineTrace([
+        createTrace({ type: "scatter", mode: "lines" }),
+        createTrace({ type: "scattergl", mode: "text+lines" }),
+      ]),
+    ).toBe(true);
+  });
+
+  it("ignores non-line and marker traces", () => {
+    expect(
+      hasPureLineTrace([
+        createTrace({ type: "scatter", mode: "markers" }),
+        createTrace({ type: "scatter", mode: "lines+markers" }),
+        createTrace({ type: "bar" }),
+      ]),
+    ).toBe(false);
+  });
+});
+
+describe("lineSelectionButtons", () => {
+  it("creates dragmode buttons that update dragmode", () => {
+    const setDragmode = vi.fn();
+    const buttons = lineSelectionButtons(setDragmode);
+
+    expect(buttons).toHaveLength(2);
+    expect(
+      buttons.map((button) =>
+        typeof button === "string" ? button : button.name,
+      ),
+    ).toEqual(["line-box-select", "line-lasso-select"]);
+
+    const graphDiv = document.createElement(
+      "div",
+    ) as unknown as Plotly.PlotlyHTMLElement;
+    const clickEvent = new MouseEvent("click");
+
+    (buttons[0] as Exclude<ModeBarButton, string>).click(graphDiv, clickEvent);
+    (buttons[1] as Exclude<ModeBarButton, string>).click(graphDiv, clickEvent);
+
+    expect(setDragmode).toHaveBeenNthCalledWith(1, "select");
+    expect(setDragmode).toHaveBeenNthCalledWith(2, "lasso");
+  });
+});
+
+describe("mergeModeBarButtonsToAdd", () => {
+  it("deduplicates string buttons while preserving custom buttons", () => {
+    const customButton = {
+      name: "custom",
+      title: "Custom",
+      icon: { svg: "<svg />" },
+      click: vi.fn(),
+    } satisfies Exclude<ModeBarButton, string>;
+
+    expect(
+      mergeModeBarButtonsToAdd(
+        ["zoom2d", "lasso2d"],
+        ["lasso2d", customButton, "zoom2d"],
+      ),
+    ).toEqual(["zoom2d", "lasso2d", customButton]);
+  });
+});
+
+describe("shouldHandleClickSelection", () => {
+  it("accepts bar clicks", () => {
+    const barPoint = createPlotDatum({
+      data: { type: "bar" },
+    });
+
+    expect(shouldHandleClickSelection([barPoint])).toBe(true);
+  });
+
+  it("accepts heatmap clicks", () => {
+    const heatmapPoint = createPlotDatum({
+      data: { type: "heatmap" },
+    });
+
+    expect(shouldHandleClickSelection([heatmapPoint])).toBe(true);
+  });
+
+  it("accepts histogram clicks", () => {
+    const histogramPoint = createPlotDatum({
+      data: { type: "histogram" },
+    });
+
+    expect(shouldHandleClickSelection([histogramPoint])).toBe(true);
+  });
+
+  it("accepts scatter clicks when Plotly omits mode", () => {
+    const linePoint = createPlotDatum({
+      data: { type: "scatter" },
+    });
+
+    expect(shouldHandleClickSelection([linePoint])).toBe(true);
+  });
+
+  it("rejects non-line scatter marker clicks", () => {
+    const markerPoint = createPlotDatum({
+      data: { type: "scatter", mode: "markers" },
+    });
+
+    expect(shouldHandleClickSelection([markerPoint])).toBe(false);
+  });
+});
+
+describe("extractIndices", () => {
+  it("prefers pointIndex and falls back to pointNumber and pointNumbers", () => {
+    const points = [
+      createPlotDatum({ pointIndex: 2 }),
+      createPlotDatum({ pointNumber: 5 }),
+      createPlotDatum({ pointNumbers: [Number.NaN, 8] }),
+      createPlotDatum({ pointNumbers: [Infinity] }),
+    ];
+
+    expect(extractIndices(points)).toEqual([2, 5, 8]);
+  });
+});
+
+describe("extractPoints", () => {
+  it("infers missing x/y from trace data for line clicks", () => {
+    const point = createPlotDatum({
+      pointNumber: 1,
+      data: { type: "scatter" },
+      fullData: {
+        type: "scatter",
+        mode: "lines",
+        x: new Float64Array([10, 20, 30]),
+        y: [100, 200, 300],
+      },
+    });
+
+    expect(extractPoints([point])).toEqual([
+      { pointNumber: 1, pointIndex: 1, x: 20, y: 200 },
+    ]);
+  });
+
+  it("parses hovertemplate values while keeping inferred point fields", () => {
+    const point = createPlotDatum({
+      pointIndex: 0,
+      customdata: ["Mustang", "USA"],
+      fullData: {
+        type: "scatter",
+        mode: "lines",
+        x: ["300"],
+        y: ["30"],
+        hovertemplate:
+          "Name=%{customdata[0]}<br>Origin=%{customdata[1]}<extra></extra>",
+      },
+    });
+
+    expect(extractPoints([point])).toEqual([
+      {
+        pointIndex: 0,
+        x: "300",
+        y: "30",
+        Name: "Mustang",
+        Origin: "USA",
+      },
+    ]);
+  });
+
+  it("returns only standard fields for heatmaps", () => {
+    const point = createPlotDatum({
+      x: 1,
+      y: 2,
+      z: 3,
+      text: "ignored",
+      data: {
+        type: "heatmap",
+        hovertemplate: "Label=%{text}<extra></extra>",
+      },
+    });
+
+    expect(extractPoints([point])).toEqual([{ x: 1, y: 2, z: 3 }]);
+  });
+});

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

@@ -0,0 +1,333 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { pick } from "lodash-es";
+import type * as Plotly from "plotly.js";
+
+import { createParser, type PlotlyTemplateParser } from "./parse-from-template";
+
+type AxisName = string;
+type AxisDatum = unknown;
+
+const SUNBURST_DATA_KEYS: (keyof Plotly.SunburstPlotDatum)[] = [
+  "color",
+  "curveNumber",
+  "entry",
+  "hovertext",
+  "id",
+  "label",
+  "parent",
+  "percentEntry",
+  "percentParent",
+  "percentRoot",
+  "pointNumber",
+  "root",
+  "value",
+] as const;
+
+const LINE_CLICK_TRACE_TYPES = new Set(["scatter", "scattergl"]);
+
+const STANDARD_POINT_KEYS: string[] = [
+  "x",
+  "y",
+  "z",
+  "lat",
+  "lon",
+  "curveNumber",
+  "pointNumber",
+  "pointNumbers",
+  "pointIndex",
+] as const;
+
+type PointWithFullData = Plotly.PlotDatum & {
+  pointNumbers?: number[];
+  fullData?: {
+    type?: string;
+    mode?: string;
+    x?: unknown[];
+    y?: unknown[];
+    hovertemplate?: string | string[];
+  };
+};
+
+interface TraceSource {
+  type?: string;
+  mode?: string;
+  x?: unknown[];
+  y?: unknown[];
+  hovertemplate?: string | string[];
+}
+
+export type ModeBarButton = NonNullable<
+  Plotly.Config["modeBarButtonsToAdd"]
+>[number];
+
+function coalesceField<T>(
+  primary: T | undefined,
+  fallback: T | undefined,
+): T | undefined {
+  return primary ?? fallback;
+}
+
+function getTraceSource(point: Plotly.PlotDatum): TraceSource {
+  const withFullData = point as PointWithFullData;
+  const data = (point.data ?? {}) as TraceSource;
+  const fullData = (withFullData.fullData ?? {}) as TraceSource;
+
+  // Plotly click payloads sometimes include partial `data` plus richer `fullData`.
+  // Merge field-by-field so we don't lose type/mode/x/y metadata for pure lines.
+  return {
+    type: coalesceField(data.type, fullData.type),
+    mode: coalesceField(data.mode, fullData.mode),
+    x: coalesceField(data.x, fullData.x),
+    y: coalesceField(data.y, fullData.y),
+    hovertemplate: coalesceField(data.hovertemplate, fullData.hovertemplate),
+  };
+}
+
+function asFiniteNumber(value: unknown): number | undefined {
+  return typeof value === "number" && Number.isFinite(value)
+    ? value
+    : undefined;
+}
+
+function getPointIndex(point: Plotly.PlotDatum): number | undefined {
+  const pointIndex = asFiniteNumber(point.pointIndex);
+  if (pointIndex !== undefined) {
+    return pointIndex;
+  }
+
+  const pointNumber = asFiniteNumber(point.pointNumber);
+  if (pointNumber !== undefined) {
+    return pointNumber;
+  }
+
+  const pointNumbers = (point as PointWithFullData).pointNumbers;
+  if (!Array.isArray(pointNumbers)) {
+    return undefined;
+  }
+
+  return pointNumbers.map(asFiniteNumber).find((n) => n !== undefined);
+}
+
+function isLinePoint(point: Plotly.PlotDatum): boolean {
+  const trace = getTraceSource(point);
+  if (!LINE_CLICK_TRACE_TYPES.has(String(trace.type))) {
+    return false;
+  }
+
+  const mode = trace.mode;
+  if (typeof mode !== "string") {
+    // Some Plotly click payloads omit mode on point.data, especially with
+    // line traces; treat scatter/scattergl as line-like in this case.
+    return true;
+  }
+
+  return mode.split("+").includes("lines");
+}
+
+function isPureLineMode(mode: unknown): boolean {
+  if (typeof mode !== "string") {
+    return false;
+  }
+  const parts = mode.split("+");
+  return parts.includes("lines") && !parts.includes("markers");
+}
+
+export function hasPureLineTrace(
+  data: readonly Plotly.Data[] | undefined,
+): boolean {
+  if (!data) {
+    return false;
+  }
+
+  return data.some((trace) => {
+    const traceType = (trace as { type?: unknown }).type;
+    const isScatterLike =
+      traceType === undefined || LINE_CLICK_TRACE_TYPES.has(String(traceType));
+    if (!isScatterLike) {
+      return false;
+    }
+    return isPureLineMode((trace as { mode?: unknown }).mode);
+  });
+}
+
+function createDragmodeButton(
+  name: string,
+  title: string,
+  svg: string,
+  dragmode: Plotly.Layout["dragmode"],
+  setDragmode: (dragmode: Plotly.Layout["dragmode"]) => void,
+): ModeBarButton {
+  return {
+    name,
+    title,
+    icon: { svg },
+    click: () => setDragmode(dragmode),
+  };
+}
+
+export function lineSelectionButtons(
+  setDragmode: (dragmode: Plotly.Layout["dragmode"]) => void,
+): ModeBarButton[] {
+  return [
+    createDragmodeButton(
+      "line-box-select",
+      "Box select",
+      `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="4" y="4" width="16" height="16" stroke-dasharray="2 2" />
+      </svg>`,
+      "select",
+      setDragmode,
+    ),
+    createDragmodeButton(
+      "line-lasso-select",
+      "Lasso select",
+      `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M6 8c0-2.2 2.2-4 5-4s5 1.8 5 4-2.2 4-5 4-5 1.8-5 4 2.2 4 5 4" />
+        <circle cx="17.5" cy="16.5" r="1.5" />
+      </svg>`,
+      "lasso",
+      setDragmode,
+    ),
+  ];
+}
+
+export function mergeModeBarButtonsToAdd(
+  defaults: readonly ModeBarButton[],
+  userButtons: readonly ModeBarButton[] | undefined,
+): ModeBarButton[] {
+  const merged: ModeBarButton[] = [];
+  const seenStrings = new Set<string>();
+
+  const pushButton = (button: ModeBarButton) => {
+    if (typeof button === "string") {
+      if (seenStrings.has(button)) {
+        return;
+      }
+      seenStrings.add(button);
+      merged.push(button);
+      return;
+    }
+    merged.push(button);
+  };
+
+  defaults.forEach(pushButton);
+  userButtons?.forEach(pushButton);
+  return merged;
+}
+
+export function shouldHandleClickSelection(
+  points: readonly Plotly.PlotDatum[],
+): boolean {
+  return points.some((point) => {
+    const type = getTraceSource(point).type;
+    return (
+      type === "bar" ||
+      type === "heatmap" ||
+      type === "histogram" ||
+      isLinePoint(point)
+    );
+  });
+}
+
+export function extractIndices(points: readonly Plotly.PlotDatum[]): number[] {
+  return points
+    .map(getPointIndex)
+    .filter((pointIndex): pointIndex is number => pointIndex !== undefined);
+}
+
+function getIndexedValue(series: unknown, index: number): unknown {
+  if (Array.isArray(series) || ArrayBuffer.isView(series)) {
+    return (series as ArrayLike<unknown>)[index];
+  }
+  if (typeof series === "object" && series !== null && "length" in series) {
+    const maybeLength = Number(
+      (series as { length?: unknown }).length ?? Number.NaN,
+    );
+    if (Number.isFinite(maybeLength) && index >= 0 && index < maybeLength) {
+      return (series as Record<number, unknown>)[index];
+    }
+  }
+  return undefined;
+}
+
+function withInferredXY(
+  point: Plotly.PlotDatum,
+  fields: Record<AxisName, AxisDatum>,
+): Record<AxisName, AxisDatum> {
+  // For some pure-line clicks Plotly provides index metadata but omits x/y.
+  // Recover x/y from trace arrays so Python gets a stable payload.
+  if (fields.x !== undefined && fields.y !== undefined) {
+    return fields;
+  }
+
+  const pointIndex = getPointIndex(point);
+  if (pointIndex === undefined) {
+    return fields;
+  }
+
+  const nextFields: Record<AxisName, AxisDatum> = { ...fields };
+  if (nextFields.pointIndex === undefined) {
+    nextFields.pointIndex = pointIndex;
+  }
+
+  const trace = getTraceSource(point);
+  if (nextFields.x === undefined) {
+    const inferredX = getIndexedValue(trace.x, pointIndex);
+    if (inferredX !== undefined) {
+      nextFields.x = inferredX;
+    }
+  }
+  if (nextFields.y === undefined) {
+    const inferredY = getIndexedValue(trace.y, pointIndex);
+    if (inferredY !== undefined) {
+      nextFields.y = inferredY;
+    }
+  }
+
+  return nextFields;
+}
+
+export function extractPoints(
+  points: readonly Plotly.PlotDatum[],
+): Record<AxisName, AxisDatum>[] {
+  let parser: PlotlyTemplateParser | undefined;
+
+  return points.map((point) => {
+    const standardPointFields = withInferredXY(
+      point,
+      pick(point, STANDARD_POINT_KEYS),
+    );
+
+    const trace = getTraceSource(point);
+
+    // Get the first hovertemplate
+    const hovertemplate = Array.isArray(trace.hovertemplate)
+      ? trace.hovertemplate[0]
+      : trace.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 || trace.type === "heatmap") {
+      return standardPointFields;
+    }
+
+    parser = parser
+      ? parser.update(hovertemplate)
+      : createParser(hovertemplate);
+    return {
+      ...standardPointFields,
+      ...parser.parse(point),
+    };
+  });
+}
+
+export function extractSunburstPoints(
+  points: readonly Plotly.PlotDatum[],
+): Record<string, unknown>[] {
+  return points.map((point) => pick(point, SUNBURST_DATA_KEYS));
+}
+
+export const extractTreemapPoints = extractSunburstPoints;

package/src/plugins/impl/vega/__tests__/make-selectable.test.ts

@@ -578,20 +578,19 @@ describe("makeSelectable", () => {
     `);
   });
 
-  it.each([
-    "errorbar",
-    "errorband",
-    "boxplot",
-  ])("should return the same spec if mark is %s", (mark) => {
-    const spec = {
-      mark,
-    } as unknown as VegaLiteSpec;
-    const newSpec = makeSelectable(spec, {});
-    expect(newSpec).toEqual(spec);
-    expect(getSelectionParamNames(newSpec)).toEqual([]);
-    expect(newSpec).toMatchSnapshot();
-    expect(parse(newSpec)).toBeDefined();
-  });
+  it.each(["errorbar", "errorband", "boxplot"])(
+    "should return the same spec if mark is %s",
+    (mark) => {
+      const spec = {
+        mark,
+      } as unknown as VegaLiteSpec;
+      const newSpec = makeSelectable(spec, {});
+      expect(newSpec).toEqual(spec);
+      expect(getSelectionParamNames(newSpec)).toEqual([]);
+      expect(newSpec).toMatchSnapshot();
+      expect(parse(newSpec)).toBeDefined();
+    },
+  );
 
   it("should add legend selection to composite charts (issue #6676)", () => {
     // Test case from https://github.com/marimo-team/marimo/issues/6676