@mui/x-charts-premium 9.0.4 → 9.1.0

package/HeatmapPremium/webgl/HeatmapWebGLPlot.mjs

@@ -2,11 +2,9 @@
 
 import * as React from 'react';
 import { useDrawingArea, useXScale, useYScale } from '@mui/x-charts/hooks';
-import useEventCallback from '@mui/utils/useEventCallback';
 import { useWebGLLayer } from "../../ChartsWebGLLayer/ChartsWebGLContext.mjs";
 import { useHeatmapSeriesContext } from "../../hooks/index.mjs";
-import { heatmapFragmentShaderSourceNoBorderRadius, heatmapFragmentShaderSourceWithBorderRadius, heatmapVertexShaderSource } from "./shaders.mjs";
-import { attachShader, bindQuadBuffer, compileShader, logWebGLErrors, uploadQuadBuffer } from "../../utils/webgl/utils.mjs";
+import { HeatmapWebGLProgram } from "./HeatmapWebGLProgram.mjs";
 import { useHeatmapPlotData } from "./useHeatmapPlotData.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function HeatmapWebGLPlot({
@@ -37,135 +35,45 @@ function HeatmapWebGLPlotImpl(props) {
   const drawingArea = useDrawingArea();
   const xScale = useXScale();
   const yScale = useYScale();
-  const [vertexShader] = React.useState(() => compileShader(gl, heatmapVertexShaderSource, gl.VERTEX_SHADER));
-  const [program] = React.useState(() => {
-    const p = gl.createProgram();
-    gl.attachShader(p, vertexShader);
-    return p;
-  });
-  const [quadBuffer] = React.useState(() => 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(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 = useEventCallback(() => {
-    bindQuadBuffer(gl, program, quadBuffer);
-    setupBorderRadiusUniform();
-    setupResolutionUniform();
-    setupRectDimensionsUniform();
-  });
-  const plotData = 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 = useEventCallback(() => setupAttributes());
   React.useEffect(() => {
-    const shouldAttachNewShader = lastSeriesBorderRadiusRef.current > 0 !== seriesBorderRadius > 0;
-    lastSeriesBorderRadiusRef.current = seriesBorderRadius;
-    if (shouldAttachNewShader) {
-      const shaderSource = seriesBorderRadius > 0 ? heatmapFragmentShaderSourceWithBorderRadius : 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 = 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);
-      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 = useHeatmapPlotData(drawingArea, series, xScale, yScale);
   React.useEffect(() => {
-    setupAttributes();
+    program?.plot(plotData);
     requestRender();
-  }, [requestRender, setupAttributes]);
+  }, [plotData, program, requestRender]);
   return null;
 }

package/HeatmapPremium/webgl/HeatmapWebGLProgram.d.mts

@@ -0,0 +1,24 @@
+export interface HeatmapPlotData {
+  centers: Float32Array;
+  colors: Uint8Array;
+  saturations: Float32Array;
+}
+export declare class HeatmapWebGLProgram {
+  private gl;
+  private readonly shaders;
+  private readonly quadBuffer;
+  private readonly centers;
+  private readonly colors;
+  private readonly saturations;
+  private readonly flatVariant;
+  private readonly roundedVariant;
+  private active;
+  constructor(gl: WebGL2RenderingContext);
+  private buildVariant;
+  setBorderRadius(borderRadius: number): void;
+  setResolution(width: number, height: number): void;
+  setRectDimensions(width: number, height: number): void;
+  plot(plotData: HeatmapPlotData): void;
+  render(dataLength: number): void;
+  dispose(): void;
+}

package/HeatmapPremium/webgl/HeatmapWebGLProgram.d.ts

@@ -0,0 +1,24 @@
+export interface HeatmapPlotData {
+  centers: Float32Array;
+  colors: Uint8Array;
+  saturations: Float32Array;
+}
+export declare class HeatmapWebGLProgram {
+  private gl;
+  private readonly shaders;
+  private readonly quadBuffer;
+  private readonly centers;
+  private readonly colors;
+  private readonly saturations;
+  private readonly flatVariant;
+  private readonly roundedVariant;
+  private active;
+  constructor(gl: WebGL2RenderingContext);
+  private buildVariant;
+  setBorderRadius(borderRadius: number): void;
+  setResolution(width: number, height: number): void;
+  setRectDimensions(width: number, height: number): void;
+  plot(plotData: HeatmapPlotData): void;
+  render(dataLength: number): void;
+  dispose(): void;
+}

package/HeatmapPremium/webgl/HeatmapWebGLProgram.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeatmapWebGLProgram = void 0;
+var _utils = require("../../utils/webgl/utils");
+var _shaders = require("./shaders");
+const QUAD_VERTICES = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+class HeatmapWebGLProgram {
+  shaders = [];
+  constructor(gl) {
+    this.gl = gl;
+    /* 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);
+    this.quadBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, QUAD_VERTICES, gl.STATIC_DRAW);
+    this.centers = (0, _utils.createGrowableBuffer)(gl);
+    this.colors = (0, _utils.createGrowableBuffer)(gl);
+    this.saturations = (0, _utils.createGrowableBuffer)(gl);
+
+    /* Two pre-built programs let us swap border-radius on/off without re-linking. */
+    this.flatVariant = this.buildVariant(_shaders.heatmapFragmentShaderSourceNoBorderRadius);
+    this.roundedVariant = this.buildVariant(_shaders.heatmapFragmentShaderSourceWithBorderRadius);
+    this.active = this.flatVariant;
+  }
+  buildVariant(fragmentShaderSource) {
+    const gl = this.gl;
+    const program = gl.createProgram();
+    const vertexShader = (0, _utils.compileShader)(gl, _shaders.heatmapVertexShaderSource, gl.VERTEX_SHADER);
+    gl.attachShader(program, vertexShader);
+    const fragmentShader = (0, _utils.attachShader)(gl, program, fragmentShaderSource, 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 (process.env.NODE_ENV !== 'production') {
+      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)}`);
+      }
+    }
+    this.shaders.push(vertexShader, fragmentShader);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    bindAttribute(gl, program, 'a_position', this.quadBuffer, 2, 0);
+    bindAttribute(gl, program, 'a_center', this.centers.buffer, 2, 1);
+    /* Colors are uploaded as Uint8(Clamped)Array; shader sees normalized [0, 1] floats. */
+    bindAttribute(gl, program, 'a_color', this.colors.buffer, 4, 1, gl.UNSIGNED_BYTE, true);
+    bindAttribute(gl, program, 'a_saturation', this.saturations.buffer, 1, 1);
+    gl.bindVertexArray(null);
+    return {
+      program,
+      vao,
+      uResolution: gl.getUniformLocation(program, 'u_resolution'),
+      uDimensions: gl.getUniformLocation(program, 'u_dimensions'),
+      uBorderRadius: gl.getUniformLocation(program, 'u_borderRadius')
+    };
+  }
+  setBorderRadius(borderRadius) {
+    this.active = borderRadius > 0 ? this.roundedVariant : this.flatVariant;
+    if (this.active.uBorderRadius) {
+      this.gl.useProgram(this.active.program);
+      this.gl.uniform1f(this.active.uBorderRadius, borderRadius);
+    }
+  }
+  setResolution(width, height) {
+    const {
+      gl
+    } = this;
+    gl.useProgram(this.flatVariant.program);
+    gl.uniform2f(this.flatVariant.uResolution, width, height);
+    gl.useProgram(this.roundedVariant.program);
+    gl.uniform2f(this.roundedVariant.uResolution, width, height);
+  }
+  setRectDimensions(width, height) {
+    const {
+      gl
+    } = this;
+    gl.useProgram(this.flatVariant.program);
+    gl.uniform2f(this.flatVariant.uDimensions, width, height);
+    gl.useProgram(this.roundedVariant.program);
+    gl.uniform2f(this.roundedVariant.uDimensions, width, height);
+  }
+  plot(plotData) {
+    const {
+      gl
+    } = this;
+    (0, _utils.uploadGrowableBuffer)(gl, this.centers, plotData.centers);
+    (0, _utils.uploadGrowableBuffer)(gl, this.colors, plotData.colors);
+    (0, _utils.uploadGrowableBuffer)(gl, this.saturations, plotData.saturations);
+  }
+  render(dataLength) {
+    if (dataLength === 0) {
+      return;
+    }
+    const {
+      gl
+    } = this;
+    gl.useProgram(this.active.program);
+    gl.bindVertexArray(this.active.vao);
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, dataLength);
+    (0, _utils.logWebGLErrors)(gl);
+  }
+  dispose() {
+    const {
+      gl
+    } = this;
+    gl.deleteBuffer(this.quadBuffer);
+    gl.deleteBuffer(this.centers.buffer);
+    gl.deleteBuffer(this.colors.buffer);
+    gl.deleteBuffer(this.saturations.buffer);
+    gl.deleteProgram(this.flatVariant.program);
+    gl.deleteVertexArray(this.flatVariant.vao);
+    gl.deleteProgram(this.roundedVariant.program);
+    gl.deleteVertexArray(this.roundedVariant.vao);
+    this.shaders.forEach(shader => gl.deleteShader(shader));
+  }
+}
+exports.HeatmapWebGLProgram = HeatmapWebGLProgram;
+function bindAttribute(gl, program, name, buffer, size, divisor, type = gl.FLOAT, normalized = false) {
+  const location = gl.getAttribLocation(program, name);
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.enableVertexAttribArray(location);
+  gl.vertexAttribPointer(location, size, type, normalized, 0, 0);
+  if (divisor !== 0) {
+    gl.vertexAttribDivisor(location, divisor);
+  }
+}

package/HeatmapPremium/webgl/HeatmapWebGLProgram.mjs

@@ -0,0 +1,125 @@
+import { attachShader, compileShader, createGrowableBuffer, logWebGLErrors, uploadGrowableBuffer } from "../../utils/webgl/utils.mjs";
+import { heatmapFragmentShaderSourceNoBorderRadius, heatmapFragmentShaderSourceWithBorderRadius, heatmapVertexShaderSource } from "./shaders.mjs";
+const QUAD_VERTICES = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+export class HeatmapWebGLProgram {
+  shaders = [];
+  constructor(gl) {
+    this.gl = gl;
+    /* 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);
+    this.quadBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, QUAD_VERTICES, gl.STATIC_DRAW);
+    this.centers = createGrowableBuffer(gl);
+    this.colors = createGrowableBuffer(gl);
+    this.saturations = createGrowableBuffer(gl);
+
+    /* Two pre-built programs let us swap border-radius on/off without re-linking. */
+    this.flatVariant = this.buildVariant(heatmapFragmentShaderSourceNoBorderRadius);
+    this.roundedVariant = this.buildVariant(heatmapFragmentShaderSourceWithBorderRadius);
+    this.active = this.flatVariant;
+  }
+  buildVariant(fragmentShaderSource) {
+    const gl = this.gl;
+    const program = gl.createProgram();
+    const vertexShader = compileShader(gl, heatmapVertexShaderSource, gl.VERTEX_SHADER);
+    gl.attachShader(program, vertexShader);
+    const fragmentShader = attachShader(gl, program, fragmentShaderSource, 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 (process.env.NODE_ENV !== 'production') {
+      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)}`);
+      }
+    }
+    this.shaders.push(vertexShader, fragmentShader);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    bindAttribute(gl, program, 'a_position', this.quadBuffer, 2, 0);
+    bindAttribute(gl, program, 'a_center', this.centers.buffer, 2, 1);
+    /* Colors are uploaded as Uint8(Clamped)Array; shader sees normalized [0, 1] floats. */
+    bindAttribute(gl, program, 'a_color', this.colors.buffer, 4, 1, gl.UNSIGNED_BYTE, true);
+    bindAttribute(gl, program, 'a_saturation', this.saturations.buffer, 1, 1);
+    gl.bindVertexArray(null);
+    return {
+      program,
+      vao,
+      uResolution: gl.getUniformLocation(program, 'u_resolution'),
+      uDimensions: gl.getUniformLocation(program, 'u_dimensions'),
+      uBorderRadius: gl.getUniformLocation(program, 'u_borderRadius')
+    };
+  }
+  setBorderRadius(borderRadius) {
+    this.active = borderRadius > 0 ? this.roundedVariant : this.flatVariant;
+    if (this.active.uBorderRadius) {
+      this.gl.useProgram(this.active.program);
+      this.gl.uniform1f(this.active.uBorderRadius, borderRadius);
+    }
+  }
+  setResolution(width, height) {
+    const {
+      gl
+    } = this;
+    gl.useProgram(this.flatVariant.program);
+    gl.uniform2f(this.flatVariant.uResolution, width, height);
+    gl.useProgram(this.roundedVariant.program);
+    gl.uniform2f(this.roundedVariant.uResolution, width, height);
+  }
+  setRectDimensions(width, height) {
+    const {
+      gl
+    } = this;
+    gl.useProgram(this.flatVariant.program);
+    gl.uniform2f(this.flatVariant.uDimensions, width, height);
+    gl.useProgram(this.roundedVariant.program);
+    gl.uniform2f(this.roundedVariant.uDimensions, width, height);
+  }
+  plot(plotData) {
+    const {
+      gl
+    } = this;
+    uploadGrowableBuffer(gl, this.centers, plotData.centers);
+    uploadGrowableBuffer(gl, this.colors, plotData.colors);
+    uploadGrowableBuffer(gl, this.saturations, plotData.saturations);
+  }
+  render(dataLength) {
+    if (dataLength === 0) {
+      return;
+    }
+    const {
+      gl
+    } = this;
+    gl.useProgram(this.active.program);
+    gl.bindVertexArray(this.active.vao);
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, dataLength);
+    logWebGLErrors(gl);
+  }
+  dispose() {
+    const {
+      gl
+    } = this;
+    gl.deleteBuffer(this.quadBuffer);
+    gl.deleteBuffer(this.centers.buffer);
+    gl.deleteBuffer(this.colors.buffer);
+    gl.deleteBuffer(this.saturations.buffer);
+    gl.deleteProgram(this.flatVariant.program);
+    gl.deleteVertexArray(this.flatVariant.vao);
+    gl.deleteProgram(this.roundedVariant.program);
+    gl.deleteVertexArray(this.roundedVariant.vao);
+    this.shaders.forEach(shader => gl.deleteShader(shader));
+  }
+}
+function bindAttribute(gl, program, name, buffer, size, divisor, type = gl.FLOAT, normalized = false) {
+  const location = gl.getAttribLocation(program, name);
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.enableVertexAttribArray(location);
+  gl.vertexAttribPointer(location, size, type, normalized, 0, 0);
+  if (divisor !== 0) {
+    gl.vertexAttribDivisor(location, divisor);
+  }
+}

