Colloborative Cytoscape.js editor

maxkfranz commented 9 years ago

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 commented 9 years ago

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

ktei commented 9 years ago

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

farhaanbukhsh commented 9 years ago

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

maxkfranz commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

Hi there, need help regarding integration .

maxkfranz commented 9 years ago

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

clemsos commented 9 years ago

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

maxkfranz commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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

maxkfranz commented 9 years ago

(sorry, I pushed changes directly to master branch...)

I think that should be fine, considering it's a prototype / work in progress.

clemsos commented 9 years ago

Looks good. Maybe we will need to create a cytoscape-plugins meteor package for the UI components ?

maxkfranz commented 9 years ago

We'd need a package for each one.

I'll try to add Meteor support for extension scaffolding, and I'll add it to one as a test. If you could try it out once it's done to make sure it's OK, that would be very helpful. Thanks

Refs:

maxkfranz commented 9 years ago

@clemsos For now, though, you could still go forward by checking in the extension JS file directly into the repo.

maxkfranz commented 9 years ago

@clemsos cytoscape-qtip@2.2.3 should work with Meteor. Let me know how it goes, and I can proceed with the other extensions.

clemsos commented 9 years ago

@maxkfranz I just tried but I got an error. Not sure if it is because of the package or because of me that can not use the q-tip lib properly...

This is the (basic) code

cy.nodes().qtip({
    content: 'Hello!'
});

I got an TypeError / undefined error

TypeError: undefined is not a function
at null.<anonymous> (cytoscape-qtip.js:90)
at $$.fn.eles.each (cytoscape.js:13713)
at null.qtip (cytoscape-qtip.js:83)
at cyedit.js?ed5760bc2657a3f908d8556f8fed7fb3b714586a:19
at Tracker.Computation._compute (tracker.js:294)
at Tracker.Computation._recompute (tracker.js:313)
at Object.Tracker._runFlush (tracker.js:452)
at onGlobalMessage (setimmediate.js:102)

I have also tried to loop through the node array but I get the same error

var nodes = cy.nodes();
for (var i = 0; i < nodes.length; i++) {
  // console.log();
  cy.$('#'+nodes[i].id() ).qtip({
    content: 'Hello!' // function(){ return this.data('weight'); }
  });
}

Also when I tried directly

  cy.qtip({
    content: 'Hello!' // function(){ return this.data('weight'); }
  });

I get an undefined error as well.

cytoscape-qtip.js:175 Uncaught TypeError: undefined is not a functioncytoscape-qtip.js:175 (anonymous function)cyedit.js?82d03f12c6e0dfecbcc3eab77e918f2f74e5bc08:19 (anonymous function)tracker.js:294 Tracker.Computation._computetracker.js:210 Tracker.Computationtracker.js:533 Tracker.autoruncyedit.js?82d03f12c6e0dfecbcc3eab77e918f2f74e5bc08:10 initCycyedit.js?82d03f12c6e0dfecbcc3eab77e918f2f74e5bc08:46 (anonymous function)jquery.js:3143 jQuery.Callbacks.firejquery.js:3255 jQuery.Callbacks.self.fireWithjquery.js:3467 jQuery.extend.readyjquery.js:3498 completed

looks like it all bioms down to qtip.$domEle or qtip.$domEle.qtip which is undefined

qtip.$domEle.qtip( opts );

maxkfranz commented 9 years ago

qTip doesn't have a Meteor package. You'll have to include it manually by putting its CSS+JS in the project, I think.

clemsos commented 9 years ago

this doesnt work https://atmospherejs.com/maxkfranz/cytoscape-qtip ?

maxkfranz commented 9 years ago

You also need to download qtip itself: http://qtip2.com/download

maxkfranz commented 9 years ago

Request for Meteor package : https://github.com/qTip2/qTip2/issues/752

clemsos commented 9 years ago

@maxkfranz ok, I checked in plugins and tried some other things

