• Stars
    star
    225
  • Rank 177,187 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

The Dagre layout for DAGs and trees for Cytoscape.js

cytoscape-dagre

DOI

Description

The Dagre layout for DAGs and trees for Cytoscape.js (demo)

The dagre layout organises the graph using a DAG (directed acyclic graph) system, written by Chris Pettitt. It is especially suitable for DAGs and trees. For more information, please refer to Dagre's documentation.

Dependencies

  • Cytoscape.js ^3.2.0
  • Dagre ^0.8.2

Usage instructions

Download the library:

  • via npm: npm install cytoscape-dagre,
  • via bower: bower install cytoscape-dagre, or
  • via direct download in the repository (probably from a tag).

Import the library as appropriate for your project:

ES import:

import cytoscape from 'cytoscape';
import dagre from 'cytoscape-dagre';

cytoscape.use( dagre );

CommonJS require:

let cytoscape = require('cytoscape');
let dagre = require('cytoscape-dagre');

cytoscape.use( dagre ); // register extension

AMD:

require(['cytoscape', 'cytoscape-dagre'], function( cytoscape, dagre ){
  dagre( cytoscape ); // register extension
});

Plain HTML/JS has the extension registered for you automatically, because no require() is needed.

API

Call the layout, e.g. cy.layout({ name: 'dagre', ... }).run(), with options:

var defaults = {
  // dagre algo options, uses default value on undefined
  nodeSep: undefined, // the separation between adjacent nodes in the same rank
  edgeSep: undefined, // the separation between adjacent edges in the same rank
  rankSep: undefined, // the separation between each rank in the layout
  rankDir: undefined, // 'TB' for top to bottom flow, 'LR' for left to right,
  align: undefined,  // alignment for rank nodes. Can be 'UL', 'UR', 'DL', or 'DR', where U = up, D = down, L = left, and R = right
  acyclicer: undefined, // If set to 'greedy', uses a greedy heuristic for finding a feedback arc set for a graph.
                        // A feedback arc set is a set of edges that can be removed to make a graph acyclic.
  ranker: undefined, // Type of algorithm to assign a rank to each node in the input graph. Possible values: 'network-simplex', 'tight-tree' or 'longest-path'
  minLen: function( edge ){ return 1; }, // number of ranks to keep between the source and target of the edge
  edgeWeight: function( edge ){ return 1; }, // higher weight edges are generally made shorter and straighter than lower weight edges

  // general layout options
  fit: true, // whether to fit to viewport
  padding: 30, // fit padding
  spacingFactor: undefined, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
  nodeDimensionsIncludeLabels: false, // whether labels should be included in determining the space used by a node
  animate: false, // whether to transition the node positions
  animateFilter: function( node, i ){ return true; }, // whether to animate specific nodes when animation is on; non-animated nodes immediately go to their final positions
  animationDuration: 500, // duration of animation in ms if enabled
  animationEasing: undefined, // easing of animation if enabled
  boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
  transform: function( node, pos ){ return pos; }, // a function that applies a transform to the final node position
  ready: function(){}, // on layoutready
  sort: undefined, // a sorting function to order the nodes and edges; e.g. function(a, b){ return a.data('weight') - b.data('weight') }
                   // because cytoscape dagre creates a directed graph, and directed graphs use the node order as a tie breaker when
                   // defining the topology of a graph, this sort function can help ensure the correct order of the nodes/edges.
                   // this feature is most useful when adding and removing the same nodes and edges multiple times in a graph.
  stop: function(){} // on layoutstop
};

