Fix removal of DOM Widgets

Needs further review for what the actual purpose of the active state in
the widget store is if it's not being used for determining visibility

src/components/graph/DomWidgets.vue

@@ -34,7 +34,7 @@ const updateWidgets = () => {
     const widget = widgetState.widget
 
     // Early exit for non-visible widgets
-    if (!widget.isVisible()) {
+    if (!widget.isVisible() || !widgetState.active) {
       widgetState.visible = false
       continue
     }

src/components/selectionbar/SubgraphNode.vue

@@ -43,9 +43,8 @@ const widgetTree = computed(() => {
     //widget has connected link. Should not be displayed
     .filter((i) => !i[1].computedDisabled)
   //TODO: filter enabled/disabled items while keeping order
-  console.log(intn)
   return buildTree(intn, (item: [unknown, unknown]) =>
-    [`${item[0].title}: ${item[1].name}`]
+    [`${item[0].title}(${item[0].id}): ${item[1].name}`]
   )
 })
 
@@ -55,7 +54,6 @@ const renderedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(() => {
 
     return {
       key: node.key,
-      label: node.leaf ? node.data.display_name : node.label,
       leaf: node.leaf,
       data: node.data,
       label: node.label,
@@ -63,6 +61,7 @@ const renderedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(() => {
           return 'pi pi-minus'
       },
       children,
+      onToggle: () => console.log(widgetTree,node),
       draggable: true,
     }
   }

src/components/selectionbar/SubgraphNodeWidget.vue

@@ -42,6 +42,7 @@ onMounted(() => {
 })
 
 function onClick(e) {
+  //props.node?.onToggle()
   const nodeId = props.node.data[0].id
   const widgetName = props.node.data[1].name
   const node = props.node.data[2]
@@ -56,15 +57,17 @@ function onClick(e) {
     }
     isShown.value = true
   } else {
-    //FIXME: widget name collisions
     const index = node.widgets.findIndex((w) => w.name === widgetName)
     if (index < 0) throw new Error("Can't disable missing widget")
-    const w = node.widgets.splice(index, 1)
+    const [w] = node.widgets.splice(index, 1)
     if (widgetStates.has(w.id)) {
       widgetStates.get(w.id).active = false
     }
     const { properties } = node
-    properties.proxyWidgets = properties.proxyWidgets.filter((p) => p[1] !== widgetName)
+    properties.proxyWidgets = properties.proxyWidgets.filter((p) => {
+    return p[1] !== widgetName 
+      //NOTE: intentional loose as nodeId is often string/int
+      || p[0] != nodeId})
 
     isShown.value = false
   }
@@ -73,7 +76,4 @@ function onClick(e) {
 </script>
 
 <style scoped>
-.node-lib-node-container {
-  @apply h-full w-full;
-}
 </style>

src/lib/litegraph/src/subgraph/SubgraphNode.ts

@@ -594,6 +594,7 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     return this.addProxyFromOverlay({__proto__:overlay})
   }
   addProxyFromOverlay(overlay: Object) {
+    overlay.label = `${overlay.nodeId}: ${overlay.widgetName}`
     overlay.graph = this.subgraph
     overlay.isProxyWidget = true
     //TODO: Add minimal caching for linkedWidget?
@@ -625,7 +626,7 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
         }
         //NOTE: p may be undefined
         let r = rest.at(-1)
-        if (['y', 'last_y', 'width', 'computedHeight', 'afterQueued', 'beforeQueued', 'onRemove', 'isProxyWidget'].includes(p))
+        if (['y', 'last_y', 'width', 'computedHeight', 'afterQueued', 'beforeQueued', 'onRemove', 'isProxyWidget', 'label'].includes(p))
           t = overlay
         else {
           t = lw