ncsa/phylodiver-viz

The Phylodiver Visualization of the FAVE-phylo project

PhylodiverViz -- The Phylodiver Visualization of the FAVE-phylo project

This project was generated with Angular CLI version 13.1.2.

Prepping an Ubuntu VM:

Prepping local ubuntu machine to build phylodiver-viz repo

Install an lts version of node https://github.com/nodesource/distributions/blob/master/README.md

1. curl -fsSL https://deb.nodesource.com/setup_lts.x > setup_lts.sh
2. sudo -E bash setup_lts.sh
3. sudo apt-get install -y nodejs

If the nodejs installation didn't install npm, do so and then install angular https://angular.io/guide/setup-local

4. sudo apt-get install npm

5. sudo npm install -g @angular/cli

6. ng version #if this succeeds, angular cli is working

Install remaining project specific packages. From the top-level project directory of this repo (where the package.json is located):

7. npm install

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Running end-to-end tests (Cypress)

Run npm run test:e2e to start a dev server and launch Cypress.

Publishing to Github Pages

To publish the contents of the local dist/phylodiver-viz/ (from your machine, not what is committed to github):

npm run deploy-pages

This script copies the files from the dist directory to the root of the gh-pages branch, which is then automatically served as a static site at https://ncsa.github.io/phylodiver-viz/

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

phylodiver-viz's Issues

Test on major browsers

Fix backwards legend for relapse

Finalize JSON format

Need to do this in a meeting - basically review Chuanyi's version and make final revisions.

When done, it will trigger some new issues:

1. Chuanyi's JSON schema to this repo
2. Final example JSON blob of AML data that conforms to the schema
3. Viz code needs to work off the format
4. Viz needs a mechanism to load a new JSON blob in the format

Point phylodiver.org (domain name) at github pages when populated

Once the angular app has been populated, point the domain (currently pointed at an s3 bucket) at the github pages url (https://ncsa.github.io/phylodiver-viz/)

Add license

Build public demo page for phylodiver.org

It will live in this repo

Don't require a PR approval before allowing merge

It will still be standard to have a PR reviewed before merging, but it's needlessly strict to have github enforce it.

Fix pulsed animation when viewport is narrow

add data store and UX/UI to change the dataset (using top header button to open the modal)

Import prebuilt Viz into this repo

As a starting point, create a dir builds/prebuilt_02 that contains the built viz at phylodiver.org (at the time of the conference paper submission)

Add cancer genes

determine whether modal.component class and function naming should be more specific as this will have dataset links and UX flow to uploading custom data

separate the modal steps for uploading custom data (only show certain visuals as needed) (see desc)

1. not-selected (hide “browse for your file” button)
2. selected (shows help links and “browse for your file” button)
3. uploading / validating data (show progress bar, determine if we can calculate the % and change the UI accordingly, otherwise, remove % from interface and change width of that bar to 100% in template)
4. ready (name of file with the X remove icon showing)

Improve drawing of curved SVGs

Experiment with alternatives to fixed height

Add mutation signatures

Generate final CRC example

Add drug databases

Design UIX for loading preconfigured and user data sets

change page-header isSmallHeader to be controlled by the overall page scrolling

connect UX flow to support the modal popup, landing page w/ buttons, to the final diagram

Add routing to landing page branch; test routing strategy with github pages deployment

Show data in table

Design demo home page

Import viz prototype code to this repo

This will be the main app of this repo but probably shouldn't be at the toplevel b/c the "product page" will also be in this repo.

Finish user-facing documentation for pipeline

Aggregate totals on nodes

Setup github pages for this repo

First step is to get the contents of the dist/ directory (once built) to the generic url: https://ncsa.github.io/phylodiver-viz/

Finish user-facing documentation for visualization

Display message if incompatible browser detected

Add unit tests throughout

Improve type definitions and sync with json schema (see links in desc)

https://github.com/ChuanyiZ/phyloflow/blob/cz/aggregate_json/aggregate_json/aggregate.schema

https://www.npmjs.com/package/json-schema-to-typescript

https://ajv.js.org/guide/typescript.html

Generate final AML example

Verify everyone has access to this repo that needs it

I think I invited everyone who might need access, pending invites are out:

https://github.com/ncsa/phylodiver-viz/settings/access

redirect http to https