Add secondary inputs to nodes UI (#863)

* Add secondary inputs to UI

* Fix add node

* Dragging nodes

* Add ParameterExposeButton component

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

editor/src/messages/layout/layout_message_handler.rs

@@ -154,6 +154,10 @@ impl<F: Fn(&MessageDiscriminant) -> Vec<KeysGroup>> MessageHandler<LayoutMessage
 						let callback_message = (optional_input.on_update.callback)(optional_input);
 						responses.push_back(callback_message);
 					}
+					Widget::ParameterExposeButton(parameter_expose_button) => {
+						let callback_message = (parameter_expose_button.on_update.callback)(parameter_expose_button);
+						responses.push_back(callback_message);
+					}
 					Widget::PivotAssist(pivot_assist) => {
 						let update_value = value.as_str().expect("RadioInput update was not of type: u64");
 						pivot_assist.position = update_value.into();

editor/src/messages/layout/utility_types/layout_widget.rs

@@ -67,6 +67,7 @@ impl Layout {
 					Widget::LayerReferenceInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::NumberInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::OptionalInput(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
+					Widget::ParameterExposeButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::PopoverButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::TextButton(widget) => Some((&mut widget.tooltip, &mut widget.tooltip_shortcut)),
 					Widget::IconLabel(_)
@@ -294,6 +295,7 @@ pub enum Widget {
 	LayerReferenceInput(LayerReferenceInput),
 	NumberInput(NumberInput),
 	OptionalInput(OptionalInput),
+	ParameterExposeButton(ParameterExposeButton),
 	PivotAssist(PivotAssist),
 	PopoverButton(PopoverButton),
 	RadioInput(RadioInput),

editor/src/messages/layout/utility_types/widgets/button_widgets.rs

@@ -1,5 +1,5 @@
-use crate::messages::input_mapper::utility_types::misc::ActionKeys;
 use crate::messages::layout::utility_types::layout_widget::WidgetCallback;
+use crate::messages::{input_mapper::utility_types::misc::ActionKeys, portfolio::document::node_graph::FrontendGraphDataType};
 
 use derivative::*;
 use serde::{Deserialize, Serialize};
@@ -45,6 +45,26 @@ pub struct PopoverButton {
 	pub tooltip_shortcut: Option<ActionKeys>,
 }
 
+#[derive(Clone, Serialize, Deserialize, Derivative, Default)]
+#[derivative(Debug, PartialEq)]
+#[serde(rename_all(serialize = "camelCase", deserialize = "camelCase"))]
+pub struct ParameterExposeButton {
+	pub exposed: bool,
+
+	#[serde(rename = "dataType")]
+	pub data_type: FrontendGraphDataType,
+
+	pub tooltip: String,
+
+	#[serde(skip)]
+	pub tooltip_shortcut: Option<ActionKeys>,
+
+	// Callbacks
+	#[serde(skip)]
+	#[derivative(Debug = "ignore", PartialEq = "ignore")]
+	pub on_update: WidgetCallback<ParameterExposeButton>,
+}
+
 #[derive(Clone, Serialize, Deserialize, Derivative, Default)]
 #[derivative(Debug, PartialEq)]
 #[serde(rename_all(serialize = "camelCase", deserialize = "camelCase"))]

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

@@ -8,9 +8,26 @@ use graphene::layers::nodegraph_layer::NodeGraphFrameLayer;
 mod document_node_types;
 mod node_properties;
 
-#[derive(Clone, Debug, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
-pub enum DataType {
+#[derive(Clone, Copy, Debug, Default, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
+pub enum FrontendGraphDataType {
+	#[default]
+	#[serde(rename = "general")]
+	General,
+	#[serde(rename = "raster")]
 	Raster,
+	#[serde(rename = "color")]
+	Color,
+	#[serde(rename = "vector")]
+	Vector,
+	#[serde(rename = "number")]
+	Number,
+}
+
+#[derive(Clone, Debug, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
+pub struct NodeGraphInput {
+	#[serde(rename = "dataType")]
+	data_type: FrontendGraphDataType,
+	name: String,
 }
 
 #[derive(Clone, Debug, Eq, PartialEq, serde::Serialize, serde::Deserialize)]
@@ -19,8 +36,8 @@ pub struct FrontendNode {
 	#[serde(rename = "displayName")]
 	pub display_name: String,
 	#[serde(rename = "exposedInputs")]
-	pub exposed_inputs: Vec<DataType>,
-	pub outputs: Vec<DataType>,
+	pub exposed_inputs: Vec<NodeGraphInput>,
+	pub outputs: Vec<FrontendGraphDataType>,
 	pub position: (i32, i32),
 }
 
@@ -98,11 +115,24 @@ impl NodeGraphMessageHandler {
 
 		let mut nodes = Vec::new();
 		for (id, node) in &network.nodes {
+			let Some(node_type) = document_node_types::resolve_document_node_type(&node.name) else{
+				warn!("Node '{}' does not exist in library", node.name);
+				continue
+			};
 			nodes.push(FrontendNode {
 				id: *id,
 				display_name: node.name.clone(),
-				exposed_inputs: node.inputs.iter().filter(|input| input.is_exposed()).map(|_| DataType::Raster).collect(),
-				outputs: vec![DataType::Raster],
+				exposed_inputs: node
+					.inputs
+					.iter()
+					.zip(node_type.inputs)
+					.filter(|(input, _)| input.is_exposed())
+					.map(|(_, input_type)| NodeGraphInput {
+						data_type: input_type.data_type,
+						name: input_type.name.to_string(),
+					})
+					.collect(),
+				outputs: node_type.outputs.to_vec(),
 				position: node.metadata.position,
 			})
 		}
@@ -160,7 +190,7 @@ impl MessageHandler<NodeGraphMessage, (&mut Document, &InputPreprocessorMessageH
 					return;
 				};
 
-				let num_inputs = document_node_type.default_inputs.len();
+				let num_inputs = document_node_type.inputs.len();
 
 				let inner_network = NodeNetwork {
 					inputs: (0..num_inputs).map(|_| 0).collect(),
@@ -182,7 +212,7 @@ impl MessageHandler<NodeGraphMessage, (&mut Document, &InputPreprocessorMessageH
 					node_id,
 					DocumentNode {
 						name: node_type.clone(),
-						inputs: document_node_type.default_inputs.to_vec(),
+						inputs: document_node_type.inputs.iter().map(|input| input.default.clone()).collect(),
 						// TODO: Allow inserting nodes that contain other nodes.
 						implementation: DocumentNodeImplementation::Network(inner_network),
 						metadata: graph_craft::document::DocumentNodeMetadata {
@@ -228,6 +258,7 @@ impl MessageHandler<NodeGraphMessage, (&mut Document, &InputPreprocessorMessageH
 						node.metadata.position.1 += displacement_y;
 					}
 				}
+				Self::send_graph(network, responses);
 			}
 			NodeGraphMessage::OpenNodeGraph { layer_path } => {
 				if let Some(_old_layer_path) = self.layer_path.replace(layer_path) {

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

@@ -1,86 +1,175 @@
-use std::borrow::Cow;
+use super::{FrontendGraphDataType, FrontendNodeType};
+use crate::messages::layout::utility_types::layout_widget::{LayoutGroup, Widget, WidgetHolder};
+use crate::messages::layout::utility_types::widgets::label_widgets::TextLabel;
 
 use graph_craft::document::value::TaggedValue;
-use graph_craft::document::NodeInput;
+use graph_craft::document::{DocumentNode, NodeId, NodeInput};
 use graph_craft::proto::{NodeIdentifier, Type};
 use graphene_std::raster::Image;
 
-use super::FrontendNodeType;
+use std::borrow::Cow;
+
+pub struct DocumentInputType {
+	pub name: &'static str,
+	pub data_type: FrontendGraphDataType,
+	pub default: NodeInput,
+}
 
 pub struct DocumentNodeType {
 	pub name: &'static str,
 	pub identifier: NodeIdentifier,
-	pub default_inputs: &'static [NodeInput],
+	pub inputs: &'static [DocumentInputType],
+	pub outputs: &'static [FrontendGraphDataType],
+	pub properties: fn(&DocumentNode, NodeId) -> Vec<LayoutGroup>,
 }
 
 // TODO: Dynamic node library
-static DOCUMENT_NODE_TYPES: [DocumentNodeType; 5] = [
+static DOCUMENT_NODE_TYPES: [DocumentNodeType; 7] = [
 	DocumentNodeType {
 		name: "Identity",
 		identifier: NodeIdentifier::new("graphene_core::ops::IdNode", &[Type::Concrete(Cow::Borrowed("Any<'_>"))]),
-		default_inputs: &[NodeInput::Node(0)],
+		inputs: &[DocumentInputType {
+			name: "In",
+			data_type: FrontendGraphDataType::General,
+			default: NodeInput::Node(0),
+		}],
+		outputs: &[FrontendGraphDataType::General],
+		properties: |_document_node, _node_id| {
+			vec![LayoutGroup::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: format!("The identity node simply returns the input"),
+					..Default::default()
+				}))],
+			}]
+		},
+	},
+	DocumentNodeType {
+		name: "Input",
+		identifier: NodeIdentifier::new("graphene_core::ops::IdNode", &[Type::Concrete(Cow::Borrowed("Any<'_>"))]),
+		inputs: &[],
+		outputs: &[FrontendGraphDataType::Raster],
+		properties: |_document_node, _node_id| {
+			vec![LayoutGroup::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: format!("The input to the graph is the bitmap under the frame"),
+					..Default::default()
+				}))],
+			}]
+		},
+	},
+	DocumentNodeType {
+		name: "Output",
+		identifier: NodeIdentifier::new("graphene_core::ops::IdNode", &[Type::Concrete(Cow::Borrowed("Any<'_>"))]),
+		inputs: &[DocumentInputType {
+			name: "In",
+			data_type: FrontendGraphDataType::Raster,
+			default: NodeInput::Value {
+				tagged_value: TaggedValue::Image(Image::empty()),
+				exposed: true,
+			},
+		}],
+		outputs: &[],
+		properties: |_document_node, _node_id| {
+			vec![LayoutGroup::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: format!("The output to the graph is rendered in the frame"),
+					..Default::default()
+				}))],
+			}]
+		},
 	},
 	DocumentNodeType {
 		name: "Grayscale Image",
 		identifier: NodeIdentifier::new("graphene_std::raster::GrayscaleImageNode", &[]),
-		default_inputs: &[NodeInput::Value {
-			tagged_value: TaggedValue::Image(Image {
-				width: 0,
-				height: 0,
-				data: Vec::new(),
-			}),
-			exposed: true,
+		inputs: &[DocumentInputType {
+			name: "Image",
+			data_type: FrontendGraphDataType::Raster,
+			default: NodeInput::Value {
+				tagged_value: TaggedValue::Image(Image::empty()),
+				exposed: true,
+			},
 		}],
+		outputs: &[FrontendGraphDataType::Raster],
+		properties: |_document_node, _node_id| {
+			vec![LayoutGroup::Row {
+				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+					value: format!("The output to the graph is rendered in the frame"),
+					..Default::default()
+				}))],
+			}]
+		},
 	},
 	DocumentNodeType {
 		name: "Brighten Image",
 		identifier: NodeIdentifier::new("graphene_std::raster::BrightenImageNode", &[Type::Concrete(Cow::Borrowed("&TypeErasedNode"))]),
-		default_inputs: &[
-			NodeInput::Value {
-				tagged_value: TaggedValue::Image(Image {
-					width: 0,
-					height: 0,
-					data: Vec::new(),
-				}),
-				exposed: true,
+		inputs: &[
+			DocumentInputType {
+				name: "Image",
+				data_type: FrontendGraphDataType::Raster,
+				default: NodeInput::Value {
+					tagged_value: TaggedValue::Image(Image::empty()),
+					exposed: true,
+				},
 			},
-			NodeInput::Value {
-				tagged_value: TaggedValue::F32(10.),
-				exposed: false,
+			DocumentInputType {
+				name: "Amount",
+				data_type: FrontendGraphDataType::Number,
+				default: NodeInput::Value {
+					tagged_value: TaggedValue::F32(10.),
+					exposed: false,
+				},
 			},
 		],
+		outputs: &[FrontendGraphDataType::Raster],
+		properties: super::node_properties::brighten_image_properties,
 	},
 	DocumentNodeType {
 		name: "Hue Shift Image",
 		identifier: NodeIdentifier::new("graphene_std::raster::HueShiftImage", &[Type::Concrete(Cow::Borrowed("&TypeErasedNode"))]),
-		default_inputs: &[
-			NodeInput::Value {
-				tagged_value: TaggedValue::Image(Image {
-					width: 0,
-					height: 0,
-					data: Vec::new(),
-				}),
-				exposed: true,
+		inputs: &[
+			DocumentInputType {
+				name: "Image",
+				data_type: FrontendGraphDataType::Raster,
+				default: NodeInput::Value {
+					tagged_value: TaggedValue::Image(Image::empty()),
+					exposed: true,
+				},
 			},
-			NodeInput::Value {
-				tagged_value: TaggedValue::F32(50.),
-				exposed: false,
+			DocumentInputType {
+				name: "Amount",
+				data_type: FrontendGraphDataType::Number,
+				default: NodeInput::Value {
+					tagged_value: TaggedValue::F32(10.),
+					exposed: false,
+				},
 			},
 		],
+		outputs: &[FrontendGraphDataType::Raster],
+		properties: super::node_properties::hue_shift_image_properties,
 	},
 	DocumentNodeType {
 		name: "Add",
-		identifier: NodeIdentifier::new("graphene_core::ops::AddNode", &[Type::Concrete(Cow::Borrowed("u32")), Type::Concrete(Cow::Borrowed("u32"))]),
-		default_inputs: &[
-			NodeInput::Value {
-				tagged_value: TaggedValue::U32(0),
-				exposed: false,
+		identifier: NodeIdentifier::new("graphene_core::ops::AddNode", &[Type::Concrete(Cow::Borrowed("&TypeErasedNode"))]),
+		inputs: &[
+			DocumentInputType {
+				name: "Left",
+				data_type: FrontendGraphDataType::Number,
+				default: NodeInput::Value {
+					tagged_value: TaggedValue::F32(0.),
+					exposed: true,
+				},
 			},
-			NodeInput::Value {
-				tagged_value: TaggedValue::U32(0),
-				exposed: false,
+			DocumentInputType {
+				name: "Right",
+				data_type: FrontendGraphDataType::Number,
+				default: NodeInput::Value {
+					tagged_value: TaggedValue::F32(0.),
+					exposed: true,
+				},
 			},
 		],
+		outputs: &[FrontendGraphDataType::Number],
+		properties: super::node_properties::add_properties,
 	},
 ];
 

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

@@ -1,111 +1,164 @@
 use crate::messages::layout::utility_types::layout_widget::{LayoutGroup, Widget, WidgetCallback, WidgetHolder};
+use crate::messages::layout::utility_types::widgets::button_widgets::ParameterExposeButton;
 use crate::messages::layout::utility_types::widgets::input_widgets::{NumberInput, NumberInputMode};
 use crate::messages::layout::utility_types::widgets::label_widgets::{Separator, SeparatorDirection, SeparatorType, TextLabel};
 use crate::messages::prelude::NodeGraphMessage;
 
 use graph_craft::document::value::TaggedValue;
-use graph_craft::document::{DocumentNode, DocumentNodeImplementation, NodeId, NodeInput};
+use graph_craft::document::{DocumentNode, NodeId, NodeInput};
+
+use super::FrontendGraphDataType;
+
+pub fn hue_shift_image_properties(document_node: &DocumentNode, node_id: NodeId) -> Vec<LayoutGroup> {
+	vec![LayoutGroup::Row {
+		widgets: vec![
+			WidgetHolder::new(Widget::ParameterExposeButton(ParameterExposeButton {
+				exposed: true,
+				data_type: FrontendGraphDataType::Number,
+				tooltip: "Expose input parameter in node graph".into(),
+				..Default::default()
+			})),
+			WidgetHolder::new(Widget::Separator(Separator {
+				separator_type: SeparatorType::Unrelated,
+				direction: SeparatorDirection::Horizontal,
+			})),
+			WidgetHolder::new(Widget::TextLabel(TextLabel {
+				value: "Shift Degrees".into(),
+				..Default::default()
+			})),
+			WidgetHolder::new(Widget::Separator(Separator {
+				separator_type: SeparatorType::Unrelated,
+				direction: SeparatorDirection::Horizontal,
+			})),
+			WidgetHolder::new(Widget::NumberInput(NumberInput {
+				value: Some({
+					let NodeInput::Value {tagged_value: TaggedValue::F32(x), ..} = document_node.inputs[1] else {
+						panic!("Hue rotate should be f32")
+					};
+					x as f64
+				}),
+				unit: "°".into(),
+				mode: NumberInputMode::Range,
+				range_min: Some(-180.),
+				range_max: Some(180.),
+				on_update: WidgetCallback::new(move |number_input: &NumberInput| {
+					NodeGraphMessage::SetInputValue {
+						node: node_id,
+						input_index: 1,
+						value: TaggedValue::F32(number_input.value.unwrap() as f32),
+					}
+					.into()
+				}),
+				..NumberInput::default()
+			})),
+		],
+	}]
+}
+
+pub fn brighten_image_properties(document_node: &DocumentNode, node_id: NodeId) -> Vec<LayoutGroup> {
+	vec![LayoutGroup::Row {
+		widgets: vec![
+			WidgetHolder::new(Widget::ParameterExposeButton(ParameterExposeButton {
+				exposed: true,
+				data_type: FrontendGraphDataType::Number,
+				tooltip: "Expose input parameter in node graph".into(),
+				..Default::default()
+			})),
+			WidgetHolder::new(Widget::Separator(Separator {
+				separator_type: SeparatorType::Unrelated,
+				direction: SeparatorDirection::Horizontal,
+			})),
+			WidgetHolder::new(Widget::TextLabel(TextLabel {
+				value: "Brighten Amount".into(),
+				..Default::default()
+			})),
+			WidgetHolder::new(Widget::Separator(Separator {
+				separator_type: SeparatorType::Unrelated,
+				direction: SeparatorDirection::Horizontal,
+			})),
+			WidgetHolder::new(Widget::NumberInput(NumberInput {
+				value: Some({
+					let NodeInput::Value {tagged_value: TaggedValue::F32(x), ..} = document_node.inputs[1] else {
+						panic!("Brighten amount should be f32")
+					};
+					x as f64
+				}),
+				mode: NumberInputMode::Range,
+				range_min: Some(-255.),
+				range_max: Some(255.),
+				on_update: WidgetCallback::new(move |number_input: &NumberInput| {
+					NodeGraphMessage::SetInputValue {
+						node: node_id,
+						input_index: 1,
+						value: TaggedValue::F32(number_input.value.unwrap() as f32),
+					}
+					.into()
+				}),
+				..NumberInput::default()
+			})),
+		],
+	}]
+}
+
+pub fn add_properties(document_node: &DocumentNode, node_id: NodeId) -> Vec<LayoutGroup> {
+	let operand = |name: &str, index| LayoutGroup::Row {
+		widgets: vec![
+			WidgetHolder::new(Widget::ParameterExposeButton(ParameterExposeButton {
+				exposed: true,
+				data_type: FrontendGraphDataType::Number,
+				tooltip: "Expose input parameter in node graph".into(),
+				..Default::default()
+			})),
+			WidgetHolder::new(Widget::Separator(Separator {
+				separator_type: SeparatorType::Unrelated,
+				direction: SeparatorDirection::Horizontal,
+			})),
+			WidgetHolder::new(Widget::TextLabel(TextLabel {
+				value: name.into(),
+				..Default::default()
+			})),
+			WidgetHolder::new(Widget::Separator(Separator {
+				separator_type: SeparatorType::Unrelated,
+				direction: SeparatorDirection::Horizontal,
+			})),
+			WidgetHolder::new(Widget::NumberInput(NumberInput {
+				value: Some({
+					let NodeInput::Value {tagged_value: TaggedValue::F32(x), ..} = document_node.inputs[index] else {
+						panic!("Add input should be f32")
+					};
+
+					x as f64
+				}),
+				mode: NumberInputMode::Increment,
+				on_update: WidgetCallback::new(move |number_input: &NumberInput| {
+					NodeGraphMessage::SetInputValue {
+						node: node_id,
+						input_index: index,
+						value: TaggedValue::F32(number_input.value.unwrap() as f32),
+					}
+					.into()
+				}),
+				..NumberInput::default()
+			})),
+		],
+	};
+	vec![operand("Left", 0), operand("Right", 1)]
+}
+
+fn unknown_node_properties(document_node: &DocumentNode) -> Vec<LayoutGroup> {
+	vec![LayoutGroup::Row {
+		widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
+			value: format!("Node '{}' cannot be found in library", document_node.name),
+			..Default::default()
+		}))],
+	}]
+}
 
 pub fn generate_node_properties(document_node: &DocumentNode, node_id: NodeId) -> LayoutGroup {
 	let name = document_node.name.clone();
-	let layout = match &document_node.implementation {
-		DocumentNodeImplementation::Network(_) => match document_node.name.as_str() {
-			"Hue Shift Image" => vec![LayoutGroup::Row {
-				widgets: vec![
-					WidgetHolder::new(Widget::TextLabel(TextLabel {
-						value: "Shift Degrees".into(),
-						..Default::default()
-					})),
-					WidgetHolder::new(Widget::Separator(Separator {
-						separator_type: SeparatorType::Unrelated,
-						direction: SeparatorDirection::Horizontal,
-					})),
-					WidgetHolder::new(Widget::NumberInput(NumberInput {
-						value: Some({
-							let NodeInput::Value {tagged_value: TaggedValue::F32(x), ..} = document_node.inputs[1] else {
-								panic!("Hue rotate should be f32")
-							};
-							x as f64
-						}),
-						unit: "°".into(),
-						mode: NumberInputMode::Range,
-						range_min: Some(-180.),
-						range_max: Some(180.),
-						on_update: WidgetCallback::new(move |number_input: &NumberInput| {
-							NodeGraphMessage::SetInputValue {
-								node: node_id,
-								input_index: 1,
-								value: TaggedValue::F32(number_input.value.unwrap() as f32),
-							}
-							.into()
-						}),
-						..NumberInput::default()
-					})),
-				],
-			}],
-			"Brighten Image" => vec![LayoutGroup::Row {
-				widgets: vec![
-					WidgetHolder::new(Widget::TextLabel(TextLabel {
-						value: "Brighten Amount".into(),
-						..Default::default()
-					})),
-					WidgetHolder::new(Widget::Separator(Separator {
-						separator_type: SeparatorType::Unrelated,
-						direction: SeparatorDirection::Horizontal,
-					})),
-					WidgetHolder::new(Widget::NumberInput(NumberInput {
-						value: Some({
-							let NodeInput::Value {tagged_value: TaggedValue::F32(x), ..} = document_node.inputs[1] else {
-								panic!("Brighten amount should be f32")
-							};
-							x as f64
-						}),
-						mode: NumberInputMode::Range,
-						range_min: Some(-255.),
-						range_max: Some(255.),
-						on_update: WidgetCallback::new(move |number_input: &NumberInput| {
-							NodeGraphMessage::SetInputValue {
-								node: node_id,
-								input_index: 1,
-								value: TaggedValue::F32(number_input.value.unwrap() as f32),
-							}
-							.into()
-						}),
-						..NumberInput::default()
-					})),
-				],
-			}],
-			_ => vec![LayoutGroup::Row {
-				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
-					value: format!("Cannot currently display parameters for network {}", document_node.name),
-					..Default::default()
-				}))],
-			}],
-		},
-		DocumentNodeImplementation::Unresolved(identifier) => match identifier.name.as_ref() {
-			"graphene_std::raster::MapImageNode" | "graphene_core::ops::IdNode" => vec![LayoutGroup::Row {
-				widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
-					value: format!("{} exposes no parameters", document_node.name),
-					..Default::default()
-				}))],
-			}],
-			unknown => {
-				vec![
-					LayoutGroup::Row {
-						widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
-							value: format!("TODO: {} parameters", unknown),
-							..Default::default()
-						}))],
-					},
-					LayoutGroup::Row {
-						widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel {
-							value: "Add in editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs".to_string(),
-							..Default::default()
-						}))],
-					},
-				]
-			}
-		},
+	let layout = match super::document_node_types::resolve_document_node_type(&name) {
+		Some(document_node_type) => (document_node_type.properties)(document_node, node_id),
+		None => unknown_node_properties(document_node),
 	};
 	LayoutGroup::Section { name, layout }
 }