function Flow()

in visual/react/app/page.tsx [68:112]

• 43 lines of code
• 1 McCabe index (conditional complexity)

function Flow() {
  const { fitView } = useReactFlow();
  const [nodes, setNodes, onNodesChange] = useNodesState([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);

  const onLayout = () => {
    layoutElk(toElk({ nodes, edges })).then(({ nodes, edges }) => {
      const { layoutNodes, layoutEdges } = applyConfig({ nodes, edges });
      setNodes(layoutNodes)
      setEdges(layoutEdges)
    }).catch((e) => console.error(e));
  };
  const onRefresh = () => {
    const doRefresh = async () => {
      const elkNode = await initialized_nodes_edges('/flow')
      const { layoutNodes, layoutEdges } = applyConfig(await layoutElk(elkNode))
      setNodes(layoutNodes)
      setEdges(layoutEdges)
    }
    doRefresh();
    window.requestAnimationFrame(() => fitView());
  };
  useLayoutEffect(onRefresh, []);

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      fitView
      nodeTypes={nodeTypes}
      maxZoom={10}
      minZoom={0.1}
    >
      <Background />
      <Panel position='top-right'>
        <button className='text-stone-800' onClick={onRefresh}>Refresh</button>
        <p />
        <button className='text-stone-800' onClick={onLayout}>Layout</button>
      </Panel>
      <Controls />
    </ReactFlow>
  );
};