package/HeatmapPremium/webgl/useHeatmapPlotData.d.mts

@@ -6,7 +6,7 @@ export declare function useHeatmapPlotData(drawingArea: ChartDrawingArea, series
 }>, yScale: ScaleBand<{
   toString(): string;
 }>): {
-  centers: Float32Array<ArrayBuffer>;
-  colors: Float32Array<ArrayBuffer>;
-  saturations: Float32Array<ArrayBuffer>;
+  centers: Float32Array<ArrayBufferLike>;
+  colors: Uint8Array<ArrayBuffer>;
+  saturations: Float32Array<ArrayBufferLike>;
 };

package/HeatmapPremium/webgl/useHeatmapPlotData.d.ts

@@ -6,7 +6,7 @@ export declare function useHeatmapPlotData(drawingArea: ChartDrawingArea, series
 }>, yScale: ScaleBand<{
   toString(): string;
 }>): {
-  centers: Float32Array<ArrayBuffer>;
-  colors: Float32Array<ArrayBuffer>;
-  saturations: Float32Array<ArrayBuffer>;
+  centers: Float32Array<ArrayBufferLike>;
+  colors: Uint8Array<ArrayBuffer>;
+  saturations: Float32Array<ArrayBufferLike>;
 };

package/HeatmapPremium/webgl/useHeatmapPlotData.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -9,49 +10,100 @@ var React = _interopRequireWildcard(require("react"));
 var _hooks = require("@mui/x-charts/hooks");
 var _internals = require("@mui/x-charts/internals");
 var _parseColor = require("../../utils/webgl/parseColor");
