Typing fixes, initial tests

browser_tests/documentationSidebar.spec.ts

@@ -0,0 +1,63 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './ComfyPage'
+
+test.describe('Documentation Sidebar', () => {
+  test('Sidebar registered', async ({ comfyPage }) => {
+    await expect(
+      comfyPage.page.locator('.documentationSidebar-tab-button')
+    ).toBeVisible()
+  })
+  test('Parses help for basic node', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('default')
+    await comfyPage.page.locator('.documentationSidebar-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.loadWorkflow('default')
+    await comfyPage.page.locator('.documentationSidebar-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(
+        '.side-bar-panel > div > div > div > div:nth-child(4)'
+      )
+    ).toBeFocused()
+  })
+  test('Updates when a new node is selected', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('default')
+    await comfyPage.page.locator('.documentationSidebar-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.describe('Theming', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
+    })
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
+    })
+    test('Responds to a change in theme', async ({ comfyPage }) => {
+      await comfyPage.loadWorkflow('default')
+      await comfyPage.page.locator('.documentationSidebar-tab-button').click()
+      const docPane = comfyPage.page.locator('.sidebar-content-container')
+      await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+      await expect(docPane).toHaveScreenshot(
+        'documentation-sidebar-light-theme.png'
+      )
+    })
+  })
+})

src/extensions/core/documentationSidebar.ts

@@ -1,8 +1,10 @@
 import { app } from '../../scripts/app'
-import { api } from '../../scripts/api'
 import { getColorPalette } from './colorPalette'
+import type { CustomSidebarTabExtension } from '../../types/extensionTypes'
+import { LiteGraph } from '@comfyorg/litegraph'
 
 var helpDOM = document.createElement('div')
+var cdef
 
 function setCollapse(el, doCollapse) {
   if (doCollapse) {
@@ -36,16 +38,16 @@ function setCollapse(el, doCollapse) {
     }
   }
 }
-helpDOM.collapseOnClick = function () {
+function collapseOnClick() {
   let doCollapse = this.children[0].innerHTML == '-'
   setCollapse(this.parentElement, doCollapse)
 }
 //TODO: connect with doc tooltips
 //If doc sidebar is opened, the current node should not display tooltips,
 //but navigate the sidebar pane as appropriate.
-helpDOM.selectHelp = function (name: string, value?: string) {
-  if (helpDOM.def[2]?.select) {
-    return helpDOM.def[2].select(this, name, value)
+function selectHelp(name: string, value?: string) {
+  if (cdef[2]?.select) {
+    return cdef[2].select(this, name, value)
   }
   //attempt to navigate to name in help
   function collapseUnlessMatch(items, t) {
@@ -86,24 +88,24 @@ helpDOM.selectHelp = function (name: string, value?: string) {
   }
 }
 app.tooltipCallback = function (node, name, value) {
-  if (node != app.graph._nodes[app.graph._nodes.length - 1]) {
+  if (node != app.canvas.current_node) {
     return false
   }
   if (name == 'DESCRIPTION') {
     return false
   }
-  helpDOM.selectHelp(name, value)
+  selectHelp(name, value)
   return true
 }
-function updateNode(node) {
+function updateNode(node?) {
   //Always use latest node. If it lacks documentation, that should be communicated
   //instead of confusing users by picking a different recent node that does
-  node ||= app.graph._nodes[app.graph._nodes.length - 1]
+  node ||= app.canvas.current_node
   const def = LiteGraph.getNodeType(node.type).nodeData
-  if (helpDOM.def == def) {
+  if (cdef == def) {
     return
   }
-  helpDOM.def = def
+  cdef = def
   if (Array.isArray(def.description)) {
     helpDOM.innerHTML = def.description[1]
   } else {
@@ -166,12 +168,12 @@ docStyleElement.innerHTML = documentationStyle
 document.body.append(docStyleElement)
 
 var bringToFront
-let documentationSidebar = {
-  id: 'documentationSidebar',
-  title: 'Documentation',
-  icon: 'DocumentationIcon',
-  type: 'custom',
-  render: (e) => {
+class DocumentationSidebar implements CustomSidebarTabExtension {
+  id = 'documentationSidebar'
+  title = 'Documentation'
+  type
+  icon = 'DocumentationIcon'
+  render(e) {
     if (!bringToFront) {
       var bringToFront = app.canvas.bringToFront
       app.canvas.bringToFront = function (node) {
@@ -207,9 +209,9 @@ let documentationSidebar = {
     if (!e?.children?.length) {
       e.appendChild(helpDOM)
     }
-    if (helpDOM.def.description[2]?.render) {
-      helpDOM.def.description[2].render(e)
+    if (cdef.description[2]?.render) {
+      cdef.description[2].render(e)
     }
   }
 }
-app.extensionManager.registerSidebarTab(documentationSidebar)
+app.extensionManager.registerSidebarTab(new DocumentationSidebar())

src/scripts/app.ts

@@ -120,6 +120,7 @@ export class ComfyApp {
   canvas: LGraphCanvas
   dragOverNode: LGraphNode | null
   canvasEl: HTMLCanvasElement
+  tooltipCallback?: (node: LGraphNode, name: string, value?: string) => boolean
   // x, y, scale
   zoom_drag_start: [number, number, number] | null
   lastNodeErrors: any[] | null