Plots web view redefining

[maxagin]

The main discussion on Notion

--

Below is a proposal summary

Ribbon

• Remove from the ribbon tabs with EXPs info and command pallet trigger instead use the EXPs view trigger with the number of selected EXPs (same as we do in the EXPs view for showing selected plots)

• Add to the ribbon (header):
  a. Filter plots block with the number of applied filters (on-click toggle the sidebar plots section)
  b. Button “Reset layout” on-click reset plots and section sizes

• Rename “Refresh All” to “Refresh EXPs”

• Keep the ribbon position fixed

General

• The headers of each main section (Data Series, Images, Trends…) will have a sticky position

• The main section's title can be changed, same as the concept of renaming EXPs names

• The default height for all plots is the same (around 240px)

• Classic plots have max-width of approximately 600px

• Q: Can we open a full-screen overlay instead of opening it inside the web view? If not, make sure the overlay takes max width and height

• Make sure all the plots are big enough by default, meaning the information is fully accessible to the user, so the resize functionality is just a help and not a necessity

• The approximate aspect ratio for Classic plots is 2:1

• Classic and Large (not single Images, but enter Images section) plots are horizontally responsive on viewport resizing

• Remove button “Large, Regular, Small”:
  a. Classic and Large plots will be each resized individually
  b. Images will be resized by column and also entire section will be resizable

• Users will be able to change the position of the section by dragging and dropping the section vertically

• Snap to custom grid is helpful to be able to perfectly align plots and sections (nice to have)

• We won’t have a global horizontal scroll, but we will have a local scroll (for the Large plots and Images section)

Images (section)

• Q: If we can relocate columns in Images we do not need to pin them. No?

• Now we can open images in an overlay preview

• We can relocate sections inside Images by dragging and dropping sections vertically

Trends (section)

• Remove the Select Plots button and add these options to the Plots section at the sidebar

Details

• Plots: Information architecture #31
• Plots: Grid and resize #34
• Plots: Grid and resize HTML prototype #35
• 🔌 Redefining the Plots web view

[maxagin]

Related to :
Plots: Information architecture #31
Plots: Grid and resize #34
Plots: Grid and resize HTML prototype #35

[maxagin]

@shcheklein the ticket has been updated. Please if you have time review it before our meeting today. Thanks

[sroy3]

• Keep the ribbon position fixed

General

• The headers of each main section (Data Series, Images, Trends…) will have a sticky position

It's fine to have one thing stick to the top, but two might be a lot. It's possible to have the headers sticky, but that implies calculating the scrolling position and that might possibly heavy as a calculation if there are a lot of plots.

• The main section's title can be changed, same as the concept of renaming EXPs names

This is already the case

• Q: Can we open a full-screen overlay instead of opening it inside the web view? If not, make sure the overlay takes max width and height

We only have control over what is inside the web view.

• Classic plots have max-width of approximately 600px
• Classic and Large (not single Images, but enter Images section) plots are horizontally responsive on viewport resizing

What should be the min-width?
How many plots should there be per line?
How much should they resize

Images (section)

• Q: If we can relocate columns in Images we do not need to pin them. No?

Pinning makes it easier when scrolling also

• Now we can open images in an overlay preview

We can do that, but in some cases, the image won't be any bigger than what it actually is (images have max sizes). We talked about this previously, images can also be opened as a tab in VS Code natively, we can maybe do so when clicking instead of using the same overlay as when zooming plots.

For the rest it all seems good to me.

[maxagin]

Keep the ribbon position fixed
General
The headers of each main section (Data Series, Images, Trends…) will have a sticky position

It's fine to have one thing stick to the top, but two might be a lot. It's possible to have the headers sticky, but that implies calculating the scrolling position and that might possibly heavy as a calculation if there are a lot of plots.

The solution of keeping the context is kinda very friendly I think, but I also can understand what are you talking about.
A small note: the ribbon is not sticky, it is fixed.
Adding the example below.

headers.with.sticky.position.mov

---

The main section's title can be changed, same as the concept of renaming EXPs names

This is already the case

Do we have a ticked for changing the section titles at the Plots view?

---

What should be the min-width?

We have two options;

1. To do as our competitors (Weights & Biases) - no min-width
2. Have something around 200px

How many plots should there be per line?

I am preparing the doc. Will be shared soon

How much should they resize

I will be sharing the exact rules soon

---

Images (section)
Q: If we can relocate columns in Images we do not need to pin them. No?

Pinning makes it easier when scrolling also

I see your point. Good. Please tell me why I can not pin more than 1 image.

---

We can do that, but in some cases, the image won't be any bigger than what it actually is (images have max sizes). We talked about this previously, images can also be opened as a tab in VS Code natively, we can maybe do so when clicking instead of using the same overlay as when zooming plots.

"but in some cases, the image won't be any bigger than what it actually is" - yes, but in some cases, it will be. Also in the new model, it will make sense to have it I think

"we can maybe do so when clicking instead of using the same overlay as when zooming plots" - it is easier for the user to use the same behaviour pattern, I do not see why not. Do you?

---

Q: large plots have sections 9by9, what if we have 50by50 is it possible? How different is it from 10by10?

9by9 example

---

@sroy3 thank you for your feedback, very helpful! Will add everything to the main doc after all the questions are unsvered.

[maxagin]

@sroy3 I am using the Get Started project, which has limited info. Please share with me any other examples of the plots if you have them. Thanks!

[maxagin]

@sroy3 Q:

1. What is REV (on top) mean?
2. Do we always have this section 'title' (rev or similar)?
3. Outlined section in the screenshot can be placed on the left side and can be pinned/fixed in our case I think. Now it is most of the time hidden because of the horizontal scroll. WDYT?

[sroy3]

This is already the case

Do we have a ticked for changing the section titles at the Plots view?

My bad, we removed the feature recently. See #1789

I see your point. Good. Please tell me why I can not pin more than 1 image.

If you compare 2 images with 1 other, probably you should pin the other and not the 2 first.

"we can maybe do so when clicking instead of using the same overlay as when zooming plots" - it is easier for the user to use the same behaviour pattern, I do not see why not. Do you?

That's fine, no problem at all. I was just writing down old discussions we had on the subject to make sure there is history.

Q: large plots have sections 9by9, what if we have 50by50 is it possible? How different is it from 10by10?

9by9 example

We have very little control over what we can do with these plots. They have a max width and the aspect ratio is also very hard to get right.

[maxagin]

@sroy3 Q:

1. What is REV (on top) mean?
2. Do we always have this section 'title' (rev or similar)?
3. Outlined section in the screenshot can be placed on the left side and can be pinned/fixed in our case I think. Now it is most of the time hidden because of the horizontal scroll. WDYT?