Function ParallelNode

yaml-flow-editor/src/components/nodes/ParallelNode.tsx:16–303

* ParallelNode renders two formats: * - Format 1 (inline steps): parallelSteps[] displayed as a container with NestedStepRenderer * - Format 2 (module+params): module name + SubmoduleInlineViewer (original behaviour)

({ data, selected, id }: NodeProps)

 *  - Format 2 (module+params): module name + SubmoduleInlineViewer (original behaviour)
 */
function ParallelNode({ data, selected, id }: NodeProps) {
  const parallelData = data as ParallelNodeData;
  const config = NODE_CONFIGS.parallel;
  const isFormat1 = parallelData.parallelSteps && parallelData.parallelSteps.length > 0;
  const paramsCount = Array.isArray(parallelData.parameters_list) ? parallelData.parameters_list.length : 0;

  const [isDragOver, setIsDragOver] = useState(false);
  const { setNodes } = useReactFlow();
  const { selectedInnerStep, selectInnerStep } = useInnerStep();
  const layoutDirection = useLayoutDirection();
  const targetPos = layoutDirection === 'LR' ? Position.Left : Position.Top;
  const sourcePos = layoutDirection === 'LR' ? Position.Right : Position.Bottom;

  const parallelSteps = parallelData.parallelSteps || [];

  // ── Drag-drop for Format 2 (module) ──────────────────────────────
  const handleModuleDragOver = useCallback((e: React.DragEvent) => {
    const moduleData = e.dataTransfer.getData('application/module');
    if (moduleData) {
      e.preventDefault();
      e.stopPropagation();
      setIsDragOver(true);
    }
  }, []);

  const handleModuleDragLeave = useCallback((e: React.DragEvent) => {
    e.stopPropagation();
    setIsDragOver(false);
  }, []);

  const handleModuleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragOver(false);

    const moduleData = e.dataTransfer.getData('application/module');
    if (!moduleData) return;

    try {
      const module = JSON.parse(moduleData);
      setNodes((nodes) =>
        nodes.map((node) => {
          if (node.id === id) {
            const currentParams = (node.data as ParallelNodeData).parameters_list || [];
            const newParams = currentParams.length === 0
              ? [module.defaultParams || {}]
              : currentParams;
            return {
              ...node,
              data: {
                ...node.data,
                module: module.path,
                label: `Parallel: ${module.name}`,
                parameters_list: newParams,
                parallelSteps: undefined, // switch to Format 2
                moduleContents: undefined,
              },
            };