Fix and reinstall the minimap

src/components/network-modification-tree.jsx

@@ -6,7 +6,8 @@
  */
 
 import { Box, Tooltip } from '@mui/material';
-import { ReactFlow, Controls, useStore, useReactFlow, ControlButton } from '@xyflow/react';
+import { ReactFlow, Controls, useStore, useReactFlow, ControlButton, MiniMap } from '@xyflow/react';
+import MapIcon from '@mui/icons-material/Map';
 import CenterGraphButton from './graph/util/center-graph-button';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { setModificationsDrawerOpen, setCurrentTreeNode } from '../redux/actions';
@@ -17,6 +18,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import CropFreeIcon from '@mui/icons-material/CropFree';
 import { nodeTypes } from './graph/util/model-constants';
+import { BUILD_STATUS } from './network/constants';
 import { StudyDisplayMode } from './network-modification.type';
 
 // snapGrid value set to [15, 15] which is the default value for ReactFlow
@@ -38,6 +40,32 @@ const NetworkModificationTree = ({
     const treeModel = useSelector((state) => state.networkModificationTreeModel);
 
     const [isMoving, setIsMoving] = useState(false);
+    const [isMinimapOpen, setIsMinimapOpen] = useState(false);
+
+    const nodeColor = useCallback(
+        (node) => {
+            if (!node) {
+                return '#9196a1';
+            }
+            if (node.type === 'ROOT') {
+                return 'rgba(0, 0, 0, 0.0)';
+            }
+            if (node.id === currentNode?.id) {
+                return '#4287f5';
+            }
+            if (node.data?.localBuildStatus === BUILD_STATUS.BUILT) {
+                return '#70d136';
+            }
+            if (node.data?.localBuildStatus === BUILD_STATUS.BUILT_WITH_WARNING) {
+                return '#FFA500';
+            }
+            if (node.data?.localBuildStatus === BUILD_STATUS.BUILT_WITH_ERROR) {
+                return '#DC143C';
+            }
+            return '#9196a1';
+        },
+        [currentNode]
+    );
 
     const onNodeClick = useCallback(
         (event, node) => {
@@ -49,6 +77,10 @@ const NetworkModificationTree = ({
         [dispatch, currentNode]
     );
 
+    const toggleMinimap = useCallback(() => {
+        setIsMinimapOpen((isMinimapOpen) => !isMinimapOpen);
+    }, []);
+
     const onMove = useCallback((flowTransform) => {
         setIsMoving(true);
     }, []);
@@ -160,7 +192,27 @@ const NetworkModificationTree = ({
                         </span>
                     </Tooltip>
                     <CenterGraphButton currentNode={currentNode} />
+                    <Tooltip
+                        placement="left"
+                        title={
+                            isMinimapOpen
+                                ? intl.formatMessage({ id: 'HideMinimap' })
+                                : intl.formatMessage({
+                                      id: 'DisplayMinimap',
+                                  })
+                        }
+                        arrow
+                        enterDelay={TOOLTIP_DELAY}
+                        enterNextDelay={TOOLTIP_DELAY}
+                    >
+                        <span>
+                            <ControlButton onClick={() => toggleMinimap()}>
+                                <MapIcon />
+                            </ControlButton>
+                        </span>
+                    </Tooltip>
                 </Controls>
+                {isMinimapOpen && <MiniMap nodeColor={nodeColor} nodeStrokeWidth={0} />}
             </ReactFlow>
         </Box>
     );

src/translations/en.json

@@ -556,6 +556,8 @@
     "OnlyMin": "Min:\u202F{min}",
     "OnlyMax": "Max:\u202F{max}",
     "CenterSelectedNode": "Center on selected node",
+    "DisplayMinimap": "Display minimap",
+    "HideMinimap": "Hide minimap",
     "DisplayTheWholeTree": "Display the whole tree",
 
     "Logs": "Logs",

src/translations/fr.json

@@ -557,6 +557,8 @@
     "OnlyMin": "Min:\u202F{min}",
     "OnlyMax": "Max:\u202F{max}",
     "CenterSelectedNode": "Centrer sur le nœud sélectionné",
+    "DisplayMinimap": "Afficher la mini-carte",
+    "HideMinimap": "Masquer la mini-carte",
     "DisplayTheWholeTree": "Visualiser l'arbre en entier",
 
     "Logs": "Logs",