ivis-at-bilkent / cytoscape.js-fcose Goto Github PK

Running the layout on a subset of graph elements (eles.layout()) throws error.

We have two potential improvements for incremental layout:

• 1. When tiled nodes are moved, their locations are used to determine the initial position of the tiled nodes as a whole but not individually. In below example I move a node to the previous row but it's always tiled the time when incremental layout is applied.
• 2. Degree 1 nodes (or in general nodes that are reduced as part of trees) are not laid out incrementally. See how they change places with succeeding incremental layouts.

I am getting the following error:

ERROR ReferenceError: numeric is not defined
    at Object.eval [as clone] (eval at <anonymous> (numeric-1.2.6.js:746), <anonymous>:5:9)
    at Object.svd (numeric-1.2.6.js:4147)
    at sample (cytoscape-fcose.js:888)
    at spectralLayout (cytoscape-fcose.js:1140)
    at a.run (cytoscape-fcose.js:199)
    at cytoscape.min.js:23
    at cytoscape.min.js:23
    at cytoscape.min.js:23
    at new qa (cytoscape.min.js:23)
    at zs (cytoscape.min.js:23)

I forked this https://github.com/asiftasleem/angular-2-cytoscape repo. I modified the script that calls the fcose layout (called ng-cyto.component.ts) like this:

import {Component, OnChanges, Renderer, ElementRef, Input, Output, EventEmitter} from '@angular/core';
import fcose from 'cytoscape-fcose';

declare var cytoscape: any;
.....
export class NgCytoComponent implements OnChanges {

    ......
    
    ngOnInit() {
        cytoscape.use( fcose );
    }

    public ngOnChanges(): any {
        this.render();
        console.log(this.el.nativeElement);
    }

    public render() {
        let cy_container = this.renderer.selectRootElement("#cy");
        let localselect = this.select;
        let cy = cytoscape({
            container : cy_container,
            layout: this.layout,   // <----------- { name: 'fcose' }
            minZoom: this.zoom.min,
            maxZoom: this.zoom.max,
            style: this.style,
            elements: this.elements,
        });

        ....
    }

}

Any help would be appreciated.

First npm install works fine.
When I run it for the second time. It changes package-lock.json file. Like below. (when I revert changes, npm install runs fine)

It gives below error when I run npm install second time.

PS D:.....> npm i
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "[email protected]": Tags may not have any characters that encodeURIComponent encodes.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users...\AppData\Roaming\npm-cache_logs\2019-11-06T05_59_08_270Z-debug.log

When I check the log files mentioned in the error I see

20 verbose stack Error: Invalid tag name "[email protected]": Tags may not have any characters that encodeURIComponent encodes.
20 verbose stack at invalidTagName (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-package-arg\npa.js:91:15)
20 verbose stack at fromRegistry (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-package-arg\npa.js:296:13)
20 verbose stack at Function.resolve (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-package-arg\npa.js:81:12)
20 verbose stack at childDependencySpecifier (C:\Program Files\nodejs\node_modules\npm\lib\install\deps.js:102:14)
20 verbose stack at addDependency (C:\Program Files\nodejs\node_modules\npm\lib\install\deps.js:568:19)
20 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\install\deps.js:516:5
20 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\slide\lib\async-map.js:52:35
20 verbose stack at Array.forEach ()
20 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\slide\lib\async-map.js:52:11
20 verbose stack at Array.forEach ()
20 verbose stack at asyncMap (C:\Program Files\nodejs\node_modules\npm\node_modules\slide\lib\async-map.js:51:8)
20 verbose stack at loadDeps (C:\Program Files\nodejs\node_modules\npm\lib\install\deps.js:514:3)
20 verbose stack at Array. (C:\Program Files\nodejs\node_modules\npm\node_modules\slide\lib\bind-actor.js:15:8)
20 verbose stack at LOOP (C:\Program Files\nodejs\node_modules\npm\node_modules\slide\lib\chain.js:15:14)
20 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\slide\lib\chain.js:18:7
20 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\install\and-finish-tracker.js:8:8
21 verbose cwd D:\yusuf\visuall
22 verbose Windows_NT 10.0.17134
23 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "i"
24 verbose node v12.13.0
25 verbose npm v6.12.0
26 error code EINVALIDTAGNAME
27 error Invalid tag name "[email protected]": Tags may not have any characters that encodeURIComponent encodes.
28 verbose exit [ 1, true ]

