ChRIS_ui

This repository contains the reference UI for ChRIS, allowing users to create and interact with dynamic containerized workflows. The ChRIS UI is written primarily in TypeScript and React, and uses the PatternFly React pattern library.

Try it now! --> https://app.chrisproject.org

Quickstart

git clone https://github.com/FNNDSC/ChRIS_ui.git
cd ChRIS_ui
pnpm install
pnpm run dev:public

Development

There are two modes of development:

• "local": runs the ChRIS backend locally. Requires Docker, and uses more disk space + slower startup time.
• "public": use the global, public testing server. This is the easier option, especially for non-Linux OS.

Alternatively, start the backend in development mode (click to expand)

Get the backend running from ChRIS_ultron_backEnd

$ git clone https://github.com/FNNDSC/ChRIS_ultron_backEnd.git
$ cd ChRIS_ultron_backEnd
$ ./make.sh -U -I -i

Tearing down the ChRIS backend

You can later remove all the backend containers and release storage volumes with:

$ cd ChRIS_ultron_backEnd
$ sudo rm -r FS
$ ./unmake.sh

If your backend is accessible from a host other than localhost, e.g. you are using a cloud or remote development server, run cp .env .env.development.local then edit .env.development.local with your backend API URL.

1. Dependencies

You need Node version 20 or 21.

git clone https://github.com/FNNDSC/ChRIS_ui.git
cd ChRIS_ui
pnpm install

Local Development Dependencies

No extra dependencies are required when using the "public" server.

If you intend on developing with the "local" server, you will need Docker and Docker Compose to run the backend and helper scripts.

2. Run the development server

Either using the "public" server:

pnpm run dev:public

Or, start a local backend and run the "local" server:

pnpm run dev:local

Container Image

ChRIS_ui can run on Docker, Podman, Kubernetes, etc.

Simple usage:

docker run --rm -it -e CHRIS_UI_URL="http://$(hostname):8000/api/v1/" -e PFDCM_URL="http://$(hostname):4005/" -p 8080:80 ghcr.io/fnndsc/chris_ui:staging

For more information, see https://chrisproject.org/docs/run/chris_ui

Analytics

Ackee can be used for website analytics. Set the environment variables VITE_ACKEE_SERVER and VITE_ACKEE_DOMAIN_ID to send analytics to an Ackee instance.

Testing

ChRIS_ui does unit tests using vitest and end-to-end (E2E) tests using Playwright.

Unit Tests

Unit tests are defined in *.test.ts files inside src.

It is recommended to leave this command running while developing ChRIS_ui.

pnpm test

End-to-End Tests

End-to-end tests are located under tests/.

The end-to-end testing framework, Playwright, requires some system dependencies. On first run, you will be prompted to install these dependencies.

pnpm run test:e2e  # run tests using "public" backend

pnpm run test:e2e:local  # run tests using "local" backend

For more information, consult the wiki: https://github.com/FNNDSC/ChRIS_ui/wiki/E2E-Testing-with-Playwright

Pfdcm Client

The code in src/api/pfdcm/generated were automatically generated using the OpenAPI generator.

docker run --rm --net=host -u "$(id -u):$(id -g)" \
  -v "$(npm prefix)/src:/src" \
  docker.io/openapitools/openapi-generator-cli:v7.8.0 \
  generate -g typescript-fetch -i http://localhost:4005/openapi.json -o /src/api/pfdcm/generated

Development Notes

• Do not use ReadonlyArray because it is not supported by antd prop types.