Code Monkey home page Code Monkey logo

chris_ui's Introduction

ChRIS logo ChRIS_ui

License Last Commit Code Size codecov

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.

Screenshot from 2023-12-05 09-22-38

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

Quickstart

git clone https://github.com/FNNDSC/ChRIS_ui.git
cd ChRIS_ui
npm ci
npm run dev:public

Development

We support development on Linux only.

0. Have the ChRIS backend running (Optional)

For local development, use Docker Compose and miniChRIS-docker. Open a terminal and run

git clone https://github.com/FNNDSC/miniChRIS-docker.git
cd miniChRIS-docker
./minichris.sh
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. Install Dependencies

You need Node version 20 or 21.

git clone https://github.com/FNNDSC/ChRIS_ui.git
cd ChRIS_ui
npm i
Alternatively, using Docker (click to expand)

These instructions are no longer supported.

Open a new terminal on your system and follow these steps:

git clone https://github.com/FNNDSC/ChRIS_ui.git
cd ChRIS_ui
docker build -t localhost/fnndsc/chris_ui:dev -f Dockerfile_dev .
docker run --rm -it -v $PWD:/home/localuser -p 3000:3000 -u $(id -u):$(id -g) --userns=host --name chris_ui localhost/fnndsc/chris_ui:dev

Open http://localhost:3000 to view it in the browser.

2. Run the development server

If you are running and have configured a backend in step 0, run

npm run dev

Otherwise, you can use our public testing backend instance. Run

npm run dev:public

Build for production

Source-to-image must be used to build this project for deployment.

s2i build https://github.com/FNNDSC/ChRIS_ui quay.io/fedora/nodejs-20 s2ichrisui

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.

npm test

End-to-End Tests

Important

End-to-end (E2E) tests are configured to run against our public testing backend instance, which is prepopulated with data.

E2E tests are located under tests/.

Playwright requires some system dependencies. On first run, you will be prompted to install these dependencies. With Playwright installed, run

npm run test:e2e

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

chris_ui's People

Contributors

pintogideon avatar rebecabkerr avatar jennydaman avatar zrthxn avatar ciradu2204 avatar matankb avatar sandip117 avatar jcaianirh avatar quintinus98 avatar jbernal0019 avatar rudolphpienaar avatar gagansk avatar ethanhou99 avatar timonwa avatar bolajahmad avatar mocktarissa avatar mairin avatar qxprakash avatar somya51p avatar xhyzzz avatar seundede avatar codeempress1 avatar dependabot[bot] avatar beyond-logic avatar euginelethal avatar itsgurmannatsohal avatar mfonn avatar shashigharti avatar oluwatunbi avatar sirichandana-v avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.