@mui/x-charts 9.6.0 → 9.7.0

package/internals/plugins/featurePlugins/useProgressiveRendering/useProgressiveRendering.mjs

@@ -3,35 +3,27 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { sameSeriesIds, selectorProgressivePlans, selectorProgressiveTotalRounds, selectorShouldUseProgressiveRenderer } from "./useProgressiveRendering.selectors.mjs";
+import { sameSeriesIds, selectorProgressivePlans, selectorProgressiveRevealedRounds, selectorProgressiveTotalRounds, selectorShouldUseProgressiveRenderer } from "./useProgressiveRendering.selectors.mjs";
+import { selectorChartZoomIsInteracting } from "../useChartCartesianAxis/index.mjs";
 const EMPTY_PLANS = new Map();
 
-/**
- * How many *rounds* are revealed per reveal tick once the render data is ready.
- * A round reveals one batch in every series simultaneously, so the chart looks
- * complete from the first paint rather than appearing series-by-series. Lower
- * spreads the paint over more ticks (smoother, more visibly progressive);
- * higher finishes sooner.
- */
+/** Rounds revealed per tick. One round adds a batch to every series at once. */
 const REVEAL_ROUNDS_PER_FRAME = 1;
 
-/**
- * How many animation frames are skipped between two reveal ticks. `0` reveals
- * on every frame; `1` reveals every other frame, leaving the browser an idle
- * frame for layout, paint and input handling between commits. Higher values
- * give the browser more CPU headroom at the cost of a slower paint.
- */
+/** Frames skipped between reveal ticks. `0` = every frame; higher = more headroom. */
 const REVEAL_FRAMES_SKIPPED = 0;
 
