5. Frontend

The frontend uses the React framework. The source javascript files are stored in the folder assets/js/client. Webpack will build the distributables and places them in /assets/bundles.

5.1. Package Manager

The used javascript package manager is yarn. Yarn uses package.json to create yarn.lock file.

5.2. Structure

5.2.1. The main App component

The main React component is defined in the file ramascene.js : this component defines the main page structure. The main App component uses other sub components :

  • AnalysisJob : displayed as a job in the Analysis queue panel
  • IndicatorFilterableSingleSelectDropdownTree : displayed as the Indicator dropdown selectbox
  • ProductFilterableSingle- and ProductFilterableMultiSelectDropdownTree : displayed as the products dropdown selectbox
  • RegionFilterableSingle- and RegionFilterableMultiSelectDropdownTree : displayed as the region dropdown selectbox
  • ScenarioModel : displayed as the content for the Scenario Modelling panel
  • Visualization : displayed as the content for the Main and Comparison View panels
  • YearFilterableSingleSelectDropdownTree : displayed as the year dropdown selectbox

The main App component also defines following constants :

Constant Value Description
MAX_JOB_COUNT 10 max. number of jobs permitted in analysis queue
WAIT_INTERVAL 5000 the time a message to the user is displayed when a new job is placed on the analysis job queue

The main App component most important state variables :

  • jobs : array of Analysis jobs
  • model_details : array of scenario modelling changes

The main App component functions :

  • handleAnalyse() : will push a new job on the analysis queue and shows a message for WAIT_INTERVAL time
  • handleModelling() : will only show a message for WAIT_INTERVAL time
  • handleJobFinished() : hides the message
  • renderVisualization() : deselects the currently selected job, selects the new job and renders the Visualization component
  • renderComparisonVisualization() : almost the same functionality as renderVisualization
  • hideMainView() : empties the main view panel
  • hideComparisonView() : empties the comparison view panel
  • deleteJob() : deletes 1 job from analysis queue

5.2.2. The ScenarioModel component

This component makes it possible to add or remove changes to a new model_details structure and then save it to the model_details. It is also possible to clear the model_details.

The ScenarioModel component uses other sub components :

  • ProductFilterableSingleSelectDropdownTree : displayed as the products dropdown selectbox
  • ConsumerFilterableSingleSelectDropdownTree : displayed as the ‘consumed by’ dropdown selectbox
  • RegionFilterableSingleSelectDropdownTree : displayed as the ‘originating from/where’ dropdown selectboxes

The ScenarioModel component defines following constants :

Constant Value Description
MAX_CHANGES 5 max. number of changes a scenario can contain

The main functions :

  • handleAddClick() : pushes a new change to the new model_details structure
  • handleRemoveClick() : pops the last change from the new model_details structure
  • handleSaveClick() : saves the new model_details structure
  • handleClearClick() : clears the model_details structure

5.2.3. The AnalysisJob component

This component does all the Websocket and AJAX traffic.

The AnalysisJob component most important state variables :

  • query : contains the query

The main AnalysisJob component functions :

  • componentDidMount() : this is a React lifecycle callback function which is called immediately after the component is inserted into the DOM tree. This function will set up the Websocket connection and sends the analysis query to the RaMa-scene server.
  • handleWebSocketResponse() : called when a message is received on the websocket. The received data will be parsed as JSON. When job_status == ‘started’ the job name can be generated. When job_status == ‘completed’ an AJAX call is executed to retrieve the raw result data. Upon reception of the raw results, some preparations for CSV download are executed.
  • generateCSVdata() : prepares the CSV data for download
  • startModelling() : will set up a Websocket connection and sends the model_details to the RaMa-scene server.
_images/image053.png _images/image054.png

5.2.4. The Visualization component

This component will render the result using D3plus package. It uses 3 different topojson files for the geo map : one with a layer over the whole world, one with a layer per continent and one with a layer per individual country/region.