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

Cytoscape style is not being preserved #17

Open
canbax opened this issue Sep 4, 2019 · 1 comment
Open

Cytoscape style is not being preserved #17

canbax opened this issue Sep 4, 2019 · 1 comment

Comments

@canbax
Copy link
Member

canbax commented Sep 4, 2019

1-) I have an cytoscape.js graph. Ideally it looks like below
image

2-) If I empty styles of cytoscape by executing js code cy.style([]), graph looks like below
image

3-) If I set cytoscape style with a command like cy.style([/* some big array object */ ]) it becomes as the ideal like the first image.

4-) When I execute cy.graphml() on first image to generate xml. Then load using command cy.grapml('xml string previously generated') on a empty canvas I get
image

5-) As could be seen from above image, graphml does not preserve style information (I tried with css: true also). When I apply the old styles like in step 3, I expect to see a graph like first image but it does not. The above image doesn't change a bit

6-) When I give the same object as a string like cy.style('[/* some big array object */ ]') it gives me a bit more stylish graph (below image)
image

@ugurdogrusoz ugurdogrusoz changed the title cytoscape style is not being preserved Cytoscape style is not being preserved Sep 5, 2019
@alihanokka
Copy link
Collaborator

This issue is also related with #15 . As it was explained there, this extension does not identify style keywords used ('shape', 'position', 'background-color' etc) inside the graphml/xml object. It puts all properties found inside the data attribute. As a result, Cytoscape doesn't get any style information.

Also for the positions, it runs the cose-bilkent layout on the graph (Default layout is not 'preset'!, but the positions are lost anyway). The width and height of the nodes are not found and assigned as [1,1](or something close). That is why you are getting that output in (4).

In CiSE's demo, I had to change the style information 'manually' after I imported the graph from xml to get around this problem. For instance,

'width': 'data(width)', 
'height': 'data(height)', 
'shape': function (ele) { 
	let str = '' + ele.data('shape'); 
	return str.toLowerCase(); 
}

So the attributes are all parsed fine, just not stored correctly.

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

3 participants