feat(frontend/table): improve column visibility UI

[CammilleCC]

This PR aims to improve the UI of the column visibility: there is now more context that a variable is not shown due to variable visibility or tags selection.

• The popover dropdown is now converted into a data table to support expanding rows
• The expanding rows give more information:
  • On the variables: which tags are associated and their selection status
  • On the tags: which variables are associated and their visibility status
• The checkboxes in the variables have different styles depending if it's actually shown:
  • Filled checkboxes denote that the variable is actually shown
  • Outlined checkboxes denote that the variable is supposedly visible but is filtered out (by the tags in this case)

Please check out https://european-xfel.github.io/DAMNIT-web/pull/184/demo/#/example/xpcs to have a go for yourself 😊

Below is a preview of how it looks like:

chrome_QTxD3OdZ2A.mp4

[tmichela]

Looks very cool! 2 minor suggestions, feel free to ignore if that's too much work to change:

1. it would be useful to move the "x/y visible" next to the tag name, such that it's visible even when the variable list is collapsed. And only show that bit when at least one variable is hidden for this tag group.
2. allowing to show/hide variable in the expanded tag by clicking on the open/closed eye would be extra noice 👩‍🍳

[tmichela]

another thing, when tags are expanded, we should probably show variable's titles rather than their names.

[CammilleCC]

another thing, when tags are expanded, we should probably show variable's titles rather than their names.

Whoops, I was meaning to fix before marking the PR as ready but it fell through the cracks.

Fixed at 2528a11.

[CammilleCC]

1. it would be useful to move the "x/y visible" next to the tag name, such that it's visible even when the variable list is collapsed. And only show that bit when at least one variable is hidden for this tag group.

I have other ideas for this, especially on the next PRs as it needs another column: a badge or a dot for easier scanning, like a (wording not exact):

• green [All visible] or green dot
• yellow [Not all visible] or yellow dot
• red [Nothing visible] or red dot

Then they can expand the row for more information. I am more inclined with the dots though, to help make the interface clean.

2. allowing to show/hide variable in the expanded tag by clicking on the open/closed eye would be extra noice 👩‍🍳

HMMMM I'd like to postpone this a bit as the interaction could be a bit more complex. Examples would be:

• If a tag is not selected and one clicks one one of the closed eye, should we select the tag or should we add the variable to a list of overrides?
• If we go for the first option and the user realized that he misclicks and wants to undo the action by clicking again, should we deselect the tag?

[tmichela]

To me green/red colors indicate something is good/bad, which I think doesn't really fit here, as this just indicates the number of visible variables for a given tag (it's neither god or bad, just an indication). So, I would probably prefer just showing x/y, plus the light gray text is less eye catching than colors.
But that's all minor details at that point, do as you prefer.

• If a tag is not selected and one clicks one one of the closed eye, should we select the tag or should we add the variable to a list of overrides?
• If we go for the first option and the user realized that he misclicks and wants to undo the action by clicking again, should we deselect the tag?

To me changing the variable visibility should never change a tag visibility.

[CammilleCC]

To me green/red colors indicate something is good/bad, which I think doesn't really fit here, as this just indicates the number of visible variables for a given tag (it's neither god or bad, just an indication).

Fair enough, I'll think about this more in the future.

To me changing the variable visibility should never change a tag visibility.

I agree, that's why I wanted to add an override list, maybe not in this PR. A problem in this current implementation that the tag selection trumps the variable visibility. That means it's not possible to show a variable that that is not in the current tags selection, unless the associated tag is selected. An override list could solve this.

[CammilleCC]

Merging now, thanks for the review!