From db43f587a67b2b5f955374a8f93783c9e9ae81a8 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Tue, 18 Mar 2025 20:42:32 -0400
Subject: [PATCH] [TS] Fix ts-strict errors in Vue components (Part 4) (#3134)

---
 src/components/common/TreeExplorer.vue        |  2 +-
 src/components/common/UrlInput.vue            |  4 +-
 .../dialog/content/SettingDialogContent.vue   |  2 +-
 src/components/graph/DomWidgets.vue           |  4 +-
 src/components/graph/SelectionOverlay.vue     |  2 +-
 .../selectionToolbox/ColorPickerButton.vue    |  2 +-
 src/components/install/GpuPicker.vue          |  2 +-
 .../install/InstallLocationPicker.vue         |  4 +-
 .../install/MirrorsConfiguration.vue          |  4 +-
 .../sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue |  3 +-
 .../tabs/queue/__tests__/ResultGallery.ts     | 82 -------------------
 11 files changed, 15 insertions(+), 96 deletions(-)
 delete mode 100644 src/components/sidebar/tabs/queue/__tests__/ResultGallery.ts

diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index 5ef0f891ed..29dcd0bc33 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -131,7 +131,7 @@ const onNodeContentClick = async (
   }
   emit('nodeClick', node, e)
 }
