@marimo-team/frontend 0.19.10-dev30 → 0.19.10-dev34

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-BMHyx2Yb.js"></script>
+    <script type="module" crossorigin src="./assets/index-855KJEhm.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-D2MJg03u.js">
     <link rel="modulepreload" crossorigin href="./assets/clsx-D8GwTfvk.js">
     <link rel="modulepreload" crossorigin href="./assets/cn-BKtXLv3a.js">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.19.10-dev30",
+  "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)