Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
RodolfoSilva opened this issue May 6, 2022 · 6 comments
Open

Comments

@RodolfoSilva
Copy link

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
Copy link
Member

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

@RodolfoSilva
Copy link
Author

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

@josevalim
Copy link
Member

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

@RodolfoSilva
Copy link
Author

Thanks @josevalim

@philss
Copy link
Member

philss commented May 7, 2022

@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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants