Dot (LED) View

[kinow]

Part of #75 , we need to implement a view similar to Cylc 7's Dot (aka LED) view.

In the screenshot above, the dot view is the right part.

Note on related issues:

• Colour coded task names in dot view

[kinow]

@sadielbartholomew shared this on Riot:

this Vue component looks very relevant: https://github.com/tnhu/status-indicator. They support 'pulsing' dots, perhaps our tasks could pulse or similar for a set amount fo time after a change in state, so users can be aware of changes?

And I think the option to highlight what changed is important, and will be applicable not only to this view. :+1:

[sadielbartholomew]

@kinow I am going to make a start on this, if that is okay (nobody else is working on it)?

[kinow]

Go for it Sadie! 😀

[hjoliver]

@sadielbartholomew - contradicting my :+1: above somewhat, we decided during our Gantt Chart session in Exeter that the Dot View is quite low priority and marked it as ..? starting in Dec 2019. I'm not entirely averse to revisiting that decision, but perhaps we should consider opportunities to collaborate on the tree or graph views first, or other critical-path bits? (Unfortunately I don't have much time to think about that myself before disappearing on 5 day family holiday this week, but others might have an opinion...).

[hjoliver]

(I only just realised today that I hadn't pushed up the Gantt chart changes while in Exeter, sorry - now in https://github.com/cylc/cylc-admin/pull/36)

[sadielbartholomew]

@sadielbartholomew - contradicting my 👍 above somewhat, we decided during our Gantt Chart session in Exeter that the Dot View is quite low priority and marked it as ..? starting in Dec 2019. I'm not entirely averse to revisiting that decision, but perhaps we should consider opportunities to collaborate on the tree or graph views first, or other critical-path bits? (Unfortunately I don't have much time to think about that myself before disappearing on 5 day family holiday this week, but others might have an opinion...).

Hi @hjoliver, fair & true, but I am awaiting a more major task to be assigned so want to get something done, even just to get myself more familiar with the UI code & Vue. I have actually started this weekend & with the Tree there for reference I am halfway there already. I will put in a PR this week (though am giving user training all day today and tomorrow, so that will mean I can't continue for a few days).

Have a lovely holiday! I hope to have the dot view ready for you to see when you return :crossed_fingers:.

[hjoliver]

OK, that's cool :+1: - thanks :grin:

[kinow]

Question on the new Dot View. Are we keeping the same behaviour as before? For example, when you have multiple parent families, the Dot view displays only the top most family, skipping root.

[kinow]

I think a simple plan for this would be to use the Vuetify Data table with the data from the Tree component (if possible).

For the top header cells that have a different orientation, then try CSS text-orientation, though that may leave some weird edges around the text.

And for the left first column (which is a kind of header or subheader) we could use the Vuetify TreeView component as well to display family hierarchy.

[hjoliver]

Are we keeping the same behaviour as before?

Yes, unless anyone is aware of behaviour we don't want.

For example, when you have multiple parent families, the Dot view displays only the top most family, skipping root.

Yes, no need to collapse down to root - it's the same as the tree view in that respect.

[kinow]

For example, when you have multiple parent families, the Dot view displays only the top most family, skipping root.

Yes, no need to collapse down to root - it's the same as the tree view in that respect.

Ah, got it. I was more curious about the difference between Tree view and Dot view. The Tree view gives you the complete hierarchy all the way up to the first child of root.

But the dot view does not show the first parent (which we have in the GraphQL response and JS structure), but instead I think it displays only the first child of root in the hierarchy, i.e. foo and bar have the firstParent FAM3 in the tree view, but in the dot view you see FAM only (grand-parent of FAM3)

[kinow]

Work started, using branch https://github.com/kinow/cylc-ui/tree/add-dot-view. PR should be ready either this week, or next week. It will be a direct port of the previous Dot view. There are good ideas in #128, that can be raised as follow up PRs later :+1:

Not much yet, but it will slowly look more like the previous dot view.

[hjoliver]

Ah, sorry I misunderstood at first. You're right, the old dot view only shows top level families (for a long time it didn't show families at all). However that's a deficiency; we do really want to see the full family hierarchy: https://github.com/cylc/cylc-ui/issues/48

[kinow]

I wasn't clear before, sorry - I re-read and tried to explain again.

However that's a deficiency; we do really want to see the full family hierarchy: #48

Excellent! I think it is actually easier to just get tree hierarchy and use in the dot view. Which would fix #48 🎉

Thanks!

[kinow]

writing-mode + text-orientation didn't work. Interestingly, all the examples aligned the text opposite to how it looked on pygtk cylc 7. Then found this post, where they used transform: rotate(180) 🥇

Maybe in the diagonal the text would be easier to read, but we would have to adjust spacing, and remove borders. Good enough for now, but it may need some refining later.

[kinow]

Paused work just until #291 is in, so that the Dot component has the hierarchy with families created too (realized it was missing last Friday)