[feat] Show version-specific missing core nodes in workflow warnings (#4227)

Co-authored-by: github-actions <github-actions@github.com>

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -5,6 +5,7 @@
     title="Missing Node Types"
     message="When loading the graph, the following node types were not found"
   />
+  <MissingCoreNodesMessage :missing-core-nodes="missingCoreNodes" />
   <ListBox
     :options="uniqueNodes"
     option-label="label"
@@ -47,6 +48,7 @@ import ListBox from 'primevue/listbox'
 import { computed } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
 import { useDialogService } from '@/services/dialogService'
@@ -61,7 +63,8 @@ const props = defineProps<{
 const aboutPanelStore = useAboutPanelStore()
 
 // Get missing node packs from workflow with loading and error states
-const { missingNodePacks, isLoading, error } = useMissingNodes()
+const { missingNodePacks, isLoading, error, missingCoreNodes } =
+  useMissingNodes()
 
 // Determines if ComfyUI-Manager is installed by checking for its badge in the about panel
 // This allows us to conditionally show the Manager button only when the extension is available

src/components/dialog/content/MissingCoreNodesMessage.vue

@@ -0,0 +1,95 @@
+<template>
+  <Message
+    v-if="hasMissingCoreNodes"
+    severity="info"
+    icon="pi pi-info-circle"
+    class="my-2 mx-2"
+    :pt="{
+      root: { class: 'flex-col' },
+      text: { class: 'flex-1' }
+    }"
+  >
+    <div class="flex flex-col gap-2">
+      <div>
+        {{
+          currentComfyUIVersion
+            ? $t('loadWorkflowWarning.outdatedVersion', {
+                version: currentComfyUIVersion
+              })
+            : $t('loadWorkflowWarning.outdatedVersionGeneric')
+        }}
+      </div>
+      <div
+        v-for="[version, nodes] in sortedMissingCoreNodes"
+        :key="version"
+        class="ml-4"
+      >
+        <div
+          class="text-sm font-medium text-surface-600 dark-theme:text-surface-400"
+        >
+          {{
+            $t('loadWorkflowWarning.coreNodesFromVersion', {
+              version: version || 'unknown'
+            })
+          }}
+        </div>
+        <div class="ml-4 text-sm text-surface-500 dark-theme:text-surface-500">
+          {{ getUniqueNodeNames(nodes).join(', ') }}
+        </div>
+      </div>
+    </div>
+  </Message>
+</template>
+
+<script setup lang="ts">
+import type { LGraphNode } from '@comfyorg/litegraph'
+import { whenever } from '@vueuse/core'
+import Message from 'primevue/message'
+import { computed, ref } from 'vue'
+
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import { compareVersions } from '@/utils/formatUtil'
+
+const props = defineProps<{
+  missingCoreNodes: Record<string, LGraphNode[]>
+}>()
+
+const systemStatsStore = useSystemStatsStore()
+
+const hasMissingCoreNodes = computed(() => {
+  return Object.keys(props.missingCoreNodes).length > 0
+})
+
+const currentComfyUIVersion = ref<string | null>(null)
+whenever(
+  hasMissingCoreNodes,
+  async () => {
+    if (!systemStatsStore.systemStats) {
+      await systemStatsStore.fetchSystemStats()
+    }
+    currentComfyUIVersion.value =
+      systemStatsStore.systemStats?.system?.comfyui_version ?? null
+  },
+  {
+    immediate: true
+  }
+)
+
+const sortedMissingCoreNodes = computed(() => {
+  return Object.entries(props.missingCoreNodes).sort(([a], [b]) => {
+    // Sort by version in descending order (newest first)
+    return compareVersions(b, a) // Reversed for descending order
+  })
+})
+
+const getUniqueNodeNames = (nodes: LGraphNode[]): string[] => {
+  return nodes
+    .reduce<string[]>((acc, node) => {
+      if (node.type && !acc.includes(node.type)) {
+        acc.push(node.type)
+      }
+      return acc
+    }, [])
+    .sort()
+}
+</script>

src/composables/nodePack/useMissingNodes.ts

@@ -1,7 +1,12 @@
+import { LGraphNode } from '@comfyorg/litegraph'
+import { NodeProperty } from '@comfyorg/litegraph/dist/LGraphNode'
+import { groupBy } from 'lodash'
 import { computed, onMounted } from 'vue'
 
 import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
+import { app } from '@/scripts/app'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import type { components } from '@/types/comfyRegistryTypes'
 
 /**
@@ -10,6 +15,7 @@ import type { components } from '@/types/comfyRegistryTypes'
  * Automatically fetches workflow pack data when initialized
  */
 export const useMissingNodes = () => {
+  const nodeDefStore = useNodeDefStore()
   const comfyManagerStore = useComfyManagerStore()
   const { workflowPacks, isLoading, error, startFetchWorkflowPacks } =
     useWorkflowPacks()
@@ -24,6 +30,36 @@ export const useMissingNodes = () => {
     return filterMissingPacks(workflowPacks.value)
   })
 
+  /**
+   * Check if a pack is the ComfyUI builtin node pack (nodes that come pre-installed)
+   * @param packId - The id of the pack to check
+   * @returns True if the pack is the comfy-core pack, false otherwise
+   */
+  const isCorePack = (packId: NodeProperty) => {
+    return packId === 'comfy-core'
+  }
+
+  /**
+   * Check if a node is a missing core node
+   * A missing core node is a node that is in the workflow and originates from
+   * the comfy-core pack (pre-installed) but not registered in the node def
+   * store (the node def was not found on the server)
+   * @param node - The node to check
+   * @returns True if the node is a missing core node, false otherwise
+   */
+  const isMissingCoreNode = (node: LGraphNode) => {
+    const packId = node.properties?.cnr_id
+    if (packId === undefined || !isCorePack(packId)) return false
+    const nodeName = node.type
+    const isRegisteredNodeDef = !!nodeDefStore.nodeDefsByName[nodeName]
+    return !isRegisteredNodeDef
+  }
+
+  const missingCoreNodes = computed<Record<string, LGraphNode[]>>(() => {
+    const missingNodes = app.graph.nodes.filter(isMissingCoreNode)
+    return groupBy(missingNodes, (node) => String(node.properties?.ver || ''))
+  })
+
   // Automatically fetch workflow pack data when composable is used
   onMounted(async () => {
     if (!workflowPacks.value.length && !isLoading.value) {
@@ -33,6 +69,7 @@ export const useMissingNodes = () => {
 
   return {
     missingNodePacks,
+    missingCoreNodes,
     isLoading,
     error
   }

src/locales/en/main.json

@@ -1195,6 +1195,11 @@
     "missingModels": "Missing Models",
     "missingModelsMessage": "When loading the graph, the following models were not found"
   },
+  "loadWorkflowWarning": {
+    "outdatedVersion": "Some nodes require a newer version of ComfyUI (current: {version}). Please update to use all nodes.",
+    "outdatedVersionGeneric": "Some nodes require a newer version of ComfyUI. Please update to use all nodes.",
+    "coreNodesFromVersion": "Requires ComfyUI {version}:"
+  },
   "errorDialog": {
     "defaultTitle": "An error occurred",
     "loadWorkflowTitle": "Loading aborted due to error reloading workflow data",

src/locales/es/main.json

@@ -551,6 +551,11 @@
     "uploadBackgroundImage": "Subir imagen de fondo",
     "uploadTexture": "Subir textura"
   },
+  "loadWorkflowWarning": {
+    "coreNodesFromVersion": "Requiere ComfyUI {version}:",
+    "outdatedVersion": "Algunos nodos requieren una versión más reciente de ComfyUI (actual: {version}). Por favor, actualiza para usar todos los nodos.",
+    "outdatedVersionGeneric": "Algunos nodos requieren una versión más reciente de ComfyUI. Por favor, actualiza para usar todos los nodos."
+  },
   "maintenance": {
     "None": "Ninguno",
     "OK": "OK",

src/locales/fr/main.json

@@ -551,6 +551,11 @@
     "uploadBackgroundImage": "Télécharger l'image de fond",
     "uploadTexture": "Télécharger Texture"
   },
+  "loadWorkflowWarning": {
+    "coreNodesFromVersion": "Nécessite ComfyUI {version} :",
+    "outdatedVersion": "Certains nœuds nécessitent une version plus récente de ComfyUI (actuelle : {version}). Veuillez mettre à jour pour utiliser tous les nœuds.",
+    "outdatedVersionGeneric": "Certains nœuds nécessitent une version plus récente de ComfyUI. Veuillez mettre à jour pour utiliser tous les nœuds."
+  },
   "maintenance": {
     "None": "Aucun",
     "OK": "OK",

src/locales/ja/main.json

@@ -551,6 +551,11 @@
     "uploadBackgroundImage": "背景画像をアップロード",
     "uploadTexture": "テクスチャをアップロード"
   },
+  "loadWorkflowWarning": {
+    "coreNodesFromVersion": "ComfyUI {version} が必要です：",
+    "outdatedVersion": "一部のノードはより新しいバージョンのComfyUIが必要です（現在のバージョン：{version}）。すべてのノードを使用するにはアップデートしてください。",
+    "outdatedVersionGeneric": "一部のノードはより新しいバージョンのComfyUIが必要です。すべてのノードを使用するにはアップデートしてください。"
+  },
   "maintenance": {
     "None": "なし",
     "OK": "OK",

src/locales/ko/main.json

@@ -551,6 +551,11 @@
     "uploadBackgroundImage": "배경 이미지 업로드",
     "uploadTexture": "텍스처 업로드"
   },
+  "loadWorkflowWarning": {
+    "coreNodesFromVersion": "ComfyUI {version} 이상 필요:",
+    "outdatedVersion": "일부 노드는 더 최신 버전의 ComfyUI가 필요합니다 (현재: {version}). 모든 노드를 사용하려면 업데이트해 주세요.",
+    "outdatedVersionGeneric": "일부 노드는 더 최신 버전의 ComfyUI가 필요합니다. 모든 노드를 사용하려면 업데이트해 주세요."
+  },
   "maintenance": {
     "None": "없음",
     "OK": "확인",

src/locales/ru/main.json

@@ -551,6 +551,11 @@
     "uploadBackgroundImage": "Загрузить фоновое изображение",
     "uploadTexture": "Загрузить текстуру"
   },
+  "loadWorkflowWarning": {
+    "coreNodesFromVersion": "Требуется ComfyUI {version}:",
+    "outdatedVersion": "Некоторые узлы требуют более новой версии ComfyUI (текущая: {version}). Пожалуйста, обновите, чтобы использовать все узлы.",
+    "outdatedVersionGeneric": "Некоторые узлы требуют более новой версии ComfyUI. Пожалуйста, обновите, чтобы использовать все узлы."
+  },
   "maintenance": {
     "None": "Нет",
     "OK": "OK",

src/locales/zh/main.json

@@ -551,6 +551,11 @@
     "uploadBackgroundImage": "上传背景图片",
     "uploadTexture": "上传纹理"
   },
+  "loadWorkflowWarning": {
+    "coreNodesFromVersion": "需要 ComfyUI {version}：",
+    "outdatedVersion": "某些节点需要更高版本的 ComfyUI（当前版本：{version}）。请更新以使用所有节点。",
+    "outdatedVersionGeneric": "某些节点需要更高版本的 ComfyUI。请更新以使用所有节点。"
+  },
   "maintenance": {
     "None": "无",
     "OK": "确定",