Convert DefinitionIdentifier to string in JavaScript

Author: adamgerhant

editor/src/messages/frontend/frontend_message.rs

@@ -2,7 +2,6 @@ use super::utility_types::{DocumentDetails, MouseCursorIcon, OpenDocument};
 use crate::messages::app_window::app_window_message_handler::AppWindowPlatform;
 use crate::messages::input_mapper::utility_types::misc::ActionShortcut;
 use crate::messages::layout::utility_types::widget_prelude::*;
-use crate::messages::portfolio::document::node_graph::document_node_definitions::DefinitionIdentifier;
 use crate::messages::portfolio::document::node_graph::utility_types::{
 	BoxSelection, ContextMenuInformation, FrontendClickTargets, FrontendGraphInput, FrontendGraphOutput, FrontendNode, FrontendNodeType, NodeGraphErrorDiagnostic, Transform,
 };
@@ -61,7 +60,7 @@ pub enum FrontendMessage {
 	// Send prefix: Send global, static data to the frontend that is never updated
 	SendUIMetadata {
 		#[serde(rename = "nodeDescriptions")]
-		node_descriptions: Vec<(DefinitionIdentifier, String)>,
+		node_descriptions: Vec<(String, String)>,
 		#[serde(rename = "nodeTypes")]
 		node_types: Vec<FrontendNodeType>,
 	},

editor/src/messages/portfolio/document/node_graph/document_node_definitions.rs

@@ -81,29 +81,29 @@ impl DefinitionIdentifier {
 				}),
 		}
 	}
+
+	pub fn serialized(&self) -> String {
+		match self {
+			DefinitionIdentifier::ProtoNode(id) => {
+				format!("Proto Node:{}", id.as_str())
+			}
+			DefinitionIdentifier::Network(data) => {
+				format!("Network:{}", data)
+			}
+		}
+	}
 }
 
 impl From<Value> for DefinitionIdentifier {
 	fn from(value: Value) -> Self {
-		match value {
-			Value::Object(mut map) => {
-				let ty = map.remove("type").unwrap().as_str().unwrap().to_owned();
+		let s = value.as_str().expect("DefinitionIdentifier value must be a string");
 
-				match ty.as_ref() {
-					"Network" => {
-						let data = map.remove("data").unwrap().as_str().unwrap().to_owned();
-						DefinitionIdentifier::Network(data)
-					}
-					"ProtoNode" => {
-						let value = map.remove("data").unwrap();
-						let proto: ProtoNodeIdentifier = serde_json::from_value(value).unwrap();
-						DefinitionIdentifier::ProtoNode(proto)
-					}
-					_ => panic!("Unknown `DefinitionIdentifier` type: {:?}", ty),
-				}
-			}
+		let (ty, data) = s.split_once(':').expect("Invalid DefinitionIdentifier key format");
 
-			_ => panic!("Expected a JSON object to convert to `DefinitionIdentifier`"),
+		match ty {
+			"Proto Node" => DefinitionIdentifier::ProtoNode(ProtoNodeIdentifier::with_owned_string(data.to_string())),
+			"Network" => DefinitionIdentifier::Network(data.to_string()),
+			other => panic!("Unknown DefinitionIdentifier type: {other}"),
 		}
 	}
 }
@@ -2682,7 +2682,7 @@ pub fn collect_node_types() -> Vec<FrontendNodeType> {
 				name = identifier.implementation_name_from_identifier()
 			}
 			FrontendNodeType {
-				identifier: identifier.clone(),
+				identifier: identifier.serialized(),
 				name,
 				category: definition.category.to_string(),
 				input_types,
@@ -2691,10 +2691,15 @@ pub fn collect_node_types() -> Vec<FrontendNodeType> {
 		.collect()
 }
 
-pub fn collect_node_descriptions() -> Vec<(DefinitionIdentifier, String)> {
+pub fn collect_node_descriptions() -> Vec<(String, String)> {
 	DOCUMENT_NODE_TYPES
 		.iter()
-		.map(|(identifier, definition)| (identifier.clone(), if definition.description != "TODO" { definition.description.to_string() } else { String::new() }))
+		.map(|(identifier, definition)| {
+			(
+				identifier.serialized(),
+				if definition.description != "TODO" { definition.description.to_string() } else { String::new() },
+			)
+		})
 		.collect()
 }
 

editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs

@@ -2599,7 +2599,7 @@ impl NodeGraphMessageHandler {
 					.node_metadata(&node_id, breadcrumb_network_path)
 					.is_some_and(|node_metadata| node_metadata.persistent_metadata.is_layer()),
 				can_be_layer: network_interface.is_eligible_to_be_layer(&node_id, breadcrumb_network_path),
-				reference: network_interface.reference(&node_id, breadcrumb_network_path),
+				reference: network_interface.reference(&node_id, breadcrumb_network_path).map(|reference| reference.serialized()),
 				display_name: network_interface.display_name(&node_id, breadcrumb_network_path),
 				implementation_name: network_interface.implementation_name(&node_id, breadcrumb_network_path),
 				primary_input,

editor/src/messages/portfolio/document/node_graph/utility_types.rs

@@ -1,4 +1,3 @@
-use super::document_node_definitions::DefinitionIdentifier;
 use glam::{DVec2, IVec2};
 use graph_craft::document::NodeId;
 use graph_craft::document::value::TaggedValue;
@@ -79,7 +78,7 @@ pub struct FrontendNode {
 	pub is_layer: bool,
 	#[serde(rename = "canBeLayer")]
 	pub can_be_layer: bool,
-	pub reference: Option<DefinitionIdentifier>,
+	pub reference: Option<String>,
 	#[serde(rename = "displayName")]
 	pub display_name: String,
 	#[serde(rename = "implementationName")]
@@ -104,7 +103,7 @@ pub struct FrontendNode {
 
 #[derive(Clone, Debug, Eq, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
 pub struct FrontendNodeType {
-	pub identifier: DefinitionIdentifier,
+	pub identifier: String,
 	pub name: String,
 	pub category: String,
 	#[serde(rename = "inputTypes")]

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

@@ -1,15 +1,15 @@
 <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";
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 	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,10 +125,7 @@
 						{disabled}
 						label={nodeType.name}
 						tooltipLabel={nodeType.name}
-						tooltipDescription={[...$nodeGraph.nodeDescriptions.entries()]
-							.find(([key]) => key.type === nodeType.identifier?.type && key.data === nodeType.identifier?.data)
-							?.at(1)
-							?.toString()}
+						tooltipDescription={nodeType.identifier ? $nodeGraph.nodeDescriptions.get(nodeType.identifier) : undefined}
 						action={() => dispatch("selectNodeType", nodeType.identifier)}
 					/>
 				{/each}

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 = [...$nodeGraph.nodeDescriptions.entries()].find(([key]) => key.type === node.reference?.type && key.data === node.reference?.data)?.at(1) || 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 = [...$nodeGraph.nodeDescriptions.entries()].find(([key]) => key.type === node.reference?.type && key.data === node.reference?.data)?.at(1) || 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;
 

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[],