@marimo-team/frontend 0.22.1-dev3 → 0.22.1-dev30

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/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

package/src/plugins/impl/vega/__tests__/utils.test.ts

@@ -33,4 +33,72 @@ describe("getContainerWidth", () => {
   it("should return undefined when width is explicitly undefined", () => {
     expect(getContainerWidth({ width: undefined })).toBeUndefined();
   });
+
+  it("should find width in nested facet spec", () => {
+    expect(
+      getContainerWidth({
+        $schema: "https://vega.github.io/schema/vega-lite/v6.json",
+        facet: { column: { field: "Origin", type: "nominal" } },
+        spec: {
+          mark: "point",
+          encoding: {},
+          width: "container",
+        },
+      }),
+    ).toBe("container");
+  });
+
+  it("should find width in nested repeat spec", () => {
+    expect(
+      getContainerWidth({
+        $schema: "https://vega.github.io/schema/vega-lite/v6.json",
+        repeat: { row: ["A", "B"] },
+        spec: {
+          mark: "point",
+          encoding: {},
+          width: "container",
+        },
+      }),
+    ).toBe("container");
+  });
+
+  it("should return undefined for nested spec without width", () => {
+    expect(
+      getContainerWidth({
+        facet: { column: { field: "Origin" } },
+        spec: { mark: "point", encoding: {} },
+      }),
+    ).toBeUndefined();
+  });
+
+  it("should return undefined for hconcat (width on sub-specs)", () => {
+    expect(
+      getContainerWidth({
+        hconcat: [{ width: "container" }, { width: "container" }],
+      }),
+    ).toBeUndefined();
+  });
+
+  it("should return undefined for vconcat (width on sub-specs)", () => {
+    expect(
+      getContainerWidth({
+        vconcat: [{ width: "container" }, { width: "container" }],
+      }),
+    ).toBeUndefined();
+  });
+
+  it("should return undefined for compiled Vega spec (width as signal)", () => {
+    expect(
+      getContainerWidth({
+        $schema: "https://vega.github.io/schema/vega/v6.json",
+        autosize: { contains: "padding", type: "fit-x" },
+        signals: [
+          {
+            name: "width",
+            init: "isFinite(containerSize()[0]) ? containerSize()[0] : 300",
+          },
+        ],
+      }),
+    ).toBeUndefined();
+  });
 });

package/src/plugins/impl/vega/utils.ts

@@ -6,13 +6,22 @@ import type { DataType, FieldTypes, VegaDataType } from "./vega-loader";
 export type ContainerWidth = number | "container";
 
 /**
- * Get the container width from a VegaLite spec.
- * @param spec - The VegaLite spec.
- * @returns The container width.
+ * Get the container width from a Vega-Lite spec.
+ *
+ * For unit specs, `width` is at the top level. For facet/repeat specs,
+ * `width` is nested inside `spec`. This does not handle hconcat/vconcat and Vega spec
+ * where the width may be a signal. These cases are covered by
+ * the CSS fallback `.vega-embed:has(> .chart-wrapper.fit-x)`.
  */
 export function getContainerWidth(spec: unknown): ContainerWidth | undefined {
-  if (typeof spec === "object" && spec !== null && "width" in spec) {
-    return spec.width as ContainerWidth | undefined;
+  if (typeof spec === "object" && spec !== null) {
+    if ("width" in spec) {
+      return spec.width as ContainerWidth | undefined;
+    }
+    // Faceted/repeated spec
+    if ("spec" in spec) {
+      return getContainerWidth(spec.spec);
+    }
   }
   return undefined;
 }

package/src/plugins/impl/vega/vega.css

@@ -4,7 +4,8 @@
   max-width: 100%;
 }
 
