successfully export template

koonpeng · koonpeng · commit 403bd7090458 · 2025-07-30T04:29:36.000Z
Signed-off-by: Teo Koon Peng &lt;teokoonpeng@gmail.com&gt;
diff --git a/diagram-editor/frontend/add-operation.tsx b/diagram-editor/frontend/add-operation.tsx
@@ -5,6 +5,7 @@ import {
   type XYPosition,
 } from '@xyflow/react';
 import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import { EditorMode, useEditorMode } from './editor-mode';
 import type { DiagramEditorNode } from './nodes';
 import {
@@ -54,7 +55,7 @@ function createSectionInputChange(
 ): NodeAddChange<SectionInputNode> {
   return {
     type: 'add',
-    item: createSectionInputNode(targetId, position),
+    item: createSectionInputNode(targetId, targetId, position),
   };
 }
 
@@ -74,7 +75,7 @@ function createSectionBufferChange(
 ): NodeAddChange<SectionBufferNode> {
   return {
     type: 'add',
-    item: createSectionBufferNode(targetId, position),
+    item: createSectionBufferNode(targetId, targetId, position),
   };
 }
 
@@ -85,15 +86,25 @@ function createNodeChange(
   op: DiagramOperation,
 ): NodeAddChange<DiagramEditorNode>[] {
   if (op.type === 'scope') {
-    return createScopeNode(namespace, parentId, newNodePosition, op).map(
-      (node) => ({ type: 'add', item: node }),
-    );
+    return createScopeNode(
+      namespace,
+      parentId,
+      newNodePosition,
+      op,
+      uuidv4(),
+    ).map((node) => ({ type: 'add', item: node }));
   }
 
   return [
     {
       type: 'add',
-      item: createOperationNode(namespace, parentId, newNodePosition, op),
+      item: createOperationNode(
+        namespace,
+        parentId,
+        newNodePosition,
+        op,
+        uuidv4(),
+      ),
     },
   ];
 }
diff --git a/diagram-editor/frontend/node-manager.ts b/diagram-editor/frontend/node-manager.ts
@@ -117,6 +117,9 @@ export class NodeManager {
         if (isOperationNode(target)) {
           return target.data.opId;
         }
+        if (target.type === 'sectionOutput') {
+          return target.data.outputId;
+        }
         throw new Error('unknown node type');
       }
       // TODO: For section edges, return a `{ [target.data.opId]: edge.data.input }`
diff --git a/diagram-editor/frontend/nodes/section-node.tsx b/diagram-editor/frontend/nodes/section-node.tsx
@@ -60,7 +60,7 @@ export function SectionInputNodeComp(props: NodeProps<SectionInputNode>) {
       {...props}
       color="secondary"
       icon={<SectionInputIcon />}
-      label={props.data.remappedId}
+      label="Section Input"
       variant="output"
     />
   );
@@ -72,7 +72,7 @@ export function SectionOutputNodeComp(props: NodeProps<SectionOutputNode>) {
       {...props}
       color="secondary"
       icon={<SectionOutputIcon />}
-      label="Output"
+      label="Section Output"
       variant="input"
     />
   );
@@ -84,7 +84,7 @@ export function SectionBufferNodeComp(props: NodeProps<SectionBufferNode>) {
       {...props}
       color="secondary"
       icon={<SectionBufferIcon />}
-      label={props.data.remappedId}
+      label="Section Buffer"
       variant="output"
     />
   );
diff --git a/diagram-editor/frontend/utils/create-node.ts b/diagram-editor/frontend/utils/create-node.ts
@@ -1,28 +1,57 @@
 import type { XYPosition } from '@xyflow/react';
 import { v4 as uuidv4 } from 'uuid';
-import type {
-  DiagramEditorNode,
-  OperationNode,
-  SectionBufferNode,
-  SectionInputNode,
-  SectionOutputNode,
+import {
+  type DiagramEditorNode,
+  type OperationNode,
+  type SectionBufferNode,
+  type SectionInputNode,
+  type SectionOutputNode,
+  START_ID,
+  TERMINATE_ID,
 } from '../nodes';
-import type { DiagramOperation } from '../types/api';
+import type { DiagramOperation, NextOperation } from '../types/api';
 import { calculateScopeBounds, LAYOUT_OPTIONS } from './layout';
 import { joinNamespaces } from './namespace';
 
+export function createStartNode(
+  namespace: string,
+  position: XYPosition,
+): DiagramEditorNode {
+  return {
+    id: joinNamespaces(namespace, START_ID),
+    type: 'start',
+    position,
+    selectable: false,
+    data: { namespace },
+  };
+}
+
+export function createTerminateNode(
+  namespace: string,
+  position: XYPosition,
+): DiagramEditorNode {
+  return {
+    id: joinNamespaces(namespace, TERMINATE_ID),
+    type: 'terminate',
+    position,
+    selectable: false,
+    data: { namespace },
+  };
+}
+
 /**
  * Create a section input node. For simplicity, remapping the input is not supported, `targetId`
  * must point to the id of an operation in the template.
  */
 export function createSectionInputNode(
-  targetId: string,
+  remappedId: string,
+  targetId: NextOperation,
   position: XYPosition,
 ): SectionInputNode {
   return {
     id: uuidv4(),
     type: 'sectionInput',
-    data: { remappedId: targetId, targetId },
+    data: { remappedId, targetId },
     position,
   };
 }
@@ -44,13 +73,14 @@ export function createSectionOutputNode(
  * must point to the id of a `buffer` operation in the template.
  */
 export function createSectionBufferNode(
-  targetId: string,
+  remappedId: string,
+  targetId: NextOperation,
   position: XYPosition,
 ): SectionBufferNode {
   return {
     id: uuidv4(),
     type: 'sectionBuffer',
-    data: { remappedId: targetId, targetId },
+    data: { remappedId, targetId },
     position,
   };
 }
@@ -60,14 +90,15 @@ export function createOperationNode(
   parentId: string | undefined,
   position: XYPosition,
   op: Exclude<DiagramOperation, { type: 'scope' }>,
+  opId: string,
 ): OperationNode {
   return {
     id: uuidv4(),
     type: op.type,
     position,
     data: {
       namespace,
-      opId: uuidv4(),
+      opId,
       op,
     },
     ...(parentId && { parentId }),
@@ -79,11 +110,12 @@ export function createScopeNode(
   parentId: string | undefined,
   position: XYPosition,
   op: DiagramOperation & { type: 'scope' },
-): DiagramEditorNode[] {
+  opId: string,
+): [OperationNode<'scope'>, ...DiagramEditorNode[]] {
   const scopeId = uuidv4();
   const children: DiagramEditorNode[] = [
     {
-      id: uuidv4(),
+      id: joinNamespaces(namespace, opId, START_ID),
       type: 'start',
       position: {
         x: LAYOUT_OPTIONS.scopePadding.leftRight,
@@ -95,7 +127,7 @@ export function createScopeNode(
       parentId: scopeId,
     },
     {
-      id: uuidv4(),
+      id: joinNamespaces(namespace, opId, TERMINATE_ID),
       type: 'terminate',
       position: {
         x: LAYOUT_OPTIONS.scopePadding.leftRight,
@@ -120,7 +152,7 @@ export function createScopeNode(
       },
       data: {
         namespace,
-        opId: uuidv4(),
+        opId,
         op,
       },
       width: scopeBounds.width,
diff --git a/diagram-editor/frontend/utils/export-diagram.test.ts b/diagram-editor/frontend/utils/export-diagram.test.ts
@@ -1,5 +1,7 @@
+import { v4 as uuidv4 } from 'uuid';
+import type { DiagramEditorEdge } from '../edges';
 import { NodeManager } from '../node-manager';
-import { START_ID } from '../nodes';
+import { type DiagramEditorNode, START_ID } from '../nodes';
 import {
   createOperationNode,
   createSectionBufferNode,
@@ -51,34 +53,63 @@ test('export diagram with scope', () => {
 });
 
 test('export diagram with templates', () => {
-  const nodes = [
-    createSectionInputNode('test_input', { x: 0, y: 0 }),
+  const nodes: DiagramEditorNode[] = [
+    createSectionInputNode('test_input', { builti: 'dispose' }, { x: 0, y: 0 }),
     createSectionOutputNode('test_output', { x: 0, y: 0 }),
-    createSectionBufferNode('test_buffer', { x: 0, y: 0 }),
+    createSectionBufferNode(
+      'test_buffer',
+      { builtin: 'dispose' },
+      { x: 0, y: 0 },
+    ),
     createOperationNode(
       ROOT_NAMESPACE,
       undefined,
       { x: 0, y: 0 },
-      { type: 'node', builder: 'test', next: 'test_output' },
+      { type: 'node', builder: 'test_builder', next: { builtin: 'dispose' } },
+      'test_op_node',
     ),
     createOperationNode(
       ROOT_NAMESPACE,
       undefined,
       { x: 0, y: 0 },
       { type: 'buffer' },
+      'test_op_buffer',
     ),
   ];
-  const template = exportTemplate(new NodeManager(nodes), []);
+  const edges: DiagramEditorEdge[] = [
+    {
+      id: uuidv4(),
+      type: 'default',
+      source: nodes[0].id,
+      target: nodes[3].id,
+      data: {},
+    },
+    {
+      id: uuidv4(),
+      type: 'default',
+      source: nodes[2].id,
+      target: nodes[4].id,
+      data: {},
+    },
+    {
+      id: uuidv4(),
+      type: 'default',
+      source: nodes[3].id,
+      target: nodes[1].id,
+      data: {},
+    },
+  ];
+  const template = exportTemplate(new NodeManager(nodes), edges);
 
   if (typeof template.inputs !== 'object' || Array.isArray(template.inputs)) {
     throw new Error('expected template inputs to be a mapping');
   }
-  expect(template.inputs.test_input).toBe('test_input');
+  expect(template.inputs.test_input).toBe('test_op_node');
 
   expect(template.outputs?.[0]).toBe('test_output');
 
   if (typeof template.buffers !== 'object' || Array.isArray(template.buffers)) {
     throw new Error('expected template buffers to be a mapping');
   }
-  expect(template.buffers.test_buffer).toBe('test_buffer');
+  expect(template.buffers.test_buffer).toBe('test_op_buffer');
 });
diff --git a/diagram-editor/frontend/utils/export-diagram.ts b/diagram-editor/frontend/utils/export-diagram.ts
diff --git a/diagram-editor/frontend/utils/load-diagram.ts b/diagram-editor/frontend/utils/load-diagram.ts

Original file line number	Diff line number	Diff line change
`@@ -117,6 +117,9 @@ export class NodeManager {`
`117`	`117`	`if (isOperationNode(target)) {`
`118`	`118`	`return target.data.opId;`
`119`	`119`	`}`
	`120`	`+ if (target.type === 'sectionOutput') {`
	`121`	`+ return target.data.outputId;`
	`122`	`+ }`
`120`	`123`	`throw new Error('unknown node type');`
`121`	`124`	`}`
`122`	`125`	// TODO: For section edges, return a `{ [target.data.opId]: edge.data.input }`