Parse description from node doc comments (#2089)

* Parse description from node doc comments

* Add node description tooltips

* Code review

---------

Co-authored-by: Adam G <adamgerhant@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/components/floating-menus/NodeCatalog.svelte

@@ -90,7 +90,7 @@
 					<TextLabel>{nodeCategory[0]}</TextLabel>
 				</summary>
 				{#each nodeCategory[1].nodes as nodeType}
-					<TextButton {disabled} label={nodeType.name} action={() => dispatch("selectNodeType", nodeType.name)} />
+					<TextButton {disabled} label={nodeType.name} tooltip={$nodeGraph.nodeDescriptions.get(nodeType.name)} action={() => dispatch("selectNodeType", nodeType.name)} />
 				{/each}
 			</details>
 		{:else}

frontend/src/components/views/Graph.svelte

@@ -461,6 +461,7 @@
 			{@const stackDataInput = node.exposedInputs[0]}
 			{@const layerAreaWidth = $nodeGraph.layerWidths.get(node.id) || 8}
 			{@const layerChainWidth = $nodeGraph.chainWidths.get(node.id) || 0}
+			{@const description = (node.reference && $nodeGraph.nodeDescriptions.get(node.reference)) || undefined}
 			<div
 				class="layer"
 				class:selected={$nodeGraph.selected.includes(node.id)}
@@ -474,6 +475,7 @@
 				style:--data-color-dim={`var(--color-data-${(node.primaryOutput?.dataType || "General").toLowerCase()}-dim)`}
 				style:--layer-area-width={layerAreaWidth}
 				style:--node-chain-area-left-extension={layerChainWidth !== 0 ? layerChainWidth + 0.5 : 0}
+				title={description + (editor.handle.inDevelopmentMode() ? `\n\nNode ID: ${node.id}` : "")}
 				data-node={node.id}
 				bind:this={nodeElements[nodeIndex]}
 			>
@@ -556,9 +558,7 @@
 				{/if}
 				<div class="details">
 					<!-- TODO: Allow the user to edit the name, just like in the Layers panel -->
-					<span title={editor.handle.inDevelopmentMode() ? `Node ID: ${node.id}` : undefined}>
-						{node.displayName}
-					</span>
+					<span>{node.displayName}</span>
 				</div>
 				<div class="solo-drag-grip" title="Drag only this layer without pushing others outside the stack"></div>
 				<IconButton
@@ -604,6 +604,7 @@
 		{#each Array.from($nodeGraph.nodes.values()).flatMap((node, nodeIndex) => (node.isLayer ? [] : [{ node, nodeIndex }])) as { node, nodeIndex } (nodeIndex)}
 			{@const exposedInputsOutputs = [...node.exposedInputs, ...node.exposedOutputs]}
 			{@const clipPathId = String(Math.random()).substring(2)}
+			{@const description = (node.reference && $nodeGraph.nodeDescriptions.get(node.reference)) || undefined}
 			<div
 				class="node"
 				class:selected={$nodeGraph.selected.includes(node.id)}
@@ -614,6 +615,7 @@
 				style:--clip-path-id={`url(#${clipPathId})`}
 				style:--data-color={`var(--color-data-${(node.primaryOutput?.dataType || "General").toLowerCase()})`}
 				style:--data-color-dim={`var(--color-data-${(node.primaryOutput?.dataType || "General").toLowerCase()}-dim)`}
+				title={description + (editor.handle.inDevelopmentMode() ? `\n\nNode ID: ${node.id}` : "")}
 				data-node={node.id}
 				bind:this={nodeElements[nodeIndex]}
 			>
@@ -625,7 +627,7 @@
 				<div class="primary" class:in-selected-network={$nodeGraph.inSelectedNetwork} class:no-secondary-section={exposedInputsOutputs.length === 0}>
 					<IconLabel icon={nodeIcon(node.reference)} />
 					<!-- TODO: Allow the user to edit the name, just like in the Layers panel -->
-					<TextLabel tooltip={editor.handle.inDevelopmentMode() ? `Node ID: ${node.id}` : undefined}>{node.displayName}</TextLabel>
+					<TextLabel>{node.displayName}</TextLabel>
 				</div>
 				<!-- Secondary rows -->
 				{#if exposedInputsOutputs.length > 0}

frontend/src/state-providers/node-graph.ts

@@ -10,6 +10,7 @@ import {
 	type FrontendNodeWire as FrontendNodeWire,
 	type FrontendNodeType,
 	type WirePath,
+	SendUIMetadata,
 	UpdateBox,
 	UpdateClickTargets,
 	UpdateContextMenuInformation,
@@ -19,7 +20,6 @@ import {
 	UpdateNodeGraph,
 	UpdateNodeGraphSelection,
 	UpdateNodeGraphTransform,
-	UpdateNodeTypes,
 	UpdateNodeThumbnail,
 	UpdateWirePathInProgress,
 	UpdateZoomWithScroll,
@@ -38,6 +38,8 @@ export function createNodeGraphState(editor: Editor) {
 		nodes: new Map<bigint, FrontendNode>(),
 		wires: [] as FrontendNodeWire[],
 		wirePathInProgress: undefined as WirePath | undefined,
+		inputTypeDescriptions: new Map<string, string>(),
+		nodeDescriptions: new Map<string, string>(),
 		nodeTypes: [] as FrontendNodeType[],
 		zoomWithScroll: false as boolean,
 		thumbnails: new Map<bigint, string>(),
@@ -47,6 +49,14 @@ export function createNodeGraphState(editor: Editor) {
 	});
 
 	// Set up message subscriptions on creation
+	editor.subscriptions.subscribeJsMessage(SendUIMetadata, (UIMetadata) => {
+		update((state) => {
+			state.inputTypeDescriptions = UIMetadata.inputTypeDescriptions;
+			state.nodeDescriptions = UIMetadata.nodeDescriptions;
+			state.nodeTypes = UIMetadata.nodeTypes;
+			return state;
+		});
+	});
 	editor.subscriptions.subscribeJsMessage(UpdateBox, (updateBox) => {
 		update((state) => {
 			state.box = updateBox.box;
@@ -108,12 +118,6 @@ export function createNodeGraphState(editor: Editor) {
 			return state;
 		});
 	});
-	editor.subscriptions.subscribeJsMessage(UpdateNodeTypes, (updateNodeTypes) => {
-		update((state) => {
-			state.nodeTypes = updateNodeTypes.nodeTypes;
-			return state;
-		});
-	});
 	editor.subscriptions.subscribeJsMessage(UpdateNodeThumbnail, (updateNodeThumbnail) => {
 		update((state) => {
 			state.thumbnails.set(updateNodeThumbnail.id, updateNodeThumbnail.value);

frontend/src/wasm-communication/messages.ts

@@ -89,7 +89,14 @@ export class UpdateNodeGraphTransform extends JsMessage {
 	readonly transform!: NodeGraphTransform;
 }
 
-export class UpdateNodeTypes extends JsMessage {
+const InputTypeDescriptions = Transform(({ obj }) => new Map(obj.inputTypeDescriptions));
+const NodeDescriptions = Transform(({ obj }) => new Map(obj.nodeDescriptions));
+
+export class SendUIMetadata extends JsMessage {
+	@InputTypeDescriptions
+	readonly inputTypeDescriptions!: Map<string, string>;
+	@NodeDescriptions
+	readonly nodeDescriptions!: Map<string, string>;
 	@Type(() => FrontendNode)
 	readonly nodeTypes!: FrontendNodeType[];
 }
@@ -1547,6 +1554,7 @@ export const messageMakers: Record<string, MessageMaker> = {
 	DisplayEditableTextbox,
 	DisplayEditableTextboxTransform,
 	DisplayRemoveEditableTextbox,
+	SendUIMetadata,
 	TriggerAboutGraphiteLocalizedCommitDate,
 	TriggerCopyToClipboardBlobUrl,
 	TriggerDelayedZoomCanvasToFitAll,
@@ -1596,7 +1604,6 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateNodeGraphSelection,
 	UpdateNodeGraphTransform,
 	UpdateNodeThumbnail,
-	UpdateNodeTypes,
 	UpdateOpenDocumentsList,
 	UpdatePropertyPanelSectionsLayout,
 	UpdateToolOptionsLayout,