@mui/x-charts-premium 9.7.0 → 9.8.0

package/HeatmapPremium/webgl/HeatmapWebGLProgram.mjs

@@ -1,17 +1,13 @@
-import { attachShader, compileShader, createGrowableBuffer, logWebGLErrors, uploadGrowableBuffer } from "../../utils/webgl/utils.mjs";
+import { bindQuadBuffer, createGrowableBuffer, linkProgram, logWebGLErrors, setupStandardBlending, uploadGrowableBuffer, uploadQuadBuffer } from "../../utils/webgl/utils.mjs";
+import { bindInstancedAttribute } from "../../utils/webgl/instancedAttribute.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);
+    /* These are global to the WebGL context and need to be set only once. */
+    setupStandardBlending(gl);
+    this.quadBuffer = uploadQuadBuffer(gl);
     this.centers = createGrowableBuffer(gl);
     this.colors = createGrowableBuffer(gl);
     this.saturations = createGrowableBuffer(gl);
@@ -23,28 +19,16 @@ export class HeatmapWebGLProgram {
   }
   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 linked = linkProgram(gl, heatmapVertexShaderSource, fragmentShaderSource);
+    this.shaders.push(...linked.shaders);
+    const program = linked.program;
     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);
+    bindQuadBuffer(gl, program, this.quadBuffer);
+    bindInstancedAttribute(gl, program, 'a_center', this.centers, 2);
     /* 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);
+    bindInstancedAttribute(gl, program, 'a_color', this.colors, 4, gl.UNSIGNED_BYTE, true);
+    bindInstancedAttribute(gl, program, 'a_saturation', this.saturations, 1);
     gl.bindVertexArray(null);
     return {
       program,
@@ -113,13 +97,4 @@ export class HeatmapWebGLProgram {
     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/shaders.d.mts

@@ -1,3 +1,3 @@
-export declare const heatmapVertexShaderSource = "\n    precision mediump float;\n    \n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec4 a_color;\n    attribute float a_saturation;\n    \n    varying vec4 v_color;\n    varying vec2 v_pos;\n    \n    uniform vec2 u_dimensions;\n    uniform vec2 u_resolution;\n    \n    // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/\n    vec3 adjust_saturation(vec3 color, float value) {\n      // https://www.w3.org/TR/WCAG22/#dfn-relative-luminance\n      const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);\n      vec3 grayscale = vec3(dot(color, luminosityFactor));\n    \n      return mix(grayscale, color, 1.0 + value);\n    }\n    \n    void main() {\n      // Convert from pixels to clip space (-1 to 1)\n      vec2 position = a_center + a_position * u_dimensions / 2.0;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n      \n      v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);\n      v_pos = a_position * u_dimensions / 2.0;\n    }\n  ";
-export declare const heatmapFragmentShaderSourceNoBorderRadius = "\n    precision mediump float;\n    \n    varying vec4 v_color;\n    \n    void main() {\n      gl_FragColor = v_color;\n    }\n  ";
-export declare const heatmapFragmentShaderSourceWithBorderRadius = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n\n    uniform vec2 u_dimensions;\n    uniform float u_borderRadius;\n\n    float roundedBoxSDF(vec2 pos, vec2 half_size, float radius) {\n      vec2 q = abs(pos) - half_size + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n\n    void main() {\n      // Calculate distance from rounded rectangle edge\n      float dist = roundedBoxSDF(v_pos, u_dimensions / 2.0, u_borderRadius);\n      \n      // Create smooth alpha based on distance\n      float alpha = 1.0 - smoothstep(-0.5, 0.5, dist);\n      \n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";
+export declare const heatmapVertexShaderSource = "\n    precision mediump float;\n    \n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec4 a_color;\n    attribute float a_saturation;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n\n    uniform vec2 u_dimensions;\n    uniform vec2 u_resolution;\n    // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/\n    vec3 adjust_saturation(vec3 color, float value) {\n      // https://www.w3.org/TR/WCAG22/#dfn-relative-luminance\n      const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);\n      vec3 grayscale = vec3(dot(color, luminosityFactor));\n\n      return mix(grayscale, color, 1.0 + value);\n    }\n\n    void main() {\n      // Convert from pixels to clip space (-1 to 1)\n      vec2 position = a_center + a_position * u_dimensions / 2.0;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n\n      v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);\n      v_pos = a_position * u_dimensions / 2.0;\n    }\n  ";
+export declare const heatmapFragmentShaderSourceNoBorderRadius = "\n    precision mediump float;\n\n    varying vec4 v_color;\n\n    void main() {\n      gl_FragColor = v_color;\n    }\n  ";
+export declare const heatmapFragmentShaderSourceWithBorderRadius = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n\n    uniform vec2 u_dimensions;\n    uniform float u_borderRadius;\n\n    \n    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {\n      float radius;\n      if (pos.x < 0.0) {\n        radius = pos.y < 0.0 ? r.x : r.w;\n      } else {\n        radius = pos.y < 0.0 ? r.y : r.z;\n      }\n\n      vec2 q = abs(pos) - halfSize + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n  \n\n    void main() {\n      // Calculate distance from rounded rectangle edge\n      float dist = roundedBoxSDF(v_pos, u_dimensions / 2.0, vec4(u_borderRadius));\n\n      // Create smooth alpha based on distance\n      float alpha = 1.0 - smoothstep(-0.5, 0.5, dist);\n\n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";

package/HeatmapPremium/webgl/shaders.d.ts

@@ -1,3 +1,3 @@
-export declare const heatmapVertexShaderSource = "\n    precision mediump float;\n    \n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec4 a_color;\n    attribute float a_saturation;\n    \n    varying vec4 v_color;\n    varying vec2 v_pos;\n    \n    uniform vec2 u_dimensions;\n    uniform vec2 u_resolution;\n    \n    // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/\n    vec3 adjust_saturation(vec3 color, float value) {\n      // https://www.w3.org/TR/WCAG22/#dfn-relative-luminance\n      const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);\n      vec3 grayscale = vec3(dot(color, luminosityFactor));\n    \n      return mix(grayscale, color, 1.0 + value);\n    }\n    \n    void main() {\n      // Convert from pixels to clip space (-1 to 1)\n      vec2 position = a_center + a_position * u_dimensions / 2.0;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n      \n      v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);\n      v_pos = a_position * u_dimensions / 2.0;\n    }\n  ";
-export declare const heatmapFragmentShaderSourceNoBorderRadius = "\n    precision mediump float;\n    \n    varying vec4 v_color;\n    \n    void main() {\n      gl_FragColor = v_color;\n    }\n  ";
-export declare const heatmapFragmentShaderSourceWithBorderRadius = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n\n    uniform vec2 u_dimensions;\n    uniform float u_borderRadius;\n\n    float roundedBoxSDF(vec2 pos, vec2 half_size, float radius) {\n      vec2 q = abs(pos) - half_size + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n\n    void main() {\n      // Calculate distance from rounded rectangle edge\n      float dist = roundedBoxSDF(v_pos, u_dimensions / 2.0, u_borderRadius);\n      \n      // Create smooth alpha based on distance\n      float alpha = 1.0 - smoothstep(-0.5, 0.5, dist);\n      \n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";
+export declare const heatmapVertexShaderSource = "\n    precision mediump float;\n    \n    attribute vec2 a_position;\n    attribute vec2 a_center;\n    attribute vec4 a_color;\n    attribute float a_saturation;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n\n    uniform vec2 u_dimensions;\n    uniform vec2 u_resolution;\n    // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/\n    vec3 adjust_saturation(vec3 color, float value) {\n      // https://www.w3.org/TR/WCAG22/#dfn-relative-luminance\n      const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);\n      vec3 grayscale = vec3(dot(color, luminosityFactor));\n\n      return mix(grayscale, color, 1.0 + value);\n    }\n\n    void main() {\n      // Convert from pixels to clip space (-1 to 1)\n      vec2 position = a_center + a_position * u_dimensions / 2.0;\n      vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;\n      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n\n      v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);\n      v_pos = a_position * u_dimensions / 2.0;\n    }\n  ";
+export declare const heatmapFragmentShaderSourceNoBorderRadius = "\n    precision mediump float;\n\n    varying vec4 v_color;\n\n    void main() {\n      gl_FragColor = v_color;\n    }\n  ";
+export declare const heatmapFragmentShaderSourceWithBorderRadius = "\n    precision mediump float;\n\n    varying vec4 v_color;\n    varying vec2 v_pos;\n\n    uniform vec2 u_dimensions;\n    uniform float u_borderRadius;\n\n    \n    float roundedBoxSDF(vec2 pos, vec2 halfSize, vec4 r) {\n      float radius;\n      if (pos.x < 0.0) {\n        radius = pos.y < 0.0 ? r.x : r.w;\n      } else {\n        radius = pos.y < 0.0 ? r.y : r.z;\n      }\n\n      vec2 q = abs(pos) - halfSize + radius;\n      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;\n    }\n  \n\n    void main() {\n      // Calculate distance from rounded rectangle edge\n      float dist = roundedBoxSDF(v_pos, u_dimensions / 2.0, vec4(u_borderRadius));\n\n      // Create smooth alpha based on distance\n      float alpha = 1.0 - smoothstep(-0.5, 0.5, dist);\n\n      gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);\n    }\n  ";

package/HeatmapPremium/webgl/shaders.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.heatmapVertexShaderSource = exports.heatmapFragmentShaderSourceWithBorderRadius = exports.heatmapFragmentShaderSourceNoBorderRadius = void 0;
+var _glsl = require("../../utils/webgl/glsl");
 // language=Glsl
 const heatmapVertexShaderSource = exports.heatmapVertexShaderSource = /* glsl */`
     precision mediump float;
@@ -12,28 +13,27 @@ const heatmapVertexShaderSource = exports.heatmapVertexShaderSource = /* glsl */
     attribute vec2 a_center;
     attribute vec4 a_color;
     attribute float a_saturation;
-    
+
     varying vec4 v_color;
     varying vec2 v_pos;
-    
+
     uniform vec2 u_dimensions;
     uniform vec2 u_resolution;
-    
     // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/
     vec3 adjust_saturation(vec3 color, float value) {
       // https://www.w3.org/TR/WCAG22/#dfn-relative-luminance
       const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);
       vec3 grayscale = vec3(dot(color, luminosityFactor));
-    
+
       return mix(grayscale, color, 1.0 + value);
     }
-    
+
     void main() {
       // Convert from pixels to clip space (-1 to 1)
       vec2 position = a_center + a_position * u_dimensions / 2.0;
       vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;
       gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
-      
+
       v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);
       v_pos = a_position * u_dimensions / 2.0;
     }
@@ -42,9 +42,9 @@ const heatmapVertexShaderSource = exports.heatmapVertexShaderSource = /* glsl */
 // language=Glsl
 const heatmapFragmentShaderSourceNoBorderRadius = exports.heatmapFragmentShaderSourceNoBorderRadius = /* glsl */`
     precision mediump float;
