Add a sidebar tab for documentation

browser_tests/documentationSidebar.spec.ts

@@ -0,0 +1,125 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
+const nodeDef = {
+  title: 'TestNodeAdvancedDoc'
+}
+
+test.describe('Documentation Sidebar', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('default')
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    const currentThemeId = await comfyPage.menu.getThemeId()
+    if (currentThemeId !== 'dark') {
+      await comfyPage.menu.toggleTheme()
+    }
+  })
+
+  test('Sidebar registered', async ({ comfyPage }) => {
+    await expect(
+      comfyPage.page.locator('.documentation-tab-button')
+    ).toBeVisible()
+  })
+  test('Parses help for basic node', async ({ comfyPage }) => {
+    await comfyPage.page.locator('.documentation-tab-button').click()
+    const docPane = comfyPage.page.locator('.sidebar-content-container')
+    //Check that each independently parsed element exists
+    await expect(docPane).toContainText('Load Checkpoint')
+    await expect(docPane).toContainText('Loads a diffusion model')
+    await expect(docPane).toContainText('The name of the checkpoint')
+    await expect(docPane).toContainText('The VAE model used')
+  })
+  test('Responds to hovering over node', async ({ comfyPage }) => {
+    await comfyPage.page.locator('.documentation-tab-button').click()
+    const docPane = comfyPage.page.locator('.sidebar-content-container')
+    await comfyPage.page.mouse.move(321, 593)
+    const tooltipTimeout = 500
+    await comfyPage.page.waitForTimeout(tooltipTimeout + 16)
+    await expect(comfyPage.page.locator('.node-tooltip')).not.toBeVisible()
+    await expect(
+      comfyPage.page.locator('.sidebar-content-container>div>div:nth-child(4)')
+    ).toBeFocused()
+  })
+  test('Updates when a new node is selected', async ({ comfyPage }) => {
+    await comfyPage.page.locator('.documentation-tab-button').click()
+    const docPane = comfyPage.page.locator('.sidebar-content-container')
+    await comfyPage.page.mouse.click(557, 440)
+    await expect(docPane).not.toContainText('Load Checkpoint')
+    await expect(docPane).toContainText('CLIP Text Encode (Prompt)')
+    await expect(docPane).toContainText('The text to be encoded')
+    await expect(docPane).toContainText(
+      'A conditioning containing the embedded text'
+    )
+  })
+  test('Responds to a change in theme', async ({ comfyPage }) => {
+    await comfyPage.page.locator('.documentation-tab-button').click()
+    const docPane = comfyPage.page.locator('.sidebar-content-container')
+    await comfyPage.menu.toggleTheme()
+    await expect(docPane).toHaveScreenshot(
+      'documentation-sidebar-light-theme.png'
+    )
+  })
+})
+test.describe('Advanced Description tests', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    //register test node and add to graph
+    await comfyPage.page.evaluate(async (node) => {
+      const app = window['app']
+      await app.registerNodeDef(node.name, node)
+      app.addNodeOnGraph(node)
+    }, advDocNode)
+  })
+  test('Description displays as raw html', async ({ comfyPage }) => {
+    await comfyPage.page.locator('.documentation-tab-button').click()
+    const docPane = comfyPage.page.locator('.sidebar-content-container>div')
+    await expect(docPane).toHaveJSProperty(
+      'innerHTML',
+      advDocNode.description[1]
+    )
+  })
+  test('selected function', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      const app = window['app']
+      const desc =
+        LiteGraph.registered_node_types['Test_AdvancedDescription'].nodeData
+          .description
+      desc[2].select = (element, name, value) => {
+        element.children[0].innerText = name + ' ' + value
+      }
+    })
+    await comfyPage.page.locator('.documentation-tab-button').click()
+    const docPane = comfyPage.page.locator('.sidebar-content-container')
+    await comfyPage.page.mouse.move(307, 80)
+    const tooltipTimeout = 500
+    await comfyPage.page.waitForTimeout(tooltipTimeout + 16)
+    await expect(comfyPage.page.locator('.node-tooltip')).not.toBeVisible()
+    await expect(docPane).toContainText('int_input 0')
+  })
+})
+
+const advDocNode = {
+  display_name: 'Node With Advanced Description',
+  name: 'Test_AdvancedDescription',
+  input: {
+    required: {
+      int_input: [
+        'INT',
+        { tooltip: "an input tooltip that won't be displayed in sidebar" }
+      ]
+    }
+  },
+  output: ['INT'],
+  output_name: ['int_output'],
+  output_tooltips: ["An output tooltip that won't be displayed in the sidebar"],
+  output_is_list: false,
+  description: [
+    'A node with description in the advanced format',
+    `
+A long form description that will be displayed in the sidebar.
+<div doc_title="INT">Can include arbitrary html</div>
+<div doc_title="int_input">or out of order widgets</div>
+`,
+    {}
+  ]
+}

src/components/graph/NodeTooltip.vue

