From ce9cfdb9752b1e2333da6cced00ea7688a7815ea Mon Sep 17 00:00:00 2001
From: Austin Mroz <AustinMroz@utexas.edu>
Date: Thu, 28 Nov 2024 02:23:50 -0600
Subject: [PATCH] Check for swapped node on interval.

Not ideal, but implementation is low cost and ensures the displayed
documentation properly updates.
---
 .../sidebar/tabs/DocumentationSidebarTab.vue   | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/sidebar/tabs/DocumentationSidebarTab.vue b/src/components/sidebar/tabs/DocumentationSidebarTab.vue
index d6d8dce9d..b9837fbe3 100644
--- a/src/components/sidebar/tabs/DocumentationSidebarTab.vue
+++ b/src/components/sidebar/tabs/DocumentationSidebarTab.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!hasAnyDoc()">No documentation available</div>
+  <div v-if="!hasAnyDoc()">Select a node to see documentation.</div>
   <div v-else-if="rawDoc" ref="docElement" v-html="rawDoc"></div>
   <div v-else ref="docElement">
     <div class="doc-node">{{ title }}</div>
@@ -27,7 +27,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, onBeforeUnmount, isReactive } from 'vue'
 import { app } from '@/scripts/app'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useHoveredItemStore } from '@/stores/graphStore'
@@ -132,7 +132,11 @@ function updateNode(node?) {
     // Graph has no nodes
     return
   }
-  def = LiteGraph.getNodeType(node.type).nodeData
+  let newDef = LiteGraph.getNodeType(node.type).nodeData
+  if (def == newDef) {
+    return
+  }
+  def = newDef
   title.value = def.display_name
   if (Array.isArray(def.description)) {
     rawDoc.value = def.description[1]
@@ -191,8 +195,12 @@ watch(hoveredItemStore, (hoveredItem) => {
     hoveredItem.value = null
   }
 })
-
-watch(() => canvasStore?.canvas?.current_node, updateNode)
+if (isReactive(canvasStore?.canvas)) {
+  watch(() => canvasStore.canvas?.current_node, updateNode)
+} else {
+  let interval = setInterval(updateNode, 1000)
+  onBeforeUnmount(() => clearInterval(this.interval))
+}
 updateNode()
 </script>