@marimo-team/frontend 0.19.10-dev5 → 0.19.10-dev9

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

@@ -0,0 +1,171 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type * as PlotlyTypes from "plotly.js";
+// Import the pre-built dist bundle, not the source entry point.
+// The source entry point requires Node.js polyfills (e.g. `buffer/`)
+// that are unavailable in the browser/bundler environment.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error — no type declarations for dist path, we use PlotlyTypes above
+import Plotly from "plotly.js/dist/plotly";
+import { useEffect, useRef } from "react";
+
+// Plotly attaches `on` and `removeListener` to the DOM element at runtime.
+// The @types/plotly.js PlotlyHTMLElement type includes `on` and `removeAllListeners`
+// but not the per-handler `removeListener`. We extend the type to include it.
+interface PlotlyElement extends PlotlyTypes.PlotlyHTMLElement {
+  removeListener(event: string, handler: (...args: never[]) => void): void;
+}
+
+export interface Figure {
+  data: PlotlyTypes.Data[];
+  layout: Partial<PlotlyTypes.Layout>;
+  frames: PlotlyTypes.Frame[] | null;
+}
+
+export interface PlotProps {
+  data: PlotlyTypes.Data[];
+  layout: Partial<PlotlyTypes.Layout>;
+  frames?: PlotlyTypes.Frame[];
+  config?: Partial<PlotlyTypes.Config>;
+  className?: string;
+  style?: React.CSSProperties;
+  useResizeHandler?: boolean;
+  divId?: string;
+  onRelayout?: (event: PlotlyTypes.PlotRelayoutEvent) => void;
+  onRelayouting?: (event: PlotlyTypes.PlotRelayoutEvent) => void;
+  onSelected?: (event: PlotlyTypes.PlotSelectionEvent) => void;
+  onDeselect?: () => void;
+  onSunburstClick?: (event: PlotlyTypes.PlotMouseEvent) => void;
+  onTreemapClick?: (event: PlotlyTypes.PlotMouseEvent) => void;
+  onError?: (err: Error) => void;
+}
+
+// Plotly event name convention:
+//   - events are attached as `'plotly_' + name.toLowerCase()`
+//   - react props are `'on' + name`
+const EVENT_NAMES = [
+  "Relayout",
+  "Relayouting",
+  "Selected",
+  "Deselect",
+  "SunburstClick",
+  "TreemapClick",
+] as const;
+
+type EventName = (typeof EVENT_NAMES)[number];
+
+function propName(event: EventName): keyof PlotProps {
+  return `on${event}` as keyof PlotProps;
+}
+
+function plotlyEventName(event: EventName): string {
+  return `plotly_${event.toLowerCase()}`;
+}
+
+export const Plot = (props: PlotProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const {
+    data,
+    layout,
+    config,
+    frames,
+    className,
+    style,
+    useResizeHandler,
+    divId,
+    onError,
+  } = props;
+
+  // Render / update the plot
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) {
+      return;
+    }
+
+    Plotly.react(el, data, layout, config)
+      .then(() => {
+        if (frames && frames.length > 0) {
+          return Plotly.addFrames(el as unknown as PlotlyTypes.Root, frames);
+        }
+      })
+      .catch((error: Error) => {
+        onError?.(error);
+      });
+  }, [data, layout, config, frames, onError]);
+
+  // Sync event handlers
+  useEffect(
+    () => {
+      const el = containerRef.current;
+      if (!el) {
+        return;
+      }
+
+      const plotlyEl = el as unknown as PlotlyElement;
+
+      // eslint-disable-next-line @typescript-eslint/ban-types -- Plotly's event API uses generic function references
+      const attached: {
+        plotlyName: string;
+        handler: (...args: never[]) => void;
+      }[] = [];
+
+      for (const name of EVENT_NAMES) {
+        const handler = props[propName(name)];
+        if (typeof handler === "function") {
+          const plotlyName = plotlyEventName(name);
+          plotlyEl.on(plotlyName as never, handler as never);
+          attached.push({
+            plotlyName,
+            handler: handler as (...args: never[]) => void,
+          });
+        }
+      }
+
+      return () => {
+        for (const { plotlyName, handler } of attached) {
+          plotlyEl.removeListener(plotlyName, handler as never);
+        }
+      };
+      // Re-sync whenever any event handler prop changes
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    },
+    EVENT_NAMES.map((name) => props[propName(name)]),
+  );
+
+  // Window resize handler
+  useEffect(() => {
+    if (!useResizeHandler) {
+      return;
+    }
+
+    const el = containerRef.current;
+    if (!el) {
+      return;
+    }
+
+    const handler = () => {
+      Plotly.Plots.resize(el as unknown as PlotlyTypes.Root);
+    };
+
+    window.addEventListener("resize", handler);
+    return () => {
+      window.removeEventListener("resize", handler);
+    };
+  }, [useResizeHandler]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    const el = containerRef.current;
+    return () => {
+      if (el) {
+        Plotly.purge(el as unknown as PlotlyTypes.Root);
+      }
+    };
+  }, []);
+
+  return (
+    <div id={divId} className={className} style={style} ref={containerRef} />
+  );
+};

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

