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.