view toolbar: add search & filter functionality by oliver-sanders · Pull Request #2370 · cylc/cylc-ui

oliver-sanders · 2025-11-26T15:02:34Z

This adds task modifier filtering to the Tree & Table views as well as a bunch of related things:

centralise and improve task search and filter controls:
- Add functionality to the ViewToolbar component:
  - Add action=menu for dropdowns.
  - Add action=input for text input.
  - Allow icon=Object to configure state-dependent icons.
  - Reduce icon spacing and improve group divider.
- Move the task search & filter controls into the ViewToolbar component.
  - Switch the Tree and Table views over to the ViewToolbar.
  - Addresses View toolbar #471
- Improve the task state filter control:
  - Add support for task modifiers - closes filtering: task modifier filtering #1666
  - Collapse the control into a single button/menu (take up less space).
  - Reduce the width of the task search input, automatically increase
    this width when focused or when text is present in it.
tree: make the toolbar sticky
- Ensure the ViewToolbar doesn't scroll out of view.
- Closes Make filter controls "sticky" #991
view toolbar: support globs in task ID search
- Closes views: filter tasks by pattern #1264
vite: ignore nfs files
- These can cause vite to crash.
update caniuse-lite

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).
Does not contain off-topic changes (use other PRs for other changes).
Applied any dependency changes to both setup.cfg (and conda-environment.yml if present).
Tests are included (or explain why tests are not needed).
Changelog entry included if this is a change that can affect users
Cylc-Doc pull request opened if required at cylc/cylc-doc/pull/XXXX.
If this is a bug fix, PR should be raised against the relevant ?.?.x branch.

oliver-sanders · 2025-11-26T15:18:49Z

tests/e2e/specs/tree.cy.js

+    // it('Provides a select all functionality', () => {
+    //   cy.visit('/#/tree/one')
+    //   cy.get('[data-cy="control-taskStateFilter"]')
+    //     .get('.v-list-item--active')
+    //     .should('have.length', 0)
+    //   cy.get('[data-cy="control-taskStateFilter"]')
+    //     .click()
+    //     .get('[data-cy=task-filter-select-all]')
+    //     .click()
+    //   cy.get('[data-cy="control-taskStateFilter"]')
+    //     .get('.v-list-item--active')
+    //     .should('have.length', 8)
+    // })


Regression 😨, there's no select-all button any more.

This was kinda useful, though not as straight forward any more, as we would only want to select task states (not modifiers).

Closely related to #2209

Can attempt now if deemed critical enough, but maybe appropriate for followup in #2209?

I'm OK with leaving this out of this PR. Perhaps add a comment to explain why this is commented out?

Actually it's just occurred to me a deselect-all button would be useful?

oliver-sanders · 2025-11-26T15:26:02Z

src/views/Tree.vue

