Improve the table of experiments UI

[yalozhkin]

• Sticky table header Improve the table of experiments UI #1562 (comment) (After scroll initiated display shadow)
• Sticky experiments column Add a shadow to the sticky experiments column #2017
• Table header text size Improve the table of experiments UI #1562 (comment)
• Sort in the header. Remove line indicators and also the context menu Improve the table of experiments UI #1562 (comment) Experiments table: sort by left click on the header #1708 || Use: default state (empty), sort 1 (arrow top), sort 2 (arrow down). Every state is activated by a click.
• Show “...” always on the right side Improve the table of experiments UI #1562 (comment)
• The exp spinning circle border does not move smoothly Improve the table of experiments UI #1562 (comment)

[maxagin]

Usually you won’t see any hints on how it is sorted, but on click just change the sorting from A-Z to Z-A.

Suggesting to remove line indicators and also the context menu. Maybe we can use △ ▽ or ↑ just to show mainly that sorting can be applied, well also the direction.

(Is there only 2 options or more? If more the classic solution won't work.)

[maxagin]

In design the top part of the table and the info are much smaller.

[maxagin]

Why table content is right oriented. Would it not have more sense to use left oriented except the summary sections like Params that supposed to be centered?

[maxagin]

Using codespaces:
params/split has been modified | the result in the table has yellow color | but scores.json also has a yellow color - this is confusing.

[shcheklein]

params/split has been modified | the result in the table has yellow color | but scores.json also has a yellow color - this is confusing.

could you clarify please? add video/screenshot?

[shcheklein]

@maxagin

Why table content is right oriented. Would it not have more sense to use left oriented except the summary sections like Params that supposed to be centered?

also, not exactly clear what it means to be left-oriented, tbh. Could you please clarify?

[maxagin]

@shcheklein Here are two examples:

1. Text aligned left

2. Text aligned right

Normally you would see left oriented content. Does it make sense?

[shcheklein]

Got it now, thanks @maxagin . Good question. I think initially it was inherited from Studio, and in Studio in turn:

• we need to show the "copy" icon on hover and it would feel weird if keep some space for it to the right in a cell
• Excel (may be other tables) do these with numbers. And the reason (my guess) would that usually you want to 23.111 and 2.222 aligned by .. Would be nice to do some brief research on this.
• besides that it feels like left / right are the same? do you have any substantial things in mind for this?

[maxagin]

params/split has been modified | the result in the table has yellow color | but scores.json also has a yellow color - this is confusing.

could you clarify please? add video/screenshot? @shcheklein

[shcheklein]

@maxagin sorry, still can't connect the dots :)

but scores.json also has a yellow color
the result in the table has yellow color

I see only one item that is yellow in the table ... @rogermparent @mattseddon could you remind please what is logic behind us making these values yellow. I understand the workspace (I guess) - it should be git diff based more or less. What about this master branch? Also from the screenshot I don't quite understand what is actually running .... where do we get Steps from?

[maxagin]

@shcheklein This is how I see it:

1. First I am noticing yellow text in the table header
2. Then I see same color in the table, but in the Light Blue section (params)
3. This is confusing, because colors create a relation.

Does it make sense?

[rogermparent]

could you remind please what is logic behind us making these values yellow. I understand the workspace (I guess) - it should be git diff based more or less.

As far as I understand, the only logic we have to turn values yellow is the git diff based logic you mentioned, where if any value in the workspace is not the same as git HEAD, it becomes yellow. Currently it's the same exact color as metrics headers, but #1682 changes that to its own color.

I don't think there's anything that would turn any value outside of the workspace yellow.

[shcheklein]

@maxagin ah, okay I understand it now. yes, it's not ideal. as far as I understand #1682 would change this, right? @rogermparent how will the new color look like? @maxagin any suggestions?

[maxagin]

we need to show the "copy" icon on hover and it would feel weird if keep some space for it to the right in a cell @shcheklein

The way Studio handels this now works both for having icon on the left or right side.
However I think it is more natural to have it on the right (if we have left to right orientation). First - value | then - action

[rogermparent]

how will the new color look like?

I used the variable for the color that the Git extension uses to indicate a modified file. The biggest difference is that the color will vary per theme, instead of only being yellow.

In the default dark color theme this happens to still be yellow, but seemingly a slightly darker tone than the metrics color

Many themes use a similar color, but some like Dive Bar use completely different ones

#1697 will make this and the params/metrics colors configurable, with defaults being the same colors they currently are.

[maxagin]

Sticky table header

Having a sticky header is a great way to allow the user to keep context and navigate easily across the table.

[maxagin]

Excel (may be other tables) do these with numbers. And the reason (my guess) would that usually you want to 23.111 and 2.222 aligned by .. Would be nice to do some brief research on this. @shcheklein

#1700 Data in Tables. Research

[maxagin]

it's not ideal. as far as I understand #1682 would change this, right? ... any suggestions? @shcheklein

Not sure, but may be it worth to consider not to use colors in the table’s header in VS Code.

[maxagin]

Different table view options

Compact display density allows user to observe more info w/o scrolling

Example

[shcheklein]

I think we should be going as compact as possible by default, non compact mode is not that needed I think for now.

[shcheklein]

@maxagin @yalozhkin let's start creating some list with checkboxes in the ticket description with all the items and start prioritizing them or at least grouping. This long list with all the things at once is getting out of hands a bit, wdyt? Or let's discuss how do we manage and hand off this.

[maxagin]

Zoom in without any scroll bars

This is related to the 100% view. If the table is 100% then when zoomed in it still needs to be 100%. If the table is 70% view when zoomed in still needs to be 70%

Before zoomed in

After zoomed in

[maxagin]

The description has been updated after scope review with @rogermparent . The remarks from Roger were very helpful !

Please see the scope #1562 (comment) and let me know if you have any comments.

[mattseddon]

Should #1663 be included in here?

[maxagin]

@mattseddon I do not know what is the status of #1663 , but I am using the information from mentioned task and even added a comments regarding what will need to be improved in #1663 if we agreed on todo of the #1676

But you are absolutely right, all these tickets belong to one Story. The question is if we are ready to re-organize previously created tickets. Maybe a bit of a mess. Not sure. WDYT?

[maxagin]

The spinning circle border moves not smoothly. Feels like there is something wrong with it :) I am adding it to TODO.

