Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to save collapsed status of nodes in json data? #38

Open
hotpeperoncino opened this issue May 17, 2017 · 12 comments
Open

How to save collapsed status of nodes in json data? #38

hotpeperoncino opened this issue May 17, 2017 · 12 comments

Comments

@hotpeperoncino
Copy link

I'd like to save the node status whether the node is collapsed or not in json data, and then restore it to the visualized graph with keeping the collapsed status. When using some libraries "collapsed" member in json data indicates the collapsed status of each nodes.
For example, the collapsed status can be stored as other json data, then after loading the elements json, according to the collapsed status json, the collapsed function can be applied to the graph.
What method is supposed as the regular method in this library?

@royludo
Copy link

royludo commented May 17, 2017

For now, you could use the data('collapsedChildren') attribute of the element for that. It stores the children of this element, when it is collapsed. So if yourElement.data('collapsedChildren') is defined and contains things, then yourElement is collapsed.

@hotpeperoncino
Copy link
Author

Thank you for your reply. I wonder that json like
{ "data": {"id": "1", "text":"a", collapsedChildren: [ { "id":"2", "text":"b"}, {"id":3","text":"c"}] } } can be restored as collapsed graph.

@royludo
Copy link

royludo commented May 17, 2017

What is saved inside collapsedChildren is the entire cytoscape element. With all the cytoscape properties, as is. So I'm not sure that what you propose would work...

@hotpeperoncino
Copy link
Author

I see. It looks reasonable that I would load graph json data containing collapsed marked element data, then after loading graph json data,
applying collapsing function to the marked nodes by traversing the loaded elements.
Thank you for your comment!

@hotpeperoncino
Copy link
Author

And when saving data, the mark meaning collapsed node should be updated and the elements are exported with the marks.

@stklik
Copy link

stklik commented Jul 23, 2017

I'm also interested in this feature, however I would like to define upfront which compounds are collapsed/expanded (i.e. directly from the JSON source).
This means that it would be a bit tedious to fill collapsedChildren by hand. It would be nicer if the parent had a feature that would be looked at upon loading.

@kinimesi
Copy link
Collaborator

kinimesi commented Aug 25, 2017

@hotpeperoncino one way of saving collapsed nodes is the following. First you need to get all collapsed children in the graph. In v3.0.11, you can use getAllCollapsedChildrenRecursively method. Then take union of the collapsed children with current nodes.

var allNodes = cy.nodes();
allNodes = allNodes.union(api.getAllCollapsedChildrenRecursively());

Now you have all the nodes in the graph. When saving the nodes, you need to save the collapse state of nodes too. Just saving the state of collapsed nodes is sufficient (no need to save the state for all nodes). You can get the nodes which are collapsed as follows and set their state:

var collapsedNodes = allNodes.filter(".cy-expand-collapse-collapsed-node");
collapsedNodes.data("collapse", true);  // state stored in collapsed field

After saving nodes with collapsed state, it is easy to get them back: load it as usual, after loading, collapse the nodes which were collapsed before. Let's say, you store the status in a data field called collapse, then you can collapse them like this:

// collapse nodes
if (cy.nodes("[collapse]").length > 0 ){
    cy.expandCollapse('get').collapse(cy.nodes("[collapse]", {layoutBy: null}));
}

@kinimesi
Copy link
Collaborator

@stklik First define the compounds which are collapsed by adding an attribute to their data field - for example "collapse" : true. No need to do this for expanded compounds. After loading the graph, just collapse nodes whose related data field is set:

// collapse nodes
if (cy.nodes("[collapse]").length > 0 ){ // assuming collapse state is stored in collapse data field
    cy.expandCollapse('get').collapse(cy.nodes("[collapse]", {layoutBy: null}));
}

@aprudnikoff
Copy link

As well you broke a core cy.json() method, now it produces not JSON-serializable object since it has circular links.

@bentole
Copy link

bentole commented Dec 22, 2019

I have created a workaround which allows for collapsed graphs to be stringified and saved to backend and restored thus avoiding the dreaded cyclic object issue. I am uncertain if there is a more elegant way to do this?

workaround here if anyone is interested..

Also thanks alot for this superb cytoscape extension!

@itf
Copy link
Contributor

itf commented Sep 4, 2020

I made a different workaround inspired by bentole's workaround.

Before any function that could get messed up because of collapsed nodes, I uncollapse them by calllng collapseFix on those nodes, and afterwards I call collapseFixRestore.

Here is the workaround

@canbax
Copy link
Member

canbax commented Mar 18, 2021

@itf @bentole @hotpeperoncino Now unstable version has loadJson and saveJson functions. You can try it and maybe close this issue it works fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants