Add the ability to control zoom in and out to the view of pipeline

[RodolfoSilva]

When we have a large number of concurrency in batches or processors the view of the whole pipeline becomes very difficult.

I was wondering if we can add the ability to add some zoom control and navigation to this graph?
Something like this: https://codepen.io/osublake/pen/oGoyYb
Or this: https://www.petercollingridge.co.uk/tutorials/svg/interactive/pan-and-zoom/

I've looked to the source code of this project, but I'vent found where is the SVG generation or the place where I can implement this feature with JS.

Yes, I know that I can see the whole pipeline inspecting the element and setting the svg to use max-width as 100% and they will be more responsive. But I think this would be nice if we don't have to do this every time.

I believe this will improve the DX.

[josevalim]

A PR to improve the UI/DX is always welcome!

[RodolfoSilva]

Hey @josevalim , could you guide me where I can change the Phoenix Broadway Dashboard layout? I can't found here this files here.

[josevalim]

The rendering of the graphjis a feature in Phoenix LiveDashboard! We pass the graph to it and the dashboard renders it!

[RodolfoSilva]

Thanks @josevalim

[philss]

@RodolfoSilva just to give a little bit more of context, the graph is rendered by a component of Phoenix Live Dashboard called layered_graph. It is available in the demo of components, when you run that project alone. You can also check the original PR that introduced that feature: phoenixframework/phoenix_live_dashboard#279

I think it may be a matter of adding features around it. Something like a full screen button could go in the component, like an optional feature.

[RodolfoSilva]

Thanks @philss, I'll take a look on this.

[skedzior]

Found the need for this in my own project and it seems to work pretty well, would love if you guys could test it out for your use cases and share your experiences, cheers!