Code Monkey home page Code Monkey logo

cytoscape.js's Introduction

GitHub repo Ask a question with Phind News and tutorials License npm DOI npm installs Automated tests Extensions Cloudflare

Created at the University of Toronto and published in Oxford Bioinformatics (2016, 2023).
Authored by: Max Franz, Christian Lopes, Dylan Fong, Mike Kucera, ..., Gary Bader

Cytoscape.js

Graph theory (network) library for visualisation and analysis : https://js.cytoscape.org

Description

Cytoscape.js is a fully featured graph theory library. Do you need to model and/or visualise relational data, like biological data or social networks? If so, Cytoscape.js is just what you need.

Cytoscape.js contains a graph theory model and an optional renderer to display interactive graphs. This library was designed to make it as easy as possible for programmers and scientists to use graph theory in their apps, whether it's for server-side analysis in a Node.js app or for a rich user interface.

You can get started with Cytoscape.js with one line:

var cy = cytoscape({ elements: myElements, container: myDiv });

Learn more about the features of Cytoscape.js by reading its documentation.

Example

The Tokyo railway stations network can be visualised with Cytoscape:

A live demo and source code are available for the Tokyo railway stations graph. More demos are available in the documentation.

Documentation

You can find the documentation and downloads on the project website.

Roadmap

Future versions of Cytoscape.js are planned in the milestones of the Github issue tracker. You can use the milestones to see what's currently planned for future releases.

Contributing to Cytoscape.js

Would you like to become a Cytoscape.js contributor? You can contribute in technical roles (e.g. features, testing) or non-technical roles (e.g. documentation, outreach), depending on your interests. Get in touch with us by posting a GitHub discussion.

For the mechanics of contributing a pull request, refer to CONTRIBUTING.md.

Feature releases are made monthly, while patch releases are made weekly. This allows for rapid releases of first- and third-party contributions.

Citation

To cite Cytoscape.js in a paper, please cite the Oxford Bioinformatics issue:

Cytoscape.js: a graph theory library for visualisation and analysis

Franz M, Lopes CT, Huck G, Dong Y, Sumer O, Bader GD

Bioinformatics (2016) 32 (2): 309-311 first published online September 28, 2015 doi:10.1093/bioinformatics/btv557 (PDF)

Build dependencies

Install node and npm. Run npm install before using npm run.

Build instructions

Run npm run <target> in the console. The main targets are:

Building:

  • build: do all builds of the library (umd, min, umd, esm)
  • build:min : do the unminified build with bundled dependencies (for simple html pages, good for novices)
  • build:umd : do the umd (cjs/amd/globals) build
  • build:esm : do the esm (ES 2015 modules) build
  • clean : clean the build directory
  • docs : build the docs into documentation
  • release : build all release artifacts
  • watch : automatically build lib for debugging (with sourcemap, no babel, very quick)
    • good for general testing on debug/index.html
    • served on http://localhost:8080 or the first available port thereafter, with livereload on debug/index.html
  • watch:babel : automatically build lib for debugging (with sourcemap, with babel, a bit slower)
    • good for testing performance or for testing out of date browsers
    • served on http://localhost:8080 or the first available port thereafter, with livereload on debug/index.html
  • watch:umd : automatically build prod umd bundle (no sourcemap, with babel)
    • good for testing cytoscape in another project (with a "cytoscape": "file:./path/to/cytoscape" reference in your project's package.json)
    • no http server
  • dist : update the distribution js for npm etc.

Testing:

The default test scripts run directly against the source code. Tests can alternatively be run on a built bundle. The library can be built on node>=6, but the library's bundle can be tested on node>=0.10.

  • test : run all testing & linting
  • test:js : run the mocha tests on the public API of the lib (directly on source files)
    • npm run test:js -- -g "my test name" runs tests on only the matching test cases
  • test:build : run the mocha tests on the public API of the lib (on a built bundle)
    • npm run build should be run beforehand on a recent version of node
    • npm run test:build -- -g "my test name" runs build tests on only the matching test cases
  • test:modules : run unit tests on private, internal API
    • npm run test:modules -- -g "my test name" runs modules tests on only the matching test cases
  • lint : lint the js sources via eslint
  • benchmark : run all benchmarks
  • benchmark:single : run benchmarks only for the suite specified in benchmark/single

Release instructions

IMP: The releases should be made atleast 5 min apart for the zenodo to pick the new release. IMP: Amend Github Action in all branches for consistent results across branches

Tests

Mocha tests are found in the test directory. The tests can be run in the browser or they can be run via Node.js (npm run test:js).

cytoscape.js's People

Contributors

akmo3 avatar alexcli avatar ayhun avatar bumbu avatar chrtannus avatar d2fong avatar dependabot[bot] avatar eliotragueneau avatar elisherer avatar gerardohuck avatar greenkeeper[bot] avatar janhartmann avatar josejulio avatar josephst avatar kaino avatar ktei avatar maxkfranz avatar mbeynon avatar mikekucera avatar misschocoe avatar npedrini avatar onursumer avatar r-ba avatar texkiller avatar tonymullen avatar trott avatar trysound avatar zakjan avatar zawertun avatar zirkelc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cytoscape.js's Issues

Revise event handling

Batch events & notifications together using a queue.

Remove changes to the renderer when adding & removing elements to update the mappings. This should be smart and done only if the mappings are indeed changed---and only for affected elements.

Add classes

Functions

  • addClass
  • removeClass
  • toggleClass

Selectors

  • .className

Decide whether to expose elements to clients

Option (1) : Use current method: expose elements to clients

Option (2) : Only ever expose collections to clients and instead of returning arrays for data-like functions, return the value for the first element in the collection

Fix moving cursor

When the cursor is moving, it doesn't always keep its cursor icon. Try dragging a node quickly, and the cursor goes back to default while quickly off of the node.

Add degree functions to element API

degree = No. of edge ends connected to node
degreeIn = No. of edge ends pointing to node
degreeOut = No. of edge ends pointing away from node

degree for edge = null

Create custom cursor for grab

The grab cursor works using some CSS hacks for different browsers. It's better to use an SVG drawing as a cursor.

Add zoom & pan limits

Zoom and pan are stored as numbers, which have limited range.

smallest positive magnitude float <= zoom <= largest positive magnitude float

largest magnitude negative float <= pan <= largest magnitude positive float

Revise events for mapping changes

Let the internal functions handle collections. Remove the mapperbounds events and put them into the events that can trigger it as properties.

Events

  • add
  • remove
  • data
  • removeData

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.