Giter Club home page Giter Club logo

cbioportal-frontend's Introduction

cbioportal-frontend

Live demo

Development: http://cbioportal-frontend-demo.herokuapp.com/#/patient?studyId=prad_fhcrc&caseId=00-090 Master: http://cbioportal-frontend.herokuapp.com/#/patient?studyId=prad_fhcrc&caseId=00-090

Test status & Code Quality

Branch master integration rc
Status Build Status Build Status Build Status

codecov

Code Climate

Deployment

Deploy

This is the frontend code for cBioPortal using React, MobX and TypeScript. The frontend for the new patient view is now completely in this repo. The

Make sure you have the latest stable node version installed:

https://nodejs.org/en/

To install all app and dev dependencies

npm install

To build DLLs in common-dist folder (must be done prior to start of dev server)

npm run buildDLL:dev

To start dev server with hot reload enabled

npm run start

A good example page is: http://localhost:3000/?cancer_study_id=lgg_ucsf_2014&case_id=P04

To run unit/integration tests (need to have API URL defined in .env)

npm run test

To run unit/integration tests in watch mode

npm run test:watch

To run linting

npm run lint

precommit hook

There is a precommit hook installed that lint checks the typescript in this project. The hook can be viewed in package.json. You can skip it with

git commit -n

Changing the URL of API

If the version of the desired API URL is the same as the one used to generate the typescipt client, one can hange the API_ROOT variable for development in my-index.ejs. If the version is different, make sure the API endpoint works with the checked in client by changing the API URL in package.json and running:

npm run updateAPI
npm run test

Check in cBioPortal context

Go to http://cbioportal-rc.herokuapp.com/case.do?cancer_study_id=lgg_ucsf_2014&case_id=P04

In your browser console set:

localStorage.setItem("localdev",true)

This will use whatever you are running on localhost:3000 to serve the JS (i.e. you need to have the frontend repo running on port 3000). To unset do:

localStorage.setItem("localdev",false)

or clear entire local storage

localStorage.clear()

You can also use a heroku deployed cbioportal-frontend pull request for serving the JS by setting localStorage to:

localStorage.setItem("heroku", "cbioportal-frontend-pr-x")

Change x to the number of your pull request.

Run e2e tests

Install webdriver-manager, which manages standalone Selenium installation:

npm install -g webdriver-manager

Run updater to get necessary binaries

webdriver-manager update

Start the webdriver-manager

webdriver-manager start

In one terminal run frontend (this will get mounted inside whatever CBIOPORTAL_URL is pointing to)

npm run start

In another terminal run the e2e tests

# get CBIOPORTAL backend url from my-index.ejs
export CBIOPORTAL_URL=http://$(grep '__API_ROOT__' my-index.ejs | cut -d= -f2 | tr -d "'" | tr -d [:space:] | tr -d ';')
cd end-to-end-tests
npm install
npm run test-webdriver-manager

cbioportal-frontend's People

Contributors

alisman avatar onursumer avatar inodb avatar adufilie avatar adamabeshouse avatar tamaccount avatar yichaos avatar zhx828 avatar meow1729 avatar ersinciftci avatar jiaojiao123 avatar n1zea144 avatar

Watchers

 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.