qtip works properly
added basic bootstrap app layout.
several network layouts available (needs refactoring)
ctx-menu is working (right-click is weird though)
edgehandles crash the app, saying that $container is undefined on this line : https://github.com/cytoscape/cytoscape.js-edgehandles/blob/master/cytoscape-edgehandles.js#L528 The weird thing is that it seems to load before the cytoscape object is ready. I have tried to use the ready : function() callback but didn't work neither.

You can try and let me know if it works.

clemsos commented 9 years ago

Hey, I just tried some more things to get the edge-handles plugin to work in Meteor but it stills fail. It looks like the cytoscape var is not binded to the $container so I have the following error:

TypeError: $container.cytoscape is not a function
at $.fn.cytoscapeEdgehandles.functions.init

Failure point here > https://github.com/cytoscape/cytoscape.js-edgehandles/blob/master/cytoscape-edgehandles.js#L528

The Github example worked fine though - without Meteor.

Maybe it is related to the removal of cytoscape from the scope in this commit ?https://github.com/cytoscape/cytoscape.js/commit/c6263feeb29d20628706d2763cc6cdc9ac1b603a#diff-f1a4188732d179e06319dbe924d655f5R2

Any idea?

maxkfranz commented 9 years ago

Try setting window.jQuery to the jQuery instance before Cytoscape is pulled in as a dependency. It looks like the jQuery plugin is never registered, because jQuery isn't yet defined.

I'll create an explicit workaround (just in case) for the next bugfix release: https://github.com/cytoscape/cytoscape.js/issues/1034

clemsos commented 9 years ago

OK you were right. It was just about loading jquery before cytoscape into .meteor/packages. The project start to look quite decent. Here is a demo with random data : http://cyedit.meteor.com (click on "init" to generate new data)

Features

add/remove edges
left-click ctx menu : remove/lock/star nodes
apply different layouts
inline editing of node/edge content (just the name working now)
a basic comment system to annotate nodes and edges

The next thing to do is to implement user accounts and multiple graphs, for the URL sharing feature.

Soupala commented 9 years ago

