@mui/x-charts-premium 9.0.4 → 9.1.0

package/HeatmapPremium/HeatmapPremium.js

@@ -284,166 +284,13 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  xAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axis: _propTypes.default.oneOf(['x']),
-    barGapRatio: _propTypes.default.number,
-    categoryGapRatio: _propTypes.default.number,
-    classes: _propTypes.default.object,
-    className: _propTypes.default.string,
-    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      type: _propTypes.default.oneOf(['ordinal']).isRequired,
-      unknownColor: _propTypes.default.string,
-      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
-    }), _propTypes.default.shape({
-      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
-      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-      type: _propTypes.default.oneOf(['continuous']).isRequired
-    }), _propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
-      type: _propTypes.default.oneOf(['piecewise']).isRequired
-    })]),
-    data: _propTypes.default.array,
-    dataKey: _propTypes.default.string,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    groups: _propTypes.default.arrayOf(_propTypes.default.shape({
-      getValue: _propTypes.default.func.isRequired,
-      tickLabelStyle: _propTypes.default.object,
-      tickSize: _propTypes.default.number
-    })),
-    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
-    hideTooltip: _propTypes.default.bool,
-    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    ignoreTooltip: _propTypes.default.bool,
-    label: _propTypes.default.string,
-    labelStyle: _propTypes.default.object,
-    offset: _propTypes.default.number,
-    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
-      format: _propTypes.default.func.isRequired,
-      getTickNumber: _propTypes.default.func.isRequired,
-      isTick: _propTypes.default.func.isRequired
-    })]).isRequired),
-    position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
-    reverse: _propTypes.default.bool,
-    scaleType: _propTypes.default.oneOf(['band']),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
-    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
-    tickLabelMinGap: _propTypes.default.number,
-    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number,
-    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
-    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,
-      maxSpan: _propTypes.default.number,
-      minSpan: _propTypes.default.number,
-      minStart: _propTypes.default.number,
-      panning: _propTypes.default.bool,
-      slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool,
-        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
-        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
-        size: _propTypes.default.number
-      }),
-      step: _propTypes.default.number
-    }), _propTypes.default.bool])
-  })).isRequired,
+  xAxis: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axis: _propTypes.default.oneOf(['y']),
-    barGapRatio: _propTypes.default.number,
-    categoryGapRatio: _propTypes.default.number,
-    classes: _propTypes.default.object,
-    className: _propTypes.default.string,
-    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      type: _propTypes.default.oneOf(['ordinal']).isRequired,
-      unknownColor: _propTypes.default.string,
-      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
-    }), _propTypes.default.shape({
-      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
-      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-      type: _propTypes.default.oneOf(['continuous']).isRequired
-    }), _propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
-      type: _propTypes.default.oneOf(['piecewise']).isRequired
-    })]),
-    data: _propTypes.default.array,
-    dataKey: _propTypes.default.string,
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    groups: _propTypes.default.arrayOf(_propTypes.default.shape({
-      getValue: _propTypes.default.func.isRequired,
-      tickLabelStyle: _propTypes.default.object,
-      tickSize: _propTypes.default.number
-    })),
-    hideTooltip: _propTypes.default.bool,
-    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    ignoreTooltip: _propTypes.default.bool,
-    label: _propTypes.default.string,
-    labelStyle: _propTypes.default.object,
-    offset: _propTypes.default.number,
-    ordinalTimeTicks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), _propTypes.default.shape({
-      format: _propTypes.default.func.isRequired,
-      getTickNumber: _propTypes.default.func.isRequired,
-      isTick: _propTypes.default.func.isRequired
-    })]).isRequired),
-    position: _propTypes.default.oneOf(['left', 'none', 'right']),
-    reverse: _propTypes.default.bool,
-    scaleType: _propTypes.default.oneOf(['band']),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
-    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
-    tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
-    tickLabelStyle: _propTypes.default.object,
-    tickMaxStep: _propTypes.default.number,
-    tickMinStep: _propTypes.default.number,
-    tickNumber: _propTypes.default.number,
-    tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
-    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']),
-      maxEnd: _propTypes.default.number,
-      maxSpan: _propTypes.default.number,
-      minSpan: _propTypes.default.number,
-      minStart: _propTypes.default.number,
-      panning: _propTypes.default.bool,
-      slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool,
-        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
-        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
-        size: _propTypes.default.number
-      }),
-      step: _propTypes.default.number
-    }), _propTypes.default.bool])
-  })).isRequired,
+  yAxis: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**
    * The configuration of the z-axes.
    */