Hi, I am using react-cytoscapejs in my code, and when I import fcose as per the instructions here:
import Cytoscape from 'cytoscape'; import fcose from 'cytoscape-fcose';

I get this error:
module "C:/Users/weixiong001/Documents/golabel/node_modules/cytoscape-fcose/cytoscape-fcose" Could not find a declaration file for module 'cytoscape-fcose'. 'C:/Users/weixiong001/Documents/golabel/node_modules/cytoscape-fcose/cytoscape-fcose.js' implicitly has an 'any' type. Try npm i --save-dev @types/cytoscape-fcoseif it exists or add a new declaration (.d.ts) file containingdeclare module 'cytoscape-fcose';ts(7016)

May I know how do I fix this issue please? Or can I safely ignore it?

Thank you
Jonathan

FYI - I am using in vue/ reactive graph. An error was introduced in v1.2.3 when there are no nodes in the graph. Error when no decendants reported in the auxilliary package:

Specifically:
var currentNode = topMostNodes[0];
var childrenOfCurrentNode = cy.collection();
childrenOfCurrentNode.merge(currentNode).merge(currentNode.descendants());

I can see some code removed that checked to return if no elements in main module.

Downgraded to v1.2.2 and working correctly.

thanks

As can be seen from this example in PathwayMapper, we tile 6 identical (?) nodes to 4x2 rather than 3x2:

STAD-2014-RTK-RAS-PI(3)K-pathway.txt

Once this issue is resolved, we should expose it in this layout style as well.

My configuration is as follows "cytoscape-fcose": "^1.2.3" ，Is there a better optimization plan

name: 'fcose',
fit: true,
padding: 30,
animate: false,
nodeSeparation: 225,
piTol: 0.0000001,
nodeRepulsion: 18000,
idealEdgeLength: 100,
edgeElasticity: 0.45,
nestingFactor: 0.1,
tile: false,
tilingPaddingVertical: 30,
tilingPaddingHorizontal: 30,

Hello,
First of all thank you so much for this great cytoscape.js extension. It pushed me to prototype a compound graph viewer for enterprise architects working with ArchiMate.
I'm currently blocked with an issue when parameterizing the fcose layout with packing of the layout utilities. I didn't succeed in reaching the expected result, i.e. removing the wasted space on the middle of the graph, and I'm wondering what are the parameters I should change for succeeding.
The parameters I used are the following:
/// Definition of the layout for the compound graph interactive viewer
var layout1={
name: "fcose",
randomize: true,
// fisheye: true,
animate: 'end',
fit: true,
nodeDimensionsIncludeLabels: "true",
condense:true,
gravity: 1000,
gravityRangeCompound: 100,
gravityCompound: 100,
gravityRange: 3.8,
packComponents: true,
// initialEnergyOnIncremental: 0.3,
// nodeRepulsion: node => 10000,
// idealEdgeLength: edge => 10,
// edgeElasticity: edge => 0.45,
// nestingFactor: 0.1,
numIter: 50000,
quality: "default"

};
/// complementary layout with parameters to define when randomize is not used for layouting
//packing
var layout2= {
idealEdgeLength: 1,
offset: 20,
desiredAspectRatio: 10,
polyominoGridSizeFactor: 0.1,
utilityFunction: 1,
componentSpacing: 1}

The obtain graph is the following:

Any idea?

Many thanks in advance for your support.

Best regards.

Nicolas

Hi, thanks for your work on this great extension! I'm wondering whether there's a simple "hello world" example for newbies to start with, and if not, would you accept a pull request for one?

The existing examples/demos linked from the readme are quite "elaborate" due to the code needed for the interface/interactivity. I often find it helpful to have a simple/minimal starting point to play with. Here's something I just made that might work for this purpose:

https://josephrocca.github.io/cytoscape-fcose-constraints-hello-world-example/

No problem if you'd rather not have such an example, of course - in that case feel free to close this issue. Otherwise, feel free to copy-paste that code, or I can submit a pull request - or you may have other ideas that would work better as a minimal example.

Thanks!

