Improve GScan filter menu

MetRonnie · MetRonnie · commit 2a7c98a5e4e6 · 2023-01-23T15:43:46.000Z
diff --git a/src/components/cylc/gscan/GScan.vue b/src/components/cylc/gscan/GScan.vue
@@ -37,64 +37,55 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           id="c-gscan-search-workflows"
         />
         <v-menu
-          v-model="showFilterTooltip"
+          v-model="showFilterMenu"
           :close-on-content-click="false"
           offset-x
         >
-          <!-- button to activate the filters tooltip -->
+          <!-- button to activate the filters menu -->
           <template v-slot:activator="{ on, attrs }">
-            <v-btn
-              v-bind="attrs"
-              v-on="on"
-              link
-              icon
-              class="flex-grow-0 flex-column"
-              id="c-gscan-filter-tooltip-btn"
-              @click="showFilterTooltip = !showFilterTooltip"
+            <v-badge
+              :content="numFilters"
+              :value="numFilters"
+              overlap
             >
-              <v-icon>{{ svgPaths.filter }}</v-icon>
-            </v-btn>
+              <v-btn
+                v-bind="attrs"
+                v-on="on"
+                link
+                icon
+                id="c-gscan-filter-menu-btn"
+                @click="showFilterMenu = !showFilterMenu"
+              >
+                <v-icon>{{ $options.icons.mdiFilter }}</v-icon>
+              </v-btn>
+            </v-badge>
           </template>
-          <!-- filters tooltip -->
-          <v-card
-            max-height="250px"
-          >
-            <v-list
-              dense
-            >
+          <!-- filters menu -->
+          <v-card width="500px">
+            <v-list dense>
               <div
-                v-for="filter in filters"
-                :key="filter.title"
+                v-for="(items, title) in filters"
+                :key="title"
               >
-                <v-list-item dense>
+                <v-list-item>
                   <v-list-item-content ma-0>
-                    <v-list-item-title>
-                      <v-checkbox
-                        :label="filter.title"
-                        :input-value="allItemsSelected(filter.items)"
-                        value
-                        dense
-                        hide-details
-                        hint="Toggle all"
-                        @click="toggleItemsValues(filter.items)"
-                      ></v-checkbox>
-                    </v-list-item-title>
-                  </v-list-item-content>
-                </v-list-item>
-                <v-divider />
-                <v-list-item
-                  v-for="item in filter.items"
-                  :key="`${filter.title}-${item.text}`"
-                  dense
-                >
-                  <v-list-item-action>
-                    <v-checkbox
-                      :label="item.text"
-                      v-model="item.model"
+                    <span class="mb-2">Filter by {{ title }}</span>
+                    <v-autocomplete
+                      v-model="filters[title]"
+                      :items="$options.allStates[title]"
+                      outlined
+                      chips
+                      deletable-chips
+                      small-chips
+                      clearable
+                      multiple
                       dense
-                      height="20"
-                    ></v-checkbox>
-                  </v-list-item-action>
+                      hide-details
+                      :menu-props="{ closeOnClick: true }"
+                      :clear-icon="$options.icons.mdiClose"
+                      :data-cy="`filter ${title}`"
+                    />
+                  </v-list-item-content>
                 </v-list-item>
               </div>
             </v-list>
@@ -200,9 +191,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { mdiFilter } from '@mdi/js'
-import uniq from 'lodash/uniq'
-import TaskState from '@/model/TaskState.model'
+import { mdiClose, mdiFilter } from '@mdi/js'
+import TaskState, { TaskStateUserOrder } from '@/model/TaskState.model'
 import { WorkflowState } from '@/model/WorkflowState.model'
 import Job from '@/components/cylc/Job'
 import Tree from '@/components/cylc/tree/Tree'
