Sync study navigation (#3192)

Signed-off-by: Ayoub LABIDI <[email protected]>

Author: ayolab

src/components/app-top-bar.jsx

@@ -23,9 +23,10 @@ import { RunButtonContainer } from './run-button-container';
 import { useComputationResultsCount } from '../hooks/use-computation-results-count';
 import { useParameterState } from './dialogs/parameters/use-parameters-state';
 import { STUDY_VIEWS, StudyView } from './utils/utils';
+import StudyNavigationSyncToggle from './study-navigation-sync-toggle';
 
 const styles = {
-    boxContent: (theme) => ({ display: 'flex', width: '100%', marginLeft: theme.spacing(4) }),
+    boxContent: (theme) => ({ display: 'flex', overflow: 'hidden', width: '100%', marginLeft: theme.spacing(4) }),
     tabs: {},
     searchButton: {
         marginTop: 'auto',
@@ -38,7 +39,12 @@ const styles = {
         marginBottom: 'auto',
         marginRight: '10%',
         marginLeft: 'auto',
-        flexShrink: 0,
+    },
+    syncToggleContainer: {
+        marginTop: 'auto',
+        marginBottom: 'auto',
+        marginLeft: -4,
+        marginRight: 1,
     },
 };
 
@@ -126,6 +132,9 @@ const AppTopBar = ({ user, onChangeTab, userManager }) => {
                             disabled={!isNodeBuilt(currentNode) || isNodeReadOnly(currentNode)}
                         />
                     </Box>
+                    <Box sx={styles.syncToggleContainer}>
+                        <StudyNavigationSyncToggle />
+                    </Box>
                 </Box>
             )}
         </TopBar>

src/components/app.jsx

@@ -72,6 +72,7 @@ import {
     mapColumnsDto,
     processSpreadsheetsCollectionData,
 } from './spreadsheet-view/add-spreadsheet/dialogs/add-spreadsheet-utils';
+import useStudyNavigationSync from 'hooks/use-study-navigation-sync';
 
 const noUserManager = { instance: null, error: null };
 
@@ -156,6 +157,8 @@ const App = () => {
         listenerCallbackMessage: updateConfig,
     });
 
