A web-based version of Cytoscape built for modern browsers
Cytoscape Web is a web-based version of Cytoscape that runs in modern web browsers. This application enables users to visualize, analyze, and work with network data directly in their web browser just like the Desktop version of Cytoscape without requiring local software installation. It provides network visualization and analysis capabilities similar to the Desktop version.
The production version is available here:
Please cite the following publication when you use it in your projects:
Keiichiro Ono, Dylan Fong, Chengzhan Gao, Christopher Churas, Rudolf Pillich, Joanna Lenkiewicz, Dexter Pratt, Alexander R Pico, Kristina Hanspers, Yihang Xin, John Morris, Mike Kucera, Max Franz, Christian Lopes, Gary Bader, Trey Ideker, Jing Chen, Cytoscape Web: bringing network biology to the browser, Nucleic Acids Research, 2025;, gkaf365, https://doi.org/10.1093/nar/gkaf365
Cytoscape Web is designed to expand with two types of Apps. We are actively researching and developing examples. Please visit the following pages for more details:
(TBA)
Cytoscape Web is designed to have minimum dependency to the backend services, so you can easily run your own instance locally only with an HTTP server.
To run Cytoscape Web locally with development http server, checkout this repository and run the following:
npm install
npm run dev
This will start a local test server and opens a new browser tab.
! The following section is not finished yet.
Install node and npm. The easiest way is to download both from offical website.
- Node.js 16.8.0 or later version is required.
After installation, run node -v and npm -v to check.
Run a command using npm <command>. Run npm install before using other commands.
dev: run a dev server that watches code changes, openlocalhost:5500in your web browser. By default this app points to [NDEx dev server] (https://dev.ndexbio.org), please create an account on the NDEx dev server with a email that links to your Google account before trying to setup your own dev environment for Cytoscape Web.build: build the app for productionlint: lint code according to the eslint configformat: format source code according to eslint and prettier configstest: run tests
For Windows users, environment variables need to be set differently. Follow these steps to run the development server.
-
Modify
package.jsonscripts Update thedevandbuidscripts inpackage.jsonlike this"build": "set \"REACT_APP_GIT_COMMIT=%COMMIT_HASH%\" && set \"REACT_APP_BUILD_TIMESTAMP=%BUILD_TIMESTAMP%\" && webpack --mode production", "dev": "set \"REACT_APP_GIT_COMMIT=%COMMIT_HASH%\" && set \"REACT_APP_BUILD_TIMESTAMP=%BUILD_TIMESTAMP%\" && webpack serve --open --mode development", -
Manually set environment variables in the terminal
Run the Git commands manually to get your commit hash, these values will be used in
.envfile:git rev-parse HEAD
git show -s --format=%cI HEAD
Copy the output of the commands and update in
.envfile as follow :REACT_APP_GIT_COMMIT=<your_commit_hash> REACT_APP_BUILD_TIMESTAMP=<your_build_timestamp>
For example, if your Git commit hash is
abc1234and the timestamp is2024-10-24T10:00:00, your.envwould look like this:REACT_APP_GIT_COMMIT=abc1234 REACT_APP_BUILD_TIMESTAMP=2024-10-24T10:00:00
-
Start the development server
After setting the environment variables, run:
npm dev
All branches will have deploy previews automatically once changes pushed to github. The url is:
branch name--incredible-meringue-aa83b1.netlify.app
For example, if the branch is development, the url is https:development--incredible-meringue-aa83b1.netlify.app
It usually takes few minutes to reflect changes.
export NODE_ENV=production
npm run build
This section lists solutions to problems you might encounter with Cytoscape web.
Use developer tools in browser to check the error message. Then we recommend using Visual Studio Code debugger to debug.
Possible solutions:
- Use a new incognito window to open Cytoscape web
- Clear browsing data include cookies
- In developer tools, go to Application page,find IndexedDB in session storage. Click
Delete database.
When you need to create a new release, please follow these steps:
- Merge development branch into master.
- Tag the master branch
- Create a new release in GitHub
- Once released, check Zenodo account and make sure it is linked to the new release.
- Check the doi badge and make sure the link is correct.
- Update the version number in the development branch for the next release.