Merge remote-tracking branch 'origin/main' into jorism/balances-adjustment-with-visual-improvements

Author: TheMaskedTurtle

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "gridstudy-app",
-    "version": "2.18.0-SNAPSHOT",
+    "version": "2.19.0-SNAPSHOT",
     "license": "MPL-2.0",
     "private": true,
     "type": "module",
@@ -11,7 +11,7 @@
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
-        "@gridsuite/commons-ui": "0.103.0",
+        "@gridsuite/commons-ui": "0.107.1",
         "@hello-pangea/dnd": "^18.0.1",
         "@hookform/resolvers": "^4.0.0",
         "@mui/icons-material": "^5.16.14",

package.json

@@ -60,6 +60,9 @@ import {
     parametersEn,
     parametersFr,
     NotificationsProvider,
+    MAP_BASEMAP_MAPBOX,
+    MAP_BASEMAP_CARTO,
+    MAP_BASEMAP_CARTO_NOLABEL,
 } from '@gridsuite/commons-ui';
 import { IntlProvider } from 'react-intl';
 import { BrowserRouter } from 'react-router';
@@ -88,13 +91,7 @@ import events_locale_en from '../translations/dynamic/events-locale-en';
 import spreadsheet_locale_fr from '../translations/spreadsheet-fr';
 import spreadsheet_locale_en from '../translations/spreadsheet-en';
 import { store } from '../redux/store';
-import {
-    PARAM_THEME,
-    basemap_style_theme_key,
-    MAP_BASEMAP_MAPBOX,
-    MAP_BASEMAP_CARTO,
-    MAP_BASEMAP_CARTO_NOLABEL,
-} from '../utils/config-params';
+import { PARAM_THEME, basemap_style_theme_key } from '../utils/config-params';
 import useNotificationsUrlGenerator from 'hooks/use-notifications-url-generator';
 import { AllCommunityModule, ModuleRegistry, provideGlobalGridOptions } from 'ag-grid-community';
 import { lightThemeCssVars } from '../styles/light-theme-css-vars';

src/components/app-wrapper.jsx

@@ -151,6 +151,26 @@ const App = () => {
         listenerCallbackMessage: updateConfig,
     });
 
+    const networkVisuParamsUpdated = useCallback(
+        (event) => {
+            const eventData = JSON.parse(event.data);
+            if (
+                studyUuid &&
+                eventData.headers.updateType === NotificationType.NETWORK_VISUALIZATION_PARAMETERS_UPDATED &&
+                eventData.headers.studyUuid === studyUuid
+            ) {
+                getNetworkVisualizationParameters(studyUuid).then((params) =>
+                    updateNetworkVisualizationsParams(params)
+                );
+            }
+        },
+        [studyUuid, updateNetworkVisualizationsParams]
+    );
+
+    useNotificationsListener(NotificationsUrlKeys.STUDY, {
+        listenerCallbackMessage: networkVisuParamsUpdated,
+    });
+
     const resetTableDefinitions = useCallback(
         (collection) => {
             const { tablesFilters, tableGlobalFilters, tableDefinitions } =

src/components/app.jsx

@@ -6,7 +6,7 @@
  */
 
 import { useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 import Box from '@mui/material/Box';
 import {
     DirectoryItemSelector,
@@ -22,7 +22,7 @@ import SaveIcon from '@mui/icons-material/Save';
 import { Theme, Tooltip } from '@mui/material';
 import { AppState } from 'redux/reducer';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { setEditNadMode } from 'redux/actions';
+import { UUID } from 'crypto';
 
 const styles = {
     actionIcon: (theme: Theme) => ({
@@ -56,16 +56,16 @@ const styles = {
 
 interface DiagramControlsProps {
     onSave?: (data: IElementCreationDialog) => void;
-    onLoad?: (nadConfigId: string, nadName: string) => void;
+    onLoad?: (nadConfigUuid: UUID, nadName: string) => void;
+    isEditNadMode: boolean;
+    onToggleEditNadMode?: (isEditMode: boolean) => void;
 }
 
-const DiagramControls: React.FC<DiagramControlsProps> = ({ onSave, onLoad }) => {
+const DiagramControls: React.FC<DiagramControlsProps> = ({ onSave, onLoad, isEditNadMode, onToggleEditNadMode }) => {
     const intl = useIntl();
     const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false);
     const [isLoadSelectorOpen, setIsLoadSelectorOpen] = useState(false);
     const studyUuid = useSelector((state: AppState) => state.studyUuid);
-    const isEditMode = useSelector((state: AppState) => state.isEditMode);
-    const dispatch = useDispatch();
 
     const handleCloseSaveDialog = () => {
         setIsSaveDialogOpen(false);
@@ -89,9 +89,9 @@ const DiagramControls: React.FC<DiagramControlsProps> = ({ onSave, onLoad }) =>
         }
     };
 
-    const handleLoad = (nadConfigId: string, nadName: string) => {
+    const handleLoad = (nadConfigUuid: UUID, nadName: string) => {
         if (onLoad) {
-            onLoad(nadConfigId, nadName);
+            onLoad(nadConfigUuid, nadName);
         }
     };
 
@@ -103,7 +103,7 @@ const DiagramControls: React.FC<DiagramControlsProps> = ({ onSave, onLoad }) =>
     };
 
     const handleToggleEditMode = () => {
-        dispatch(setEditNadMode(!isEditMode));
+        onToggleEditNadMode?.(!isEditNadMode);
     };
 
     /**
@@ -133,7 +133,7 @@ const DiagramControls: React.FC<DiagramControlsProps> = ({ onSave, onLoad }) =>
             </Box>
             <Box sx={styles.buttonPanel}>
                 <Button size="small" sx={styles.button} onClick={handleToggleEditMode}>
-                    <FormattedMessage id={isEditMode ? 'save' : 'EditNad'} />
+                    <FormattedMessage id={isEditNadMode ? 'save' : 'EditNad'} />
                 </Button>
             </Box>
             {studyUuid && (

src/components/diagrams/diagram-controls.tsx

@@ -11,8 +11,6 @@ import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import { Theme, Typography, IconButton } from '@mui/material';
-import { useSelector } from 'react-redux';
-import { AppState } from 'redux/reducer';
 
 const styles = {
     counterText: (theme: Theme) => ({
@@ -86,11 +84,10 @@ const DiagramFooter: React.FC<DiagramFooterProps> = ({
     const handleStartFullScreen = useCallback(() => onStartFullScreen && onStartFullScreen(), [onStartFullScreen]);
     const handleIncrementCounter = useCallback(() => onIncrementCounter && onIncrementCounter(), [onIncrementCounter]);
     const handleDecrementCounter = useCallback(() => onDecrementCounter && onDecrementCounter(), [onDecrementCounter]);
-    const isEditNadMode = useSelector((state: AppState) => state.isEditMode);
 
     return (
         <div style={{ display: 'flex' }}>
-            {showCounterControls && isEditNadMode && (
+            {showCounterControls && (
                 <>
                     {showCounterValue && <Typography sx={styles.counterText}>{counterText + counterValue}</Typography>}
                     <IconButton