I get when running layout(...).run() on a subset of newly added nodes.

cytoscape-fcose.js:865 Uncaught TypeError: Cannot read property 'getEdgesBetween' of undefined
    at processEdges (cytoscape-fcose.js:865)
    at coseLayout (cytoscape-fcose.js:902)
    at a.run (cytoscape-fcose.js:551)

Line 115

My code

// node = current node for which we load connected nodes from api
let node = evt.target;
let added = cy.add(<nodes from api>);
cy.collection()
  .union(node.outgoers())
  .layout(Object.assign(m.Graph.layout, {fit: false})).run();

When static layout is called on zero number of elements, layout gives error in console.

Currently cose-bilkent fails to perform layout on graphs where an edge is between a child node and parent (or ancestor) one. I presume fcose (directly or indirectly) does the same thing.
Why not simply ignore such edges there is not much to layout for these edges anyhow?

We suspect that we're not taking compound node labels into account during tiling even when nodeDimensionsIncludeLabels is true.

Hello, thanks for the work, it is very nice to have a good looking layout algorithm for our graphs 👍

Problem

I have a problem with compound nodes. When there are few of them, or few edges, fcose seems to behave correctly. However there are 2 cases where I see problems and I would like to know if it is a bug in the algorithm, or if it is not supposed to be handled:

I am working with graphs where we group nodes into compound nodes, and only inner components have edges.

• when we fix one node's position, if we have nested nodes, it seems to layout all nodes diagonally and not care too much of the compounds.
• when there are a certain amount of edges/nodes, it also seems to not care about our groups at all.

For the first case, here is a video of the demo at https://ivis-at-bilkent.github.io/cytoscape.js-fcose/demo/demo-constraint.html where I upload a graph:

First I launch fcose, which seems to perform well. And then I lock the node L and run fcose: here the layout is strange: unrelated compound nodes overlap, nodes are ordered diagonally etc..

For the second case, even when not locking one node, the algorithm seems to not take compound nodes into account at all. Here is the result I get.

Expectation

I would expect the compound nodes to not overlap at all.

Files

Both graphs (in json format) are available here: graphs.zip

It would be handy (for my use-case, at least) to be able to specify a relative placement constraint without requiring a specific gap:

let relativePlacementConstraint = [{left: 'n1', right: 'n2'}];

For context, I have a graph that looks like this:

where the four lower nodes need to be displayed in a specific left-to-right order (based on their node id). So I'm using a relative placement constraint to do that. But I'd like to allow those lower nodes to "spread out" so that when the graph has more nodes and "levels", it doesn't look like this:

I need those nodes in the lowest layer to be ordered, and so currently it seems like my best option is to try to develop a rough heuristic for choosing the gap size, but it doesn't seem like that will work well.

I'm not sure if this "unspecified gap" feature would be possible with the current algorithm that underlies this plugin, but I thought I'd drop an issue here in case, at the very least, it's useful to see a use-case where the current options are insufficient. Thanks!

Let's pack the disconnected graph components using the new utility as suggested in its README. We should add a new option to this layout though named packComponents, which is true by default to control the use of this facility.

Even nodeDimensionsIncludeLabels: true doesn't help:

I have installed the latest version of the package (2.1.0).

When I try to import it at the node REPL I encounter an error:

~/code/network/ $ node
Welcome to Node.js v16.13.0.
Type ".help" for more information.
> const cytoscape = require('cytoscape')
undefined
> const fcose = require('cytoscape-fcose')
Uncaught ReferenceError: self is not defined
    at Object.<anonymous> (/home/jsb/code/network/node_modules/cytoscape-fcose/cytoscape-fcose.js:10:4)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
> 

I also encounter the same ReferenceError: self is not defined with a more complex setup in which one file uses import to load the module, and performs the layout in a function that is imported by a second file that defines a test run by Jest.

This is possibly related to a similar issue in another cytoscape.js layout extension.

help,my country do not this case

Thanks for providing such a good JavaScript Library for creating workflow.

I'm trying to use [alignmentConstraint] to create a more-good-looking fcose layout workflow.

