Being able to switch between the OSRD interface and the NGE interface

[louisgreiner]

2nd step of meta #7535

Acceptance criteria

• osrd-nge runs in operational studies panel
• Microscopic / Macroscopic switch works
• NGE is displayed in operational studies panel when Macroscopic switch is ticked
• Microscopic switch switches back to simulation view

Implementation plan

• Integrate the osrd-nge iframe in operationnal studies panel and add the Microscopic / Macroscopic switch
• OSRD (front) implements (taking inspiration of the previous work:
  • enable load of data from OSRD to NGE (template to be found in description) (OSRD->NGE)
  • event listeners for NGE actions (with empty payloads, to be filled with converter) (OSRD<-NGE)

Description

Use resulting POC from #7536.

osrd-nge iframe display

It should look like a new "tab" in OSRD (not a browser tab) that enable to switch view from either simulation view of a scenario or the iframe that embed osrd-nge. The selected tab is slightly highlighted.

The iframe points to the running osrd-nge project.

The Microscopic / Macroscopic switch should look like this, switching views from simulation to NGE:

Docs:

• eventTarget.addEventListener:
• EventEmitter

-> See below example

---
title: OSRD - NGE Sequence diagram
---
sequenceDiagram
  autonumber
  OSRD (osrd_window)-->>OSRD (osrd_window): init web page
  OSRD (osrd_window)->>NGE (nge_iframe): set `netzgrafikDto` DOM property
  loop while synchronization is ON
    alt any modification in OSRD (osrd_window)
      OSRD (osrd_window)-->>OSRD (osrd_window): any modification
      OSRD (osrd_window)->>NGE (nge_iframe): set `netzgrafikDto` DOM property
    else any modification in NGE (nge_iframe)
      NGE (nge_iframe)-->>NGE (nge_iframe): any modification <br>(hooks)
      NGE (nge_iframe)->>OSRD (osrd_window): send `operationX` event (@Output)
      OSRD (osrd_window)-->>OSRD (osrd_window): convert NGE operation into <br/>timetable update
      OSRD (osrd_window)->>NGE (nge_iframe): set `netzgrafikDto` DOM property
    end
  end

Loading

Definition of ready

• UX

  • A wireframe is ready
  • A mock-up is ready

• PO

  • Acceptance criteria are clear and understandable

• Technical

  • If required documentation is available on osrd.fr
  • Implementation plan is detailed and validated by maintainers

• General

  • WSJF values are filled
  • Validated by the PM