-    
+
     varying vec4 v_color;
-    
+
     void main() {
       gl_FragColor = v_color;
     }
@@ -60,18 +60,15 @@ const heatmapFragmentShaderSourceWithBorderRadius = exports.heatmapFragmentShade
     uniform vec2 u_dimensions;
     uniform float u_borderRadius;
 
-    float roundedBoxSDF(vec2 pos, vec2 half_size, float radius) {
-      vec2 q = abs(pos) - half_size + radius;
-      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;
-    }
+    ${_glsl.ROUNDED_BOX_SDF_GLSL}
 
     void main() {
       // Calculate distance from rounded rectangle edge
-      float dist = roundedBoxSDF(v_pos, u_dimensions / 2.0, u_borderRadius);
-      
+      float dist = roundedBoxSDF(v_pos, u_dimensions / 2.0, vec4(u_borderRadius));
+
       // Create smooth alpha based on distance
       float alpha = 1.0 - smoothstep(-0.5, 0.5, dist);
-      
+
       gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);
     }
   `;

package/HeatmapPremium/webgl/shaders.mjs

@@ -1,3 +1,5 @@
+import { ROUNDED_BOX_SDF_GLSL } from "../../utils/webgl/glsl.mjs";
+
 // language=Glsl
 export const heatmapVertexShaderSource = /* glsl */`
     precision mediump float;
