Function Graph

src/components/graph/Graph.tsx:147–217

({
  initialAddresses,
  initialPaths,
  onAutoSave,
  onLocalSave,
})

 */

const Graph: FC<GraphProps> = ({
  initialAddresses,
  initialPaths,
  onAutoSave,
  onLocalSave,
}) => {
  // Grab all initial addresses and create nodes for them
  const initialNodes = useMemo(() => {
    const nodes: Node[] = [];
    const expandNodeAutomatically = initialAddresses.length === 1; // Only expand if there's one address

    initialAddresses.forEach((address) => {
      nodes.push(
        createAddressNode(
          address,
          AddressNodeState.MINIMIZED,
          true,
          0,
          0,
          expandNodeAutomatically,
        ),
      );
    });

    return nodes;
  }, [initialAddresses]);

  const initialEdges = useMemo(() => {
    const edges: Edge[] = [];
    initialPaths.forEach((path) => {
      const [source, target] = path.split("-");
      if (source && target) {
        edges.push({
          id: `${source}-${target}`,
          source: source,
          target: target,
          sourceHandle: "a",
          targetHandle: "a",
          type: "TransfershipEdge",
          data: {
            state: TransfershipEdgeStates.REVEALED,
            volume: 0,
          },
        });
      }
    });
    return edges;
  }, [initialPaths]);

  const initialLayoutedNodes = useMemo(() => {
    if (initialNodes.length === 0) return [];

    return calculateLayoutedElements(initialNodes, initialEdges);
  }, [initialNodes, initialEdges]);

  // We make sure to calculate the layouted nodes and edges before rendering
  return (
    <>