[2410] Prevent the diagram to be displayed under the panel on open

Bug: #2410
Signed-off-by: Guillaume Coutable <guillaume.coutable@obeo.fr>

CHANGELOG.adoc

@@ -45,6 +45,7 @@ This coupling will be removed in the near future as a consequence, the dependenc
 - https://github.com/eclipse-sirius/sirius-web/issues/2430[#2430] [diagram] Improve fit to screen feature to zoom on selected nodes
 - https://github.com/eclipse-sirius/sirius-web/issues/2288[#2288] [diagram] Make IconLabel a react flow node
 - https://github.com/eclipse-sirius/sirius-web/issues/2289[#2289] [diagram] Use the layout strategy to layout icon label nodes
+- https://github.com/eclipse-sirius/sirius-web/issues/2410[#2410] [diagram] Do a fit to screen on a diagram opening
 
 == v2023.10.0
 

integration-tests/cypress/e2e/project/react-flow/diagram-contextual-palette.cy.js

@@ -61,7 +61,8 @@ describe('/projects/:projectId/edit - Robot Diagram', () => {
     cy.getByTestId('Label - CaptureSubSystem').click('topLeft');
     cy.getByTestId('Hide-elements').should('exist');
     cy.getByTestId('Fade-elements').should('exist');
-    cy.getByTestId('rf__wrapper').click();
+    cy.getByTestId('rf__wrapper').click('bottomLeft');
+    // NOTE for later: ensure the palette is displayed
     cy.getByTestId('Hide-elements').should('not.exist');
     cy.getByTestId('Fade-elements').should('not.exist');
   });

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.tsx

@@ -62,6 +62,7 @@ export const DiagramRenderer = ({ diagramRefreshedEventPayload, selection, setSe
   const ref = useRef<HTMLDivElement | null>(null);
   const [state, setState] = useState<DiagramRendererState>({
     snapToGrid: false,
+    fitviewLifecycle: 'neverRendered',
   });
 
   const { layout } = useLayout();
@@ -90,9 +91,19 @@ export const DiagramRenderer = ({ diagramRefreshedEventPayload, selection, setSe
       setNodes(laidOutDiagram.nodes);
       setEdges(laidOutDiagram.edges);
       hideDiagramPalette();
+      if (state.fitviewLifecycle === 'neverRendered') {
+        setState((prevState) => ({ ...prevState, fitviewLifecycle: 'shouldFitview' }));
+      }
     });
   }, [diagramRefreshedEventPayload]);
 
+  useEffect(() => {
+    if (state.fitviewLifecycle === 'shouldFitview') {
+      reactFlowInstance.fitView({ minZoom: 0.5 });
+      setState((prevState) => ({ ...prevState, fitviewLifecycle: 'viewfit' }));
+    }
+  }, [state.fitviewLifecycle]);
+
   useEffect(() => {
     const selectionEntryIds = selection.entries.map((entry) => entry.id);
     const edgesMatchingWorkbenchSelection = edges.filter((edge) =>

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/DiagramRenderer.types.ts

@@ -17,6 +17,8 @@ import { GQLDiagramRefreshedEventPayload } from '../graphql/subscription/diagram
 import { MultiLabelEdgeData } from './edge/MultiLabelEdge.types';
 import { DiagramNodeType } from './node/NodeTypes.types';
 
+export type FitViewLifecycle = 'neverRendered' | 'shouldFitview' | 'viewfit';
+
 export interface DiagramRendererProps {
   diagramRefreshedEventPayload: GQLDiagramRefreshedEventPayload;
   selection: Selection;
@@ -25,6 +27,7 @@ export interface DiagramRendererProps {
 
 export interface DiagramRendererState {
   snapToGrid: boolean;
+  fitviewLifecycle: FitViewLifecycle;
 }
 
 export interface DiagramPaletteState {

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/representation/DiagramRepresentation.tsx

@@ -104,6 +104,7 @@ export const DiagramRepresentation = ({
                   <MarkerDefinitions />
                   <FullscreenContextProvider>
                     <DiagramRenderer
+                      key={state.diagramRefreshedEventPayload.diagram.id}
                       diagramRefreshedEventPayload={state.diagramRefreshedEventPayload}
                       selection={selection}
                       setSelection={setSelection}