Merge branch 'main' into disable-sld-display-if-edit-mode-activated

src/components/diagrams/diagram-pane.jsx

@@ -29,11 +29,15 @@ import {
     DIAGRAM_MAP_RATIO_MIN_PERCENTAGE,
     DiagramType,
     MAP_BOTTOM_OFFSET,
+    NETWORK_AREA_DIAGRAM_NB_MAX_VOLTAGE_LEVELS,
     NoSvg,
     useDiagram,
     ViewState,
 } from './diagram-common';
-import { makeDiagramSorter } from './diagram-utils';
+import {
+    getEstimatedNbVoltageLevels,
+    makeDiagramSorter,
+} from './diagram-utils';
 import {
     isNodeBuilt,
     isNodeInNotificationList,
@@ -45,7 +49,7 @@ import { useNameOrId } from '../utils/equipmentInfosHandler';
 import { syncDiagramStateWithSessionStorage } from '../../redux/session-storage';
 import SingleLineDiagramContent from './singleLineDiagram/single-line-diagram-content';
 import NetworkAreaDiagramContent from './networkAreaDiagram/network-area-diagram-content';
-import { useSnackMessage } from '@gridsuite/commons-ui';
+import { useDebounce, useSnackMessage } from '@gridsuite/commons-ui';
 import { setNetworkAreaDiagramNbVoltageLevels } from '../../redux/actions';
 import { useIntl } from 'react-intl';
 import {
@@ -353,6 +357,12 @@ export function DiagramPane({
     const networkAreaDiagramDepth = useSelector(
         (state) => state.networkAreaDiagramDepth
     );
+    const previousNetworkAreaDiagramDepth = useRef(networkAreaDiagramDepth);
+
+    const networkAreaDiagramNbVoltageLevels = useSelector(
+        (state) => state.networkAreaDiagramNbVoltageLevels
+    );
+
     const { translate } = useLocalizedCountries();
 
     const notificationIdList = useSelector((state) => state.notificationIdList);
@@ -550,6 +560,7 @@ export function DiagramPane({
 
     const updateNAD = useCallback(
         (diagramStates) => {
+            previousNetworkAreaDiagramDepth.current = networkAreaDiagramDepth;
             const networkAreaIds = [];
             let networkAreaViewState = ViewState.OPENED;
             diagramStates.forEach((diagramState) => {
@@ -649,6 +660,28 @@ export function DiagramPane({
             });
         }
     }, []);
+    // We debounce the updateNAD function to avoid generating unnecessary NADs
+    const debounceUpdateNAD = useDebounce(updateNAD, 300);
+
+    // 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(
+        (networkAreaDiagramDepth) => {
+            const estimatedNbVoltageLevels = getEstimatedNbVoltageLevels(
+                previousNetworkAreaDiagramDepth.current,
+                networkAreaDiagramDepth,
+                networkAreaDiagramNbVoltageLevels
+            );
+            return (
+                estimatedNbVoltageLevels <
+                    NETWORK_AREA_DIAGRAM_NB_MAX_VOLTAGE_LEVELS ||
+                previousNetworkAreaDiagramDepth.current >
+                    networkAreaDiagramDepth
+            );
+        },
+        [networkAreaDiagramNbVoltageLevels]
+    );
 
     // UPDATE DIAGRAM VIEWS
     useEffect(() => {
@@ -664,7 +697,16 @@ export function DiagramPane({
         // SLD MANAGEMENT (adding or removing SLDs)
         updateSLDs(diagramStates);
         // NAD MANAGEMENT (adding, removing or updating the NAD)
-        updateNAD(diagramStates);
+        // Here we call either the debounced or the non-debounced function
+        // to force a server fetch after a few clicks to get the actual number of voltage levels.
+        // it's ok to do this and doesn't cause two fetches at the end
+        // beacause the debounced function is recreated after each networkAreaDiagramDepth
+        // change so the debounce hook clears the debounce timer
+        if (shouldDebounceUpdateNAD(networkAreaDiagramDepth)) {
+            debounceUpdateNAD(diagramStates);
+        } else {
+            updateNAD(diagramStates);
+        }
     }, [
         diagramStates,
         visible,
@@ -673,6 +715,9 @@ export function DiagramPane({
         updateDiagramStates,
         updateSLDs,
         updateNAD,
+        debounceUpdateNAD,
+        networkAreaDiagramDepth,
+        shouldDebounceUpdateNAD,
     ]);
 
     const displayedDiagrams = views
@@ -1095,6 +1140,7 @@ export function DiagramPane({
                                 )}
                                 fullscreenWidth={width}
                                 fullscreenHeight={height}
+                                loadingState={diagramView.loadingState}
                             >
                                 {(diagramView.svgType ===
                                     DiagramType.VOLTAGE_LEVEL ||

src/components/diagrams/diagram-utils.js

@@ -52,3 +52,34 @@ const sortByIndex = (a, b, diagramStates) => {
 export const makeDiagramSorter = (diagramStates) => {
     return (a, b) => sortByAlign(a, b) || sortByIndex(a, b, diagramStates);
 };
+
+// estimate the number of voltage levels for a requested depth
+// based on the current depth and the previous number of voltage levels
+// this allows the user to increase the depth quickly without having to wait
+// for the actual number of voltage levels at each step but
+// to avoid increasing the depth too much.
+// we want this estimation to be slightly pessimistic to avoid bad UX of going to far
+// and not being able to do the same thing step by step.
+const VL_DEPTH_GROWTH_RATE = 2;
+export function getEstimatedNbVoltageLevels(
+    currentDepth,
+    requestedDepth,
+    previousVoltagesNB
+) {
+    // We assume that the number of vl grows exponentially
+    // real world example :
+    // depth : number of voltage levels
+    // 1     : 3
+    // 2     : 7
+    // 3     : 13
+    // 4     : 28
+    // 5     : 37
+    // 6     : 51
+    // 7     : 80
+    // 8     : 138
+    // 9     : 221
+    return (
+        previousVoltagesNB *
+        Math.pow(VL_DEPTH_GROWTH_RATE, requestedDepth - currentDepth)
+    );
+}

src/components/diagrams/diagram.jsx

@@ -57,6 +57,13 @@ const Diagram = (props) => {
         (state) => state.networkAreaDiagramNbVoltageLevels
     );
 
+    const incrementCounterDisabled =
+        props.loadingState ||
+        nbVoltageLevels > NETWORK_AREA_DIAGRAM_NB_MAX_VOLTAGE_LEVELS;
+
+    const decrementCounterDisabled =
+        props.loadingState || networkAreaDiagramDepth === 0;
+
     /**
      * DIAGRAM CONTROL HANDLERS
      */
@@ -161,13 +168,8 @@ const Diagram = (props) => {
                             fullScreenActive={shouldBeFullscreen}
                             onStartFullScreen={onShowFullScreenHandler}
                             onStopFullScreen={onHideFullScreenHandler}
-                            incrementCounterDisabled={
-                                nbVoltageLevels >
-                                NETWORK_AREA_DIAGRAM_NB_MAX_VOLTAGE_LEVELS
-                            }
-                            decrementCounterDisabled={
-                                networkAreaDiagramDepth === 0
-                            }
+                            incrementCounterDisabled={incrementCounterDisabled}
+                            decrementCounterDisabled={decrementCounterDisabled}
                         />
                     </Box>
                 )}
@@ -198,6 +200,7 @@ Diagram.propTypes = {
     height: PropTypes.number,
     fullscreenWidth: PropTypes.number,
     fullscreenHeight: PropTypes.number,
+    loadingState: PropTypes.bool,
 };
 
 export default Diagram;