-.vega-embed[data-container-width="container"] {
+.vega-embed[data-container-width="container"],
+.vega-embed:has(> .chart-wrapper.fit-x) {
   width: 100%;
 }
 

package/src/plugins/layout/ImageComparisonPlugin.tsx

@@ -11,9 +11,7 @@ const LazyImageComparisonComponent = React.lazy(
   () => import("../impl/image-comparison/ImageComparisonComponent"),
 );
 
-export class ImageComparisonPlugin
-  implements IStatelessPlugin<ImageComparisonData>
-{
+export class ImageComparisonPlugin implements IStatelessPlugin<ImageComparisonData> {
   tagName = "marimo-image-comparison";
 
   validator = z.object({

package/src/plugins/stateless-plugin.ts

@@ -20,8 +20,10 @@ export interface IStatelessPluginProps<D> {
   children?: React.ReactNode | undefined;
 }
 
-export interface IStatelessPlugin<D>
-  extends Omit<IPlugin<never, D>, "render" | "functions"> {
+export interface IStatelessPlugin<D> extends Omit<
+  IPlugin<never, D>,
+  "render" | "functions"
+> {
   /**
    * Render the plugin.
    */

package/src/utils/__tests__/cell-urls.test.ts

@@ -92,27 +92,30 @@ describe("cell-urls utilities", () => {
   });
 
   describe("edge case cell names with unicode and special characters", () => {
-    it.each(
-      EDGE_CASE_CELL_NAMES,
-    )("should handle unicode cell names in createCellLink: %s", (cellName) => {
-      const url = createCellLink(cellName);
-      expect(url).toContain("scrollTo=");
-      expect(url).toContain(encodeURIComponent(cellName));
-    });
-
-    it.each(
-      EDGE_CASE_CELL_NAMES,
-    )("should round-trip unicode cell names correctly: %s", (cellName) => {
-      const url = createCellLink(cellName);
-      const hash = url.split("#")[1];
-      const extracted = extractCellNameFromHash(`#${hash}`);
-      expect(extracted).toBe(cellName);
-    });
+    it.each(EDGE_CASE_CELL_NAMES)(
+      "should handle unicode cell names in createCellLink: %s",
+      (cellName) => {
+        const url = createCellLink(cellName);
+        expect(url).toContain("scrollTo=");
+        expect(url).toContain(encodeURIComponent(cellName));
+      },
+    );
+
+    it.each(EDGE_CASE_CELL_NAMES)(
+      "should round-trip unicode cell names correctly: %s",
+      (cellName) => {
+        const url = createCellLink(cellName);
+        const hash = url.split("#")[1];
+        const extracted = extractCellNameFromHash(`#${hash}`);
+        expect(extracted).toBe(cellName);
+      },
+    );
 
-    it.each(
-      EDGE_CASE_CELL_NAMES,
-    )("should allow linking to unicode cell names: %s", (cellName) => {
-      expect(canLinkToCell(cellName)).toBe(true);
-    });
+    it.each(EDGE_CASE_CELL_NAMES)(
+      "should allow linking to unicode cell names: %s",
+      (cellName) => {
+        expect(canLinkToCell(cellName)).toBe(true);
+      },
+    );
   });
 });

package/src/utils/__tests__/filenames.test.ts

@@ -35,22 +35,23 @@ describe("Filenames", () => {
     expect(Filenames.withoutExtension("test.foo.txt")).toEqual("test.foo");
   });
 
-  it.each(
-    EDGE_CASE_FILENAMES,
-  )("should handle edge case filenames: %s", (filename) => {
-    // Test all filename operations with edge cases
-    const withoutExt = Filenames.withoutExtension(filename);
+  it.each(EDGE_CASE_FILENAMES)(
+    "should handle edge case filenames: %s",
+    (filename) => {
+      // Test all filename operations with edge cases
+      const withoutExt = Filenames.withoutExtension(filename);
 
-    expect(Filenames.toMarkdown(filename)).toEqual(`${withoutExt}.md`);
-    expect(Filenames.toHTML(filename)).toEqual(`${withoutExt}.html`);
-    expect(Filenames.toPNG(filename)).toEqual(`${withoutExt}.png`);
-    expect(Filenames.toPY(filename)).toEqual(`${withoutExt}.py`);
-    expect(Filenames.toIPYNB(filename)).toEqual(`${withoutExt}.ipynb`);
+      expect(Filenames.toMarkdown(filename)).toEqual(`${withoutExt}.md`);
+      expect(Filenames.toHTML(filename)).toEqual(`${withoutExt}.html`);
+      expect(Filenames.toPNG(filename)).toEqual(`${withoutExt}.png`);
+      expect(Filenames.toPY(filename)).toEqual(`${withoutExt}.py`);
+      expect(Filenames.toIPYNB(filename)).toEqual(`${withoutExt}.ipynb`);
 
-    // Ensure operations preserve unicode and special characters in base name
-    expect(withoutExt).not.toEqual("");
-    expect(typeof withoutExt).toBe("string");
-  });
+      // Ensure operations preserve unicode and special characters in base name
+      expect(withoutExt).not.toEqual("");
+      expect(typeof withoutExt).toBe("string");
+    },
+  );
 });
 
 describe("getImageExtension", () => {