Comfy-Org
Add a sidebar tab for documentation
Much belated, but I wanted to find solutions sufficiently clean for core.
Adds a new sidebar tab for displaying documentation information on nodes. Nodes utilizing the existing tooltip functionality will have their descriptions parsed. While this pane is open, hovering over items on the active node will instead scroll to and briefly highlight the corresponding item in the documentation pane. Alternatively, a node can supply a list for its DESCRIPTION property which consists of
- A short description which is used for node previews and title tooltips
- A full html description
- An optional dict to facilitate data transfer or provide additional configuration
-
render: A function called when the nodes documentation is displayed. -
select: A function called when a node item has been hovered over. Note that both of these current options require a corresponding frontend extension to use. Few nodes will utilize this functionality, but it removes the need for ugly patching on those that do.
-
Further considerations
- Having NodeTooltips import the callback directly from documentationSidebar causes documentationSidebar to load before extensionManager is set in app. The current implementation allows this tooltipCallback to be hooked by other extensions, but seems the cleanest implementation.
- I quite dislike the question mark icon supplied by prime icons and implement an alternative with css. Mention was made of allowing icons other than those supplied by prime icons, but adding a generalized implementation here would be out of scope.
I quite dislike the question mark icon supplied by prime icons and implement an alternative with css. Mention was made of allowing icons other than those supplied by prime icons, but adding a generalized implementation here would be out of scope.
We do have iconify setup now. You can find from a large set of iconify icons here: https://icon-sets.iconify.design/. Here is an example usage in this repo: https://github.com/Comfy-Org/ComfyUI_frontend/blob/39d68bcdc428751d0216e62fc6218b1555db1e46/src/components/graph/GraphCanvasMenu.vue#L36-L39
We do have iconify setup now. You can find from a large set of iconify icons here: https://icon-sets.iconify.design/. Here is an example usage in this repo:
BTW I think I need to find a way support custom iconify icon. The iconify icon is lazy loaded during compile time so it won't be available for dynamic loaded extensions, but it should be necessary in this situation where in core we want to use iconify icon for sidebar tab icon.
Related PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/1169
By making LGraphCanvas shallowReactive, we can observe root object's state directly, and hopefully have the active widget/slot logic handled by litegraph to reduce the overhead of additional event listening.