upsetjs / cytoscape.js-bubblesets Goto Github PK

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

The built index.js published on npm contains nullish coalescing operators. Since Webpack 4 does not support them, it is necessary to run the package through Babel again. Would it be possible to lower the build target from ES2020 to maybe ES2018, for out of the box compatibility with Webpack 4?

hi there!

I used extension in pageA.

I registered extension with:

   cytoscape.use(plugin)

when pageA loaded first time, it show what expected. But when leave pageA and back again. pageA crashed.
and it will throw this error when the component is hot replaced(by wepack-dev-server).

 Can not register `bubbleSets` for `core` since `bubbleSets` already exists in the prototype and can not be overridden

In our app we are using bubblesets to outline clusters of nodes. We are running into performance issues with bubblesets when there are more than 500 edges in the cluster. The UI will freeze when rendering the bubble path.

Setting the throttle option to a higher value helps to prevent completely freezing the UI, but its still very unresponsive.

Creating a bubbleset with just the nodes and no edges does not create a desirable effect. If one node is dragged far away from the cluster then the bubbleset does not properly overlap the cluster edges anymore.

Ideally there would be an option to force the bubbleset to be convex, without having to create the bubbleset with edges. Is such a thing possible?

Screenshots / Sketches

What it looks like when created with edges, but this has performance issues...

What it looks like when created without edges, much better performance but it doesn't look right...

Having a list of possible options for IBubbleSetPathOptions would be nice. The API Section in README.md mentions this set of options but doesnt provide any further information.

Are there any examples of how to put a text label on the bubblesets? Related question, how about having a legend with the color of the bubbleset and the text label appearing? If there are examples that show this already that would be great. Thanks in advance!

If a node is in a bubbleset, it updates on position events

If a compound node itself is in a bubbleset, it updates on position events

If a compound node's child is in a bubbleset, it does not update on position events where the compound node is being moved. If you move the node itself, it updates the bubbleset correctly.

Current Behavior

Expected Behavior

Trying to force the update with bubbleSets().update() does nothing

cy.on('position', 'node', function(evt){
  const tgt = event.target;
  const bb = cy.bubbleSets();
  if (tgt.isParent()){ 
     bb.update() 
  }
});

I believe the issue is with how nextPotentialBB is being calculated, but I haven't dug in further.

My current workaround (used to produce the expected behavior gif) is to delete and recreate the path on every compound node position update.

I tried to use this library in my Angular 10 application, and I got this error when importing it.

import cytoscape from 'cytoscape';
import BubbleSets from 'cytoscape-bubblesets';
cytoscape.use(BubbleSets); // BubbleSets have the red line

Argument of type '(cytoscape: (type: "collection" | "layout" | "core", name: string, extension: any) => void) => void' is not assignable to parameter of type 'Ext'.
  Types of parameters 'cytoscape' and 'cytoscape' are incompatible.
    Types of parameters 'options' and 'type' are incompatible.
      Type 'string' is not assignable to type 'CytoscapeOptions'.
        Type '"collection"' has no properties in common with type 'CytoscapeOptions'.

These was in my package.json file

    "@types/cytoscape": "^3.14.7",
    "cytoscape": "^3.17.0",
    "cytoscape-bubblesets": "^3.0.0",
    "cytoscape-layers": "^2.1.0",

To Reproduce

1. Have an Angular Project
2. npm install cytoscape cytoscape-bubblesets
3. Import the libraries in the component

Context

• Version: cytoscape-bubbleset 3.0.0
• Browser: Chrome

Additional context

