Merge pull request #125 from ISI-MIP/dev

Refactor app, build and tests

Author: jochenklar

app/.babelrc .babelrcapp/.babelrc renamed to .babelrc

@@ -5,10 +5,13 @@ __pycache__/
 *-
 *.swp
 .DS_Store
+.Rproj.user
 .pytest_cache
 
 /env
-/*.sh
+/nvm
+/node_modules
 
 /output
-.Rproj.user
+
+/*.sh

.gitignore

@@ -0,0 +1 @@
+v22

.nvmrc

@@ -1,12 +1,39 @@
-exclude: assets\/
-
 repos:
+  - repo: meta
+    hooks:
+      - id: check-hooks-apply
+
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.5.0
+    rev: 3e8a8703264a2f4a69428a0aa4dcb512790b2c8c  # frozen: v6.0.0
     hooks:
       - id: check-ast
       - id: check-json
       - id: check-yaml
       - id: end-of-file-fixer
       - id: trailing-whitespace
       - id: debug-statements
+
+  - repo: https://github.com/astral-sh/ruff-pre-commit
+    rev: c60c980e561ed3e73101667fe8365c609d19a438  # frozen: v0.15.9
+    hooks:
+      - id: ruff-check
+        args: [--fix, --exit-non-zero-on-fix]
+      - id: ruff-format
+
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: d72e5408a82df0b0cb6b9c878fb8cb4e947c1859  # frozen: v10.2.0
+    hooks:
+      - id: eslint
+        args: [--fix, --color]
+        files: \.[j]sx?$  # *.js, *.jsx
+        types: [file]
+        additional_dependencies:
+          - eslint@9.39.4
+          - eslint-plugin-react@7.37.5
+          - eslint-plugin-simple-import-sort@12.1.1
+          - react@18.3.1
+
+  - repo: https://github.com/crate-ci/typos
+    rev: f06b85043a5ab470afbb0a5592456e733243983a  # frozen: v1
+    hooks:
+    - id: typos

.pre-commit-config.yaml

@@ -0,0 +1,40 @@
+target-version = "py310"
+line-length = 120
+
+[lint]
+select = [
+    "B",    # flake8-bugbear
+    "C4",   # flake8-comprehensions
+    "E",    # pycodestyle
+    "F",    # pyflakes
+    "I",    # isort
+    "PGH",  # pygrep-hooks
+    "RUF",  # ruff
+    "UP",   # pyupgrade
+    "W",    # pycodestyle
+    "YTT",  # flake8-2020
+]
+
+[format]
+quote-style = "single"
+
+[lint.isort]
+known-first-party = [
+    "helpers",
+    "utils"
+]
+section-order = [
+  "future",
+  "standard-library",
+  "pytest",
+  "django",
+  "rest_framework",
+  "third-party",
+  "first-party",
+  "local-folder"
+]
+
+[lint.isort.sections]
+pytest = ["pytest"]
+django = ["django"]
+rest_framework = ["rest_framework"]

.ruff.toml

@@ -1,20 +1,14 @@
-export NVM_DIR="${PWD}/app/nvm"
+SHELL := bash
 
-.PHONY: prod dev serve assets links csvtables definitions glossary pattern protocol schema tree \
-	typos app watch clean distclean
+export NVM_DIR=$(PWD)/nvm
+export NVM_VERSION=v0.40.4
 
-prod: assets csvtables definitions glossary pattern protocol schema tree
+export ISIMIP_LOG_LEVEL=WARNING
 
-dev: links csvtables definitions glossary pattern protocol schema tree
+.PHONY: all csvtables definitions glossary pattern protocol schema tree \
+	serve typos app watch lint clean cleannode cleanenv distclean
 
-serve:
-	python3 -m http.server -b 127.0.0.1 8080 -d output
-
-assets:
-	python3 build/assets.py
-
-links:
-	python3 build/assets.py --link
+all: csvtables definitions glossary pattern protocol schema tree
 
 csvtables:
 	python3 build/csvtables.py
@@ -37,19 +31,40 @@ schema:
 tree:
 	python3 build/tree.py
 
+serve:
+	python3 -m http.server -b 127.0.0.1 8080 -d output
+
 typos:
 	typos --write-changes --force-exclude
 
-app:
-	make -C app
+app: nvm
+	. $(NVM_DIR)/nvm.sh; nvm use && npm ci && npm run build
 
-watch:
-	make -C app watch
+watch: nvm node_modules
+	. $(NVM_DIR)/nvm.sh; nvm use && npm ci && npm run watch
+
+lint: nvm node_modules
+	. $(NVM_DIR)/nvm.sh; nvm use && npm ci && npm run lint
+
+nvm:
+	mkdir -p $(NVM_DIR)
+	NVM_DIR=$(NVM_DIR) PROFILE=/dev/null \
+		bash -c 'curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/$(NVM_VERSION)/install.sh | bash > /dev/null'
+	. $(NVM_DIR)/nvm.sh; nvm install
+
+node_modules:
+	. $(NVM_DIR)/nvm.sh; nvm use && npm ci
 
 clean:
 	rm -fr output
 
+cleannode:
+	rm -rf nvm node_modules
+
+cleanenv:
+	rm -fr env
+
 distclean:
 	rm -fr output
+	rm -rf nvm node_modules
 	rm -fr env
-	make -C app clean

Makefile

@@ -1,77 +1,84 @@
 ISIMIP3 simulation protocol
 ===========================
 
-This project builds sector-specific ISIMIP protocols from a common data source.
-Machine-readable data are under [definitions](definitions/), and text under [protocol](protocol/).
-
-The rendered protocols are found at https://protocol.isimip.org.
+This repository contains all information and tools to build the ISIMIP3 protocol as presented on [protocol.isimip.org](https://protocol.isimip.org). The YAML files containing the information for the tables are located under [definitions](definitions/) and the markdown files for the text under [protocol](protocol/).
 
 You can clone this repository and work and render the files locally as documented below.
 
-You can also edit the markdown files at github directly. With a delay of minutes,
-your updates will be visible at `https://protocol.isimip.org`.
+You can also edit the markdown files at github directly. With a delay of minutes, your updates will be visible at `https://protocol.isimip.org`.
+
+As a rule, the sector-specific text should be kept to a minimum and cover as much structure as possible by machine-readable code under [definitions](definitions/).
 
-As a rule, the sector-specific text should be kept to a minimum and cover
-as much structure as possible by machine-readable code under [definitions](definitions/).
 
 Setup
 -----
 
 Building the protocol requires:
 
-- **git**: for version control
-- **Python** (> 3.6)
-- **curl**: for downloading nvm in the app Makefile
-
-The installation of Python (and its developing packages), however differs from operating system to operating system. Instructions can be found [here](https://github.com/ISI-MIP/isimip-qc/blob/main/README.md#prerequisites).
+- **Python** (> 3.10)
+- **git** for version control
+- **curl** for downloading `nvm`
 
-A `Makefile` is provided to help with the installation process.
+The installation of Python (and its developing packages) differs from operating system to operating system. Instructions to setup Python for your system can be found [here](https://utils.isimip.org/prerequisites/).
 
-If you work with different Python applications, we recommend to create a virtual environment for the protocol:
+We recommend to create a virtual environment for the protocol:
 
 ```bash
 python3 -m venv env
 source env/bin/activate  # the env needs to be sourced everytime you use a new terminal
 ```
 
-The Python requirements are installed using:
+The Python requirements can be installed using:
 
 ```bash
 pip install -r requirements.txt
 ```
 
-The JavaScript part of the protocol needs to be build using NodeJS and Webpack. For convenience this can be done by using only:
+
+Build
+-----
+
+The different `build` scripts can be run by using:
 
 ```bash
-make app
+make
 ```
 
-`make app` bootstraps Node via nvm and requires `curl`.
+The output files are located in `output`.
 
-
-Build
------
+The JavaScript part of the protocol needs to be build using [NodeJS](https://nodejs.org) and [vite](https://vite.dev/). For convenience this can be done by using ([nvm](https://github.com/nvm-sh/nvm) and the Node dependencies are downloaded automatically, this requires `curl`):
 
 ```bash
-make                  # should work on Linux/macOS
-make dev              # like make, but lining the front-end assets for development
-
-make serve            # starts a http server on port :8000 so that you can access the protocol in your browser
+make app
+make watch  # automatically rebuild when the source changes
 ```
 
-The output files are located in `output`. The files, e.g. `index.html` can opened with a web browser.
+When working with different branches or after dependency changed, the following make targets can be used to clean the local copy:
+
+```
+make clean      # removes the output directory
+make cleannode  # removes nvm and node_modules (JavaScript dependencies)
+make cleanenv   # removes the virtual environment (Python dependencies)
+make distclean  # runs all clean targets
+```
 
 
 Development server
 ------------------
 
-The command `make serve` will open a local webserver on port `:8000`. The protocol can than be accessed at http://localhost:8080 from a browser.
+The command
+
+```bash
+make serve
+```
+
+will open a local webserver on port `:8080`. The protocol can than be accessed at http://localhost:8080 from a browser.
 
 
 Editing
 -------
 
-Edit the markdown files for each sector under [protocol](protocol).
+The textual part of the protocol can be edited using the markdown files in [protocol](protocol).
 
 The interactive tables have the following syntax:
 
@@ -125,7 +132,7 @@ The definition YAML files however can be changed without touching the JavaScript
 ...
 ```
 
-Here `1850soc` only applies to the givem set of sectors and only to `ISIMIP3b`, while `histsoc` is used both in `ISIMIP3a` and `ISIMIP3b` and in every sector. Some attributes (e.g. `frequency` in `definitions/variable`) can have objects as value, which the are evaluated for the particular sector.
+Here `1850soc` only applies to the given set of sectors and only to `ISIMIP3b`, while `histsoc` is used both in `ISIMIP3a` and `ISIMIP3b` and in every sector. Some attributes (e.g. `frequency` in `definitions/variable`) can have objects as value, which the are evaluated for the particular sector.
 
 In order to add a new sector, the following steps need to be taken: