Graph Editor - Revision history

Luke: /* Connecting Nodes */

2023-02-07T12:52:48Z

Connecting Nodes

← Older revision		Revision as of 12:52, 7 February 2023
Line 60:		Line 60:
	You'll know the connection was successful because a line will then be drawn between the two connection points.		You'll know the connection was successful because a line will then be drawn between the two connection points.

	You can't connect incompatible field types together however. You can identify what the value type is that you're working with based on the colour of the connection point. If colours are quite similar, then hovering the mouse over a connection point will also display what the value type is.		You can't connect incompatible field types together however. You can identify what the value type is that you're working with based on the colour of the connection point. If colours are quite similar, then hovering the mouse over a connection point will also display what the value type is. A type denoted with two cubes instead of one is a list of things (an array).

	= Custom Graphs =		= Custom Graphs =

Luke: /* Loop Node */

2023-02-07T03:01:28Z

Loop Node

← Older revision		Revision as of 03:01, 7 February 2023
Line 46:		Line 46:

	The Loop node is used to convert a list of things into a list of other things, usually a list of content into a list of components. First connect the list you want to loop over to its main input. From there, in a nutshell, turn "loop item" into "iteration result". So for example, if you connect a list of Users to the input, "loop item" will be a single User in the list. You'll then usually use a Fields node to expand all the available fields on the User object. Let's say we're outputting a list of Components - you'd then add a Component node of the component you want, and connect the user's fields to it as required. Then, connect the component to "iteration result", forming an actual loop of connections with the Loop component. Assuming everything has been connected, a new field - "Output" - will appear which will then be a list of components.		The Loop node is used to convert a list of things into a list of other things, usually a list of content into a list of components. First connect the list you want to loop over to its main input. From there, in a nutshell, turn "loop item" into "iteration result". So for example, if you connect a list of Users to the input, "loop item" will be a single User in the list. You'll then usually use a Fields node to expand all the available fields on the User object. Let's say we're outputting a list of Components - you'd then add a Component node of the component you want, and connect the user's fields to it as required. Then, connect the component to "iteration result", forming an actual loop of connections with the Loop component. Assuming everything has been connected, a new field - "Output" - will appear which will then be a list of components.


			[[File:Loop_node.png]]

			Above: A list of tags is given to a loop node. For each tag, a Fields node displays the available fields exposing the tag name and description to us. The tag is then converted into a component, which is connected back to the iteration result field. That ultimately means this loop node takes in a list of tags and outputs a list of components.

	= Connecting Nodes =		= Connecting Nodes =

Luke: /* Content List Node */

2023-02-07T02:56:51Z

Content List Node

← Older revision		Revision as of 02:56, 7 February 2023
Line 28:		Line 28:

	[[File:Content_list_node.png]]		[[File:Content_list_node.png]]

			Above: "Get me a list of all users with a role of 4". As with all API calls, this will only return results the user is permitted to see.

	== Component Node ==		== Component Node ==

Luke: /* Content List Node */

2023-02-07T02:56:07Z

Content List Node

← Older revision		Revision as of 02:56, 7 February 2023
Line 26:		Line 26:

	Much like the content node except it requests a set of things from the API based on a [[filters\|filter]]. Using ? arguments in the filter string will cause input fields to automatically appear.		Much like the content node except it requests a set of things from the API based on a [[filters\|filter]]. Using ? arguments in the filter string will cause input fields to automatically appear.

			[[File:Content_list_node.png]]

	== Component Node ==		== Component Node ==

Luke: /* Nodes */

2023-02-07T02:53:47Z

Nodes

← Older revision		Revision as of 02:53, 7 February 2023
Line 18:		Line 18:

	The Constant node simply outputs a specific value of a specific common type, such as a number or piece of text. Note that it's not used that often as constant values can also be directly added to fields of common types. The constant node primarily exists to reuse the same value in multiple places.		The Constant node simply outputs a specific value of a specific common type, such as a number or piece of text. Note that it's not used that often as constant values can also be directly added to fields of common types. The constant node primarily exists to reuse the same value in multiple places.

			== Content Node ==

			Most commonly set to "Primary type", this node loads some content from the API - either the primary object from the page or a piece of content with a specified type and ID.

			== Content List Node ==

			Much like the content node except it requests a set of things from the API based on a [[filters\|filter]]. Using ? arguments in the filter string will cause input fields to automatically appear.

			== Component Node ==

			Usually this is the main output of a typical graph, but doesn't have to be. Component nodes can appear anywhere in your graph too. If you'd like to have a prop on a component which accepts a component node as an input, use a propType of "jsx", then the value given is simply treated as if it was any other JSX object.

			== From List and To List Nodes ==

			Simple nodes which can be used to construct a list from singular objects or extract an object at a specific index in a list. Usually quite rarely needed.

			== Fields Node ==

			The Fields node displays the available fields on a given object. This is most often used together with the Loop node, where it can show you what fields are available on the current list entry.

	== Loop Node ==		== Loop Node ==

Luke: /* Nodes */

2023-02-07T02:47:15Z