Hi, I am trying to export to jpg (https://js.cytoscape.org/#cy.jpg) but then in the export the bubbleset is not visible. How can I export so I can share the graph including the bubblesets?

Thanks!

I updated from 2.x to latest 3.x using yarn add -D cytoscape-bubblesets@latest, and am now receiving the following error:

✘ [ERROR] Could not resolve "cytoscape-layers"

    node_modules/cytoscape-bubblesets/build/index.js:12:30:
      12 │ var cytoscapeLayers = require('cytoscape-layers');

I see that cytoscape-layers is in the package, so I suspect this is an issue with the way yarn pulled in the dependencies.

I am running this in Electron (17.x) which could also be playing a role.

@sgratzl

When I click on the codepen badge, it says 404: https://codepen.io/sgratzl/pen/TODO

There's a TODO in the link. Maybe the demo exists but it's just not in the readme?

To Reproduce

1. Click https://codepen.io/sgratzl/pen/TODO

Expected behavior

I expect it to open a demo of the pictured graph in the readme.

Screenshots

N/A

Context

• Version: N/A
• Browser: N/A

Additional context

Thanks!

Cytoscape.js has compound nodes, but these only permit hierarchical/nested relationships. Do bubblesets permit non-nested intersections between 2 groups of nodes?

It would be great if group(nodes in path as a group) click will be listened

User story

I grouped nodes with the plugin. and anywhere clicked in the group will be treated as group click. but now click event only be node or cytoscape instance. could group click be responsed ?

https://codepen.io/KonnieShen/pen/abdgwbd?editors=1000

Hello,
I create a graph with bubble by reading a file.
Then I want to read a new graph with bubble and to do this I delete the old graph beforehand but i got an error.

I do the process in the following order:

1. I remove the existing bubble (this step is needed for performance)

2. remove all existing edges and nodes => throws error: cytoscape-bubblesets: Uncaught TypeError: Cannot read property 'length' of undefined.
   

3. add nodes and edges from file

4. run custom layout and then the preset layout with specific coordinates.

5. add the new bubble

Until now, i catch the error but this is not a nice solution.
If i change the order of steps, like first remove nodes and edges and then remove bubble, a smiliar error apperad on step 2 and 3 from steps above.

My Code looks similar to this

var layout; //the currently layout which is set
var prevLayout; //the previous layout which was set
var cy = cytoscape({ container: document.getElementById('cr') });
var loadButton = document.getElementById('load');
var bb = cy.bubbleSets({ zIndex: -1 });
var path;


document.addEventListener('DOMContentLoaded', function() {
    let $$ = selector => Array.from(document.querySelectorAll(selector));
    selector => document.querySelector(selector);
    loadButton.addEventListener('change', handleLoad, false);
});

function handleLoad() {
    var file = this.files[0];
    readFile(file);
}

function readFile(file) {
    if (path === undefined || path.length < 1) {} else {
        removeBubble();
    }
    removeAll();

    var reader = new FileReader();

    reader.onerror = function(event) {
        alert("Failed to read file!\n\n" + reader.error);
        reader.abort();
    };

    reader.onload = function(event) {
        let lines = this.result.split('\n');
        setDependencies(lines);
        setLayout("grid", true);
    };
    reader.readAsText(file);
}

function setDependencies(lines) {

    for (var lineNumber = 0; lineNumber < lines.length; lineNumber++) {
        let line = lines[lineNumber].split(/\s+/);
        if (!Array.isArray(line)) {
            throw new Error("This is not a array");
        }

        switch (line[0]) {
            case '':
                console.log("line is empty");
                break;
            case 's':
                break;
            case 'b': //add nodes
                cy.add({
                    data: { id: line[1] },
                    classes: 'construct'
                })
                break;
            default: //add edges
                source = line[0];
                target = line[1];
                cy.add({
                    group: "edges",
                    data: {
                        id: source + " " + target,
                        source: source,
                        target: target
                    },
                    classes: 'construct'
                });
        }
    }
}

function removeAll() {
    cy.edges().remove();
    cy.nodes().remove();
    //with catch
    /** 
    try {
            cy.edges().remove();
            cy.nodes().remove();
    } catch (err) {
        console.log("catch ", err.message)
        console.log("rest data: ", cy.elements().length, " nodes: ", cy.nodes().length, " edges: ", cy.edges().length)
        if (cy.elements().length > 0) {
            removeAll();
        }
    } */
}

function removeBubble() {
    cy.ready(() => {
        bb.removePath(path);
    });
}

function addBubble() {
    bb = cy.bubbleSets();
    path = bb.addPath(cy.nodes('.construct'), cy.edges(), null, {
        style: {
            stroke: "red",
        }
    });
}

/**
 * Set the layout from @layout input.
 * @param {string} layout name of the laoyut from layouts
 * @param {boolean} boolIsTd true = 1st iteration: set the new layout, 
 *                          false = 2nd iteration: set preset layout
 */
function setLayout(layout, boolIsTd) {

    if (prevLayout) {
        prevLayout.stop();
    };

    let newLayout = cy.makeLayout(layouts[layout]);
    prevLayout = newLayout;
    newLayout.run().promiseOn('layoutstop');

    setTimeout(function() {
        newLayout.stop();
    }, 100);


    if (boolIsTd) {
        cy.ready(function() {
            cy.stop();
            setLayout('preset', false)

        });
    } else {
        cy.ready(function() {
            cy.stop();
            addBubble();
        });
    }
}

var layouts = {
    euler: {
        name: 'euler'
    },
    grid: {
        name: 'grid'
    },
    cose: {
        name: 'cose'
    },
    preset: {
        name: 'preset'
    }
}

I hope someone can help.