+/* Far enough off-canvas that the rect is never visible; used for invalid x/y entries.
+ * Avoids coupling the position pass to the color/saturation passes. */
+const OFFSCREEN = -1e9;
+function ensurePoolFloat32(pool, n) {
+  if (pool && pool.length >= n) {
+    return pool;
+  }
+  return new Float32Array(n);
+}
 function useHeatmapPlotData(drawingArea, series, xScale, yScale) {
   const width = xScale.bandwidth();
   const height = yScale.bandwidth();
   const colorScale = (0, _hooks.useZColorScale)();
   const store = (0, _internals.useStore)();
   const getHighlightState = store.use(_internals.selectorChartsHighlightStateCallback);
-  return React.useMemo(() => {
-    const centers = new Float32Array(series.data.length * 2);
-    const colors = new Float32Array(series.data.length * 4);
-    const saturations = new Float32Array(series.data.length);
-    const xDomain = xScale.domain();
-    const yDomain = yScale.domain();
+
+  /* Colors only change when series data or color scale changes. Cached so resize/highlight
+   * renders don't re-upload the colors buffer.
+   * Stored as Uint8 (1 byte per channel) — 4x less GPU traffic than Float32 RGBA. */
+  const colors = React.useMemo(() => {
+    const out = new Uint8Array(series.data.length * 4);
     for (let dataIndex = 0; dataIndex < series.data.length; dataIndex += 1) {
-      const [xIndex, yIndex, value] = series.data[dataIndex];
-      const x = xScale(xDomain[xIndex]);
-      const y = yScale(yDomain[yIndex]);
+      const value = series.data[dataIndex][2];
       const color = colorScale?.(value);
-      if (x === undefined || y === undefined || !color) {
+      if (!color) {
+        /* Alpha 0 hides the rect; src-alpha blending makes RGB irrelevant. */
         continue;
       }
-      centers[dataIndex * 2] = x + width / 2 - drawingArea.left;
-      centers[dataIndex * 2 + 1] = y + height / 2 - drawingArea.top;
       const rgbColor = (0, _parseColor.parseColor)(color);
-      colors[dataIndex * 4] = rgbColor[0];
-      colors[dataIndex * 4 + 1] = rgbColor[1];
-      colors[dataIndex * 4 + 2] = rgbColor[2];
-      colors[dataIndex * 4 + 3] = 1.0;
+      out[dataIndex * 4] = rgbColor[0];
+      out[dataIndex * 4 + 1] = rgbColor[1];
+      out[dataIndex * 4 + 2] = rgbColor[2];
+      out[dataIndex * 4 + 3] = 255;
+    }
+    return out;
+  }, [colorScale, series.data]);
+
+  /* Saturations only change with highlight state. Pooled so highlight churn doesn't
+   * allocate per change. */
+  const saturationsPoolRef = React.useRef(null);
+  const saturations = React.useMemo(() => {
+    const n = series.data.length;
+    const pool = ensurePoolFloat32(saturationsPoolRef.current ?? undefined, n);
+    saturationsPoolRef.current = pool;
+    for (let dataIndex = 0; dataIndex < n; dataIndex += 1) {
+      const item = series.data[dataIndex];
       const highlightState = getHighlightState({
         type: 'heatmap',
         seriesId: series.id,
-        xIndex,
-        yIndex
+        xIndex: item[0],
+        yIndex: item[1]
       });
+      let saturation = 0;
       if (highlightState === 'highlighted') {
-        saturations[dataIndex] = 0.2;
+        saturation = 0.2;
       } else if (highlightState === 'faded') {
-        saturations[dataIndex] = -0.2;
+        saturation = -0.2;
+      }
+      pool[dataIndex] = saturation;
+    }
+    /* Subarray gives a fresh identity over the same bytes — upload short-circuit fires. */
+    return pool.subarray(0, n);
+  }, [getHighlightState, series.data, series.id]);
+
+  /* Positions change on resize (drawing area / band width). Pooled to avoid per-frame
+   * allocation. Subarray view gives a fresh identity each call so the upload still runs. */
+  const centersPoolRef = React.useRef(null);
+  const centers = React.useMemo(() => {
+    const n = series.data.length;
+    const pool = ensurePoolFloat32(centersPoolRef.current ?? undefined, n * 2);
+    centersPoolRef.current = pool;
+    const left = drawingArea.left;
+    const top = drawingArea.top;
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const xDomain = xScale.domain();
+    const yDomain = yScale.domain();
+    for (let dataIndex = 0; dataIndex < n; dataIndex += 1) {
+      const item = series.data[dataIndex];
+      const x = xScale(xDomain[item[0]]);
+      const y = yScale(yDomain[item[1]]);
+      if (x === undefined || y === undefined) {
+        pool[dataIndex * 2] = OFFSCREEN;
+        pool[dataIndex * 2 + 1] = OFFSCREEN;
+        continue;
       }
+      pool[dataIndex * 2] = x + halfWidth - left;
+      pool[dataIndex * 2 + 1] = y + halfHeight - top;
     }
-    return {
-      centers,
-      colors,
-      saturations
-    };
-  }, [colorScale, drawingArea.left, drawingArea.top, height, getHighlightState, series.data, series.id, width, xScale, yScale]);
+    return pool.subarray(0, n * 2);
+  }, [drawingArea.left, drawingArea.top, height, series.data, width, xScale, yScale]);
+  return React.useMemo(() => ({
+    centers,
+    colors,
+    saturations
+  }), [centers, colors, saturations]);
 }