From 98de0108110e51df4ef8691609686d83537c694a Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Thu, 19 Sep 2024 11:58:29 +0900
Subject: [PATCH] Fix node searchbox filter removal (#881)

---
 browser_tests/ComfyPage.ts                    | 48 +++++++++++++++++++
 browser_tests/nodeSearchBox.spec.ts           | 24 ++++++++++
 .../searchbox/NodeSearchBoxPopover.vue        |  6 ++-
 src/components/searchbox/NodeSearchFilter.vue |  8 +++-
 4 files changed, 83 insertions(+), 3 deletions(-)

diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts
index 2166fbd1f..fbf8e0a1c 100644
--- a/browser_tests/ComfyPage.ts
+++ b/browser_tests/ComfyPage.ts
@@ -15,9 +15,37 @@ interface Size {
   height: number
 }
 
+class ComfyNodeSearchFilterSelectionPanel {
+  constructor(public readonly page: Page) {}
+
+  async selectFilterType(filterType: string) {
+    await this.page
+      .locator(
+        `.filter-type-select .p-togglebutton-label:has-text("${filterType}")`
+      )
+      .click()
+  }
+
+  async selectFilterValue(filterValue: string) {
+    await this.page.locator('.filter-value-select .p-select-dropdown').click()
+    await this.page
+      .locator(
+        `.p-select-overlay .p-select-list .p-select-option-label:text-is("${filterValue}")`
+      )
+      .click()
+  }
+
+  async addFilter(filterValue: string, filterType: string) {
+    await this.selectFilterType(filterType)
+    await this.selectFilterValue(filterValue)
+    await this.page.locator('.p-button-label:has-text("Add")').click()
+  }
+}
+
 class ComfyNodeSearchBox {
   public readonly input: Locator
   public readonly dropdown: Locator
+  public readonly filterSelectionPanel: ComfyNodeSearchFilterSelectionPanel
 
   constructor(public readonly page: Page) {
     this.input = page.locator(
@@ -26,6 +54,11 @@ class ComfyNodeSearchBox {
     this.dropdown = page.locator(
       '.comfy-vue-node-search-container .p-autocomplete-list'
     )
+    this.filterSelectionPanel = new ComfyNodeSearchFilterSelectionPanel(page)
+  }
+
+  get filterButton() {
+    return this.page.locator('.comfy-vue-node-search-container ._filter-button')
   }
 
   async fillAndSelectFirstNode(
@@ -43,6 +76,21 @@ class ComfyNodeSearchBox {
       .nth(options?.suggestionIndex || 0)
       .click()
   }
+
+  async addFilter(filterValue: string, filterType: string) {
+    await this.filterButton.click()
+    await this.filterSelectionPanel.addFilter(filterValue, filterType)
+  }
+
+  get filterChips() {
+    return this.page.locator(
+      '.comfy-vue-node-search-container .p-autocomplete-chip-item'
+    )
+  }
+
+  async removeFilter(index: number) {
+    await this.filterChips.nth(index).locator('.p-chip-remove-icon').click()
+  }
 }
 
 class NodeLibrarySidebarTab {
diff --git a/browser_tests/nodeSearchBox.spec.ts b/browser_tests/nodeSearchBox.spec.ts
index 07c1cf62b..c2529e57a 100644
--- a/browser_tests/nodeSearchBox.spec.ts
+++ b/browser_tests/nodeSearchBox.spec.ts
@@ -103,6 +103,30 @@ test.describe('Node search box', () => {
     await comfyPage.page.waitForTimeout(256)
     await expect(comfyPage.searchBox.input).not.toHaveCount(0)
   })
+
+  test.describe('Filtering', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.doubleClickCanvas()
+    })
+
+    test('Can add filter', async ({ comfyPage }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await expect(comfyPage.searchBox.filterChips).toHaveCount(1)
+    })
+
+    test('Can add multiple filters', async ({ comfyPage }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
+      await expect(comfyPage.searchBox.filterChips).toHaveCount(2)
+    })
+
+    test('Can remove filter', async ({ comfyPage }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
+      await comfyPage.searchBox.removeFilter(0)
+      await expect(comfyPage.searchBox.filterChips).toHaveCount(1)
+    })
+  })
 })
 
 test.describe('Release context menu', () => {
diff --git a/src/components/searchbox/NodeSearchBoxPopover.vue b/src/components/searchbox/NodeSearchBoxPopover.vue
index beaf4377c..7e44ea39f 100644
--- a/src/components/searchbox/NodeSearchBoxPopover.vue
+++ b/src/components/searchbox/NodeSearchBoxPopover.vue
@@ -34,7 +34,7 @@
 
 <script setup lang="ts">
 import { app } from '@/scripts/app'
-import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, ref, toRaw, watchEffect } from 'vue'
 import NodeSearchBox from './NodeSearchBox.vue'
 import Dialog from 'primevue/dialog'
 import { ConnectingLink } from '@comfyorg/litegraph'
@@ -66,7 +66,9 @@ const addFilter = (filter: FilterAndValue) => {
   nodeFilters.value.push(filter)
 }
 const removeFilter = (filter: FilterAndValue) => {
-  nodeFilters.value = nodeFilters.value.filter((f) => f !== filter)
+  nodeFilters.value = nodeFilters.value.filter(
+    (f) => toRaw(f) !== toRaw(filter)
+  )
 }
 const clearFilters = () => {
   nodeFilters.value = []
diff --git a/src/components/searchbox/NodeSearchFilter.vue b/src/components/searchbox/NodeSearchFilter.vue
index 53df08dfe..c2168f04c 100644
--- a/src/components/searchbox/NodeSearchFilter.vue
+++ b/src/components/searchbox/NodeSearchFilter.vue
@@ -1,13 +1,19 @@
 <template>
   <div class="_content">
     <SelectButton
+      class="filter-type-select"
       v-model="selectedFilter"
       :options="filters"
       :allowEmpty="false"
       optionLabel="name"
       @change="updateSelectedFilterValue"
     />
-    <Select v-model="selectedFilterValue" :options="filterValues" filter />
+    <Select
+      class="filter-value-select"
+      v-model="selectedFilterValue"
+      :options="filterValues"
+      filter
+    />
   </div>
   <div class="_footer">
     <Button type="button" :label="$t('add')" @click="submit"></Button>