@marimo-team/frontend 0.23.1 → 0.23.2-dev1

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-y6osgSWB.js"></script>
+    <script type="module" crossorigin src="./assets/index-ThWddW3f.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-D2MJg03u.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-Bj1aDYRI.js">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.23.1",
+  "version": "0.23.2-dev1",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -112,6 +112,56 @@ describe("PlotlyPlugin", () => {
     });
   });
 
+  it("clicking a box element triggers onClick", async () => {
+    const setValue = vi.fn<Setter<unknown>>();
+
+    render(
+      <Suspense fallback={null}>
+        <PlotlyComponent
+          figure={{
+            data: [{ type: "box" }],
+            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: "box" },
+            x: "Group A",
+            y: 3,
+            pointIndex: 0,
+            pointNumber: 0,
+            curveNumber: 0,
+          },
+        ],
+      });
+    });
+
+    expect(setValue).toHaveBeenCalledTimes(1);
+    const updater = setValue.mock.calls[0][0] as (value: unknown) => unknown;
+    expect(updater({})).toEqual({
+      selections: [],
+      points: [
+        { x: "Group A", y: 3, curveNumber: 0, pointNumber: 0, pointIndex: 0 },
+      ],
+      indices: [0],
+      range: undefined,
+    });
+  });
+
   it("clicking a violin element triggers onClick", async () => {
     const setValue = vi.fn<Setter<unknown>>();
 

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

@@ -102,6 +102,14 @@ describe("shouldHandleClickSelection", () => {
     expect(shouldHandleClickSelection([heatmapPoint])).toBe(true);
   });
 
+  it("accepts box clicks", () => {
+    const boxPoint = createPlotDatum({
+      data: { type: "box" },
+    });
+
+    expect(shouldHandleClickSelection([boxPoint])).toBe(true);
+  });
+
   it("accepts violin clicks", () => {
     const violinPoint = createPlotDatum({
       data: { type: "violin" },
@@ -126,6 +134,22 @@ describe("shouldHandleClickSelection", () => {
     expect(shouldHandleClickSelection([linePoint])).toBe(true);
   });
 
+  it("accepts funnel clicks", () => {
+    const funnelPoint = createPlotDatum({
+      data: { type: "funnel" },
+    });
+
+    expect(shouldHandleClickSelection([funnelPoint])).toBe(true);
+  });
+
+  it("accepts funnelarea clicks", () => {
+    const funnelAreaPoint = createPlotDatum({
+      data: { type: "funnelarea" },
+    });
+
+    expect(shouldHandleClickSelection([funnelAreaPoint])).toBe(true);
+  });
+
   it("accepts waterfall clicks", () => {
     const waterfallPoint = createPlotDatum({
       data: { type: "waterfall" },
@@ -214,6 +238,64 @@ describe("extractPoints", () => {
     expect(extractPoints([point])).toEqual([{ x: 1, y: 2, z: 3 }]);
   });
 
+  it("returns funnel-specific fields for funnel traces", () => {
+    const point = createPlotDatum({
+      x: 1000,
+      y: "Visit",
+      label: "Visit",
+      value: 1000,
+      percentInitial: 1.0,
+      percentPrevious: 1.0,
+      percentTotal: 1.0,
+      curveNumber: 0,
+      pointIndex: 0,
+      pointNumber: 0,
+      data: { type: "funnel" },
+    });
+
+    expect(extractPoints([point])).toEqual([
+      {
+        x: 1000,
+        y: "Visit",
+        label: "Visit",
+        value: 1000,
+        percentInitial: 1.0,
+        percentPrevious: 1.0,
+        percentTotal: 1.0,
+        curveNumber: 0,
+        pointIndex: 0,
+        pointNumber: 0,
+      },
+    ]);
+  });
+
+  it("returns funnelarea-specific fields without x/y for funnelarea traces", () => {
+    const point = createPlotDatum({
+      label: "Stage A",
+      value: 500,
+      percentInitial: 0.5,
+      percentPrevious: 0.8,
+      percentTotal: 0.5,
+      curveNumber: 0,
+      pointNumber: 1,
+      x: 99,
+      y: 99,
+      data: { type: "funnelarea" },
+    });
+
+    expect(extractPoints([point])).toEqual([
+      {
+        label: "Stage A",
+        value: 500,
+        percentInitial: 0.5,
+        percentPrevious: 0.8,
+        percentTotal: 0.5,
+        curveNumber: 0,
+        pointNumber: 1,
+      },
+    ]);
+  });
+
   it("returns x/y/pointIndex for waterfall clicks", () => {
     const point = createPlotDatum({
       x: "Revenue",

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

@@ -24,6 +24,32 @@ const SUNBURST_DATA_KEYS: (keyof Plotly.SunburstPlotDatum)[] = [
   "value",
 ] as const;
 
+// Fields emitted by go.Funnel click events: includes x/y coordinates plus
+// funnel-specific percent metrics.
+const FUNNEL_DATA_KEYS: string[] = [
+  "curveNumber",
+  "pointIndex",
+  "pointNumber",
+  "x",
+  "y",
+  "label",
+  "value",
+  "percentInitial",
+  "percentPrevious",
+  "percentTotal",
+] as const;
+
+// Fields emitted by go.FunnelArea click events: sector-based, no x/y.
+const FUNNEL_AREA_DATA_KEYS: string[] = [
+  "curveNumber",
+  "pointNumber",
+  "label",
+  "value",
+  "percentInitial",
+  "percentPrevious",
+  "percentTotal",
+] as const;
+
 const LINE_CLICK_TRACE_TYPES = new Set(["scatter", "scattergl"]);
 
 const STANDARD_POINT_KEYS: string[] = [
@@ -256,10 +282,13 @@ export function shouldHandleClickSelection(
     const type = getTraceSource(point).type;
     return (
       type === "bar" ||
+      type === "box" ||
+      type === "funnel" ||
+      type === "funnelarea" ||
       type === "heatmap" ||
       type === "histogram" ||
-      type === "waterfall" ||
       type === "violin" ||
+      type === "waterfall" ||
       isLinePoint(point)
     );
   });
@@ -329,13 +358,43 @@ export function extractPoints(
   let parser: PlotlyTemplateParser | undefined;
 
   return points.map((point) => {
+    const trace = getTraceSource(point);
+
+    // FunnelArea: sector-based chart with no x/y coordinates.
+    // Pick funnel-area-specific keys, then merge any hovertemplate-parsed
+    // fields (e.g. customdata columns) so user-defined fields are preserved.
+    if (trace.type === "funnelarea") {
+      const base = pick(point, FUNNEL_AREA_DATA_KEYS);
+      const ht = Array.isArray(trace.hovertemplate)
+        ? trace.hovertemplate[0]
+        : trace.hovertemplate;
+      if (!ht) {
+        return base;
+      }
+      parser = parser ? parser.update(ht) : createParser(ht);
+      return { ...base, ...parser.parse(point) };
+    }
+
+    // Funnel: bar-like chart with x/y plus per-stage percent metrics.
+    // Pick funnel-specific keys, then merge hovertemplate-parsed fields so
+    // callers get both percentInitial et al. and any user-defined columns.
+    if (trace.type === "funnel") {
+      const base = pick(point, FUNNEL_DATA_KEYS);
+      const ht = Array.isArray(trace.hovertemplate)
+        ? trace.hovertemplate[0]
+        : trace.hovertemplate;
+      if (!ht) {
+        return base;
+      }
+      parser = parser ? parser.update(ht) : createParser(ht);
+      return { ...base, ...parser.parse(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]