Build targets

  • npm run test : Run Mocha tests in ./test
  • npm run build : Build ./src/** into cytoscape-dagre.js
  • npm run watch : Automatically build on changes with live reloading (N.b. you must already have an HTTP server running)
  • npm run dev : Automatically build on changes with live reloading with webpack dev server
  • npm run lint : Run eslint on the source

N.b. all builds use babel, so modern ES features can be used in the src.

Publishing instructions

This project is set up to automatically be published to npm and bower. To publish:

  1. Build the extension : npm run build:release
  2. Commit the build : git commit -am "Build for release"
  3. Bump the version number and tag: npm version major|minor|patch
  4. Push to origin: git push && git push --tags
  5. Publish to npm: npm publish .
  6. If publishing to bower for the first time, you'll need to run bower register cytoscape-dagre https://github.com/cytoscape/cytoscape.js-dagre.git
  7. Make a new release for Zenodo.

More Repositories

1

cytoscape.js

Graph theory (network) library for visualisation and analysis
JavaScript
10,035
star
2

cytoscape

Cytoscape: an open source platform for network analysis and visualization
Shell
518
star
3

cytoscape-tutorials

Collection of modular Cytoscape tutorials for online presentation using reveal.js
HTML
309
star
4

ipycytoscape

A Cytoscape Jupyter widget
Python
263
star
5

py2cytoscape

Python utilities for Cytoscape and Cytoscape.js
Python
178
star
6

cytoscape.js-edgehandles

Edge creation UI extension for Cytoscape.js
HTML
160
star
7

cytoscape.js-cxtmenu

Context menu for Cytoscape.js
JavaScript
155
star
8

cytoscape.js-cola

The Cola.js physics simulation layout for Cytoscape.js
JavaScript
133
star
9

cytoscape.js-cose-bilkent

The CoSE layout for Cytoscape.js by Bilkent with enhanced compound node placement.
HTML
116
star
10

cytoscape.js-popper

A wrapper for Popper.js that lets you position divs relative to Cytoscape elements
JavaScript
95
star
11

cyjShiny

An R/shiny widget for cytoscape.js
JavaScript
92
star
12

cytoscape-automation

Collection of scripts that include programmatic io and control of Cytoscape
HTML
81
star
13

cytoscape.js-klay

The Klay layout algorithm for Cytoscape.js
JavaScript
76
star
14

wineandcheesemap

JavaScript
70
star
15

cytoscape.js-panzoom

Panzoom extension for Cytoscape.js
CSS
64
star
16

cytoscape.js-navigator

Bird's eye view pan and zoom control for Cytoscape.js.
JavaScript
63
star
17

py4cytoscape

Python library for calling Cytoscape Automation via CyREST
Python
56
star
18

cytosnap

A Node.js package that renders images of Cytoscape.js graphs on the server using Puppeteer
JavaScript
54
star
19

RCy3

New version of RCy3, redesigned and collaboratively maintained by Cytoscape developer community
R
49
star
20

cytoscape.js-elk

The ELK layout algorithm adapter for Cytoscape.js
JavaScript
43
star
21

cytoscape.js-qtip

A Cytoscape.js extension that wraps the QTip jQuery library
JavaScript
40
star
22

cytoscape.js-tutorial-demo

Out of date. Refer to https://blog.js.cytoscape.org/tutorials/
JavaScript
39
star
23

cytoscape-jupyter-widget

Cytoscape.js based network visualizer for Jupyter Notebook
JavaScript
38
star
24

cytoscape-impl

Cytoscape 3 implementation bundles.
Java
33
star
25

cytoscape.js-automove

An extension for Cytoscape.js that automatically updates node positions based on specified rules
JavaScript
32
star
26

cytoscape.js-euler

Euler is a fast, high-quality force-directed (physics simulation) layout for Cytoscape.js
JavaScript
31
star
27

cyREST

Core App: REST API module for Cytoscape
JavaScript
30
star
28

cytoscape.js-compound-drag-and-drop

Compound node drag-and-drop UI for adding and removing children
JavaScript
28
star
29

cytoscape.js-spread

The speedy Spread physics simulation layout for Cytoscape.js
JavaScript
24
star
30

cy-jupyterlab

Jupyter lab widget for rendering graphs (networks)
Jupyter Notebook
24
star
31

cytoscape.github.com

Cytoscape org web site.
HTML
22
star
32

cytoscape-api

Cytoscape 3 API bundles.
Java
21
star
33

cytoscape-app-samples

Cytoscape 3 sample code for App developers.
Java
18
star
34

cytoscape.js-blog

The Cytoscape.js blog, using Github pages and Jekyll
JavaScript
18
star
35

cytoscape-gui-distribution

Cytoscape 3 desktop version.
Java
16
star
36

appstore

Cytoscape App Store web application code
Python
16
star
37

cytoscape.js-tutorials

Cytoscape.js tutorials project for GSOC 2016
JavaScript
14
star
38

cytoscape-explore

Network visualization webapp.
JavaScript
12
star
39

cyjs-sample

JavaScript
12
star
40

cytoscape-manual

Markdown version of Cytoscape manual
11
star
41

js-graph-lib-comparison

A comparison of JS graph libs
JavaScript
11
star
42

jupyter-cytoscape

Cytoscape.js API support in JS, Python, and R Jupyter kernels
JavaScript
10
star
43

cytoscape.js-hierarchical

A Cytoscape.js extension for the hierarchical clustering algorithm
HTML
10
star
44

slush-cytoscape-extension

A Cytoscape.js extension generator
JavaScript
10
star
45

cytoscape.js-k-means

A Cytoscape.js extension for the k-means, k-medoids, & fuzzy c-means family of algorithms
JavaScript
7
star
46

enrichment-table-app

Creates a new table for performing, storing and viewing functional enrichment analysis
Java
6
star
47

enrichment-map-webapp

JavaScript
6
star
48

cytoscapeweb

Flash-based graph visualization tool which can be integrated in HTML via its Javascript API (http://cytoscapeweb.cytoscape.org).
ActionScript
6
star
49

cytoscape.js-leaflet

A Cytoscape.js extension to overlay a graph (network) on top of a Leaflet map
JavaScript
6
star
50

wiki-plugin-cytodemo

CoffeeScript
5
star
51

cytoscape-web

TypeScript
5
star
52

cy-community-detection

Community Detection App for Cytoscape
Java
4
star
53

jupyter-bridge

Bridge enables Jupyter code on remote server to execute HTTP calls on local PC
Python
4
star
54

web-export-templates

Parent project for all Cytoscape.js export options.
JavaScript
3
star
55

cytoscape.js-arbor

The Arbor physics simulation layout for Cytoscape.js
JavaScript
3
star
56

js4cytoscape

JavaScript library for calling Cytoscape Automation via CyREST
JavaScript
3
star
57

biopax

Core App: BioPAX support
Java
3
star
58

cx2js

A CX to Cytoscape JS library
JavaScript
3
star
59

zugzwang

Zugzwang (German: forced to make a move) is a new OpenGL-accelerated renderer for Cytoscape that prioritizes rapid visual feedback above all else – thus the name.
Java
3
star
60

cytoscape.js-springy

The Springy physics simulation layout for Cytoscape.js
JavaScript
3
star
61

mozfest2015-session

A starting point for building graphs with Cytoscape.js during the MozFest 2015 open science session
JavaScript
3
star
62

fgsea-service

R
3
star
63

r2cytoscape

R functions for Cytoscape automation
R
3
star
64

cytoscape.js-reveal-slides

Reveal.js for presentation "Displaying interactive networks on the web"
JavaScript
3
star
65

cytoscape.js-markov-cluster

A Cytoscape.js extension for the Markov cluster algorithm
JavaScript
3
star
66

diffusion

A Cytoscape app to interface with the heat diffusion service
Java
3
star
67

copycat-layout

Map the locations of nodes (and the network view) from one network to another. Easily compare networks side by side by positioning the views similarly.
Jupyter Notebook
3
star
68

idmapper

Identifier mapping
Java
2
star
69

cytoscape-app

DEPRECATED!! (Was used for for Core Apps)
2
star
70

cxio

CX serialization and de-serialization
Java
2
star
71

mcode-service

2
star
72

cytosnap-demo

A demo Cytosnap server
2
star
73

cyChart

interactive histogram and scatter charts to select nodes or create filters
Java
2
star
74

cytoscape-admin-scripts

Build and maintenance scripts for Cytoscape core developers.
Jupyter Notebook
2
star
75

cytoscape.js-demos

User-submitted demos of Cytoscape.js
JavaScript
2
star
76

cx

CX serialization and de-serialization in Cytoscape
Java
2
star
77

cx-viz-converter

JavaScript
2
star
78

cytoscape-platform-tests-js

Reveal.js testing webapp for running platform tests on Cytoscape via CyREST calls
JavaScript
2
star
79

legend-creator

Cytoscape3 app to create legends as annotations
Java
2
star
80

file-transfer-app

Java
2
star
81

sbml

Core App: SBML Reader
Java
1
star
82

cytoscape.js-matter

JavaScript
1
star
83

cyBrowser

Java
1
star
84

cytoscape-home-mock

TypeScript
1
star
85

generator-cytoscape-extension

A Cytoscape.js extension generator
JavaScript
1
star
86

foograph

Automatically exported from code.google.com/p/foograph
JavaScript
1
star
87

idmap

Client for Id Mapping Service
Java
1
star
88

LargestSubnetwork

Select Largest Subnetwork App
Java
1
star
89

cytoscape-app-template

Cytoscape 3 project files for App developers.
1
star
90

cytoscape2

Cytoscape 2.x series code.
Java
1
star
91

enrichmentmap-service

EnrichmentMap microservice
Java
1
star
92

app-collections

repo for src and poms defining collections of apps
Java
1
star
93

cyjs-export-simple

Template code for simple export from Cytoscape 3.2.
ApacheConf
1
star
94

js-perf

Rendering and layout performance test page for Cytoscape.js
HTML
1
star
95

cytoscape.js-rpc

Use JSON-RPC to drive a remote instance of Cytoscape.js
JavaScript
1
star
96

script-app-demo

Demonstration of a script-app
Java
1
star
97

cytoscape-ismb-2020

Jupyter Notebook
1
star
98

javascript-notebooks

A Jekyll site for publishing JS notebooks for Cytoscape automation via js4cytoscape
JavaScript
1
star
99

cytoscape.js-affinity-propagation

A Cytoscape.js extension for the affinity propagation algorithm
JavaScript
1
star
100

cytoscape-home

JavaScript
1
star