package/HeatmapPremium/HeatmapPremium.mjs

@@ -277,166 +277,13 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axis: PropTypes.oneOf(['x']),
-    barGapRatio: PropTypes.number,
-    categoryGapRatio: PropTypes.number,
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
-      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      type: PropTypes.oneOf(['continuous']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
-      type: PropTypes.oneOf(['piecewise']).isRequired
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    groups: PropTypes.arrayOf(PropTypes.shape({
-      getValue: PropTypes.func.isRequired,
-      tickLabelStyle: PropTypes.object,
-      tickSize: PropTypes.number
-    })),
-    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    ignoreTooltip: PropTypes.bool,
-    label: PropTypes.string,
-    labelStyle: PropTypes.object,
-    offset: PropTypes.number,
-    ordinalTimeTicks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), PropTypes.shape({
-      format: PropTypes.func.isRequired,
-      getTickNumber: PropTypes.func.isRequired,
-      isTick: PropTypes.func.isRequired
-    })]).isRequired),
-    position: PropTypes.oneOf(['bottom', 'none', 'top']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelMinGap: PropTypes.number,
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    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,
-      maxSpan: PropTypes.number,
-      minSpan: PropTypes.number,
-      minStart: PropTypes.number,
-      panning: PropTypes.bool,
-      slider: PropTypes.shape({
-        enabled: PropTypes.bool,
-        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
-        size: PropTypes.number
-      }),
-      step: PropTypes.number
-    }), PropTypes.bool])
-  })).isRequired,
+  xAxis: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * The configuration of the y-axes.
    * If not provided, a default axis config is used.
    * An array of [[AxisConfig]] objects.
    */
-  yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axis: PropTypes.oneOf(['y']),
-    barGapRatio: PropTypes.number,
-    categoryGapRatio: PropTypes.number,
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
-      color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
-      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
-      type: PropTypes.oneOf(['continuous']).isRequired
-    }), PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
-      type: PropTypes.oneOf(['piecewise']).isRequired
-    })]),
-    data: PropTypes.array,
-    dataKey: PropTypes.string,
-    disableLine: PropTypes.bool,
-    disableTicks: PropTypes.bool,
-    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    groups: PropTypes.arrayOf(PropTypes.shape({
-      getValue: PropTypes.func.isRequired,
-      tickLabelStyle: PropTypes.object,
-      tickSize: PropTypes.number
-    })),
-    hideTooltip: PropTypes.bool,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    ignoreTooltip: PropTypes.bool,
-    label: PropTypes.string,
-    labelStyle: PropTypes.object,
-    offset: PropTypes.number,
-    ordinalTimeTicks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['biweekly', 'days', 'hours', 'months', 'quarterly', 'weeks', 'years']), PropTypes.shape({
-      format: PropTypes.func.isRequired,
-      getTickNumber: PropTypes.func.isRequired,
-      isTick: PropTypes.func.isRequired
-    })]).isRequired),
-    position: PropTypes.oneOf(['left', 'none', 'right']),
-    reverse: PropTypes.bool,
-    scaleType: PropTypes.oneOf(['band']),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
-    tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
-    tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
-    tickLabelStyle: PropTypes.object,
-    tickMaxStep: PropTypes.number,
-    tickMinStep: PropTypes.number,
-    tickNumber: PropTypes.number,
-    tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
-    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']),
-      maxEnd: PropTypes.number,
-      maxSpan: PropTypes.number,
-      minSpan: PropTypes.number,
-      minStart: PropTypes.number,
-      panning: PropTypes.bool,
-      slider: PropTypes.shape({
-        enabled: PropTypes.bool,
-        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
-        size: PropTypes.number
-      }),
-      step: PropTypes.number
-    }), PropTypes.bool])
-  })).isRequired,
+  yAxis: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * The configuration of the z-axes.
    */