@@ -233,9 +223,6 @@ export default {
   data () {
     return {
       maximumTasksDisplayed: 5,
-      svgPaths: {
-        filter: mdiFilter
-      },
       /**
        * The filtered workflows. This is the result of applying the filters
        * on the workflows prop.
@@ -248,68 +235,20 @@ export default {
        */
       searchWorkflows: '',
       /**
-       * Variable to control whether the filters tooltip (a menu actually)
-       * is displayed or not (i.e. v-model=this).
+       * Whether the filters menu is displayed (i.e. v-model=this).
        * @type {boolean}
        */
-      showFilterTooltip: false,
+      showFilterMenu: false,
       /**
-       * List of filters to be displayed by the template, so that the user
-       * can filter the list of workflows.
-       *
-       * Each entry contains a title and a list of items. Each item contains
-       * the text attribute, which is used as display value in the template.
-       * The value attribute, which may be used if necessary, as it contains
-       * the original value (e.g. an Enum, while title would be some formatted
-       * string). Finally, the model is bound via v-model, and keeps the
-       * value selected in the UI (i.e. if the user checks the "running"
-       * checkbox, the model here will be true, if the user unchecks it,
-       * then it will be false).
-       *
-       * @type {[
-       *   {
-       *     title: string,
-       *     items: [{
-       *       text: string,
-       *       value: object,
-       *       model: boolean
-       *     }]
-       *   }
-       * ]}
+       * List of filters selected by the user.
+       * @type {{string: string[]}}
        */
-      filters: [
-        {
-          title: 'workflow state',
-          items: WorkflowState.enumValues
-            .map(state => {
-              return {
-                text: state.name,
-                value: state,
-                model: true
-              }
-            })
-        },
-        {
-          title: 'task state',
-          items: TaskState.enumValues.map(state => {
-            return {
-              text: state.name,
-              value: state,
-              model: false
-            }
-          }).sort((left, right) => {
-            return left.text.localeCompare(right.text)
-          })
-        }
-        // {
-        //   title: 'workflow host',
-        //   items: [] // TODO: will it be in state totals?
-        // },
-        // {
-        //   title: 'cylc version',
-        //   items: [] // TODO: will it be in state totals?
-        // }
-      ]
+      filters: {
+        'workflow state': [],
+        'task state': []
+        // 'workflow host': [], // TODO: will it be in state totals?
+        // 'cylc version': [] // TODO: will it be in state totals?
+      }
     }
   },
   computed: {
@@ -320,23 +259,8 @@ export default {
       }
       return sortedWorkflowTree(this.workflowTree)
     },
-    /**
-     * @return {Array<String>}
-     */
-    workflowStates () {
-      return this.filters[0]
-        .items
-        .filter(item => item.model)
-        .map(item => item.value.name)
-    },
-    /**
-     * @return {Array<String>}
-     */
-    taskStates () {
-      return uniq(this.filters[1]
-        .items
-        .filter(item => item.model)
-        .map(item => item.value.name))
+    numFilters () {
+      return Object.values(this.filters).flat().length
     }
   },
   watch: {
@@ -347,25 +271,19 @@ export default {
     filters: {
       deep: true,
       immediate: false,
-      handler: function (newVal) {
-        this.filteredWorkflows = this.filterHierarchically(this.workflows, this.searchWorkflows, this.workflowStates, this.taskStates)
-      }
+      handler: 'filterWorkflows'
     },
     /**
      * If the user changes the workflow name to search/filter,
      * then we apply the filters to the list of workflows.
      */
     searchWorkflows: {
       immediate: false,
-      handler: function (newVal) {
-        this.filteredWorkflows = this.filterHierarchically(this.workflows, newVal, this.workflowStates, this.taskStates)
-      }
+      handler: 'filterWorkflows'
     },
     workflows: {
       immediate: true,
-      handler: function () {
-        this.filteredWorkflows = this.filterHierarchically(this.workflows, this.searchWorkflows, this.workflowStates, this.taskStates)
-      }
+      handler: 'filterWorkflows'
     },
     filteredWorkflows: {
       immediate: true,
@@ -396,7 +314,14 @@ export default {
     }
   },
   methods: {
-    filterHierarchically,
+    filterWorkflows () {
+      this.filteredWorkflows = filterHierarchically(
+        this.workflows,
+        this.searchWorkflows,
+        this.filters['workflow state'],
+        this.filters['task state']
+      )
+    },
 
     /**
      * Return `true` iff all the items have been selected. `false` otherwise.
@@ -470,6 +395,20 @@ export default {
         return validValues.includes(entry[0])
       })
     }
+  },
+
+  // Misc options
+  icons: {
+    mdiClose,
+    mdiFilter
+  },
+  /**
+   * Lists of all the possible workflow and task states
+   * @type {{string: string[]}}
+   */
+  allStates: {
+    'workflow state': WorkflowState.enumValues.map(x => x.name),
+    'task state': TaskStateUserOrder.map(x => x.name)
   }
 }
 </script>
diff --git a/src/components/cylc/gscan/filters.js b/src/components/cylc/gscan/filters.js
@@ -28,42 +28,40 @@ export function filterByName (workflow, name) {
 
 /**
  * @private
- * @param stateTotals {Object} - object with the keys being states, and values the count
- * @return {Array<String>}
+ * @param {Object=} stateTotals - object with the keys being states, and values the count
+ * @return {string[]}
  */
 function getWorkflowStates (stateTotals) {
   const jobStates = JobState.enumValues.map(jobState => jobState.name)
+  // GraphQL will return all the task states possible in a workflow, but we
+  // only want the states that have an equivalent state for a job. So we filter
+  // out the states that do not exist for jobs, and that have active tasks in
+  // the workflow (no point keeping the empty states, as they are not to be
+  // displayed).
   return !stateTotals
     ? []
-    : Object
-      .entries(stateTotals)
-      .filter(stateTotal => {
-        // GraphQL will return all the task states possible in a workflow, but we
-        // only want the states that have an equivalent state for a job. So we filter
-        // out the states that do not exist for jobs, and that have active tasks in
-        // the workflow (no point keeping the empty states, as they are not to be
-        // displayed).
-        return jobStates.includes(stateTotal[0]) && stateTotal[1] > 0
-      })
-      .map(stateTotal => stateTotal[0])
+    : Object.keys(stateTotals)
+      .filter((state) => jobStates.includes(state) && stateTotals[state] > 0)
 }
 
 /**
  * @param {WorkflowGScanNode|WorkflowNamePartGScanNode} workflow
- * @param {Array<String>} workflowStates
- * @param {Array<String>} taskStates
+ * @param {string[]} workflowStates
+ * @param {string[]} taskStates
  * @returns {boolean}
  */
 export function filterByState (workflow, workflowStates, taskStates) {
   // workflow states
-  if (!workflowStates.includes(workflow.node.status)) {
+  if (
+    workflowStates.length && !workflowStates.includes(workflow.node.status)
+  ) {
     return false
   }
   // task states
-  if (taskStates.length > 0) {
-    const intersection = getWorkflowStates(workflow.node.stateTotals)
-      .filter(item => taskStates.includes(item))
-    return intersection.length !== 0
+  if (taskStates.length) {
+    return getWorkflowStates(workflow.node.stateTotals).some(
+      (item) => taskStates.includes(item)
+    )
   }
   return true
 }
@@ -78,24 +76,19 @@ export function filterByState (workflow, workflowStates, taskStates) {
  *
  * @param {WorkflowGScanNode|WorkflowNamePartGScanNode} workflow
  * @param {string} name
- * @param {Array<String>} workflowStates
- * @param {Array<String>} taskStates
+ * @param {string[]} workflowStates
+ * @param {string[]} taskStates
  * @return {boolean} - true if the workflow is accepted, false otherwise
  */
 function filterWorkflow (workflow, name, workflowStates, taskStates) {
-  let filtered = false
   // Filter by name.
-  if (name && name !== '') {
-    filtered = filterByName(workflow, name)
+  if (name && !filterByName(workflow, name)) {
     // Stop if we know that the name was not accepted.
-    if (!filtered) {
-      return filtered
-    }
+    return false
   }
   // Now filter using the provided list of states. We know that the name has been
   // accepted at this point.
-  filtered = filterByState(workflow, workflowStates, taskStates)
-  return filtered
+  return filterByState(workflow, workflowStates, taskStates)
 }
 
 /**
diff --git a/tests/e2e/specs/gscan.cy.js b/tests/e2e/specs/gscan.cy.js
