cytoscape-merge-split

Description

This extension adds support for merging/splitting graph components while respecting the existing layout.

Click here for a demo.

cytoscape-merge-split.mov

API

cy.mergeSplit(options) To initialize the extension with given options.

let api = cy.mergeSplit('get') To get the extension instance after initialization.

api.merge(sourceComponent, targetComponent) Merge source component to target component.

api.mergePairwise(node1, node2, checkMatch) Merge components using a node pair, optionally validating the match. node1 and node2 must be in different components. If checkMatch is true, nodeMatcher option is used; otherwise, it is ignored.

api.split(component, keepBoundaryEles = true, direction = "auto", offset = 100) Split the given component from the rest of the graph. keepBoundaryEles determines if boundary elements are retained in both components. direction specifies the placement direction of the split component. offset defines the separation distance.

api.setOption(optionName, optionValue) Change the given option with the given value.

Default Options

    let options = {
      animate: true, // whether to animate during merge/split operations
      animationDuration: 1000, // when animate is true, the duration in milliseconds of the animation
      nodeMatcher: (n1, n2, options) => {  // n1 from source component, n2 from target component, options to support app-specific options
        // check if labels match
        return !!(n1.data('label') && n1.data('label') != '' && n2.data('label') &&
          n2.data('label') != '' && n1.data('label') === n2.data('label'));
      },
      edgeMatcher: (e1, e2, options) => {  // e1 from source component, e2 from target component, options to support app-specific options
        // check if source and target labels match
        return e1.source().data('label') === e2.source().data('label') &&
          e1.target().data('label') === e2.target().data('label');
      }
    };

Dependencies

• Cytoscape.js ^3.3.0
• cytoscape-fcose ^2.2.0 (optional - to remove overlaps after merge)

Usage instructions

Download the library:

• via npm: npm install cytoscape-merge-split,
• 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 mergeSplit from 'cytoscape-merge-split';

cytoscape.use( mergeSplit );

CommonJS require:

let cytoscape = require('cytoscape');
let mergeSplit = require('cytoscape-merge-split');

cytoscape.use( mergeSplit ); // register extension

AMD:

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

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

Publishing instructions

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

1. Build the extension : npm run build
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. Make a new release for Zenodo.

Team

Hasan Balci and Augustin Luna of Luna Lab