[Manager] Preview the individual nodes for packs on the registry (#3408)

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

src/components/dialog/content/manager/infoPanel/InfoPanel.vue

@@ -4,7 +4,10 @@
       <div class="top-0 z-10 px-6 pt-6 w-full">
         <InfoPanelHeader :node-packs="[nodePack]" />
       </div>
-      <div class="p-6 pt-2 overflow-y-auto flex-1 text-sm hidden-scrollbar">
+      <div
+        ref="scrollContainer"
+        class="p-6 pt-2 overflow-y-auto flex-1 text-sm hidden-scrollbar"
+      >
         <div class="mb-6">
           <MetadataRow
             v-if="isPackInstalled(nodePack.id)"
@@ -46,7 +49,7 @@
 </template>
 
 <script setup lang="ts">
-import { whenever } from '@vueuse/core'
+import { useScroll, whenever } from '@vueuse/core'
 import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -70,6 +73,8 @@ const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
 }>()
 
+const scrollContainer = ref<HTMLElement | null>(null)
+
 const managerStore = useComfyManagerStore()
 const isInstalled = computed(() => managerStore.isPackInstalled(nodePack.id))
 const isInstalling = ref(false)
@@ -103,6 +108,17 @@ const infoItems = computed<InfoItem[]>(() => [
       : undefined
   }
 ])
+
+const { y } = useScroll(scrollContainer, {
+  eventListenerOptions: {
+    passive: true
+  }
+})
+const onNodePackChange = () => {
+  y.value = 0
+}
+
+whenever(() => nodePack, onNodePackChange, { immediate: true, deep: true })
 </script>
 <style scoped>
 .hidden-scrollbar {

src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue

@@ -31,28 +31,29 @@
 
 <script setup lang="ts">
 import { useAsyncState } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, onUnmounted } from 'vue'
 
 import PackStatusMessage from '@/components/dialog/content/manager/PackStatusMessage.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
 import InfoPanelHeader from '@/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue'
 import MetadataRow from '@/components/dialog/content/manager/infoPanel/MetadataRow.vue'
 import PackIconStacked from '@/components/dialog/content/manager/packIcon/PackIconStacked.vue'
-import { useComfyRegistryService } from '@/services/comfyRegistryService'
+import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import { components } from '@/types/comfyRegistryTypes'
 
 const { nodePacks } = defineProps<{
   nodePacks: components['schemas']['Node'][]
 }>()
 