+  .toolbar {
+    position: sticky;
+    top: 0;
+    background: white;


Any better ideas than white? Some SCSS variable for the background color?

oliver-sanders · 2025-12-02T11:26:56Z

tests/e2e/specs/analysis.cy.js

  const numTasks = sortedTasks.length
  describe('Options save state', () => {
    beforeEach(() => {
+      localStorage.defaultView = 'Analysis'


Some of the tests in this file (and elsewhere) are searching for menu items in a relatively naive way.

Adding the task state menu to the tree view caused these tests to fail as they were selecting tree view filter controls from the other tab.

The tree view does not need to be open for these tests, so rather than opening the analysis view over the top (and deal with the consequences of having the tree view underneath), I just set it up to open the analysis view by default.

oliver-sanders · 2025-12-02T11:27:44Z

tests/e2e/specs/gantt.cy.js

    selectOption('#c-gantt-filter-job-name', 'c3')
    // Set task times filter option to something other than default ('Total times')
-    selectOption('#c-gantt-filter-job-timings', 'Queue')
+    selectOption('#c-gantt-filter-job-timings', 'Queue times')


Queue also matched the task state Queued item, expanded to Queue times to disambiguate.

oliver-sanders · 2025-12-02T11:28:59Z

tests/e2e/specs/tree.cy.js

-  it('should show a summary of tasks if the number of selected items is greater than the maximum limit', () => {
-    cy.visit('/#/tree/one')
-    cy.get('[data-cy="filter task state"]')
-      .click()
-    // eslint-disable-next-line no-lone-blocks
-    TaskState.enumValues.forEach(state => {
-      cy.get('.v-list-item')
-        .contains(state.name)
-        .click({ force: true })
-    })
-    // Click outside to close dropdown
-    cy.get('noscript')
-      .click({ force: true })
-    cy.get('[data-cy="filter task state"]')
-      .contains('.v-select__selection', '(+')
-  })
-


Functionality removal/modification, the task state filter no longer shows the filtered states, it just highlights the icon as "active" if filters are in play.

src/components/cylc/common/filter.js

src/views/Tree.vue

wxtim

Looks good 😄 - Can you address my comments (may well not be blockers).

MetRonnie

Partial review.

The task state filtering is well thought out, however I found one slight annoyance IMO with the waiting modifiers: clicking the drop down the first time only selects waiting without expanding the modifiers. After this first click does the expand/collapse work. Also it seems the modifiers remain selected after waiting is deselected.

20251204-1755-54.1473635.mp4

Ideally IMO the expansion would work off the bat, and clicking one of the modifiers would automatically select Waiting if it was not already

MetRonnie · 2025-12-04T16:23:10Z

src/components/cylc/ViewToolbar.vue

(Discussion to possibly take into another issue, not hold up this PR)

IMO this is becoming increasingly difficult to use. This single component controls the presentation and business logic of several input types, making it difficult to reason about how they are working.

In future, I think it would be worth extracting out the input types that are used here into their own SFCs, leaving this as a component that controls presentation and vuetify defaults, with a slot for allowing each view to set its controls (the more conventional way of using Vue components).

While I understand the idea behind this existing implementation (#1809 (comment)), the main advantage being having an object that contains the configuration that can be re-used in the settings page, this can still be achieved under what I'm proposing.

What do you think?

For another issue if you are sufficiently comfortable with this as it is here.

As it stands this is right at the edge of suitability for the current approach, agreed. Happy to look towards restructuring this code going forwards, e.g, something along the lines of the GraphQL form generator. Also if we end up taking this further in the future, a more model-orientated approach (hopefully removing the setOption callback) would be great.

I wouldn't like to see the complexity being decentralised back into the views (which one interpretation of the slots suggestion may result in), but there are defo other ways to do this.

With this PR I think the toolbar should do everything we need from it now and for the foreseeable (just need to add search & de-select all buttons for the graph view PR). So I don't think we should look into refactoring in the short/mid term (time better spent elsewhere). But if / when requirements start to become more advanced...

src/views/Tree.vue

tests/e2e/specs/analysis.cy.js

tests/e2e/specs/table.cy.js

oliver-sanders · 2025-12-08T11:23:52Z

Rebased.
Addressed review comments.
The expand button next to "waiting" is no longer disabled until "waiting" is selected. Instead, "waiting" is added to the selection if not present or erroneously removed.

TODO:

Investigate the scroll issue Tim reported. - resolved
Work out where the state attr has come from.

wxtim

Legit - tested as working. Code looks good. :)

src/components/cylc/ViewToolbar.vue

MetRonnie

Suggestion for simplifying some stuff at oliver-sanders#122

Couple of points on the glob matching:

How are users going to know that you can use globs?
Glob matching is not working in a weird way for the table view:

src/components/cylc/common/filter.js

wxtim

Reviewed changes since last review & happy

MetRonnie

Are you working on a "deselect all"/"clear filters" button? (#2370 (comment))

tests/unit/components/cylc/common/filter.spec.js

src/components/cylc/common/filter.js

oliver-sanders · 2025-12-15T16:14:23Z

Are you working on a "deselect all"/"clear filters" button?

~~Not actively. I will try if/when I get through other reviewing, etc.~~

On it.

tests/component/specs/viewToolbar.cy.js

tests/unit/components/cylc/common/filter.spec.js

oliver-sanders · 2025-12-16T14:08:39Z

Addressed comments (bar one).

Fixed a small pre-existing issue where the search feature was matching family names in the tree view even when families were turned off - 9028ce4

Added a filter "reset" button - https://github.com/cylc/cylc-ui/compare/14fc4ecea00adac5cb851b760a776b29d6af403e..9028ce44997134b59b8763d29cd5c7cb5969f77a

wxtim

I have re-re-re-reviewed!

oliver-sanders · 2025-12-17T12:03:21Z

tests/component/specs/viewToolbar.cy.js

+  it('filters task states', () => {
+    mountToolbar([
+      {
+        title: 'Group 1',
+        controls: [
+          {
+            title: 'Filter',
+            action: 'taskStateFilter',
+            value: [],
+            key: 'filter'
+          }
+        ]
+      },
+    ])


In recent changes I have fixed a reactivity issue (which means that the eager is no longer needed).

Unfortunately, that has broken this test. In order for this to work, we need to implement a setOption callback like we do in each view, i.e:

<ViewToolbar @setOption="setOption" />

I think the solution should be something along the lines of (see listeners in the Info View tests):

import { reactive } from 'vue' const model = reactive([]) mountToolbar({ props: { groups: [...] }, listeners: { setOption: (key, value) => { model = value } } })

However, I've so far been unable to get the setOption callback to fire (even though we know the event has been emitted by inspecting the wrapper).

IMO happy to skip component test on this (at least for time being). Also you might be testing implementation details that are likely to change - #2370 (comment)

I wouldn't like to see a regression where these components move back into the views, so wouldn't expect implementation details to change here as a result of a refactor. Would be thinking more along the lines of the GraphQL form generator, or the Jupyter Lab toolbar plugin (i.e, framework pattern rather than library pattern).

Note, any refactor would be quite distant, so this will stand for a while.

Can't find a working solution to implementing listeners right now so have removed the test.

tests/e2e/specs/tree.cy.js

* Add functionality to the ViewToolbar component: * Add `action=menu` for dropdowns. * Add `action=input` for text input. * Allow `icon=Object` to configure state-dependent icons. * Reduce icon spacing and improve group divider. * Move the task search & filter controls into the ViewToolbar component. * Switch the Tree and Table views over to the ViewToolbar. * Addresses cylc#471 * Improve the task state filter control: * Add support for task modifiers - closes cylc#1666 * Collapse the control into a single button/menu (take up less space). * Reduce the width of the task search input, automatically increase this width when focused or when text is present in it.

* Ensure the ViewToolbar doesn't scroll out of view. * Closes cylc#991

* Closes cylc#1264

* These can cause vite to crash.

Co-authored-by: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>

tests/e2e/specs/tree.cy.js

Co-authored-by: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>

wxtim

I'm still happy with this!

oliver-sanders added this to the 2.12.0 milestone Nov 26, 2025

oliver-sanders self-assigned this Nov 26, 2025

oliver-sanders commented Nov 26, 2025

View reviewed changes

oliver-sanders marked this pull request as draft November 26, 2025 15:33

oliver-sanders force-pushed the view-toolbar++ branch from 95ea7cd to 7e782da Compare December 2, 2025 11:22

oliver-sanders commented Dec 2, 2025

View reviewed changes

oliver-sanders force-pushed the view-toolbar++ branch from 7e782da to 749981e Compare December 2, 2025 11:32

oliver-sanders marked this pull request as ready for review December 2, 2025 11:41

oliver-sanders requested review from MetRonnie and wxtim December 2, 2025 11:41

wxtim reviewed Dec 3, 2025

View reviewed changes

src/components/cylc/common/filter.js Show resolved Hide resolved

wxtim reviewed Dec 3, 2025

View reviewed changes

src/views/Tree.vue Outdated Show resolved Hide resolved

wxtim reviewed Dec 3, 2025

View reviewed changes

MetRonnie reviewed Dec 4, 2025

View reviewed changes

oliver-sanders force-pushed the view-toolbar++ branch from 58ebcf1 to d8c27bf Compare December 8, 2025 11:20

oliver-sanders force-pushed the view-toolbar++ branch 2 times, most recently from 2d2ce01 to 0ac3128 Compare December 8, 2025 13:49

oliver-sanders requested a review from wxtim December 8, 2025 13:49

wxtim approved these changes Dec 9, 2025

View reviewed changes

src/components/cylc/ViewToolbar.vue Show resolved Hide resolved

oliver-sanders force-pushed the view-toolbar++ branch from 0ac3128 to ddd6bc3 Compare December 9, 2025 13:28

oliver-sanders requested a review from MetRonnie December 9, 2025 13:29

MetRonnie reviewed Dec 9, 2025

View reviewed changes

src/components/cylc/common/filter.js Outdated Show resolved Hide resolved

src/components/cylc/common/filter.js Outdated Show resolved Hide resolved

src/components/cylc/common/filter.js Outdated Show resolved Hide resolved

oliver-sanders force-pushed the view-toolbar++ branch from ddd6bc3 to 90841e3 Compare December 10, 2025 15:30

This comment was marked as resolved.

Sign in to view

oliver-sanders force-pushed the view-toolbar++ branch from 90841e3 to fc38f0c Compare December 10, 2025 16:05

This comment was marked as resolved.

Sign in to view

oliver-sanders mentioned this pull request Dec 15, 2025

browser compatibility check broken #2384

Open

wxtim approved these changes Dec 15, 2025

View reviewed changes

MetRonnie reviewed Dec 15, 2025

View reviewed changes

tests/unit/components/cylc/common/filter.spec.js Outdated Show resolved Hide resolved

src/components/cylc/common/filter.js Outdated Show resolved Hide resolved

MetRonnie reviewed Dec 15, 2025

View reviewed changes

tests/component/specs/viewToolbar.cy.js Outdated Show resolved Hide resolved

tests/unit/components/cylc/common/filter.spec.js Outdated Show resolved Hide resolved

oliver-sanders force-pushed the view-toolbar++ branch from c1764a0 to 14fc4ec Compare December 16, 2025 13:02

This comment was marked as outdated.

Sign in to view

oliver-sanders force-pushed the view-toolbar++ branch from 14fc4ec to 9028ce4 Compare December 16, 2025 14:07

wxtim requested a review from MetRonnie December 17, 2025 11:40

wxtim approved these changes Dec 17, 2025

View reviewed changes

oliver-sanders commented Dec 17, 2025

View reviewed changes

oliver-sanders mentioned this pull request Dec 17, 2025

ViewToolbar: switch to "branch" stratgegy for tree menus #2388

Open

MetRonnie reviewed Dec 17, 2025

View reviewed changes

tests/e2e/specs/tree.cy.js Outdated Show resolved Hide resolved

oliver-sanders added 6 commits December 18, 2025 10:06

tree: make the toolbar sticky

8a7455b

* Ensure the ViewToolbar doesn't scroll out of view. * Closes cylc#991

view toolbar: support globs in task ID search

3bf0958

* Closes cylc#1264

vite: ignore nfs files

706927d

* These can cause vite to crash.

update caniuse-lite

914c170

tree: prevent family searching when in flat mode

8ede99b

oliver-sanders force-pushed the view-toolbar++ branch from 9028ce4 to 8ede99b Compare December 18, 2025 10:19

Update tests/e2e/specs/tree.cy.js

51b4216

Co-authored-by: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>

oliver-sanders requested a review from MetRonnie December 18, 2025 10:21

MetRonnie reviewed Dec 18, 2025

View reviewed changes

tests/e2e/specs/tree.cy.js Outdated Show resolved Hide resolved

tests/e2e/specs/tree.cy.js Outdated Show resolved Hide resolved

Apply suggestions from code review

13bd1f6

Co-authored-by: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>

MetRonnie approved these changes Dec 19, 2025

View reviewed changes

wxtim approved these changes Dec 19, 2025

View reviewed changes

wxtim merged commit 87344a7 into cylc:master Dec 19, 2025
7 checks passed

oliver-sanders deleted the view-toolbar++ branch December 19, 2025 14:52

MetRonnie mentioned this pull request Feb 17, 2026

Refactor ViewToolbar component #2472

Open

5 tasks

Conversation

oliver-sanders commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oliver-sanders Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliver-sanders Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliver-sanders Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

wxtim left a comment

Choose a reason for hiding this comment

Uh oh!

MetRonnie left a comment

Choose a reason for hiding this comment

Uh oh!

MetRonnie Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliver-sanders Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

oliver-sanders commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wxtim left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MetRonnie left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

This comment was marked as resolved.

wxtim left a comment

Choose a reason for hiding this comment

Uh oh!

MetRonnie left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

oliver-sanders commented Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

oliver-sanders commented Dec 16, 2025

Uh oh!

wxtim left a comment

Choose a reason for hiding this comment

Uh oh!

oliver-sanders commented Nov 26, 2025 •

edited

Loading

oliver-sanders Nov 26, 2025 •

edited

Loading

oliver-sanders Nov 26, 2025 •

edited

Loading

oliver-sanders Dec 2, 2025 •

edited

Loading

MetRonnie Dec 4, 2025 •

edited

Loading

oliver-sanders Dec 5, 2025 •

edited

Loading

oliver-sanders commented Dec 8, 2025 •

edited

Loading

oliver-sanders commented Dec 15, 2025 •

edited

Loading

oliver-sanders Dec 18, 2025 •

edited

Loading