@@ -1,9 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { Figure, PlotParams } from "react-plotly.js";
+import type * as Plotly from "plotly.js";
 import { z } from "zod";
 import type { IPlugin, IPluginProps, Setter } from "@/plugins/types";
 import { Logger } from "@/utils/Logger";
+import type { Figure } from "./Plot";
 
 import "./plotly.css";
 import "./mapbox.css";
@@ -70,13 +71,8 @@ interface PlotlyPluginProps extends Data {
   host: HTMLElement;
 }
 
-// For whatever reason, the version of vite-rolldown that we are one is not exporting this default export correctly.
-export const LazyPlot = lazy(() =>
-  import("react-plotly.js").then((module) => {
-    return module.default as unknown as {
-      default: React.ComponentType<PlotParams>;
-    };
-  }),
+const LazyPlot = lazy(() =>
+  import("./Plot").then((mod) => ({ default: mod.Plot })),
 );
 
 const SUNBURST_DATA_KEYS: (keyof Plotly.SunburstPlotDatum)[] = [
@@ -176,7 +172,6 @@ export const PlotlyComponent = memo(
             };
           });
         })}
-        // @ts-expect-error We patched this prop here so it doesn't exist in the types
         onTreemapClick={useEvent((evt: Readonly<Plotly.PlotMouseEvent>) => {
           if (!evt) {
             return;
@@ -215,7 +210,7 @@ export const PlotlyComponent = memo(
         className="w-full"
         useResizeHandler={true}
         frames={figure.frames ?? undefined}
-        onError={useEvent((err) => {
+        onError={useEvent((err: Error) => {
           Logger.error("PlotlyPlugin: ", err);
         })}
       />

package/src/plugins/impl/plotly/__tests__/parse-from-template.test.ts

@@ -1,4 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+import type * as Plotly from "plotly.js";
 import { describe, expect, it } from "vitest";
 import { createParser } from "../parse-from-template";
 

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

@@ -1,7 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { Figure } from "react-plotly.js";
+import type * as Plotly from "plotly.js";
 import { describe, expect, it } from "vitest";
+import type { Figure } from "../Plot";
 import {
   computeLayoutOnFigureChange,
   computeLayoutUpdate,

package/src/plugins/impl/plotly/parse-from-template.ts

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { get } from "lodash-es";
+import type * as Plotly from "plotly.js";
 
 export interface PlotlyTemplateParser {
   /**

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

@@ -2,9 +2,10 @@
 
 import { usePrevious } from "@uidotdev/usehooks";
 import { isEqual, pick } from "lodash-es";
+import type * as Plotly from "plotly.js";
 import { useEffect, useState } from "react";
-import type { Figure } from "react-plotly.js";
 import { Objects } from "@/utils/objects";
+import type { Figure } from "./Plot";
 
 /**
  * Keys that are preserved across figure updates when set by user interaction.

package/dist/assets/channel-CdzZX-OR.js

@@ -1 +0,0 @@
-import{et as r,tt as e}from"./chunk-ABZYJK2D-0jga8uiE.js";var o=(t,a)=>e.lang.round(r.parse(t)[a]);export{o as t};

package/dist/assets/chunk-55IACEB6-njZIr50E.js

@@ -1 +0,0 @@
-import{u as r}from"./src-CvyFXpBy.js";import{n}from"./src-CsZby044.js";var a=n((e,o)=>{let t;return o==="sandbox"&&(t=r("#i"+e)),r(o==="sandbox"?t.nodes()[0].contentDocument.body:"body").select(`[id="${e}"]`)},"getDiagramElement");export{a as t};

package/dist/assets/classDiagram-2ON5EDUG-CUlU7OLD.js

@@ -1 +0,0 @@
-import"./purify.es-DZrAQFIu.js";import"./src-CvyFXpBy.js";import"./chunk-S3R3BYOJ-8loRaCFh.js";import{n as t}from"./src-CsZby044.js";import"./chunk-ABZYJK2D-0jga8uiE.js";import"./chunk-HN2XXSSU-Bdbi3Mns.js";import"./chunk-CVBHYZKI-DU48rJVu.js";import"./chunk-ATLVNIR6-B17dg7Ry.js";import"./dist-C1VXabOr.js";import"./chunk-JA3XYJ7Z-DOm8KfKa.js";import"./chunk-JZLCHNYA-48QVgmR4.js";import"./chunk-QXUST7PY-DkCIa8tJ.js";import"./chunk-N4CR4FBY-BNoQB557.js";import"./chunk-FMBD7UC4-CHJv683r.js";import"./chunk-55IACEB6-njZIr50E.js";import"./chunk-QN33PNHL-BOQncxfy.js";import{i,n as o,r as m,t as p}from"./chunk-B4BG7PRW-DoVbcCDm.js";var a={parser:o,get db(){return new p},renderer:m,styles:i,init:t(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{a as diagram};

package/dist/assets/classDiagram-v2-WZHVMYZB-DAwrDtTO.js

@@ -1 +0,0 @@
-import"./purify.es-DZrAQFIu.js";import"./src-CvyFXpBy.js";import"./chunk-S3R3BYOJ-8loRaCFh.js";import{n as t}from"./src-CsZby044.js";import"./chunk-ABZYJK2D-0jga8uiE.js";import"./chunk-HN2XXSSU-Bdbi3Mns.js";import"./chunk-CVBHYZKI-DU48rJVu.js";import"./chunk-ATLVNIR6-B17dg7Ry.js";import"./dist-C1VXabOr.js";import"./chunk-JA3XYJ7Z-DOm8KfKa.js";import"./chunk-JZLCHNYA-48QVgmR4.js";import"./chunk-QXUST7PY-DkCIa8tJ.js";import"./chunk-N4CR4FBY-BNoQB557.js";import"./chunk-FMBD7UC4-CHJv683r.js";import"./chunk-55IACEB6-njZIr50E.js";import"./chunk-QN33PNHL-BOQncxfy.js";import{i,n as o,r as m,t as p}from"./chunk-B4BG7PRW-DoVbcCDm.js";var a={parser:o,get db(){return new p},renderer:m,styles:i,init:t(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{a as diagram};

package/dist/assets/stateDiagram-v2-4FDKWEC3-DT577w6p.js

@@ -1 +0,0 @@
-import"./purify.es-DZrAQFIu.js";import"./src-CvyFXpBy.js";import"./chunk-S3R3BYOJ-8loRaCFh.js";import{n as t}from"./src-CsZby044.js";import"./chunk-ABZYJK2D-0jga8uiE.js";import"./chunk-HN2XXSSU-Bdbi3Mns.js";import"./chunk-CVBHYZKI-DU48rJVu.js";import"./chunk-ATLVNIR6-B17dg7Ry.js";import"./dist-C1VXabOr.js";import"./chunk-JA3XYJ7Z-DOm8KfKa.js";import"./chunk-JZLCHNYA-48QVgmR4.js";import"./chunk-QXUST7PY-DkCIa8tJ.js";import"./chunk-N4CR4FBY-BNoQB557.js";import"./chunk-55IACEB6-njZIr50E.js";import"./chunk-QN33PNHL-BOQncxfy.js";import{i,n as o,r as m,t as p}from"./chunk-DI55MBZ5-rLpl7joX.js";var a={parser:o,get db(){return new p(2)},renderer:m,styles:i,init:t(r=>{r.state||(r.state={}),r.state.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{a as diagram};