Skip to content

[WIP] refactor(NetworkAreaDiagramContent): try using useEffectEvent for clarity #3709

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sBouzols wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[WIP] refactor(NetworkAreaDiagramContent): try using useEffectEvent for clarity #3709

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 66 additions & 65 deletions ...components/grid-layout/cards/diagrams/networkAreaDiagram/network-area-diagram-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

import { useLayoutEffect, useRef, useCallback, useState, useEffect, memo } from 'react';
import { useLayoutEffect, useRef, useCallback, useState, useEffect, memo, useEffectEvent } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import RunningStatus from 'components/utils/running-status';
import {
Expand Down Expand Up @@ -106,7 +106,7 @@ const NetworkAreaDiagramContent = memo(function NetworkAreaDiagramContent(props:
showInSpreadsheet,
onSaveNad,
} = props;
const svgRef = useRef(null);
const svgRef = useRef<HTMLElement>(null);
const { snackError, snackInfo } = useSnackMessage();
const diagramViewerRef = useRef<NetworkAreaDiagramViewer | null>(null);
const loadFlowStatus = useSelector((state: AppState) => state.computingStatus[ComputingType.LOAD_FLOW]);
Expand All @@ -126,10 +126,6 @@ const NetworkAreaDiagramContent = memo(function NetworkAreaDiagramContent(props:
const dispatch = useDispatch();

// refs to keep useLayoutEffect and callbacks stable
const isEditNadModeRef = useRef(isEditNadMode);
const positionsRef = useRef(positions);
isEditNadModeRef.current = isEditNadMode;
positionsRef.current = positions;
// Update drag interaction without full viewer reinitialization
if (diagramViewerRef.current) {
diagramViewerRef.current.enableDragInteraction = isEditNadMode;
Expand All @@ -153,7 +149,7 @@ const NetworkAreaDiagramContent = memo(function NetworkAreaDiagramContent(props:
const handleToggleHover: OnToggleNadHoverCallbackType = useCallback(
(shouldDisplay: boolean, mousePosition: Point | null, equipmentId: string, equipmentType: string) => {
// Do not show the hover in edit mode
if (isEditNadModeRef.current) {
if (isEditNadMode) {
return;
}
if (mousePosition) {
Expand All @@ -175,13 +171,13 @@ const NetworkAreaDiagramContent = memo(function NetworkAreaDiagramContent(props:
setShouldDisplayTooltip(false);
}
},
[]
[isEditNadMode]
);

const handleNodeLeftClick: OnSelectNodeCallbackType = useCallback(
(equipmentId, nodeId, mousePosition) => {
if (mousePosition && !loadingState) {
if (isEditNadModeRef.current) {
if (isEditNadMode) {
setSelectedVoltageLevelId(equipmentId);
setShouldDisplayMenu(true);
setMenuAnchorPosition(mousePosition ? { mouseX: mousePosition.x, mouseY: mousePosition.y } : null);
Expand All @@ -190,7 +186,7 @@ const NetworkAreaDiagramContent = memo(function NetworkAreaDiagramContent(props:
}
}
},
[onVoltageLevelClick, loadingState]
[loadingState, isEditNadMode, onVoltageLevelClick]
);

const handleSaveNadConfig = (directoryData: IElementCreationDialog) => {
Expand Down Expand Up @@ -268,7 +264,7 @@ const NetworkAreaDiagramContent = memo(function NetworkAreaDiagramContent(props:

const showEquipmentMenu = useCallback(
(svgId: string, equipmentId: string, equipmentType: string, mousePosition: Point) => {
if (isEditNadModeRef.current || !equipmentsWithContextualMenu.includes(equipmentType)) {
if (isEditNadMode || !equipmentsWithContextualMenu.includes(equipmentType)) {
return;
}

Expand Down Expand Up @@ -326,7 +322,15 @@ const NetworkAreaDiagramContent = memo(function NetworkAreaDiagramContent(props:
}
}
},
[additionalMetadata, openEquipmentMenu, currentNode?.id, currentRootNetworkUuid, studyUuid, snackError]
[
isEditNadMode,
openEquipmentMenu,
additionalMetadata?.voltageLevels,
studyUuid,
currentNode?.id,
currentRootNetworkUuid,
snackError,
]
);

const handleAddVoltageLevel = useCallback(
Expand Down Expand Up @@ -382,24 +386,24 @@ const NetworkAreaDiagramContent = memo(function NetworkAreaDiagramContent(props:

const handleMoveNode = useCallback(
(equipmentId: string, nodeId: string, x: number, y: number) => {
const updatedPositions = positionsRef.current.map((position) =>
const updatedPositions = positions.map((position) =>
position.voltageLevelId === equipmentId ? { ...position, xPosition: x, yPosition: y } : position
);
onUpdatePositions(updatedPositions);
},
[onUpdatePositions]
[onUpdatePositions, positions]
);

const handleMoveTextnode = useCallback(
(equipmentId: string, vlNodeId: string, textNodeId: string, shiftX: number, shiftY: number) => {
const updatedPositions = positionsRef.current.map((position) =>
const updatedPositions = positions.map((position) =>
position.voltageLevelId === equipmentId
? { ...position, xLabelPosition: shiftX, yLabelPosition: shiftY }
: position
);
onUpdatePositions(updatedPositions);
},
[onUpdatePositions]
[onUpdatePositions, positions]
);

const handleReplaceNadConfig = useCallback(
Expand Down Expand Up @@ -451,62 +455,59 @@ const NetworkAreaDiagramContent = memo(function NetworkAreaDiagramContent(props:
return () => globalThis.removeEventListener('workspace:switchWorkspace', handleSwitchWorkspace);
}, [nadPanelId, diagramViewerRef, dispatch]);

const onNadRefresh = useEffectEvent((newSvg: string, newSvgMetadata: DiagramMetadata | undefined) => {
if (!svgRef.current || !newSvg) {
return;
}
// Initializing the diagram viewer
const nadViewerParameters: NadViewerParametersOptions = {
minWidth: MIN_WIDTH,
minHeight: MIN_HEIGHT,
maxWidth: MAX_WIDTH_NETWORK_AREA_DIAGRAM,
maxHeight: MAX_HEIGHT_NETWORK_AREA_DIAGRAM,
enableDragInteraction: isEditNadMode,
enableLevelOfDetail: true,
zoomLevels: NAD_ZOOM_LEVELS,
addButtons: false,
onMoveNodeCallback: handleMoveNode,
onMoveTextNodeCallback: handleMoveTextnode,
onSelectNodeCallback: handleNodeLeftClick,
onToggleHoverCallback: handleToggleHover,
onRightClickCallback: showEquipmentMenu,
initialViewBox: nadViewBox[nadPanelId] ?? diagramViewerRef?.current?.getViewBox(),
};
const diagramViewer = new NetworkAreaDiagramViewer(
svgRef.current,
newSvg,
newSvgMetadata ?? null,
nadViewerParameters
);

// Repositioning the nodes with specified positions
if (positions.length > 0) {
for (const position of positions) {
if (position.xPosition !== undefined && position.yPosition !== undefined) {
diagramViewer.moveNodeToCoordinates(
position.voltageLevelId,
position.xPosition,
position.yPosition
);
}
}
}
// We keep a reference of the diagram viewer to get its viewbox for the next render.
diagramViewerRef.current = diagramViewer;
});

/**
* DIAGRAM CONTENT BUILDING
*/

useLayoutEffect(() => {
if (svg && svgRef.current && !loadingState) {
const nadViewerParameters: NadViewerParametersOptions = {
minWidth: MIN_WIDTH,
minHeight: MIN_HEIGHT,
maxWidth: MAX_WIDTH_NETWORK_AREA_DIAGRAM,
maxHeight: MAX_HEIGHT_NETWORK_AREA_DIAGRAM,
enableDragInteraction: isEditNadModeRef.current,
enableLevelOfDetail: true,
zoomLevels: NAD_ZOOM_LEVELS,
addButtons: false,
onMoveNodeCallback: handleMoveNode,
onMoveTextNodeCallback: handleMoveTextnode,
onSelectNodeCallback: handleNodeLeftClick,
onToggleHoverCallback: handleToggleHover,
onRightClickCallback: showEquipmentMenu,
initialViewBox: nadViewBox[nadPanelId] ?? diagramViewerRef?.current?.getViewBox(),
};
const diagramViewer = new NetworkAreaDiagramViewer(
svgRef.current,
svg,
svgMetadata ?? null,
nadViewerParameters
);

// Repositioning the nodes with specified positions
if (positionsRef.current.length > 0) {
for (const position of positionsRef.current) {
if (position.xPosition !== undefined && position.yPosition !== undefined) {
diagramViewer.moveNodeToCoordinates(
position.voltageLevelId,
position.xPosition,
position.yPosition
);
}
}
}
// We keep a reference of the diagram viewer to get its viewbox for the next render.
diagramViewerRef.current = diagramViewer;
onNadRefresh(svg, svgMetadata);
}
}, [
svg,
svgMetadata,
nadViewBox,
nadPanelId,
loadingState,
handleMoveNode,
handleMoveTextnode,
handleNodeLeftClick,
handleToggleHover,
showEquipmentMenu,
]);
}, [svg, svgMetadata, nadViewBox, nadPanelId, loadingState]);

const closeMenu = () => {
setMenuAnchorPosition(null);
Expand Down
Loading