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.

[mattseddon]

We will need to replicate and implement the design for light themes (currently only catering for dark themes), I have added a checkbox to our release checklist as well 👍🏻 .

[mattseddon]

We need a design for how we are going to handle experiment data errors within the extension. Current they are shown like this in the cli table: iterative/dvc#5984 (comment)

The issue that we are working off for this is #662.

[mattseddon]

Discovered whilst working on #658 in #673 (comment):

We can only show one icon per tree item. That means that an eye AND a coloured dot is not possible for experiments within the tree view. How could we approach this differently?

Coloured eyes would be my suggestion. Here is a dodgy mockup:

Relates to #496 (comment)

[mattseddon]

From the Nov 4/5 retro: We need designs of UI/UX for the empty state in the plots webview. See #1000 for the initial discussion.

[mattseddon]

@yalozhkin when you get a chance can you please look at https://github.com/microsoft/vscode-webview-ui-toolkit and see if there is anything that we can incorporate into our design. Thanks

[mattseddon]

We no longer need this placeholder as everything is actively being worked on.