aced-idp / gen3-frontend-framework

A Frontend Framework for Gen3 data portals

CTDS Frontend Framework

Installation

Prerequisites

This is a multi-workspace repo that requires npm v8. The minimum node version is set to v16 only from an LTS perspective.

Node can be downloaded from the official Node.js site. You may also consider using a Node version manager.

Your version of Node may not ship with npm v8. To install it, run:

npm install npm@8

Install Dependencies

From the root of the project, install dependencies by running:

npm install

Installing from the root of the repository is required to avoid multiple installations of React in the workspaces. When this happens, React will fail to render.

Adding Depenedencies

Dependencies can also be installed from the root of the repository. To install a dependency for a specific workspace, you can run:

npm install --save my-package --workspace=packages/core

Since this is a TypeScript project, installing the community type definitions may also be required:

npm install --save-dev @types/my-package --workspace=packages/core

Development

Run the prototype in dev mode with auto-rebuilding:

npm run dev

By default, this will start a dev server listening to http://localhost:3000

Note: Recompiling the type definitions for core needs to be done manually:

npm run compile --w=packages/core

Linting

Run ESLint for all of the workspaces:

npm run lint

Formatting

Run prettier for all of the workspaces:

npm run format

Testing

This project uses jest for testing.

Naming Convention

Test Type	Filename
Unit	*.unit.test.ts
Integration	*.int.test.ts

Locations

Tests should live in the same directory as if a single module is under test. Since unit tests should only test a single module, they should also live in the directory. For example,

+ /src
| - monarch.ts
| - monarch.unit.ts
| - monarch.int.ts

Running tests

npm run test will run unit tests.

npm run test:int will run integration tests.

npm run test:all will run both unit and integration tests.

Deployment

docker build -t frontend . will build a container with all available packages built

docker run -p 3000:3000 -it frontend will run the container from above.

The container can be viewed at localhost:3000{BASE_PATH | /}

Note that the base path is configurable with the BASE_PATH environment variable. It is left empty by default when running locally

gen3-frontend-framework's Issues

Gen3-ff-rc-issues

The following issues should be resolved with the frontend-framework repo for it to be able to be deployed to production

Button Styling
Button color / text styling should be hooked up to the color and font themes that can be specified in the config
and not just use default options. See login page buttons

Navigation Config
navigation bar Logo href redirect not wired up to navigation logo component in front-end package (hardcoded to "/")

Helm Additions
Update helm chart to mount data commons specific frontend-framework configuration files to the image. Especially environment variables which are host name specific.
Configs found here: https://github.com/uc-cdis/gen3-frontend-framework/tree/develop/packages/sampleCommons/config.

Fetch portal configurations from a 3rd another microservice

Portal should be setup to fetch all configs from another micro-service. This way end users could have the ability to customize certain sections of the data portal, specifically the exploration page, to match the unique fields of their data.

Build a production image using github actions

Need to figure out how to configure this properly so that a prod image can be pulled from quay.

Want to be able to build from develop branch and publish to quay.io/ohsu-comp-bio/gen3-frontend-framework

see https://github.com/ACED-IDP/gen3-frontend-framework/blob/develop/.github/workflows/build.yaml for progress