NIAGADS Visualization Toolkit

React Component Library for NIAGADS Visualizations: including Tanstack React-Tables with GUI-driven filtering and custom adapters for LocusZoom.js that query NIAGADS APIs

NOTE: until Material-UI is removed, npm install must be run with the --legacy-peer-deps option.

Component Library Build for Development

git clone https://github.com/NIAGADS/niagads-viz-js.git 
cd niagads-viz-js
npm install --legacy-peer-deps
npm run build

Import Component Library into 3rd-Party App

npm install git+https://github.com/NIAGADS/niagads-viz-js.git --legacy-peer-deps

To install a specific branch:

npm install git+https://github.com/NIAGADS/niagads-viz-js.git#BRANCH --legacy-peer-deps

StoryBook

git clone https://github.com/NIAGADS/niagads-viz-js.git 
cd niagads-viz-js
npm install --legacy-peer-deps
npm run storybook

• TODO: generate story hierarchy from project hierarchy: https://storybook.js.org/docs/configure#configure-story-loading

Auto-Doc

npm run storybook-doc

Run example app

NOTE: Requires next.js: you may need to pre-install next npm package

git clone https://github.com/NIAGADS/niagads-viz-js.git 
cd niagads-viz-js/example
npm install --legacy-peer-deps

Dev

npm run dev

Prod

npm run start

Developer Notes

VSCode Configurations

Tailwind

VSCode will not understand tailwind @ directives (@tailwind) out of the box. Recommendations are as follows:

• install Tailwind CSS IntelliSense Extension
• edit settings.json as follows:

{
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

• if you do not want to install the extension, there are other possible solutions.

JavaScript Configuration

CORS

Storybook needs to query GenomicsDB API for LocusZoom

see .storybook/middleware.js for proxy configuration

TODOs: proxy for example app

TODOs/Issues

• table.js example throws a runtime error in the highcharts exporting.js module due to attempting to use hasOwnProperty on a null -- may go away when filtering is in place; otherwise may need to re-evaluate dependency rollup