Colloborative Cytoscape.js editor

[maxkfranz]

This project would entail the creation of a functional, alpha -- or perhaps slightly pre-alpha -- app that has the following features:

• The app shall allow for multiple, simultaneous editors of a graph.
• The app shall allow for element (node or edge) creation.
• The app shall allow for element deletion.
• The app shall allow for user comments.
• The app shall allow for links to be shared in order to access graphs.

You can think of the project as something akin to Google Docs but for graphs.

The technologies involved would include:

• JS + HTML + CSS
• Node.js
• A JS/HTML templating system, like React, Ractive, Angular, or similar
• Gulp
• Websockets using a lib like Socket.io
• Transaction handling, using a lib like ShareJS
• And more as needed

Or the project could use Meteor and would function as a nice Meteor-Cytoscape.js demo as well.

[Braintelligence]

Actually I am interested in creating something like this in the future but with an emphasis on viszualized knowledge bases.

[ktei]

I can help if the project uses React (been working on a commercial project which uses this)

[farhaanbukhsh]

hi , we want to take it up and work on it if this project is available.

[maxkfranz]

Now that there's a Meteor package for Cytoscape.js, it may make sense to use that -- since it would provide free syncing with connected clients and the server.

[maxkfranz]

I would start with a simple full-page graph with Meteor and Cytoscape.js that syncs the node positions. So you can see other users dragging nodes around.

[farhaanbukhsh]

I was thinking on using socket.io later but first building a simple editor with CRUD functions. I will try to look into meteor and i looked into cytoscape

[farhaanbukhsh]

Hi there, need help regarding integration .

[maxkfranz]

Are you on the Mozilla #sciencelab channel? If not, I can answer questions here or via email (maxkfranz@gmail.com).

[clemsos]

Hi, I am interested to build a cytoscape+meteor app

[maxkfranz]

There is a simple project I setup to get started: https://github.com/maxkfranz/cyedit

It has the Meteor project already made (with the Cy.js package), and the Cy.js integration is mostly there. Currently, adding nodes and dragging nodes updates the node state on the server side -- but this is not reflected back to clients for the live sync effect (and also not reflected at init it seems).

So, to get the simple demo going we'd need to use the Meteor API to listen for updates to the nodes (i.e. drag and add) and to update the graph with those changes. That will give us the live sync effect and then the same strategy could be used for new features to be added to the app.

[clemsos]

I added client/db pub/sub to drag and add node so we have the live sync effect. (sorry, I pushed changes directly to master branch...) https://github.com/maxkfranz/cyedit/commits/master

About the specs you wrote here, do you have any ideas for the UI ? The click is already taken for the drag-n-drop. For instance, to delete a node : should we use double-click ? or display a contextual menu (comment, delete, etc.) ?

[maxkfranz]

I think a pallet of commands (think similar to the brushes, shapes, etc in Photoshop) would work well here. We already have a plus for add, so we could have an X beside it for deleting the selected elements.

Basically, we'd need a pane/div for the pallet and we'd need the buttons restyled inside the pallet.

There are also lots of extensions that would be easy to add to make the UI more sophisticated:

The context menu would be good for commands on elements: https://github.com/cytoscape/cytoscape.js-cxtmenu

The edgehandles extension is good for adding edges: https://github.com/cytoscape/cytoscape.js-edgehandles

The draw mode in edgehandles is the most accessible way of using it, because it also supports touch -- though the default mouseover handle is a convenient addition on the desktop.

The qtip might be useful for something: https://github.com/cytoscape/cytoscape.js-qtip