+    useStudyNavigationSync();
+
     const networkVisuParamsUpdated = useCallback(
         (event) => {
             const eventData = JSON.parse(event.data);

src/components/breadcrumbs/root-network-select.tsx

@@ -5,13 +5,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { useDispatch } from 'react-redux';
 import { Box, ListItemText, MenuItem, Select, Theme } from '@mui/material';
-import { setCurrentRootNetworkUuid } from '../../redux/actions';
 import { UUID } from 'crypto';
 import { RemoveRedEye, VisibilityOff } from '@mui/icons-material';
 import { RootNetworkMetadata } from '../graph/menus/network-modifications/network-modification-menu.type';
 import { useMemo } from 'react';
+import { useSyncNavigationActions } from 'hooks/use-sync-navigation-actions';
 
 const styles = {
     selectRoot: (theme: Theme) => ({
@@ -30,7 +29,7 @@ interface RootNetworkSelectProps {
 }
 
 export default function RootNetworkSelect({ currentRootNetworkUuid, rootNetworks }: Readonly<RootNetworkSelectProps>) {
-    const dispatch = useDispatch();
+    const { setCurrentRootNetworkUuidWithSync } = useSyncNavigationActions();
 
     const filteredRootNetworks = useMemo(() => {
         return rootNetworks.filter((item) => item.rootNetworkUuid !== currentRootNetworkUuid);
@@ -42,7 +41,9 @@ export default function RootNetworkSelect({ currentRootNetworkUuid, rootNetworks
             id="breadCrumbsSelect"
             sx={styles.selectRoot}
             value={currentRootNetworkUuid}
-            onChange={(event) => dispatch(setCurrentRootNetworkUuid(event.target.value as UUID))}
+            onChange={(event) => {
+                setCurrentRootNetworkUuidWithSync(event.target.value as UUID);
+            }}
             renderValue={(value) => {
                 const tag = rootNetworks.find((item) => item.rootNetworkUuid === value)?.tag;
                 return (

src/components/graph/menus/root-network/root-network-node-editor.tsx

@@ -28,17 +28,17 @@ import {
 
 import { SetStateAction, useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import { UUID } from 'crypto';
 import { AppState } from 'redux/reducer';
 import { RootNetworkInfos, RootNetworkMetadata } from '../network-modifications/network-modification-menu.type';
 import { getCaseImportParameters } from 'services/network-conversion';
 import { deleteRootNetworks, updateRootNetwork } from 'services/root-network';
-import { setCurrentRootNetworkUuid } from 'redux/actions';
 import { isChecked, isPartial } from '../network-modifications/network-modification-node-editor-utils';
 import RootNetworkDialog, { FormData } from 'components/dialogs/root-network/root-network-dialog';
 import { customizeCurrentParameters, formatCaseImportParameters } from '../../util/case-import-parameters';
+import { useSyncNavigationActions } from 'hooks/use-sync-navigation-actions';
 
 const styles = {
     checkboxListItem: (theme: Theme) => ({
@@ -126,10 +126,10 @@ const RootNetworkNodeEditor: React.FC<RootNetworkNodeEditorProps> = ({
 
     const currentNode = useSelector((state: AppState) => state.currentTreeNode);
     const currentRootNetworkUuid = useSelector((state: AppState) => state.currentRootNetworkUuid);
+    const { setCurrentRootNetworkUuidWithSync } = useSyncNavigationActions();
 
     const [rootNetworkModificationDialogOpen, setRootNetworkModificationDialogOpen] = useState(false);
     const [editedRootNetwork, setEditedRootNetwork] = useState<RootNetworkMetadata | undefined>(undefined);
-    const dispatch = useDispatch();
 
     const doDeleteRootNetwork = useCallback(() => {
         const selectedRootNetworksUuid = selectedItems.map((item) => item.rootNetworkUuid);
@@ -157,7 +157,7 @@ const RootNetworkNodeEditor: React.FC<RootNetworkNodeEditorProps> = ({
             return (
                 <IconButton
                     onClick={() => {
-                        dispatch(setCurrentRootNetworkUuid(rootNetwork.rootNetworkUuid));
+                        setCurrentRootNetworkUuidWithSync(rootNetwork.rootNetworkUuid);
                     }}
                     disabled={rootNetwork.isCreating || isRootNetworksProcessing}
                 >
@@ -171,7 +171,7 @@ const RootNetworkNodeEditor: React.FC<RootNetworkNodeEditorProps> = ({
                 </IconButton>
             );
         },
-        [currentRootNetworkUuid, dispatch, isRootNetworksProcessing]
+        [currentRootNetworkUuid, isRootNetworksProcessing, setCurrentRootNetworkUuidWithSync]
     );
 
     useEffect(() => {

src/components/graph/menus/root-network/use-root-network-notifications.ts

@@ -10,13 +10,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from 'redux/reducer';
 import { NotificationsUrlKeys, useNotificationsListener, useSnackMessage } from '@gridsuite/commons-ui';
 import { fetchRootNetworks } from 'services/root-network';
-import { setCurrentRootNetworkUuid, setMonoRootStudy, setRootNetworks } from 'redux/actions';
+import { setMonoRootStudy, setRootNetworks } from 'redux/actions';
 import { RootNetworkMetadata } from '../network-modifications/network-modification-menu.type';
 import {
     isRootNetworkDeletionStartedNotification,
     isRootNetworksUpdatedNotification,
     isRootNetworkUpdateFailedNotification,
 } from 'types/notification-types';
+import { useSyncNavigationActions } from 'hooks/use-sync-navigation-actions';
 
 type UseRootNetworkNotificationsProps = {
     setIsRootNetworksProcessing: React.Dispatch<SetStateAction<boolean>>;
@@ -28,6 +29,7 @@ export const useRootNetworkNotifications = ({ setIsRootNetworksProcessing }: Use
     const studyUuid = useSelector((state: AppState) => state.studyUuid);
     const currentRootNetworkUuid = useSelector((state: AppState) => state.currentRootNetworkUuid);
     const rootNetworks = useSelector((state: AppState) => state.rootNetworks);
+    const { setCurrentRootNetworkUuidWithSync } = useSyncNavigationActions();
 
     const doFetchRootNetworks = useCallback(() => {
         if (studyUuid) {
@@ -90,11 +92,11 @@ export const useRootNetworkNotifications = ({ setIsRootNetworksProcessing }: Use
                     (rootNetwork) => !deletedRootNetworksUuids.includes(rootNetwork.rootNetworkUuid)
                 );
                 if (newSelectedRootNetwork) {
-                    dispatch(setCurrentRootNetworkUuid(newSelectedRootNetwork.rootNetworkUuid));
+                    setCurrentRootNetworkUuidWithSync(newSelectedRootNetwork.rootNetworkUuid);
                 }
             }
         },
-        [currentRootNetworkUuid, dispatch, rootNetworks]
+        [currentRootNetworkUuid, rootNetworks, setCurrentRootNetworkUuidWithSync]
     );
 
     useNotificationsListener(NotificationsUrlKeys.STUDY, {

src/components/network-modification-tree.jsx

@@ -10,12 +10,7 @@ import { Controls, MiniMap, ReactFlow, useEdgesState, useNodesState, useReactFlo
 import MapIcon from '@mui/icons-material/Map';
 import CenterFocusIcon from '@mui/icons-material/CenterFocusStrong';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import {
-    reorderNetworkModificationTreeNodes,
-    setCurrentTreeNode,
-    setModificationsDrawerOpen,
-    setToggleOptions,
-} from '../redux/actions';
+import { reorderNetworkModificationTreeNodes, setModificationsDrawerOpen, setToggleOptions } from '../redux/actions';
 import { useDispatch, useSelector } from 'react-redux';
 import { isSameNode } from './graph/util/model-functions';
 import PropTypes from 'prop-types';
@@ -36,6 +31,8 @@ import { updateNodesColumnPositions } from '../services/study/tree-subtree.ts';
 import { useSnackMessage } from '@gridsuite/commons-ui';
 import { groupIdSuffix } from './graph/nodes/labeled-group-node.type';
 import { StudyDisplayMode } from './network-modification.type';
+import { useSyncNavigationActions } from 'hooks/use-sync-navigation-actions';
+import { NodeType } from './graph/tree-node.type';
 
 const styles = (theme) => ({
     flexGrow: 1,
@@ -57,6 +54,7 @@ const NetworkModificationTree = ({ onNodeContextMenu, studyUuid, onTreePanelResi
     const { snackError } = useSnackMessage();
 
     const currentNode = useSelector((state) => state.currentTreeNode);
+    const { setCurrentTreeNodeWithSync } = useSyncNavigationActions();
 
     const treeModel = useSelector((state) => state.networkModificationTreeModel);
 
@@ -125,24 +123,26 @@ const NetworkModificationTree = ({ onNodeContextMenu, studyUuid, onTreePanelResi
         );
     }, []);
 
+    // close modifications/ event scenario when current node is root
+    useEffect(() => {
+        if (currentNode?.type === NodeType.ROOT) {
+            const newOptions = handleRootNodeClick(toggleOptions);
+            if (newOptions !== toggleOptions) {
+                dispatch(setToggleOptions(newOptions));
+            }
+        }
+    }, [currentNode, dispatch, handleRootNodeClick, toggleOptions]);
+
     const onNodeClick = useCallback(
         (event, node) => {
-            if (node.type === 'NETWORK_MODIFICATION') {
+            if (node.type === NodeType.NETWORK_MODIFICATION) {
                 dispatch(setModificationsDrawerOpen());
             }
-            if (node.type === 'ROOT') {
-                handleRootNodeClick(toggleOptions, dispatch);
-
-                const newOptions = handleRootNodeClick(toggleOptions);
-                if (newOptions !== toggleOptions) {
-                    dispatch(setToggleOptions(newOptions));
-                }
-            }
             if (!isSameNode(currentNode, node)) {
-                dispatch(setCurrentTreeNode(node));
+                setCurrentTreeNodeWithSync(node);
             }
         },
-        [currentNode, dispatch, handleRootNodeClick, toggleOptions]
+        [currentNode, dispatch, setCurrentTreeNodeWithSync]
     );
 
     const toggleMinimap = useCallback(() => {

src/components/study-navigation-sync-toggle.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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 { useDispatch, useSelector } from 'react-redux';
+import { ToggleButton, Tooltip } from '@mui/material';
+import { Sync, SyncDisabled } from '@mui/icons-material';
+import { selectSyncEnabled } from '../redux/actions';
+import { AppState } from 'redux/reducer';
+import { useIntl } from 'react-intl';
+import { useStudyScopedNavigationKeys } from 'hooks/use-study-scoped-navigation-keys';
+
+const StudyNavigationSyncToggle = () => {
+    const dispatch = useDispatch();
+    const syncEnabled = useSelector((state: AppState) => state.syncEnabled);
+    const currentTreeNode = useSelector((state: AppState) => state.currentTreeNode);
+    const currentRootNetworkUuid = useSelector((state: AppState) => state.currentRootNetworkUuid);
+    const intl = useIntl();
+
+    const STORAGE_KEYS = useStudyScopedNavigationKeys();
+
+    const handleToggle = () => {
+        const newValue = !syncEnabled;
+        dispatch(selectSyncEnabled(newValue));
+        try {
+            localStorage.setItem(STORAGE_KEYS.SYNC_ENABLED, JSON.stringify(newValue));
+            if (newValue) {
+                // Save current values when enabling sync for other tabs
+                localStorage.setItem(STORAGE_KEYS.TREE_NODE, JSON.stringify(currentTreeNode));
+                localStorage.setItem(STORAGE_KEYS.ROOT_NETWORK_UUID, JSON.stringify(currentRootNetworkUuid));
+            }
+        } catch (err) {
+            console.warn('Failed to toggle sync:', err);
+        }
+    };
+
+    return (
+        <Tooltip
+            title={
+                syncEnabled
+                    ? intl.formatMessage({ id: 'disableNavigationSync' })
+                    : intl.formatMessage({ id: 'enableNavigationSync' })
+            }
+        >
+            <ToggleButton value={'sync'} selected={syncEnabled} onChange={handleToggle} size="small">
+                {syncEnabled ? <Sync /> : <SyncDisabled />}
+            </ToggleButton>
+        </Tooltip>
+    );
+};
+
+export default StudyNavigationSyncToggle;

src/constants/study-navigation-sync-constants.ts

@@ -0,0 +1,12 @@
+/**
+ * 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/.
+ */
+
+export const BASE_KEYS = {
+    SYNC_ENABLED: 'SYNC_ENABLED',
+    ROOT_NETWORK_UUID: 'ROOT_NETWORK_UUID',
+    TREE_NODE: 'TREE_NODE',
+};