Did I use it wrong way ?
Here's the Code , It's based on Html and JavaScript only :

      var cy = window.cy = cytoscape({
        container: document.getElementById('cy'),
        ready: function(){
          .....
          this.layout({name: 'fcose', animationEasing: 'ease-out'}).run();
        },
        layout: {
          name: 'grid'
        },
        alignmentConstraint: {
          vertical: [['2', '3', '4']]
        },
        style: [
          .....
        ],  
        elements: [
           { group:'nodes', data:{ id: '1', ...... }},
           { group:'nodes', data:{ id: '2', ...... }},
           { group:'nodes', data:{ id: '3', ...... }},
           { group:'nodes', data:{ id: '4', ...... }},
           .....
           .....

and it's not vertical alignment for node 2,3,4

Thanks.

Hi there, thank you for your package.

I am using React.js and custom DOM components for my nodes and it result in overlaps with fCOSE using layout constraints.
I am guessing fCOSE is not measuring the actual size of my nodes and thinks it's not creating any overlap.

How could I insert a phase to measure the whole DOM nodes sizes before starting the actual layout work?

Thank you in advance!

Looks like when there are empty compound nodes in the graph, these compound nodes are not taken into account, messing up the layout.

In order to show off the capability of this algorithm to support non-uniform node dimensions, we should change the demo graphs to contain nodes of varying sizes.

Hi,
We, at IntAct, are really interested in the packing component option as it has always been an issue in Cytoscape.
Currently, the aspectRatio of cytoscape.js-layout-utilities is by default 1, if I analysed correctly.

However, it would be really nice if by default the actual aspectRatio could be the one of the canvas, this way, even on large horizontal screens, most of the space would be used to have a better display.

A simpler solution though would be to include the aspectRatio among the different layout options, so that devs can fill it with the aspect ratio of their canvas, if they need to.

Maybe it's already available on a certain branch though, in which case I'm sorry to have created an issue for that.

I currently have a graph with 3000 nodes and 15000 edges. Loading of this graph takes about 1 minute and 30 seconds. I tried pre-assigning positions to the nodes to reduce loading times, but these seem to be ignored on load, and cytoscape recalculates the positions, which I imagine happens due to the clustering. Is there anyway to pre-assign positions to the graph data to help reduce loading times?

I am trying to add compound nodes to the alignment property of the layout and it does not work.

We currently assume the user does not specify any conflicting constraints (e.g., node a will be on the left of node b and node b will be on the left of node a). However, layout currently throws error if fed with conflicting constraints. To prevent possible errors, we can add a validity check and warn the user if he/she specify conflicting constraints.

Similar to this, take an option to produce a deterministic layout that will not change with each non-incremental layout call. Ideally, a user should be able to specify some kind of a "seed", and if they happen to like the layout they get with a specific seed, they should be able to call layout again with that seed to get the same layout.

Right now when layout quality if draft, we don't do any incremental layout (just spectral layout), and this results in nodes with same topology being placed at same locations. Perhaps a minimal number of iterations (say 5-10) would actually at least get rid of these overlaps.

To satisfy alignment constraints, we currently use the average position of the nodes in the corresponding direction and align them in that position (for vertical alignment we use average x coordinates and vice versa). However, this enforcement may cause edge crossings like in this example. After this enforcement, we can arrange the order of the nodes in the alignment to minimize such crossings, maybe, with an approach similar to the barycenter heuristic.

Currently non-incremental layout of fcose calls incremental layout of the cose algorithm, which doesn't reduce trees, and hence takes longer. There is not much of a reason not to reduce the trees during non-incremental layout of fcose though. So, if we can implement a non-exposed flag named to cose (cose-bilkent) to force tree reduction (even during incremental cose) and set it to true for non-incremental cose, that'd be great.

• 1. "Cose" -> "CoSE"
• 2. "Add selected to ver./hor. alignment": let's change these as label/text ("Selected Nodes Vertically/Horizontally") followed by an "Add" button
• 3. Add some minimal padding around the three sections (File | Layout | Constraints) so the three sections are nicely identifiable.
• 4. For import/export constraints, let's have a label/text "Constraints" before buttons followed by buttons "Import" and "Export". The buttons should have the same style as others (e.g. "Add"); text, background and border colors
• 5. For adding fixed constraints, why not put the node label and coordinate info & add button all in one line.
• 6. Make the background of the dropdown box when dropped (currently it is dark green?) black (keep white text).
• 7. Make the background of the dropdown box when not dropped white (same as the file list), not cyan.
• 8. Other demos should be modified accordingly as well.

When fCoSE runs, it might shift the center of the drawing arbitrarily (see this similar issue in CiSE for an example; this is due to problems in our force model). In order to avoid this, we should calculate the center of the drawing before layout and move the laid-out drawing back to this location. This should be the case for each individual component if packing is enabled. This is already done in non-incremental layout but should be done for incremental one as well.

When I use fcose inside expand-collapse extension, I see very bad layouts on expand.

Below is a very small video showing what happens on Visuall. You can reproduce the video by loading visuall.txt inside Visuall. (File>Load)

Here is also a JSBIN

You can try collapsing and then expanding an inner compound node.

When running a layout with a non-trivial amount of nodes and edges, a RangeError is thrown when using a small number of iterations.
If the iteration count is increased, the range error does not appear.

See example on code sandbox. Error is thrown with numIter=20, it works fine with numIter=2000

https://codesandbox.io/s/cytoscape-layout-error-6heez?file=/App.js

Partial stack trace:
RangeError: Invalid array length
at CoSELayout.FDLayout.calcGrid (VM197 layout-base.js:3678)
at CoSELayout.FDLayout.updateGrid (VM197 layout-base.js:3718)
at CoSELayout.FDLayout.calcRepulsionForces (VM197 layout-base.js:3434)
at CoSELayout.tick (VM196 cose-base.js:1543)
at CoSELayout.runSpringEmbedder (VM196 cose-base.js:1580)
at CoSELayout.classicLayout (VM196 cose-base.js:1459)
at CoSELayout.layout (VM196 cose-base.js:1405)
at CoSELayout.Layout.runLayout (VM197 layout-base.js:2659)
at coseLayout (VM195 cytoscape-fcose.js:918)
at Layout.run (VM195 cytoscape-fcose.js:445)

export const layout = {
  name: "fcose",
  quality: "proof",
  randomize: false,
  animate: true
};

With the above settings, the graph is not laid out correctly when mount() is used. It will only display a straight line graph.
As far as I've verified, quality=proof only works when the initial option is container.

Works pettern

app.tsx

import React, { useState, useEffect } from "react";
import cytoscape from "cytoscape";
import fcose from "cytoscape-fcose";
import { ThemeProvider } from "styled-components";
import { GlobalStyle, theme } from "@/themes/global-style";
import { CytoscapeComponent } from "@/components/cytoscape";
import { nodes, edges, style, layout } from "@/data";

export default function App() {
  const options = {
    container: document.getElementById("cy"),
    elements: { nodes, edges },
    style,
    ready: function () {
      this.layout(layout).run();
    },
  };
  cytoscape.use(fcose);
  const cy = cytoscape(options as any);

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
    </ThemeProvider>
  );
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Cytoscape</title>
  </head>
  <body>
    <div id="app" style="width: 100vw; height: 100vh"></div>
    <div id="cy" style="width: 100vw; height: 100vh"></div>
  </body>
</html>

Not works pettern

app.tsx

import React, { useState, useEffect } from "react";
import cytoscape from "cytoscape";
import fcose from "cytoscape-fcose";
import { ThemeProvider } from "styled-components";
import { GlobalStyle, theme } from "@/themes/global-style";
import { CytoscapeComponent } from "@/components/cytoscape";
import { nodes, edges, style, layout } from "@/data";

export default function App() {
  const options = {
    elements: { nodes, edges },
    style,
  };
  cytoscape.use(fcose);
  const cy = cytoscape(options as any);

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <CytoscapeComponent cy={cy} />
    </ThemeProvider>
  );
}

cytoscape.tsx

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { layout, style } from "@/data";

const Root = styled.div`
  width: 100vw;
  height: 100vh;
  background: ${(props) => props.theme.colors.background};
`;
export const CytoscapeComponent = ({ cy }) => {
  useEffect(() => {
    const container = document.getElementById("cy");
    cy.mount(container);
    cy.ready(function () {
      this.layout(layout).run();
    });
  }, []);

  return (
    <>
      <Root id="cy" />
    </>
  );
};

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Cytoscape</title>
  </head>
  <body>
    <div id="app" style="width: 100vw; height: 100vh"></div>
  </body>
</html>

Can you confirm this issue?

I want to build this https://nivo.rocks/bubble bubble style( circle style), but the compound style is rectangle.

Is there a way set a circle style ?

Thank you !

Cannot read property 'descendants' of undefined

Hi!,

Thank you for a nice layout library for the Cytoscape.JS.
I made the following pen: (https://codepen.io/aryoxp/pen/MWEWrWj)
to test how the fcose layout the graph.
According to the documentation, if I put the following option in the layout,

.layout({
    // For enabling tiling
    tile: true,
}).run();

I expect the library should layout the graph and tile unconnected nodes.
However, when I run it, it tile all nodes, regardless connection.
If the tile option is set to false, the graph is properly layout, including all unconnected nodes.

Is the library expected to behave like this? Because when I use an older version of the library (I don't remember which version), it behaves like I expect (layout the graph, group and tile all the remaining unconnected nodes).

PS:
The same behaviour also happened on cose-bilkent layout.

Thank you.
Warm regards,

Aryo

Hi,

I have been running into an error whenever I plot the fcose plot using the data.

Can anyone help me debug this?

Full error message:

Unhandled Rejection (TopologyException): found non-noded intersection between LINESTRING ( -16.981625 -46.981625, 13.778448000000001 -16.221552000000003 ) and LINESTRING ( -29.23426 -59.23426, 12.556896 -17.443104 )
This is how I draw the fcose plot.

var cytoscape = require('cytoscape');
let fcose = require('cytoscape-fcose');
let layoutUtilities = require('cytoscape-layout-utilities');
cytoscape.use( layoutUtilities ); // register extension
cytoscape.use( fcose ); // register extension
 var options = {
          name: 'fcose',

          // 'draft', 'default' or 'proof' 
          // - "draft" only applies spectral layout 
          // - "default" improves the quality with incremental layout (fast cooling rate)
          // - "proof" improves the quality with incremental layout (slow cooling rate) 
          quality: "proof",
          // Use random node positions at beginning of layout
          // if this is set to false, then quality option must be "proof"
          randomize: false, 
          // Whether or not to animate the layout
          animate: false, 
          // 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. Valid in "proof" quality
          nodeDimensionsIncludeLabels: false,
          // Whether or not simple nodes (non-compound nodes) are of uniform dimensions
          uniformNodeDimensions: false,
          // Whether to pack disconnected components - cytoscape-layout-utilities extension should be registered and initialized
          packComponents: true,
          // Layout step - all, transformed, enforced, cose - for debug purpose only
          step: "all",
          
          /* spectral layout options */
          
          // False for random, true for greedy sampling
          samplingType: true,
          // Sample size to construct distance matrix
          sampleSize: 100,
          // Separation amount between nodes
          nodeSeparation: 75,
          // Power iteration tolerance
          piTol: 0.0000001,
          
          /* incremental layout options */
          
          // Node repulsion (non overlapping) multiplier
          nodeRepulsion: node => 4500,
          // 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,
          // For enabling tiling
          tile: false,  
          // Represents the amount of the vertical space to put between the zero degree members during the tiling operation(can also be a function)
          tilingPaddingVertical: 10,
          // Represents the amount of the horizontal space to put between the zero degree members during the tiling operation(can also be a function)
          tilingPaddingHorizontal: 10,
          // Gravity force (constant)
          gravity: 0.25,
          // Gravity range (constant) for compounds
          gravityRangeCompound: 1.5,
          // Gravity force (constant) for compounds
          gravityCompound: 1.0,
          // Gravity range (constant)
          gravityRange: 3.8, 
          // Initial cooling factor for incremental layout  
          initialEnergyOnIncremental: 0.3,
        
          /* constraint options */
        
          // Fix desired nodes to predefined positions
          // [{nodeId: 'n1', position: {x: 100, y: 200}}, {...}]
          fixedNodeConstraint: undefined,
          // Align desired nodes in vertical/horizontal direction
          // {vertical: [['n1', 'n2'], [...]], horizontal: [['n2', 'n4'], [...]]}
          alignmentConstraint: undefined,
          // Place two nodes relatively in vertical/horizontal direction
          // [{top: 'n1', bottom: 'n2', gap: 100}, {left: 'n3', right: 'n4', gap: 75}, {...}]
          relativePlacementConstraint: undefined,
        
          /* layout event callbacks */
          ready: () => {}, // on layoutready
          stop: () => {} // on layoutstop
        };
        
        
        var cy = cytoscape({
          container: $("#" +cy_div_id ) ,// container to render in
          elements: {
              nodes: data['hierarchy']["nodes"],
              edges: data['hierarchy']["links"],
          },
          
          style: [ // the stylesheet for the graph
            {
              selector: 'node',
              style: {
                'background-color': 'data(color)',
                'label': 'data(name)',
                'height':'data(size)',
                'shape':'data(shape)',
                'width':'data(size)',
              }
            },
        
            {
              selector: 'edge',
              style: {
                'width': 'data(weight)',
                'line-color': 'data(line_color)',
                'line-style': 'data(line_style)',
                'target-arrow-color': 'data(line_color)',
                'target-arrow-shape': 'data(arrow)',
                'curve-style': 'bezier'
              }
            }
          ],
          zoom: 1,
          pan: { x: 0, y: 0 },

          // interaction options:
          minZoom: 1e-50,
          maxZoom: 1e50,
          zoomingEnabled: true,
          userZoomingEnabled: true,
          panningEnabled: true,
          userPanningEnabled: true,
          boxSelectionEnabled: true,
          selectionType: 'single',
          touchTapThreshold: 8,
          desktopTapThreshold: 4,
          autolock: false,
          autoungrabify: false,
          autounselectify: false,

          // rendering options:
          headless: false,
          styleEnabled: true,
          hideEdgesOnViewport: false,
          textureOnViewport: false,
          motionBlur: false,
          motionBlurOpacity: 0.2,
          wheelSensitivity: 1,
          pixelRatio: 'auto'
              
       });

        cy.layout(options).run();

This is the data I send to cytoscape:

#####nodes###############
nodes = [{'data': {'id': 'n13', 'name': 'TF_4', 'color': '#ff9e6d', 'type': 'TF', 'shape': 'triangle', 'size': 30}}, {'data': {'id': 'n7', 'name': 'TF_54', 'color': '#ff9e6d', 'type': 'Gene', 'shape': 'triangle', 'size': 30}}, {'data': {'id': 'n11', 'name': 'TF_11', 'color': '#ff9e6d', 'type': 'TF', 'shape': 'triangle', 'size': 30}}, {'data': {'id': 'n12', 'name': 'TF_62', 'color': '#ff9e6d', 'type': 'Gene', 'shape': 'triangle', 'size': 30}}, {'data': {'id': 'n14', 'name': 'TF_63', 'color': '#ff9e6d', 'type': 'TF', 'shape': 'triangle', 'size': 30}}, {'data': {'id': 'n10', 'name': 'TF_71', 'color': '#ff9e6d', 'type': 'Gene', 'shape': 'triangle', 'size': 30}}, {'data': {'id': 'n5', 'name': 'TF_45', 'color': '#ff9e6d', 'type': 'TF', 'shape': 'triangle', 'size': 30}}, {'data': {'id': 'n6', 'name': 'TF_94', 'color': '#ff9e6d', 'type': 'Gene', 'shape': 'triangle', 'size': 30}}, {'data': {'id': 'n8', 'name': 'TF_67', 'color': '#ff9e6d', 'type': 'TF', 'shape': 'triangle', 'size': 30}}, {'data': {'id': 'n2', 'name': 'Gene_364', 'color': '#0C0FFF', 'type': 'Gene', 'shape': 'ellipse', 'size': 30}}, {'data': {'id': 'n9', 'name': 'TF_34', 'color': '#ff9e6d', 'type': 'TF', 'shape': 'triangle', 'size': 30}}, {'data': {'id': 'n4', 'name': 'Gene_371', 'color': '#0C0FFF', 'type': 'Gene', 'shape': 'ellipse', 'size': 30}}, {'data': {'id': 'n1', 'name': 'Gene_204', 'color': '#0C0FFF', 'type': 'Gene', 'shape': 'ellipse', 'size': 30}}, {'data': {'id': 'n3', 'name': 'Gene_142', 'color': '#0C0FFF', 'type': 'TF', 'shape': 'ellipse', 'size': 30}}, {'data': {'id': 'n0', 'name': 'Gene_378', 'color': '#0C0FFF', 'type': 'Gene', 'shape': 'ellipse', 'size': 30}}]
#####links###############
links = [{'data': {'id': 'e1', 'source': 'n13', 'target': 'n7', 'weight': 3.0, 'arrow': 'none', 'line_style': 'solid', 'line_color': '#ccc'}}, {'data': {'id': 'e3', 'source': 'n11', 'target': 'n12', 'weight': 2.7197932912643576, 'arrow': 'none', 'line_style': 'solid', 'line_color': '#ccc'}}, {'data': {'id': 'e5', 'source': 'n14', 'target': 'n10', 'weight': 1.3816494475867875, 'arrow': 'none', 'line_style': 'solid', 'line_color': '#ccc'}}, {'data': {'id': 'e7', 'source': 'n5', 'target': 'n6', 'weight': 1.294756804469881, 'arrow': 'none', 'line_style': 'solid', 'line_color': '#ccc'}}, {'data': {'id': 'e9', 'source': 'n8', 'target': 'n2', 'weight': 1.1941210320718634, 'arrow': 'none', 'line_style': 'solid', 'line_color': '#ccc'}}, {'data': {'id': 'e11', 'source': 'n9', 'target': 'n4', 'weight': 1.011153791629866, 'arrow': 'none', 'line_style': 'solid', 'line_color': '#ccc'}}, {'data': {'id': 'e13', 'source': 'n6', 'target': 'n1', 'weight': 1.0001219246405488, 'arrow': 'none', 'line_style': 'solid', 'line_color': '#ccc'}}, {'data': {'id': 'e15', 'source': 'n3', 'target': 'n0', 'weight': 1.0, 'arrow': 'none', 'line_style': 'solid', 'line_color': '#ccc'}}]

data =  {"hierarchy": {"nodes": nodes, "links": links}, "status":"success"}

I was wondering if this library supports the creation of compound nodes that overlap? If not, is there a workaround to be able to represent and visualize overlapping compound nodes?

Minimum element array which causes the crash

[
  { data: { id: 'n0' } },
  { data: { id: 'n1', parent: 'n0' } },
  { data: { id: 'n2', parent: 'n0' } },
  { data: { id: 'e1', source: 'n1', target: 'n2' } },
];

Surrounding the block with a try catch works

This is a fcose related issue as cytoscape-cose-bilkent does not crash.

I am also using react-cytoscapejs as the React wrapper for cytoscape

This library along with related ones (e.g. cose-bilkent) should use incremental packing (as implemented here) when packing is enabled. When tile is true during incremental layout, let's make sure to assign a proper initial position to the compound representing tiled nodes. If this is done, packComponents will do a better job tiling disconnected nodes incrementally.

While applying tree reduction in incremental layout, we keep relative position of the one degree node with its adjacent before reduce operation, and then bring back that node according to its relative position again while growing the tree. But if the distance between two nodes is too much, then iterations applied during grow operation may not generate a good final layout for the one degree node. Therefore, relative position should be scaled, for example based on the ideal edge length, to provide a better positioning during grow operation.

If relativePlacementConstraint is an empty array I get an error saying.

core.js:6014 ERROR TypeError: Cannot read property 'forEach' of undefined
at Function.ConstraintHandler.handleConstraints (cose-base.js:899)
at CoSELayout.classicLayout (cose-base.js:1457)
at CoSELayout.layout (cose-base.js:1409)
at CoSELayout.Layout.runLayout (layout-base.js:2710)
at coseLayout (cytoscape-fcose.js:936)
at Layout.run (cytoscape-fcose.js:444)
at CytoscapeComponent. (cytoscape.ts:73)
at later (graph-helper.ts:11)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)

Maybe it is intentional. Or maybe it should be like this. I'm not sure.

This is a really great layout, but I'm struggling to set the aspect ratio for bigger/more densly connected graphs. This jsfiddle ilustrates. Am I missing something in the parameters? Adjusting desiredAspectRatio by swapping width and height has no effect.