Graph Editor

The graph editor is part of the SocialStack administration panel and can be used to create data or control flows without code. It is most commonly seen as a part of the Canvas Editor as a way to connect a component with dynamic input values. For example, you might have a component which renders a grid of images. Rather than hardcoding a specific location that the array of images comes from, you can use a graph to pipe a generic array of images to the component instead. This results in much more reusable components because the props are no longer being hardcoded in the javascript and it also works particularly well with Dynamic Content Types.

Above is a graph which loads the 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.

Custom Graphs

You can use a custom graph editor on any part of the admin panel with Input, like so:

<Input type='graph' />

As with all Input types, it can therefore also be used on C# fields as well:

[Data("type", "graph")]
public string GraphStructureJson;

By default when a parent form is submitted, the value is collected and outputted as a JSON string. You can skip the to JSON part and instead obtain an object tree with the objectOutput prop like so:

<Input type='graph' objectOutput />

Rendering a custom graph

Use the Graph object from the UI/Functions/GraphRuntime/Graph file to execute the nodes of your graph. Because graphs are always context sensitive, you'll need to specify which namespace your graph nodes are using if it is not the default canvas one.

import Graph from 'UI/Functions/GraphRuntime/Graph';

..

var graphToRun = new Graph(graphJsonHere);

graphToRun.setContext({ .. }); // Additional context to pass to the graph nodes. Shows up as this.context on all nodes.

graphToRun.run().then(result => {
    // Do something with the provided result.
});

If you're using a custom set of nodes (see below for more on that), that is specified in the config like so:

var graphToRun = new Graph(graphJsonHere, {ns: 'UI/DialogueTree/NodeSet/'});

Custom graph nodes

By default a graph will use the canvas graph node set. However you can specify a custom set of nodes by specifying a namespace:

<Input type='graph' namespace={'Admin/DialogueTree/NodeSet/'} />

/* or 'ns' */

<Input type='graph' ns={'Admin/DialogueTree/NodeSet/'} />

Note that a node set exists in two different namespaces - one which provides the admin functionality, and another which provides the actual executors which run the graph when it's on the frontend (or also in the admin panel). The Input namespace prop is always specifically for the Admin node set.

The namespace to locate the executors on the frontend is specified with the namespace or ns config option on Graph:

new Graph(graphJsonStructure, {namespace: 'UI/DialogueTree/NodeSet/'})

/* or 'ns' */
new Graph(graphJsonStructure, {ns: 'UI/DialogueTree/NodeSet/'})

The canvas node executors can be found in UI/Canvas/Graph/ - this is the default Graph namespace if none is specified.