@marimo-team/islands 0.19.10-dev32 → 0.19.10-dev34

package/dist/main.js

@@ -51904,7 +51904,7 @@ Database schema: ${c}`), (_a3 = r2.aiFix) == null ? void 0 : _a3.setAiCompletion
     }
     let w, E, O, M, I, z;
     if (r[2] !== y || r[3] !== d || r[4] !== _ || r[5] !== f || r[6] !== c || r[7] !== S || r[8] !== v) {
-      let e2 = c.filter(_temp7$2), G2 = c.filter(_temp8$1), q2 = c.filter(_temp9$1), IY = c.filter(_temp0$1), LY = c.filter(_temp1$1), RY = c.filter(_temp10), zY = c.filter(_temp11), BY = c.filter(_temp12), VY = c.filter(_temp13), HY = c.filter(_temp14), UY = c.filter(_temp15), WY = c.filter(_temp16), GY = c.filter(_temp17), KY;
+      let e2 = c.filter(_temp7$3), G2 = c.filter(_temp8$2), q2 = c.filter(_temp9$1), IY = c.filter(_temp0$1), LY = c.filter(_temp1$1), RY = c.filter(_temp10), zY = c.filter(_temp11), BY = c.filter(_temp12), VY = c.filter(_temp13), HY = c.filter(_temp14), UY = c.filter(_temp15), WY = c.filter(_temp16), GY = c.filter(_temp17), KY;
       r[15] === _ ? KY = r[16] : (KY = () => {
         _.openApplication("scratchpad");
       }, r[15] = _, r[16] = KY);
@@ -52276,10 +52276,10 @@ Database schema: ${c}`), (_a3 = r2.aiFix) == null ? void 0 : _a3.setAiCompletion
   function _temp6$6(e) {
     return e.type === "exception";
   }
-  function _temp7$2(e) {
+  function _temp7$3(e) {
     return e.type === "setup-refs";
   }
-  function _temp8$1(e) {
+  function _temp8$2(e) {
     return e.type === "cycle";
   }
   function _temp9$1(e) {
@@ -73304,7 +73304,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.10-dev32"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.10-dev34"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$88 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {
@@ -79674,7 +79674,7 @@ ${c}
       render: w
     }), r[5] = c, r[6] = S.control, r[7] = w, r[8] = E) : E = r[8], E;
   }, AggregationSelect = (e) => {
-    let r = (0, import_compiler_runtime$73.c)(12), { fieldName: c, selectedDataType: d, binFieldName: f, defaultAggregation: _ } = e, v = useFormContext(), y = d === "string" ? STRING_AGGREGATION_FNS : AGGREGATION_FNS$1, { chartType: S } = useChartFormContext(), w = S !== ChartType.HEATMAP, E = _temp6$5, O = _temp7$1, M;
+    let r = (0, import_compiler_runtime$73.c)(12), { fieldName: c, selectedDataType: d, binFieldName: f, defaultAggregation: _ } = e, v = useFormContext(), y = d === "string" ? STRING_AGGREGATION_FNS : AGGREGATION_FNS$1, { chartType: S } = useChartFormContext(), w = S !== ChartType.HEATMAP, E = _temp6$5, O = _temp7$2, M;
     r[0] !== f || r[1] !== v ? (M = (e2) => {
       let { value: r2, previousValue: c2, onChange: d2 } = e2;
       r2 === "bin" ? v.setValue(f, true) : c2 === "bin" && v.setValue(f, false), d2(r2);
@@ -79733,7 +79733,7 @@ ${c}
       render: z
     }), r[8] = c, r[9] = v.control, r[10] = z, r[11] = G) : G = r[11], G;
   }, TooltipSelect = (e) => {
-    let r = (0, import_compiler_runtime$73.c)(7), { fieldName: c, saveFunction: d } = e, f = useFormContext(), { fields: _ } = useChartFormContext(), v = _temp8, y;
+    let r = (0, import_compiler_runtime$73.c)(7), { fieldName: c, saveFunction: d } = e, f = useFormContext(), { fields: _ } = useChartFormContext(), v = _temp8$1, y;
     r[0] !== _ || r[1] !== d ? (y = (e2) => {
       var _a2;
       let { field: r2 } = e2, c2 = ((_a2 = r2.value) == null ? void 0 : _a2.map(_temp9)) ?? [];
@@ -79846,7 +79846,7 @@ ${c}
       children: e
     });
   }
