Subgraph widget promotion fixes (#5911)

- Fixes automatic promotion of image previews by ~~more correctly
handling a usage of `requestAnimationFrame` and~~ introducing a means to
perform actions upon successful load of preview.
- When workflows contain an old proxyWidget property in string form,
parse it instead of throwing an error.
- Do not overlay the `label` of promoted widgets. Further consideration
is needed, but this resolves the primary annoyance and prevents
untranslated widget names
See #5914

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5911-Subgraph-widget-promotion-fixes-2826d73d365081838ffeeea4b8d7068c)
by [Unito](https://www.unito.io)

Author: AustinMroz

src/composables/node/useNodeImage.ts

@@ -98,7 +98,7 @@ const useNodePreview = <T extends MediaElement>(
 /**
  * Attaches a preview image to a node.
  */
-export const useNodeImage = (node: LGraphNode) => {
+export const useNodeImage = (node: LGraphNode, callback?: () => void) => {
   node.previewMediaType = 'image'
 
   const loadElement = (url: string): Promise<HTMLImageElement | null> =>
@@ -112,6 +112,7 @@ export const useNodeImage = (node: LGraphNode) => {
   const onLoaded = (elements: HTMLImageElement[]) => {
     node.imageIndex = null
     node.imgs = elements
+    callback?.()
   }
 
   return useNodePreview(node, {
@@ -126,7 +127,7 @@ export const useNodeImage = (node: LGraphNode) => {
 /**
  * Attaches a preview video to a node.
  */
-export const useNodeVideo = (node: LGraphNode) => {
+export const useNodeVideo = (node: LGraphNode, callback?: () => void) => {
   node.previewMediaType = 'video'
   let minHeight = DEFAULT_VIDEO_SIZE
   let minWidth = DEFAULT_VIDEO_SIZE
@@ -187,6 +188,7 @@ export const useNodeVideo = (node: LGraphNode) => {
     }
 
     node.videoContainer.replaceChildren(videoElement)
+    callback?.()
   }
 
   return useNodePreview(node, {

src/core/graph/subgraph/proxyWidget.ts

@@ -121,7 +121,6 @@ function addProxyWidget(
     afterQueued: undefined,
     computedHeight: undefined,
     isProxyWidget: true,
-    label: name,
     last_y: undefined,
     name,
     node: subgraphNode,

src/core/graph/subgraph/proxyWidgetUtils.ts

@@ -119,9 +119,15 @@ export function promoteRecommendedWidgets(subgraphNode: SubgraphNode) {
   const interiorNodes = subgraphNode.subgraph.nodes
   for (const node of interiorNodes) {
     node.updateComputedDisabled()
-    //NOTE: Since this operation is async, previews still don't exist after the single frame
-    //Add an onLoad callback to updatePreviews?
-    updatePreviews(node)
+    function checkWidgets() {
+      updatePreviews(node)
+      const widget = node.widgets?.find((w) => w.name.startsWith('$$'))
+      if (!widget) return
+      const pw = getProxyWidgets(subgraphNode)
+      if (pw.some(matchesPropertyItem([node, widget]))) return
+      promoteWidget(node, widget, [subgraphNode])
+    }
+    requestAnimationFrame(() => updatePreviews(node, checkWidgets))
   }
   const filteredWidgets: WidgetItem[] = interiorNodes
     .flatMap(nodeWidgets)

src/core/schemas/proxyWidget.ts

@@ -9,7 +9,10 @@ export type ProxyWidgetsProperty = z.infer<typeof proxyWidgetsPropertySchema>
 export function parseProxyWidgets(
   property: NodeProperty | undefined
 ): ProxyWidgetsProperty {
-  const result = proxyWidgetsPropertySchema.safeParse(property)
+  if (typeof property === 'string') property = JSON.parse(property)
+  const result = proxyWidgetsPropertySchema.safeParse(
+    typeof property === 'string' ? JSON.parse(property) : property
+  )
   if (result.success) return result.data
 
   const error = fromZodError(result.error)

src/services/litegraphService.ts

@@ -853,14 +853,14 @@ export const useLitegraphService = () => {
       return []
     }
   }
-  function updatePreviews(node: LGraphNode) {
+  function updatePreviews(node: LGraphNode, callback?: () => void) {
     try {
-      unsafeUpdatePreviews.call(node)
+      unsafeUpdatePreviews.call(node, callback)
     } catch (error) {
       console.error('Error drawing node background', error)
     }
   }
-  function unsafeUpdatePreviews(this: LGraphNode) {
+  function unsafeUpdatePreviews(this: LGraphNode, callback?: () => void) {
     if (this.flags.collapsed) return
 
     const nodeOutputStore = useNodeOutputStore()
@@ -891,9 +891,9 @@ export const useLitegraphService = () => {
         (this.animatedImages && !isAnimatedWebp && !isAnimatedPng) ||
         isVideoNode(this)
       if (isVideo) {
-        useNodeVideo(this).showPreview()
+        useNodeVideo(this, callback).showPreview()
       } else {
-        useNodeImage(this).showPreview()
+        useNodeImage(this, callback).showPreview()
       }
     }