-const comfyRegistryService = useComfyRegistryService()
+const { getNodeDefs } = useComfyRegistryStore()
 
 const getPackNodes = async (pack: components['schemas']['Node']) => {
-  if (!comfyRegistryService.packNodesAvailable(pack)) return []
-  return comfyRegistryService.getNodeDefs({
+  if (!pack.latest_version?.version) return []
+  const nodeDefs = await getNodeDefs.call({
     packId: pack.id,
-    versionId: pack.latest_version?.id
+    version: pack.latest_version?.version
   })
+  return nodeDefs?.comfy_nodes ?? []
 }
 
 const { state: allNodeDefs } = useAsyncState(
@@ -69,4 +70,8 @@ const totalNodesCount = computed(() =>
     0
   )
 )
+
+onUnmounted(() => {
+  getNodeDefs.cancel()
+})
 </script>

src/components/dialog/content/manager/infoPanel/InfoTabs.vue

@@ -14,7 +14,7 @@
           <DescriptionTabPanel :node-pack="nodePack" />
         </TabPanel>
         <TabPanel value="nodes">
-          <NodesTabPanel :node-pack="nodePack" />
+          <NodesTabPanel :node-pack="nodePack" :node-names="nodeNames" />
         </TabPanel>
       </TabPanels>
     </Tabs>
@@ -27,15 +27,21 @@ import TabList from 'primevue/tablist'
 import TabPanel from 'primevue/tabpanel'
 import TabPanels from 'primevue/tabpanels'
 import Tabs from 'primevue/tabs'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import DescriptionTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue'
 import NodesTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue'
 import { components } from '@/types/comfyRegistryTypes'
 
-defineProps<{
+const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
 }>()
 
+const nodeNames = computed(() => {
+  // @ts-expect-error comfy_nodes is an Algolia-specific field
+  const { comfy_nodes } = nodePack
+  return comfy_nodes ?? []
+})
+
 const activeTab = ref('description')
 </script>

src/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue

@@ -1,47 +1,92 @@
 <template>
-  <div class="flex flex-col gap-4 mt-4 overflow-auto text-sm">
-    <div v-if="nodeDefs?.length">
-      <!-- TODO: when registry returns node defs, use them here -->
-    </div>
-    <div
-      v-for="i in 3"
-      v-else
-      :key="i"
-      class="border border-surface-border rounded-lg p-4"
-    >
-      <NodePreview
-        :node-def="placeholderNodeDef"
-        class="!text-[.625rem] !min-w-full"
+  <div class="flex flex-col gap-4 mt-4 text-sm">
+    <template v-if="mappedNodeDefs?.length">
+      <div
+        v-for="nodeDef in mappedNodeDefs"
+        :key="createNodeDefKey(nodeDef)"
+        class="border border-surface-border rounded-lg p-4"
+      >
+        <NodePreview :node-def="nodeDef" class="!text-[.625rem] !min-w-full" />
+      </div>
+    </template>
+    <template v-else-if="isLoading">
+      <ProgressSpinner />
+    </template>
+    <template v-else-if="nodeNames.length">
+      <div v-for="node in nodeNames" :key="node" class="text-muted truncate">
+        {{ node }}
+      </div>
+    </template>
+    <template v-else>
+      <NoResultsPlaceholder
+        :title="$t('manager.noNodesFound')"
+        :message="$t('manager.noNodesFoundDescription')"
       />
-    </div>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import NodePreview from '@/components/node/NodePreview.vue'
-import { ComfyNodeDef } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { components } from '@/types/comfyRegistryTypes'
+import { whenever } from '@vueuse/core'
+import ProgressSpinner from 'primevue/progressspinner'
+import { computed, ref, shallowRef, useId } from 'vue'
 
-defineProps<{
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import NodePreview from '@/components/node/NodePreview.vue'
+import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
+import { components, operations } from '@/types/comfyRegistryTypes'
+import { registryToFrontendV2NodeDef } from '@/utils/mapperUtil'
+
+type ListComfyNodesResponse =
+  operations['ListComfyNodes']['responses'][200]['content']['application/json']['comfy_nodes']
+
+const { nodePack, nodeNames } = defineProps<{
   nodePack: components['schemas']['Node']
-  nodeDefs?: components['schemas']['ComfyNode'][]
+  nodeNames: string[]
 }>()
 
-// TODO: when registry returns node defs, use them here
-const placeholderNodeDef: ComfyNodeDef = {
-  name: 'Sample Node',
-  display_name: 'Sample Node',
-  description: 'This is a sample node for preview purposes',
-  inputs: {
-    input1: { name: 'Input 1', type: 'IMAGE' },
-    input2: { name: 'Input 2', type: 'CONDITIONING' }
-  },
-  outputs: [
-    { name: 'Output 1', type: 'IMAGE', index: 0, is_list: false },
-    { name: 'Output 2', type: 'MASK', index: 1, is_list: false }
-  ],
-  category: 'Utility',
-  output_node: false,
-  python_module: 'nodes'
+const { getNodeDefs } = useComfyRegistryStore()
+
+const isLoading = ref(false)
+const registryNodeDefs = shallowRef<ListComfyNodesResponse | null>(null)
+
+const fetchNodeDefs = async () => {
+  isLoading.value = true
+
+  const { id: packId } = nodePack
+  const version = nodePack.latest_version?.version
+
+  if (!packId || !version) {
+    registryNodeDefs.value = null
+  } else {
+    const response = await getNodeDefs.call({
+      packId,
+      version,
+      page: 1,
+      limit: 256
+    })
+    registryNodeDefs.value = response?.comfy_nodes ?? null
+  }
+
+  isLoading.value = false
 }
+
+whenever(() => nodePack, fetchNodeDefs, { immediate: true, deep: true })
+
+const toFrontendNodeDef = (nodeDef: components['schemas']['ComfyNode']) => {
+  try {
+    return registryToFrontendV2NodeDef(nodeDef, nodePack)
+  } catch (error) {
+    return null
+  }
+}
+const mappedNodeDefs = computed(() => {
+  if (!registryNodeDefs.value) return null
+  return registryNodeDefs.value
+    .map(toFrontendNodeDef)
+    .filter((nodeDef) => nodeDef !== null)
+})
+
+const createNodeDefKey = (nodeDef: components['schemas']['ComfyNode']) =>
+  `${nodeDef.category}${nodeDef.comfy_node_name ?? useId()}`
 </script>