Finished release 0.1.

webapp/.eslintrc.json

+{
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": 2018,
+      "sourceType": "module"
+    },
+    "plugins": [
+      "@typescript-eslint",
+      "react-hooks"
+    ],
+    "extends": [
+      "plugin:react/recommended",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "rules": {
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+      "react/prop-types": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn", { "argsIgnorePattern": "^_" }
+      ]
+    },
+    "settings": {
+      "react": {
+        "pragma": "React",
+        "version": "detect"
+      }
+    }
+  }
\ No newline at end of file

webapp/README.md

+# Working with the Web App
+
+## development environment
+
+From this folder, run:
+
+```bash
+$ npm init
+```
+
+To run the webpack development server:
+
+```bash
+$ npm run start
+```
+
+Note that you should run the Flask application separately
+and append `?test=1` to the dev url that launches in the browser.
+
+## Releasing
+
+To build a new bundle, run:
+
+```bash
+$ npm run build
+```
+
+This will build the new bundle and deploy it to
+`compendium_v2/static/*`.  This should be committed.

webapp/package.json

+{
+  "name": "compendium-v2",
+  "version": "0.0.1",
+  "devDependencies": {
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-transform-runtime": "^7.13.10",
+    "@babel/preset-env": "^7.13.10",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/preset-typescript": "^7.13.0",
+    "@babel/runtime": "^7.13.10",
+    "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.18",
+    "@types/webpack": "^4.41.26",
+    "@types/webpack-dev-server": "^3.11.2",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "css-loader": "^5.1.2",
+    "date-fns": "^2.26.0",
+    "eslint": "^7.22.0",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "file-loader": "^6.2.0",
+    "fork-ts-checker-webpack-plugin": "^6.1.1",
+    "image-webpack-loader": "^8.1.0",
+    "sass": "^1.32.8",
+    "sass-loader": "^11.0.1",
+    "style-loader": "^2.0.0",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.2.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.25.0",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "scripts": {
+    "start": "webpack serve --mode development --open --port 4000",
+    "build": "webpack --mode production"
+  },
+  "dependencies": {
+    "@types/react-router-dom": "^5.3.3",
+    "bootstrap": "^4.6.0",
+    "chart.js": "^3.9.1",
+    "file-loader": "^6.2.0",
+    "install": "^0.13.0",
+    "npm": "^7.6.3",
+    "react-bootstrap": "^2.0.2",
+    "react-chartjs-2": "^4.3.1",
+    "react-router-dom": "^5.2.1"
+  },
+  "description": "## development environment",
+  "main": "index.js",
+  "author": "saket.agarahari",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.geant.net/live-projects/compendium-v2.git"
+  },
+  "keywords": [
+    "promise",
+    "async",
+    "UnhandledPromiseRejectionWarning",
+    "PromiseRejectionHandledWarning"
+  ]
+}

webapp/src/About.tsx

+import React, {ReactElement} from 'react';
+// import AnnualReport from './AnnualReport';
+// import DataAnalysis from './DataAnalysis';
+// import Navigation from './Navigation';
+
+
+// const api_url = window.location.origin+'/';
+
+// console.log(api_url)
+
+function About(): ReactElement {
+
+  return (
+
+    <div>
+        <h1>About Page</h1>
+    </div>
+  );
+}
+
+export default About;

webapp/src/AnnualReport.tsx

+import React, {useState, useEffect, ReactElement} from 'react';
+import {Nren, Service, ServiceMatrix} from "./Schema";
+ 
+
+// const api_url = window.location.origin;
+// const api_url = "http://[::1]:33333";
+const api_url = "https://test-compendium01.geant.org";
+
+function AnnualReport(): ReactElement {
+
+    function api<T>(url: string, options: RequestInit): Promise<T> {
+        return fetch(url, options)
+            .then((response) => {
+                console.log(response)
+                if (!response.ok) {
+                    return response.text().then((message) => {
+                        console.error(`Failed to load datax: ${message}`, response.status);
+                        throw new Error("The data could not be loaded, check the logs for details.");
+                    });
+                }
+                return response.json() as Promise<T>;
+            })
+    }
+
+    const [nrens, setNrens] = useState<Nren[]>();
+    const [services, setServices] = useState<Service[][]>();
+
+    useEffect(() => {
+        // let timeoutRef = 0;
+        const loadData = () => {
+            api<ServiceMatrix>(api_url+'/service-matrix',{
+                referrerPolicy: "unsafe-url",
+                headers: {
+                                "Access-Control-Allow-Origin": "*",
+                                "Content-Type": "text/plain"
+                                }
+            })
+                .then((serviceMatrix :ServiceMatrix)=>{
+                    console.log('got response==>nrens');
+                    console.log(serviceMatrix.nrens);
+                    console.log('got response==>service');
+                    console.log(serviceMatrix.services);
+
+                    setNrens(serviceMatrix.nrens)
+                    setServices(serviceMatrix.services)
+                })
+  
+        }
+        loadData()
+      }, []);
+
+  return (
+    <div>
+        <h1>Annual Report</h1>
+        {/*{nrens?.map(nren=>(*/}
+        {/*    <h4 key={nren.nren_id}>{nren.name}</h4>*/}
+        {/*))}*/}
+    </div>
+  );
+}
+export default AnnualReport;

webapp/src/App.tsx

+import React, {ReactElement} from 'react';
+import AnnualReport from './AnnualReport';
+import DataAnalysis from './DataAnalysis';
+import Navigation from './Navigation';
+import About from './About';
+import {BrowserRouter as Router,Switch, Route} from 'react-router-dom'
+
+
+
+// const api_url = window.location.origin+'/';
+
+// console.log(api_url)
+
+function App(): ReactElement {
+    return (
+      <Router>
+        <Navigation/>
+          <Switch>
+            <Route exact path="/about" component={About} />
+            <Route exact path='/analysis' component={DataAnalysis} />
+            <Route exact path="/report" component={AnnualReport} />
+            <Route path="*" component={About} />
+        </Switch>
+
+      </Router>
+      
+      );
+    }
+
+export default App;

webapp/src/DataAnalysis.tsx

+import React, {ReactElement} from 'react';
+
+// const api_url = window.location.origin+'/';
+
+// console.log(api_url)
+
+function DataAnalysis(): ReactElement {
+
+  return (
+    <div>
+        <h1>Data Analysis</h1>
+    </div>
+  );
+}
+export default DataAnalysis;

webapp/src/Navigation.tsx

+import React, {ReactElement} from 'react';
+import {Link} from 'react-router-dom'
+
+// const api_url = window.location.origin+'/';
+
+// console.log(api_url)
+
+function Navigation(): ReactElement {
+
+  const navStyle ={ 
+    color: 'white'
+  }
+
+  return (
+    <nav className='header-naviagtion'>
+        <ul className='nav-links'>
+          <li>
+            <Link  style={navStyle} to="/about">
+              About
+            </Link>
+          </li>
+          <li>
+            <Link  style={navStyle} to="/report">
+              Annual Report
+            </Link>
+          </li>
+          <li>
+            <Link  style={navStyle} to="/analysis">
+              Data Analysis
+            </Link>
+          </li>
+        </ul>
+    </nav>
+  );
+}
+
+export default Navigation;

webapp/src/Schema.tsx

+export interface ServiceMatrix {
+    key: string,
+    nrens: Nren[],
+    services: Service[][]
+}
+
+
+export interface Nren {
+    name: string
+    nren_id:number
+    tags: string[]
+}
+
+
+export interface Service {
+    compendium_id: number,
+    country_code:string,
+    country_name:string,
+    created_at:Date,
+    id:number,
+    identifier:string,
+    kpi: string[],
+    nren_abbreviation:string
+    nren_id:number,
+    public:boolean,
+    question_id:number,
+    question_style:string,
+    response_id:number,
+    short:string,
+    status:number,
+    tags:string[],
+    title:string,
+    title_detailed:string,
+    updated_at:Date,
+    url:string,
+    value:string
+}

webapp/src/index.tsx

+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import './styles.scss';
+
+
+ReactDOM.render(<App />, document.getElementById('root'));
\ No newline at end of file

webapp/src/styles.scss

+table {
+    min-width: 650;
+}
+
+thead {
+    background-color: lightgray;
+}
+
+.state_true {
+    background-color: lightgreen;
+}
+
+.state_false {
+    background-color: red;
+}
+
+$border-color: #064c6e !default;
+$text-color: #377592 !default;
+$queue_link_hover: #ffffff !default;
+
+.title-background {
+  background-image: url("images/compendium_header.png");
+  background-color: #064c6e;
+  vertical-align: center;
+  padding-bottom: 15px;
+  padding-bottom: 15px;
+}
+$footer-height: 75px !default;
+
+.footer-img{
+  width: 55px;
+  height:38px
+}
+
+.footer {
+  margin-top: 8px;
+  background-color: #064c6e;
+  font-size: 8px;
+  height:75px;
+  color: black;
+  width:100%;
+  padding:15px;
+  clear:both;
+}
+
+.footer-text {
+  color: white;
+  margin-left: 30px;
+}
+
+.px {
+  padding-left: 55px;
+}
+
+.header-naviagtion{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  min-width: 10vh;
+  background: #064c6e;
+  color: white
+}
+
+.nav-links{
+  width: 50%;
+  display: flex;
+  justify-content:  space-around;
+  align-items: center;
+  list-style: none;
+}
\ No newline at end of file

webapp/tsconfig.json

+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["src"]
+}

webapp/webpack.config.ts

+import path from "path";
+import webpack from "webpack";
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+
+const config: webpack.Configuration = {
+  entry: "./src/index.tsx",
+  module: {
+    rules: [
+      {
+        test: /\.(ts|js)x?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: [
+              "@babel/preset-env",
+              "@babel/preset-react",
+              "@babel/preset-typescript",
+            ],
+          },
+        },
+      },
+      {
+        test: /\.scss$/,
+        exclude: /node_modules/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          { loader: 'sass-loader' },
+        ]
+      },
+      {
+        test: /\.css$/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' }
+        ]
+      },
+      {
+        test: /\.(png|svg|jpe?g|gif)$/,
+        include: /images/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'images/',
+              publicPath: 'images/'
+            }
+          },
+          {
+            loader: 'image-webpack-loader',
+            options: {
+              query: {
+                mozjpeg: {
+                  progressive: true,
+                },
+                gifsicle: {
+                  interlaced: true,
+                },
+                optipng: {
+                  optimizationLevel: 7,
+                }
+              }
+            }
+          },
+        ]
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js", ".html"],
+  },
+  output: {
+    path: path.resolve(__dirname, "..", "compendium_v2", "static"),
+    filename: "bundle.js",
+  },
+  devServer: {
+    contentBase: path.join(__dirname, "..", "compendium_v2", "static"),
+    compress: true,
+    port: 4000,
+  },
+  plugins: [
+    new ForkTsCheckerWebpackPlugin({
+      async: false,
+      eslint: {
+       files: [
+            "./src/**/*\.tsx",
+        ]
+      },
+    }),
+  ],
+};
+
+export default config;