Updates to View filtering, and table display and functionality #861

AaronDCole · 2021-11-29T06:02:47Z

This merge request updates the design and functionality of the table and tree views. It includes;

removed the requirement to manually 'submit' filtering options in the filter bar
fixed the filter bar to the top of the Lumino container in the table view
added a new column with a dropdown toggle to the task rows (if they have current jobs)
modified the table data store to include information about the jobs relating to the current task (and add, update and remove as instructed via delta changes)
modified the table to list the task jobs' when the jobs dropdown toggle is applied
fixed the display of the 'layered' task status icon
added the job status icon and submission number in the job rows
updated the respective tests

These changes partially address #471
These changes:

close Instant filtering (by task name/state) #853
close Workflow Table View component #631
This is a small change with no associated Issue.

Requirements check-list

I have read CONTRIBUTING.md and added my name as a Code Contributor.
Contains logically grouped changes (else tidy your branch by rebase).

Already covered by existing tests.

Appropriate change log entry included.

No documentation update required.

codecov-commenter · 2021-11-29T06:04:47Z

Codecov Report

Merging #861 (480a8d5) into master (1dd6dd1) will decrease coverage by 0.60%.
The diff coverage is 66.10%.

@@            Coverage Diff             @@
##           master     #861      +/-   ##
==========================================
- Coverage   91.24%   90.63%   -0.61%     
==========================================
  Files          92       92              
  Lines        1930     1986      +56     
  Branches      114      146      +32     
==========================================
+ Hits         1761     1800      +39     
- Misses        143      160      +17     
  Partials       26       26