@@ -10,20 +10,23 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref } from 'vue'
+import { nextTick, ref, watch } from 'vue'
 import { LiteGraph } from '@comfyorg/litegraph'
 import { app as comfyApp } from '@/scripts/app'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useHoveredItemStore } from '@/stores/graphStore'
 import { useEventListener } from '@vueuse/core'
 
 let idleTimeout: number
 const nodeDefStore = useNodeDefStore()
+const hoveredItemStore = useHoveredItemStore()
 const tooltipRef = ref<HTMLDivElement>()
 const tooltipText = ref('')
 const left = ref<string>()
 const top = ref<string>()
 
 const hideTooltip = () => (tooltipText.value = null)
+const clearHovered = () => (hoveredItemStore.value = null)
 
 const showTooltip = async (tooltip: string | null | undefined) => {
   if (!tooltip) return
@@ -43,20 +46,52 @@ const showTooltip = async (tooltip: string | null | undefined) => {
     top.value = comfyApp.canvas.mouse[1] + rect.height + 'px'
   }
 }
+watch(hoveredItemStore, (hoveredItem) => {
+  if (!hoveredItem.value) {
+    return hideTooltip()
+  }
+  const item = hoveredItem.value
+  const nodeDef =
+    nodeDefStore.nodeDefsByName[item.node.type] ??
+    LiteGraph.registered_node_types[item.node.type]?.nodeData
+  if (item.type == 'Title') {
+    let description = nodeDef.description
+    if (Array.isArray(description)) {
+      description = description[0]
+    }
+    return showTooltip(description)
+  } else if (item.type == 'Input') {
+    showTooltip(nodeDef.input.getInput(item.inputName)?.tooltip)
+  } else if (item.type == 'Output') {
+    showTooltip(nodeDef?.output?.all?.[item.outputSlot]?.tooltip)
+  } else if (item.type == 'Widget') {
+    showTooltip(
+      item.widget.tooltip ??
+        (
+          nodeDef.input.optional?.[item.widget.name] ??
+          nodeDef.input.required?.[item.widget.name]
+        )?.tooltip
+    )
+  } else {
+    hideTooltip()
+  }
+})
 
 const onIdle = () => {
   const { canvas } = comfyApp
   const node = canvas.node_over
   if (!node) return
 
   const ctor = node.constructor as { title_mode?: 0 | 1 | 2 | 3 }
-  const nodeDef = nodeDefStore.nodeDefsByName[node.type]
+  const nodeDef =
+    nodeDefStore.nodeDefsByName[node.type] ??
+    LiteGraph.registered_node_types[node.type]?.nodeData
 
   if (
     ctor.title_mode !== LiteGraph.NO_TITLE &&
     canvas.graph_mouse[1] < node.pos[1] // If we are over a node, but not within the node then we are on its title
   ) {
-    return showTooltip(nodeDef.description)
+    hoveredItemStore.value = { node, type: 'Title' }
   }
 
   if (node.flags?.collapsed) return
@@ -69,7 +104,7 @@ const onIdle = () => {
   )
   if (inputSlot !== -1) {
     const inputName = node.inputs[inputSlot].name
-    return showTooltip(nodeDef.input.getInput(inputName)?.tooltip)
+    hoveredItemStore.value = { node, type: 'Input', inputName }
   }
 
   const outputSlot = canvas.isOverNodeOutput(
@@ -79,28 +114,26 @@ const onIdle = () => {
     [0, 0]
   )
   if (outputSlot !== -1) {
-    return showTooltip(nodeDef.output.all?.[outputSlot]?.tooltip)
+    hoveredItemStore.value = { node, type: 'Output', outputSlot }
   }
 
   const widget = comfyApp.canvas.getWidgetAtCursor()
   // Dont show for DOM widgets, these use native browser tooltips as we dont get proper mouse events on these
   if (widget && !widget.element) {
-    return showTooltip(
-      widget.tooltip ?? nodeDef.input.getInput(widget.name)?.tooltip
-    )
+    hoveredItemStore.value = { node, type: 'Widget', widget }
   }
 }
 
 const onMouseMove = (e: MouseEvent) => {
-  hideTooltip()
+  clearHovered()
   clearTimeout(idleTimeout)
 
   if ((e.target as Node).nodeName !== 'CANVAS') return
   idleTimeout = window.setTimeout(onIdle, 500)
 }
 
 useEventListener(window, 'mousemove', onMouseMove)
-useEventListener(window, 'click', hideTooltip)
+useEventListener(window, 'click', clearHovered)
 </script>
 
 <style lang="css" scoped>

src/components/node/NodePreview.vue

@@ -74,7 +74,11 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
         backgroundColor: litegraphColors.WIDGET_BGCOLOR
       }"
     >
-      {{ nodeDef.description }}
+      {{
+        Array.isArray(nodeDef.description)
+          ? nodeDef.description[0]
+          : nodeDef.description
+      }}
     </div>
   </div>
 </template>