Migrate to new sidebar registration

src/components/graph/NodeTooltip.vue

@@ -104,7 +104,7 @@ const onIdle = () => {
   )
   if (inputSlot !== -1) {
     const inputName = node.inputs[inputSlot].name
-    if (selectDocItem(node, inputName)) {
+    if (!selectDocItem(node, inputName)) {
       return showTooltip(nodeDef.input.getInput(inputName)?.tooltip)
     }
   }
@@ -117,7 +117,7 @@ const onIdle = () => {
   )
   if (outputSlot !== -1) {
     const outputDef = nodeDef.output.all?.[outputSlot]
-    if (selectDocItem(node, outputDef?.name)) {
+    if (!selectDocItem(node, outputDef?.name)) {
       return showTooltip(outputDef?.tooltip)
     }
   }
@@ -125,7 +125,7 @@ const onIdle = () => {
   const widget = getHoveredWidget()
   // Dont show for DOM widgets, these use native browser tooltips as we dont get proper mouse events on these
   if (widget && !widget.element) {
-    if (selectDocItem(node, widget.name, widget.value)) {
+    if (!selectDocItem(node, widget.name, widget.value)) {
       return showTooltip(
         widget.tooltip ?? nodeDef.input.getInput(widget.name)?.tooltip
       )

src/components/sidebar/tabs/DocumentationSidebarTab.vue

@@ -28,8 +28,9 @@
   </div>
 </template>
 <script lang="ts">
-import { ref, watchEffect } from 'vue'
+import { ref, watch } from 'vue'
 import { app } from '@/scripts/app'
+import { useCanvasStore } from '@/stores/graphStore'
 var docElement = ref(null)
 
 let def
@@ -37,9 +38,6 @@ const inputs = ref([])
 const outputs = ref([])
 
 export function selectDocItem(node, name, value) {
-  if (node != app?.canvas?.current_node || name == 'DESCRIPTION') {
-    return false
-  }
   if (node != app?.canvas?.current_node || name == 'DESCRIPTION') {
     return false
   }
@@ -159,8 +157,6 @@ function updateNode(node?) {
     outputs.value = []
   }
 }
-watchEffect(() => app?.canvas?.current_node, updateNode)
-updateNode()
 function hasInputDoc() {
   return !!inputs.value.length
 }
@@ -169,7 +165,10 @@ function hasAnyDoc() {
 }
 export default {
   setup() {
-    return { hasInputDoc, hasAnyDoc, inputs, outputs, def }
+    const canvasStore = useCanvasStore()
+    watch(() => canvasStore?.canvas?.current_node, updateNode)
+    updateNode()
+    return { hasInputDoc, hasAnyDoc, inputs, outputs, def, docElement }
   }
 }
 </script>

src/hooks/sidebarTabs/documentationSidebarTab.ts

@@ -0,0 +1,18 @@
+import { useQueuePendingTaskCountStore } from '@/stores/queueStore'
+import { markRaw } from 'vue'
+import { useI18n } from 'vue-i18n'
+import DocumentationSidebarTab from '@/components/sidebar/tabs/DocumentationSidebarTab.vue'
+import type { SidebarTabExtension } from '@/types/extensionTypes'
+
+export const useDocumentationSidebarTab = (): SidebarTabExtension => {
+  const { t } = useI18n()
+  const queuePendingTaskCountStore = useQueuePendingTaskCountStore()
+  return {
+    id: 'documentation',
+    icon: 'pi pi-question',
+    title: t('sideToolbar.documentation'),
+    tooltip: t('sideToolbar.documentation'),
+    component: markRaw(DocumentationSidebarTab),
+    type: 'vue'
+  }
+}

src/i18n.ts

@@ -58,6 +58,7 @@ const messages = {
       nodeLibrary: 'Node Library',
       workflows: 'Workflows',
       browseTemplates: 'Browse example templates',
+      documentation: 'Display documentation for nodes',
       openWorkflow: 'Open workflow in local file system',
       newBlankWorkflow: 'Create a new blank workflow',
       nodeLibraryTab: {

src/stores/workspace/sidebarTabStore.ts

@@ -2,6 +2,7 @@ import { useModelLibrarySidebarTab } from '@/hooks/sidebarTabs/modelLibrarySideb
 import { useNodeLibrarySidebarTab } from '@/hooks/sidebarTabs/nodeLibrarySidebarTab'
 import { useQueueSidebarTab } from '@/hooks/sidebarTabs/queueSidebarTab'
 import { useWorkflowsSidebarTab } from '@/hooks/sidebarTabs/workflowsSidebarTab'
+import { useDocumentationSidebarTab } from '@/hooks/sidebarTabs/documentationSidebarTab'
 import { SidebarTabExtension } from '@/types/extensionTypes'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
@@ -57,6 +58,7 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
     registerSidebarTab(useNodeLibrarySidebarTab())
     registerSidebarTab(useModelLibrarySidebarTab())
     registerSidebarTab(useWorkflowsSidebarTab())
+    registerSidebarTab(useDocumentationSidebarTab())
   }
 
   return {