diff --git a/front/src/applications/operationalStudies/components/MacroEditor/NGE.tsx b/front/src/applications/operationalStudies/components/MacroEditor/NGE.tsx
index 644679c3240..4f997b6cf75 100644
--- 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 = `
-
+
@@ -22,30 +22,40 @@ const frameSrc = `
`;
-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(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 ;
-}
+};
export default NGE;
diff --git a/front/src/applications/operationalStudies/views/v2/ScenarioV2.tsx b/front/src/applications/operationalStudies/views/v2/ScenarioV2.tsx
index a6175d9ab5c..be24279905f 100644
--- 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(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: ,
+ content: ,
};
return (