wip supporting section connections

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 { defaultEdgeData, EditEdgeForm, EditNodeForm } from './forms';
+import { defaultEdgeOutputData, 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: defaultEdgeData(validEdges[0]),
+            data: defaultEdgeOutputData(validEdges[0]),
           } as DiagramEditorEdge;
 
           const validationResult = validateEdgeSimple(

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

@@ -0,0 +1,23 @@
+import { type EdgeProps, StepEdge } from '@xyflow/react';
+import type { Edge } from '../types/react-flow';
+import type { EdgeData } from '.';
+
+export type BufferKeySlotData = {
+  type: 'bufferKey';
+  key: string;
+};
+
+export type BufferSeqSlotData = {
+  type: 'bufferSeq';
+  seq: number;
+};
+
+export type BufferOutputData = { [k: string]: unknown };
+// TODO: support section buffer
+export type BufferEdge = Edge<EdgeData<BufferOutputData>, 'buffer'>;
+
+export type BufferEdgeProps = Exclude<EdgeProps<BufferEdge>, 'label'>;
+
+const BufferEdgeComp = StepEdge;
+
+export default BufferEdgeComp;

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

@@ -1,6 +1,7 @@
 import { MarkerType } from '@xyflow/react';
 import { v4 as uuidv4 } from 'uuid';
-import type { DiagramEditorEdge, EdgeData } from '.';
+import type { DiagramEditorEdge, EdgeOutputData } from '.';
+import type { BufferKeySlotData, BufferSeqSlotData } from './buffer-edge';
 
 export function createBaseEdge(
   source: string,
@@ -25,19 +26,21 @@ export function createDefaultEdge(
   return {
     ...createBaseEdge(source, target),
     type: 'default',
-    data: {},
+    data: { output: {} },
   };
 }
 
 export function createUnzipEdge(
   source: string,
   target: string,
-  data: EdgeData<'unzip'>,
+  data: EdgeOutputData<'unzip'>,
 ): DiagramEditorEdge<'unzip'> {
   return {
     ...createBaseEdge(source, target),
     type: 'unzip',
-    data,
+    data: {
+      output: data,
+    },
   };
 }
 
@@ -66,24 +69,24 @@ export function createForkResultErrEdge(
 export function createSplitKeyEdge(
   source: string,
   target: string,
-  data: EdgeData<'splitKey'>,
+  data: EdgeOutputData<'splitKey'>,
 ): DiagramEditorEdge<'splitKey'> {
   return {
     ...createBaseEdge(source, target),
     type: 'splitKey',
-    data,
+    data: { output: data },
   };
 }
 
 export function createSplitSeqEdge(
   source: string,
   target: string,
-  data: EdgeData<'splitSeq'>,
+  data: EdgeOutputData<'splitSeq'>,
 ): DiagramEditorEdge<'splitSeq'> {
   return {
     ...createBaseEdge(source, target),
     type: 'splitSeq',
-    data,
+    data: { output: data },
   };
 }
 
@@ -98,38 +101,38 @@ export function createSplitRemainingEdge(
   };
 }
 
-export function createBufferKeyEdge(
-  source: string,
-  target: string,
-  data: EdgeData<'bufferKey'>,
-): DiagramEditorEdge<'bufferKey'> {
-  return {
-    ...createBaseEdge(source, target),
-    type: 'bufferKey',
-    data,
-  };
-}
-
-export function createBufferSeqEdge(
+export function createBufferEdge(
   source: string,
   target: string,
-  data: EdgeData<'bufferSeq'>,
-): DiagramEditorEdge<'bufferSeq'> {
+  data: BufferKeySlotData | BufferSeqSlotData,
+): DiagramEditorEdge<'buffer'> {
   return {
     ...createBaseEdge(source, target),
-    type: 'bufferSeq',
-    data,
+    type: 'buffer',
+    data: { output: {}, input: data },
   };
 }
 
 export function createStreamOutEdge(
   source: string,
   target: string,
-  data: EdgeData<'streamOut'>,
+  data: EdgeOutputData<'streamOut'>,
 ): DiagramEditorEdge<'streamOut'> {
   return {
     ...createBaseEdge(source, target),
     type: 'streamOut',
-    data,
+    data: { output: data },
   };
 }
+
+// export function createSectionEdge(
+//   source: string,
+//   target: string,
+//   data: EdgeOutputData<'section'>,
+// ): DiagramEditorEdge<'section'> {
+//   return {
+//     ...createBaseEdge(source, target),
+//     type: 'section',
+//     data: { output: data },
+//   };
+// }

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

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

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

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

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

@@ -1,72 +1,57 @@
 import { StepEdge } from '@xyflow/react';
 import type { Edge } from '../types/react-flow';
-import BufferKeyEdgeComp, {
-  type BufferKeyEdge,
-  type BufferKeyEdgeData,
-} from './buffer-key-edge';
-import BufferSeqEdgeComp, {
-  type BufferSeqEdge,
-  type BufferSeqEdgeData,
-} from './buffer-seq-edge';
+import BufferEdgeComp, {
+  type BufferEdge,
+  type BufferKeySlotData,
+  type BufferSeqSlotData,
+} from './buffer-edge';
 import ForkResultErrEdgeComp, {
   type ForkResultErrEdge,
-  type ForkResultErrEdgeData,
 } from './fork-result-err-edge';
 import ForkResultOkEdgeComp, {
   type ForkResultOkEdge,
-  type ForkResultOkEdgeData,
 } from './fork-result-ok-edge';
-import SplitKeyEdgeComp, {
-  type SplitKeyEdge,
-  type SplitKeyEdgeData,
-} from './split-key-edge';
+import SplitKeyEdgeComp, { type SplitKeyEdge } from './split-key-edge';
 import SplitRemainingEdgeComp, {
   type SplitRemainingEdge,
-  type SplitRemainingEdgeData,
 } from './split-remaining-edge';
-import SplitSeqEdgeComp, {
-  type SplitSeqEdge,
-  type SplitSeqEdgeData,
-} from './split-seq-edge';
-import StreamOutEdgeComp, {
-  type StreamOutEdge,
-  type StreamOutEdgeData,
-} from './stream-out-edge';
-import UnzipEdgeComp, {
-  type UnzipEdge,
-  type UnzipEdgeData,
-} from './unzip-edge';
+import SplitSeqEdgeComp, { type SplitSeqEdge } from './split-seq-edge';
+import StreamOutEdgeComp, { type StreamOutEdge } from './stream-out-edge';
+import UnzipEdgeComp, { type UnzipEdge } from './unzip-edge';
 
-export type { BufferKeyEdge } from './buffer-key-edge';
-export type { BufferSeqEdge } from './buffer-seq-edge';
+export type { BufferEdge } from './buffer-edge';
 export * from './create-edge';
 export type { SplitKeyEdge } from './split-key-edge';
 export type { SplitRemainingEdge } from './split-remaining-edge';
 export type { SplitSeqEdge } from './split-seq-edge';
 export type { StreamOutEdge } from './stream-out-edge';
 export type { UnzipEdge } from './unzip-edge';
-export type DefaultEdgeData = Record<string, never>;
-export type DefaultEdge = Edge<DefaultEdgeData, 'default'>;
 
-type EdgeMapping = {
-  default: { edge: DefaultEdge; data: DefaultEdgeData };
-  unzip: { edge: UnzipEdge; data: UnzipEdgeData };
-  forkResultOk: { edge: ForkResultOkEdge; data: ForkResultOkEdgeData };
-  forkResultErr: { edge: ForkResultErrEdge; data: ForkResultErrEdgeData };
-  splitKey: { edge: SplitKeyEdge; data: SplitKeyEdgeData };
-  splitSeq: { edge: SplitSeqEdge; data: SplitSeqEdgeData };
-  splitRemaining: { edge: SplitRemainingEdge; data: SplitRemainingEdgeData };
-  bufferKey: { edge: BufferKeyEdge; data: BufferKeyEdgeData };
-  bufferSeq: { edge: BufferSeqEdge; data: BufferSeqEdgeData };
-  streamOut: { edge: StreamOutEdge; data: StreamOutEdgeData };
+export type EdgeData<O extends Record<string, unknown>> = {
+  output: O;
+  input?: BufferKeySlotData | BufferSeqSlotData;
 };
 
-export type EdgeTypes = keyof EdgeMapping;
+export type DefaultOutputData = { [k: string]: unknown };
+export type DefaultEdge = Edge<EdgeData<DefaultOutputData>, 'default'>;
 
-export type DiagramEditorEdge<T extends EdgeTypes = EdgeTypes> =
-  EdgeMapping[T]['edge'];
+export type EdgeMapping = {
+  default: DefaultEdge;
+  unzip: UnzipEdge;
+  forkResultOk: ForkResultOkEdge;
+  forkResultErr: ForkResultErrEdge;
+  splitKey: SplitKeyEdge;
+  splitSeq: SplitSeqEdge;
+  splitRemaining: SplitRemainingEdge;
+  buffer: BufferEdge;
+  streamOut: StreamOutEdge;
+  // section: SectionEdge;
+};
 
-export type EdgeData<T extends EdgeTypes = EdgeTypes> = EdgeMapping[T]['data'];
+export type EdgeTypes = keyof EdgeMapping;
+
+export type EdgeOutputData<K extends keyof EdgeMapping = keyof EdgeMapping> =
+  EdgeMapping[K]['data']['output'];
 
 export const EDGE_TYPES = {
   default: StepEdge,
@@ -76,7 +61,9 @@ export const EDGE_TYPES = {
   splitKey: SplitKeyEdgeComp,
   splitSeq: SplitSeqEdgeComp,
   splitRemaining: SplitRemainingEdgeComp,
-  bufferKey: BufferKeyEdgeComp,
-  bufferSeq: BufferSeqEdgeComp,
+  buffer: BufferEdgeComp,
   streamOut: StreamOutEdgeComp,
+  // section: SectionOutputEdgeComp,
 } satisfies Record<EdgeTypes, unknown>;
+
+export type DiagramEditorEdge<T extends EdgeTypes = EdgeTypes> = EdgeMapping[T];

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

@@ -0,0 +1,26 @@
+import { type EdgeProps, StepEdge } from '@xyflow/react';
+import { memo } from 'react';
+import type { Edge } from '../types/react-flow';
+import type { EdgeData } from '.';
+
+export type SectionOutputData = {
+  output: string;
+};
+
+export type SectionEdge = Edge<EdgeData<SectionOutputData>, 'section'>;
+
+export type SectionOutputEdgeProps = Exclude<EdgeProps<SectionEdge>, 'label'>;
+
+export const SectionOutputEdgeComp = memo((props: SectionOutputEdgeProps) => {
+  return <StepEdge {...props} label={props.data.output.toString()} />;
+});
+
+export type SectionInputSlotData = {
+  type: 'sectionInput';
+  input: string;
+};
+
+export type SectionBufferSlotData = {
+  type: 'sectionBuffer';
+  input: string;
+};

diagram-editor/frontend/edges/index.ts

@@ -1,16 +1,17 @@
 import { type EdgeProps, StepEdge } from '@xyflow/react';
 import { memo } from 'react';
 import type { Edge } from '../types/react-flow';
+import type { EdgeData } from '.';
 
-export type SplitKeyEdgeData = {
+export type SplitKeyOutputData = {
   key: string;
 };
-export type SplitKeyEdge = Edge<SplitKeyEdgeData, 'splitKey'>;
+export type SplitKeyEdge = Edge<EdgeData<SplitKeyOutputData>, 'splitKey'>;
 
 export type SplitKeyEdgeProps = Exclude<EdgeProps<SplitKeyEdge>, 'label'>;
 
 function SplitKeyEdgeComp(props: SplitKeyEdgeProps) {
-  return <StepEdge {...props} label={props.data.key.toString()} />;
+  return <StepEdge {...props} label={props.data.output.key.toString()} />;
 }
 
 export default memo(SplitKeyEdgeComp);