Question: the best way to use oz for building interactive tree graphs

[spacegangster]

Hi @metasoarous, thanks a lot for this wonderful project and the effort!
Is it possible to draw a tree graph, get its nodes coordinates and then draw an overlay layer with inputs on top of it?

I'm able to this with d3 itself with a bit of monkey-patching, so the question is if it's any better with oz?

For details:
d3.layout.tree(root).nodes() in the end has the x, y coordinates of the nodes.

[metasoarous]

Hi @spacegangster; Thanks for asking.

I saw and answered this question on the Clojurians slack, but for posterity, the new :view-callback option to the oz/vega and oz/vega-lite reagent components (see #167 ) should allow you to use the vega view api to accomplish this. You can specifically look at the data, addDataListener, change, insert and remove methods to access/modify data.

Drawing an overlay with inputs is probably a bit more work, but should totally be doable, and would be really cool to see in action! Please let us know how that goes for you.

Thanks again.

PS I moved your issue over to a discussion item, since this isn't an explicit technical issue, and I'd like to be able to keep this discussion open so that you and others can continue to chime in and discuss this use case. Please feel free to use this space in the future for similar use-case discussions; We can always convert back the other way towards a proper issue if a well-defined technical issue emerges. Thanks!

[spacegangster]

Reporting on oz-vega-utils – it works, and it does what it says.
It produces a vega spec, which then creates a graph with draggable nodes.
It creates a few inputs, but these will be outside of a graph, these represents Vega signals to modify some graph params.

[spacegangster]

That said – I learned today about Vega triggers and event streams, so maybe this could help me on my quest. I'll ask Vega community about this.

[metasoarous]

@spacegangster Wonderful! Thanks for reporting back!

What exactly is the next goal you're trying to accomplish?

[spacegangster]

@metasoarous I want an overlay layer for a tree graph, so that I could edit node labels and other properties.

As you can do in Miro.com or whimsical.com. They do overlays on canvas, btw.

I don't need a sophisticated graph editor yet, just lay out the tree and some inputs on top of nodes.

[metasoarous]

OK; Thanks. This is what I though, but I just wanted to make sure I understood correctly.

I don't know a lot about vega triggers, so maybe there's a way you could use those. But you could certainly use view.addEventListener to hook into the clicks and render a set of inputs on top of the visualization, then use the view.change to update that information as you make changes.

Good luck!

[spacegangster]

Yeah, using :view-callback, I managed to get the layout.
I'm using Vega's official tree view example
Screenshot 1 shows nodes contents, which includes layout coordinates
Second screenshot is the recipe. Will post new findings here.

[spacegangster]

When is this :view-callback called? Every time the view is updated, or once (on mount)?

[metasoarous]

Very cool! Thanks for the update!

The :view-callback is only called once, when the conversation loads. To do something every time the data is updated, you would probably use the view.addDataListener method, and pass a callback which will get called every time the data changes.

You can also use the callback to cache the view object, then use view.addEventListener to trigger actions in a more granular fashion. You might want to do this if, for instance, you were trying to implement drag and drop, and didn't want data updates (to the rest of your react/reagent app, say) happening on every tick, but rather just when the "drop" is released. (Hope that example makes sense; Typically addDataListener is all you need though).