diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index a6b6bc54e568ee966109cd91166284c1ea80aee4..2ecf30fe121572a5113f04b855ef7f816ec185b0 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -20,6 +20,7 @@
"react-bootstrap": "^2.7.0",
"react-chartjs-2": "^5.1.0",
"react-dom": "^18.2.0",
+ "react-icons": "4.8.0",
"react-router-dom": "^6.5.0"
},
"devDependencies": {
@@ -12475,6 +12476,14 @@
"react": "^18.2.0"
}
},
+ "node_modules/react-icons": {
+ "version": "4.8.0",
+ "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+ "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+ "peerDependencies": {
+ "react": "*"
+ }
+ },
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -23726,6 +23735,12 @@
"scheduler": "^0.23.0"
}
},
+ "react-icons": {
+ "version": "4.8.0",
+ "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+ "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+ "requires": {}
+ },
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index af8176b74a9a239e03517aab95fb23df7dc2d330..857ea767e6d7cba5010c4a283b5da9fe9b61b0b3 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -53,6 +53,7 @@
"react-bootstrap": "^2.7.0",
"react-chartjs-2": "^5.1.0",
"react-dom": "^18.2.0",
+ "react-icons": "4.8.0",
"react-router-dom": "^6.5.0"
},
"description": "## development environment",
diff --git a/webapp/src/components/CollapsibleBox.tsx b/webapp/src/components/CollapsibleBox.tsx
index 52c45e478bf8ee7eb1ec1b542e65150d94ba29ce..890e531e889121c1d9160350c636d736dc2895cb 100644
--- a/webapp/src/components/CollapsibleBox.tsx
+++ b/webapp/src/components/CollapsibleBox.tsx
@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { Col, Row } from 'react-bootstrap';
+import { GrAdd, GrSubtract } from 'react-icons/gr';
interface CollapsibleBoxProps {
title: string;
@@ -16,9 +17,9 @@ const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children }) => {
<h1 className="bold-caps-16pt dark-teal">{title}</h1>
</Col>
<Col align="right">
- <button onClick={() => setIsCollapsed(!isCollapsed)}>
- {isCollapsed ? 'Expand' : 'Collapse'}
- </button>
+ <button className="expand-collapse-btn" onClick={() => setIsCollapsed(!isCollapsed)}>
+ {isCollapsed ? <GrAdd/> : <GrSubtract />}
+ </button>
</Col>
</Row>
diff --git a/webapp/src/pages/CompendiumData.tsx b/webapp/src/pages/CompendiumData.tsx
index 59386bb59e92e41515f7b58000e45e37681506fa..84b425076fdf771b47c481590030f89ac0a1d4ec 100644
--- a/webapp/src/pages/CompendiumData.tsx
+++ b/webapp/src/pages/CompendiumData.tsx
@@ -13,82 +13,33 @@ function CompendiumData(): ReactElement {
<SectionLink section={"Reports"} />
</PageHeader>
<Banner type={'data'}>
- <p>
- What the Compendium is, the history of it, the aim, what you can find in it etc etc etc etc
- Lorem ipsum dolor sit amet, consec tetur adi piscing elit, sed do eiusmod tempor inc dolor sit amet, consec
- tetur adi piscing elit, sed do eiusmod tempor inc
- </p>
+ <p className="wordwrap">
+ The GÉANT Compendium provides an authoritative reference source for anyone with an
+ interest in the development of research and education networking in Europe and beyond.
+ Published since 2001, the Compendium provides information on key areas such as users,
+ services, traffic, budget and staffing.
+ </p>
</Banner>
+
<Container className="geant-container">
<Row>
<div className="center">
-
+
<CollapsibleBox title="ORGANISATION">
-
<div className="collapsible-column">
<Row>
<Link to="/analysis" state={{ graph: 'budget' }}>
- <span>Length of NREN dark fibres leased by NRENs</span>
+ <span>Budget of NRENs per Year</span>
</Link>
</Row>
<Row>
<Link to="/funding" state={{ graph: 'fundingsources' }}>
- <span>Length of dark fibres operated by NRENs outside their own countries</span>
+ <span>Income Source of NRENs per Year</span>
</Link>
</Row>
-
- <Row>
- <span>Average duration of NREN's Indefensible Rights of use of dark fibre cables</span>
- </Row>
- <Row>
- <span>Length of of dark fibre cables laid by the NREN in their network</span>
- </Row>
- </div>
- <div className="collapsible-column">
- <Row>
- <span>Length of NREN dark fibres leased by NRENs</span>
- </Row>
-
- <Row>
- <span>Length of dark fibres operated by NRENs outside their own countries</span>
- </Row>
-
- <Row>
- <span>Average duration of NREN's Indefensible Rights of use of dark fibre cables</span>
- </Row>
- <Row>
- <span>Length of of dark fibre cables laid by the NREN in their network</span>
- </Row>
</div>
</CollapsibleBox>
- <Row>
- <CollapsibleBox title="STANDARDS AND POLICES">
-
- </CollapsibleBox>
- </Row>
-
-
- <Row>
- <CollapsibleBox title="CONNECTED USERS">
-
- </CollapsibleBox>
- </Row>
-
-
- <Row>
- <CollapsibleBox title="NETWORK">
-
- </CollapsibleBox>
- </Row>
-
-
- <Row>
- <CollapsibleBox title="SERVICES">
-
- </CollapsibleBox>
- </Row>
-
</div>
</Row>