Hi there I face a bug to display nodes and edges from left to right

[Muhammad1Siddique]

import { useMemo } from "react";
import { Node, Edge, Position } from "reactflow";
import { type NodeData } from "../../../../types/reactflowType";
import Dagre from "@dagrejs/dagre";

export type UseExpandCollapseOptions = {
layoutNodes?: boolean;
treeWidth?: number;
treeHeight?: number;
};

function filterCollapsedChildren(
dagre: Dagre.graphlib.Graph,
node: Node
) {
const children = dagre.successors(node.id) as string[] | undefined;
node.data.expandable = !!children?.length;

if (!node.data.expanded && children) {
while (children.length) {
const child = children.pop()!;
const childSuccessors = dagre.successors(child) as string[] | undefined;
if (childSuccessors) {
children.push(...childSuccessors);
}
dagre.removeNode(child);
}
}
}

function useExpandCollapse(
nodes: Node[],
edges: Edge[],
{
layoutNodes = true,
treeWidth = 220,
treeHeight = 100,
}: UseExpandCollapseOptions = {}
): { nodes: Node[]; edges: Edge[] } {
return useMemo(() => {
if (!layoutNodes || !Array.isArray(nodes) || nodes.length === 0) {
return { nodes, edges };
}

const dagre = new Dagre.graphlib.Graph()
  .setDefaultEdgeLabel(() => ({}))
  .setGraph({ rankdir: "LR" });

nodes.forEach(node => {
  dagre.setNode(node.id, {
    width: treeWidth,
    height: treeHeight,
    data: node.data,
  });
});

edges.forEach(edge => {
  dagre.setEdge(edge.source, edge.target);
});

nodes.forEach(node => filterCollapsedChildren(dagre, node));

Dagre.layout(dagre);

const newNodes = nodes.flatMap((node) => {
  if (!dagre.hasNode(node.id)) return [];

  const { x, y } = dagre.node(node.id);
  const position = { x, y };
  const data = { ...node.data };

  return [{ ...node, position, type: "custom", data }];
});

const newEdges = edges.map(edge => ({
  ...edge,
  targetPosition: Position.Left,
  sourcePosition: Position.Right
}));

return { nodes: newNodes, edges: newEdges };

}, [nodes, edges, layoutNodes, treeWidth, treeHeight]);
}

export default useExpandCollapse;

[bcakmakoglu]

sourcePosition and targetPosition are not properties you set on edges but on nodes.
https://reactflow.dev/api-reference/types/node#source-position
https://reactflow.dev/api-reference/types/node#target-position

If you're using custom nodes you can specify the positions on the <Handle> component directly:

<Handle type="source" position={Position.Right} />
<Handle type="target" position={Position.Left} />