Merge pull request #9 from HBPMedical/dev

Release for MIP 6.5

.eslintignore

@@ -1,3 +1,4 @@
 src/setupTests.ts
 src/registerServiceWorker.ts
-src/**/__tests__/**
+src/**/__tests__/**
+src/**/GraphQL/*.generated.*

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

CHANGELOG.md

@@ -1,4 +1,20 @@
 # Changelog
+## 2021/10/08
+
+- Added Storybook. 
+- Table and GroupTable visual components.
+- Integrated new Descriptive Statistics output
+- Draft Formula UI
+- GraphQL implementation for Metadata
+- GraphQL implementation for Descriptive Statistics
+
+## 7.1.0 - 2021/01/14
+
+- Moved web server from nginx to Caddy
+
+## 7.0.0 - 2021/01/14
+
+- Integration with new Backend API
 
 ## 6.4.12 - 2021/01/14
 

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:latest as builder
+FROM node:lts as builder
 LABEL maintainer = "[email protected]"
 
 WORKDIR /frontend
@@ -34,7 +34,7 @@ RUN apk add --no-cache --update ca-certificates wget openssl bash && update-ca-c
 
 # Add frontend config
 COPY ./docker/runner/conf/config.json.tmpl \
-     /portal/conf/
+    /portal/conf/
 
 # Add reverse proxy / webserver config
 COPY ./docker/runner/conf/Caddyfile /etc/caddy/Caddyfile
@@ -61,3 +61,4 @@ LABEL org.label-schema.build-date=$BUILD_DATE \
     org.label-schema.docker.dockerfile="Dockerfile" \
     org.label-schema.memory-hint="10" \
     org.label-schema.schema-version="1.0"
+

README.md

@@ -1,70 +1,124 @@
-[![CHUV](https://img.shields.io/badge/HBP-AF4C64.svg)](https://www.humanbrainproject.eu) [![License](https://img.shields.io/badge/license-AGPL--3.0-blue.svg)](https://www.gnu.org/licenses/agpl-3.0.html) [![DockerHub](https://img.shields.io/badge/docker-hbpmip%2Fportal--frontend-008bb8.svg)](https://hub.docker.com/r/hbpmip/portal-frontend/) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/9143f566eca64ffbb06258c61fb64ea0)](https://www.codacy.com/app/hbp-mip/portal-frontend?utm_source=github.com&utm_medium=referral&utm_content=HBPMedical/portal-frontend&utm_campaign=Badge_Grade) [![CircleCI](https://circleci.com/gh/HBPMedical/portal-frontend/tree/master.svg?style=svg)](https://circleci.com/gh/HBPMedical/portal-frontend/tree/master)
+[![CHUV](https://img.shields.io/badge/HBP-AF4C64.svg)](https://www.humanbrainproject.eu) [![License](https://img.shields.io/badge/license-AGPL--3.0-blue.svg)](https://www.gnu.org/licenses/agpl-3.0.html) [![DockerHub](https://img.shields.io/badge/docker-hbpmip%2Fportal--frontend-008bb8.svg)](https://hub.docker.com/r/hbpmip/portal-frontend/) 
 
 # MIP portal frontend
 
 ## Summary
 
-MIP Frontend is the web portal for the [Medical Informatics Platform for the Human Brain Project](https://hbpmedical.github.io/).
+The MIP Frontend is the web component of the [Medical Informatics Platform](http://mip.humanbrainproject.eu/) for the Human Brain Project.
 
-The portal runs on [React](https://reactjs.org), a JavaScript library for building user interfaces, and embed several libraries, among them are:
+You can find more informations on the MIP on [EBRAINS](https://ebrains.eu/service/medical-informatics-platform) website.
 
-- [TypeScript](https://www.typescriptlang.org), a typed superset of JavaScript
-- [D3.js](https://d3js.org) and [Highcharts](https://www.highcharts.com), visualizations and interactive charts libraries
-- [Bootstrap](https://getbootstrap.com/), a frontend component library
-- [Unstated](https://github.com/jamiebuilds/unstated), a state library
-
-## Development
-
-This is a minimal setup to do frontend development in this project:
+## Deployment
 
-### Run the Backend
+The MIP is a collection of services and components bundled in a deployment pack. It can be either deployed localy or in a federated way. Everything you need in order to deploy is to be found in the [mip-deployment](https://github.com/HBPMedical/mip-deployment) repository.
 
-## Either with the MIP deployment package
 
-- Checkout the master branch of the [mip-deployment](https://github.com/HBPMedical/mip-deployment) project, and follow the setup instructions.
+## Frontend development
 
-## or by running the tests
+The interface runs on [React.js](https://reactjs.org), a JavaScript library for building user interfaces. This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
+It embed several libraries, among them are:
 
-- `./run-test.sh`
+- [TypeScript](https://www.typescriptlang.org), a typed superset of JavaScript
+- [D3.js](https://d3js.org) and [Highcharts](https://www.highcharts.com), visualizations and interactive charts libraries
+- [Bootstrap](https://getbootstrap.com/), a frontend component library
+- [Unstated](https://github.com/jamiebuilds/unstated), a state library
 
-### Frontend development with React
+Here is the setup to do frontend development in this project:
+
+### Backend
+- You will need to run a backend which will contains the API and the underlying logic of the analytic engine, Exareme.
+- Checkout the desired branch of the [mip-deployment](https://github.com/HBPMedical/mip-deployment) project.
+- Create a .env file in the folder filled with the following environment variables
+```
+PUBLIC_MIP_HOST=[MY IP]
+KEYCLOAK_URL=${PUBLIC_MIP_HOST}
+DATACATALOGUE_HOST=datacatalogue.mip.ebrains.eu
+DATACATALOGUE_PROTOCOL=https
+KEYCLOAK_AUTHENTICATION=0
+KEYCLOAK_CLIENT_ID=MIP
+KEYCLOAK_CLIENT_SECRET=
+KEYCLOAK_PROTOCOL=http
+KEYCLOAK_REALM=MIP
+KEYCLOAK_SSL_REQUIRED=none
+MIP_TYPE=local
+NODE_TYPE=
+PUBLIC_MIP_PROTOCOL=http
+EXTERNAL_MIP_PROTOCOL=http
+MIP_LINK=direct
+
+EXAREME=24.1.2
+PORTALBACKEND=7.2.0
+FRONTEND=7.1.0
+GALAXY=1.3.4
+MIP=6.4.0
+```
+- You need to change PUBLIC_MIP_HOST to your local IP
+- In docker-compose.yml file, change the line `CONVERT_CSVS=FALSE`to `CONVERT_CSVS=TRUE`so the data gets processed into the analytic engine.
+- Launch the backend with docker-compose: `docker-compose up -d`
+- You can tweak the component version (EXAREME, PORTALBACKEND, GALAXY according to your needs)
+
+### Middleware
+
+The next version of the Frontend comes with a Middleware which is in charge of normalizing input from various engine and allow the Frontend to be completely agnostic from external services. 
+
+See https://github.com/HBPMedical/gateway
+
+You need to install the middleware to your stack in order to communicate with the backend. 
+
+- `git clone https://github.com/HBPMedical/gateway.git` 
+- `cd gateway/api`
+- `git checkout develop`
+- `npm install`
+- `npm run start:dev`
+
+### React Frontend setup
+
+Let's fire a development frontend. I assume you cloned this repository and checked out the desired branch. You are most likely going to checkout the dev branch.
+
+- Install the latest [nodejs](https://nodejs.org)
+- Install the latest [yarn](https://yarnpkg.com/en/)
+- Run: `yarn install`
+- Create a `.env.development` file in the root directory and add 
+```
+REACT_APP_BACKEND_URL=http://[MY IP]:8081
+REACT_APP_GATEWAY_URL=$REACT_APP_BACKEND_URL/graphql
+``` 
+which points to the backend API.
 
-This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
+- Run: `yarn start`
+- Browse to your local IP. http://[MY IP]:3000
 
-You can find the most recent version of the Create React App guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
 
-- Install [nodejs](https://nodejs.org)
-- Install [yarn](https://yarnpkg.com/en/)
-- Run: `yarn install`
-- Run: `yarn watch`
-- Browse to [http://localhost:3000](http://localhost:3000)
+#### Design Components
 
-## Tests
+Starting with the MIP 6.5, component are designed with [Storybook](https://storybook.js.org/),  an open source tool for building UI components and pages in isolation. 
 
-### Local
+`yarn run storybook` -> http://localhost:6006/
 
-You can generate models and experiments by running the tests:
+It follows the [Component Driven User Interfaces](https://www.componentdriven.org/) process. 
 
-- `./run-test.sh` or with a regex `./run-test.sh regex anova`
 
-Tests run with Jest, see [the jest cli doc](https://jestjs.io/docs/en/cli) for more details
 
-### Turn on authentication
+### Tests
 
-- Change the AUTHENTICATION flag from 0 to 1 in test-docker/docker-compose.yml
-- You can administer Keycloack from this address [http://localhost:3000/auth](http://localhost:3000)
+This will run integration tests on the backend API to ensure that the whole system is working properly. Results of the tests are showing up in the frontend. 
 
-## Build (produce a local docker container)
+- `yarn test` or with a regex, `yarn test anova`
 
-Run: `./build.sh`
+- Tests run with Jest, see [the jest cli doc](https://jestjs.io/docs/en/cli) for more details
+- E2E tests are run with [TestProject](https://testproject.io/) on deployed versions
 
-## Publish on Docker Hub
+### Build 
+- Produces a docker container
+- Run: `./build.sh`
 
-Run: `./publish.sh`
+## Publish
+- Builds and publish a release on Docker Hub
+- Run: `./publish.sh`
 
 ## License
 
-Copyright © 2016-2020 LREN CHUV
+Copyright © 2016-2021 LREN CHUV
 
 Licensed under the GNU Affero General Public License, Version 3.0 (the "License");
 you may not use this file except in compliance with the License.

codegen.yml

@@ -0,0 +1,14 @@
+overwrite: true
+schema: "http://127.0.0.1:8081/graphql"
+documents: "src/components/API/GraphQL/queries.ts"
+generates:
+  src/components/API/GraphQL/types.generated.ts:
+    - typescript
+  src/components/API/GraphQL/:
+    preset: near-operation-file
+    presetConfig:
+      extension: .generated.tsx
+      baseTypesPath: types.generated.ts
+    plugins:
+      - "typescript-operations"
+      - "typescript-react-apollo"

docker/runner/conf/Caddyfile

@@ -26,6 +26,7 @@
 
 	handle /* {
 		root * /usr/share/caddy/html
+		try_files {path} /index.html
 		file_server
 	}
 
@@ -40,11 +41,15 @@
 		import rp-{$MIP_LINK:direct} {$KEYCLOAK_HOST}
 	}
 
-	handle /services/* {
+	handle /services/sso/* {
 		uri replace /services/ /{$PORTAL_BACKEND_CONTEXT:services}/
 		import rp-{$MIP_LINK:direct} {$PORTAL_BACKEND_SERVER}
 	}
 
+	handle_path /services/* {
+		import rp-{$MIP_LINK:direct} {$GATEWAY_SERVER}
+	}
+
 	# keycloak redirect on /services/ after login. In that case, redirect to /
 	redir /services/ / permanent