Bugfix callback graph with circular callbacks by adding visited markers

Author: Aaron-Wrote-This

CHANGELOG.md

@@ -2,6 +2,27 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+Fixes stack overflow seen when accessing the Callback Graph when there are circular callbacks present.
+Solves: https://github.com/plotly/dash/issues/1656
+
+<img width="1657" height="1225" alt="image" src="https://github.com/user-attachments/assets/b175d45c-4aba-4905-be14-568bc7bdc846" />
+
+
+## Contributor Checklist
+
+- [X] I have broken down my PR scope into the following TODO tasks
+   -  [X] Add cycle breaker to CallbackGraphEffects updateSelectedNode
+- [ ] I have run the tests locally and they passed. (refer to testing section in [contributing](https://github.com/plotly/dash/blob/master/CONTRIBUTING.md))
+- [ ] I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
+
+### optionals
+
+- [X] I have added entry in the `CHANGELOG.md`
+- [ ] If this PR needs a follow-up in **dash docs**, **community thread**, I have mentioned the relevant URLS as follows
+    -  [ ] this GitHub [#PR number]() updates the dash docs
+    -  [ ] here is the show and tell thread in Plotly Dash community
+
+
 ## [UNRELEASED]
 
 ## Added
@@ -16,6 +37,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#3465](https://github.com/plotly/dash/pull/3465) Plotly cloud integrations, add devtool API, placeholder plotly cloud CLI & publish button, `dash[cloud]` extra dependencies. 
 
 ## Fixed
+- [#3490](https://github.com/plotly/dash/pull/3490) Fix stack overflow when circular callbacks are displayed on the devtool callback 
 - [#3395](https://github.com/plotly/dash/pull/3395) Fix Components added through set_props() cannot trigger related callback functions. Fix [#3316](https://github.com/plotly/dash/issues/3316)
 - [#3415](https://github.com/plotly/dash/pull/3415) Fix the error triggered when only a single no_update is returned for client-side callback functions with multiple Outputs. Fix [#3366](https://github.com/plotly/dash/issues/3366)
 - [#3416](https://github.com/plotly/dash/issues/3416) Fix DeprecationWarning in dash/_jupyter.py by migrating from deprecated ipykernel.comm.Comm to comm module

dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphEffects.js

@@ -27,8 +27,12 @@ function getEdgeTypes(node) {
  * @returns {function} - cleanup function, for useEffect hook
  */
 export function updateSelectedNode(cy, id) {
-    function ascend(node, collection) {
+    function ascend(node, collection, visited = new Set()) {
         // FIXME: Should we include State parents but non-recursively?
+        if (visited.has(node.id())) {
+            return;
+        }
+        visited.add(node.id());
         const type = node.data().type === 'callback' ? 'input' : 'output';
         const edges = getEdgeTypes(node)[type];
         const parents = edges.sources();
@@ -37,10 +41,14 @@ export function updateSelectedNode(cy, id) {
         if (node.data().type === 'property') {
             collection.merge(node.ancestors());
         }
-        parents.forEach(node => ascend(node, collection));
+        parents.forEach(node => ascend(node, collection, visited));
     }
 
-    function descend(node, collection) {
+    function descend(node, collection, visited = new Set()) {
+        if (visited.has(node.id())) {
+            return;
+        }
+        visited.add(node.id());
         const type = node.data().type === 'callback' ? 'output' : 'input';
         const edges = getEdgeTypes(node)[type];
         const children = edges.targets();
@@ -49,7 +57,7 @@ export function updateSelectedNode(cy, id) {
         if (node.data().type === 'property') {
             collection.merge(node.ancestors());
         }
-        children.forEach(node => descend(node, collection));
+        children.forEach(node => descend(node, collection, visited));
     }
 
     if (id) {
@@ -62,9 +70,7 @@ export function updateSelectedNode(cy, id) {
         // Find the subtree that the node belongs to. A subtree contains
         // all all ancestors and descendants that are connected via Inputs
         // or Outputs (but not State).
-
-        // WARNING: No cycle detection!
-
+        
         const subtree = cy.collection();
         subtree.merge(node);
         ascend(node, subtree);