Edit a graph with compound nodes and render them with JS

[Nilesh Trivedi]

Hi,

I need to render a graph on the Web (using cytoscape.js) which includes compound nodes and custom data attributes. Which means a JSON like this:

{

"nodes": [

{ "data": { "id": "a", "parent": "b" }, "position": { "x": 215,"y": 85 } },

{ "data": { "id": "b" } },

{ "data": { "id": "c", "parent": "b" }, "position": { "x": 300,"y": 85 } },

{ "data": { "id": "d" }, "position": { "x": 215, "y": 175 } },

{ "data": { "id": "e" } },

{ "data": { "id": "f", "parent": "e" }, "position": { "x": 300,"y":175 } }

],

"edges": [

{ "data": { "id": "ad", "source": "a", "target": "d" } },

{ "data": { "id": "eb", "source": "e", "target": "b" } }

]

}

However, my users will need to visually edit the graph too. So, I need a tool (either desktop or web-based) to create and manipulate this graph, and export the JSON in the above format. Because MindGraph and Davraz fall short on features, I thought of using Cytoscape desktop.

However, I noticed that creating a "parent" field for nodes does not create a group. OTOH, groups created from the desktop tool are not mapped with the "parent" field when exported as JSON.

What are my options for allowing users to both view such a graph on Web, as well as edit it either on Web or Desktop? In other words, what's the best visual editor for Cytoscape which exports JSON fully compatible with cytoscape-js?

[David Otasek]

At present, I'm afraid there isn't a clean path to get groups from Cytoscape Desktop to Cytoscape JS. 

A new online editor for networks is in progress, which will offer better compatibility with both platforms, but it will not be available for some time.