package/HeatmapPremium/webgl/HeatmapWebGLPlot.js

@@ -1,7 +1,6 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,11 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.HeatmapWebGLPlot = HeatmapWebGLPlot;
 var React = _interopRequireWildcard(require("react"));
 var _hooks = require("@mui/x-charts/hooks");
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _ChartsWebGLContext = require("../../ChartsWebGLLayer/ChartsWebGLContext");
 var _hooks2 = require("../../hooks");
-var _shaders = require("./shaders");
-var _utils = require("../../utils/webgl/utils");
+var _HeatmapWebGLProgram = require("./HeatmapWebGLProgram");
 var _useHeatmapPlotData = require("./useHeatmapPlotData");
 var _jsxRuntime = require("react/jsx-runtime");
 function HeatmapWebGLPlot({
@@ -44,135 +41,45 @@ function HeatmapWebGLPlotImpl(props) {
   const drawingArea = (0, _hooks.useDrawingArea)();
   const xScale = (0, _hooks.useXScale)();
   const yScale = (0, _hooks.useYScale)();
-  const [vertexShader] = React.useState(() => (0, _utils.compileShader)(gl, _shaders.heatmapVertexShaderSource, gl.VERTEX_SHADER));
-  const [program] = React.useState(() => {
-    const p = gl.createProgram();
-    gl.attachShader(p, vertexShader);
-    return p;
-  });
-  const [quadBuffer] = React.useState(() => (0, _utils.uploadQuadBuffer)(gl));
+  const [program, setProgram] = React.useState(null);
   const dataLength = series.data.length;
   const drawRef = React.useRef(null);
   React.useEffect(() => {
     drawRef.current = () => {
-      gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, dataLength);
+      program?.render(dataLength);
     };
-  }, [gl, dataLength]);
+  }, [program, 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 */
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    const prog = new _HeatmapWebGLProgram.HeatmapWebGLProgram(gl);
+    setProgram(prog);
+    return () => {
+      prog.dispose();
+    };
   }, [gl]);
   const width = xScale.bandwidth();
   const height = yScale.bandwidth();
-
-  // A border radius cannot be larger than half the width or height of the rectangle
+  /* A border radius cannot be larger than half the width or height of the rectangle. */
   const seriesBorderRadius = Math.min(borderRadius ?? 0, width / 2, height / 2);
-  const lastSeriesBorderRadiusRef = React.useRef(seriesBorderRadius > 0 ? 0 : 1);
-  const setupResolutionUniform = React.useCallback(() => {
-    gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), drawingArea.width, drawingArea.height);
-  }, [drawingArea.height, drawingArea.width, gl, program]);
-  const setupBorderRadiusUniform = React.useCallback(() => {
-    gl.uniform1f(gl.getUniformLocation(program, 'u_borderRadius'), seriesBorderRadius);
-  }, [gl, program, seriesBorderRadius]);
-  const setupRectDimensionsUniform = React.useCallback(() => {
-    gl.uniform2f(gl.getUniformLocation(program, 'u_dimensions'), width, height);
-  }, [gl, height, program, width]);
-  const setupUniformsEvent = (0, _useEventCallback.default)(() => {
-    (0, _utils.bindQuadBuffer)(gl, program, quadBuffer);
-    setupBorderRadiusUniform();
-    setupResolutionUniform();
-    setupRectDimensionsUniform();
-  });
-  const plotData = (0, _useHeatmapPlotData.useHeatmapPlotData)(drawingArea, series, xScale, yScale);
-  const setupAttributes = React.useCallback(() => {
-    const {
-      centers,
-      colors,
-      saturations
-    } = plotData;
-
-    // Upload rectangle centers
-    const centerBuffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, centerBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, centers, gl.STATIC_DRAW);
-    const aCenter = gl.getAttribLocation(program, 'a_center');
-    gl.enableVertexAttribArray(aCenter);
-    gl.vertexAttribPointer(aCenter, 2, gl.FLOAT, false, 0, 0);
-
-    // This makes the attribute instanced (one value per rectangle, not per vertex)
-    gl.vertexAttribDivisor(aCenter, 1);
-
-    // Upload colors
-    const colorBuffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
-    const aColor = gl.getAttribLocation(program, 'a_color');
-    gl.enableVertexAttribArray(aColor);
-    gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, 0, 0);
-    gl.vertexAttribDivisor(aColor, 1);
-
-    // Upload saturations
-    const saturationBuffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, saturationBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, saturations, gl.STATIC_DRAW);
-    const aSaturation = gl.getAttribLocation(program, 'a_saturation');
-    gl.enableVertexAttribArray(aSaturation);
-    gl.vertexAttribPointer(aSaturation, 1, gl.FLOAT, false, 0, 0);
-    gl.vertexAttribDivisor(aSaturation, 1);
-  }, [gl, plotData, program]);
-  const setupAttributesEvent = (0, _useEventCallback.default)(() => setupAttributes());
   React.useEffect(() => {
-    const shouldAttachNewShader = lastSeriesBorderRadiusRef.current > 0 !== seriesBorderRadius > 0;
-    lastSeriesBorderRadiusRef.current = seriesBorderRadius;
-    if (shouldAttachNewShader) {
-      const shaderSource = seriesBorderRadius > 0 ? _shaders.heatmapFragmentShaderSourceWithBorderRadius : _shaders.heatmapFragmentShaderSourceNoBorderRadius;
-      gl.getAttachedShaders(program)?.forEach(shader => {
-        const shaderType = gl.getShaderParameter(shader, gl.SHADER_TYPE);
-        if (shaderType === gl.FRAGMENT_SHADER) {
-          gl.detachShader(program, shader);
-          gl.deleteShader(shader);
-        }
-      });
-      const fragmentShader = (0, _utils.attachShader)(gl, program, shaderSource, gl.FRAGMENT_SHADER);
-      gl.linkProgram(program);
-
-      // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#dont_check_shader_compile_status_unless_linking_fails
-      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-        console.error(`Program linking failed: ${gl.getProgramInfoLog(program)}`);
-        console.error(`Vertex shader info-log: ${gl.getShaderInfoLog(vertexShader)}`);
-        console.error(`Fragment shader info-log: ${gl.getShaderInfoLog(fragmentShader)}`);
-      }
-
-      // Not a hook
-      // eslint-disable-next-line react-compiler/react-compiler
-      gl.useProgram(program);
-      (0, _utils.logWebGLErrors)(gl);
-      setupUniformsEvent();
-      setupAttributesEvent();
-    } else {
-      setupBorderRadiusUniform();
-    }
+    program?.setResolution(drawingArea.width, drawingArea.height);
     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]);
+  }, [drawingArea.height, drawingArea.width, program, requestRender]);
   React.useEffect(() => {
-    setupResolutionUniform();
+    program?.setRectDimensions(width, height);
     requestRender();
-  }, [setupResolutionUniform, requestRender]);
+  }, [width, height, program, requestRender]);
   React.useEffect(() => {
-    setupRectDimensionsUniform();
+    program?.setBorderRadius(seriesBorderRadius);
     requestRender();
-  }, [setupRectDimensionsUniform, requestRender]);
+  }, [seriesBorderRadius, program, requestRender]);
+  const plotData = (0, _useHeatmapPlotData.useHeatmapPlotData)(drawingArea, series, xScale, yScale);
   React.useEffect(() => {
-    setupAttributes();
+    program?.plot(plotData);
     requestRender();
-  }, [requestRender, setupAttributes]);
+  }, [plotData, program, requestRender]);
   return null;
 }