@marimo-team/islands 0.22.6-dev9 → 0.23.1-dev13

package/dist/main.js

@@ -57315,8 +57315,14 @@ ${c}
   }
   function hasPureLineTrace(e) {
     return e ? e.some((e2) => {
-      let r = e2.type;
-      return r === void 0 || LINE_CLICK_TRACE_TYPES.has(String(r)) ? isPureLineMode(e2.mode) : false;
+      let r = e2;
+      return r.type === void 0 || LINE_CLICK_TRACE_TYPES.has(String(r.type)) ? isPureLineMode(r.mode) : false;
+    }) : false;
+  }
+  function hasAreaTrace(e) {
+    return e ? e.some((e2) => {
+      let r = e2;
+      return r.type !== void 0 && !LINE_CLICK_TRACE_TYPES.has(String(r.type)) ? false : typeof r.fill == "string" && r.fill !== "" && r.fill !== "none" || r.stackgroup != null;
     }) : false;
   }
   function createDragmodeButton(e, r, c, d, f) {
@@ -57349,7 +57355,7 @@ ${c}
   function shouldHandleClickSelection(e) {
     return e.some((e2) => {
       let r = getTraceSource(e2).type;
-      return r === "bar" || r === "heatmap" || r === "histogram" || r === "waterfall" || isLinePoint(e2);
+      return r === "bar" || r === "heatmap" || r === "histogram" || r === "waterfall" || r === "violin" || isLinePoint(e2);
     });
   }
   function extractIndices(e) {
@@ -57523,7 +57529,7 @@ ${c}
       }));
     }, r[7] = w, r[8] = f, r[9] = I) : I = r[9];
     let z = useEvent_default(I), G = useDeepCompareMemoize(h), q;