@@ -6,28 +8,27 @@ export const heatmapVertexShaderSource = /* glsl */`
     attribute vec2 a_center;
     attribute vec4 a_color;
     attribute float a_saturation;
-    
+
     varying vec4 v_color;
     varying vec2 v_pos;
-    
+
     uniform vec2 u_dimensions;
     uniform vec2 u_resolution;
-    
     // https://tsev.dev/posts/2020-06-19-colour-correction-with-webgl/
     vec3 adjust_saturation(vec3 color, float value) {
       // https://www.w3.org/TR/WCAG22/#dfn-relative-luminance
       const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);
       vec3 grayscale = vec3(dot(color, luminosityFactor));
-    
+
       return mix(grayscale, color, 1.0 + value);
     }
-    
+
     void main() {
       // Convert from pixels to clip space (-1 to 1)
       vec2 position = a_center + a_position * u_dimensions / 2.0;
       vec2 clipSpace = (position / u_resolution) * 2.0 - 1.0;
       gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
-      
+
       v_color = vec4(adjust_saturation(a_color.rgb, a_saturation), 1.0);
       v_pos = a_position * u_dimensions / 2.0;
     }
@@ -36,9 +37,9 @@ export const heatmapVertexShaderSource = /* glsl */`
 // language=Glsl
 export const heatmapFragmentShaderSourceNoBorderRadius = /* glsl */`
     precision mediump float;
-    
+
     varying vec4 v_color;
-    
+
     void main() {
       gl_FragColor = v_color;
     }
@@ -54,18 +55,15 @@ export const heatmapFragmentShaderSourceWithBorderRadius = /* glsl */`
     uniform vec2 u_dimensions;
     uniform float u_borderRadius;
 