-  function _temp7$1(e) {
+  function _temp7$2(e) {
     let { value: r, Icon: c, subtitle: d } = e;
     return (0, import_jsx_runtime.jsx)(SelectItem, {
       value: r,
@@ -79863,7 +79863,7 @@ ${c}
       })
     }, r);
   }
-  function _temp8(e, r) {
+  function _temp8$1(e, r) {
     var _a2;
     return {
       field: e,
@@ -84518,7 +84518,7 @@ ${c}
                 children: _temp6$2
               }),
               (0, import_jsx_runtime.jsx)(CalendarGridBody, {
-                children: _temp7
+                children: _temp7$1
               })
             ]
           })
@@ -84564,7 +84564,7 @@ ${c}
       children: e
     });
   }
-  function _temp7(e) {
+  function _temp7$1(e) {
     return (0, import_jsx_runtime.jsx)(CalendarCell, {
       date: e
     });
@@ -94116,7 +94116,7 @@ ${c}
         setValue: e.setValue
       });
     }
-  }, LazyPlot = (0, import_react.lazy)(() => import("./Plot-CmsrWWji.js").then((e) => ({
+  }, LazyPlot = (0, import_react.lazy)(() => import("./Plot-C9vQQj4X.js").then((e) => ({
     default: e.Plot
   }))), SUNBURST_DATA_KEYS = [
     "color",
@@ -94134,7 +94134,7 @@ ${c}
     "value"
   ], TREE_MAP_DATA_KEYS = SUNBURST_DATA_KEYS;
   const PlotlyComponent = (0, import_react.memo)((e) => {
-    let r = (0, import_compiler_runtime$30.c)(34), { figure: c, value: d, setValue: f, config: _ } = e, v = useScript("https://cdn.jsdelivr.net/npm/mathjax-full@3.2.2/es5/tex-mml-svg.min.js") === "ready", y;
+    let r = (0, import_compiler_runtime$30.c)(37), { figure: c, value: d, setValue: f, config: _ } = e, v = useScript("https://cdn.jsdelivr.net/npm/mathjax-full@3.2.2/es5/tex-mml-svg.min.js") === "ready", y;
     r[0] !== v || r[1] !== c || r[2] !== d ? (y = {
       originalFigure: c,
       initialValue: d,
@@ -94199,16 +94199,24 @@ ${c}
     }, r[19] = f, r[20] = HY);
     let UY = useEvent_default(HY), WY;
     r[21] === f ? WY = r[22] : (WY = (e2) => {
+      e2 && e2.points.some(_temp5$1) && f((r2) => ({
+        ...r2,
+        points: extractPoints(e2.points),
+        indices: e2.points.map(_temp6)
+      }));
+    }, r[21] = f, r[22] = WY);
+    let GY = useEvent_default(WY), KY;
+    r[23] === f ? KY = r[24] : (KY = (e2) => {
       e2 && f((r2) => ({
         ...r2,
         selections: "selections" in e2 ? e2.selections : [],
         points: extractPoints(e2.points),
-        indices: e2.points.map(_temp5$1),
+        indices: e2.points.map(_temp7),
         range: e2.range
       }));
-    }, r[21] = f, r[22] = WY);
-    let GY = useEvent_default(WY), KY = S.frames ?? void 0, qY = useEvent_default(_temp6), JY;
-    return r[23] !== S || r[24] !== w || r[25] !== IY || r[26] !== VY || r[27] !== UY || r[28] !== GY || r[29] !== KY || r[30] !== qY || r[31] !== LY || r[32] !== zY ? (JY = (0, import_jsx_runtime.jsx)(LazyPlot, {
+    }, r[23] = f, r[24] = KY);
+    let qY = useEvent_default(KY), JY = S.frames ?? void 0, YY = useEvent_default(_temp8), XY;
+    return r[25] !== S || r[26] !== w || r[27] !== IY || r[28] !== VY || r[29] !== UY || r[30] !== GY || r[31] !== qY || r[32] !== JY || r[33] !== YY || r[34] !== LY || r[35] !== zY ? (XY = (0, import_jsx_runtime.jsx)(LazyPlot, {
       ...S,
       layout: w,
       onRelayout: LY,
@@ -94216,20 +94224,32 @@ ${c}
       onTreemapClick: VY,
       onSunburstClick: UY,
       config: IY,
-      onSelected: GY,
+      onClick: GY,
+      onSelected: qY,
       className: "w-full",
       useResizeHandler: true,
-      frames: KY,
-      onError: qY
-    }), r[23] = S, r[24] = w, r[25] = IY, r[26] = VY, r[27] = UY, r[28] = GY, r[29] = KY, r[30] = qY, r[31] = LY, r[32] = zY, r[33] = JY) : JY = r[33], JY;
+      frames: JY,
+      onError: YY
+    }), r[25] = S, r[26] = w, r[27] = IY, r[28] = VY, r[29] = UY, r[30] = GY, r[31] = qY, r[32] = JY, r[33] = YY, r[34] = LY, r[35] = zY, r[36] = XY) : XY = r[36], XY;
   });
   PlotlyComponent.displayName = "PlotlyComponent";
+  var STANDARD_POINT_KEYS = [
+    "x",
+    "y",
+    "z",
+    "lat",
+    "lon",
+    "curveNumber",
+    "pointNumber",
+    "pointIndex"
+  ];
   function extractPoints(e) {
     if (!e) return [];
     let r;
     return e.map((e2) => {
+      var _a2;
       let c = Array.isArray(e2.data.hovertemplate) ? e2.data.hovertemplate[0] : e2.data.hovertemplate;
-      return r = r ? r.update(c) : createParser(c), r.parse(e2);
+      return !c || ((_a2 = e2.data) == null ? void 0 : _a2.type) === "heatmap" ? pick_default(e2, STANDARD_POINT_KEYS) : (r = r ? r.update(c) : createParser(c), r.parse(e2));
     });
   }
   function _temp$7(e) {
@@ -94251,9 +94271,16 @@ ${c}
     return pick_default(e, SUNBURST_DATA_KEYS);
   }
   function _temp5$1(e) {
-    return e.pointIndex;
+    var _a2;
+    return ((_a2 = e.data) == null ? void 0 : _a2.type) === "heatmap";
   }
   function _temp6(e) {
+    return e.pointIndex;
+  }
+  function _temp7(e) {
+    return e.pointIndex;
+  }
+  function _temp8(e) {
     Logger.error("PlotlyPlugin: ", e);
   }
   var import_compiler_runtime$29 = require_compiler_runtime(), RadioPlugin = class {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.10-dev32",
+  "version": "0.19.10-dev34",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -144,7 +144,7 @@
     "mermaid": "^11.12.2",
     "partysocket": "1.1.10",
     "path-to-regexp": "^8.3.0",
-    "plotly.js": "^2.35.3",
+    "plotly.js": "^3.3.1",
     "pyodide": "0.27.7",
     "react-arborist": "^3.4.3",
     "react-aria": "3.44.0",

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

@@ -35,6 +35,7 @@ export interface PlotProps {
   onRelayouting?: (event: PlotlyTypes.PlotRelayoutEvent) => void;
   onSelected?: (event: PlotlyTypes.PlotSelectionEvent) => void;
   onDeselect?: () => void;
+  onClick?: (event: PlotlyTypes.PlotMouseEvent) => void;
   onSunburstClick?: (event: PlotlyTypes.PlotMouseEvent) => void;
   onTreemapClick?: (event: PlotlyTypes.PlotMouseEvent) => void;
   onError?: (err: Error) => void;
@@ -48,6 +49,7 @@ const EVENT_NAMES = [
   "Relayouting",
   "Selected",
   "Deselect",
+  "Click",
   "SunburstClick",
   "TreemapClick",
 ] as const;

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

@@ -193,6 +193,24 @@ export const PlotlyComponent = memo(
           }));
         })}
         config={plotlyConfig}
+        onClick={useEvent((evt: Readonly<Plotly.PlotMouseEvent>) => {
+          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) {
+            return;
+          }
+          setValue((prev) => ({
+            ...prev,
+            points: extractPoints(evt.points),
+            indices: evt.points.map((point) => point.pointIndex),
+          }));
+        })}
         onSelected={useEvent((evt: Readonly<Plotly.PlotSelectionEvent>) => {
           if (!evt) {
             return;
@@ -224,6 +242,17 @@ PlotlyComponent.displayName = "PlotlyComponent";
  * instead of the ones that Plotly uses internally,
  * by using the hovertemplate.
  */
+const STANDARD_POINT_KEYS: string[] = [
+  "x",
+  "y",
+  "z",
+  "lat",
+  "lon",
+  "curveNumber",
+  "pointNumber",
+  "pointIndex",
+];
+
 function extractPoints(
   points: Plotly.PlotDatum[],
 ): Record<AxisName, AxisDatum>[] {
@@ -238,6 +267,13 @@ function extractPoints(
     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 pick(point, STANDARD_POINT_KEYS);
+    }
+
     // Update or create a parser
     parser = parser
       ? parser.update(hovertemplate)