Story: Experiments sidebar tree view

[mattseddon]

Original Story

The experiments panel lets users see their experiments when they code or focus on the plots. Also, it helps to navigate through all the experiments when the table is filtered (filters don't apply to the experiments panel) or too long (in case of expanded checkpoints).

Original Design

Preview:

More details, updated design and spec in Figma.

Updates

Current state:

Relevant links:

• TreeItem API
• TreeView sample extension (node_modules tree browser)

It appears that we can only have one icon to the left, like the show/hide eye to the left of the dots (the arrow doesn't count, that's built into the view for anything with children, it being a TreeView and all.). Any workaround like using combined icons would likely end up hacky and wouldn't have to ability for different actions assigned to these elements.

I believe we can, however, put control icons like this on the right side of the menu like any other item via package.json contributes, seen as the pencil-shaped "Edit" button on each item in the sample extension.

[mattseddon]

As previously stated it is not going to be possible to match the existing design for this side panel tree view.

In order to close this ticket we need to research all of the potential workarounds and implement a prototype solution for @yalozhkin to take a look at. We need to keep in mind that we need a way for users to quickly identify which experiments in the tree view are on display and which records they relate to in the real time plots / static images. Here is a screenshot of the expected UI (see design for more details):

I have already asked in the VS Code dev slack about possible options, here is the response that I got:

I initially thought that simply colouring the eyes would be a possible workaround but on more careful consideration I am thinking that we should research alternatives.

Two obvious options would be using the file decoration provider api to provide the appropriate decoration to each experiment (along with the open or closed eye as the single icon) and another would be a webview view in the sidebar. We do have an example of a file decoration provider already in the code base at extension/src/repository/decorationProvider.ts.

Things to consider:

1. The file decoration API takes a theme color and I am not sure if we will be able to get the hex color out so that we can pass it to any webview clients (perhaps we can have access to those colors already through css in the webview - see $row-bg-color: var(--vscode-editor-background) in webview/src/components/Table/styles.module.scss & this).
2. How are we going to store our list of colors to populate both the existing table webview, experiments tree view and future plots webview?
3. How do we generate the initial list of colors?

[igorfv]

Hi Team, quick update. I had some problems and I was not able to really work on it during this week. I was able to start learning about creating a vscode extension so I can check what I can and what I can't do.

One of the things I want to test on a controlled env is if it's possible to change the icon when you hover over an item. I'm trying to get around the limitations Matt commented by displaying the eye icon when you hover the item (replacing the colored circle). For hidden icons, we can simply show the closed eye instead of the circle even when not hovering over the item.

Does it make sense?

[mattseddon]

Hey @igorfv,

Thanks for the update. Unfortunately there is no onHover event for the TreeItems but there is a tooltip which can take a markdown string. There is also the possibility of doing something with the description and you could even have a fake command that provides an icon to the RHS. See screenshot below of actual inline command used in/by the ExperimentsSortByTree:

I personally am open to any changes to the design as long as we achieve the original objective which is for the user to easily identify what is shown and where.

Hope this info helps. Please let me know if you have any follow up questions.

Thanks,

[igorfv]

@mattseddon I know it would be a big refactoring but what about using webviews on the sidebar too? This would give us the flexibility necessary to make those changes and more.

[mattseddon]

@igorfv that is definitely an option. There are some pros and cons of that particular approach. From memory these are the points that we've been over:

Pros:

• We have full control over what is displayed

  Cons:

• There is some overhead in setting it up.
• Harder to make it look native (although this is now in public preview).
• Webviews are harder to test.
• This.

Please don't let this put you off though. There could be pros that I've missed and I may be overstating the cons for this particular situation.

[mattseddon]

This is another option for how to tackle the tree view portion of this one:

(ignore the fact that the experiment names are duplicated)

Having two different groups would enable us to show both of the icons that we want to. We could move experiments between the two with the left click action. Title for each of the groups needs some work. This would also still let us avoid registering theme colors and using our own custom svg dots instead.

LMK what you think.

[mattseddon]

From planning meeting

For the first iteration we want to:

1. Introduce an object which contains color information which we can associated to experiments
2. Have each experiment associated with a color
3. Pass the colors to both webviews and the experiments treeview
4. In the experiments webview change the color of the dots associated with each experiment
5. In the plots webview change the color of the lines associated with each experiment
6. In the tree view have a dot filled with the appropriate color for each experiment

In a future iteration we will introduce a way to select / de-select experiments, which will

1. Change the icon associated the experiment in the treeview to an empty dot of the appropriate color
2. Remove experiments from the plots webview

We also have the ~unsolved~ problem of how to identify running experiments. Currently we use ThemeIcon('loading~spin') but we still need a way to identify multiple running experiments between the 3 views. We will also need a mechanism to select / de-select these running experiments (which will show / hide them in the plots webview).

Edit: We can load colored spinners through svgs as well:

https://user-images.githubusercontent.com/37993418/140007317-f76e5686-fc06-447b-b378-5b264556069f.mov

[mattseddon]

Next iteration:

1. Use colored circle-outline for unselected (+50 svgs)
2. Use circle outline for bullet in experiments table
3. Update queued icon in tree to match table

[mattseddon]

@shcheklein we are done with the first couple of iterations of this one. Please review when/if you get time.