Nodes

← Older revision		Revision as of 02:47, 7 February 2023
Line 14:		Line 14:

	The current root node can be identified because it doesn't have this button visible and can't be deleted either. By convention, it is usually also the most rightward node because left to right is the flow direction that makes the connection lines most visible.		The current root node can be identified because it doesn't have this button visible and can't be deleted either. By convention, it is usually also the most rightward node because left to right is the flow direction that makes the connection lines most visible.

			== Constant Node ==

			The Constant node simply outputs a specific value of a specific common type, such as a number or piece of text. Note that it's not used that often as constant values can also be directly added to fields of common types. The constant node primarily exists to reuse the same value in multiple places.

			== Loop Node ==

			The Loop node is used to convert a list of things into a list of other things, usually a list of content into a list of components. First connect the list you want to loop over to its main input. From there, in a nutshell, turn "loop item" into "iteration result". So for example, if you connect a list of Users to the input, "loop item" will be a single User in the list. You'll then usually use a Fields node to expand all the available fields on the User object. Let's say we're outputting a list of Components - you'd then add a Component node of the component you want, and connect the user's fields to it as required. Then, connect the component to "iteration result", forming an actual loop of connections with the Loop component. Assuming everything has been connected, a new field - "Output" - will appear which will then be a list of components.

	= Connecting Nodes =		= Connecting Nodes =

Luke: /* Connecting Nodes */

2023-01-17T13:29:52Z

Connecting Nodes

← Older revision		Revision as of 13:29, 17 January 2023
Line 17:		Line 17:
	= Connecting Nodes =		= Connecting Nodes =

	Each node has field values which define the inputs and outputs of a node. Many nodes have outputs which depend on the inputs or their configuration, so the outputs are often not visible until the inputs have been configured. To connect nodes together, click and drag a fields connection point to another connection point (or click on one, then click the other):		Each node has field values which define the inputs and outputs of a node. A nodes inputs are on the left side, and its outputs are on the right. Many nodes have outputs which depend on the inputs or their configuration, so the outputs are often not visible until the inputs have been configured. To connect nodes together, click and drag a fields connection point to another connection point (or click on one, then click the other):

	[[File:node-connectors.png]]		[[File:node-connectors.png]]

Luke: /* Nodes */

2023-01-17T13:29:07Z

Nodes

← Older revision		Revision as of 13:29, 17 January 2023
Line 13:		Line 13:
	''Above: The button which changes the root node. Pressing it changes the output of the graph to the node you pressed it on.''		''Above: The button which changes the root node. Pressing it changes the output of the graph to the node you pressed it on.''

	The current root node can be identified because it doesn't have this button visible. By convention, it is usually also the most rightward node because left to right is the flow direction that makes the connection lines most visible.		The current root node can be identified because it doesn't have this button visible and can't be deleted either. By convention, it is usually also the most rightward node because left to right is the flow direction that makes the connection lines most visible.

	= Connecting Nodes =		= Connecting Nodes =

Luke: /* Nodes */

2023-01-17T13:26:34Z

Nodes

← Older revision		Revision as of 13:26, 17 January 2023
Line 12:		Line 12:

	''Above: The button which changes the root node. Pressing it changes the output of the graph to the node you pressed it on.''		''Above: The button which changes the root node. Pressing it changes the output of the graph to the node you pressed it on.''

			The current root node can be identified because it doesn't have this button visible. By convention, it is usually also the most rightward node because left to right is the flow direction that makes the connection lines most visible.

	= Connecting Nodes =		= Connecting Nodes =

Luke at 13:24, 17 January 2023

2023-01-17T13:24:13Z

← Older revision		Revision as of 13:24, 17 January 2023
Line 4:		Line 4:

	''Above is a graph which loads the [[Editing Pages#Primary content type\|primary content object]] on the page, which in the example is a User object, and then displays the username in a component called Header on the page''.		''Above is a graph which loads the [[Editing Pages#Primary content type\|primary content object]] on the page, which in the example is a User object, and then displays the username in a component called Header on the page''.

			= Nodes =

			The individual units of a graph are called nodes. In the image above for example, there are 2 nodes connected together. On any graph, one of the nodes is special as it is the '''root node'''. The root node is the one which is the ultimate output of your graph, and you can change it using the set root button in the top right corner of the node you want to change:

			[[File:change-root.png]]

			''Above: The button which changes the root node. Pressing it changes the output of the graph to the node you pressed it on.''

			= Connecting Nodes =

			Each node has field values which define the inputs and outputs of a node. Many nodes have outputs which depend on the inputs or their configuration, so the outputs are often not visible until the inputs have been configured. To connect nodes together, click and drag a fields connection point to another connection point (or click on one, then click the other):

			[[File:node-connectors.png]]

			You'll know the connection was successful because a line will then be drawn between the two connection points.

			You can't connect incompatible field types together however. You can identify what the value type is that you're working with based on the colour of the connection point. If colours are quite similar, then hovering the mouse over a connection point will also display what the value type is.

	= Custom Graphs =		= Custom Graphs =