Name: cytoscape.js-expand-collapse
Owner: iVis-at-Bilkent
Description: A Cytsocape.js extension to expand/collapse nodes for better management of complexity of compound graphs
Created: 2016-06-14 07:23:08.0
Updated: 2017-12-27 05:05:29.0
Pushed: 2017-12-22 11:13:37.0
Size: 4285
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
This extension provides an interface to expand/collapse nodes for better management of complexity of Cytoscape.js compound graphs, distributed under The MIT License.
Until a publication on this is available, please cite the following paper when using this extension:
U. Dogrusoz and B. Genc, “A Multi-Graph Approach to Complexity Management in Interactive Graph Visualization”, Computers & Graphics, 30(1), pp. 86-97, 2006.
Click here (no undo) or here (undoable) or here (compounds initially collapsed) for a demo.
cy.expandCollapse(options)
To initialize/set options whenever you want.
var api = cy.expandCollapse('get')
To get the extension instance after initialization.
api.collapse(nodes, options)
Collapse given nodes, extend options with given param.
api.collapseRecursively(nodes, options)
Collapse given nodes recursively, extend options with given param.
api.collapseAll(options)
Collapse all nodes on graph (recursively), extend options with given param.
api.expand(nodes, options)
Expand given nodes, extend options with given param.
api.expandRecursively(nodes, options)
Expand given nodes recursively, extend options with given param.
api.expandAll(options)
Expand all nodes on graph (recursively), extend options with given param.
api.isExpandable(node)
Get whether node is expandable (or is collapsed)
api.isCollapsible(node)
Get whether node is collapsible.
api.expandableNodes(nodes)
Get expandable ones inside given nodes if nodes parameter is not specified consider all nodes
api.collapsibleNodes(nodes)
Get collapsible ones inside given nodes if nodes parameter is not specified consider all nodes
api.setOptions(options)
Resets the options to the given parameter.
api.setOption(name, value)
Sets the value of the option given by the name to the given value.
api.getCollapsedChildren(node)
Get the children of the given collapsed node which are removed during collapse operation
api.getCollapsedChildrenRecursively(node)
Get collapsed children recursively including nested collapsed children. Returned value includes edges and nodes, use selector to get edges or nodes.
api.getAllCollapsedChildrenRecursively(node)
Get collapsed children of all collapsed nodes recursively. Returned value includes edges and nodes, use selector to get edges or nodes.
api.clearVisualCue()
Forces the visual cue to be cleared. It is to be called in extreme cases.
Notice that following events are performed for each node that is collapsed/expanded. Also, notice that any post-processing layout is performed after the event.
cy.nodes().on("expandcollapse.beforecollapse", function(event) { var node = this; ... }) Triggered before a node is collapsed
cy.nodes().on("expandcollapse.aftercollapse", function(event) { var node = this; ... }) Triggered after a node is collapsed
cy.nodes().on("expandcollapse.beforeexpand", function(event) { var node = this; ... }) Triggered before a node is expanded
cy.nodes().on("expandcollapse.afterexpand", function(event) { var node = this; ... }) Triggered after a node is expanded
var options = {
layoutBy: null, // to rearrange after expand/collapse. It's just layout options or whole layout function. Choose your side!
// recommended usage: use cose-bilkent layout with randomize: false to preserve mental map upon expand/collapse
fisheye: true, // whether to perform fisheye view after expand/collapse you can specify a function too
animate: true, // whether to animate on drawing changes you can specify a function too
ready: function () { }, // callback when expand/collapse initialized
undoable: true, // and if undoRedoExtension exists,
cueEnabled: true, // Whether cues are enabled
expandCollapseCuePosition: 'top-left', // default cue position is top left you can specify a function per node too
expandCollapseCueSize: 12, // size of expand-collapse cue
expandCollapseCueLineSize: 8, // size of lines used for drawing plus-minus icons
expandCueImage: undefined, // image of expand icon if undefined draw regular expand cue
collapseCueImage: undefined, // image of collapse icon if undefined draw regular collapse cue
expandCollapseCueSensitivity: 1 // sensitivity of expand-collapse cues
};
ur.do("collapse", { nodes: eles, options: opts) Equivalent of eles.collapse(opts)
ur.do("expand", { nodes: eles, options: opts) Equivalent of eles.expand(opts)
ur.do("collapseRecursively", { nodes: eles, options: opts) Equivalent of eles.collapseRecursively(opts)
ur.do("expandRecursively", { nodes: eles, options: opts) Equivalent of eles.expandRecursively(opts)
ur.do("collapseAll", { options: opts) Equivalent of cy.collapseAll(opts)
ur.do("expandAll", { options: opts }) Equivalent of cy.expandAll(opts)
Download the library:
npm install cytoscape-expand-collapse,bower install cytoscape-expand-collapse, orrequire() the library as appropriate for your project:
CommonJS:
cytoscape = require('cytoscape');
jquery = require('jquery');
expandCollapse = require('cytoscape-expand-collapse');
ndCollapse( cytoscape, jquery ); // register extension
AMD:
ire(['cytoscape', 'cytoscape-expand-collapse'], function( cytoscape, expandCollapse ){
pandCollapse( cytoscape ); // register extension
Plain HTML/JS has the extension registered for you automatically, because no require() is needed.
This project is set up to automatically be published to npm and bower. To publish:
export VERSION=1.2.3gulp publishbower register cytoscape-expand-collapse https://github.com/iVis-at-Bilkent/cytoscape.js-expand-collapse.git