GScan sidebar: task states badges

[MetRonnie]

Supersedes https://github.com/cylc/cylc-ui/pull/1050

Old (left), new (right):

Check List

• [x] I have read CONTRIBUTING.md and added my name as a Code Contributor.
• [x] Contains logically grouped changes (else tidy your branch by rebase).
• [x] Does not contain off-topic changes (use other PRs for other changes).
• [x] Tests are included.
• [x] Changelog entry included if this is a change that can affect users
• [x] Docs screenshots updated at https://github.com/cylc/cylc-doc/pull/882

[oliver-sanders]

LGTM. A nice hybrid of the job icons (which are better for monitoring) and the task icons (which are truer to the meaning of the data). Some small comments:

1. Can we remove the "succeeded" badge.

   • This number wasn't displayed before as it isn't particularly useful in the n-window system.
   • Note: Mid to long-term, I suspect we might rationalise this down to submitted, running and incomplete depending on what we decide regards task state.

2. It would be good if we could also include "preparing" tasks in with the "submitted" ones.

   • remote-init can take a while during which time the workflow looks inactive (no tasks in submitted state).
   • Which can make the workflow appear inactive when it isn't.
   • No clear reason why we would want a dedicated preparing badge/column, so merging this into submitted makes sense.

3. We should keep the icon dimensions constant irrespective of the number within them.

   • In order to maintain an easy to read grid structure.
   • Will get tricky to read if the grid is disrupted.
   • Maybe replace 99+ with just +?

[MetRonnie]

1. Can we remove the "succeeded" badge.

There is a disparity between the offline/mock mode and real life as succeeded tasks do not show in the sidebar in real life

3. We should keep the icon dimensions constant irrespective of the number within them.

I tend to disagree - these are badges not necessarily circles (though aesthetically they should be circles when at minimum width). E.g. see https://vuetifyjs.com/en/components/badges (though we couldn't use this as the colour blind theme relies on outlines which are not supported by v-badge)

[oliver-sanders]

We should keep the icon dimensions constant irrespective of the number within them.

I tend to disagree

Two reasons they should be circles:

• Analogy to task icons.
• To maintain a grid of status icons, it would become very hard to read if the grid was disrupted and the icons jumped around.

[MetRonnie]

I have copied the deltas from the current parallel suite and this is what it would look like. IMO easier to read as I have got rid of empty states

Edit: moved screenshots to OP

[oliver-sanders]

Aah, so you've also removed the empty states. Not so sure about that. The grid has monitoring and accessibility advantages.

[hjoliver]

Agreed this is a nice compromise between the status quo and what I tried to do on #1050. I don't like the fact that we chose to use job state icons for task states in the sidebar. This colours look good, but it definitely confuses users sometimes: "there's a bug in the GUI: my tree view has red failed tasks [jobs!] but the side bar is not highlighting them!". The monochromatic task state icons would not work for this kind of visual simplification though, and the badges on this branch are at least not identical to the job icons which makes it more legit to say they represent task states not job states.

I really like what @MetRonnie has done in the screen shot above - it is clean and simple, and only shows the important info. I don't think we should retain the grid - it is busy and cluttered by comparison. And ditching the grid allows badges that expand with the number of digits - which is more appealing than fat badges that likely have only single digits most of the time.

Parsing (by eye) the grid on the left is definitely more difficult. I don't see any great advantage to aligning all the states like that, when most of them are inactive most of the time.

Summary: IMO this PR is a clear win as-is.

[dwsutherland]

I was going to comment last week; having the number/count at a glance is a welcome improvement..

One thing, which is hinted by Hilary's 1050 proposal, and then skipped over with

Parsing (by eye) the grid on the left is definitely more difficult. I don't see any great advantage to aligning all the states like that, when most of them are inactive most of the time.

Is that; aligning had the advantage of being workable by those who aren't good/capable with colours (because you knew/learnt which column was associated with what state).

So, I don't know if it's something we need to consider, if it's not too difficult to make it optional then maybe we should?

Perhaps not square, if like the old/left, but at minimum invisible margins using the new and/or a faded/translucent circles with zero or no number (when no tasks of associated state)?

faded/translucent circles with zero or no number

Maybe this would be an easy win, so the ordered empty placeholders are always present (optionally).

[hjoliver]

IMO a rather unwieldy grid is not well justified by accessibility concerns for a small minority of users. Having to remember the column number of each state is pretty dire!

Better to make something clear and clean, and figure out how to tweak that for color-blindness - so how about exactly what @MetRonnie has done here, but (for color-blind theming) replace the job-state-color badges with task state icons with the number beside (or above, or partially overlapping, or whatever) instead of inside?

[oliver-sanders]

Not sure I get the issue with the grid, and colourblindness aside, I find the grid layout helpful.

But happy to be outvoted.

I don't think any docs changes are needed, however, it would be good to add a changes article for this.

[hjoliver]

Thanks @oliver-sanders :-)

[dwsutherland]

Having to remember the column number of each state is pretty dire!

Well, there's only 4 columns, so it'd be fairly automatic if you were used to looking at it this way.. But point taken.

It's not a big gripe, and doesn't effect our operational team

[hjoliver]

Consider this approved from a conceptual and functional perspective, but I haven't had a chance to look at the code yet...

[MetRonnie]

Note these task state badges follow the colour theme set in the user profile settings, just like job icons. So colour blindness has been taken care of.

[oliver-sanders]

Given @hjoliver's approval in principle, I'll take over as technical reviewer as we could really do with getting this into use.