Skip to content

Commit 8a395cc

Browse files
committed
Merge remote-tracking branch 'origin/staging' into rules_distinction_fairness
2 parents 9337fa2 + e0ef018 commit 8a395cc

25 files changed

+740
-212
lines changed

README.md

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,35 +26,61 @@ The `CABE_` variables are defined in the `.env` file.
2626
See [.env.example](.env.example) file for an example.
2727
To run the application the `.env` file is required.
2828

29-
## API service
30-
31-
The API web service reads the NetCDF file and returns the data as JSON which is used in the web application.
29+
## Software requirements
3230

33-
It is written in Python using [Flask](https://flask.palletsprojects.com/) and [xarray](https://xarray.dev/).
31+
You should have [Node.js](https://nodejs.org/en) (v22 or greater) and Python 3.12 installed.
3432

35-
Python dependencies can be installed with
33+
Dependencies can be installed with
3634

3735
```bash
38-
python3 -m venv venv
39-
source venv/bin/activate
36+
# From the root of the repository
37+
# To install Node.js dependencies
38+
npm install
39+
# To install Python dependencies
4040
pip install -r requirements.txt
4141
```
4242

43-
The web service can be started with
43+
## Software installation on Windows
44+
45+
Use miniforge to setup Python and Node.js.
46+
47+
1. From [https://conda-forge.org/download](https://conda-forge.org/download/) download the latest Miniforge3 Windows 64-bit installer and install it.
48+
2. Open a PowerShell
49+
3. Create environment with `mamba create --name cabe python=3.12 nodejs=22`
50+
4. Activate environment with `mamba activate cabe`
51+
5. Change the current working directory to the location where you want to clone the repository. For example `cd C:\Users\username\Documents`.
52+
6. Clone repo with `git clone https://github.com/pbl-nl/website-carbon-budget-explorer.git` or use [Visual Studio Code](https://code.visualstudio.com/) to clone repository.
53+
7. Change the current working directory to the repository with `cd website-carbon-budget-explorer`.
54+
8. Install Python dependencies with `pip install -r requirements.txt`
55+
9. Install Node.js dependencies with `npm install`
56+
57+
If `git` executable is not installed, then install with `mamba install git`.
58+
59+
If `mamba` executable is not available, use `conda` instead.
60+
61+
Do not forget to activate the environment with `mamba activate cabe` before running the commands below.
62+
63+
## API service
64+
65+
The API web service reads the NetCDF files and returns the data as JSON which is used in the web application.
66+
67+
It is written in Python using [Flask](https://flask.palletsprojects.com/) and [xarray](https://xarray.dev/).
68+
69+
On Linux and MacOS the web service can be started with
4470

4571
```bash
4672
gunicorn --bind 0.0.0.0:5000 --workers 4 'ws:app'
4773
```
4874

4975
(Add `--reload` argumment to reload on Python file changes)
5076

51-
In Windows gunicorn might not work. Then use waitress.
77+
On Windows, use flask built-in developer server.
5278

5379
```shell
54-
pip install waitress
55-
waitress-serve --listen=127.0.0.1:5000 ws:app
80+
flask --app ws:app run -p 5000
5681
```
5782

83+
If an error occurs here, try out different ports (e.g. 5001, 5005 etc). Also adjust the changed port in the `.env` file.
5884
To see the routes of the web service use
5985

6086
```bash
@@ -63,8 +89,7 @@ flask --app ws:app routes -s rule
6389

6490
## Developing
6591

66-
You'll need [node.js](https://nodejs.org/en) (v22 or greater) to run a local development server.
67-
Once you've created a project and installed dependencies with `npm install`, start a development server:
92+
Start a development server:
6893

6994
```bash
7095
npm run dev

requirements.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ xarray>=2025.1.1
22
netcdf4>=1.7.2
33
flask>=3.1.0
44
flask_cors>=5.0.0
5-
gunicorn>=23.0.0
5+
gunicorn>=23.0.0; platform_system != "Windows"
66
sentry-sdk[flask]>=2.20.0
77
python-dotenv>=1.0.1
88
gevent>=24.11.1

src/app.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
5+
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
66
<meta name="viewport" content="width=device-width" />
77
%sveltekit.head%
88
</head>

src/lib/CountryHeader.svelte

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
<script lang="ts">
22
import { page } from '$app/stores';
33
import type { Region } from './api';
4+
import RegionsDropDown from './RegionsDropDown.svelte';
45
interface Props {
56
info: Region;
7+
regionsOfCountry?: Region[];
8+
countriesOfRegion?: Region[];
69
}
710
8-
let { info }: Props = $props();
11+
let { info, countriesOfRegion, regionsOfCountry }: Props = $props();
912
1013
const blankFlag =
1114
'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"%3E%3C/svg%3E';
12-
let regionFlag = $state(`https://flagcdn.com/${info.iso2?.toLowerCase()}.svg`);
15+
let regionFlag = $state(
16+
info.iso2 ? `https://flagcdn.com/${info.iso2?.toLowerCase()}.svg` : blankFlag
17+
);
18+
19+
$effect(() => {
20+
regionFlag = info.iso2 ? `https://flagcdn.com/${info.iso2?.toLowerCase()}.svg` : blankFlag;
21+
});
1322
</script>
1423

1524
<div id="country-header" class="flex flex-row items-center gap-4 pb-2">
@@ -30,4 +39,10 @@
3039
}}
3140
/>
3241
<h1 class="text-3xl font-bold">{info.name}</h1>
42+
{#if countriesOfRegion}
43+
<RegionsDropDown title="Members" regions={countriesOfRegion} />
44+
{/if}
45+
{#if regionsOfCountry}
46+
<RegionsDropDown title="Member of" regions={regionsOfCountry} />
47+
{/if}
3348
</div>

src/lib/GlobalBudgetCard.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
</script>
2424

2525
<div class="grid min-w-full grid-cols-2 place-items-center rounded bg-base-100 p-2 shadow-xl">
26-
<div class="text-center text-base-content/60">Global carbon budget</div>
26+
<div class="text-center text-base-content/60">Remaining carbon budget</div>
2727
<div class="text-center text-base-content/60">That amounts to</div>
2828

2929
<div class="text-4xl font-extrabold">{$remainingBudgetCounter.toFixed()}</div>

src/lib/GlobalQueryCard.svelte

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,14 @@
5252
<div class="card prose card-compact min-w-full bg-base-100 shadow-xl">
5353
<div class="card-body">
5454
<div>
55-
<h2 class="not-prose card-title">Global budget</h2>
56-
<p class="italic">How much do we have left?</p>
55+
<h2 class="not-prose card-title">Global settings</h2>
56+
<p class="italic">The remaining emissions are determined by:</p>
5757
<div class="block">
5858
Limit global warming to (&deg;C)
5959
<span
6060
class="tooltip text-lg"
6161
data-tip="The peak temperature target determines the emissions we can globally still emit. A
62-
less ambitious target (for example, 2.2°C) implies the possibility to emit more greenhouse gases."
62+
less ambitious target (for example, 2.2 °C) implies the possibility to emit more greenhouse gases."
6363
>ⓘ</span
6464
>
6565
<CustomRange
@@ -86,9 +86,9 @@
8686
Reduction of non-CO<sub>2</sub> emissions
8787
<span
8888
class="tooltip z-[750] text-lg"
89-
data-tip="Not only CO2, but also other gases play a role in the global emissions trajectory. Setting this slider to low values assumes small reductions in non-CO2 by 2040, which means that CO2 has to reduce much more, and vica versa.
90-
In the graph to the right, we show all greenhouse gases (CO2 and non-CO2), so the green line will barely move if you adjust this slider, as the temperature goal remains fixed.
91-
However, this does greatly affect the carbon budget (which is only the CO2 part) in the top-left corner of your screen."
89+
data-tip="Not only CO₂, but also other gases play a role in the global emissions trajectory. Setting this slider to low values assumes small reductions in non-CO₂ by 2040, which means that CO₂ has to reduce much more, and vica versa.
90+
In the graph to the right, we show all greenhouse gases (CO₂ and non-CO₂), so the green line will barely move if you adjust this slider, as the temperature goal remains fixed.
91+
However, this does greatly affect the carbon budget (which is only the CO₂ part) in the top-left corner of your screen."
9292
>ⓘ</span
9393
>
9494
<CustomRange
@@ -97,8 +97,7 @@
9797
name="nonCO2red"
9898
/>
9999
</div>
100-
<h2 class="not-prose card-title">Global pathway</h2>
101-
<p><i>How do we spend these emissions over time?</i></p>
100+
<p><i>The allocation of these emissions over time is determined by:</i></p>
102101
<div class="block">
103102
End-of-century negative emissions
104103
<span
@@ -114,10 +113,10 @@
114113
/>
115114
</div>
116115
<div>
117-
The timing of early-century mitigation
116+
Timing of early-century mitigation
118117
<span
119118
class="tooltip text-lg"
120-
data-tip="Analogous to IPCC WGIII scenarios, we distinguish global emission pathways with delayed (i.e., near-similar emissions up to 2030) and immediate action. Delayed action is infeasible with a temperature target of 1.5, so identical data will be shown in that case."
119+
data-tip="Analogous to IPCC WGIII scenarios, we distinguish global emission pathways with delayed (i.e., near-similar emissions up to 2030) and immediate action. Delayed action is infeasible with a temperature target of 1.5 °C, so identical data will be shown in that case."
121120
>ⓘ</span
122121
>
123122
<CategoryPicker bind:value={timing} options={options.timing} name="timing" />

src/lib/RegionList.svelte

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,40 @@
99
let { regions }: Props = $props();
1010
</script>
1111

12-
<!-- TODO add filter by name and filter by non-country (aka ISO2===null) -->
13-
<div class=" grid w-full grid-flow-row grid-cols-5" aria-label="Regions">
12+
<!-- TODO add filter by name and filter by International Groups or country (aka ISO2===null) -->
13+
<h1 class="text-lg">Regions</h1>
14+
<div
15+
class=" grid w-full grid-flow-row grid-cols-3 md:grid-cols-2 xl:grid-cols-5"
16+
aria-label="Regions"
17+
>
1418
{#each regions as region}
15-
<a aria-label={region.iso3} href={`/regions/${region.iso3}${$page.url.search}`}>
16-
{region.name}
17-
</a>
19+
{#if 'countries' in region}
20+
<a
21+
data-sveltekit-preload-data="tap"
22+
aria-label={region.iso3}
23+
class="hover:underline"
24+
href={`/regions/${region.iso3}${$page.url.search}`}
25+
>
26+
{region.name}
27+
</a>
28+
{/if}
29+
{/each}
30+
</div>
31+
<h1 class="text-lg">Countries</h1>
32+
<div
33+
class=" grid w-full grid-flow-row grid-cols-3 md:grid-cols-2 xl:grid-cols-5"
34+
aria-label="Countries"
35+
>
36+
{#each regions as region}
37+
{#if !('countries' in region)}
38+
<a
39+
data-sveltekit-preload-data="tap"
40+
aria-label={region.iso3}
41+
class="hover:underline"
42+
href={`/regions/${region.iso3}${$page.url.search}`}
43+
>
44+
{region.name}
45+
</a>
46+
{/if}
1847
{/each}
1948
</div>

src/lib/RegionsDropDown.svelte

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script lang="ts">
2+
import type { Region } from './api';
3+
4+
let {
5+
regions,
6+
title
7+
}: {
8+
regions: Region[];
9+
title: string;
10+
} = $props();
11+
</script>
12+
13+
<details class="drop dropdown">
14+
<summary class="btn btn-ghost btn-xs font-normal">{title} &#9660;</summary>
15+
<ul
16+
class="menu dropdown-content rounded-box z-50 max-h-[70vh] w-max overflow-y-auto bg-base-100 p-2 shadow-sm"
17+
>
18+
{#each regions as region}
19+
<li>
20+
<a href={`/regions/${region.iso3}`} class="block w-full whitespace-nowrap px-2 py-1">
21+
{region.name}
22+
</a>
23+
</li>
24+
{/each}
25+
</ul>
26+
</details>

src/lib/ShareTabs.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
d="m3.5 6.5l6 6.01l4-4L22 17.08l-1.41 1.41l-7.09-7.97l-4 4L2 7.01z"
1717
/></svg
1818
>
19-
Global budget</a
19+
Global pathway</a
2020
>
2121
<a
2222
href={`/map${$page.url.search}`}
@@ -35,6 +35,6 @@
3535
d="M11.5 3a17 17 0 0 0 0 18m1-18a16.984 16.984 0 0 1 2.574 8.62M15 18a3 3 0 1 0 6 0a3 3 0 1 0-6 0m5.2 2.2L22 22"
3636
/></g
3737
></svg
38-
>World map with shares</a
38+
>World map with allocations</a
3939
>
4040
</div>

src/lib/allocationMethods.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const allocationMethods = {
2525
ECPC: {
2626
label: 'Equal cumulative per capita',
2727
summary:
28-
'Responsibility + Equality. Based on historical emissions and the past and future per capita share.',
28+
'Responsibility + Equality. Pays off historical debt and surplus in the short run and converges to per capita in 2050.',
2929
color: '#ae6600'
3030
},
3131
GF: {

0 commit comments

Comments
 (0)