hip-infrastructure / frontend

Meta package for the HIP Frontend: Gateway and web application

HIP Frontend

Meta package for HIP web app and gateway API

This is the install for the HIP frontend

Includes

• Web app hip
• Gateway gateway

The install is based on make and git submodules. As the package will migrate to K8s, everything is build on the host

Prerequisite

• Ubuntu 22.04
• A Keycloak instance
  • as in https://github.com/HIP-infrastructure/keycloak
  • as well as the collab backend install_keycloak_backend.sh
• Nextcloud 24.0.x installed, as in Nextcloud install
• Configured Nextcloud for the HIP: NextcloudConfig.md)

Deploy, production

• Clone this repo, git clone --recurse-submodules https://github.com/HIP-infrastructure/frontend.git
• cd frontend
• git checkout master
• You can checkout the submodules to the desired branch, default is the latest version
• Copy .env.template to .env and edit the variables according to your needs.

First time install

• install all the dependencies by calling
• ./hip-required_ubuntu-22.04.sh
• You might want to logout and login again, in order to gain access to the docker command for your current user

GhostFS

• a distributed file system tailored to the HIP
• make install-ghostfs
• You will need to provide a user/password for the server, that you will need to install on the backend)
• pm2 cannot start ghostfs at this time, as Nextcloud data storage doesn't exist yet. A pm2 error for the service is ok at this time.

Deploy, dev

Change the NODE_ENV to development in the .env file

make dev-install

deploy/reload gateway make dev-install-gateway

Quick summary for make (after install)

install-ghostfs                Stop, update and install GhostFS only
status                         Show the status of the HIP
install-web                    Build & install the webapp and the gateway
start                          Start all services (-GhostFS)
stop                           Stop all services (-GhostFS)
maintenance                    Enable/disable maintenance mode (make maintenance-on/maintenance-off)
dc                             Run docker-compose (make dc c="ps")
dev-install                    Install dev stack for frontend & gateway, use update branch=dev to switch branch, you should have NODE_ENV=development
dev-install-gateway            Restart the dev gateway
help                           List available tasks on this project

frontend's Issues

Embed documentation

Either in Markdown, dynamically, or as a static link

HIP subject upload mockups

As a clinician, I want to upload a folder with all the (anonymised) data for a subject.
I want to be able to add additional data later
I need also a subjectId in order to identify the source

Subject pseudo anonymization

As a clinician, I need a tool to pseudo anonymize my subject prior to upload

• Defacing
• EHR etc.

UI Improvements

Nextcloud Login screen

• Reset password is hidden

Session

• Dropdown
  • Add running apps
  • Add "Create new session"
  • Label buttons
    Applications
  • Play/Stop
  • Show Password

App Catalog

• Add a disclaimer
• Change "open website" to something like "external documentation"

Migrate UI Library from PrimeReact to Material Design

Better UI components and code, industrial grade, better UI patterns and theming

CI/CD for Frontend meta package

Synchronize Gitlab and Github
Create docker containers

HIP data folder transformation to BIDS format (API)

As a frontend dev, I want to be able to transform a subject folder into BIDS folder on request

Install OnlyOffice

As a component, I want to be able to produce and consume messages in order to create pipelines between apps

Use RabbitMQ as a broker to communicate between components.

1. Bids converter prototype

As a user, I want to see some informations about the HIP after I logged in

Dashboard page after login, replacement for the NextCloud default.
Should display the different spaces, useful informations for the user, documentation, and a way to enter either private or collaborative space.

refactor: pull and use `bids_tools` docker image from the Gitlab CI container registry

This should involves the following tasks:

• Remove the bids_tools submodule
• Revise the Makefile: we should not build anymore the image but instead, we should log and pull the image directly from our container registry
• Update .env.template with new variables:
  • BIDS_TOOLS_VERSION: docker image version tag
  • BIDS_TOOLS_IMAGE: path to the docker image (e.g. registry.hbp.link/hip/bids-tools)

As a user I want to log into the HIP via my EBRAINS account

1. Defines roles for private space
2. Integrate EBRAINS Keycloak Authentication process to NextCloud.

As a user, I want to see my sessions, workflows, available apps and documentation in the main page of the HIP

As a frontend developer, I want a better way to manage the state of the app

See GraphQL
And XState https://mastery.games/post/state-machines-in-react/

As a user, I want to be guided to the HIP functionalities

See https://shepherdjs.dev/

As a clinician, I need a way to upload additional metadata for a subject

Redcap ?

As a user I want more control on the apps in the session view

Present the session view along with application, provide state about running apps, and actions to start or pause them.

HIP data folder transformation to BIDS format (Frontend action)

As a user, I want to be able to request a transformation of a raw subject folder into BIDS format with all relevant guidance et feedback necessary to achieve the task

React router integration

As more use cases are coming, the frontend needs a way to handle different resources under routes
/sessions/:id
/workflows/:id

Integration of https://reactrouter.com/