Actualmente estoy trabajando en la implementación de un gráfico que tiene diferentes nodos ( Gráfico de red ).

Inicialmente, cuando se representa la página, se realiza una llamada API que muestra el gráfico de red con diferentes nodos. El usuario puede hacer doble clic en el Nodo y generará un nuevo gráfico para el Nodo seleccionado . El usuario puede continuar haciendo clic en los nodos (padre -> hijo1 -> hijo2 -> hijo3). Esto está funcionando bien.

En algunos escenarios, cuando un usuario hace doble clic en un nodo , no tenemos datos de la API. En este caso, debemos mostrar una ventana emergente de error y también debemos volver a cargar el gráfico con el nodo anterior (nodo principal).

Este es el ejemplo del gráfico de red que se parece a https://visjs.github.io/vis-network/examples/network/basicUsage.html

Tengo dificultades para cargar los datos del nodo anterior cuando NO hay datos de la llamada API.

Aquí está el pseudocódigo.

 const NetworkGraph = (props: any) => { const container = useRef<HTMLInputElement | null>(null); const [nodeId, setNodeId] = useState(props.nodeId) const { graphData, isLoading } = useGetNetowrkGraphData(nodeId); //Custom hook making API call useEffect(() => { if (isLoading === false) { if (graphData.nodes.length <= 0) { setMessage('No data found', 'error'); //TODO: Here I need to set the previous NodeId and show previous graph } const nodes = new DataSet(graphData.nodes); const edges = new DataSet(graphData.edges as any[]); const networkData = { nodes: nodes, edges: edges }; const network = container.current && new Network(container.current, networkData, options); network?.on('doubleClick', function (params) { var ids = params.nodes; var clickedNodes = nodes.get(ids); if (clickedNodes && clickedNodes.length > 0) { setNodeId(clickedNodes[0].id); } }); } }, [ container, nodeId, graphData.nodes, graphData.edges, isLoading, setNodeId, setMessage, ]); if (isLoading) return <div>Loading...</div>; return ( <> <Div> <div ref={container}/> </Div> </> ); }; export default NetworkGraph;