From a13d5a331668b25314771d534d3c84b417141c59 Mon Sep 17 00:00:00 2001
From: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Date: Mon, 18 Nov 2024 17:13:04 +0000
Subject: [PATCH] wip allow filtering of nodes by type, needs backend update to
 return node type data

---
 .../sidebar/tabs/QueueSidebarTab.vue          | 19 +++++++++++--------
 .../sidebar/tabs/queue/OutputFilters.vue      | 18 ++++++++++++++++++
 src/stores/nodeDefStore.ts                    |  2 ++
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue
index 7166b32fa4..bce22483bc 100644
--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -150,14 +150,17 @@ const hideCached = computed<boolean>(
 const hideCanceled = computed<boolean>(
   () => settingStore.get(SETTING_FILTER)?.hideCanceled
 )
-const anyFilter = computed(() => hideCanceled.value || hideCached.value)
-
-watch(hideCached, () => {
-  updateVisibleTasks()
-})
-watch(hideCanceled, () => {
-  updateVisibleTasks()
-})
+const hideNodeTypes = computed<string[]>(
+  () => settingStore.get(SETTING_FILTER)?.hideNodeTypes ?? []
+)
+const anyFilter = computed(
+  () => hideCanceled.value || hideCached.value || hideNodeTypes.value?.length
+)
+for (const setting of [hideCached, hideCanceled, hideNodeTypes]) {
+  watch(setting, () => {
+    updateVisibleTasks()
+  })
+}
 
 const outputFilterPopup = ref(null)
 
diff --git a/src/components/sidebar/tabs/queue/OutputFilters.vue b/src/components/sidebar/tabs/queue/OutputFilters.vue
index 3cac3a81f6..231b5e80dc 100644
--- a/src/components/sidebar/tabs/queue/OutputFilters.vue
+++ b/src/components/sidebar/tabs/queue/OutputFilters.vue
@@ -8,6 +8,16 @@
       {{ $t('sideToolbar.queueTab.filters.hideCanceled') }}
       <ToggleSwitch v-model="hideCanceled" />
     </label>
+    <span class="mt-2">Hide Node Types:</span>
+    <MultiSelect
+      class="w-48 min-w-48 max-w-48"
+      v-model="hideNodeTypes"
+      filter
+      optionLabel="display_name"
+      optionValue="name"
+      :options="outputNodes"
+      :maxSelectedLabels="2"
+    />
   </div>
 </template>
 
@@ -15,11 +25,14 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ToggleSwitch from 'primevue/toggleswitch'
+import MultiSelect from 'primevue/multiselect'
 import { useSettingStore } from '@/stores/settingStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 const SETTING_FILTER = 'Comfy.Queue.Filter'
 
 const { t } = useI18n()
 const settingStore = useSettingStore()
+const nodeDefStore = useNodeDefStore()
 const filter = settingStore.get(SETTING_FILTER) ?? {}
 
 const createCompute = (k: string) =>
@@ -35,4 +48,9 @@ const createCompute = (k: string) =>
 
 const hideCached = createCompute('hideCached')
 const hideCanceled = createCompute('hideCanceled')
+const hideNodeTypes = createCompute('hideNodeTypes')
+
+const outputNodes = nodeDefStore.visibleNodeDefs.filter(
+  (def) => def.isOutputNode
+)
 </script>
diff --git a/src/stores/nodeDefStore.ts b/src/stores/nodeDefStore.ts
index dac62d4fbf..570afa339b 100644
--- a/src/stores/nodeDefStore.ts
+++ b/src/stores/nodeDefStore.ts
@@ -164,6 +164,7 @@ export class ComfyNodeDefImpl {
   input: ComfyInputsSpec
   output: ComfyOutputsSpec
   nodeSource: NodeSource
+  isOutputNode: boolean
 
   constructor(obj: ComfyNodeDef) {
     this.name = obj.name
@@ -177,6 +178,7 @@ export class ComfyNodeDefImpl {
     this.input = new ComfyInputsSpec(obj.input ?? {})
     this.output = ComfyNodeDefImpl.transformOutputSpec(obj)
     this.nodeSource = getNodeSource(obj.python_module)
+    this.isOutputNode = obj.output_node === true
   }
 
   private static transformOutputSpec(obj: any): ComfyOutputsSpec {