Handle DVC errors gracefully in plots

[shcheklein]

This depends on iterative/dvc#7692

Figma specs

Motivation

1. Will be missing data for a specific experiment within one of the plots. This will be most apparent in the comparison table. We need a placeholder and some way to refresh the missing experiment's data.
2. Currently, if an experiment completely fails to load plots data there will be nothing to let the user know the experiment is missing. Add an indicator into the webview's top experiment selection section in order to let the user know that an experiment has something wrong.

TODO

Will be handled in relation to the: DVC errors that may occur during or after running experiment #1636

• Placeholder and refresh Handle DVC errors gracefully in plots #1649 (comment)
• Missing experiment indicator Handle DVC errors gracefully in plots #1649 (comment)

[maxagin]

@mattseddon I think we may want to use buttons where it is possible. take a look and let me know.

[maxagin]

Signal user that an experiment has something wrong at the tabs level. We can use the exclamation sign (will be using it for similar cases - errors) colored with the section color.

Keep the tabs appearance consistent with the expS table and side panel. Wdyt?

[maxagin]

I would like to finalize this if possible. Please share your comments. @shcheklein and @mattseddon Thanks

[mattseddon]

@maxagin

This is fine. Please update the designs in the figma. We need to start consolidating all of this information in to one place so we can prioritise what we are going to implement next. We also need to make sure there is no contradictory information anywhere. E.g dots vs strips for the experiment colors.

[mattseddon]

Implemented the refresh button in #1754. The concept looks strange when there are multiple plots missing:

Consider leaving for now but removing the button altogether once the ribbon is in place.

[maxagin]

Great ! @mattseddon just a few comments:

The concept looks strange when there are multiple plots missing

The reason is that the area is not defined. With the border it will be fine. See here #1649 (comment)

refresh button

I have noticed that most of the time buttons have significant clear space (padding) on the sides. I propose same, should feel more consistent. See here #1649 (comment)

[mattseddon]

The reason that I say that it "looks strange" is because we have a refresh button on each plot that does the exact same thing. I do not think that adding a border will make the duplication of information/button look any better:

The buttons are from the webview-ui-toolkit. I am using them as provided by MS. Please take a look.

[maxagin]

I am using them as provided by MS

I had an impression that we can have it 100% of the parent container, like in the attachment. Sorry if I was mistaken.

adding a border will make the duplication of information/button look any better

Yes. It won’t do the duplication any better, but it will outline the space with the message. So the user won’t feel like the info is in the air, but it belongs to a specific place. Does it make sense?

we have a refresh button on each plot that does the exact same thing

Do you mean if the user will click one button it will refresh all the missing plots. I thought that one button refreshed info related to the specific plot.
If by clicking one button all plots will be refreshed - then it does not make sense to have a button for each section and the button needs to be located somewhere else ‘general’ refresh.

[mattseddon]

I am using them as provided by MS

I had an impression that we can have it 100% of the parent container, like in the attachment. Sorry if I was mistaken.

Generally the only place that you would see a button like that would be in the sidebar panel. Whenever buttons are shown in the toast or any webview-toolkit-ui previews they have much less space between the edge and the text/icons

we have a refresh button on each plot that does the exact same thing

Do you mean if the user will click one button it will refresh all the missing plots. I thought that one button refreshed info related to the specific plot. If by clicking one button all plots will be refreshed - then it does not make sense to have a button for each section and the button needs to be located somewhere else ‘general’ refresh.

It will refresh all plots for that revision/experiments. Hence this comment:

Consider leaving for now but removing the button altogether once the ribbon is in place.

[maxagin]

Whenever buttons are shown in the toast or any webview-toolkit-ui previews they have much less space between the edge and the text/icons

Yes, but I thought this is also a webview and it uses the full width of the content wrap. No?

However if the button needs to refresh all plots of a particular exp, it doesn't matter . Thank you @mattseddon

[mattseddon]

The provided picture is from a walkthrough which probably uses a webview under the hood but it is internal to VS Code and does not use the toolkit.

[maxagin]

Hey @mattseddon . Please see the Figma specs which I have recently created. Let me know what you think.

[maxagin]

Well, I have just created a different way of displaying the errors, a part of this is the same.

So, what we will do here. Do we need the error for the exp tab?

[arcticbear]

@maxagin
There must be another red color for showing an error on the label which will be better to read. This one is really tough to read, it's painful for the eyes. A suggestion is to use a more light red tone.

Tooltip aligning by the center is confusing. Currently, all the tooltips are aligned by their left side to the parent element, which is consistent with menus and other elements' behavior.

[maxagin]

There must be another red color for showing an error on the label which will be better to read. @arcticbear

We are trying to follow the native roles as much as possible - VSCode guidelines

However, for this particular case, we probably won't use red at all (WIP).

---

Tooltip aligning by the center is confusing.

The context menus are always aligned by the right side, unless it's very close to the right age of the screen, in this case, the context menu will appear on the left side of the mouse. However, in some rear cases, the context menu appears always on the right side.

Regarding the tooltips with content that can be copied or having other actions such as links will be placed at the center of the element. This is consistent with common interaction patterns including GH and Studio

[maxagin]

The Figma specs were updated. Please let me know if you will have any comments. Thanks

[shcheklein]

When dvc plots show --json fails like this:

(.venv) ?254 Projects/ensemble-dvc-template % dvc plots show --json
ERROR: unexpected error - Field 'epoch' does not exist in provided data.

Having any troubles? Hit us up at https://dvc.org/support, we are always happy to help!

We handle it in some weird way in VS Code: