stricter type checks for section interfaces

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

Author: koonpeng

diagram-editor/frontend/add-operation.tsx

@@ -7,11 +7,7 @@ import {
 import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { EditorMode, useEditorMode } from './editor-mode';
-import type {
-  DiagramEditorNode,
-  SectionInterfaceNode,
-  SectionInterfaceNodeTypes,
-} from './nodes';
+import type { DiagramEditorNode } from './nodes';
 import {
   BufferAccessIcon,
   BufferIcon,
@@ -23,16 +19,19 @@ import {
   NodeIcon,
   ScopeIcon,
   SectionBufferIcon,
+  type SectionBufferNode,
   SectionInputIcon,
+  type SectionInputNode,
   SectionOutputIcon,
+  type SectionOutputNode,
   SerializedJoinIcon,
   SplitIcon,
   TransformIcon,
   UnzipIcon,
 } from './nodes';
 import type { DiagramOperation } from './types/api';
-import { joinNamespaces, ROOT_NAMESPACE } from './utils';
 import { calculateScopeBounds, LAYOUT_OPTIONS } from './utils/layout';
+import { joinNamespaces, ROOT_NAMESPACE } from './utils/namespace';
 
 const StyledOperationButton = styled(Button)({
   justifyContent: 'flex-start',
@@ -44,18 +43,48 @@ export interface AddOperationProps {
   onAdd?: (change: NodeAddChange<DiagramEditorNode>[]) => void;
 }
 
-function createSectionInterfaceChange(
-  type: SectionInterfaceNodeTypes,
+function createSectionInputChange(
   remappedId: string,
   targetId: string,
   position: XYPosition,
-): NodeAddChange<SectionInterfaceNode> {
+): NodeAddChange<SectionInputNode> {
   return {
     type: 'add',
     item: {
       id: uuidv4(),
-      type,
-      data: { namespace: ROOT_NAMESPACE, remappedId, targetId },
+      type: 'sectionInput',
+      data: { remappedId, targetId },
+      position,
+    },
+  };
+}
+
+function createSectionOutputChange(
+  outputId: string,
+  position: XYPosition,
+): NodeAddChange<SectionOutputNode> {
+  return {
+    type: 'add',
+    item: {
+      id: uuidv4(),
+      type: 'sectionOutput',
+      data: { outputId },
+      position,
+    },
+  };
+}
+
+function createSectionBufferChange(
+  remappedId: string,
+  targetId: string,
+  position: XYPosition,
+): NodeAddChange<SectionBufferNode> {
+  return {
+    type: 'add',
+    item: {
+      id: uuidv4(),
+      type: 'sectionBuffer',
+      data: { remappedId, targetId },
       position,
     },
   };
@@ -177,10 +206,9 @@ function AddOperation({ parentId, newNodePosition, onAdd }: AddOperationProps) {
             startIcon={<SectionInputIcon />}
             onClick={() => {
               onAdd?.([
-                createSectionInterfaceChange(
-                  'sectionInput',
-                  'input',
-                  'input',
+                createSectionInputChange(
+                  'new_input',
+                  'new_input',
                   newNodePosition,
                 ),
               ]);
@@ -195,12 +223,7 @@ function AddOperation({ parentId, newNodePosition, onAdd }: AddOperationProps) {
             startIcon={<SectionOutputIcon />}
             onClick={() => {
               onAdd?.([
-                createSectionInterfaceChange(
-                  'sectionOutput',
-                  'output',
-                  'output',
-                  newNodePosition,
-                ),
+                createSectionOutputChange('new_output', newNodePosition),
               ]);
             }}
           >
@@ -213,10 +236,9 @@ function AddOperation({ parentId, newNodePosition, onAdd }: AddOperationProps) {
             startIcon={<SectionBufferIcon />}
             onClick={() => {
               onAdd?.([
-                createSectionInterfaceChange(
-                  'sectionBuffer',
-                  'buffer',
-                  'buffer',
+                createSectionBufferChange(
+                  'new_buffer',
+                  'new_buffer',
                   newNodePosition,
                 ),
               ]);

diagram-editor/frontend/auto-layout-button.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type { DiagramEditorEdge } from './edges';
 import type { DiagramEditorNode } from './nodes';
 import { MaterialSymbol } from './nodes';
-import { autoLayout } from './utils';
+import { autoLayout } from './utils/auto-layout';
 import { LAYOUT_OPTIONS } from './utils/layout';
 
 export interface AutoLayoutButtonProps {

diagram-editor/frontend/diagram-editor.tsx

@@ -47,8 +47,9 @@ import {
   type OperationNode,
 } from './nodes';
 import { useTemplates } from './templates-provider';
-import { exhaustiveCheck, allowEdges as getAllowEdges } from './utils';
 import { autoLayout } from './utils/auto-layout';
+import { allowEdges as getAllowEdges } from './utils/connection';
+import { exhaustiveCheck } from './utils/exhaustive-check';
 import { calculateScopeBounds, LAYOUT_OPTIONS } from './utils/layout';
 import { loadDiagramJson, loadEmpty, loadTemplate } from './utils/load-diagram';
 

diagram-editor/frontend/forms/edit-node-form.stories.tsx

@@ -1,6 +1,6 @@
 import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryObj } from 'storybook-react-rsbuild';
-import { ROOT_NAMESPACE } from '../utils';
+import { ROOT_NAMESPACE } from '../utils/namespace';
 import EditNodeForm from './edit-node-form';
 
 const meta: Meta<typeof EditNodeForm> = {

diagram-editor/frontend/forms/transform-form.stories.tsx

@@ -1,6 +1,6 @@
 import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryObj } from 'storybook-react-rsbuild';
-import { ROOT_NAMESPACE } from '../utils';
+import { ROOT_NAMESPACE } from '../utils/namespace';
 import TransformForm from './transform-form';
 
 const meta: Meta<typeof TransformForm> = {

diagram-editor/frontend/node-manager.ts

@@ -6,12 +6,9 @@ import {
   TERMINATE_ID,
 } from './nodes';
 import type { NextOperation } from './types/api';
-import {
-  exhaustiveCheck,
-  isBuiltin,
-  joinNamespaces,
-  ROOT_NAMESPACE,
-} from './utils';
+import { exhaustiveCheck } from './utils/exhaustive-check';
+import { joinNamespaces, ROOT_NAMESPACE } from './utils/namespace';
+import { isBuiltin } from './utils/operation';
 
 export class NodeManager {
   private nodeIdMap: Map<string, DiagramEditorNode> = new Map();
@@ -66,6 +63,9 @@ export class NodeManager {
     return this.getNodeFromNamespaceOpId(ROOT_NAMESPACE, opId);
   }
 
+  /**
+   * @returns returns `null` if the next operation points to a builtin node not rendered in the editor (e.g. `dispose`, `cancel`).
+   */
   getNodeFromNextOp(
     namespace: string,
     nextOp: NextOperation,

diagram-editor/frontend/nodes/icons.tsx

@@ -1,7 +1,7 @@
 import { Box, type BoxProps } from '@mui/material';
 import type React from 'react';
 import type { DiagramOperation } from '../types/api';
-import { exhaustiveCheck } from '../utils';
+import { exhaustiveCheck } from '../utils/exhaustive-check';
 
 export interface MaterialSymbolProps extends BoxProps {
   symbol: string;

diagram-editor/frontend/nodes/index.ts

@@ -24,9 +24,14 @@ import UnzipNode from './unzip-node';
 
 export * from './icons';
 export type {
-  SectionInterfaceData,
+  SectionBufferData,
+  SectionBufferNode,
+  SectionInputData,
+  SectionInputNode,
   SectionInterfaceNode,
   SectionInterfaceNodeTypes,
+  SectionOutputData,
+  SectionOutputNode,
 } from './section-node';
 export * from './utils';
 

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

@@ -1,7 +1,7 @@
 import type { NodeProps } from '@xyflow/react';
 import type { NextOperation } from '../types/api';
 import type { Node } from '../types/react-flow';
-import { isSectionBuilder, type ROOT_NAMESPACE } from '../utils';
+import { isSectionBuilder } from '../utils/operation';
 import type { OperationNode } from '.';
 import BaseNode from './base-node';
 import {
@@ -11,13 +11,28 @@ import {
   SectionOutputIcon,
 } from './icons';
 
-export type SectionInterfaceData = {
-  // section interfaces is always in the root namespace
-  namespace: typeof ROOT_NAMESPACE;
+export type SectionInputData = {
   remappedId: string;
   targetId: NextOperation;
 };
 
+export type SectionInputNode = Node<SectionInputData, 'sectionInput'>;
+
+export type SectionOutputData = {
+  outputId: string;
+};
+
+export type SectionOutputNode = Node<SectionOutputData, 'sectionOutput'>;
+
+export type SectionBufferData = SectionInputData;
+
+export type SectionBufferNode = Node<SectionBufferData, 'sectionBuffer'>;
+
+export type SectionInterfaceNode =
+  | SectionInputNode
+  | SectionOutputNode
+  | SectionBufferNode;
+
 export function SectionNode(props: NodeProps<OperationNode<'section'>>) {
   const label = isSectionBuilder(props.data.op)
     ? props.data.op.builder
@@ -39,13 +54,7 @@ export type SectionInterfaceNodeTypes =
   | 'sectionOutput'
   | 'sectionBuffer';
 
-export type SectionInterfaceNode<
-  K extends SectionInterfaceNodeTypes = SectionInterfaceNodeTypes,
-> = Node<SectionInterfaceData, K>;
-
-export function SectionInputNode(
-  props: NodeProps<SectionInterfaceNode<'sectionInput'>>,
-) {
+export function SectionInputNode(props: NodeProps<SectionInputNode>) {
   return (
     <BaseNode
       {...props}
@@ -57,23 +66,19 @@ export function SectionInputNode(
   );
 }
 
-export function SectionOutputNode(
-  props: NodeProps<SectionInterfaceNode<'sectionOutput'>>,
-) {
+export function SectionOutputNode(props: NodeProps<SectionOutputNode>) {
   return (
     <BaseNode
       {...props}
       color="secondary"
       icon={<SectionOutputIcon />}
-      label={props.data.remappedId}
+      label="Output"
       variant="input"
     />
   );
 }
 
-export function SectionBufferNode(
-  props: NodeProps<SectionInterfaceNode<'sectionBuffer'>>,
-) {
+export function SectionBufferNode(props: NodeProps<SectionBufferNode>) {
   return (
     <BaseNode
       {...props}

diagram-editor/frontend/nodes/utils.ts

@@ -1,17 +1,51 @@
-import type { BuiltinNode, DiagramEditorNode, OperationNode } from '.';
+import type {
+  BuiltinNode,
+  BuiltinNodeTypes,
+  DiagramEditorNode,
+  OperationNode,
+  OperationNodeTypes,
+} from '.';
 
 export function isOperationData(
   data: DiagramEditorNode['data'],
 ): data is OperationNode['data'] {
   return 'type' in data;
 }
 
+const OPERATION_NODE_TYPES = Object.keys({
+  buffer: null,
+  buffer_access: null,
+  fork_clone: null,
+  fork_result: null,
+  join: null,
+  listen: null,
+  node: null,
+  scope: null,
+  section: null,
+  serialized_join: null,
+  split: null,
+  stream_out: null,
+  transform: null,
+  unzip: null,
+} satisfies Record<OperationNodeTypes, null>);
+
 export function isOperationNode(
   node: DiagramEditorNode,
 ): node is OperationNode {
-  return node.type ? !['start', 'terminate'].includes(node.type) : false;
+  return OPERATION_NODE_TYPES.includes(node.type);
 }
 
+const BUILTIN_NODE_TYPES = Object.keys({
+  start: null,
+  terminate: null,
+} satisfies Record<BuiltinNodeTypes, null>);
+
 export function isBuiltinNode(node: DiagramEditorNode): node is BuiltinNode {
-  return node.type ? ['start', 'terminate'].includes(node.type) : false;
+  return BUILTIN_NODE_TYPES.includes(node.type);
+}
+
+export function isScopeNode(
+  node: DiagramEditorNode,
+): node is OperationNode<'scope'> {
+  return node.type === 'scope';
 }