@mui/x-charts-premium 9.0.1 → 9.0.3

package/ChartsWebGLLayer/ChartsWebGLLayer.d.ts

@@ -1,3 +1,2 @@
 import * as React from 'react';
-export declare function useWebGLContext(): WebGL2RenderingContext | null;
 export declare const ChartsWebGLLayer: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>>, "ref"> & React.RefAttributes<HTMLCanvasElement>>;

package/ChartsWebGLLayer/ChartsWebGLLayer.js

@@ -7,32 +7,75 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsWebGLLayer = void 0;
-exports.useWebGLContext = useWebGLContext;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _internals = require("@mui/x-charts/internals");
 var _hooks = require("@mui/x-charts/hooks");
+var _useWebGLResizeObserver = require("../utils/webgl/useWebGLResizeObserver");
+var _ChartsWebGLContext = require("./ChartsWebGLContext");
+var _ChartsWebGLOrderContext = require("./ChartsWebGLOrderContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children"],
   _excluded2 = ["children"];
-const ChartsWebGLContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") ChartsWebGLContext.displayName = "ChartsWebGLContext";
-function useWebGLContext() {
-  return React.useContext(ChartsWebGLContext);
-}
 const ChartsWebGLLayer = exports.ChartsWebGLLayer = /*#__PURE__*/React.forwardRef(function WebGLProvider(_ref, ref) {
   let {
       children
     } = _ref,
     props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const canvasRef = React.useRef(null);
-  const [context, setContext] = React.useState(null);
+  const [glContext, setGlContext] = React.useState(null);
   const handleRef = (0, _useForkRef.default)(canvasRef, ref);
   const chartRoot = (0, _hooks.useChartRootRef)().current;
   const drawingArea = (0, _hooks.useDrawingArea)();
   const [, rerender] = React.useReducer(s => s + 1, 0);
+  const drawEntriesRef = React.useRef([]);
+  const renderScheduledRef = React.useRef(false);
+  const renderAll = React.useCallback(() => {
+    if (!glContext) {
+      return;
+    }
+    renderScheduledRef.current = false;
+    glContext.clearColor(0, 0, 0, 0.0);
+    glContext.clear(glContext.COLOR_BUFFER_BIT);
+    // Sort by order so z-order matches children's position in ChartsWebGLLayer,
+    // stable across remount.
+    const sorted = [...drawEntriesRef.current].sort((a, b) => a.order - b.order);
+    for (const {
+      drawRef
+    } of sorted) {
+      drawRef.current?.();
+    }
+  }, [glContext]);
+  const registerDraw = React.useCallback((drawRef, order) => {
+    const entry = {
+      drawRef,
+      order
+    };
+    drawEntriesRef.current.push(entry);
+    return () => {
+      const idx = drawEntriesRef.current.indexOf(entry);
+      if (idx >= 0) {
+        drawEntriesRef.current.splice(idx, 1);
+      }
+    };
+  }, []);
+  const requestRender = React.useCallback(() => {
+    renderScheduledRef.current = true;
+    // Trigger a re-render so the flush effect runs, even if only a child's state changed
+    rerender();
+  }, []);
+
+  // Centralized resize handling — render all plots on canvas resize
+  (0, _useWebGLResizeObserver.useWebGLResizeObserver)(glContext, renderAll);
+
+  // Flush scheduled renders after all children's effects have run
+  React.useEffect(() => {
+    if (renderScheduledRef.current) {
+      renderAll();
+    }
+  });
   React.useEffect(() => {
     /* The chart root isn't available on first render because the ref is only set after mounting the root component. */
     if (!chartRoot) {
@@ -48,7 +91,7 @@ const ChartsWebGLLayer = exports.ChartsWebGLLayer = /*#__PURE__*/React.forwardRe
       // Must prevent default otherwise the context won't be marked as restorable
       // https://registry.khronos.org/webgl/extensions/WEBGL_lose_context/
       event.preventDefault();
-      setContext(null);
+      setGlContext(null);
     };
     const initializeContext = () => {
       const ctx = canvas.getContext('webgl2', {
@@ -60,7 +103,7 @@ const ChartsWebGLLayer = exports.ChartsWebGLLayer = /*#__PURE__*/React.forwardRe
       if (!ctx) {
         return;
       }
-      setContext(ctx);
+      setGlContext(ctx);
     };
     canvas.addEventListener('webglcontextlost', handleContextLost);
     canvas.addEventListener('webglcontextrestored', initializeContext);
@@ -70,11 +113,16 @@ const ChartsWebGLLayer = exports.ChartsWebGLLayer = /*#__PURE__*/React.forwardRe
       canvas.removeEventListener('webglcontextrestored', initializeContext);
     };
   }, [chartRoot]);
+  const contextValue = React.useMemo(() => glContext ? {
+    gl: glContext,
+    registerDraw,
+    requestRender
+  } : null, [glContext, registerDraw, requestRender]);
   if (!chartRoot) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsWebGLContext.Provider, {
-    value: context,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWebGLContext.ChartsWebGLContext.Provider, {
+    value: contextValue,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CanvasPositioner, {
       "aria-hidden": "true",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("canvas", (0, _extends2.default)({
@@ -88,7 +136,10 @@ const ChartsWebGLLayer = exports.ChartsWebGLLayer = /*#__PURE__*/React.forwardRe
           height: drawingArea.height
         }
       }))
-    }), children]
+    }), React.Children.map(children, (child, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsWebGLOrderContext.ChartsWebGLOrderContext.Provider, {
+      value: index,
+      children: child
+    }))]
   });
 });
 if (process.env.NODE_ENV !== "production") ChartsWebGLLayer.displayName = "ChartsWebGLLayer";

