README.md 5.3 KB
Newer Older
1
<div id="top"></div>
2
3


4
5
6
<!-- PROJECT LOGO -->
<br />
<div align="center">
Furkan's avatar
Furkan committed
7
  <a href="https://git.scc.kit.edu/synergy.o3as/o3webapp/-/blob/develop">
Jana-Z's avatar
Jana-Z committed
8
    <img src="https://o3as.data.kit.edu/img/logos/o3as-logo.svg" alt="Logo" width="200" height="200">
9
  </a>
10

11
<h3 align="center">The O3as Webapp</h3>
12

13
  <p align="center">
14
    The O3as Webapp has the purpose of visualizing data from the ozone layer
15
    and thus enhancing the scientific research of the ozone layer decomposition.
16
    The Webapp provides an intuitive user interface for detailed visualizations,
17
    e.g. ozone recovery analysis, and calculation of statistical values. Furthermore,
18
    plotted data can be downloaded to share gathered information. Plots can also be shared by simply copying the URL.
Thomas Marwitz's avatar
Thomas Marwitz committed
19
    To get more information about the "O3as: Ozone Assessment" project, check out the <a href="https://o3as.data.kit.edu/">main website</a>.
20
21
22
23
24
  </p>
</div>

## Built With

25
26
27
- [npm.js](https://www.npmjs.com/) package manager
- [React.js](https://reactjs.org/) main Javascript Framework
- [Redux.js](https://redux.js.org/) internal store, simplifies communication between different components
simon.vonroenn's avatar
simon.vonroenn committed
28
- [Apexcharts.js](https://apexcharts.com/) used for rendering of the graph. Used through the [React wrapper](https://apexcharts.com/docs/react-charts/)
29
30
- [pdfmake](http://pdfmake.org/#/) used to export a pdf
- [Jest.js](https://jestjs.io/) main framework for testing
Jana-Z's avatar
Jana-Z committed
31
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) provides more React specific tests
simon.vonroenn's avatar
simon.vonroenn committed
32
- [MaterialUI](https://mui.com/) provides styled input components (similar to Bootstrap)
33
34
- [axios](https://axios-http.com/docs/intro) used for API communication
- [jsdoc](https://jsdoc.app/index.html) used standard for documenting the code
simon.vonroenn's avatar
simon.vonroenn committed
35
- [better docs](https://betterdocs.co/) provides custom `@component` tags specifically for React Apps, as well as `@category` tags
36
37

## Documentation
simon.vonroenn's avatar
simon.vonroenn committed
38
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.
39

40

41
## Prerequisites
42

43
Make sure that you have installed
44

45
- [node.js](https://nodejs.dev/learn/how-to-install-nodejs) (automatically also installs npm)
46

47
## How to install and run the Project
48

49
- After cloning the project execute this command in order to install the necessary packages:
50
51
52
53

```
    npm install
```
54

55
- If you want to start the App locally, execute:
56

57
58
59
```
    npm start
```
60

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

63
```
64
    npm run test -- --watchAll --coverage 
65
```
66
67

- To generate docs, execute:
68
69
70
```
    npm run docs
```
71

Jana-Z's avatar
Jana-Z committed
72
73
74
75
76
77
78
79
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
```js
  const cmd = `${process.platform === 'win32' ? 'SET ' : ''}NODE_ENV=development parcel build ${entry} --dist-dir ${outDist}`
```
with
```js
  const cmd = `${process.platform === 'win32' ? 'SET ' : ''}NODE_ENV=development parcel build ${entry}`
```
Jana-Z's avatar
Jana-Z committed
80

81
### Working on the VM
82

simon.vonroenn's avatar
simon.vonroenn committed
83
For testing purposes there is a running instance of the Webapp on a VM. You can visit the test WebApp [here](http://o3web.test.fedcloud.eu:3000/).
84

simon.vonroenn's avatar
simon.vonroenn committed
85
- If you have a private key, and you want to connect to the VM where the WebApp is deployed, execute:
86
87
88
89

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

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

93
94
95
```
    sudo docker-compose -f app
```
96

97
### Data
Thomas Marwitz's avatar
Thomas Marwitz committed
98
In order to see the API and try out some requests, visit: [O3as Api](https://api.o3as.fedcloud.eu/api/v1/ui/#/)
99

100
### How to configure the sections of the Webapp
101

102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
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"]
    }
  ]
}
```
161

valentin.kozlov's avatar
valentin.kozlov committed
162

163
## Credits
164

165
Developers which worked on this project:
166

167
- Furkan Çevik
168
169
170
- Thomas Marwitz
- Simon von Rönn
- Nikolai Prjanikov
171
- Jana Zeller
172

173
174

## License
simon.vonroenn's avatar
simon.vonroenn committed
175
This project is licensed under the [GNU License](https://git.scc.kit.edu/synergy.o3as/o3webapp/-/blob/develop/LICENSE).
176
177
178


<p align="right">(<a href="#top">back to top</a>)</p>