search

Green-Software-Foundation / if

Impact Framework
https://if.greensoftware.foundation/
MIT License
150 stars 40 forks source link

Flyout isn't useful with long lists #1059

Open jawache opened 2 weeks ago

jawache commented 2 weeks ago

@osamajandali I'm hovering over a pipeline plugin, but I can't see what outputs are highlighted because they are offscreen. The only way to see them is to scroll down which means i'm not hovering over the pipeline plugin anymore.

We need a different UX, maybe you have to click it?

Can we also explore perhaps a side by side mode, or some way we can see more of the params, even in the most trivial manifests I'm always having to scroll.

Screenshot 2024-10-23 at 13 29 08
osamajandali commented 2 days ago

@jawache Here’s a quick prototype of the new flyout with improved UX in side-by-side mode. Attaching a video since it’s still just a dummy prototype and not yet integrated into the visualizer, which should help us iterate faster.

cc: @zanete

https://github.com/user-attachments/assets/8c08f5d0-efb6-420f-9b69-0f5b8a6d6d57

jawache commented 1 day ago

Thanks @osamajandali few initial thoughts. I like how it's making the data more useful and helping us see connections. It's using up a lot of space and the manifests we are creating now have many parameters, so I think maybe we need to compress the UI a lot more? Or even turn them into tables rather than buttons?

Also, given the above and how hard it would be to even browse this data on mobile, I'm thinking we perhaps make the flyout "desktop only" and not have to worry about reflowing and mobile UX (I don't see anyone doing any complex analysis on mobile, just looking at the graph and the numbers perhaps!🤷‍♂️) what do you think?

I also just realised that with the pie chart version, since there isn't a time series with cells, there isn't anything to click to bring out the flyout. To fix this I'm thinking now of a version where the flyout has the time series of data and clicking the total cell brings up the flyout, since the flyout will be just for a single component. Will draw up something real quick to share.