Not all bubblesets are rendered

[johannesmols]

I have a graph where I want to add 4 bubble sets, but only one of them is actually rendered, with no error message whatsoever.

To Reproduce

I am adding the sets with the code below. All 4 sets have several nodes and edges. From #8 I gathered that it shouldn't be an issue if some of the sets are overlapping.

cy.ready(() => {
	const bb = new BubbleSetsPlugin(cy);
	let topLevelNamespaces = new Set<string>(cy.nodes().map(n => n.data('info')?.namespace?.split('.')[0]));
	topLevelNamespaces.forEach(ns => {
		if (ns) {
			let matchingNodes = cy.nodes().filter(n => n.data('info')?.namespace?.split('.')[0] === ns);
			bb.addPath(matchingNodes, matchingNodes.connectedEdges(), null, {
				style: {
					'stroke': 'black',
					'fill': getColor(ns),
					'fillOpacity': '0.25'
				}
			});
		}
	});

	console.log(bb.getPaths());
});

This is the graph and the single set rendered:

Logging the paths to the console, I can clearly see that they are added, but the path is empty for the first three, despite having both nodes and edges:

Expected behavior

That all 4 sets are rendered.

Context

• Version: 3.2.0 (Cytoscape 3.23.0)
• Browser: Firefox 117.0

[sgratzl]

can you provide an example that I can try out, without the specific graph it is almost impossible to reproduce your issue.

[johannesmols]

Hi @sgratzl, sorry for taking so long to respond. I can't find an easy way to share it unfortunately, as it is part of a larger application and calling cy.data() to just get the data out returns an empty object.

But I think it might be because I'm using a custom layout, i.e. preset, to position and route my edges. I just tried to use the default layouts BFS and Cose and there it seems to work fine. Maybe the library does not support custom layouts then?

[sgratzl]

the library doesn't use the layout in any way, it just uses the final node positions.

in your screenshot from before, can you highlight which nodes and edges would be given in each path?

have you tried running bb.update(true) to force an update of all paths?

[johannesmols]

Hi @sgratzl, that's strange. I tried to give the nodes the same background color in the screenshot below:

So you can see the green one is correctly added, but the dark red and blue are not.

I did try to run bb.update(true) but it makes no difference.

In the code above, using matchingNodes.edgesWith(matchingNodes) actually doesn't render any of the bubble sets for som reason, not sure why since only edges connecting nodes in the set directly should be included.

Hope this helps somehow, I realise a reproducible example would be better, but I'm not sure how to reproduce it and I don't have much time.

[ten3roberts]

@sgratzl did you find any cause or way to mitigate this issue?

I am also experiencing this, and have managed to reduce it to specific nodes (I.e; only one bubble active, which isn't rendered)

[sgratzl]

@ten3roberts can you provide an example I can play with?

[arselzer]

Hi, I possibly ran into the same or a similar issue, and maybe this could help others. In my case, some bubbles were not drawn without an error message. There was a but with an empty d attribute. I suspect this happens here: https://github.com/upsetjs/cytoscape.js-bubblesets/blob/main/src/BubbleSetPath.ts#L322

In my case, what fixed it for the hypergraphs I was trying to visualize was changing the options to this (in order to allow some more leeway for the edges in the relatively tight graph):

bubbleSetsPlugin.addPath(nodesToInclude, null, null, { nodeR1: 80, edgeR1: 40, morphBuffer: 15, virtualEdges: false, ...

It would probably be helpful to add an error message whenever drawing a bubble fails.

Here are two examples of graphs (1. what it looks like after the changes and 2. where drawing the hyperedge failed with the default options):