Refactor diagram card generic (#3369)

* refactor(DiagramCard): move NAD or SLD code into NADContent or SLDContent components to keep DiagramCard as generic as possible
* remove unnecessary type cast
* refactor(DiagramModel): Add a `disableOnAddCallback` param defaulted to false, to avoid calling onAddDiagram at initialisation.
refactor(GridLayoutPanel): Add `focusOnDiagram` in `addLayoutItem`
* refactor(): remove `diagramAlreadyExists` which kindof duplicates `findSimilarDiagram`
It now more clearly impossible to find a similar NAD.
Add comment
// no good criteria to get similar NAD for now

Signed-off-by: sBouzols <[email protected]>

Author: sBouzols

src/components/grid-layout/cards/diagrams/diagram-card.tsx

@@ -6,18 +6,18 @@
  */
 
 import { Box } from '@mui/material';
-import { forwardRef, MouseEventHandler, Ref, TouchEventHandler, useCallback, useMemo, useState } from 'react';
+import { forwardRef, MouseEventHandler, Ref, TouchEventHandler, useCallback, useMemo } from 'react';
 import CustomCardHeader from '../custom-card-header';
-import { Diagram, DiagramAdditionalMetadata, DiagramParams, DiagramType } from './diagram.type';
+import { Diagram, DiagramAdditionalMetadata, DiagramType } from './diagram.type';
 import type { UUID } from 'node:crypto';
 import AlertCustomMessageNode from 'components/utils/alert-custom-message-node';
 import SingleLineDiagramContent from './singleLineDiagram/single-line-diagram-content';
 import NetworkAreaDiagramContent from './networkAreaDiagram/network-area-diagram-content';
-import { ElementType, EquipmentType, mergeSx } from '@gridsuite/commons-ui';
+import { EquipmentType, mergeSx } from '@gridsuite/commons-ui';
 import { DiagramMetadata, SLDMetadata } from '@powsybl/network-viewer';
 import { useIntl } from 'react-intl';
 import { cardStyles } from '../card-styles';
-import { v4 } from 'uuid';
+import { CreateDiagramFuncType, UpdateDiagramFuncType } from 'components/grid-layout/hooks/use-diagram-model';
 
 interface ReactGridLayoutCustomChildComponentProps {
     style?: React.CSSProperties;
@@ -37,9 +37,8 @@ interface DiagramCardProps extends ReactGridLayoutCustomChildComponentProps {
     onClose: () => void;
     errorMessage?: string;
     showInSpreadsheet: (equipment: { equipmentId: string | null; equipmentType: EquipmentType | null }) => void;
-    createDiagram: (diagram: DiagramParams) => void;
-    updateDiagram: (diagram: Diagram) => void;
-    updateDiagramPositions: (diagram: DiagramParams) => void;
+    createDiagram: CreateDiagramFuncType;
+    updateDiagram: UpdateDiagramFuncType;
     key: string; // Required for React Grid Layout to identify the component
 }
 
@@ -55,155 +54,18 @@ export const DiagramCard = forwardRef((props: DiagramCardProps, ref: Ref<HTMLDiv
         showInSpreadsheet,
         createDiagram,
         updateDiagram,
-        updateDiagramPositions,
         ...reactGridLayoutCustomChildComponentProps
     } = props;
     const { style, children, ...otherProps } = reactGridLayoutCustomChildComponentProps;
 
-    const [diagramsInEditMode, setDiagramsInEditMode] = useState<boolean>(false);
     const intl = useIntl();
 
-    const handleExpandAllVoltageLevels = useCallback(() => {
-        if (diagram.type === DiagramType.NETWORK_AREA_DIAGRAM) {
-            updateDiagram({
-                ...diagram,
-                voltageLevelIds: [],
-                voltageLevelToExpandIds: [...diagram.voltageLevelIds],
-            });
-        }
-    }, [diagram, updateDiagram]);
-
-    const handleExpandVoltageLevelId = useCallback(
-        (voltageLevelIdToExpand: string) => {
-            if (diagram.type === DiagramType.NETWORK_AREA_DIAGRAM) {
-                updateDiagram({
-                    ...diagram,
-                    voltageLevelIds: diagram.voltageLevelIds.filter((id) => id !== voltageLevelIdToExpand),
-                    voltageLevelToExpandIds: [...diagram.voltageLevelToExpandIds, voltageLevelIdToExpand],
-                });
-            }
-        },
-        [diagram, updateDiagram]
-    );
-
-    const handleHideVoltageLevelId = useCallback(
-        (voltageLevelIdToOmit: string) => {
-            if (diagram.type === DiagramType.NETWORK_AREA_DIAGRAM) {
-                updateDiagram({
-                    ...diagram,
-                    voltageLevelIds: diagram.voltageLevelIds.filter((id) => id !== voltageLevelIdToOmit),
-                    voltageLevelToOmitIds: [...diagram.voltageLevelToOmitIds, voltageLevelIdToOmit],
-                });
-            }
-        },
-        [diagram, updateDiagram]
-    );
-
-    const handleAddVoltageLevel = useCallback(
-        (voltageLevelIdToAdd: string) => {
-            if (diagram.type === DiagramType.NETWORK_AREA_DIAGRAM) {
-                if (diagram.voltageLevelIds.includes(voltageLevelIdToAdd)) {
-                    return;
-                }
-                updateDiagram({
-                    ...diagram,
-                    voltageLevelIds: [...diagram.voltageLevelIds, voltageLevelIdToAdd],
-                    voltageLevelToOmitIds: diagram.voltageLevelToOmitIds.filter((id) => id !== voltageLevelIdToAdd),
-                });
-            }
-        },
-        [diagram, updateDiagram]
-    );
-
-    const handleMoveNode = useCallback(
-        (vlId: string, x: number, y: number) => {
-            if (diagram.type === DiagramType.NETWORK_AREA_DIAGRAM) {
-                const updatedPositions = diagram.positions.map((position) =>
-                    position.voltageLevelId === vlId ? { ...position, xPosition: x, yPosition: y } : position
-                );
-
-                updateDiagramPositions({
-                    ...diagram,
-                    positions: updatedPositions,
-                });
-            }
-        },
-        [diagram, updateDiagramPositions]
-    );
-
-    const handleMoveTextnode = useCallback(
-        (vlId: string, x: number, y: number) => {
-            if (diagram.type === DiagramType.NETWORK_AREA_DIAGRAM) {
-                const updatedPositions = diagram.positions.map((position) =>
-                    position.voltageLevelId === vlId ? { ...position, xLabelPosition: x, yLabelPosition: y } : position
-                );
-
-                updateDiagramPositions({
-                    ...diagram,
-                    positions: updatedPositions,
-                });
-            }
-        },
-        [diagram, updateDiagramPositions]
-    );
-    const handleReplaceNad = useCallback(
-        (elementUuid: UUID, elementType: ElementType, elementName: string) => {
-            if (diagram.type === DiagramType.NETWORK_AREA_DIAGRAM) {
-                updateDiagram({
-                    ...diagram,
-                    name: elementName,
-                    nadConfigUuid: elementType === ElementType.DIAGRAM_CONFIG ? elementUuid : undefined,
-                    filterUuid: elementType === ElementType.FILTER ? elementUuid : undefined,
-                    initializationNadConfigUuid: undefined,
-                    voltageLevelIds: [],
-                    voltageLevelToExpandIds: [],
-                    voltageLevelToOmitIds: [],
-                    positions: [],
-                });
-            }
-        },
-        [diagram, updateDiagram]
-    );
-
     // This function is called by the diagram's contents, when they get their sizes from the backend.
     const setDiagramSize = useCallback((diagramId: UUID, diagramType: DiagramType, width: number, height: number) => {
         console.log('TODO setDiagramSize', diagramId, diagramType, width, height);
         // TODO adapt the layout w and h considering those values.
     }, []);
 
-    const handleNadVoltageLevelClick = useCallback(
-        (vlId: string): void => {
-            createDiagram({
-                diagramUuid: v4() as UUID,
-                type: DiagramType.VOLTAGE_LEVEL,
-                voltageLevelId: vlId,
-                name: '',
-            });
-        },
-        [createDiagram]
-    );
-
-    const handleSldVoltageLevelClick = useCallback(
-        (vlId: string, event: MouseEvent): void => {
-            if (event.ctrlKey) {
-                createDiagram({
-                    diagramUuid: v4() as UUID,
-                    type: DiagramType.VOLTAGE_LEVEL,
-                    voltageLevelId: vlId,
-                    name: '',
-                });
-            } else {
-                updateDiagram({
-                    ...diagram,
-                    type: DiagramType.VOLTAGE_LEVEL,
-                    voltageLevelId: vlId,
-                    name: '',
-                });
-            }
-        },
-        [diagram, createDiagram, updateDiagram]
-    );
-
     const cardTitle = useMemo((): string => {
         if (loading) {
             return intl.formatMessage({ id: 'loadingOptions' });
@@ -226,25 +88,23 @@ export const DiagramCard = forwardRef((props: DiagramCardProps, ref: Ref<HTMLDiv
                 <Box sx={cardStyles.diagramContainer}>
                     {(diagram.type === DiagramType.VOLTAGE_LEVEL || diagram.type === DiagramType.SUBSTATION) && (
                         <SingleLineDiagramContent
+                            diagramParams={diagram}
                             showInSpreadsheet={showInSpreadsheet}
                             studyUuid={studyUuid}
-                            diagramId={diagram.diagramUuid}
                             svg={diagram.svg?.svg ?? undefined}
-                            svgType={diagram.type}
                             svgMetadata={(diagram.svg?.metadata as SLDMetadata) ?? undefined}
                             loadingState={loading}
                             diagramSizeSetter={setDiagramSize}
                             visible={visible}
-                            onNextVoltageLevelClick={handleSldVoltageLevelClick}
-                            diagramTitle={diagram.name}
+                            onNewVoltageLevelDiagram={createDiagram}
+                            onNextVoltageLevelDiagram={updateDiagram}
                         />
                     )}
                     {diagram.type === DiagramType.NETWORK_AREA_DIAGRAM && (
                         <NetworkAreaDiagramContent
+                            diagramParams={diagram}
                             showInSpreadsheet={showInSpreadsheet}
-                            diagramId={diagram.diagramUuid}
                             svg={diagram.svg?.svg ?? undefined}
-                            svgType={diagram.type}
                             svgMetadata={(diagram.svg?.metadata as DiagramMetadata) ?? undefined}
                             svgScalingFactor={
                                 (diagram.svg?.additionalMetadata as DiagramAdditionalMetadata)?.scalingFactor ??
@@ -258,17 +118,8 @@ export const DiagramCard = forwardRef((props: DiagramCardProps, ref: Ref<HTMLDiv
                             loadingState={loading}
                             diagramSizeSetter={setDiagramSize}
                             visible={visible}
-                            isEditNadMode={diagramsInEditMode}
-                            onToggleEditNadMode={(isEditMode) => setDiagramsInEditMode(isEditMode)}
-                            onLoadNad={handleReplaceNad}
-                            onExpandVoltageLevel={handleExpandVoltageLevelId}
-                            onAddVoltageLevel={handleAddVoltageLevel}
-                            onExpandAllVoltageLevels={handleExpandAllVoltageLevels}
-                            onHideVoltageLevel={handleHideVoltageLevelId}
-                            onMoveNode={handleMoveNode}
-                            onMoveTextnode={handleMoveTextnode}
-                            onVoltageLevelClick={handleNadVoltageLevelClick}
-                            customPositions={diagram.positions}
+                            onVoltageLevelClick={createDiagram}
+                            onNadChange={updateDiagram}
                         />
                     )}
                 </Box>

src/components/grid-layout/cards/diagrams/diagram.type.ts

@@ -22,15 +22,15 @@ type DiagramBaseParams = {
     name: string;
 };
 
-type VoltageLevelDiagramParams = DiagramBaseParams & {
+export type VoltageLevelDiagramParams = DiagramBaseParams & {
     type: DiagramType.VOLTAGE_LEVEL;
     voltageLevelId: string;
 };
-type SubstationDiagramParams = DiagramBaseParams & {
+export type SubstationDiagramParams = DiagramBaseParams & {
     type: DiagramType.SUBSTATION;
     substationId: string;
 };
-type NetworkAreaDiagramParams = DiagramBaseParams & {
+export type NetworkAreaDiagramParams = DiagramBaseParams & {
     type: DiagramType.NETWORK_AREA_DIAGRAM;
     nadConfigUuid: UUID | undefined;
     initializationNadConfigUuid?: UUID; // used for initialization, not saved