Enhance filtering in Analysis tab (#2154)

Author: ChrisPaulBennett

src/components/cylc/analysis/filter.js

@@ -26,9 +26,12 @@
  * @return {boolean} Boolean determining if task should be displayed
  */
 export function matchTask (task, tasksFilter) {
-  let ret = true
-  if (tasksFilter.name?.trim()) {
-    ret &&= task.name.includes(tasksFilter.name)
+  let ret = false
+  if (tasksFilter.name?.length) {
+    ret = tasksFilter.name.some((name) => task.name === name)
+  } else {
+    // If no name filter is applied, show all tasks
+    ret = true
   }
   if (tasksFilter.platformOption.trim?.()) {
     ret &&= task.platform === tasksFilter.platformOption

src/views/Analysis.vue

@@ -28,12 +28,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           md="4"
           class="pr-md-2 mb-2 mb-md-0"
         >
-          <v-text-field
+          <v-combobox
             id="c-analysis-filter-task-name"
             clearable
+            chips
+            multiple
+            closable-chips
             placeholder="Filter by task name"
-            v-model.trim="tasksFilter.name"
+            v-model="tasksFilter.name"
             ref="filterNameInput"
+            :items="this.tasks.map(task => task.name)"
             :disabled="chartType === 'timeSeries'"
           />
         </v-col>
@@ -259,7 +263,7 @@ export default {
      * The task name, timing option and platform filter state.
      * @type {import('vue').Ref<object>}
      */
-    const tasksFilter = useInitialOptions('tasksFilter', { props, emit }, { name: '', timingOption: 'totalTimes', platformOption: -1 })
+    const tasksFilter = useInitialOptions('tasksFilter', { props, emit }, { name: [], timingOption: 'totalTimes', platformOption: -1 })
 
     /**
      * Determines the Analysis type ('table' | 'box' | 'timeSeries')

tests/e2e/specs/analysis.cy.js

@@ -63,7 +63,10 @@ describe('Analysis view', () => {
           .should('be.visible')
         cy
           .get('#c-analysis-filter-task-name')
-          .type('wait')
+          .click()
+          .get('.v-list-item')
+          .contains('waiting')
+          .click({ force: true })
         cy
           .get('td')
           .contains('waiting')
@@ -181,7 +184,10 @@ describe('Analysis view', () => {
         // Show task names containing 'wait'
         cy
           .get('#c-analysis-filter-task-name')
-          .type('wait')
+          .click()
+          .get('.v-list-item')
+          .contains('waiting')
+          .click({ force: true })
         cy
           .get('td')
           .contains('waiting')
@@ -462,7 +468,10 @@ describe('Filters and Options save state', () => {
       // Set queue task name filter options
       cy
         .get('#c-analysis-filter-task-name')
-        .type('wait')
+        .click()
+        .get('.v-list-item')
+        .contains('waiting')
+        .click({ force: true })
 
       // Set task times filter options
       cy

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

@@ -28,10 +28,10 @@ describe('matchTask', () => {
 
   it('should match with default or matching filter values', () => {
     const filters = [
-      { name: '', platformOption: -1 },
-      { name: 'task_name', platformOption: -1 },
-      { name: '', platformOption: 'task_platform' },
-      { name: 'task_name', platformOption: 'task_platform' }
+      { name: [], platformOption: -1 },
+      { name: ['task_name'], platformOption: -1 },
+      { name: [], platformOption: 'task_platform' },
+      { name: ['task_name'], platformOption: 'task_platform' }
     ]
     filters.forEach(filter => {
       expect(matchTask(task, filter)).to.equal(true)
@@ -40,33 +40,14 @@ describe('matchTask', () => {
 
   it('should not match if at least one of the filter options does not match', () => {
     const filters = [
-      { name: 'task_name', platformOption: 'wrong_platform' },
-      { name: 'wrong_task', platformOption: 'task_platform' },
-      { name: 'wrong_task', platformOption: 'wrong_platform' }
+      { name: ['task_name'], platformOption: 'wrong_platform' },
+      { name: ['wrong_task'], platformOption: 'task_platform' },
+      { name: ['wrong_task'], platformOption: 'wrong_platform' }
     ]
     filters.forEach(filter => {
       expect(matchTask(task, filter)).to.equal(false)
     })
   })
-
-  it('should allow partial matches of names but not platforms', () => {
-    const filterNames = [
-      { name: 'task_', platformOption: -1 },
-      { name: '_name', platformOption: -1 },
-      { name: 'sk_na', platformOption: -1 }
-    ]
-    const filterPlatforms = [
-      { name: '', platformOption: 'platform' },
-      { name: '', platformOption: 'form_1' },
-      { name: '', platformOption: 'form' }
-    ]
-    filterNames.forEach(filter => {
-      expect(matchTask(task, filter)).to.equal(true)
-    })
-    filterPlatforms.forEach(filter => {
-      expect(matchTask(task, filter)).to.equal(false)
-    })
-  })
 })
 
 describe('platformOptions', () => {