javascript graph visualizer

[yusefnapora]

This isn't ready to pull in, but PRs are nice for tracking changes :smile:

I put this together to play around with visualizing graph dumps from the main l-space project. I was initially going to use d3, but found the cytoscape.js project that looked super cool, so went with that instead :)

The visualizer directory is a browser app bundled with webpack; you can use the webpack-dev-server to play with it by running npm run dev in the visualizer dir (after npm install, of course).

Right now it's just rendering a static dump that lives in src/public/elements.json

I added a helper to dump a graph as JSON to a file:

  import io.mediachain.util.orient.MigrationHelper
  import io.mediachain.util.GraphJsonWriter.GraphIOImplicits
  val graph: Graph = MigrationHelper.getMigratedPersistentGraph().get
  graph.writeCytoscapeJsonToFile("/tmp/cyto.json")

Of course the real goal here is to have an API that will serve up the graph json in response to queries, but we're not quite there yet :)

Here's how it renders so far:

[parkan]

Looks like the official visualizer talks to the db through a json api, I wonder if we can just use that for now? It POSTS g.V[3].inE to

http://localhost:2480/command/mediachain/gremlin/-/20?format=rid,type,version,class,graph

to get

{"result":[{"@type":"d","@rid":"#16:12","@version":2,"@class":"E_described-by","out":"#15:12","in":"#12:3","@fieldTypes":"out=x,in=x"}]}

[yusefnapora]

@parkan that's pretty interesting. looks like it would be pretty simple to transform to the cytoscape json format... and might be useful as a "god mode" feature even after we implement our own query api...