add color coding to other nodes

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

Author: koonpeng

diagram-editor/frontend/nodes/listen-node.tsx

@@ -1,6 +1,6 @@
 import type { NodeProps } from '@xyflow/react';
 import type { OperationNode } from '.';
-import BaseNode from './base-node';
+import BaseNode, { HandleType } from './base-node';
 import { ListenIcon } from './icons';
 
 function ListenNodeComp(props: NodeProps<OperationNode<'listen'>>) {
@@ -10,6 +10,7 @@ function ListenNodeComp(props: NodeProps<OperationNode<'listen'>>) {
       icon={<ListenIcon />}
       label="Listen"
       variant="inputOutput"
+      inputHandleType={HandleType.Buffer}
     />
   );
 }

diagram-editor/frontend/nodes/scope-node.tsx

@@ -33,6 +33,7 @@ function ScopeNodeComp({
         type="source"
         position={sourcePosition}
         isConnectable={isConnectable}
+        className="handle-data-stream"
       />
     </>
   );

diagram-editor/frontend/nodes/section-node.tsx

@@ -3,7 +3,7 @@ import type { NextOperation } from '../types/api';
 import type { Node } from '../types/react-flow';
 import { isSectionBuilder } from '../utils/operation';
 import type { OperationNode } from '.';
-import BaseNode from './base-node';
+import BaseNode, { HandleType } from './base-node';
 import {
   SectionBufferIcon,
   SectionIcon,
@@ -43,6 +43,7 @@ export function SectionNodeComp(props: NodeProps<OperationNode<'section'>>) {
       icon={<SectionIcon />}
       label={label}
       variant="inputOutput"
+      inputHandleType={HandleType.DataBuffer}
     />
   );
 }
@@ -89,6 +90,7 @@ export function SectionBufferNodeComp(props: NodeProps<SectionBufferNode>) {
       label="Section Buffer"
       variant="output"
       caption={props.data.remappedId}
+      outputHandleType={HandleType.Buffer}
     />
   );
 }