Flag	Coverage Δ
e2e	`76.68% <8.47%> (-1.87%)`	⬇️
unittests	`78.19% <20.33%> (-2.10%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
src/components/cylc/Drawer.vue	`75.00% <ø> (ø)`
src/components/cylc/gscan/GScan.vue	`93.75% <ø> (ø)`
src/components/cylc/tree/Tree.vue	`86.76% <0.00%> (+1.91%)`	⬆️
src/views/Table.vue	`100.00% <ø> (ø)`
src/views/Tree.vue	`100.00% <ø> (ø)`
src/views/Workflow.vue	`92.85% <ø> (ø)`
src/components/cylc/table/Table.vue	`77.27% <66.66%> (-22.73%)`	⬇️
src/components/cylc/table/deltas.js	`81.33% <75.00%> (-1.75%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1dd6dd1...480a8d5. Read the comment docs.

AaronDCole · 2021-12-01T20:26:00Z

rebuild

hjoliver · 2021-12-06T02:30:40Z

Looks good @AaronDCole.

Since you make the filter bar sticky on the table view, and got rid of the Filter button on both views, could you also make it sticky on the tree view?

Also, column sort (via clicking on the heading) would be an uncontroversial thing to get working before the (yet-to-be-arranged) meeting on the table view.

hjoliver · 2021-12-06T19:57:19Z

Also, job expansion would probably be better on the left, near the task icons, rather than off to the far right.

hjoliver

Partially reviewed. Looks good, a couple of minor comments so far.

src/components/cylc/Drawer.vue

src/components/cylc/table/Table.vue

hjoliver

Looks good to me!

MetRonnie · 2022-01-18T11:00:54Z

I've noticed when clicking the "x" in the text field to clear the filtering by task name, nothing happens / the view doesn't update.

~~Also the job colours aren't always correct in the task row - I'm seeing turquoise and orange for some reason~~ Actually this is only the case for the mock data when you do yarn serve

src/components/cylc/table/Table.vue

MetRonnie · 2022-01-18T13:57:40Z

A couple more issues:

Vertical scrollbars have gone missing from the Tree and Table views
Clicking on the column defaults to sorting in descending order, which is counter-intuitive. Also I think an arrow icon makes more sense than a chevron for indicating sorting (chevron is better suited for expand/collapse imho)

But overall a nice improvement 👍

wxtim · 2022-01-18T16:13:13Z

I've removed myself as a reviewer, I got sidetracked into playing with Slurm Job Arrays.

… view. Made the table view scroll while keeping the filter inputs at the top of the container. Added expandable rows to show jobs relating to an active task. Modified the table store to track jobs relaxing to task proxies.

…ch job row (but disabled for now). Fixed a small bug with pruning the jobs from the task proxies.

…l job states

… longer possible

…d tree tests

…caused by the onchange handler working inconsistently, so Ive changed it to an 'onkeyup' event

Disabled the default (and broken) data-table header Made both the table and tree view full width within their containers Made the tree scroll within the container with static header

AaronDCole · 2022-01-20T02:24:40Z

I've noticed when clicking the "x" in the text field to clear the filtering by task name, nothing happens / the view doesn't update.

~~Also the job colours aren't always correct in the task row - I'm seeing turquoise and orange for some reason~~ Actually this is only the case for the mock data when you do yarn serve

I cant actually reproduce this, and I 'think' the orange color might be intentional. The other issues were all valid and Ill push fixes to them in a few minutes.

Fixed issue where clearing filters wouldn't trigger data refresh. Replaced the svg html markup with a reference to the materials icons. Changed the default column sort direction. Changed column sort icon to arrow instead of chevron.

src/components/cylc/table/Table.vue

src/components/cylc/tree/Tree.vue

src/styles/index.scss

Leave overflow on auto so scrollbars automatically appear if needed in tree/table views

MetRonnie · 2022-01-27T12:40:29Z

Strange thing happened when testing this out. I was running a simple workflow

[scheduling]
    cycling mode = integer
    runahead limit = P3
    [[graph]]
        P1 = foo
[runtime]
    [[foo]]
        script = """
            sleep 2
            if (( $RANDOM % 2 )); then exit 1; else exit 0; fi
        """

and triggering */foo a few times using the UI when

Received a Table delta before the workflow initial data burst

While I got this error, meanwhile the failed tasks I was triggering succeeded and the workflow shut down, even though there is no final cycle point

INFO - Workflow shutting down - AUTOMATIC
INFO - DONE

I have been able to reproduce several times

MetRonnie · 2022-01-27T13:03:12Z

Ok so

the "Received a Table delta before the workflow initial data burst" error I also get on the table view for master: Received a Table delta before the workflow initial data burst #903
the workflow shutting down seems to be a bug in cylc-flow: Triggering runahead tasks causes workflow to finish early cylc-flow#4619

* Allow circular-dependency-plugin to work on Windows * Tidy * Fix typo * e2e test: bring back necessary wait * Try to fix graphiql e2e test flakiness * Revert some unwanted changes from #861 * Fix tree/table view alignment issues * Update changelog

AaronDCole requested a review from hjoliver November 29, 2021 06:02

hjoliver mentioned this pull request Nov 29, 2021

Instant filtering (by task name/state) #853

Closed

hjoliver assigned AaronDCole Nov 29, 2021

hjoliver modified the milestones: 1.0, 1.x Nov 29, 2021

AaronDCole force-pushed the views-updates branch from 7dbf0fa to 0013132 Compare December 1, 2021 06:13

This was referenced Dec 7, 2021

2021 Cylc Meetings cylc/cylc-admin#139

Closed

Workflow Table View component #631

Closed

hjoliver reviewed Dec 10, 2021

View reviewed changes

src/components/cylc/Drawer.vue Outdated Show resolved Hide resolved

src/components/cylc/table/Table.vue Show resolved Hide resolved

src/components/cylc/table/Table.vue Outdated Show resolved Hide resolved

hjoliver approved these changes Dec 14, 2021

View reviewed changes

AaronDCole force-pushed the views-updates branch from 28223d0 to 662f07c Compare January 16, 2022 23:34

hjoliver mentioned this pull request Jan 17, 2022

2022 Cylc Meetings cylc/cylc-admin#143

Closed

wxtim self-requested a review January 17, 2022 09:10

MetRonnie self-requested a review January 17, 2022 22:00

MetRonnie reviewed Jan 18, 2022

View reviewed changes

src/components/cylc/table/Table.vue Outdated Show resolved Hide resolved

MetRonnie mentioned this pull request Jan 18, 2022

Vertical scroll bar for tree/table views #886

Closed

wxtim removed their request for review January 18, 2022 16:11

AaronDCole added 5 commits January 19, 2022 14:19

Added the same task and cycle point info as the main task proxy to ea…

ed7377c

…ch job row (but disabled for now). Fixed a small bug with pruning the jobs from the task proxies.

Enabled the stacked status display on the table view, added individua…

1ea11a5

…l job states

Fixed tests

8eb2298

Removed components of test which were checking filtering functions no…

1ba72d8

… longer possible

AaronDCole added 5 commits January 19, 2022 14:19

Added small timeout allowance for instant filtering check in table an…

c4f6401

…d tree tests

Final attempt to fix the failing flaky tests. This issue is actually …

52d55a8

…caused by the onchange handler working inconsistently, so Ive changed it to an 'onkeyup' event

First hack at enabling column sorting on the table view

ddb64e1

Disabled the default (and broken) data-table header Made both the table and tree view full width within their containers Made the tree scroll within the container with static header

Fixed the gscan component not showing the workflows correctly

81b7b24

Small update to change the filtering of the cycle-point to alphanumeric

5f49693

Returned scroll bars on table and tree components.

8983d27

Fixed issue where clearing filters wouldn't trigger data refresh. Replaced the svg html markup with a reference to the materials icons. Changed the default column sort direction. Changed column sort icon to arrow instead of chevron.

AaronDCole force-pushed the views-updates branch from 662f07c to 8983d27 Compare January 20, 2022 02:30

MetRonnie reviewed Jan 20, 2022

View reviewed changes

src/components/cylc/table/Table.vue Outdated Show resolved Hide resolved

src/components/cylc/tree/Tree.vue Outdated Show resolved Hide resolved

src/styles/index.scss Outdated Show resolved Hide resolved

Apply suggestions from code review

480a8d5

Leave overflow on auto so scrollbars automatically appear if needed in tree/table views

MetRonnie approved these changes Jan 27, 2022

View reviewed changes

MetRonnie merged commit f193445 into master Jan 27, 2022

MetRonnie deleted the views-updates branch January 27, 2022 13:03

MetRonnie modified the milestones: 1.x, 1.0 Jan 27, 2022

MetRonnie mentioned this pull request Apr 8, 2022

Make filter controls "sticky" #991

Open

MetRonnie added a commit to MetRonnie/cylc-ui that referenced this pull request Dec 23, 2022

Revert some unwanted changes from cylc#861

1de0b0e

MetRonnie added a commit to MetRonnie/cylc-ui that referenced this pull request Dec 23, 2022

Revert some unwanted changes from cylc#861

253bd0c

MetRonnie added a commit to MetRonnie/cylc-ui that referenced this pull request Jan 11, 2023

Revert some unwanted changes from cylc#861

62e160d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updates to View filtering, and table display and functionality #861

Updates to View filtering, and table display and functionality #861

AaronDCole commented Nov 29, 2021 •

edited by wxtim

Loading

codecov-commenter commented Nov 29, 2021 •

edited

Loading

AaronDCole commented Dec 1, 2021

hjoliver commented Dec 6, 2021

hjoliver commented Dec 6, 2021

hjoliver left a comment

hjoliver left a comment

MetRonnie commented Jan 18, 2022 •

edited

Loading

MetRonnie commented Jan 18, 2022

wxtim commented Jan 18, 2022

AaronDCole commented Jan 20, 2022

MetRonnie commented Jan 27, 2022 •

edited

Loading

MetRonnie commented Jan 27, 2022 •

edited

Loading

Updates to View filtering, and table display and functionality #861

Updates to View filtering, and table display and functionality #861

Conversation

AaronDCole commented Nov 29, 2021 • edited by wxtim Loading

codecov-commenter commented Nov 29, 2021 • edited Loading

Codecov Report

AaronDCole commented Dec 1, 2021

hjoliver commented Dec 6, 2021

hjoliver commented Dec 6, 2021

hjoliver left a comment

Choose a reason for hiding this comment

hjoliver left a comment

Choose a reason for hiding this comment

MetRonnie commented Jan 18, 2022 • edited Loading

MetRonnie commented Jan 18, 2022

wxtim commented Jan 18, 2022

AaronDCole commented Jan 20, 2022

MetRonnie commented Jan 27, 2022 • edited Loading

MetRonnie commented Jan 27, 2022 • edited Loading

AaronDCole commented Nov 29, 2021 •

edited by wxtim

Loading

codecov-commenter commented Nov 29, 2021 •

edited

Loading

MetRonnie commented Jan 18, 2022 •

edited

Loading

MetRonnie commented Jan 27, 2022 •

edited

Loading

MetRonnie commented Jan 27, 2022 •

edited

Loading