implemented forms for connecting section buffers

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

Author: koonpeng

diagram-editor/frontend/diagram-editor.tsx

@@ -37,7 +37,7 @@ import {
   EditorModeProvider,
 } from './editor-mode';
 import ExportDiagramDialog from './export-diagram-dialog';
-import { defaultEdgeOutputData, EditEdgeForm, EditNodeForm } from './forms';
+import { defaultEdgeData, EditEdgeForm, EditNodeForm } from './forms';
 import EditScopeForm from './forms/edit-scope-form';
 import { NodeManager } from './node-manager';
 import {
@@ -562,7 +562,7 @@ function DiagramEditor() {
           const newEdge = {
             ...createBaseEdge(conn.source, conn.target),
             type: validEdges[0],
-            data: defaultEdgeOutputData(validEdges[0]),
+            data: defaultEdgeData(validEdges[0]),
           } as DiagramEditorEdge;
 
           const validationResult = validateEdgeSimple(

diagram-editor/frontend/edges/buffer-edge.tsx

@@ -1,6 +1,6 @@
 import { type EdgeProps, StepEdge } from '@xyflow/react';
 import type { Edge } from '../types/react-flow';
-import type { EdgeData } from '.';
+import type { SectionBufferSlotData } from './section-edge';
 
 export type BufferKeySlotData = {
   type: 'bufferKey';
@@ -12,9 +12,13 @@ export type BufferSeqSlotData = {
   seq: number;
 };
 
-export type BufferOutputData = { [k: string]: unknown };
-// TODO: support section buffer
-export type BufferEdge = Edge<EdgeData<BufferOutputData>, 'buffer'>;
+export type BufferOutputData = Record<string, never>;
+
+export type BufferEdge = Edge<
+  BufferOutputData,
+  BufferKeySlotData | BufferSeqSlotData | SectionBufferSlotData,
+  'buffer'
+>;
 
 export type BufferEdgeProps = Exclude<EdgeProps<BufferEdge>, 'label'>;
 

diagram-editor/frontend/edges/create-edge.ts

@@ -26,7 +26,7 @@ export function createDefaultEdge(
   return {
     ...createBaseEdge(source, target),
     type: 'default',
-    data: { output: {} },
+    data: { output: {}, input: { type: 'default' } },
   };
 }
 
@@ -40,6 +40,7 @@ export function createUnzipEdge(
     type: 'unzip',
     data: {
       output: data,
+      input: { type: 'default' },
     },
   };
 }
@@ -51,7 +52,7 @@ export function createForkResultOkEdge(
   return {
     ...createBaseEdge(source, target),
     type: 'forkResultOk',
-    data: {},
+    data: { output: {}, input: { type: 'default' } },
   };
 }
 
@@ -62,7 +63,7 @@ export function createForkResultErrEdge(
   return {
     ...createBaseEdge(source, target),
     type: 'forkResultErr',
-    data: {},
+    data: { output: {}, input: { type: 'default' } },
   };
 }
 
@@ -74,7 +75,7 @@ export function createSplitKeyEdge(
   return {
     ...createBaseEdge(source, target),
     type: 'splitKey',
-    data: { output: data },
+    data: { output: data, input: { type: 'default' } },
   };
 }
 
@@ -86,7 +87,7 @@ export function createSplitSeqEdge(
   return {
     ...createBaseEdge(source, target),
     type: 'splitSeq',
-    data: { output: data },
+    data: { output: data, input: { type: 'default' } },
   };
 }
 
@@ -97,7 +98,7 @@ export function createSplitRemainingEdge(
   return {
     ...createBaseEdge(source, target),
     type: 'splitRemaining',
-    data: {},
+    data: { output: {}, input: { type: 'default' } },
   };
 }
 
@@ -121,7 +122,7 @@ export function createStreamOutEdge(
   return {
     ...createBaseEdge(source, target),
     type: 'streamOut',
-    data: { output: data },
+    data: { output: data, input: { type: 'default' } },
   };
 }
 

diagram-editor/frontend/edges/fork-result-err-edge.tsx

@@ -1,9 +1,12 @@
 import { type EdgeProps, StepEdge } from '@xyflow/react';
 import { memo } from 'react';
-import type { Edge } from '../types/react-flow';
+import type { DataEdge } from '.';
 
 export type ForkResultErrOutputData = Record<string, never>;
-export type ForkResultErrEdge = Edge<ForkResultErrOutputData, 'forkResultErr'>;
+export type ForkResultErrEdge = DataEdge<
+  ForkResultErrOutputData,
+  'forkResultErr'
+>;
 
 export type ForkResultErrEdgeProps = Exclude<
   EdgeProps<ForkResultErrEdge>,

diagram-editor/frontend/edges/fork-result-ok-edge.tsx

@@ -1,9 +1,9 @@
 import { type EdgeProps, StepEdge } from '@xyflow/react';
 import { memo } from 'react';
-import type { Edge } from '../types/react-flow';
+import type { DataEdge } from '.';
 
 export type ForkResultOkOutputData = Record<string, never>;
-export type ForkResultOkEdge = Edge<ForkResultOkOutputData, 'forkResultOk'>;
+export type ForkResultOkEdge = DataEdge<ForkResultOkOutputData, 'forkResultOk'>;
 
 export type ForkResultOkEdgeProps = Exclude<
   EdgeProps<ForkResultOkEdge>,

diagram-editor/frontend/edges/index.ts

@@ -1,16 +1,17 @@
 import { StepEdge } from '@xyflow/react';
 import type { Edge } from '../types/react-flow';
-import BufferEdgeComp, {
-  type BufferEdge,
-  type BufferKeySlotData,
-  type BufferSeqSlotData,
-} from './buffer-edge';
+import BufferEdgeComp, { type BufferEdge } from './buffer-edge';
 import ForkResultErrEdgeComp, {
   type ForkResultErrEdge,
 } from './fork-result-err-edge';
 import ForkResultOkEdgeComp, {
   type ForkResultOkEdge,
 } from './fork-result-ok-edge';
+import {
+  type SectionEdge,
+  type SectionInputSlotData,
+  SectionOutputEdgeComp,
+} from './section-edge';
 import SplitKeyEdgeComp, { type SplitKeyEdge } from './split-key-edge';
 import SplitRemainingEdgeComp, {
   type SplitRemainingEdge,
@@ -27,13 +28,15 @@ export type { SplitSeqEdge } from './split-seq-edge';
 export type { StreamOutEdge } from './stream-out-edge';
 export type { UnzipEdge } from './unzip-edge';
 
-export type EdgeData<O extends Record<string, unknown>> = {
-  output: O;
-  input?: BufferKeySlotData | BufferSeqSlotData;
-};
+export type DefaultOutputData = Record<string, never>;
+export type DefaultInputData = { type: 'default' };
+
+export type DataEdge<
+  O extends Record<string, unknown>,
+  S extends string,
+> = Edge<O, DefaultInputData | SectionInputSlotData, S>;
 
-export type DefaultOutputData = { [k: string]: unknown };
-export type DefaultEdge = Edge<EdgeData<DefaultOutputData>, 'default'>;
+export type DefaultEdge = DataEdge<DefaultOutputData, 'default'>;
 
 export type EdgeMapping = {
   default: DefaultEdge;
@@ -45,13 +48,15 @@ export type EdgeMapping = {
   splitRemaining: SplitRemainingEdge;
   buffer: BufferEdge;
   streamOut: StreamOutEdge;
-  // section: SectionEdge;
+  section: SectionEdge;
 };
 
 export type EdgeTypes = keyof EdgeMapping;
 
-export type EdgeOutputData<K extends keyof EdgeMapping = keyof EdgeMapping> =
-  EdgeMapping[K]['data']['output'];
+export type EdgeData<K extends EdgeTypes = EdgeTypes> = EdgeMapping[K]['data'];
+
+export type EdgeOutputData<K extends EdgeTypes = EdgeTypes> =
+  EdgeData<K>['output'];
 
 export const EDGE_TYPES = {
   default: StepEdge,
@@ -63,7 +68,7 @@ export const EDGE_TYPES = {
   splitRemaining: SplitRemainingEdgeComp,
   buffer: BufferEdgeComp,
   streamOut: StreamOutEdgeComp,
-  // section: SectionOutputEdgeComp,
+  section: SectionOutputEdgeComp,
 } satisfies Record<EdgeTypes, unknown>;
 
 export type DiagramEditorEdge<T extends EdgeTypes = EdgeTypes> = EdgeMapping[T];

diagram-editor/frontend/edges/section-edge.tsx

@@ -1,13 +1,12 @@
 import { type EdgeProps, StepEdge } from '@xyflow/react';
 import { memo } from 'react';
-import type { Edge } from '../types/react-flow';
-import type { EdgeData } from '.';
+import type { DataEdge } from '.';
 
 export type SectionOutputData = {
   output: string;
 };
 
-export type SectionEdge = Edge<EdgeData<SectionOutputData>, 'section'>;
+export type SectionEdge = DataEdge<SectionOutputData, 'section'>;
 
 export type SectionOutputEdgeProps = Exclude<EdgeProps<SectionEdge>, 'label'>;
 
@@ -17,10 +16,10 @@ export const SectionOutputEdgeComp = memo((props: SectionOutputEdgeProps) => {
 
 export type SectionInputSlotData = {
   type: 'sectionInput';
-  input: string;
+  inputId: string;
 };
 
 export type SectionBufferSlotData = {
   type: 'sectionBuffer';
-  input: string;
+  inputId: string;
 };

diagram-editor/frontend/edges/split-key-edge.tsx

@@ -1,12 +1,12 @@
 import { type EdgeProps, StepEdge } from '@xyflow/react';
 import { memo } from 'react';
-import type { Edge } from '../types/react-flow';
-import type { EdgeData } from '.';
+import type { DataEdge } from '.';
 
 export type SplitKeyOutputData = {
   key: string;
 };
-export type SplitKeyEdge = Edge<EdgeData<SplitKeyOutputData>, 'splitKey'>;
+
+export type SplitKeyEdge = DataEdge<SplitKeyOutputData, 'splitKey'>;
 
 export type SplitKeyEdgeProps = Exclude<EdgeProps<SplitKeyEdge>, 'label'>;
 

diagram-editor/frontend/edges/split-remaining-edge.tsx

@@ -1,9 +1,9 @@
 import { type EdgeProps, StepEdge } from '@xyflow/react';
 import { memo } from 'react';
-import type { Edge } from '../types/react-flow';
+import type { DataEdge } from '.';
 
 export type SplitRemainingOutputData = Record<string, never>;
-export type SplitRemainingEdge = Edge<
+export type SplitRemainingEdge = DataEdge<
   SplitRemainingOutputData,
   'splitRemaining'
 >;

diagram-editor/frontend/edges/split-seq-edge.tsx

@@ -1,13 +1,12 @@
 import { type EdgeProps, StepEdge } from '@xyflow/react';
 import { memo } from 'react';
-import type { Edge } from '../types/react-flow';
-import type { EdgeData } from '.';
+import type { DataEdge } from '.';
 
 export type SplitSeqOutputData = {
   seq: number;
 };
 
-export type SplitSeqEdge = Edge<EdgeData<SplitSeqOutputData>, 'splitSeq'>;
+export type SplitSeqEdge = DataEdge<SplitSeqOutputData, 'splitSeq'>;
 
 export type SplitSeqEdgeProps = Exclude<EdgeProps<SplitSeqEdge>, 'label'>;