search

jbenet / depviz

dependency visualizer for the web
https://jbenet.github.io/depviz
MIT License
49 stars 10 forks source link

Rapid prototyping for the dot code #36

Open jbenet opened 7 years ago

jbenet commented 7 years ago

Would be nice to be able to have a "rapid prototyping" for the dot code, or its generation. Basically, a special window we can show and edit the generated dot on a text area directly on the page, and when we edit it, we can re-render the network with the new code. That way it will help us tweak the dot code to get the network to look like we want. (i want to play with the dot parameters quickly to get what we want in various graphs)

I envision this being a togglable thing. fine if it's a developer secret, enabled via executing something like window.__debugDot() on the console.

wking commented 7 years ago

On Wed, Nov 30, 2016 at 05:20:22AM -0800, Juan Benet wrote:

Basically, a special window we can show and edit the generated dot on a text area directly on the page…

So the expected workflow is:

  1. Render a graph as usual.
  2. Dump the dot behind (1) into a textarea, and start reading from that textarea instead of the usual graphviz() output 1.

That means all you can do is position nodes and edges. The nodes themselves would be frozen on the transition from 1 → 2.

wking commented 7 years ago

I think it may be easiest to do this in a dev environment (npm start) by editing Graph.graphviz, saving Graph.js, and letting the tooling rebuild/reload your view. If you use a dummy URL (e.g. http://localhost:3000/#/http/dummy/jbenet/depviz/) you get fast graph loading without hitting the network. The benefit of this approach would be that you can do it now (no dev time). The drawback would be that you need to update DummyHost.js to have the relationship that's being laid out poorly.