refactoring

src/components/grid-layout/cards/diagrams/networkAreaDiagram/network-area-diagram-content.tsx

@@ -29,12 +29,12 @@ import {
 import LinearProgress from '@mui/material/LinearProgress';
 import Box from '@mui/material/Box';
 import { AppState } from 'redux/reducer';
-import EquipmentPopover from 'components/tooltips/equipment-popover';
 import type { UUID } from 'node:crypto';
 import { Point } from '@svgdotjs/svg.js';
 import {
     ComputingType,
     ElementType,
+    EquipmentInfos,
     EquipmentType,
     ExtendedEquipmentType,
     IElementCreationDialog,
@@ -54,6 +54,11 @@ import { styles } from '../diagram-styles';
 import { fetchNetworkElementInfos } from 'services/study/network';
 import { EQUIPMENT_INFOS_TYPES } from 'components/utils/equipment-types';
 
+import { EquipmentPopoverMap } from 'components/tooltips/equipment-popover-map';
+import BranchPopoverContent from 'components/tooltips/branch-popover-content';
+import GenericEquipmentPopover from 'components/tooltips/generic-equipment-popover';
+import { useIntl } from 'react-intl';
+
 type NetworkAreaDiagramContentProps = {
     readonly voltageLevelIds: string[];
     readonly voltageLevelToExpandIds: string[];
@@ -112,6 +117,7 @@ function NetworkAreaDiagramContent(props: NetworkAreaDiagramContentProps) {
     const currentNode = useSelector((state: AppState) => state.currentTreeNode);
     const currentRootNetworkUuid = useSelector((state: AppState) => state.currentRootNetworkUuid);
     const [isEditNadMode, setIsEditNadMode] = useState<boolean>(false);
+    const intl = useIntl();
 
     // save nad when exiting edit mode
     const handleSetIsEditNadMode = useCallback(
@@ -475,19 +481,33 @@ function NetworkAreaDiagramContent(props: NetworkAreaDiagramContentProps) {
      * RENDER
      */
 
+    const displayTooltip = () => {
+        const PopoverContent = EquipmentPopoverMap[hoveredEquipmentType] || BranchPopoverContent;
+
+        return (
+            <GenericEquipmentPopover
+                studyUuid={studyUuid}
+                anchorPosition={anchorPosition}
+                anchorEl={null}
+                equipmentId={hoveredEquipmentId}
+                equipmentType={hoveredEquipmentType as EquipmentType}
+                loadFlowStatus={loadFlowStatus}
+            >
+                {(equipmentInfos: EquipmentInfos) => (
+                    <PopoverContent
+                        equipmentInfos={equipmentInfos}
+                        loadFlowStatus={loadFlowStatus}
+                        equipmentType={hoveredEquipmentType}
+                        intl={intl}
+                    />
+                )}
+            </GenericEquipmentPopover>
+        );
+    };
     return (
         <>
             <Box height={2}>{loadingState && <LinearProgress />}</Box>
-            {visible && shouldDisplayTooltip && (
-                <EquipmentPopover
-                    studyUuid={studyUuid}
-                    anchorPosition={anchorPosition}
-                    anchorEl={null}
-                    equipmentType={hoveredEquipmentType}
-                    equipmentId={hoveredEquipmentId}
-                    loadFlowStatus={loadFlowStatus}
-                />
-            )}
+            {visible && shouldDisplayTooltip && displayTooltip()}
             {shouldDisplayMenu && (
                 <NodeContextMenu
                     open={!!menuAnchorPosition}

src/components/grid-layout/cards/diagrams/singleLineDiagram/single-line-diagram-content.tsx

@@ -29,10 +29,16 @@ import {
 import { isNodeReadOnly } from '../../../../graph/util/model-functions';
 import { useIsAnyNodeBuilding } from '../../../../utils/is-any-node-building-hook';
 import { useTheme } from '@mui/material/styles';
-import { ComputingType, EquipmentType, mergeSx, snackWithFallback, useSnackMessage } from '@gridsuite/commons-ui';
+import {
+    ComputingType,
+    EquipmentInfos,
+    EquipmentType,
+    mergeSx,
+    snackWithFallback,
+    useSnackMessage,
+} from '@gridsuite/commons-ui';
 import Box from '@mui/material/Box';
 import LinearProgress from '@mui/material/LinearProgress';
-import EquipmentPopover from '../../../../tooltips/equipment-popover';
 import { updateSwitchState } from '../../../../../services/study/network-modifications';
 import { BusMenu } from 'components/menus/bus-menu';
 import { PARAM_DEVELOPER_MODE } from 'utils/config-params';
@@ -47,6 +53,11 @@ import { useEquipmentMenu } from '../../../../../hooks/use-equipment-menu';
 import useEquipmentDialogs from 'hooks/use-equipment-dialogs';
 import useComputationDebug from '../../../../../hooks/use-computation-debug';
 
+import GenericEquipmentPopover from 'components/tooltips/generic-equipment-popover';
+import { BranchPopoverContent } from 'components/tooltips/branch-popover-content';
+import { useIntl } from 'react-intl';
+import { EquipmentPopoverMap } from 'components/tooltips/equipment-popover-map';
+
 interface SingleLineDiagramContentProps {
     readonly showInSpreadsheet: (menu: { equipmentId: string | null; equipmentType: EquipmentType | null }) => void;
     readonly studyUuid: UUID;
@@ -94,6 +105,7 @@ function SingleLineDiagramContent(props: SingleLineDiagramContentProps) {
     const { snackError } = useSnackMessage();
     const currentNode = useSelector((state: AppState) => state.currentTreeNode);
     const currentRootNetworkUuid = useSelector((state: AppState) => state.currentRootNetworkUuid);
+    const intl = useIntl();
 
     const [modificationInProgress, setModificationInProgress] = useState(false);
     const isAnyNodeBuilding = useIsAnyNodeBuilding();
@@ -227,7 +239,10 @@ function SingleLineDiagramContent(props: SingleLineDiagramContentProps) {
                     debug && subscribeDebug(ComputingType.SHORT_CIRCUIT_ONE_BUS);
                 })
                 .catch((error) => {
-                    snackWithFallback(snackError, error, { headerId: 'startShortCircuitError' });
+                    snackError({
+                        messageTxt: error.message,
+                        headerId: 'startShortCircuitError',
+                    });
                     dispatch(setComputingStatus(ComputingType.SHORT_CIRCUIT_ONE_BUS, RunningStatus.FAILED));
                     resetOneBusShortcircuitAnalysisLoader();
                 })
@@ -316,14 +331,25 @@ function SingleLineDiagramContent(props: SingleLineDiagramContentProps) {
     );
 
     const displayTooltip = () => {
+        const PopoverContent = EquipmentPopoverMap[hoveredEquipmentType] || BranchPopoverContent;
+
         return (
-            <EquipmentPopover
+            <GenericEquipmentPopover
                 studyUuid={studyUuid}
-                anchorEl={equipmentPopoverAnchorEl}
-                equipmentType={hoveredEquipmentType}
+                anchorEl={equipmentPopoverAnchorEl as HTMLElement}
                 equipmentId={hoveredEquipmentId}
+                equipmentType={hoveredEquipmentType as EquipmentType}
                 loadFlowStatus={loadFlowStatus}
-            />
+            >
+                {(equipmentInfos: EquipmentInfos) => (
+                    <PopoverContent
+                        equipmentInfos={equipmentInfos}
+                        loadFlowStatus={loadFlowStatus}
+                        equipmentType={hoveredEquipmentType}
+                        intl={intl}
+                    />
+                )}
+            </GenericEquipmentPopover>
         );
     };
 

src/components/network/network-map-panel.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 /**
  * Copyright (c) 2022, RTE (http://www.rte-france.com)
  * This Source Code Form is subject to the terms of the Mozilla Public
@@ -53,7 +54,6 @@ import { EQUIPMENT_TYPES } from '../utils/equipment-types';
 import { deleteEquipment } from '../../services/study/network-modifications';
 import { fetchLinePositions, fetchSubstationPositions } from '../../services/study/geo-data';
 import { useMapBoxToken } from './network-map/use-mapbox-token';
-import EquipmentPopover from '../tooltips/equipment-popover';
 import RunningStatus from 'components/utils/running-status';
 import { useGetStudyImpacts } from 'hooks/use-get-study-impacts';
 import { ROOT_NODE_LABEL } from '../../constants/node.constant';
@@ -62,7 +62,7 @@ import { AppState } from 'redux/reducer';
 import { isReactFlowRootNodeData } from 'redux/utils';
 import { isLoadflowResultNotification, isRootNetworksUpdatedNotification } from 'types/notification-types';
 import { CurrentTreeNode } from 'components/graph/tree-node.type';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { Search } from '@mui/icons-material';
 import { TopBarEquipmentSearchDialog } from 'components/top-bar-equipment-seach-dialog/top-bar-equipment-search-dialog';
 import { DiagramType } from 'components/grid-layout/cards/diagrams/diagram.type';
@@ -71,6 +71,9 @@ import SelectionCreationPanel from './selection-creation-panel/selection-creatio
 import { useEquipmentMenu } from '../../hooks/use-equipment-menu';
 import useEquipmentDialogs from 'hooks/use-equipment-dialogs';
 import { getNominalVoltageColor } from 'utils/colors';
+import GenericEquipmentPopover from 'components/tooltips/generic-equipment-popover';
+import { EquipmentPopoverMap } from 'components/tooltips/equipment-popover-map';
+import BranchPopoverContent from 'components/tooltips/branch-popover-content';
 
 const LABELS_ZOOM_THRESHOLD = 9;
 const ARROWS_ZOOM_THRESHOLD = 7;
@@ -146,6 +149,7 @@ export const NetworkMapPanel = ({
     const lineFlowMode = networkVisuParams.mapParameters.lineFlowMode as LineFlowMode;
     const isInDrawingMode = useStateBoolean(false);
     const theme = useTheme();
+    const intl = useIntl();
 
     const rootNodeId = useMemo(() => {
         const rootNode = treeModel?.treeNodes.find((node) => node?.data?.label === ROOT_NODE_LABEL);
@@ -919,18 +923,7 @@ export const NetworkMapPanel = ({
         );
     }
 
-    const renderLinePopover = useCallback<NonNullable<NetworkMapProps['renderPopover']>>(
-        (elementId, ref) => (
-            <EquipmentPopover
-                studyUuid={studyUuid}
-                anchorEl={ref.current}
-                equipmentId={elementId}
-                equipmentType={EQUIPMENT_TYPES.LINE}
-                loadFlowStatus={loadFlowStatus}
-            />
-        ),
-        [loadFlowStatus, studyUuid]
-    );
+
 
     const loadMapManually = useCallback(() => {
         if (!isMapEquipmentsInitialized) {
@@ -955,6 +948,31 @@ export const NetworkMapPanel = ({
         updateMapEquipmentsAndGeoData,
     ]);
 
+        const renderLinePopover = useCallback<NonNullable<NetworkMapProps['renderPopover']>>(
+            (elementId, ref) => {
+                const PopoverContent = EquipmentPopoverMap[EQUIPMENT_TYPES.LINE] || BranchPopoverContent;
+
+                return (
+                    <GenericEquipmentPopover
+                        studyUuid={studyUuid}
+                        anchorEl={ref.current}
+                        equipmentId={elementId}
+                        equipmentType={EquipmentType.LINE}
+                        loadFlowStatus={loadFlowStatus}
+                    >
+                        {(equipmentInfos: EquipmentInfos) => (
+                            <PopoverContent
+                                equipmentInfos={equipmentInfos}
+                                loadFlowStatus={loadFlowStatus}
+                                equipmentType={EQUIPMENT_TYPES.LINE}
+                                intl={intl}
+                            />
+                        )}
+                    </GenericEquipmentPopover>
+                );
+            },
+            [loadFlowStatus, studyUuid, intl]
+        );
     const leaveDrawingMode = useCallback(() => {
         // clear the user drawing and go back to simple select.
         networkMapRef.current?.getMapDrawer().deleteAll();

src/components/tooltips/branch-popover-content.tsx

@@ -0,0 +1,40 @@
+/* eslint-disable prettier/prettier */
+import { EquipmentInfos, EquipmentType } from '@gridsuite/commons-ui';
+import { Grid } from '@mui/material';
+import { RunningStatus } from '../utils/running-status';
+import { IntlShape } from 'react-intl';
+import { renderVoltageLevelCharacteristics } from './generic-equipment-popover-utils';
+import { CharacteristicsTable } from './carateristics-table';
+import { CurrentTable } from './current-table';
+import { LimitsTable } from './limit-table';
+
+interface BranchPopoverContentProps {
+    equipmentInfos: any;
+    loadFlowStatus?: RunningStatus;
+    intl: IntlShape;
+    equipmentType?: EquipmentType;
+}
+
+export const BranchPopoverContent: React.FC<BranchPopoverContentProps> = ({
+    equipmentInfos,
+    loadFlowStatus,
+    intl,
+    equipmentType,
+}) => {
+    return (
+        <Grid container direction="column" rowSpacing={2} alignItems="center">
+             <CharacteristicsTable
+                equipmentInfos={equipmentInfos}
+                intl={intl}
+                renderVoltageLevelCharacteristics={(equipmentInfos, intl) =>
+                    renderVoltageLevelCharacteristics(equipmentInfos, equipmentType, intl)
+                }
+            />
+             <CurrentTable equipmentInfos={equipmentInfos} intl={intl} loadFlowStatus={loadFlowStatus} />
+
+             <LimitsTable equipmentInfos={equipmentInfos} intl={intl} loadFlowStatus={loadFlowStatus} />
+        </Grid>
+    );
+};
+
+export default BranchPopoverContent;

src/components/tooltips/carateristics-table.tsx

@@ -0,0 +1,41 @@
+import { EquipmentInfos } from '@gridsuite/commons-ui';
+import { Table, TableHead, TableRow, TableCell, TableBody, TableContainer, Paper, Grid } from '@mui/material';
+import { MuiStyles } from '@gridsuite/commons-ui';
+import { IntlShape } from 'react-intl';
+import { renderCommonCharacteristics, styles } from './generic-equipment-popover-utils';
+
+interface CharacteristicsTableProps {
+    equipmentInfos: EquipmentInfos;
+    intl: IntlShape;
+    renderVoltageLevelCharacteristics?: (equipmentInfos: EquipmentInfos, intl: IntlShape) => JSX.Element;
+}
+
+export const CharacteristicsTable: React.FC<CharacteristicsTableProps> = ({
+    equipmentInfos,
+    intl,
+    renderVoltageLevelCharacteristics,
+}) => {
+    return (
+        <Grid item sx={{ width: '100%' }}>
+            <TableContainer sx={styles.table}>
+                <Table size="small" sx={{ width: '100%', tableLayout: 'auto' }}>
+                    <TableHead>
+                        <TableRow>
+                            <TableCell sx={styles.cell} />
+                            <TableCell sx={{ ...styles.cell, fontWeight: 'bold' }}>
+                                {intl.formatMessage({ id: 'characteristic' })}
+                            </TableCell>
+                            <TableCell sx={{ ...styles.cell, fontWeight: 'bold' }}>
+                                {intl.formatMessage({ id: 'values' })}
+                            </TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {renderCommonCharacteristics(equipmentInfos, intl)}
+                        {renderVoltageLevelCharacteristics && renderVoltageLevelCharacteristics(equipmentInfos, intl)}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+        </Grid>
+    );
+};

src/components/tooltips/current-table.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Table, TableHead, TableRow, TableCell, TableBody, TableContainer, Paper, Grid } from '@mui/material';
+import { EquipmentInfos, mergeSx } from '@gridsuite/commons-ui';
+import { RunningStatus } from '../utils/running-status';
+import { IntlShape } from 'react-intl';
+import { formatValue, styles } from './generic-equipment-popover-utils';
+
+interface CurrentTableProps {
+    equipmentInfos: any;
+    intl: IntlShape;
+    loadFlowStatus?: RunningStatus;
+}
+
+export const CurrentTable: React.FC<CurrentTableProps> = ({ equipmentInfos, intl, loadFlowStatus }) => {
+    return (
+        <Grid item sx={{ width: '100%' }}>
+            <TableContainer sx={styles.table}>
+                <Table size="small" sx={{ width: '100%', tableLayout: 'auto' }}>
+                    <TableHead>
+                        <TableRow>
+                            <TableCell sx={{ ...styles.cell, fontWeight: 'bold' }}>
+                                {intl.formatMessage({ id: 'CURRENT' })}
+                            </TableCell>
+                            <TableCell sx={{ ...styles.cell, fontWeight: 'bold' }}>
+                                {formatValue(equipmentInfos?.voltageLevelId1)}
+                            </TableCell>
+                            <TableCell sx={{ ...styles.cell, fontWeight: 'bold' }}>
+                                {formatValue(equipmentInfos?.voltageLevelId2)}
+                            </TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        <TableRow>
+                            <TableCell sx={styles.cell}>{intl.formatMessage({ id: 'I_(A)' })}</TableCell>
+                            <TableCell
+                                sx={mergeSx(styles.cell, {
+                                    opacity: loadFlowStatus === RunningStatus.SUCCEED ? 1 : 0.2,
+                                })}
+                            >
+                                {formatValue(Math.round(equipmentInfos?.i1))}
+                            </TableCell>
+                            <TableCell
+                                sx={mergeSx(styles.cell, {
+                                    opacity: loadFlowStatus === RunningStatus.SUCCEED ? 1 : 0.2,
+                                })}
+                            >
+                                {formatValue(Math.round(equipmentInfos?.i2))}
+                            </TableCell>
+                        </TableRow>
+                    </TableBody>
+                </Table>
+            </TableContainer>
+        </Grid>
+    );
+};

src/components/tooltips/equipment-popover-map.tsx

@@ -0,0 +1,6 @@
+import { EQUIPMENT_TYPES } from 'components/utils/equipment-types';
+import BranchPopoverContent from './branch-popover-content';
+
+export const EquipmentPopoverMap: Record<string, React.FC<any>> = {
+    [(EQUIPMENT_TYPES.LINE, EQUIPMENT_TYPES.TWO_WINDINGS_TRANSFORMER)]: BranchPopoverContent,
+};