Wow. This is an amazing proof-of-concept. I spent the last week trying to figure out how to do something similar in Meteor w/ either D3 (http://bl.ocks.org/nitaku/7517984) or Famo.us but became very discouraged.

clemsos commented 9 years ago

@Soupala glad you like it ! I am a huge d3 fan myself but it is more for drawing stuff. I think Cytoscape is more appropriate for network-based interfaces. I will work on add more features to this gradually

OAGr commented 9 years ago

I've been making a collaborative Estimate editor using cytoscape. The intention is to eventually support confidence intervals and do monte carlo analysis in the background. http://www.getguesstimate.com/

Soupala commented 9 years ago

@clemsos @maxkfranz I was thinking of cloning and playing with the proof-of-concept for the upcoming Meteor Hackathon (http://info.meteor.com/2015-hackathon), but maybe going a slightly different direction than the specs listed here. I could call it something else other than CyEdit. Assuming that I figure out user accounts and multiple graphs, could then maybe share those improvements back to this project. Any objections? Any thoughts on license? Does anyone else want to join me for submitting this as a hackathon project?

clemsos commented 9 years ago

I have added user accounts and multiple graphs already, also did a big refactoring of code to separate things in folders (client, server, etc.). Code needs some clean but I will push that by next week on Github.

@Soupala Which direction do you want to take ? Agree for a name change as well. Let's work on this together. What about skype call or IRC or sth ?

About the license : looks like cytoscape.js is LGPL, which implies that we use LGPL as well. @maxkfranz any thoughts ?

Soupala commented 9 years ago

Definitely. Send me an email, mica.cardillo at gmail to figure out communication channel, and I can explain what I'm thinking.

[ {name : "Mica Cardillo"} , {phone : "541.840.7245"}, {love: ['Dahlia', 'Oliver', 'Rachel']} ]

On Fri, Sep 11, 2015 at 4:56 AM, Clément Renaud notifications@github.com wrote:

I have added user accounts and multiple graphs already, also did a big refactoring of code to separate things in folders (client, server, etc.). Code needs some clean but I will push that by next week on Github.

@Soupala https://github.com/Soupala Which direction do you want to take ? Agree for a name change as well. Let's work on this together. What about skype call or IRC or sth ?

About the license : looks like cytoscape.js is LGPL, which implies that we use LGPL as well. @maxkfranz https://github.com/maxkfranz any thoughts ?

— Reply to this email directly or view it on GitHub https://github.com/cytoscape/cytoscape.js/issues/821#issuecomment-139528256 .

maxkfranz commented 9 years ago

The lib license is LGPL, but my understanding is that LGPL applies to the lib itself and any changes made to the lib directly. So, you'd have free choice of license. However, I'd personally prefer LGPL or MIT.

The main thing for me is that I'd like to see this as a polished (source and UI) demo on a public URL that could be linked to as a demo on the main docs page. That way, we can have an easily accessible link to the demo and to the source on Github.

maxkfranz commented 9 years ago

Whoops... reopening

nodi-andy commented 8 years ago

hi, just installed and run the code but cant even add a node... what might the problem? DB error?

maxkfranz commented 8 years ago

Take a look at the code of @clemsos. He has a better prototype. He can also point you towards a hackathon project we did

clemsos commented 8 years ago

thanks @maxkfranz. Yes, there was a basic prototype here : https://github.com/clemsos/cyedit that actually evolves into a more stable software for collaborative graph editing called Topogram : https://github.com/topogram/topogram

As Max mentionned there was also this hackaton project, mostly by @Soupala https://github.com/stargraph/stargraph

Soupala commented 8 years ago

Yes you should be able to run Stargraph on any version of Node, but Topogram is probably a better option for you.

I haven't had time to do anything with Stargraph since the Hackathon. However I recently joined FlowJo LLC, a software company that provides data analysis software for life scientists. It's exciting stuff. I'm assigned to infrastructure projects right now, but my plan is to eventually get back to this as a side project because there's definitely a need for researchers to have this kind of tool.

On Fri, Sep 30, 2016 at 9:28 AM, Clément Renaud notifications@github.com wrote:

thanks @maxkfranz https://github.com/maxkfranz. Yes, there was a basic prototype here : https://github.com/clemsos/cyedit that actually evolves into a more stable software for collaborative graph editing called Topogram : https://github.com/topogram/topogram

As Max mentionned there was also this hackaton project, mostly by @Soupala https://github.com/Soupala https://github.com/stargraph/stargraph

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/cytoscape/cytoscape.js/issues/821#issuecomment-250789979, or mute the thread https://github.com/notifications/unsubscribe-auth/ABUj-EJg6umOdak9MOltwFplMxAFjpd-ks5qvTi7gaJpZM4DcVp4 .

nodi-andy commented 8 years ago

i solved the problem but dont know how. My current problem is, that the nodes are mislocated on the first load but corrected in the second load (F5)

offtopic: I would recommend this project https://github.com/rochus/qt5-node-editor if someone want also have a all-platform executable variant. Than will be web, app and exe version available.

maxkfranz commented 8 years ago

See Electron and Cordova

Desktop applications with Cytoscape.js and Electron

Mobile applications with Cytoscape.js and Cordova

tmad4000 commented 8 years ago

Hi guys! I'm ridiculously pumped to stumble across this thread! Anyone really good at JS want to work with me to solve this problem once and for all? An MIT classmate and I cofounded a startup in the Bay Area building something very related, based on my research with Tim Berners-Lee. We've raised $1.8M and are looking for a lead engineer. Our homepage: http://home.ideapad.io

The first thing we've released is a a human-AI hybrid Web platform that enables teams of analysts to create and analyze networks of information collaboratively, one component of which is a collaborative graph editor.

This is the first step towards a larger vision making a usable realization of the sort of ubiquitous personal/group knowledge base system AI thinkers have dreamed about across the decades, from Vannevar Bush’s Memex to Niklas Luhmann’s Zettelkasten to Tim Berners-Lee’s Giant Global Graph. We see this, in turn, as necessary step someone will have to build if humanity is to create machines that can autonomously solve scientific problems.

Beta users include Fields Medalist mathematician Tim Gowers, and current paying customers include large companies such as Silicon Valley Bank.

Note that visualizing graphs as networks is only one piece of the puzzle; to make this a tool people can use instead of Workflowy or Evernote personally, we have low-friction list representations of the graph in development as well

More generally, I'm trying to build a community of people who are on our wavelength and also think that this is one of the most important problems in the world to be working on! Anyone want me to add them to our Facebook group?

If you're interested, or know anyone who might be, please email me at jacob@ideapad.io and/or post here!

cosmeowpawlitan commented 2 years ago

I am not asking for any new feature or help. I just want to share my experience for those who are also implementing a graph editor.

I am doing a similar project that allows collaborative work, but instead of collaborative editing, it allows users to merge / fork / patch different graph with visibility and ownership control. In short it implements a version control system similar with git/github. The application uses a standard 3-tier model with neo4j as the DB tier.

One UIUX issue is that I can't make a smooth graph editor UI with cytoscape.js, as it doesn't work with dynamic graph well. I was using vis.js network and echart.js, both of them provides interactive force-directed simulation that positions new edge smoothly. In this way, user can happily watch their newly create edge emerge and the whole graph reposition itself (especially the new edge) in a gentle, continuous and realistic way.

This smooth simulated animation also works when the user is dragging some node in the graph (which is less important, as one tester suggests adding a toggle to this simulation as sometimes it is useful but sometimes it is not). In cytoscape.js, if I run cose layout indefinitely, I can't event drag any node, as the layout animation is pining every node to its animated position.

The reason why I switch to cytoscape.js is that one of the tester suggesting colorizing the graph with graph theory metrics such as degree or centrality what is implemented inside cystoscope.js. Also cytoscape.js selector and style-sheet allows me to implement "diff graph visualization" whenever a users want to commit changes to a graph (conceptually like the "CHANGES of a working tree" in visual studio).

I am not asking for any new feature or help. I just want to share my experience for those who are also implementing a graph editor.

nileshtrivedi commented 1 year ago

I needed a graph editor with support for nested nodes and custom attributes for nodes and edges. The nodes would be manually placed so didn't really need automatic layout algorithms. The graph could then be exported and imported as a JSON file. Real-time collaboration out of the scope.

This is what I ended up building using SVG and SvelteJS: https://codeberg.org/nilesh/grapher It's being used for Foresight.org's tech trees: https://foresight.org/tech-tree/

The graph can also be exported as Cytoscape-compatible JSON. Saving as SVG image is trivial because the whole canvas is just an SVG.

leecalcote commented 1 year ago

Hi All, we've been working for a couple of years on a multi-player visualizer for cloud native infrastructure (i.e. Kubernetes and anything that runs on it). While it would be difficult to summarize it's use of Cytoscape, existing and custom plugins (we seek first to contribute to existing plugins where authors are responsive and amenable), and surrounding frameworks and libraries, I will invite you to all to explore it in the Meshery Playground - https://play.meshery.io, which is hosted environment (free to use).

Meshery, a CNCF project, is an open source cloud native manager. It's collaborative visualizer plugin offers two modes of operation: a designer (for collaboratively creating and validating infrastructure and application deployments) and a visualizer (for operating running infrastructure and apps). This short video introduces the concept of the designer mode. For anyone, interested in learning more, I encourage to join the project's community and jump in.

To the extent that it's helpful to others, I'm including a depiction of the project's different deployment models, specifically with respect to peer-to-peer exchange of user edits to the same design (canvas). I hope this is helpful, inspiring, encourages you to further your individual efforts or to join Meshery's.

cytoscape / cytoscape.js

Colloborative Cytoscape.js editor #821