+/** Rounds kept visible during a zoom/pan interaction (first level only). */
+const INTERACTION_REVEALED_ROUNDS = 1;
+
+/** Settle delay before the reveal resumes after an interaction ends (ms). */
+const RESUME_AFTER_INTERACTION_DELAY = 200;
+
 /**
- * Chart-wide progressive rendering coordinator.
- *
- * Lives on the chart store, so every renderer composed into the same chart
- * (e.g. several `ScatterPlot` instances under one `ChartsContainer`) shares
- * the same scheduler. Each renderer registers a plan via
- * `setProgressivePlan(plotId, plan)`; the plugin aggregates them, computes a
- * single per-tick budget, and ramps a global "rounds" counter — one round
- * adds one batch in every registered series at once.
+ * Chart-wide progressive rendering coordinator. Lives on the store so every
+ * renderer in the chart shares one scheduler: each registers a plan via
+ * `registerProgressivePlan`, and the plugin ramps a global "rounds" counter,
+ * one round adding a batch to every series at once.
  */
 export const useProgressiveRendering = ({
   store
@@ -62,11 +54,24 @@ export const useProgressiveRendering = ({
     };
   });
   const plans = store.use(selectorProgressivePlans) ?? EMPTY_PLANS;
+  const isZoomInteracting = store.use(selectorChartZoomIsInteracting);
   React.useEffect(() => {
     const startTotal = selectorProgressiveTotalRounds(store.state);
     if (startTotal === 0) {
       return undefined;
     }
+
+    // While interacting, keep only the first level and pause; resets the wave
+    // so it restarts from the first level once the interaction ends.
+    if (isZoomInteracting) {
+      const target = Math.min(INTERACTION_REVEALED_ROUNDS, startTotal);
+      if (selectorProgressiveRevealedRounds(store.state) !== target) {
+        store.set('progressiveRendering', _extends({}, store.state.progressiveRendering, {
+          revealedRounds: target
+        }));
+      }
+      return undefined;
+    }
     if (typeof requestAnimationFrame !== 'function') {
       store.set('progressiveRendering', _extends({}, store.state.progressiveRendering, {
         revealedRounds: startTotal
@@ -74,11 +79,12 @@ export const useProgressiveRendering = ({
       return undefined;
     }
     let frame = 0;
+    let resumeTimeout;
     let cancelled = false;
-    // Tracked in a closure variable, not derived inside a state updater (those
-    // must be pure and StrictMode double-invokes them, which would schedule
-    // the animation-frame chain twice).
-    let revealed = 0;
+    // Resume from the rounds already revealed (keeps the first level on screen).
+    // Closure var, not a state-updater derivation: StrictMode double-invokes
+    // those, scheduling the frame chain twice.
+    let revealed = selectorProgressiveRevealedRounds(store.state);
     function scheduleNext() {
       let remaining = REVEAL_FRAMES_SKIPPED;
       const tick = () => {
@@ -107,12 +113,27 @@ export const useProgressiveRendering = ({
         scheduleNext();
       }
     }
-    frame = requestAnimationFrame(step);
+    if (revealed >= startTotal) {
+      return undefined;
+    }
+
+    // `revealed > 0` means resuming after an interaction: wait the settle delay.
+    // Initial paint (`revealed === 0`) starts immediately.
+    if (revealed > 0) {
+      resumeTimeout = setTimeout(() => {
+        frame = requestAnimationFrame(step);
+      }, RESUME_AFTER_INTERACTION_DELAY);
+    } else {
+      frame = requestAnimationFrame(step);
+    }
     return () => {
       cancelled = true;
       cancelAnimationFrame(frame);
+      if (resumeTimeout !== undefined) {
+        clearTimeout(resumeTimeout);
+      }
     };
-  }, [plans, store]);
+  }, [plans, isZoomInteracting, store]);
   return {
     instance: {
       registerProgressivePlan

package/internals/plugins/featurePlugins/useProgressiveRendering/useProgressiveRendering.selectors.d.mts

@@ -1,4 +1,4 @@
-import { type SeriesId } from "../../../../models/seriesType/common.mjs";
+import type { SeriesId } from "../../../../models/seriesType/common.mjs";
 import type { RendererType } from "../../../../ScatterChart/index.mjs";
 /** Map of registered plots → their set of series ids. */
 export declare const selectorProgressivePlans: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useProgressiveRendering.types.mjs").UseProgressiveRenderingState> & {
@@ -9,10 +9,9 @@ export declare const selectorProgressiveRevealedRounds: (args_0: import("../../c
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => number;
 /**
- * Aggregated view of every registered plan: the per-series batch counts, the
- * total number of rounds, and the per-series batch size (so every consumer
- * sizes its batches the same way). Point counts are read straight from the
- * processed series rather than carried by the registration.
+ * Aggregate of every plan: per-series batch counts, total rounds, and batch
+ * size (so every consumer sizes batches the same). Point counts read from the
+ * processed series, not the registration.
  */
 export declare const selectorProgressiveAggregate: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useProgressiveRendering.types.mjs").UseProgressiveRenderingState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
@@ -28,9 +27,13 @@ export declare const selectorProgressiveTotalRounds: (args_0: import("../../core
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;
 }) => number;
 /**
- * How many of `seriesId`'s own batches are revealed so far. Capped at that
- * series' total batch count, so series with fewer batches simply stop
- * progressing while longer ones keep filling in.
+ * Revealed batch count for a series: `revealed` rounds normally, clamped to the
+ * first batch while interacting, never above `total`.
+ */
+export declare function getRevealedBatchCount(total: number, revealed: number, isInteracting: boolean | undefined): number;
+/**
+ * How many of `seriesId`'s batches are revealed, capped at its total batch
+ * count. Clamped to the first batch while interacting.
  */
 export declare const selectorProgressiveSeriesRevealedBatches: (args_0: import("../../corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof import("../../../index.mjs").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("../../../index.mjs").UseChartInteractionListenerState & Partial<import("./useProgressiveRendering.types.mjs").UseProgressiveRenderingState> & {
   cacheKey: import("../../models/index.mjs").ChartStateCacheKey;

package/internals/plugins/featurePlugins/useProgressiveRendering/useProgressiveRendering.selectors.d.ts

@@ -1,4 +1,4 @@
-import { type SeriesId } from "../../../../models/seriesType/common.js";
+import type { SeriesId } from "../../../../models/seriesType/common.js";
 import type { RendererType } from "../../../../ScatterChart/index.js";
 /** Map of registered plots → their set of series ids. */
 export declare const selectorProgressivePlans: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useProgressiveRendering.types.js").UseProgressiveRenderingState> & {
@@ -9,10 +9,9 @@ export declare const selectorProgressiveRevealedRounds: (args_0: import("../../c
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number;
 /**
- * Aggregated view of every registered plan: the per-series batch counts, the
- * total number of rounds, and the per-series batch size (so every consumer
- * sizes its batches the same way). Point counts are read straight from the
- * processed series rather than carried by the registration.
+ * Aggregate of every plan: per-series batch counts, total rounds, and batch
+ * size (so every consumer sizes batches the same). Point counts read from the
+ * processed series, not the registration.
  */
 export declare const selectorProgressiveAggregate: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useProgressiveRendering.types.js").UseProgressiveRenderingState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -28,9 +27,13 @@ export declare const selectorProgressiveTotalRounds: (args_0: import("../../core
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 }) => number;
 /**
- * How many of `seriesId`'s own batches are revealed so far. Capped at that
- * series' total batch count, so series with fewer batches simply stop
- * progressing while longer ones keep filling in.
+ * Revealed batch count for a series: `revealed` rounds normally, clamped to the
+ * first batch while interacting, never above `total`.
+ */
+export declare function getRevealedBatchCount(total: number, revealed: number, isInteracting: boolean | undefined): number;
+/**
+ * How many of `seriesId`'s batches are revealed, capped at its total batch
+ * count. Clamped to the first batch while interacting.
  */
 export declare const selectorProgressiveSeriesRevealedBatches: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useProgressiveRendering.types.js").UseProgressiveRenderingState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/internals/plugins/featurePlugins/useProgressiveRendering/useProgressiveRendering.selectors.js

@@ -3,45 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getRevealedBatchCount = getRevealedBatchCount;
 exports.sameSeriesIds = sameSeriesIds;
 exports.selectorShouldUseProgressiveRenderer = exports.selectorProgressiveTotalRounds = exports.selectorProgressiveSeriesRevealedBatches = exports.selectorProgressiveRevealedRounds = exports.selectorProgressivePlans = exports.selectorProgressiveBatchSize = exports.selectorProgressiveAggregate = void 0;
 var _store = require("@mui/x-internals/store");
 var _useChartSeries = require("../../corePlugins/useChartSeries");
 var _useChartExperimentalFeature = require("../../corePlugins/useChartExperimentalFeature");
-/**
- * Total point count above which the auto (`renderer` unset) mode switches to
- * the progressive renderer. Below it the synchronous renderer is used, since
- * the progressive paint's overhead is not worth it for small datasets.
- */
+var _useChartCartesianAxis = require("../useChartCartesianAxis");
+/** Auto mode switches to the progressive renderer above this total point count. */
 const PROGRESSIVE_POINT_THRESHOLD = 20000;
 
-/**
- * Target number of reveal commits. Each commit repaints every already-painted
- * circle, so the total progressive wall time is roughly `(C + 1) / 2` times a
- * single synchronous render (where `C` is the number of commits). Targeting
- * `5` commits keeps the progressive paint at roughly 2–3× the sync render time.
- */
+/** Target reveal commits. Progressive wall time ≈ `(nb_commits + 1) / 2` × a sync render. */
 const TARGET_PROGRESSIVE_COMMITS = 5;
 
-/**
- * Lower bound for the per-tick reveal budget (total points across every
- * series). Prevents tiny commits whose React overhead would dominate.
- */
+/** Min per-tick reveal budget (total points). Avoids tiny React-bound commits. */
 const MIN_BATCH_TOTAL = 1000;
 
-/**
- * Upper bound for the per-tick reveal budget (total points across every
- * series). Prevents a single commit from blocking the main thread for too
- * long; very large datasets simply use more commits.
- */
+/** Max per-tick reveal budget (total points). Caps main-thread block per commit. */
 const MAX_BATCH_TOTAL = 10000;
 
 /**
- * Per-series points revealed per tick, derived from the total point count
- * across visible series and the number of visible series. The total per-tick
- * budget aims for {@link TARGET_PROGRESSIVE_COMMITS} commits, clamped by
- * {@link MIN_BATCH_TOTAL} / {@link MAX_BATCH_TOTAL}, then split evenly across
- * the visible series so every series progresses together.
+ * Per-series points per tick: total budget aims for
+ * {@link TARGET_PROGRESSIVE_COMMITS} commits, clamped by
+ * {@link MIN_BATCH_TOTAL}/{@link MAX_BATCH_TOTAL}, split evenly across series.
  */
 const getEffectiveBatchSize = (nSeries, totalPoints) => {
   const safeSeries = Math.max(1, nSeries);
@@ -72,10 +56,9 @@ function getSeriesPointCount(processedSeries, seriesId) {
 }
 
 /**
- * Aggregated view of every registered plan: the per-series batch counts, the
- * total number of rounds, and the per-series batch size (so every consumer
- * sizes its batches the same way). Point counts are read straight from the
- * processed series rather than carried by the registration.
+ * Aggregate of every plan: per-series batch counts, total rounds, and batch
+ * size (so every consumer sizes batches the same). Point counts read from the
+ * processed series, not the registration.
  */
 const selectorProgressiveAggregate = exports.selectorProgressiveAggregate = (0, _store.createSelectorMemoized)(selectorProgressivePlans, _useChartSeries.selectorChartSeriesProcessed, function selectorProgressiveAggregate(plans, processedSeries) {
   const nBatchesBySeries = new Map();
@@ -116,23 +99,29 @@ const selectorProgressiveBatchSize = exports.selectorProgressiveBatchSize = (0,
 const selectorProgressiveTotalRounds = exports.selectorProgressiveTotalRounds = (0, _store.createSelector)(selectorProgressiveAggregate, a => a.totalRounds);
 
 /**
- * How many of `seriesId`'s own batches are revealed so far. Capped at that
- * series' total batch count, so series with fewer batches simply stop
- * progressing while longer ones keep filling in.
+ * Revealed batch count for a series: `revealed` rounds normally, clamped to the
+ * first batch while interacting, never above `total`.
+ */
+function getRevealedBatchCount(total, revealed, isInteracting) {
+  const effectiveRevealed = isInteracting ? 1 : revealed;
+  return Math.min(effectiveRevealed, total);
+}
+
+/**
+ * How many of `seriesId`'s batches are revealed, capped at its total batch
+ * count. Clamped to the first batch while interacting.
  */
-const selectorProgressiveSeriesRevealedBatches = exports.selectorProgressiveSeriesRevealedBatches = (0, _store.createSelector)(selectorProgressiveAggregate, selectorProgressiveRevealedRounds, function selectorProgressiveSeriesRevealedBatches(agg, revealed, seriesId) {
-  return Math.min(revealed, agg.nBatchesBySeries.get(seriesId) ?? 0);
+const selectorProgressiveSeriesRevealedBatches = exports.selectorProgressiveSeriesRevealedBatches = (0, _store.createSelector)(selectorProgressiveAggregate, selectorProgressiveRevealedRounds, _useChartCartesianAxis.selectorChartZoomIsInteracting, function selectorProgressiveSeriesRevealedBatches(agg, revealed, isInteracting, seriesId) {
+  const total = agg.nBatchesBySeries.get(seriesId) ?? 0;
+  return getRevealedBatchCount(total, revealed, isInteracting);
 });
 
 /**
- * Whether `seriesIds` should be rendered progressively given the requested
- * `renderer`:
- * - `svg-single` / `svg-batch`: never (those are non-progressive renderers).
+ * Whether `seriesIds` render progressively:
+ * - `svg-single`/`svg-batch`: never.
  * - `svg-progressive`: always.
- * - unset (auto): only when the `progressiveRendering` experimental feature is
- *   enabled and the total point count is above
- *   {@link PROGRESSIVE_POINT_THRESHOLD}. The flag keeps the auto behavior
- *   opt-in so the default (`svg-single`) stays non-breaking.
+ * - unset (auto): only when the experimental feature is on and total points
+ *   exceed {@link PROGRESSIVE_POINT_THRESHOLD}.
  */
 const selectorProgressiveRenderingEnabled = state => (0, _useChartExperimentalFeature.selectorChartExperimentalFeaturesState)(state, 'progressiveRendering');
 const selectorShouldUseProgressiveRenderer = exports.selectorShouldUseProgressiveRenderer = (0, _store.createSelector)(_useChartSeries.selectorChartSeriesProcessed, selectorProgressiveRenderingEnabled, (processedSeries, progressiveRenderingEnabled, seriesIds, renderer) => {

package/internals/plugins/featurePlugins/useProgressiveRendering/useProgressiveRendering.selectors.mjs

@@ -1,40 +1,23 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
 import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.mjs";
 import { selectorChartExperimentalFeaturesState } from "../../corePlugins/useChartExperimentalFeature/index.mjs";
-/**
- * Total point count above which the auto (`renderer` unset) mode switches to
- * the progressive renderer. Below it the synchronous renderer is used, since
- * the progressive paint's overhead is not worth it for small datasets.
- */
+import { selectorChartZoomIsInteracting } from "../useChartCartesianAxis/index.mjs";
+/** Auto mode switches to the progressive renderer above this total point count. */
 const PROGRESSIVE_POINT_THRESHOLD = 20000;
 
-/**
- * Target number of reveal commits. Each commit repaints every already-painted
- * circle, so the total progressive wall time is roughly `(C + 1) / 2` times a
- * single synchronous render (where `C` is the number of commits). Targeting
- * `5` commits keeps the progressive paint at roughly 2–3× the sync render time.
- */
+/** Target reveal commits. Progressive wall time ≈ `(nb_commits + 1) / 2` × a sync render. */
 const TARGET_PROGRESSIVE_COMMITS = 5;
 
-/**
- * Lower bound for the per-tick reveal budget (total points across every
- * series). Prevents tiny commits whose React overhead would dominate.
- */
+/** Min per-tick reveal budget (total points). Avoids tiny React-bound commits. */
 const MIN_BATCH_TOTAL = 1000;
 
-/**
- * Upper bound for the per-tick reveal budget (total points across every
- * series). Prevents a single commit from blocking the main thread for too
- * long; very large datasets simply use more commits.
- */
+/** Max per-tick reveal budget (total points). Caps main-thread block per commit. */
 const MAX_BATCH_TOTAL = 10000;
 
 /**
- * Per-series points revealed per tick, derived from the total point count
- * across visible series and the number of visible series. The total per-tick
- * budget aims for {@link TARGET_PROGRESSIVE_COMMITS} commits, clamped by
- * {@link MIN_BATCH_TOTAL} / {@link MAX_BATCH_TOTAL}, then split evenly across
- * the visible series so every series progresses together.
+ * Per-series points per tick: total budget aims for
+ * {@link TARGET_PROGRESSIVE_COMMITS} commits, clamped by
+ * {@link MIN_BATCH_TOTAL}/{@link MAX_BATCH_TOTAL}, split evenly across series.
  */
 const getEffectiveBatchSize = (nSeries, totalPoints) => {
   const safeSeries = Math.max(1, nSeries);
@@ -65,10 +48,9 @@ function getSeriesPointCount(processedSeries, seriesId) {
 }
 
 /**
- * Aggregated view of every registered plan: the per-series batch counts, the
- * total number of rounds, and the per-series batch size (so every consumer
- * sizes its batches the same way). Point counts are read straight from the
- * processed series rather than carried by the registration.
+ * Aggregate of every plan: per-series batch counts, total rounds, and batch
+ * size (so every consumer sizes batches the same). Point counts read from the
+ * processed series, not the registration.
  */
 export const selectorProgressiveAggregate = createSelectorMemoized(selectorProgressivePlans, selectorChartSeriesProcessed, function selectorProgressiveAggregate(plans, processedSeries) {
   const nBatchesBySeries = new Map();
@@ -109,23 +91,29 @@ export const selectorProgressiveBatchSize = createSelector(selectorProgressiveAg
 export const selectorProgressiveTotalRounds = createSelector(selectorProgressiveAggregate, a => a.totalRounds);
 
 /**
- * How many of `seriesId`'s own batches are revealed so far. Capped at that
- * series' total batch count, so series with fewer batches simply stop
- * progressing while longer ones keep filling in.
+ * Revealed batch count for a series: `revealed` rounds normally, clamped to the
+ * first batch while interacting, never above `total`.
+ */
+export function getRevealedBatchCount(total, revealed, isInteracting) {
+  const effectiveRevealed = isInteracting ? 1 : revealed;
+  return Math.min(effectiveRevealed, total);
+}
+
+/**
+ * How many of `seriesId`'s batches are revealed, capped at its total batch
+ * count. Clamped to the first batch while interacting.
  */
-export const selectorProgressiveSeriesRevealedBatches = createSelector(selectorProgressiveAggregate, selectorProgressiveRevealedRounds, function selectorProgressiveSeriesRevealedBatches(agg, revealed, seriesId) {
-  return Math.min(revealed, agg.nBatchesBySeries.get(seriesId) ?? 0);
+export const selectorProgressiveSeriesRevealedBatches = createSelector(selectorProgressiveAggregate, selectorProgressiveRevealedRounds, selectorChartZoomIsInteracting, function selectorProgressiveSeriesRevealedBatches(agg, revealed, isInteracting, seriesId) {
+  const total = agg.nBatchesBySeries.get(seriesId) ?? 0;
+  return getRevealedBatchCount(total, revealed, isInteracting);
 });
 
 /**
- * Whether `seriesIds` should be rendered progressively given the requested
- * `renderer`:
- * - `svg-single` / `svg-batch`: never (those are non-progressive renderers).
+ * Whether `seriesIds` render progressively:
+ * - `svg-single`/`svg-batch`: never.
  * - `svg-progressive`: always.
- * - unset (auto): only when the `progressiveRendering` experimental feature is
- *   enabled and the total point count is above
- *   {@link PROGRESSIVE_POINT_THRESHOLD}. The flag keeps the auto behavior
- *   opt-in so the default (`svg-single`) stays non-breaking.
+ * - unset (auto): only when the experimental feature is on and total points
+ *   exceed {@link PROGRESSIVE_POINT_THRESHOLD}.
  */
 const selectorProgressiveRenderingEnabled = state => selectorChartExperimentalFeaturesState(state, 'progressiveRendering');
 export const selectorShouldUseProgressiveRenderer = createSelector(selectorChartSeriesProcessed, selectorProgressiveRenderingEnabled, (processedSeries, progressiveRenderingEnabled, seriesIds, renderer) => {

package/internals/plugins/featurePlugins/useProgressiveRendering/useProgressiveRendering.types.d.mts

@@ -1,6 +1,6 @@
-import { type SeriesId } from "../../../../models/seriesType/common.mjs";
+import type { SeriesId } from "../../../../models/seriesType/common.mjs";
 import type { RendererType } from "../../../../ScatterChart/index.mjs";
-import { type ChartPluginSignature } from "../../models/index.mjs";
+import type { ChartPluginSignature } from "../../models/index.mjs";
 export interface UseProgressiveRenderingState {
   progressiveRendering: {
     /**

package/internals/plugins/featurePlugins/useProgressiveRendering/useProgressiveRendering.types.d.ts

@@ -1,6 +1,6 @@
-import { type SeriesId } from "../../../../models/seriesType/common.js";
+import type { SeriesId } from "../../../../models/seriesType/common.js";
 import type { RendererType } from "../../../../ScatterChart/index.js";
-import { type ChartPluginSignature } from "../../models/index.js";
+import type { ChartPluginSignature } from "../../models/index.js";
 export interface UseProgressiveRenderingState {
   progressiveRendering: {
     /**

package/internals/plugins/models/plugin.d.mts

@@ -1,7 +1,7 @@
-import { type Store } from '@mui/x-internals/store';
+import type { Store } from '@mui/x-internals/store';
 import type { MergeSignaturesProperty, OptionalIfEmpty } from "./helpers.mjs";
 import type { ChartCorePluginSignatures } from "../corePlugins/index.mjs";
-import { type ChartState } from "./chart.mjs";
+import type { ChartState } from "./chart.mjs";
 export interface ChartPluginOptions<TSignature extends ChartAnyPluginSignature> {
   /**
    * An imperative api available for internal use.

package/internals/plugins/models/plugin.d.ts

@@ -1,7 +1,7 @@
-import { type Store } from '@mui/x-internals/store';
+import type { Store } from '@mui/x-internals/store';
 import type { MergeSignaturesProperty, OptionalIfEmpty } from "./helpers.js";
 import type { ChartCorePluginSignatures } from "../corePlugins/index.js";
-import { type ChartState } from "./chart.js";
+import type { ChartState } from "./chart.js";
 export interface ChartPluginOptions<TSignature extends ChartAnyPluginSignature> {
   /**
    * An imperative api available for internal use.

package/internals/plugins/utils/selectors.d.mts

@@ -1,5 +1,5 @@
 import type { Selector } from 'reselect';
-import { type ChartAnyPluginSignature } from "../models/plugin.mjs";
-import { type ChartState } from "../models/chart.mjs";
+import type { ChartAnyPluginSignature } from "../models/plugin.mjs";
+import type { ChartState } from "../models/chart.mjs";
 export type ChartRootSelector<TSignature extends ChartAnyPluginSignature, T extends keyof TSignature['state'] = keyof TSignature['state']> = Selector<ChartState<[TSignature]>, TSignature['state'][T]>;
 export type ChartOptionalRootSelector<TSignature extends ChartAnyPluginSignature> = Selector<ChartState<[], [TSignature]>, TSignature['state'][keyof TSignature['state']] | undefined>;

package/internals/plugins/utils/selectors.d.ts

@@ -1,5 +1,5 @@
 import type { Selector } from 'reselect';
-import { type ChartAnyPluginSignature } from "../models/plugin.js";
-import { type ChartState } from "../models/chart.js";
+import type { ChartAnyPluginSignature } from "../models/plugin.js";
+import type { ChartState } from "../models/chart.js";
 export type ChartRootSelector<TSignature extends ChartAnyPluginSignature, T extends keyof TSignature['state'] = keyof TSignature['state']> = Selector<ChartState<[TSignature]>, TSignature['state'][T]>;
 export type ChartOptionalRootSelector<TSignature extends ChartAnyPluginSignature> = Selector<ChartState<[], [TSignature]>, TSignature['state'][keyof TSignature['state']] | undefined>;

package/internals/plugins/utils/useLazySelectorEffect.d.mts

@@ -1,5 +1,5 @@
 import type { Store } from '@mui/x-internals/store';
-import { type ChartAnyPluginSignature, type ChartState } from "../models/index.mjs";
+import type { ChartAnyPluginSignature, ChartState } from "../models/index.mjs";
 export declare function useLazySelectorEffect<TSignatures extends readonly ChartAnyPluginSignature[], Value>(store: Store<ChartState<TSignatures>>, selector: (state: ChartState<TSignatures>) => Value, effect: (previous: Value, next: Value) => void,
 /**
  * If true, the selector will be ignored.

package/internals/plugins/utils/useLazySelectorEffect.d.ts

@@ -1,5 +1,5 @@
 import type { Store } from '@mui/x-internals/store';
-import { type ChartAnyPluginSignature, type ChartState } from "../models/index.js";
+import type { ChartAnyPluginSignature, ChartState } from "../models/index.js";
 export declare function useLazySelectorEffect<TSignatures extends readonly ChartAnyPluginSignature[], Value>(store: Store<ChartState<TSignatures>>, selector: (state: ChartState<TSignatures>) => Value, effect: (previous: Value, next: Value) => void,
 /**
  * If true, the selector will be ignored.

package/internals/processLineLikeSeries.d.mts

@@ -1,4 +1,4 @@
-import { type ChartSeriesType, type DatasetType } from "../models/seriesType/config.mjs";
+import type { ChartSeriesType, DatasetType } from "../models/seriesType/config.mjs";
 import type { SeriesProcessorParams, SeriesProcessorResult } from "./plugins/corePlugins/useChartSeriesConfig/index.mjs";
 import type { IsItemVisibleFunction } from "./plugins/featurePlugins/useChartVisibilityManager/index.mjs";
 type LineLikeChartType = Extract<ChartSeriesType, 'line' | 'radialLine'>;

package/internals/processLineLikeSeries.d.ts

@@ -1,4 +1,4 @@
-import { type ChartSeriesType, type DatasetType } from "../models/seriesType/config.js";
+import type { ChartSeriesType, DatasetType } from "../models/seriesType/config.js";
 import type { SeriesProcessorParams, SeriesProcessorResult } from "./plugins/corePlugins/useChartSeriesConfig/index.js";
 import type { IsItemVisibleFunction } from "./plugins/featurePlugins/useChartVisibilityManager/index.js";
 type LineLikeChartType = Extract<ChartSeriesType, 'line' | 'radialLine'>;

package/internals/scaleGuards.d.mts

@@ -1,5 +1,5 @@
 import type { ScaleBand } from '@mui/x-charts-vendor/d3-scale';
-import { type D3OrdinalScale, type D3Scale } from "../models/axis.mjs";
+import type { D3OrdinalScale, D3Scale } from "../models/axis.mjs";
 export declare function isOrdinalScale<Domain extends {
   toString(): string;
 } = {

package/internals/scaleGuards.d.ts

@@ -1,5 +1,5 @@
 import type { ScaleBand } from '@mui/x-charts-vendor/d3-scale';
-import { type D3OrdinalScale, type D3Scale } from "../models/axis.js";
+import type { D3OrdinalScale, D3Scale } from "../models/axis.js";
 export declare function isOrdinalScale<Domain extends {
   toString(): string;
 } = {

package/internals/scales/scaleBand.js

@@ -158,7 +158,10 @@ function createScaleBand(seed) {
     paddingOuter,
     align
   });
-  rescale();
+
+  // `rescale` returns the scale for the fluent setters; here it only seeds the
+  // initial layout, so the (callable) return is intentionally discarded.
+  void rescale();
   return scale;
 }
 

package/internals/scales/scaleBand.mjs

@@ -150,7 +150,10 @@ function createScaleBand(seed) {
     paddingOuter,
     align
   });
-  rescale();
+
+  // `rescale` returns the scale for the fluent setters; here it only seeds the
+  // initial layout, so the (callable) return is intentionally discarded.
+  void rescale();
   return scale;
 }
 

package/internals/scales/scaleSymlog.d.mts

@@ -1,4 +1,4 @@
-import { type NumberValue, type ScaleSymLog } from '@mui/x-charts-vendor/d3-scale';
+import type { NumberValue, ScaleSymLog } from '@mui/x-charts-vendor/d3-scale';
 /**
  * Constructs a new continuous scale with the specified range, the constant 1, the default interpolator and clamping disabled.
  * The domain defaults to [0, 1].

package/internals/scales/scaleSymlog.d.ts

@@ -1,4 +1,4 @@
-import { type NumberValue, type ScaleSymLog } from '@mui/x-charts-vendor/d3-scale';
+import type { NumberValue, ScaleSymLog } from '@mui/x-charts-vendor/d3-scale';
 /**
  * Constructs a new continuous scale with the specified range, the constant 1, the default interpolator and clamping disabled.
  * The domain defaults to [0, 1].

package/internals/seriesSelectorOfType.d.mts

@@ -1,5 +1,5 @@
-import { type ChartSeriesDefaultized, type ChartsSeriesConfig } from "../models/seriesType/config.mjs";
-import { type SeriesId } from "../models/seriesType/common.mjs";
+import type { ChartSeriesDefaultized, ChartsSeriesConfig } from "../models/seriesType/config.mjs";
+import type { SeriesId } from "../models/seriesType/common.mjs";
 import type { ProcessedSeries } from "./plugins/corePlugins/useChartSeries/index.mjs";
 export declare const selectorAllSeriesOfType: (args_0: import("./plugins/corePlugins/useChartId/useChartId.types.mjs").UseChartIdState & import("./plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.mjs").UseChartSeriesConfigState<keyof ChartsSeriesConfig> & import("./plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.mjs").UseChartExperimentalFeaturesState & import("./plugins/corePlugins/useChartDimensions/useChartDimensions.types.mjs").UseChartDimensionsState & import("./plugins/corePlugins/useChartSeries/useChartSeries.types.mjs").UseChartSeriesState<keyof ChartsSeriesConfig> & import("./plugins/corePlugins/useChartAnimation/useChartAnimation.types.mjs").UseChartAnimationState & import("./index.mjs").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("./index.mjs").ChartStateCacheKey;

package/internals/seriesSelectorOfType.d.ts

@@ -1,5 +1,5 @@
-import { type ChartSeriesDefaultized, type ChartsSeriesConfig } from "../models/seriesType/config.js";
-import { type SeriesId } from "../models/seriesType/common.js";
+import type { ChartSeriesDefaultized, ChartsSeriesConfig } from "../models/seriesType/config.js";
+import type { SeriesId } from "../models/seriesType/common.js";
 import type { ProcessedSeries } from "./plugins/corePlugins/useChartSeries/index.js";
 export declare const selectorAllSeriesOfType: (args_0: import("./plugins/corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("./plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types.js").UseChartSeriesConfigState<keyof ChartsSeriesConfig> & import("./plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("./plugins/corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("./plugins/corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof ChartsSeriesConfig> & import("./plugins/corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("./index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("./index.js").ChartStateCacheKey;

package/internals/sizeScale.d.mts

@@ -1,5 +1,5 @@
-import { type ScaleOrdinal, type ScaleThreshold, type ScaleSequential } from '@mui/x-charts-vendor/d3-scale';
-import { type ContinuousSizeConfig, type PiecewiseSizeConfig, type OrdinalSizeConfig } from "../models/sizeMapping.mjs";
+import type { ScaleOrdinal, ScaleThreshold, ScaleSequential } from '@mui/x-charts-vendor/d3-scale';
+import type { ContinuousSizeConfig, PiecewiseSizeConfig, OrdinalSizeConfig } from "../models/sizeMapping.mjs";
 export declare function getSequentialSizeScale<Value extends number | Date>(config: ContinuousSizeConfig<Value> | PiecewiseSizeConfig<Value>): ScaleThreshold<Value, number, never> | ScaleSequential<number, never>;
 export declare function getOrdinalSizeScale(config: OrdinalSizeConfig): ScaleOrdinal<number | Date | string, number, number | null>;
 export declare function getSizeScale(config: OrdinalSizeConfig): ScaleOrdinal<number | Date | string, number, number | null>;