-    float roundedBoxSDF(vec2 pos, vec2 half_size, float radius) {
-      vec2 q = abs(pos) - half_size + radius;
-      return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;
-    }
+    ${ROUNDED_BOX_SDF_GLSL}
 
     void main() {
       // Calculate distance from rounded rectangle edge
-      float dist = roundedBoxSDF(v_pos, u_dimensions / 2.0, u_borderRadius);
-      
+      float dist = roundedBoxSDF(v_pos, u_dimensions / 2.0, vec4(u_borderRadius));
+
       // Create smooth alpha based on distance
       float alpha = 1.0 - smoothstep(-0.5, 0.5, dist);
-      
+
       gl_FragColor = vec4(v_color.rgb, v_color.a * alpha);
     }
   `;

package/HeatmapPremium/webgl/useHeatmapPlotData.js

@@ -10,15 +10,10 @@ 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");
+var _utils = require("../../utils/webgl/utils");
 /* 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();
@@ -52,7 +47,7 @@ function useHeatmapPlotData(drawingArea, series, xScale, yScale) {
   const saturationsPoolRef = React.useRef(null);
   const saturations = React.useMemo(() => {
     const n = series.data.length;
-    const pool = ensurePoolFloat32(saturationsPoolRef.current ?? undefined, n);
+    const pool = (0, _utils.ensurePool)(saturationsPoolRef.current, n, Float32Array);
     saturationsPoolRef.current = pool;
     for (let dataIndex = 0; dataIndex < n; dataIndex += 1) {
       const item = series.data[dataIndex];
@@ -79,7 +74,7 @@ function useHeatmapPlotData(drawingArea, series, xScale, yScale) {
   const centersPoolRef = React.useRef(null);
   const centers = React.useMemo(() => {
     const n = series.data.length;
-    const pool = ensurePoolFloat32(centersPoolRef.current ?? undefined, n * 2);
+    const pool = (0, _utils.ensurePool)(centersPoolRef.current, n * 2, Float32Array);
     centersPoolRef.current = pool;
     const left = drawingArea.left;
     const top = drawingArea.top;

package/HeatmapPremium/webgl/useHeatmapPlotData.mjs

@@ -4,16 +4,11 @@ import * as React from 'react';
 import { useZColorScale } from '@mui/x-charts/hooks';
 import { selectorChartsHighlightStateCallback, useStore } from '@mui/x-charts/internals';
 import { parseColor } from "../../utils/webgl/parseColor.mjs";
+import { ensurePool } from "../../utils/webgl/utils.mjs";
 
 /* 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);
-}
 export function useHeatmapPlotData(drawingArea, series, xScale, yScale) {
   const width = xScale.bandwidth();
   const height = yScale.bandwidth();
@@ -47,7 +42,7 @@ export function useHeatmapPlotData(drawingArea, series, xScale, yScale) {
   const saturationsPoolRef = React.useRef(null);
   const saturations = React.useMemo(() => {
     const n = series.data.length;
-    const pool = ensurePoolFloat32(saturationsPoolRef.current ?? undefined, n);
+    const pool = ensurePool(saturationsPoolRef.current, n, Float32Array);
     saturationsPoolRef.current = pool;
     for (let dataIndex = 0; dataIndex < n; dataIndex += 1) {
       const item = series.data[dataIndex];
@@ -74,7 +69,7 @@ export function useHeatmapPlotData(drawingArea, series, xScale, yScale) {
   const centersPoolRef = React.useRef(null);
   const centers = React.useMemo(() => {
     const n = series.data.length;
-    const pool = ensurePoolFloat32(centersPoolRef.current ?? undefined, n * 2);
+    const pool = ensurePool(centersPoolRef.current, n * 2, Float32Array);
     centersPoolRef.current = pool;
     const left = drawingArea.left;
     const top = drawingArea.top;

package/Map/FocusedMapShape.js

@@ -42,7 +42,11 @@ function FocusedMapShape() {
   if (!seriesItem || seriesItem.hidden) {
     return null;
   }
-  const dataItem = seriesItem.data[focusedItem.dataIndex];
+  const dataIndex = seriesItem.lookupByName.get(focusedItem.name);
+  if (dataIndex === undefined) {
+    return null;
+  }
+  const dataItem = seriesItem.data[dataIndex];
   if (!dataItem || dataItem.hidden) {
     return null;
   }

package/Map/FocusedMapShape.mjs

@@ -36,7 +36,11 @@ export function FocusedMapShape() {
   if (!seriesItem || seriesItem.hidden) {
     return null;
   }
-  const dataItem = seriesItem.data[focusedItem.dataIndex];
+  const dataIndex = seriesItem.lookupByName.get(focusedItem.name);
+  if (dataIndex === undefined) {
+    return null;
+  }
+  const dataItem = seriesItem.data[dataIndex];
   if (!dataItem || dataItem.hidden) {
     return null;
   }

package/Map/MapImagePlot.d.mts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+export interface MapImagePlotProps extends React.SVGProps<SVGImageElement> {
+  /**
+   * URL of the image to render as the base map.
+   * Must be same-origin (or CORS-enabled) so it can be reprojected on a canvas.
+   */
+  href?: string;
+  /**
+   * Geographic extent the source image covers, as `[[west, south], [east, north]]`.
+   * The image is assumed to be in the equirectangular (plate carrée) projection.
+   * If `west` is greater than `east`, the range wraps across the antimeridian.
+   * @default [[-180, -90], [180, 90]]
+   */
+  imageBounds?: [[number, number], [number, number]];
+  /**
+   * Called after each reprojection.
+   * @param {string | null} dataUrl The reprojected raster as a data URL, or `null` when it could not be produced.
+   */
+  onReady?: (dataUrl: string | null) => void;
+}
+/**
+ * Renders a raster base map (for example a satellite mosaic) under the series,
+ * reprojected to match the chart's `projection` so it follows the geography
+ * instead of being a flat rectangle. Pixels outside the projection's visible
+ * footprint are left transparent.
+ *
+ * The source image is loaded only when `href` changes; changing the projection or
+ * resizing reuses the decoded image and only re-runs the (synchronous) canvas
+ * reprojection.
+ *
+ * The source image is assumed to be equirectangular; use `imageBounds` when it
+ * does not cover the whole globe. Any other SVG image attribute is forwarded to
+ * the underlying element.
+ */
+declare function MapImagePlot(props: MapImagePlotProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace MapImagePlot {
+  var propTypes: any;
+}
+export { MapImagePlot };

package/Map/MapImagePlot.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+export interface MapImagePlotProps extends React.SVGProps<SVGImageElement> {
+  /**
+   * URL of the image to render as the base map.
+   * Must be same-origin (or CORS-enabled) so it can be reprojected on a canvas.
+   */
+  href?: string;
+  /**
+   * Geographic extent the source image covers, as `[[west, south], [east, north]]`.
+   * The image is assumed to be in the equirectangular (plate carrée) projection.
+   * If `west` is greater than `east`, the range wraps across the antimeridian.
+   * @default [[-180, -90], [180, 90]]
+   */
+  imageBounds?: [[number, number], [number, number]];
+  /**
+   * Called after each reprojection.
+   * @param {string | null} dataUrl The reprojected raster as a data URL, or `null` when it could not be produced.
+   */
+  onReady?: (dataUrl: string | null) => void;
+}
+/**
+ * Renders a raster base map (for example a satellite mosaic) under the series,
+ * reprojected to match the chart's `projection` so it follows the geography
+ * instead of being a flat rectangle. Pixels outside the projection's visible
+ * footprint are left transparent.
+ *
+ * The source image is loaded only when `href` changes; changing the projection or
+ * resizing reuses the decoded image and only re-runs the (synchronous) canvas
+ * reprojection.
+ *
+ * The source image is assumed to be equirectangular; use `imageBounds` when it
+ * does not cover the whole globe. Any other SVG image attribute is forwarded to
+ * the underlying element.
+ */
+declare function MapImagePlot(props: MapImagePlotProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace MapImagePlot {
+  var propTypes: any;
+}
+export { MapImagePlot };

package/Map/MapImagePlot.js

@@ -0,0 +1,138 @@
+"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
+});
+exports.MapImagePlot = MapImagePlot;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hooks = require("@mui/x-charts/hooks");
+var _useGeoPath = require("../hooks/useGeoPath");
+var _reprojectEquirectangularImage = require("./reprojectEquirectangularImage");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["href", "imageBounds", "onReady"];
+const FULL_GLOBE = [[-180, -90], [180, 90]];
+/**
+ * Renders a raster base map (for example a satellite mosaic) under the series,
+ * reprojected to match the chart's `projection` so it follows the geography
+ * instead of being a flat rectangle. Pixels outside the projection's visible
+ * footprint are left transparent.
+ *
+ * The source image is loaded only when `href` changes; changing the projection or
+ * resizing reuses the decoded image and only re-runs the (synchronous) canvas
+ * reprojection.
+ *
+ * The source image is assumed to be equirectangular; use `imageBounds` when it
+ * does not cover the whole globe. Any other SVG image attribute is forwarded to
+ * the underlying element.
+ */
+function MapImagePlot(props) {
+  const {
+      href,
+      imageBounds,
+      onReady
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const path = (0, _useGeoPath.useGeoPath)();
+  const {
+    left,
+    top,
+    width,
+    height
+  } = (0, _hooks.useDrawingArea)();
+  const [image, setImage] = React.useState(null);
+  const [dataUrl, setDataUrl] = React.useState(null);
+  const projection = path?.projection?.();
+  const [[west, south], [east, north]] = imageBounds ?? FULL_GLOBE;
+
+  // Keep the latest `onReady` without making it a reprojection dependency.
+  const onReadyRef = React.useRef(onReady);
+  React.useEffect(() => {
+    onReadyRef.current = onReady;
+  });
+
+  // Load (decode) the source image only when `href` changes. Clearing the image
+  // first hides the now-stale raster until the new one is ready.
+  React.useEffect(() => {
+    setImage(null);
+    if (!href) {
+      return undefined;
+    }
+    let cancelled = false;
+    const nextImage = new Image();
+    nextImage.crossOrigin = 'anonymous';
+    nextImage.onload = () => {
+      if (!cancelled) {
+        setImage(nextImage);
+      }
+    };
+    nextImage.src = href;
+    return () => {
+      cancelled = true;
+    };
+  }, [href]);
+
+  // Reproject whenever the decoded image, projection, drawing area, or bounds
+  // change. This is synchronous, so switching projection does not reload `href`.
+  React.useEffect(() => {
+    if (!image || !projection || typeof projection.invert !== 'function' || width <= 0 || height <= 0) {
+      setDataUrl(null);
+      onReadyRef.current?.(null);
+      return;
+    }
+    const url = (0, _reprojectEquirectangularImage.reprojectEquirectangularImage)({
+      image,
+      projection,
+      area: {
+        left,
+        top,
+        width,
+        height
+      },
+      imageBounds: [[west, south], [east, north]]
+    });
+    setDataUrl(url);
+    onReadyRef.current?.(url);
+  }, [image, projection, left, top, width, height, west, south, east, north]);
+  if (!dataUrl) {
+    return null;
+  }
+
+  // Spread first so forwarded attributes can't override the computed geometry/href
+  // and break the alignment with the projection.
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("image", (0, _extends2.default)({}, other, {
+    href: dataUrl,
+    x: left,
+    y: top,
+    width: width,
+    height: height
+  }));
+}
+process.env.NODE_ENV !== "production" ? MapImagePlot.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * URL of the image to render as the base map.
+   * Must be same-origin (or CORS-enabled) so it can be reprojected on a canvas.
+   */
+  href: _propTypes.default.string,
+  /**
+   * Geographic extent the source image covers, as `[[west, south], [east, north]]`.
+   * The image is assumed to be in the equirectangular (plate carrée) projection.
+   * If `west` is greater than `east`, the range wraps across the antimeridian.
+   * @default [[-180, -90], [180, 90]]
+   */
+  imageBounds: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.number.isRequired).isRequired),
+  /**
+   * Called after each reprojection.
+   * @param {string | null} dataUrl The reprojected raster as a data URL, or `null` when it could not be produced.
+   */
+  onReady: _propTypes.default.func
+} : void 0;