This is part of my Google Summer of Code (GSoC) project for the National Resource for Network Biology (NRNB). You can follow my blog posts for it and read the proposal on Figshare. I also made a webinar version of the proposal here.
Pull requests welcome!
This guide serves to aid developers wishing to work on the Pathway Presenter.
Please consider using Yarn over npm when working on this project (and any others ;).
Create React App
This project uses Create React App (CRP) to handle building, dev server and other boilerplate tasks.
The project structure follows the same style as outlined in this blog post. Please read that blog post before going any further.
Briefly, the structure is as follows.
- build (from CRP)
- public (from CRP)
- assets (static files. e.g. svg)
- components (every component given its own directory)
- Editor (see Editor vs. Viewer)
- Viewer (see Editor vs. Viewer)
- data (refer to blog post)
- App.js (only for dev server. See Editor vs. Viewer)
- .env (see .env.example and create .env with own credentials)
Editor vs. Viewer
The Pathway Presenter has two main entry components, Editor and Viewer. The Editor provides the editing and creation interface for pathway presentations. The Viewer provides the read-only "present" mode for presentations.
These two components are the ones that would be used on integration with any platform (e.g. WikiPathways). The
file is only used for direct usage of the Pathway Presenter for testing (e.g. on local). It simply renders the Editor
or Viewer component depending on the lack or presence of a "present" url parameter.
Jest is used for unit testing and snapshot testing. Thorough unit tests are required for every component.
yarn test to run the test runner.
To date, there are no hard coded end-to-end tests. However, every new feature needs to be tested against a variety of browsers. You can use BrowserStack for this.
These are the browsers we support:
- Upwards of IE11
- Upwards of Edge 15
- Edge 14
- Upwards of Chrome 60``
- Chrome 55
- Upwards of FF55
- Upwards of Safari 10.1
Pvjs is the library used to render the pathway diagrams. You will likely need to work on this as well as the Pathway Presenter. Please refer to the Pvjs Github repo for more information.
There is a .env file that is used to provide things like API keys to any scripts that might need it. You should copy
.env and change the key name pairs to match your values.
Under no circumstances should you push the filled in .env file to the public Github repo. This contains sensitive information.
This project uses Travis to run the build step and unit tests on every push to the master branch. If all passed,
the code is deployed to GitHub pages at the url specified by the "homepage" parameter in
If you have any questions you can email me (Jacob Windsor) at email@example.com.