-    r[10] === y.data ? q = r[11] : (q = hasPureLineTrace(y.data), r[10] = y.data, r[11] = q);
+    r[10] === y.data ? q = r[11] : (q = hasPureLineTrace(y.data) || hasAreaTrace(y.data), r[10] = y.data, r[11] = q);
     let Z7 = q, Q7, $7, e9;
     if (r[12] !== G || r[13] !== M || r[14] !== z || r[15] !== Z7) {
       let e2 = [
@@ -65645,7 +65651,7 @@ ${c}
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.22.6-dev9"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.1-dev13"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.22.6-dev9",
+  "version": "0.23.1-dev13",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -19,6 +19,7 @@ import {
   extractPoints,
   extractSunburstPoints,
   extractTreemapPoints,
+  hasAreaTrace,
   hasPureLineTrace,
   lineSelectionButtons,
   type ModeBarButton,
@@ -113,7 +114,8 @@ export const PlotlyComponent = memo(
 
     const configMemo = useDeepCompareMemoize(config);
     const plotlyConfig = useMemo((): Partial<Plotly.Config> => {
-      const hasPureLine = hasPureLineTrace(figure.data);
+      const hasLineOrAreaTrace =
+        hasPureLineTrace(figure.data) || hasAreaTrace(figure.data);
       const defaultButtons: ModeBarButton[] = [
         // Custom button to reset the state
         {
@@ -130,7 +132,7 @@ export const PlotlyComponent = memo(
           click: handleResetWithClear,
         },
       ];
-      if (hasPureLine) {
+      if (hasLineOrAreaTrace) {
         defaultButtons.push(...lineSelectionButtons(handleSetDragmode));
       }
 

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

@@ -111,4 +111,54 @@ describe("PlotlyPlugin", () => {
       range: undefined,
     });
   });
+
+  it("clicking a violin element triggers onClick", async () => {
+    const setValue = vi.fn<Setter<unknown>>();
+
+    render(
+      <Suspense fallback={null}>
+        <PlotlyComponent
+          figure={{
+            data: [{ type: "violin" }],
+            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: "violin" },
+            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,
+    });
+  });
 });

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

@@ -5,6 +5,7 @@ import { describe, expect, it, vi } from "vitest";
 import {
   extractIndices,
   extractPoints,
+  hasAreaTrace,
   hasPureLineTrace,
   lineSelectionButtons,
   type ModeBarButton,
@@ -101,6 +102,14 @@ describe("shouldHandleClickSelection", () => {
     expect(shouldHandleClickSelection([heatmapPoint])).toBe(true);
   });
 
+  it("accepts violin clicks", () => {
+    const violinPoint = createPlotDatum({
+      data: { type: "violin" },
+    });
+
+    expect(shouldHandleClickSelection([violinPoint])).toBe(true);
+  });
+
   it("accepts histogram clicks", () => {
     const histogramPoint = createPlotDatum({
       data: { type: "histogram" },
@@ -219,3 +228,67 @@ describe("extractPoints", () => {
     ]);
   });
 });
+
+describe("hasAreaTrace", () => {
+  it("detects scatter trace with tozeroy fill", () => {
+    expect(
+      hasAreaTrace([createTrace({ type: "scatter", fill: "tozeroy" })]),
+    ).toBe(true);
+  });
+
+  it("detects scatter trace with tonexty fill", () => {
+    expect(
+      hasAreaTrace([createTrace({ type: "scatter", fill: "tonexty" })]),
+    ).toBe(true);
+  });
+
+  it("detects scatter trace with stackgroup (px.area pattern)", () => {
+    expect(
+      hasAreaTrace([
+        createTrace({ type: "scatter", mode: "lines", stackgroup: "one" }),
+      ]),
+    ).toBe(true);
+  });
+
+  it("detects area traces with mode=none (fill-only, no visible line)", () => {
+    expect(
+      hasAreaTrace([
+        createTrace({ type: "scatter", fill: "tozeroy", mode: "none" }),
+      ]),
+    ).toBe(true);
+  });
+
+  it("ignores scatter traces with no fill and no stackgroup", () => {
+    expect(
+      hasAreaTrace([
+        createTrace({ type: "scatter", mode: "lines" }),
+        createTrace({ type: "scatter", mode: "markers" }),
+      ]),
+    ).toBe(false);
+  });
+
+  it("ignores scatter traces with fill=none", () => {
+    expect(hasAreaTrace([createTrace({ type: "scatter", fill: "none" })])).toBe(
+      false,
+    );
+  });
+
+  it("ignores scatter traces with fill=empty string", () => {
+    expect(
+      hasAreaTrace([createTrace({ type: "scatter", fill: "" as "none" })]),
+    ).toBe(false);
+  });
+
+  it("ignores non-scatter traces", () => {
+    expect(
+      hasAreaTrace([
+        createTrace({ type: "bar" }),
+        createTrace({ type: "heatmap" }),
+      ]),
+    ).toBe(false);
+  });
+
+  it("returns false for undefined data", () => {
+    expect(hasAreaTrace(undefined)).toBe(false);
+  });
+});

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

@@ -141,13 +141,44 @@ export function hasPureLineTrace(
   }
 
   return data.some((trace) => {
-    const traceType = (trace as { type?: unknown }).type;
+    const t = trace as Record<string, unknown>;
     const isScatterLike =
-      traceType === undefined || LINE_CLICK_TRACE_TYPES.has(String(traceType));
+      t.type === undefined || LINE_CLICK_TRACE_TYPES.has(String(t.type));
     if (!isScatterLike) {
       return false;
     }
-    return isPureLineMode((trace as { mode?: unknown }).mode);
+    return isPureLineMode(t.mode);
+  });
+}
+
+/**
+ * Return true when any scatter/scattergl trace has a non-empty fill or a
+ * stackgroup, i.e. it is an area chart.
+ *
+ * Area traces built with `mode="none"` have no visible line or markers, so
+ * `hasPureLineTrace` returns false for them even though they need select/lasso
+ * buttons just as much as `mode="lines"` area charts.  This function covers
+ * that gap and is OR-ed with `hasPureLineTrace` in the config builder.
+ */
+export function hasAreaTrace(
+  data: readonly Plotly.Data[] | undefined,
+): boolean {
+  if (!data) {
+    return false;
+  }
+
+  return data.some((trace) => {
+    const t = trace as Record<string, unknown>;
+    // Only scatter/scattergl can be area traces.
+    if (t.type !== undefined && !LINE_CLICK_TRACE_TYPES.has(String(t.type))) {
+      return false;
+    }
+    // A trace is an area trace when fill is a non-empty string other than
+    // "none", OR it belongs to a stackgroup (px.area always sets stackgroup).
+    return (
+      (typeof t.fill === "string" && t.fill !== "" && t.fill !== "none") ||
+      t.stackgroup != null
+    );
   });
 }
 
@@ -228,6 +259,7 @@ export function shouldHandleClickSelection(
       type === "heatmap" ||
       type === "histogram" ||
       type === "waterfall" ||
+      type === "violin" ||
       isLinePoint(point)
     );
   });