Placeholder: Needs design

[mattseddon]

From the VS Code planning meeting on March 17 (AEDT):

This issue is designed to be a collection point for all of the problems that encounter that will need design input.

The idea is that this should help us to communicate asynchronously with @yalozhkin.

@rogermparent please drop anything that you come across in here.

@yalozhkin let me know what you'd like to see in here.

Thanks!

---

• Designing with the idea of user-configurable fonts in mind could prove difficult, but I believe the advantages would be worth it Placeholder: Needs design #175 (comment)
• Layout - how do we open the panel initially - Placeholder: Needs design #175 (comment)
• Icon for the extension's tabs (Plots and Experiments webviews)
• User onboarding Placeholder: Needs design #175 (comment)
• Error handling and debugging Story: Investigate and implement debugging best practices #470
• Replicate the design for light themes Placeholder: Needs design #175 (comment)
• How do we display experiment errors Placeholder: Needs design #175 (comment)
• We can only display a single icon against an item in a tree view. How would we like to display experiments in the runs view Placeholder: Needs design #175 (comment).
• Webview empty state Placeholder: Needs design #175 (comment)
• Story: Parallel coordinates plot #1117
• Plots grid (Plots: Improving the Grid #1254)
• Checkout https://github.com/microsoft/vscode-webview-ui-toolkit (Placeholder: Needs design #175 (comment))
• User flow for Story: Remote setup wizard(s) #1531

[rogermparent]

From #170

We'll probably want to use some of the VSCode-injected CSS variables like --vscode-font-family, --vscode-font-weight, and --vscode-editor-font-family so we use the user's configured fonts- doing so allows us to integrate our webviews with the user's VSCode and take advantage of the fonts provided to us as a free resource.

I'm thinking since the --vscode-font-family is generally sans serif and --vscode-editor-font-family monospace, we can use the former for UI elements and the latter for the table.
This concern relates to #175 as well.

Designing with the idea of user-configurable fonts in mind could prove difficult, but I believe the advantages would be worth it.

[mattseddon]

From #158: When we initially open the Experiments webview the panel it is opened in the second editor column of the IDE. We need to decide on what the UI/UX should be for opening this view.

This comment goes into a bit more detail.

[yalozhkin]

Experienced the following issue:

• By default, having some experiments previously run, I see the workspace + master 1st level rows (with previous experiments inside of the master);
• On a running experiment state, the master row disappears, and I see the running experiment row (with no levels) instead
• After the experiment has been completed, I see the master again, with experiments including the latest one;

Expectation:

• See master and previous experiments all the time
• See the running experiment inside the master

[yalozhkin]

Also, I noticed that the workspace row doesn't work as I expected:

• Changed and saved the params.yaml → expect to see the applied changes immediately in the workspace;
• Run an experiment with the new changes → expect to see the running experiment under the workspace;
• The experiment has been completed → expect to see the experiment/epochs metrics under the workspace;
• Pushed the params.yaml changes → expect to see the new commit row and empty workspace.

[shcheklein]

@yalozhkin A quick suggestion. Could you please put looks-like-a-bug problems into separate tickets and ping DVC along the way (e.g. @pmrowla ) ? This specific issue is intended to be a place we put checkboxes for all minor questions related to UI/UX we want to bring you attention to (and otherwise might forget. to do so).

[mattseddon]

Consider user onboarding

We will soon need to consider first time users of the extension. In order to onboard user's we could:

1. Add a DVC - Get Started page which would be another webview.
2. Display messages when the correct options are not set.
3. Improve the marketplace listing.

Examples:

Get started pages -

Python:

Docker:

Incorrect options set (view containers)

Project Manager:

Remote Explorer:

Marketplace listings

GitLens:

Coverage Gutters:

[rogermparent]

@mattseddon Great ideas! I think good onboarding could surprisingly be one of the most important parts of this extension, as the primary goal is to get people who aren't as CLI-savvy into DVC.

1. Add a DVC - Get Started page which would be another webview.

Thankfully, a welcome Webview like this wouldn't have to be a full-blown app like the Table is!