Review: table styles

[maxagin]

I have reviewed the EXPs table and would like to share with you some comments.
I will be referring to this Figma file

TODO

• Add tooltips to checkboxes and stars
• Hide the right border of the hovered first cell after the horizontal scroll is activated and the shadow appears
• Increase the workspace row height
• Take off table header right closing line
• Update on-hover header separator line background color
• Take off the first cell's right border when the cell is sticky
• Selected first cell does not have a shadow when scrolled horizontally
• Keep checkpoint lines on top of the row border
• Update the view background color
• Inconsistent borders on head cells vs body cells
• Remove sticky section bottom border after the vertical scroll is activated
• Keep the resize icon and the vertical line (resize indicator) visible during column resize
• Header cell resizer bar doesn't always reach the top of a cell
• Remove the EXP name from being a toggle
• When star an experiment the weird progress lines show on the sidebar. (Bug?)

Hint/Tooltip

• Add hint "Add/Remove to plots" (maybe different wording) when the EXP's circle has hovered
• Hints like Select, Add Star and similar. The text is too big. Try to make it the same as when you hover on the Experiments tab
• Hints need to be closer to the cursor
• Hints do not need to have a triangle at the top

Row

• Update row selection styles
• A number of hidden element indicators (circle with the number) styles for rested and selected row states
• There is a little spacing between the elements in the design, for example, checkbox and star, it is important to show the user where the active area ends and where the new starts
• Chevron on hover - cursor pointer
• The table's last row does not need a button border
• Checkbox and star styles when the row selected

Context menu

• All context menus need to appear on the right side of the target point.
  The context menu is usually placed on the right/bottom side of the mouse click unless it is close to the right age of the screen, then it will appear on the left side. However, in VSCode it seems like always on the right side, but we can do it correctly I think.
• Remove the triangle (on top) from the context menus

[maxagin]

When the first cell is on hover, the checkbox is not visible because it has the same colour as the cell’s BG colour. See Figma

During the column resize, the resize icon and the vertical line (resize indicator) have to stay visible all the time if the user still holds the mouse button.
I am also attaching an example from wandb.ai

Screen.Recording.2022-08-23.at.4.18.17.PM.mov

Screen.Recording.2022-08-23.at.4.22.18.PM.mov

The workspace row height in Figma is a bit larger than other rows. This was done so the row will stand out from the other rows.

When resizing a column the separator line is a different colour in Figma

I thought we have agreed that when the cell is on hover we show just left and right borders keeping the same BG colour. This is without any relation to the column hover style.

I don't think we need the table header closing right line. See below.

The checkpoint lines should be placed on top of the row border.

The BG of the view is different in Figma.

When the header section/s is on hover, hover styles need to be applied (see Figma).

When star an experiment the weird progress lines show on the sidebar. I think this is something that was already reported.

Screen.Recording.2022-08-23.at.4.48.57.PM.mov

The Figma uses different styles for the row selection. Not sure if we have a special ticket for this.

.

In relation to the Experiments table: improve styles #2070

[maxagin]

Hi @julieg18 . I have added to Figma the new styles "Number of hidden elements indicators" when changing the selection styles this also needs to be corrected. Thank you!

[julieg18]

Created a task list:

• Add tooltips to checkboxes and stars
• Keep the resize icon and the vertical line (resize indicator) visible during column resize
• Increase the workspace row height
• Update on-hover header separator line background color
• Take off table header right closing line
• Stop sidebar sidebar progress lines when starring a experiment
• Keep checkpoint lines on top of the row border.
• Update row selection styles
• Add hover styles to header cells
• "Number of hidden element indicators"

When the header section/s is on hover, hover styles need to be applied (see Figma).

When you are referring to hover styles, do you mean changing the background color? Wanted to make sure since we took off that particular style on the body cells :)

Also, due to needing to update multiple cells on hover, this may require too much rerendering 🤔 Will do some research before confirming though :)

I have added to Figma the new styles "Number of hidden elements indicators" when changing the selection styles this also needs to be corrected. Thank you!

Hmmm, I'm not quite sure what the task is. Could you provide some more context?

[maxagin]

When the header section/s is on hover, hover styles need to be applied (see Figma).

When you are referring to hover styles, do you mean changing the background color? Wanted to make sure since we took off that particular style on the body cells :)

Yes. You are right about the fact that we have removed the particular style on the body cells, but for the header, it is different, already because the header cells have the lines. Most importantly we would like to have the same hover style for the header cells as we are using for the row on hover.

I have added to Figma the new styles "Number of hidden elements indicators" when changing the selection styles this also needs to be corrected. Thank you!

Hmmm, I'm not quite sure what the task is. Could you provide some more context?

I am adding it to the description like this: A number of hidden element indicators (circle with the number) styles for rested and selected row states. Let me know if you have any questions, please.

@julieg18 I have added a few more things to the TODO list and published them in the description (on top).

Question: I do not understand what this is about: Stop sidebar progress lines when starring an experiment?

[maxagin]

Preparing the table for "Text selection in the table's header and body cells" modifications.

Currently, to show exp in plots you can click on the circle/EXP name. Let's remove the EXP name from being a toggle. In other words, the toggle will be only the circle.

The description was updated. The new task was included.

[maxagin]

After the horizontal scroll is activated and the shadow appears, the right border of the hovered first cell does not need to be shown.

The description was updated. The new task was included.