Screen.Recording.2022-06-23.at.3.14.24.PM.mov

[maxagin]

I think we can show a notification You can toggle maximum 7 experiments if the user trying to toggle a new exp (we have a max 7). Because I kinda thought that this is a bug.

Screen.Recording.2022-06-23.at.3.32.49.PM.mov

[maxagin]

Would be helpful somehow to show the running experiments' progress. Every time I run an exp I feel like there is an endless process.

[maxagin]

I think the Workspace row also needs to be fixed (like the table header). WDYT?

All the new comments have been included in the description's TODO

Screen.Recording.2022-06-23.at.3.54.09.PM.mov

[mattseddon]

The spinning circle border moves not smoothly. Feels like there is something wrong with it :) I am adding it to TODO.

Screen.Recording.2022-06-23.at.3.14.24.PM.mov

Matches native spinner ($loading~spin):

Screen.Recording.2022-06-24.at.2.41.34.pm.mov

See also https://code.visualstudio.com/api/ux-guidelines/status-bar#progress-status-bar-item. This is a pattern that I have seen other successful extensions use.

[maxagin]

Find a way to show the user that the displayed in cell value is different from the real one. Accuracy? Does it make sense?

[shcheklein]

Find a way to show the user that the displayed in cell value is different from the real one. Accuracy? Does it make sense?

It makes sense, but not to any reasonable extent that would justify complicating what we show in the cells.

[maxagin]

Can we disable some styles when resizing the columns? and for similar cases: when the user works with something, other info blocks should not be affected.
!! If we have a Copy button at the cell level, we do not need to be able to select textual content.

Screen.Recording.2022-07-05.at.1.28.47.PM.mov

[maxagin]

• nclude the Workspace row into the fixe Improve the table of experiments UI #1562 (comment)

WDYT @mattseddon ?

Also, all the ideas for todo were moved into the description (TODO Phase 1 list). Please check it out and see if there is something we can include in the WP now. Thank you @mattseddon !

[mattseddon]

Be able to toggle fixed/scrollable table header with the Command Palette
Be able to toggle fixed/scrollable table header with a UI control in the webview

What value does this add to the user? IMO we don't need to add this.

Show a notification (?) if the user trying to toggle exp and 7 expS are already toggled #1562 (comment)

Once a user is aware that they can only select 7 this no longer becomes an issue. Following the UX guidelines diagram I would take this path:

FYI https://code.visualstudio.com/api/ux-guidelines/notifications contains full guidelines on notifications.

Explicitly somehow show the running experiment progress #1562 (comment)

There is currently no way to get discrete progress information out of the CLI. The user can proxy progress by:

1. Being familiar with the experiments they are running (they should be).
2. Having the DVC terminal open which displays the CLI output (this opens by default).

Avoid displaying in cell values that are different from the real one #1562 (comment)

Why would we want to do this? I only need to see part of the value to make a decision unless two are very close and then I can investigate further with the tooltips. I would only need the full number if I was going to publish it.

At the later stage, we will have to implement ‘Unselect All’ and similar options on top of the table, so we can have an option to work with selected rows.

This is in the context menu now. Do we need another option at the top of the table?

Show all columns, and rows (whether hidden by default or by manual filtering). #1994 (comment)

This should be left as a separate issue IMO.

Clear the selection with the Esc key - Do we have somewhere documented a list of the supported hotkeys? How the users will know about this option?

This is intuitive for a VS Code user. Esc unselects (it is actually annoying when an extension does not provide this option).

[rogermparent]

Be able to toggle fixed/scrollable table header with the Command Palette
Be able to toggle fixed/scrollable table header with a UI control in the webview

What value does this add to the user? IMO we don't need to add this.

It could benefit a niche subset of users who want to keep a very small DVC experiments webview pane in their view to monitor a running experiment, or any other situation where every bit of panel real estate matters, but I would imagine that subset is so niche that we can safely wait until a user raises it as an issue to consider implementing it.

[maxagin]

Accuracy of displayed by default cell values #2044

[maxagin]

Explicitly show the running experiment progress #2043

[maxagin]

Show a notification if the user trying to toggle exp and 7 expS are already toggled #2041
Improvements for sections using the copy button #2040
Context menu improvements #2039
If a column has resized, the hint is showing not in the right place #2037
When applying a star to the exp, some strange styles appear on the sidebar #2036
Select and apply star, appears with a small delay #2035
Disable some styles when resizing the columns #2034
Include the Workspace row into the fixed section along with the table header #2032
Timestamp column improvements #2031

[maxagin]

https://github.com/iterative/design/issues/27