Chapter 1 Infrastructure presentation

This document explains the structure of the web development (vue.js & python).

1.1 Architecture

1.1.1 Technologies

For the development part of the project (on developers’ local computers):
Frontend Python Flask R + Rserve

For the production part of the project (on preprod and prod servers):

Three docker images have been deployed:

  • one of the (compiled) web vue (backend) with Flask + Gunicorn
  • another for the R backend (with packages managed by `renv``)
  • a last one with a Nginx server
Rserve
Frontend Python + Flask
R

1.2 Organization of the code

  • backend/R → R scripts
  • backend/asterics → Python scripts
  • docker → dockerfile to parameterize the different dockers together with config files needed for the docker image compilations
  • renv → renv configuration directory for R packages (not versioned but build from renv.lock after initialization and restoration of renv)
  • src → Vue.js (V2) scripts
  • application.sample.cfg → example file for the application configuration. To run a local instance of the application, this file should be copied as application.cfg and properly edited with local settings. To run a docker instance, modifying this file is sufficient
  • asterics.py → main Python script for the application (it handles the answers to query performed by the Vue.js API and uses the Python objects defined in backend/asterics)
  • asterics_cron.py → script run in docker files to clean the workspaces and to close the sessions opened for more than one day.

1.2.1 Rationales of the project

  • Rworkflow (PCA, MFA…) is a set of analyses working together (see mixin workflow.vue & Rworkflow.vue).
  • Analysis:
    • it corresponds to a form
    • from which results are obtained (plot + tables, cf mixin analysis.vue)
    • and is also associated to a rounded node in the analysis DAG.
  • Dataset: is a dataset, associated to a rectangular node in the analysis DAG.
  • CombineDF et MultipleDA: are two special types of objects (called "combined"). These objects are displayed in the analysis table on the workspace page but are objects obtained from the integration workflow.

1.2.2 File structure in src

  • assets: images and icons

  • components:all vue.js components used in the project and organized in subdirectories:

  • help: composants related to the help, with:

    • 1st level: help on cards (in the main menu)
    • 2nd level: help displayed on an analysis form (more detailed)

  • ranalyses: analyses included in workflows. In general, they all use the mixin ranalysis for their management, execution, and result gathering and the error component for displaying errors

  • rresults: components to display results (e.g., table, test, plotly, png, …)

  • rworkflow: all workflows (in general, they have several steps, except for “heatmap” that is not really a workflow)

  • ui: small component for the interface

  • css: css (must usually not be modified)

  • layout: header & footer

  • mixin: code factorization for menus, workflows and analyses

  • plugin: external plugins

  • router: path management

  • Root: additional components, as AnalysisView.vue, DatasetView.vue, MultipleDAView.vue, and CombinedDFView.vue, which are used to display selected elements in the analysis DAG

1.3 Addition of a new feature

1.3.1 Adding a workflow

  1. create a file newWorkflow.vue in src/components/rworkflow
    • use mixins [menu, workflow]
    • set the submenu in data()→menuItems[]
    • in the template, set the components that you will have to create in src/components/ranalysis
    • if you want to reach this workflow from the DAG, do not forget to:
      • add: :analysisObj="getAnalysisForStep('r_mfa')" on the analyses
      • to set the link between the object name and the workflow component as used in views/Rworkflow.vue
      • properly set dependent analyses when a given analysis is mounted on the workflow (when necessary)
  2. in the file data/analysis.json, add an analysis card containing:
    • "wfclass": "RMissing",→ analysis class
    • "title": "Missing values", → card title
    • "description": "Explore, remove or impute missing values on a dataset.", → description
    • "cardIcon": "Bt-edit_missing.svg", → card icon that must have been added to assets/icons/analysis/
    • "submenuIcon": "missing-values.svg" → menu icon
    • "link": "/edit/missing", → used URL (path, to be defined)
    • "ranalysisname": ["MissOverview","MissShowRemove", "imputeMissing"] → the names of the analyses that allow to reach this page
  3. create the path: in router/index.js, add an element and points to the workflow component
  4. add the 1st level menu in src/components/help/firslevel/nomWorkflow.vue (the name has to correspond to the name in the attributes)

1.3.2 Adding an analysis

  • create a file ranalyses/newAnalyse.vue

  • define the analysis attribute (section data) so that they have the same names as the arguments of the R function. They will then be automatically re-assigned in case the user comes back to the analysis from the analysis DAG

  • define the function param() to send the options to the R function

  • the function run is automatically called from the button. You can also use two other functions, beforeRun and afterRun, whic can be used to overwrite the standard function and define a specific behavior

  • the result obtained from run is automatically parsed (see mixin/analysis.js), and many attributes are automatically assigned and usable in the template

  • add the second level help: the help file must have the same name as the component preceeded by Full in src/components/help/secondlevel