-const menu = ref(null)
+const menu = ref<InstanceType<typeof ContextMenu> | null>(null)
 const menuTargetNode = ref<RenderedTreeExplorerNode | null>(null)
 const extraMenuItems = computed(() => {
   return menuTargetNode.value?.contextMenuItems
diff --git a/src/components/common/UrlInput.vue b/src/components/common/UrlInput.vue
index 7e9817b16d..9e400ae93a 100644
--- a/src/components/common/UrlInput.vue
+++ b/src/components/common/UrlInput.vue
@@ -68,9 +68,9 @@ onMounted(async () => {
   await validateUrl(props.modelValue)
 })
 
-const handleInput = (value: string) => {
+const handleInput = (value: string | undefined) => {
   // Update internal value without emitting
-  internalValue.value = cleanInput(value)
+  internalValue.value = cleanInput(value ?? '')
   // Reset validation state when user types
   validationState.value = ValidationState.IDLE
 }
diff --git a/src/components/dialog/content/SettingDialogContent.vue b/src/components/dialog/content/SettingDialogContent.vue
index 82e15874bd..75ded5b9f2 100644
--- a/src/components/dialog/content/SettingDialogContent.vue
+++ b/src/components/dialog/content/SettingDialogContent.vue
@@ -31,7 +31,7 @@
         <PanelTemplate
           v-for="category in settingCategories"
           :key="category.key"
-          :value="category.label"
+          :value="category.label ?? ''"
         >
           <template #header>
             <CurrentUserMessage v-if="tabValue === 'Comfy'" />
diff --git a/src/components/graph/DomWidgets.vue b/src/components/graph/DomWidgets.vue
index 3318b0186b..47226d9e58 100644
--- a/src/components/graph/DomWidgets.vue
+++ b/src/components/graph/DomWidgets.vue
@@ -5,7 +5,7 @@
       v-for="widget in widgets"
       :key="widget.id"
       :widget="widget"
-      :widget-state="domWidgetStore.widgetStates.get(widget.id)"
+      :widget-state="domWidgetStore.widgetStates.get(widget.id)!"
       @update:widget-value="widget.value = $event"
     />
   </div>
@@ -56,7 +56,7 @@ const updateWidgets = () => {
         (widget.computedHeight ?? 50) - margin * 2
       ]
       // TODO: optimize this logic as it's O(n), where n is the number of nodes
-      widgetState.zIndex = lgCanvas.graph.nodes.indexOf(node)
+      widgetState.zIndex = lgCanvas.graph?.nodes.indexOf(node) ?? -1
       widgetState.readonly = lgCanvas.read_only
     }
   }
diff --git a/src/components/graph/SelectionOverlay.vue b/src/components/graph/SelectionOverlay.vue
index 371c16b47e..f5d8c8df53 100644
--- a/src/components/graph/SelectionOverlay.vue
+++ b/src/components/graph/SelectionOverlay.vue
@@ -48,7 +48,7 @@ const positionSelectionOverlay = (canvas: LGraphCanvas) => {
 
 // Register listener on canvas creation.
 watch(
-  () => canvasStore.canvas,
+  () => canvasStore.canvas as LGraphCanvas | null,
   (canvas: LGraphCanvas | null) => {
     if (!canvas) return
 
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.vue b/src/components/graph/selectionToolbox/ColorPickerButton.vue
index f771329789..2ce1556cb2 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.vue
@@ -7,7 +7,7 @@
     >
       <template #icon>
         <div class="flex items-center gap-1">
-          <i class="pi pi-circle-fill" :style="{ color: currentColor }" />
+          <i class="pi pi-circle-fill" :style="{ color: currentColor ?? '' }" />
           <i class="pi pi-chevron-down" :style="{ fontSize: '0.5rem' }" />
         </div>
       </template>
diff --git a/src/components/install/GpuPicker.vue b/src/components/install/GpuPicker.vue
index 9a71c7c893..1d309fab33 100644
--- a/src/components/install/GpuPicker.vue
+++ b/src/components/install/GpuPicker.vue
@@ -146,7 +146,7 @@ const cpuMode = computed({
     selected.value = value ? 'cpu' : null
   }
 })
-const selected = defineModel<TorchDeviceType>('device', {
+const selected = defineModel<TorchDeviceType | null>('device', {
   required: true
 })
 
diff --git a/src/components/install/InstallLocationPicker.vue b/src/components/install/InstallLocationPicker.vue
index abcc4fdee3..72ea7ac07b 100644
--- a/src/components/install/InstallLocationPicker.vue
+++ b/src/components/install/InstallLocationPicker.vue
@@ -100,12 +100,12 @@ onMounted(async () => {
   await validatePath(paths.defaultInstallPath)
 })
 
-const validatePath = async (path: string) => {
+const validatePath = async (path: string | undefined) => {
   try {
     pathError.value = ''
     pathExists.value = false
     nonDefaultDrive.value = false
-    const validation = await electron.validateInstallPath(path)
+    const validation = await electron.validateInstallPath(path ?? '')
 
     // Create a pre-formatted list of errors
     if (!validation.isValid) {
diff --git a/src/components/install/MirrorsConfiguration.vue b/src/components/install/MirrorsConfiguration.vue
index 32228b4ceb..43a3b68d5f 100644
--- a/src/components/install/MirrorsConfiguration.vue
+++ b/src/components/install/MirrorsConfiguration.vue
@@ -50,7 +50,7 @@ import { isInChina } from '@/utils/networkUtil'
 import { ValidationState, mergeValidationStates } from '@/utils/validationUtil'
 
 const showMirrorInputs = ref(false)
-const { device } = defineProps<{ device: TorchDeviceType }>()
+const { device } = defineProps<{ device: TorchDeviceType | null }>()
 const pythonMirror = defineModel<string>('pythonMirror', { required: true })
 const pypiMirror = defineModel<string>('pypiMirror', { required: true })
 const torchMirror = defineModel<string>('torchMirror', { required: true })
@@ -95,7 +95,7 @@ const mirrors = computed<[UVMirror, ModelRef<string>][]>(() =>
     [
       [PYTHON_MIRROR, pythonMirror],
       [PYPI_MIRROR, pypiMirror],
-      [getTorchMirrorItem(device), torchMirror]
+      [getTorchMirrorItem(device ?? 'cpu'), torchMirror]
     ] as [UVMirror, ModelRef<string>][]
   ).map(([item, modelValue]) => [
     userIsInChina.value ? useFallbackMirror(item) : item,
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
index 1a9d8f6406..8bc1a6ac66 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
@@ -56,7 +56,8 @@ const props = defineProps<{
   node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
 }>()
 
-const nodeDef = computed(() => props.node.data)
+// Note: node.data should be present for leaf nodes.
+const nodeDef = computed(() => props.node.data!)
 const nodeBookmarkStore = useNodeBookmarkStore()
 const isBookmarked = computed(() =>
   nodeBookmarkStore.isBookmarked(nodeDef.value)
diff --git a/src/components/sidebar/tabs/queue/__tests__/ResultGallery.ts b/src/components/sidebar/tabs/queue/__tests__/ResultGallery.ts
deleted file mode 100644
index dbbcc33631..0000000000
--- a/src/components/sidebar/tabs/queue/__tests__/ResultGallery.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-// @ts-strict-ignore
-// Disabled because of https://github.com/Comfy-Org/ComfyUI_frontend/issues/1184
-import { mount } from '@vue/test-utils'
-import PrimeVue from 'primevue/config'
-import Galleria from 'primevue/galleria'
-import { beforeEach, describe, expect, it } from 'vitest'
-
-import ComfyImage from '@/components/common/ComfyImage.vue'
-import { ResultItemImpl } from '@/stores/queueStore'
-
-import ResultGallery from '../ResultGallery.vue'
-
-type ResultGalleryProps = typeof ResultGallery.__props
-
-describe('ResultGallery', () => {
-  let mockResultItem: ResultItemImpl
-
-  beforeEach(() => {
-    mockResultItem = new ResultItemImpl({
-      filename: 'test.jpg',
-      type: 'images',
-      nodeId: 1,
-      mediaType: 'images'
-    })
-  })
-
-  const mountResultGallery = (props: ResultGalleryProps, options = {}) => {
-    return mount(ResultGallery, {
-      global: {
-        plugins: [PrimeVue],
-        components: { Galleria, ComfyImage }
-      },
-      props,
-      ...options
-    })
-  }
-
-  const clickElement = async (element: Element) => {
-    element.dispatchEvent(new MouseEvent('mousedown'))
-    element.dispatchEvent(new MouseEvent('mouseup'))
-  }
-
-  it('is dismissed when overlay mask is clicked', async () => {
-    const wrapper = mountResultGallery({
-      activeIndex: 0,
-      allGalleryItems: [mockResultItem]
-    })
-    wrapper.vm.galleryVisible = true
-    await wrapper.vm.$nextTick()
-    expect(wrapper.findComponent(Galleria).exists()).toBe(true)
-    expect(wrapper.vm.galleryVisible).toBe(true)
-
-    // Since Galleria uses teleport, we need to query the mask in the global document
-    const mask = document.querySelector('[data-mask]')
-    expect(mask).not.toBeNull()
-
-    // Click the overlay mask to dismiss the gallery
-    await clickElement(mask)
-    await wrapper.vm.$nextTick()
-    expect(wrapper.vm.galleryVisible).toBe(false)
-  })
-
-  it('is not dismissed when gallery is clicked', async () => {
-    const wrapper = mountResultGallery({
-      activeIndex: 0,
-      allGalleryItems: [mockResultItem]
-    })
-    wrapper.vm.galleryVisible = true
-    await wrapper.vm.$nextTick()
-    expect(wrapper.findComponent(Galleria).exists()).toBe(true)
-    expect(wrapper.vm.galleryVisible).toBe(true)
-
-    // Since Galleria uses teleport, we need to query the mask in the global document
-    const gallery = document.querySelector('.p-galleria-content')
-    expect(gallery).not.toBeNull()
-
-    // The gallery should not be dismissed when the gallery itself is clicked
-    await clickElement(gallery)
-    await wrapper.vm.$nextTick()
-    expect(wrapper.vm.galleryVisible).toBe(true)
-  })
-})