package/ChartsWebGLLayer/ChartsWebGLLayer.mjs

@@ -8,23 +8,67 @@ import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { selectorChartSvgHeight, selectorChartSvgWidth, useStore } from '@mui/x-charts/internals';
 import { useDrawingArea, useChartRootRef } from '@mui/x-charts/hooks';
+import { useWebGLResizeObserver } from "../utils/webgl/useWebGLResizeObserver.mjs";
+import { ChartsWebGLContext } from "./ChartsWebGLContext.mjs";
+import { ChartsWebGLOrderContext } from "./ChartsWebGLOrderContext.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ChartsWebGLContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") ChartsWebGLContext.displayName = "ChartsWebGLContext";
-export function useWebGLContext() {
-  return React.useContext(ChartsWebGLContext);
-}
 export const ChartsWebGLLayer = /*#__PURE__*/React.forwardRef(function WebGLProvider(_ref, ref) {
   let {
       children
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const canvasRef = React.useRef(null);
-  const [context, setContext] = React.useState(null);
+  const [glContext, setGlContext] = React.useState(null);
   const handleRef = useForkRef(canvasRef, ref);
   const chartRoot = useChartRootRef().current;
   const drawingArea = useDrawingArea();
   const [, rerender] = React.useReducer(s => s + 1, 0);
+  const drawEntriesRef = React.useRef([]);
+  const renderScheduledRef = React.useRef(false);
+  const renderAll = React.useCallback(() => {
+    if (!glContext) {
+      return;
+    }
+    renderScheduledRef.current = false;
+    glContext.clearColor(0, 0, 0, 0.0);
+    glContext.clear(glContext.COLOR_BUFFER_BIT);
+    // Sort by order so z-order matches children's position in ChartsWebGLLayer,
+    // stable across remount.
+    const sorted = [...drawEntriesRef.current].sort((a, b) => a.order - b.order);
+    for (const {
+      drawRef
+    } of sorted) {
+      drawRef.current?.();
+    }
+  }, [glContext]);
+  const registerDraw = React.useCallback((drawRef, order) => {
+    const entry = {
+      drawRef,
+      order
+    };
+    drawEntriesRef.current.push(entry);
+    return () => {
+      const idx = drawEntriesRef.current.indexOf(entry);
+      if (idx >= 0) {
+        drawEntriesRef.current.splice(idx, 1);
+      }
+    };
+  }, []);
+  const requestRender = React.useCallback(() => {
+    renderScheduledRef.current = true;
+    // Trigger a re-render so the flush effect runs, even if only a child's state changed
+    rerender();
+  }, []);
+
+  // Centralized resize handling — render all plots on canvas resize
+  useWebGLResizeObserver(glContext, renderAll);
+
+  // Flush scheduled renders after all children's effects have run
+  React.useEffect(() => {
+    if (renderScheduledRef.current) {
+      renderAll();
+    }
+  });
   React.useEffect(() => {
     /* The chart root isn't available on first render because the ref is only set after mounting the root component. */
     if (!chartRoot) {
@@ -40,7 +84,7 @@ export const ChartsWebGLLayer = /*#__PURE__*/React.forwardRef(function WebGLProv
       // Must prevent default otherwise the context won't be marked as restorable
       // https://registry.khronos.org/webgl/extensions/WEBGL_lose_context/
       event.preventDefault();
-      setContext(null);
+      setGlContext(null);
     };
     const initializeContext = () => {
       const ctx = canvas.getContext('webgl2', {
@@ -52,7 +96,7 @@ export const ChartsWebGLLayer = /*#__PURE__*/React.forwardRef(function WebGLProv
       if (!ctx) {
         return;
       }
-      setContext(ctx);
+      setGlContext(ctx);
     };
     canvas.addEventListener('webglcontextlost', handleContextLost);
     canvas.addEventListener('webglcontextrestored', initializeContext);
@@ -62,11 +106,16 @@ export const ChartsWebGLLayer = /*#__PURE__*/React.forwardRef(function WebGLProv
       canvas.removeEventListener('webglcontextrestored', initializeContext);
     };
   }, [chartRoot]);
+  const contextValue = React.useMemo(() => glContext ? {
+    gl: glContext,
+    registerDraw,
+    requestRender
+  } : null, [glContext, registerDraw, requestRender]);
   if (!chartRoot) {
     return null;
   }
   return /*#__PURE__*/_jsxs(ChartsWebGLContext.Provider, {
-    value: context,
+    value: contextValue,
     children: [/*#__PURE__*/_jsx(CanvasPositioner, {
       "aria-hidden": "true",
       children: /*#__PURE__*/_jsx("canvas", _extends({
@@ -80,7 +129,10 @@ export const ChartsWebGLLayer = /*#__PURE__*/React.forwardRef(function WebGLProv
           height: drawingArea.height
         }
       }))
-    }), children]
+    }), React.Children.map(children, (child, index) => /*#__PURE__*/_jsx(ChartsWebGLOrderContext.Provider, {
+      value: index,
+      children: child
+    }))]
   });
 });
 if (process.env.NODE_ENV !== "production") ChartsWebGLLayer.displayName = "ChartsWebGLLayer";

package/ChartsWebGLLayer/ChartsWebGLLayer.types.d.mts

@@ -0,0 +1,26 @@
+import type * as React from 'react';
+export type DrawEntry = {
+  drawRef: React.RefObject<(() => void) | null>;
+  order: number;
+};
+export interface ChartsWebGLContextValue {
+  gl: WebGL2RenderingContext;
+  /**
+   * Register a draw callback ref. Returns an unregister function.
+   * Callbacks are sorted by the provided `order` number so z-order follows the children's position
+   * in `ChartsWebGLLayer`, stable across unmount/remount (e.g. toggled via series visibility).
+   * @param {React.RefObject} drawRef A ref object whose current property is a draw callback function. The callback will be called with the WebGL context already set to this layer's canvas. Set to null to temporarily disable drawing without unregistering.
+   * @param {number} order Z-order index. Lower values draw first (behind higher values).
+   * @returns {Function} Unregister function to remove the draw callback from the layer.
+   */
+  registerDraw: (drawRef: React.RefObject<(() => void) | null>, order: number) => () => void;
+  /**
+   * Request a render frame. The layer will clear once, then call all registered draw callbacks in order.
+   */
+  requestRender: () => void;
+}
+export interface UseWebGLLayerValue {
+  gl: WebGL2RenderingContext;
+  registerDraw: (drawRef: React.RefObject<(() => void) | null>) => () => void;
+  requestRender: () => void;
+}

package/ChartsWebGLLayer/ChartsWebGLLayer.types.d.ts

@@ -0,0 +1,26 @@
+import type * as React from 'react';
+export type DrawEntry = {
+  drawRef: React.RefObject<(() => void) | null>;
+  order: number;
+};
+export interface ChartsWebGLContextValue {
+  gl: WebGL2RenderingContext;
+  /**
+   * Register a draw callback ref. Returns an unregister function.
+   * Callbacks are sorted by the provided `order` number so z-order follows the children's position
+   * in `ChartsWebGLLayer`, stable across unmount/remount (e.g. toggled via series visibility).
+   * @param {React.RefObject} drawRef A ref object whose current property is a draw callback function. The callback will be called with the WebGL context already set to this layer's canvas. Set to null to temporarily disable drawing without unregistering.
+   * @param {number} order Z-order index. Lower values draw first (behind higher values).
+   * @returns {Function} Unregister function to remove the draw callback from the layer.
+   */
+  registerDraw: (drawRef: React.RefObject<(() => void) | null>, order: number) => () => void;
+  /**
+   * Request a render frame. The layer will clear once, then call all registered draw callbacks in order.
+   */
+  requestRender: () => void;
+}
+export interface UseWebGLLayerValue {
+  gl: WebGL2RenderingContext;
+  registerDraw: (drawRef: React.RefObject<(() => void) | null>) => () => void;
+  requestRender: () => void;
+}

package/ChartsWebGLLayer/ChartsWebGLLayer.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/ChartsWebGLLayer/ChartsWebGLLayer.types.mjs

@@ -0,0 +1 @@
+export {};

package/ChartsWebGLLayer/ChartsWebGLOrderContext.d.mts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * Provides the z-order index for a plot based on its position in `ChartsWebGLLayer`'s children.
+ * `useWebGLLayer` reads this and auto-binds it to `registerDraw` so consumers don't pass it manually.
+ */
+export declare const ChartsWebGLOrderContext: React.Context<number>;

package/ChartsWebGLLayer/ChartsWebGLOrderContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * Provides the z-order index for a plot based on its position in `ChartsWebGLLayer`'s children.
+ * `useWebGLLayer` reads this and auto-binds it to `registerDraw` so consumers don't pass it manually.
+ */
+export declare const ChartsWebGLOrderContext: React.Context<number>;

package/ChartsWebGLLayer/ChartsWebGLOrderContext.js

@@ -0,0 +1,15 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsWebGLOrderContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * Provides the z-order index for a plot based on its position in `ChartsWebGLLayer`'s children.
+ * `useWebGLLayer` reads this and auto-binds it to `registerDraw` so consumers don't pass it manually.
+ */
+const ChartsWebGLOrderContext = exports.ChartsWebGLOrderContext = /*#__PURE__*/React.createContext(0);
+if (process.env.NODE_ENV !== "production") ChartsWebGLOrderContext.displayName = "ChartsWebGLOrderContext";

package/ChartsWebGLLayer/ChartsWebGLOrderContext.mjs

@@ -0,0 +1,10 @@
+'use client';
+
+import * as React from 'react';
+
+/**
+ * Provides the z-order index for a plot based on its position in `ChartsWebGLLayer`'s children.
+ * `useWebGLLayer` reads this and auto-binds it to `registerDraw` so consumers don't pass it manually.
+ */
+export const ChartsWebGLOrderContext = /*#__PURE__*/React.createContext(0);
+if (process.env.NODE_ENV !== "production") ChartsWebGLOrderContext.displayName = "ChartsWebGLOrderContext";

package/HeatmapPremium/HeatmapPlotPremium.js

@@ -9,7 +9,7 @@ exports.HeatmapPlotPremium = HeatmapPlotPremium;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _internals = require("@mui/x-charts-pro/internals");
-var _HeatmapWebGLRenderer = require("./webgl/HeatmapWebGLRenderer");
+var _HeatmapWebGLPlot = require("./webgl/HeatmapWebGLPlot");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["renderer", "borderRadius"];
 function HeatmapPlotPremium(_ref) {
@@ -19,7 +19,7 @@ function HeatmapPlotPremium(_ref) {
     } = _ref,
     props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   if (renderer === 'webgl') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeatmapWebGLRenderer.HeatmapWebGLRenderer, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeatmapWebGLPlot.HeatmapWebGLPlot, {
       borderRadius: borderRadius
     });
   }

package/HeatmapPremium/HeatmapPlotPremium.mjs

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["renderer", "borderRadius"];
 import { HeatmapSVGPlot } from '@mui/x-charts-pro/internals';
-import { HeatmapWebGLRenderer } from "./webgl/HeatmapWebGLRenderer.mjs";
+import { HeatmapWebGLPlot } from "./webgl/HeatmapWebGLPlot.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function HeatmapPlotPremium(_ref) {
   let {
@@ -13,7 +13,7 @@ export function HeatmapPlotPremium(_ref) {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   if (renderer === 'webgl') {
-    return /*#__PURE__*/_jsx(HeatmapWebGLRenderer, {
+    return /*#__PURE__*/_jsx(HeatmapWebGLPlot, {
       borderRadius: borderRadius
     });
   }

package/HeatmapPremium/HeatmapPremium.js

@@ -345,6 +345,7 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
@@ -425,6 +426,7 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -465,7 +467,8 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
     dataKey: _propTypes.default.string,
     id: _propTypes.default.string,
     max: _propTypes.default.number,
-    min: _propTypes.default.number
+    min: _propTypes.default.number,
+    valueGetter: _propTypes.default.func
   })),
   /**
    * The list of zoom data related to each axis.

package/HeatmapPremium/HeatmapPremium.mjs

@@ -338,6 +338,7 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
@@ -418,6 +419,7 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
@@ -458,7 +460,8 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
     dataKey: PropTypes.string,
     id: PropTypes.string,
     max: PropTypes.number,
-    min: PropTypes.number
+    min: PropTypes.number,
+    valueGetter: PropTypes.func
   })),
   /**
    * The list of zoom data related to each axis.

package/HeatmapPremium/webgl/HeatmapWebGLPlot.js

@@ -10,24 +10,25 @@ exports.HeatmapWebGLPlot = HeatmapWebGLPlot;
 var React = _interopRequireWildcard(require("react"));
 var _hooks = require("@mui/x-charts/hooks");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _ChartsWebGLLayer = require("../../ChartsWebGLLayer/ChartsWebGLLayer");
+var _ChartsWebGLContext = require("../../ChartsWebGLLayer/ChartsWebGLContext");
 var _hooks2 = require("../../hooks");
 var _shaders = require("./shaders");
-var _useWebGLResizeObserver = require("../../utils/webgl/useWebGLResizeObserver");
 var _utils = require("../../utils/webgl/utils");
 var _useHeatmapPlotData = require("./useHeatmapPlotData");
 var _jsxRuntime = require("react/jsx-runtime");
 function HeatmapWebGLPlot({
   borderRadius
 }) {
-  const gl = (0, _ChartsWebGLLayer.useWebGLContext)();
+  const layer = (0, _ChartsWebGLContext.useWebGLLayer)();
   const series = (0, _hooks2.useHeatmapSeriesContext)();
   const seriesToDisplay = series?.series[series.seriesOrder[0]];
-  if (!gl || !seriesToDisplay) {
+  if (!layer || !seriesToDisplay) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(HeatmapWebGLPlotImpl, {
-    gl: gl,
+    gl: layer.gl,
+    registerDraw: layer.registerDraw,
+    requestRender: layer.requestRender,
     borderRadius: borderRadius ?? 0,
     series: seriesToDisplay
   });
@@ -35,6 +36,8 @@ function HeatmapWebGLPlot({
 function HeatmapWebGLPlotImpl(props) {
   const {
     gl,
+    registerDraw,
+    requestRender,
     borderRadius,
     series
   } = props;
@@ -49,21 +52,16 @@ function HeatmapWebGLPlotImpl(props) {
   });
   const [quadBuffer] = React.useState(() => (0, _utils.uploadQuadBuffer)(gl));
   const dataLength = series.data.length;
-  const renderScheduledRef = React.useRef(false);
-  const render = React.useCallback(() => {
-    renderScheduledRef.current = false;
-
-    // Clear and draw
-    gl.clearColor(0, 0, 0, 0.0);
-    gl.clear(gl.COLOR_BUFFER_BIT);
-    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, dataLength);
-  }, [dataLength, gl]);
-  const scheduleRender = React.useCallback(() => {
-    renderScheduledRef.current = true;
-  }, []);
-
-  // On resize render directly to avoid a frame where the canvas is blank
-  (0, _useWebGLResizeObserver.useWebGLResizeObserver)(render);
+  const drawRef = React.useRef(null);
+  React.useEffect(() => {
+    drawRef.current = () => {
+      gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, dataLength);
+    };
+  }, [gl, dataLength]);
+  React.useEffect(() => {
+    const unregister = registerDraw(drawRef);
+    return unregister;
+  }, [registerDraw]);
   React.useEffect(() => {
     /* Enable blending for transparency
      * These are global to the WebGL context and need to be set only once */
@@ -160,26 +158,21 @@ function HeatmapWebGLPlotImpl(props) {
     } else {
       setupBorderRadiusUniform();
     }
-    scheduleRender();
-  }, [gl, program, scheduleRender, seriesBorderRadius, setupBorderRadiusUniform,
+    requestRender();
+  }, [gl, program, requestRender, seriesBorderRadius, setupBorderRadiusUniform,
   // We use the event callback versions here because we only want this effect to trigger when the border radius changes
   setupAttributesEvent, setupUniformsEvent, vertexShader]);
   React.useEffect(() => {
     setupResolutionUniform();
-    scheduleRender();
-  }, [setupResolutionUniform, scheduleRender]);
+    requestRender();
+  }, [setupResolutionUniform, requestRender]);
   React.useEffect(() => {
     setupRectDimensionsUniform();
-    scheduleRender();
-  }, [setupRectDimensionsUniform, scheduleRender]);
+    requestRender();
+  }, [setupRectDimensionsUniform, requestRender]);
   React.useEffect(() => {
     setupAttributes();
-    scheduleRender();
-  }, [scheduleRender, setupAttributes]);
-  React.useEffect(() => {
-    if (renderScheduledRef.current) {
-      render();
-    }
-  });
+    requestRender();
+  }, [requestRender, setupAttributes]);
   return null;
 }