o3webapp: A JavaScript repository from BorjaEst

The O3as Webapp

The O3as Webapp has the purpose of visualizing data from the ozone layer and thus enhancing the scientific research of the ozone layer decomposition. The Webapp provides an intuitive user interface for detailed visualizations, e.g. ozone recovery analysis, and calculation of statistical values. Furthermore, plotted data can be downloaded to share gathered information. Plots can also be shared by simply copying the URL. To get more information about the "O3as: Ozone Assessment" project, check out the main website.

Built With

npm.js package manager
React.js main Javascript Framework
Redux.js internal store, simplifies communication between different components
Apexcharts.js used for rendering of the graph. Used through the React wrapper
pdfmake used to export a pdf
Jest.js main framework for testing
React Testing Library provides more React specific tests
MaterialUI provides styled input components (similar to Bootstrap)
axios used for API communication
jsdoc used standard for documenting the code
better docs provides custom @component tags specifically for React Apps, as well as @category tags

Documentation

For now, you have to locally create the docs. In the future we are going to host the docs and provide a link to them here.

Prerequisites

Make sure that you have installed

node.js (automatically also installs npm)

How to install and run the Project

After cloning the project execute this command in order to install the necessary packages:

    npm install

If you want to start the App locally, execute:

    npm start

To run tests and to see the test coverage, execute:

    npm run test -- --watchAll --coverage

To generate docs, execute:

    npm run docs

Before building the docs for the first time, you have to go to o3webapp/node_modules/better-docs/bundler.js and remove the --dist-dir ${outDist} option. So replace

  const cmd = `${process.platform === 'win32' ? 'SET ' : ''}NODE_ENV=development parcel build ${entry} --dist-dir ${outDist}`

with

  const cmd = `${process.platform === 'win32' ? 'SET ' : ''}NODE_ENV=development parcel build ${entry}`

Working on the VM

For testing purposes there is a running instance of the Webapp on a VM. You can visit the test WebApp here.

If you have a private key, and you want to connect to the VM where the WebApp is deployed, execute:

    ssh -i <your_private_key> cloudadm@o3web.test.fedcloud.eu

After connecting to the VM and you want to see the logs of the application, including messages from the container, execute:

    sudo docker-compose -f app

Data

In order to see the API and try out some requests, visit: O3as Api

How to configure the sections of the Webapp

Section configuration can be done in the config/ directory. defaultConfig.json specifies the default setup of the sections. When a new plot type is added, it has the section configuration of defaultConfig.json. To customize the setup of a specific plot type, go to the .json file with the corresponding plot type name. The specific config files overwrite defaultConfig.json. To overwrite a section, add the section with the same name in the specific config file. If the name of a section doesn't appear in defaultConfig.json, it will be added as a new section.

Example:

defaultConfig.json:

{
  "sections": [
    {
      "name": "Appearance",
      "components": ["PlotNameField", "XAxisField", "YAxisField"]
    },
    {
      "name": "Models",
      "components": ["ModelGroupConfigurator"]
    }
  ]
}

and this specific config file:

{
  "sections": [
    {
      "name": "Appearance",
      "components": ["PlotNameField", "RegionSelector", "YAxisField"]
    },
    {
      "name": "Filter Data",
      "components": ["TimeCheckBoxGroup"]
    }
  ]
}

will convert to

{
  "sections": [
    {
      "name": "Appearance",
      "components": ["PlotNameField", "RegionSelector", "YAxisField"]
    },
    {
      "name": "Models",
      "components": ["ModelGroupConfigurator"]
    },
    {
      "name": "Filter Data",
      "components": ["TimeCheckBoxGroup"]
    }
  ]
}

Credits

Developers which worked on this project:

Furkan Çevik
Thomas Marwitz
Simon von Rönn
Nikolai Prjanikov
Jana Zeller

License

This project is licensed under the GNU License.

(back to top)

BorjaEst/o3webapp