diff --git a/src/components/graph/nodes/network-modification-node.tsx b/src/components/graph/nodes/network-modification-node.tsx index a95e18fc53..05b3085f5d 100644 --- a/src/components/graph/nodes/network-modification-node.tsx +++ b/src/components/graph/nodes/network-modification-node.tsx @@ -9,7 +9,7 @@ import { NodeProps, Position } from '@xyflow/react'; import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; import { useSelector } from 'react-redux'; import Box from '@mui/material/Box'; -import { LIGHT_THEME, type MuiStyles, OverflowableText } from '@gridsuite/commons-ui'; +import { LIGHT_THEME, type MuiStyles } from '@gridsuite/commons-ui'; import { getLocalStorageTheme } from '../../../redux/session-storage/local-storage'; import { BUILD_STATUS } from '../../network/constants'; import { AppState } from 'redux/reducer'; @@ -21,6 +21,7 @@ import NodeOverlaySpinner from './node-overlay-spinner'; import BuildStatusChip from './build-status-chip'; import React from 'react'; import { BuildButton } from './build-button'; +import { Typography } from '@mui/material'; const styles = { networkModificationSelected: (theme) => ({ @@ -43,12 +44,19 @@ const styles = { marginRight: theme.spacing(1), marginBottom: theme.spacing(1), }), - overflowText: (theme) => ({ + typographyText: (theme) => ({ color: theme.palette.text.primary, fontSize: '20px', fontWeight: 400, lineHeight: 'normal', textAlign: 'left', + display: '-webkit-box', + WebkitBoxOrient: 'vertical', + WebkitLineClamp: 2, + overflow: 'hidden', + width: 'auto', + textOverflow: 'ellipsis', + wordBreak: 'break-word', }), footerBox: (theme) => ({ display: 'flex', @@ -118,12 +126,9 @@ const NetworkModificationNode = (props: NodeProps) => { ]} > - + + {props.data.label} + diff --git a/src/components/network-modification-tree.jsx b/src/components/network-modification-tree.jsx index 1e784d7f9a..3213267c9f 100644 --- a/src/components/network-modification-tree.jsx +++ b/src/components/network-modification-tree.jsx @@ -5,13 +5,13 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { Box } from '@mui/material'; +import { Box, Tooltip } from '@mui/material'; import { Controls, ReactFlow, useEdgesState, useNodesState, useReactFlow } from '@xyflow/react'; import CenterFocusIcon from '@mui/icons-material/CenterFocusStrong'; -import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react'; +import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'; import { reorderNetworkModificationTreeNodes, setModificationsDrawerOpen, setToggleOptions } from '../redux/actions'; import { useDispatch, useSelector } from 'react-redux'; -import { isSameNode } from './graph/util/model-functions'; +import { isRootNode, isSameNode } from './graph/util/model-functions'; import PropTypes from 'prop-types'; import CropFreeIcon from '@mui/icons-material/CropFree'; import { nodeTypes } from './graph/util/model-constants'; @@ -31,21 +31,32 @@ 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, - height: '100%', - backgroundColor: theme.reactflow.backgroundColor, - '.react-flow': { - '--xy-edge-stroke': theme.reactflow.edge.stroke, - }, - '.react-flow__attribution a': { - color: theme.palette.text.primary, - }, - '.react-flow__attribution': { - backgroundColor: theme.palette.background.paper, - }, -}); +import { useIntl } from 'react-intl'; + +const styles = { + modificationTree: (theme) => ({ + flexGrow: 1, + height: '100%', + backgroundColor: theme.reactflow.backgroundColor, + '.react-flow': { + '--xy-edge-stroke': theme.reactflow.edge.stroke, + }, + '.react-flow__attribution a': { + color: theme.palette.text.primary, + }, + '.react-flow__attribution': { + backgroundColor: theme.palette.background.paper, + }, + }), + labelBox: (theme) => ({ + flexGrow: 1, + display: 'flex', + alignItems: 'flex-end', + whiteSpace: 'normal', + wordBreak: 'break-word', + fontWeight: 'bold', + }), +}; const NetworkModificationTree = ({ onNodeContextMenu, studyUuid, onTreePanelResize }) => { const dispatch = useDispatch(); @@ -65,8 +76,13 @@ const NetworkModificationTree = ({ onNodeContextMenu, studyUuid, onTreePanelResi const [nodes, setNodes, onNodesChange] = useNodesState([]); const [edges, setEdges, onEdgesChange] = useEdgesState([]); + const [tooltipOpen, setTooltipOpen] = useState(false); + const [tooltipContent, setTooltipContent] = useState(); + const nodesMap = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]); + const intl = useIntl(); + const updateNodePositions = useCallback(() => { if (treeModel && treeModel.treeNodes?.length > 0) { const [treeNodeWithUpdatedPosition, securityGroupNodes] = getTreeNodesWithUpdatedPositions( @@ -304,55 +320,102 @@ const NetworkModificationTree = ({ onNodeContextMenu, studyUuid, onTreePanelResi } }, [onTreePanelResize, handleFocusNode]); + const handleNodeMouseEnter = useCallback( + (event, node) => { + if (!node?.data || isRootNode(node)) { + return; + } + + const content = ( + + {node.data.label} + + {intl.formatMessage({ id: 'nodeStatus' })} :{' '} + {node.data.globalBuildStatus + ? intl.formatMessage({ id: node.data.globalBuildStatus }) + : intl.formatMessage({ id: 'NOT_BUILT' })} + + + {intl.formatMessage({ id: 'nodeType' })} : {intl.formatMessage({ id: node.data.nodeType })} + + + ); + + setTooltipContent(content); + setTooltipOpen(true); + }, + [intl] + ); + + const handleNodeMouseLeave = useCallback(() => { + setTooltipOpen(false); + }, []); + return ( - - + - - - - - - - - - - + + + + + + + + + + + ); }; diff --git a/src/translations/en.json b/src/translations/en.json index 0712e6b797..8848322e5a 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1615,5 +1615,9 @@ "Object": "Object", "Array": "Array", "Boolean": "Boolean", - "Enum": "Enumeration" + "Enum": "Enumeration", + "nodeType": "Type", + "nodeStatus": "Status", + "CONSTRUCTION": "Construction", + "SECURITY": "Security" } diff --git a/src/translations/fr.json b/src/translations/fr.json index e240729788..ba26107ba9 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -1611,5 +1611,9 @@ "Object": "Objet", "Array": "Tableau", "Boolean": "Booléen", - "Enum": "Énumération" + "Enum": "Énumération", + "nodeType": "Type", + "nodeStatus": "Statut", + "CONSTRUCTION": "Construction", + "SECURITY": "Sécurité" }