Filter cached/canceled results (#1586)

* Filter cached/canceled results

* Highlight if on

* Update setting

src/components/sidebar/tabs/queue/OutputFilters.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <label class="flex items-center gap-2">
+      {{ $t('sideToolbar.queueTab.filters.hideCached') }}
+      <ToggleSwitch v-model="hideCached" />
+    </label>
+    <label class="flex items-center gap-2">
+      {{ $t('sideToolbar.queueTab.filters.hideCanceled') }}
+      <ToggleSwitch v-model="hideCanceled" />
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { useSettingStore } from '@/stores/settingStore'
+const SETTING_FILTER = 'Comfy.Queue.Filter'
+
+const { t } = useI18n()
+const settingStore = useSettingStore()
+const filter = settingStore.get(SETTING_FILTER) ?? {}
+
+const createCompute = (k: string) =>
+  computed({
+    get() {
+      return filter[k]
+    },
+    set(value) {
+      filter[k] = value
+      settingStore.set(SETTING_FILTER, filter)
+    }
+  })
+
+const hideCached = createCompute('hideCached')
+const hideCanceled = createCompute('hideCanceled')
+</script>

src/components/sidebar/tabs/queue/TaskItem.vue

@@ -31,16 +31,20 @@
 
     <div class="task-item-details">
       <div class="tag-wrapper status-tag-group">
-        <Tag v-if="isFlatTask && task.isHistory" class="node-name-tag">
+        <Tag v-if="isFlatTask && task.isHistory && node" class="node-name-tag">
           <Button
             class="task-node-link"
-            :label="`${node?.type} (#${node?.id})`"
+            :label="`${node.type} (#${node.id})`"
             link
             size="small"
             @click="app.goToNode(node?.id)"
           />
         </Tag>
-        <Tag :severity="taskTagSeverity(task.displayStatus)">
+        <Tag
+          :severity="taskTagSeverity(task.displayStatus)"
+          class="task-duration relative"
+        >
+          <i v-if="isCachedResult" class="pi pi-server task-cached-icon"></i>
           <span v-html="taskStatusText(task.displayStatus)"></span>
           <span v-if="task.isHistory" class="task-time">
             {{ formatTime(task.executionTimeInSeconds) }}
@@ -90,6 +94,7 @@ const node: ComfyNode | null =
       ) ?? null
     : null
 const progressPreviewBlobUrl = ref('')
+const isCachedResult = props.isFlatTask && coverResult?.cached
 
 const emit = defineEmits<{
   (
@@ -142,7 +147,7 @@ const taskStatusText = (status: TaskItemDisplayStatus) => {
     case TaskItemDisplayStatus.Running:
       return '<i class="pi pi-spin pi-spinner" style="font-weight: bold"></i> Running'
     case TaskItemDisplayStatus.Completed:
-      return '<i class="pi pi-check" style="font-weight: bold"></i>'
+      return `<i class="pi pi-check${isCachedResult ? ' cached' : ''}" style="font-weight: bold"></i>`
     case TaskItemDisplayStatus.Failed:
       return 'Failed'
     case TaskItemDisplayStatus.Cancelled:
@@ -226,4 +231,15 @@ are floating on top of images. */
   object-fit: cover;
   object-position: center;
 }
+
+.task-cached-icon {
+  color: #fff;
+}
+
+:deep(.pi-check.cached) {
+  font-size: 12px;
+  position: absolute;
+  left: 16px;
+  top: 12px;
+}
 </style>