Flyout isn't useful with long lists

[jawache]

@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.

[osamajandali]

@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

new-flyout.mov

[jawache]

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.

[jawache]

Aaand @osamajandali, @zanete and @jmcook1186 here is a video where I propose an alternative flyout function that works better with the pie chart version. Key features:

• The flyout is for an entire component, not just one cell, but the whole timeseries. That's the only way it works with the pie chart version which doesn't show cells of timeseries.
• Merging defaults, inputs and outputs into one table of "parameters".
• I proposed using arrows but actually the UX above where you click on something and it strips out all the other parameters/models to focus down on just whats relevant also works.

NOTE: You can't assume the flow will be inputs -> model -> outputs, some models will take an output -> model -> another-output, so the exact UI you proposed in the above UX won't work, but maybe if we used arrows or some color coding with one list of "parameters" and one list of "pipeline" models?

@jmcook1186 - i'm err not sure how this works with our two pipelines, observe and compute - perhaps we need to show two pipelines, or maybe merge it all into one, or maybe just compute? Unsure...

https://drive.google.com/file/d/1KQ0tuSvccu9W6A6PTp6KeLAEy3_hRJvZ/view?usp=sharing