Skip to content

Latest commit

 

History

History
263 lines (195 loc) · 9.95 KB

README.md

File metadata and controls

263 lines (195 loc) · 9.95 KB

OSRD's Front

Front

How to launch project for developpement purpose ?

  • go inside /front/ from OSRD main project
  • exec yarn (hope you have a good connexion and a good cup of tea)
  • exec yarn start (perhaps you'll need NODE_OPTIONS="--openssl-legacy-provider" if your node version is too new)
  • enjoy

Commands

yarn start

Runs the app in a local development environment.

This requires the other services (api, core, postgres…) to be running in your local environment as well.

See Main Readme if you need more information to run the docker.

yarn test

Launches the test runner in the interactive watch mode.

yarn build

Builds the app for production to the build folder.

yarn generate-licenses

Update licenses attributions in /src/common/ReleaseInformations/json/

yarn e2e-tests

Launches end to end tests.

It requires:

  • Backend containers to be up: docker compose build core redis api editoast postgres
  • Running front
  • poetry to be installed

Locally, to use the same configuration as the CI, you must change the environment variable to CI=true.

This command will execute all tests defined. The command can be changed in test_e2e.py to execute only one test with or without debug mode. test_e2e.py is executing playwright command in a python subprocess. Example of modification to apply to launch only stdcm-page.spec.ts in debug mode with chromium:

    result = subprocess.run(
        [
            "yarn",
            "--cwd",
            "front",
            "playwright",
            "test"
+           "stdcm-page.spec.ts",
            "--reporter=line",
+           "--debug",
+           "--project=chromium"
        ],
        cwd=Path(__file__).parents[2],
        check=False,
    )

Design rules

OSRD's front is based upon SNCF Bootstrap. It aims to follow SNCF's design system guidelines, although the style has deviated quite a bit due to components requiring a specific design.

Code organization, folders structure & modules descriptions

Name Description & links
applications/ Main applications (see below)
assets/ Some pictures & osm static mapstyles
common/ Common components (applications, map layers & design) (see below)
config/ Some config files for all project
env.ts Backend urls
i18n.js Translation configuration (see below)
index.tsx Obvious, no ?
keycloak/ Config files for SNCF FID authentication
main/ Landing & home pages
reducers/ Redux store
Store.ts Redux store config
stories/ Storybook files
styles/ All SCSS code (see below)
types/ Typescript types configuration
utils/ Some common generic helpers

Homepage /src/main

Landing is done in /main where we can find app.js for routing purpose and home.js as homepage with cards linking to differents applications.

OSRD's front is organized in 5 main applications/.

Applications /src/applications

All applications are contained in a single folder, have a home JS/TS file and views & components organized in folders.

The components propose the main JS/TS file and eventually another folder with same name containing some minors subcomponents linked to.

Operational Studies operationalStudies/

The operational studies application enables capacity studies to be carried out on a given infrastructure.

Folder's tree

  • components/
    • Helpers/
    • ManageTrainSchedule/
    • Project/
    • Scenario/
    • SimulationResults/
    • Study/
  • consts.ts
  • Home.tsx
  • views/
    • ManageTrainSchedule.jsx
    • Project.js
    • Scenario.js
    • SimulationResults.tsx
    • Study.js

The functional workflow works as follows:

  • create a project applications/operationalStudies/Home.js
  • create a study in this project applications/operationalStudies/views/Project.js
  • choose an infrastructure to create a scenario in the study applications/operationalStudies/views/Study.js

Once in a scenario applications/operationalStudies/views/Scenario.js you have to add trains in the timetable applications/operationalStudies/views/ManageTrainSchedule.jsx. To do so:

  • choose an infrastructure & timetable DEPRECATED: will be removed soon
  • choose a rolling stock common/rollingStockSelector and a composition code
  • define a path on the map with crossing points (the path takes into account the restrictions of the material and the infrastructure)
  • determine possible margins
  • choose the number of trains to add

Then, the simulation results applications/operationalStudies/SimulationResults appear as (top to bottom):

  • The details of the current train and a module for controlling the time cursor
  • A fixed width timeline to explore the whole study
  • A space-time graph displaying all the trains projected on a given path
  • The space-speed graph of the selected train
  • The graph of curves and gradients of the selected train
  • The train sheet of the selected train
  • The map showing the route, the position of the trains in time and space, and the status of the signaling with the current block occupation

Short-term DCM stdcm/

STDCM makes it possible to find paths through the residual capacity of a timetable, without conflicts.

Infrastructure editor editor/

OSRD's infrastructure editor allows you to edit the linear and point objects of a given infrastructure, and then run simulations based on this information. It is possible to modify the existing infrastructure as well as to create a new one.

Opendata importation opendata/

EXPERIMENTATION This application uses opendata from GRAOU to create realistic timetable from french GTFS data by SNCF.

Reference map referenceMap/

This is an implementation reference for all map concerns. It aims to display all layers and propose a ready-to-use map component reference. When adding a new common layer inside an application map component, please add it first to this application.

Common components /src/common

All common code (and shared components) supposed to be in common/.

CSS /src/styles

Translation /public/locales

Other

Coding style Policy

Javascript / Javascript-React

  • ESLint is used as linter and prettier as formatter. Both are configured as devDependencies to enforce default eslint configuration eventually overidden by airbnb rules translation. A few rules (see eslintrc) has been disabled and will be re-enabled in the near future):
    • 'no-named-as-default': 'off',
    • 'react/jsx-props-no-spreading': 0,
    • 'react/static-property-placement': 0,
    • 'import/no-extraneous-dependencies': 0,
  • eslint rules incompatible with prettier usage are disabled, yet these styling errors will be displayed as prettier issues.
  • Do not set your IDE to auto format with current prettier rules for now, as some old files will be widely updated and less readable for reviewers.
  • Please push commits exclusively dedicated to styling issues
  • For VSCode Users: Install Prettier - Code Formatter Extension and follow instructions.

Dependencies

Cross project

  • i18n internationalization framework for javascript. Please keep it simple.
  • nivo Dataviz lib built on top of d3 and react. For certain generic viz. Could be used as a basis to render our special viz more adapted to react & d3- packages nivo/circle-packing and nivo/line
  • turf.js Javascript geospatial and analysis. Imported on a per-package basis
  • react-rnd Excellent container for resizable - movable visual component
  • immer - simplified immutable state control

Editor module

Do not know where it is used

  • debounce
  • jwt-decode

devDependencies

  • Better docs: still in use ? with
  • jsdocs

Module editor