Enhancements to the queue image feed (#646)

* Enhancements to the queue image feed
 - Change flat list icon
 - Add cover/contain mode
 - Add right click -> go to node
 - Add go to node link on detail

* Add loading spinner

* resolve comments

---------

Co-authored-by: huchenlei <chenlei.hu@mail.utoronto.ca>

src/scripts/app.ts

@@ -17,6 +17,7 @@ import { applyTextReplacements, addStylesheet } from './utils'
 import type { ComfyExtension } from '@/types/comfy'
 import {
   type ComfyWorkflowJSON,
+  type NodeId,
   validateComfyWorkflow
 } from '../types/comfyWorkflow'
 import { ComfyNodeDef, StatusWsMessageStatus } from '@/types/apiTypes'
@@ -2188,7 +2189,7 @@ export class ComfyApp {
         maximizable: true
       })
     }
-    
+
     this.logging.addEntry('Comfy.App', 'warn', {
       MissingModels: missingModels
     })
@@ -2272,15 +2273,17 @@ export class ComfyApp {
         n.type = sanitizeNodeName(n.type)
       }
     }
-    if (graphData.models && useSettingStore().get('Comfy.Workflow.ShowMissingModelsWarning')) {
+    if (
+      graphData.models &&
+      useSettingStore().get('Comfy.Workflow.ShowMissingModelsWarning')
+    ) {
       for (let m of graphData.models) {
         const models_available = await this.getModelsInFolderCached(m.directory)
         if (models_available === null) {
           // @ts-expect-error
           m.directory_invalid = true
           missingModels.push(m)
-        }
-        else if (!models_available.includes(m.name)) {
+        } else if (!models_available.includes(m.name)) {
           missingModels.push(m)
         }
       }
@@ -3008,6 +3011,13 @@ export class ComfyApp {
     const [x, y, w, h] = app.canvas.ds.visible_area
     return [x + w / dpi / 2, y + h / dpi / 2]
   }
+
+  public goToNode(nodeId: NodeId) {
+    // @ts-expect-error TODO: Update litegraph's nodeId type to string | number
+    const graphNode = this.graph.getNodeById(nodeId)
+    if (!graphNode) return
+    this.canvas.centerOnNode(graphNode)
+  }
 }
 
 export const app = new ComfyApp()