cytoscape-hyse

Description

HySE (Hybrid Spring Embedder), is a layout algorithm designed for laying out a "mixed" graph with a "central" main directed part and "satellite" connected undirected parts (e.g., a hybrid UML diagram where the class inheritance hierarchy forms the directed part and other types of associations form the remaining undirected parts of the diagram). The algorithm uses a holistic spring embedder approach, where, as crossing minimization and final positioning of the hierarchy are polished, the undirected part is also beautified simultaneously.

Demo

Here is a demo of HySE layout algorithm:

To locally build the demo, follow these steps:

1. Download the source codes or clone the repository with git clone https://github.com/iVis-at-Bilkent/cytoscape.js-hyse.git
2. Go to the root folder cd cytoscape.js-hyse
3. Run npm install to install the dependencies
4. Run npm run demo. By default it will open http://localhost:8080/demo/demo.html

API

When calling the layout, e.g. cy.layout({ name: 'hyse', ... }), the following options are supported:

```js var defaultOptions = {

// improves the quality of the graph using a fast cooling rate, taking less time isFastCooling: true, // Use random node positions for undirected nodes in undirected components when assigning initial positions randomizeInitialPositions: true, // Whether or not to animate the layout animate: true, // Duration of animation in ms, if enabled animationDuration: 1000, // Easing of animation, if enabled animationEasing: undefined, // Fit the viewport to the repositioned nodes fit: true, // Padding around layout padding: 30, // Whether to include labels in node dimensions. nodeDimensionsIncludeLabels: false, // Whether or not simple nodes (non-compound nodes) are of uniform dimensions uniformNodeDimensions: true,

// Node repulsion (non overlapping) multiplier nodeRepulsion: node => 55000, // Ideal edge (non nested) length idealEdgeLength: edge => 50, // Divisor to compute edge forces edgeElasticity: edge => 0.45, // Nesting factor (multiplier) to compute ideal edge length for nested edges nestingFactor: 0.1, // Maximum number of iterations to perform - this is a suggested value and might be adjusted by the algorithm as required numIter: 2500, // Apply repulsion forces on the graph to avoid node overlaps performPostProcessing: true, // If true, will not run the force directed part and will only display the initial positions assigned displayInitialPositions: false, // Distance between the ranks or layers of the directed part, takes into account the tallest node as well rankGap: 50, // Initially assigned distance between the nodes in ranks or layers of the directed part orderGap: 80, // Force threshold above which node pairs would be swapped in the directed part swapForceLimit: 15000, // Number of iterations after which the swapping function is called swapPeriod: 50, // Hold period for the nodes after being swapped // Nodes will not be swapped again if swapped recently in this number of iterations minPairSwapPeriod: 10,

/* layout animation parameters */

// Time (ms) between each iteration of the layout tickDelay: 100, // Number of iterations in each frame generated on screen ticksPerFrame: 5,

/* layout event callbacks */ ready: () => {}, // on layoutready stop: () => {} // on layoutstop }; ```

Dependencies

• Cytoscape.js ^3.2.0
• cose-base ^2.0.0
• dagre.js ^0.7.3

Usage instructions

After getting a build (use npm run build or npm run build-dev), you can import the generated files under "dist" folder. It will generate CommonJS, Universal Module Definition and ES bundles.

Team

• Hamza Islam, Hasan Balcı and Ugur Dogrusoz of i-Vis at Bilkent University