Feat: Limit the number of Splitter and Parser operators on the canvas to only one #9869 (#10362)

### What problem does this PR solve?

Feat: Limit the number of Splitter and Parser operators on the canvas to
only one #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/data-flow/canvas/node/handle.tsx

@@ -4,8 +4,9 @@ import { Handle, HandleProps } from '@xyflow/react';
 import { Plus } from 'lucide-react';
 import { useMemo } from 'react';
 import { HandleContext } from '../../context';
+import useGraphStore from '../../store';
 import { useDropdownManager } from '../context';
-import { InnerNextStepDropdown } from './dropdown/next-step-dropdown';
+import { NextStepDropdown } from './dropdown/next-step-dropdown';
 
 export function CommonHandle({
   className,
@@ -17,6 +18,8 @@ export function CommonHandle({
   const { canShowDropdown, setActiveDropdown, clearActiveDropdown } =
     useDropdownManager();
 
+  const { hasChildNode } = useGraphStore((state) => state);
+
   const value = useMemo(
     () => ({
       nodeId,
@@ -39,6 +42,10 @@ export function CommonHandle({
         onClick={(e) => {
           e.stopPropagation();
 
+          if (hasChildNode(nodeId)) {
+            return;
+          }
+
           if (!canShowDropdown()) {
             return;
           }
@@ -49,14 +56,14 @@ export function CommonHandle({
       >
         <Plus className="size-3 pointer-events-none text-text-title-invert" />
         {visible && (
-          <InnerNextStepDropdown
+          <NextStepDropdown
             hideModal={() => {
               hideModal();
               clearActiveDropdown();
             }}
           >
             <span></span>
-          </InnerNextStepDropdown>
+          </NextStepDropdown>
         )}
       </Handle>
     </HandleContext.Provider>