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
git submodule update --init --recursive
pnpm install

# start chris-backend
pnpm run chris-backend:up

# in another terminal
pnpm start

docker-compose

1. setup docker_compose.env based on docker_compose.env.tmpl
2. docker compose --env-file docker_compose.env -f docker-compose.yaml up -d

Development

1. Clone the repository

git clone https://github.com/FNNDSC/ChRIS_ui.git
cd ChRIS_ui
git submodule update --init --recursive
pnpm install

2. Run the chris-backend in local

pnpm run chris-backend:up

3. Start development (in another terminal)

pnpm start

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.