search

dashbitco / broadway_dashboard

Keep track of your Broadway pipelines from Phoenix LiveDashboard
https://elixir-broadway.org/
Apache License 2.0
213 stars 17 forks source link

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

Open RodolfoSilva opened 2 years ago

RodolfoSilva commented 2 years ago

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

image

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 commented 2 years ago

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

RodolfoSilva commented 2 years ago

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

josevalim commented 2 years ago

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

RodolfoSilva commented 2 years ago

Thanks @josevalim

philss commented 2 years ago

@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: https://github.com/phoenixframework/phoenix_live_dashboard/pull/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 commented 2 years ago

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