Debounce NAD depth update in Diagram Grid Layout

src/components/diagrams/diagram-grid-layout.tsx

@@ -24,6 +24,7 @@ import CardHeader, { BLINK_LENGTH_MS } from './card-header';
 import DiagramFooter from './diagram-footer';
 import { useIntl } from 'react-intl';
 import AlertCustomMessageNode from 'components/utils/alert-custom-message-node';
+import { useNadUpdate } from './hooks/use-nad-update';
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
 // Diagram types to manage here
@@ -200,20 +201,7 @@ function DiagramGridLayout({ studyUuid, showInSpreadsheet, visible }: Readonly<D
         );
     }, [diagrams]);
 
-    const onChangeDepth = useCallback(
-        (diagramId: UUID, newDepth: number) => {
-            const diagram = diagrams[diagramId];
-            if (diagram && diagram.type === DiagramType.NETWORK_AREA_DIAGRAM) {
-                updateDiagram({
-                    diagramUuid: diagramId,
-                    type: DiagramType.NETWORK_AREA_DIAGRAM,
-                    voltageLevelIds: diagram.voltageLevelIds,
-                    depth: newDepth,
-                });
-            }
-        },
-        [diagrams, updateDiagram]
-    );
+    const { onChangeDepth, localNadDepth } = useNadUpdate({ diagrams, updateDiagram });
 
     const handleToggleEditMode = useCallback((diagramUuid: UUID) => {
         setDiagramsInEditMode((prev) =>
@@ -290,13 +278,20 @@ function DiagramGridLayout({ studyUuid, showInSpreadsheet, visible }: Readonly<D
                                     counterText={intl.formatMessage({
                                         id: 'depth',
                                     })}
-                                    counterValue={diagram.depth}
-                                    onIncrementCounter={() => onChangeDepth(diagram.diagramUuid, diagram.depth + 1)}
-                                    onDecrementCounter={() => onChangeDepth(diagram.diagramUuid, diagram.depth - 1)}
+                                    counterValue={localNadDepth[diagram.diagramUuid] ?? 0}
+                                    onIncrementCounter={() =>
+                                        onChangeDepth(diagram, localNadDepth[diagram.diagramUuid] + 1)
+                                    }
+                                    onDecrementCounter={() =>
+                                        onChangeDepth(diagram, localNadDepth[diagram.diagramUuid] - 1)
+                                    }
                                     incrementCounterDisabled={
-                                        diagram.voltageLevelIds.length > NETWORK_AREA_DIAGRAM_NB_MAX_VOLTAGE_LEVELS // loadingState ||
+                                        loadingDiagrams.includes(diagram.diagramUuid) ||
+                                        diagram.voltageLevelIds.length > NETWORK_AREA_DIAGRAM_NB_MAX_VOLTAGE_LEVELS
+                                    }
+                                    decrementCounterDisabled={
+                                        loadingDiagrams.includes(diagram.diagramUuid) || diagram.depth === 0
                                     }
-                                    decrementCounterDisabled={diagram.depth === 0} // loadingState ||
                                 />
                             )}
                         </Box>
@@ -314,6 +309,7 @@ function DiagramGridLayout({ studyUuid, showInSpreadsheet, visible }: Readonly<D
         handleToggleEditMode,
         intl,
         loadingDiagrams,
+        localNadDepth,
         onChangeDepth,
         onRemoveItem,
         setDiagramSize,

src/components/diagrams/hooks/use-nad-update.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { useDebounce } from '@gridsuite/commons-ui';
+import { Diagram, DiagramParams, DiagramType, NetworkAreaDiagram } from '../diagram.type';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { getEstimatedNbVoltageLevels } from '../diagram-utils';
+import { DiagramAdditionalMetadata, NETWORK_AREA_DIAGRAM_NB_MAX_VOLTAGE_LEVELS } from '../diagram-common';
+import { UUID } from 'crypto';
+
+type useNadUpdateProps = {
+    diagrams: Record<UUID, Diagram>;
+    updateDiagram: (diagramParams: DiagramParams) => void;
+};
+
+export const useNadUpdate = ({ diagrams, updateDiagram }: useNadUpdateProps) => {
+    const previousNetworkAreaDiagramDepth = useRef(0);
+    const [localNadDepth, setLocalNadDepth] = useState<Record<UUID, number>>({});
+
+    const changeDepth = useCallback(
+        (diagram: NetworkAreaDiagram, newDepth: number) => {
+            updateDiagram({
+                diagramUuid: diagram.diagramUuid,
+                type: DiagramType.NETWORK_AREA_DIAGRAM,
+                voltageLevelIds: diagram.voltageLevelIds,
+                depth: newDepth,
+            });
+            previousNetworkAreaDiagramDepth.current = newDepth;
+        },
+        [updateDiagram]
+    );
+
+    const debouncedChangeDepth = useDebounce(changeDepth, 1300);
+
+    // To allow a small number of fast clicks
+    // and then stop before we get too close to
+    // NETWORK_AREA_DIAGRAM_NB_MAX_VOLTAGE_LEVELS
+    const shouldDebounceUpdateNAD = useCallback((diagram: NetworkAreaDiagram, networkAreaDiagramDepth: number) => {
+        console.log(
+            'SBO shouldDebounceUpdateNAD next, previous',
+            networkAreaDiagramDepth,
+            previousNetworkAreaDiagramDepth.current
+        );
+        const estimatedNbVoltageLevels = getEstimatedNbVoltageLevels(
+            previousNetworkAreaDiagramDepth.current,
+            networkAreaDiagramDepth,
+            (diagram.svg?.additionalMetadata as DiagramAdditionalMetadata).nbVoltageLevels || 0
+        );
+        return (
+            estimatedNbVoltageLevels < NETWORK_AREA_DIAGRAM_NB_MAX_VOLTAGE_LEVELS ||
+            previousNetworkAreaDiagramDepth.current > networkAreaDiagramDepth
+        );
+    }, []);
+
+    const onChangeDepth = useCallback(
+        (diagram: Diagram, newDepth: number) => {
+            const nextDepth = Math.max(newDepth, 0); // Ensure depth is non-negative
+            if (diagram && diagram.type === DiagramType.NETWORK_AREA_DIAGRAM) {
+                setLocalNadDepth((prevDepth) => ({
+                    ...prevDepth,
+                    [diagram.diagramUuid]: nextDepth,
+                }));
+                if (shouldDebounceUpdateNAD(diagram, nextDepth)) {
+                    debouncedChangeDepth(diagram, nextDepth);
+                } else {
+                    changeDepth(diagram, nextDepth);
+                }
+            }
+        },
+        [shouldDebounceUpdateNAD, debouncedChangeDepth, changeDepth]
+    );
+
+    useEffect(() => {
+        // Initialize localNadDepth with existing diagrams
+        const initialDepths: Record<UUID, number> = {};
+        Object.values(diagrams).forEach((diagram) => {
+            if (diagram.type === DiagramType.NETWORK_AREA_DIAGRAM) {
+                initialDepths[diagram.diagramUuid] = diagram.depth;
+            }
+        });
+        setLocalNadDepth(initialDepths);
+    }, [diagrams]);
+
+    return { onChangeDepth, localNadDepth };
+};