Fix regression where tooltip node descriptions in the graph stopped showing (#3639)

* Fix tooltips

* Convert DefinitionIdentifier to string in JavaScript

* Code review

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, getContext, onMount } from "svelte";
 
-	import type { DefinitionIdentifier, FrontendNodeType } from "@graphite/messages";
+	import type { FrontendNodeType } from "@graphite/messages";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
@@ -9,7 +9,7 @@
 	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
-	const dispatch = createEventDispatcher<{ selectNodeType: DefinitionIdentifier }>();
+	const dispatch = createEventDispatcher<{ selectNodeType: string }>();
 	const nodeGraph = getContext<NodeGraphState>("nodeGraph");
 
 	// Content
@@ -125,7 +125,7 @@
 						{disabled}
 						label={nodeType.name}
 						tooltipLabel={nodeType.name}
-						tooltipDescription={$nodeGraph.nodeDescriptions.get(nodeType.identifier)}
+						tooltipDescription={nodeType.identifier ? $nodeGraph.nodeDescriptions.get(nodeType.identifier) : undefined}
 						action={() => dispatch("selectNodeType", nodeType.identifier)}
 					/>
 				{/each}

frontend/src/components/panels/Layers.svelte

@@ -644,15 +644,15 @@
 							{@html $nodeGraph.thumbnails.get(listing.entry.id)}
 						{/if}
 					</div>
-					{#if listing.entry.reference.type === "Network" && listing.entry.reference.data === "Artboard"}
-						<IconLabel icon="Artboard" class="layer-type-icon" tooltipLabel="Artboard" />
+					{#if listing.entry.iconName}
+						<IconLabel icon={listing.entry.iconName} class="layer-type-icon" tooltipLabel="Artboard" />
 					{/if}
 					<LayoutRow class="layer-name" on:dblclick={() => onEditLayerName(listing)}>
 						<input
 							data-text-input
 							type="text"
 							value={listing.entry.alias}
-							placeholder={listing.entry.reference.data}
+							placeholder={listing.entry.implementationName}
 							disabled={!listing.editingName}
 							on:blur={() => onEditLayerNameDeselect(listing)}
 							on:keydown={(e) => e.key === "Escape" && onEditLayerNameDeselect(listing)}

frontend/src/components/views/Graph.svelte

@@ -4,7 +4,7 @@
 	import { fade } from "svelte/transition";
 
 	import type { Editor } from "@graphite/editor";
-	import type { DefinitionIdentifier, FrontendGraphInput, FrontendGraphOutput, FrontendNode } from "@graphite/messages";
+	import type { FrontendGraphInput, FrontendGraphOutput, FrontendNode } from "@graphite/messages";
 	import type { NodeGraphState } from "@graphite/state-providers/node-graph";
 
 	import NodeCatalog from "@graphite/components/floating-menus/NodeCatalog.svelte";
@@ -100,7 +100,7 @@
 		return sparse;
 	}
 
-	function createNode(identifier: DefinitionIdentifier) {
+	function createNode(identifier: string) {
 		if ($nodeGraph.contextMenuInformation === undefined) return;
 
 		editor.handle.createNode(identifier, $nodeGraph.contextMenuInformation.contextMenuCoordinates.x, $nodeGraph.contextMenuInformation.contextMenuCoordinates.y);
@@ -481,7 +481,7 @@
 			{@const layerAreaWidth = $nodeGraph.layerWidths.get(node.id) || 8}
 			{@const layerChainWidth = $nodeGraph.chainWidths.get(node.id) || 0}
 			{@const hasLeftInputWire = $nodeGraph.hasLeftInputWire.get(node.id) || false}
-			{@const description = (node.reference && $nodeGraph.nodeDescriptions.get(node.reference)) || undefined}
+			{@const description = node.reference ? $nodeGraph.nodeDescriptions.get(node.reference) : undefined}
 			<div
 				class="layer"
 				class:selected={$nodeGraph.selected.includes(node.id)}
@@ -634,7 +634,7 @@
 			.map(([_, node], nodeIndex) => ({ node, nodeIndex })) as { node, nodeIndex } (nodeIndex)}
 			{@const exposedInputsOutputs = zipWithUndefined(node.exposedInputs, node.exposedOutputs)}
 			{@const clipPathId = String(Math.random()).substring(2)}
-			{@const description = (node.reference && $nodeGraph.nodeDescriptions.get(node.reference)) || undefined}
+			{@const description = node.reference ? $nodeGraph.nodeDescriptions.get(node.reference) : undefined}
 			<div
 				class="node"
 				class:selected={$nodeGraph.selected.includes(node.id)}

frontend/src/messages.ts

@@ -102,7 +102,7 @@ export class UpdateNodeGraphTransform extends JsMessage {
 
 export class SendUIMetadata extends JsMessage {
 	@Transform(({ obj }) => new Map(obj.nodeDescriptions))
-	readonly nodeDescriptions!: Map<DefinitionIdentifier, string>;
+	readonly nodeDescriptions!: Map<string, string>;
 
 	readonly nodeTypes!: FrontendNodeType[];
 }
@@ -220,7 +220,7 @@ export class FrontendNode {
 
 	readonly canBeLayer!: boolean;
 
-	readonly reference!: DefinitionIdentifier | undefined;
+	readonly reference!: string | undefined;
 
 	readonly displayName!: string;
 
@@ -251,7 +251,7 @@ export class FrontendNode {
 }
 
 export class FrontendNodeType {
-	readonly identifier!: DefinitionIdentifier;
+	readonly identifier!: string;
 
 	readonly name!: string;
 
@@ -834,7 +834,9 @@ export class UpdateDocumentLayerDetails extends JsMessage {
 export class LayerPanelEntry {
 	id!: bigint;
 
-	reference!: DefinitionIdentifier;
+	implementationName!: string;
+
+	iconName!: IconName | undefined;
 
 	alias!: string;
 

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

@@ -9,7 +9,6 @@ import {
 	type FrontendNode,
 	type FrontendNodeType,
 	type WirePath,
-	type DefinitionIdentifier,
 	ClearAllNodeGraphWires,
 	SendUIMetadata,
 	UpdateBox,
@@ -45,7 +44,7 @@ export function createNodeGraphState(editor: Editor) {
 		/// The index is the exposed input index. The exports have a first key value of u32::MAX.
 		wires: new Map<bigint, Map<number, WirePath>>(),
 		wirePathInProgress: undefined as WirePath | undefined,
-		nodeDescriptions: new Map<DefinitionIdentifier, string>(),
+		nodeDescriptions: new Map<string, string>(),
 		nodeTypes: [] as FrontendNodeType[],
 		thumbnails: new Map<bigint, string>(),
 		selected: [] as bigint[],