wip: wire up import to NGE component

OpenRailAssociation · Jul 11, 2024 · 1824bb0 · 1824bb0
1 parent 5f32f13
commit 1824bb0
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 18 deletions.
diff --git a/front/src/applications/operationalStudies/components/MacroEditor/NGE.tsx b/front/src/applications/operationalStudies/components/MacroEditor/NGE.tsx
@@ -10,7 +10,7 @@ import ngeVendor from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-fronten
 
 const frameSrc = `
 <!DOCTYPE html>
-<html class="sbb-lean">
+<html class="sbb-lean sbb-light">
   <head>
     <link rel="stylesheet" href="${ngeStyles}"></link>
     <script type="module" src="${ngeRuntime}"></script>
@@ -22,30 +22,40 @@ const frameSrc = `
 </html>
 `;
 
-function NGE() {
+interface NGEElement extends HTMLElement {
+  netzgrafikDto: { nodes: unknown };
+}
+
+const setNodes = (ngeRoot: NGEElement, nodes: unknown) => {
+  // get netzgrafik model from NGE
+  const dto = ngeRoot.netzgrafikDto;
+
+  // set new netzgrafik model with new nodes
+  if (nodes) {
+    dto.nodes = nodes;
+  }
+  ngeRoot.netzgrafikDto = dto;
+};
+
+const NGE = ({ nodes }: { nodes?: unknown }) => {
   const frameRef = useRef<HTMLIFrameElement>(null);
 
+  let ngeRoot: NGEElement | null = null;
   useEffect(() => {
     const frame = frameRef.current!;
 
-    function handleFrameLoad() {
+    const handleFrameLoad = () => {
       frame.removeEventListener('load', handleFrameLoad);
 
-      const ngeRoot = frame.contentDocument!.createElement('sbb-root');
+      ngeRoot = frame.contentDocument!.createElement('sbb-root') as NGEElement;
       frame.contentDocument!.body.appendChild(ngeRoot);
 
       // listens to create, update and delete operations
       // ngeRoot.addEventListener('operation', (event: Event) => {
       //   console.log('Operation received', (event as CustomEvent).detail);
       // });
-
-      // get netzgrafik model from NGE
-      // let netzgrafikDto = ngeRoot.netzgrafikDto;
-
-      // // set new netzgrafik model with new nodes
-      // netzgrafikDto.nodes = testNodesDto;
-      // ngeRoot.netzgrafikDto = netzgrafikDto;
-    }
+      setNodes(ngeRoot, nodes);
+    };
 
     frame.addEventListener('load', handleFrameLoad);
 
@@ -54,7 +64,13 @@ function NGE() {
     };
   }, []);
 
+  useEffect(() => {
+    if (ngeRoot) {
+      setNodes(ngeRoot, nodes);
+    }
+  }, [nodes]);
+
   return <iframe ref={frameRef} srcDoc={frameSrc} title="nge-iframe" />;
-}
+};
 
 export default NGE;
diff --git a/front/src/applications/operationalStudies/views/v2/ScenarioV2.tsx b/front/src/applications/operationalStudies/views/v2/ScenarioV2.tsx
@@ -149,11 +149,15 @@ const ScenarioV2 = () => {
     []
   );
 
-  // TODO: drop this
+  const [ngeNodes, setNgeNodes] = useState<unknown>(null);
   useEffect(() => {
-    if (infraId && timetableId) {
-      importTimetableToNGE(infraId, timetableId, dispatch);
-    }
+    const doImport = async () => {
+      if (infraId && timetableId) {
+        const nodes = await importTimetableToNGE(infraId, timetableId, dispatch);
+        setNgeNodes(nodes);
+      }
+    };
+    doImport();
   }, [infraId, timetableId]);
 
   if (!scenario || !infraId || !timetableId || !timetable) return null;
@@ -225,7 +229,7 @@ const ScenarioV2 = () => {
   const tabMacro = {
     id: 'macro',
     label: t('macroscopic'),
-    content: <NGE />,
+    content: <NGE nodes={ngeNodes} />,
   };
 
   return (