successfully loaded a template

Signed-off-by: Teo Koon Peng <[email protected]>

Author: koonpeng

diagram-editor/frontend/diagram-editor.tsx

@@ -132,10 +132,11 @@ function DiagramEditor() {
             throw new Error(`template ${newMode.templateId} not found`);
           }
           const graph = loadTemplate(template);
+          const changes = autoLayout(graph.nodes, graph.edges, LAYOUT_OPTIONS);
           // using callback form so that `nodes` and `edges` don't need to be part of dependencies.
           setNodes((prev) => {
             savedNodes.current = [...prev];
-            return graph.nodes;
+            return applyNodeChanges(changes, graph.nodes);
           });
           setEdges((prev) => {
             savedEdges.current = [...prev];

diagram-editor/frontend/node-manager.ts

@@ -25,6 +25,13 @@ export class NodeManager {
         this.namespacedOpIdMap.set(namespacedOpId, node);
       } else if (isBuiltinNode(node)) {
         this.namespacedOpIdMap.set(node.id, node);
+      } else if (node.type === 'sectionOutput') {
+        // This will conflict if there is an op in a template with the same id as an output.
+        // However, this conflict exist in bevy_impulse as well, so we assume that it will not happen.
+        this.namespacedOpIdMap.set(
+          joinNamespaces(ROOT_NAMESPACE, node.data.outputId),
+          node,
+        );
       }
     }
   }

diagram-editor/frontend/utils/create-node.ts

@@ -18,6 +18,7 @@ export function createStartNode(
   position: XYPosition,
 ): DiagramEditorNode {
   return {
+    // NOTE: atm `NodeManager` relies on how the id of builtin nodes is computed to locate them.
     id: joinNamespaces(namespace, START_ID),
     type: 'start',
     position,
@@ -31,6 +32,7 @@ export function createTerminateNode(
   position: XYPosition,
 ): DiagramEditorNode {
   return {
+    // NOTE: atm `NodeManager` relies on how the id of builtin nodes is computed to locate them.
     id: joinNamespaces(namespace, TERMINATE_ID),
     type: 'terminate',
     position,

diagram-editor/frontend/utils/load-diagram.test.ts

@@ -3,7 +3,7 @@ import { NodeManager } from '../node-manager';
 import { type OperationNode, START_ID, TERMINATE_ID } from '../nodes';
 import { autoLayout } from './auto-layout';
 import { LAYOUT_OPTIONS } from './layout';
-import { loadDiagramJson } from './load-diagram';
+import { loadDiagramJson, loadTemplate } from './load-diagram';
 import testDiagram from './test-data/test-diagram.json';
 
 test('load diagram json and auto layout', () => {
@@ -61,3 +61,23 @@ test('load diagram json and auto layout', () => {
   expect(terminate!.position.x).toBe(join!.position.x);
   expect(terminate!.position.y).toBeGreaterThan(join!.position.y);
 });
+
+test('load template', () => {
+  const graph = loadTemplate({
+    inputs: {
+      remapped_input: 'target_input',
+    },
+    outputs: ['output'],
+    buffers: {},
+    ops: {
+      target_input: {
+        type: 'node',
+        builder: 'add',
+        next: 'output',
+      },
+    },
+  });
+
+  expect(graph.nodes.length).toBe(3);
+  expect(graph.edges.length).toBe(2);
+});

diagram-editor/frontend/utils/load-diagram.ts

@@ -51,8 +51,8 @@ export function loadEmpty(): Graph {
   };
 }
 
-function buildGraph(diagram: Diagram): Graph {
-  const graph = loadEmpty();
+function buildGraph(diagram: Diagram, initialGraph?: Graph): Graph {
+  const graph = initialGraph ?? loadEmpty();
   const nodes = graph.nodes;
 
   interface State {
@@ -117,7 +117,7 @@ function buildGraph(diagram: Diagram): Graph {
       data: {},
     });
   }
-  edges.push(...buildEdges(diagram, graph.nodes));
+  edges.push(...buildEdges(graph.nodes));
 
   return graph;
 }
@@ -127,21 +127,16 @@ const validate = getSchema<Diagram>('Diagram');
 export function loadTemplate(template: SectionTemplate): Graph {
   const stubDiagram = exportDiagram(new NodeManager([]), [], {});
   stubDiagram.ops = template.ops;
-  const graph = buildGraph(stubDiagram);
-
-  // filter out builtin START and TERMINATE.
-  const nodes = graph.nodes.filter((node) => {
-    !node.parentId && node.type in ['start', 'terminate'];
-  });
+  const initialNodes: DiagramEditorNode[] = [];
 
   if (template.inputs) {
     if (Array.isArray(template.inputs)) {
       for (const input of template.inputs) {
-        nodes.push(createSectionInputNode(input, input, { x: 0, y: 0 }));
+        initialNodes.push(createSectionInputNode(input, input, { x: 0, y: 0 }));
       }
     } else {
       for (const [remappedId, targetId] of Object.entries(template.inputs)) {
-        nodes.push(
+        initialNodes.push(
           createSectionInputNode(remappedId, targetId, { x: 0, y: 0 }),
         );
       }
@@ -151,11 +146,13 @@ export function loadTemplate(template: SectionTemplate): Graph {
   if (template.buffers) {
     if (Array.isArray(template.buffers)) {
       for (const buffer of template.buffers) {
-        nodes.push(createSectionBufferNode(buffer, buffer, { x: 0, y: 0 }));
+        initialNodes.push(
+          createSectionBufferNode(buffer, buffer, { x: 0, y: 0 }),
+        );
       }
     } else {
       for (const [remappedId, targetId] of Object.entries(template.buffers)) {
-        nodes.push(
+        initialNodes.push(
           createSectionBufferNode(remappedId, targetId, { x: 0, y: 0 }),
         );
       }
@@ -164,9 +161,9 @@ export function loadTemplate(template: SectionTemplate): Graph {
 
   if (template.outputs) {
     for (const output of template.outputs) {
-      nodes.push(createSectionOutputNode(output, { x: 0, y: 0 }));
+      initialNodes.push(createSectionOutputNode(output, { x: 0, y: 0 }));
     }
   }
 
-  return { nodes, edges: graph.edges };
+  return buildGraph(stubDiagram, { nodes: initialNodes, edges: [] });
 }