ACG fixes

dbux-code/package.json

@@ -933,12 +933,12 @@
         },
         {
           "command": "dbuxSessionView.node.annotateTraceQ",
-          "when": "viewItem == dbuxSessionView.tagNode",
+          "when": "viewItem == dbuxSessionView.tagNode && false",
           "group": "inline@1"
         },
         {
           "command": "dbuxSessionView.node.annotateTraceI",
-          "when": "viewItem == dbuxSessionView.tagNode",
+          "when": "viewItem == dbuxSessionView.tagNode && false",
           "group": "inline@2"
         },
         {

dbux-data/src/dataProviderUtil.js

@@ -234,16 +234,19 @@ export default {
   },
 
   /**
-   * Find a context's parent in call stack, skips virtual contexts and looking for async parent if it is a root context.
+   * Find a context's parent in call stack, looking for async parent if it is a root context.
    * NOTE: used in `AsyncCallStack`, `RootEdgesTDNode` and `ParentContext navigation` for consistency
    * @param {DataProvider} dp 
    * @param {number} contextId 
    */
   getContextAsyncStackParent(dp, contextId) {
     const { parentContextId, contextType } = dp.collections.executionContexts.getById(contextId);
     if (!dp.util.isRootContext(contextId)) {
-      // not a root, get real parent
-      return dp.util.getRealContextOfContext(parentContextId);
+      // // not a root, get real parent
+      // return dp.util.getRealContextOfContext(parentContextId);
+
+      // not a root, get parent
+      return dp.collections.executionContexts.getById(parentContextId);
     }
     else {
       // is root, looking for async parent
@@ -267,9 +270,12 @@ export default {
         }
       }
       else {
-        // if virtual: skip to realContext's parent and call trace (skip all virtual contexts, in general)
-        const realContext = dp.util.getRealContextOfContext(contextId);
-        return dp.util.getRealContextOfContext(realContext.parentContextId);
+        // // if virtual: skip to realContext's parent and call trace (skip all virtual contexts, in general)
+        // const realContext = dp.util.getRealContextOfContext(contextId);
+        // return dp.util.getRealContextOfContext(realContext.parentContextId);
+
+        // if virtual: go to real context
+        return dp.util.getRealContextOfContext(contextId);
       }
     }
   },
@@ -1471,7 +1477,7 @@ export default {
       case SpecialCallType.Apply:
         realCalleeTid = bceTrace.data.calledFunctionTid;
         break;
-      case SpecialCallType.Bind: 
+      case SpecialCallType.Bind:
       default: {
         // nothing to do here -> handle `Bound` case below
         break;

dbux-graph-client/src/graph/Toolbar.js

@@ -197,7 +197,7 @@ class Toolbar extends ClientComponentEndpoint {
       active: !hideAfter
     });
     decorateClasses(this.els.graphModeBtn, {
-      active: graphMode !== GraphType.None
+      active: graphMode !== GraphType.None && stackMode !== StackMode.FullScreen
     });
     decorateClasses(this.els.asyncStackBtn, {
       active: stackMode !== StackMode.Hidden
@@ -412,6 +412,7 @@ class Toolbar extends ClientComponentEndpoint {
         else {
           await this.remote.setSearchMode(SearchMode.ByContext);
         }
+        this.toggleSearchMenu();
       },
       focus(evt) { evt.target.blur(); }
     },
@@ -426,6 +427,7 @@ class Toolbar extends ClientComponentEndpoint {
         else {
           await this.remote.setSearchMode(SearchMode.ByTrace);
         }
+        this.toggleSearchMenu();
       },
       focus(evt) { evt.target.blur(); }
     },
@@ -440,6 +442,7 @@ class Toolbar extends ClientComponentEndpoint {
         else {
           await this.remote.setSearchMode(SearchMode.ByValue);
         }
+        this.toggleSearchMenu();
       },
       focus(evt) { evt.target.blur(); }
     },

dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js

@@ -443,6 +443,12 @@ class AsyncGraph extends GraphBase {
     return document.querySelector(selector);
   }
 
+  reportAsyncNodeElNotExists(asyncNode, functionName) {
+    const functionNameLabel = functionName ? `[${functionName}] ` : '';
+    const err = new Error(`${functionNameLabel}Cannot find DOM of asyncNode: ${JSON.stringify(asyncNode)} when trying to focus`);
+    this.logger.warn(err);
+  }
+
   public = {
     /**
      * @param {{applicationId: number, asyncNodeId: number}} asyncNode 
@@ -454,7 +460,7 @@ class AsyncGraph extends GraphBase {
         this.focusController.slide(asyncNodeEl);
       }
       else if (!ignoreFailed) {
-        this.logger.error(`Cannot find DOM of asyncNode: ${JSON.stringify(asyncNode)} when trying to focus`);
+        this.reportAsyncNodeElNotExists(asyncNode, 'focusAsyncNode');
       }
     },
 
@@ -472,7 +478,7 @@ class AsyncGraph extends GraphBase {
           asyncNodeEl.classList.add('async-cell-selected');
         }
         else if (!ignoreFailed) {
-          this.logger.error(`Cannot find DOM of asyncNode: ${JSON.stringify(asyncNode)} when trying to select`);
+          this.reportAsyncNodeElNotExists(asyncNode, 'selectAsyncNode');
         }
       }
     },
@@ -492,7 +498,7 @@ class AsyncGraph extends GraphBase {
             asyncNodeEl.classList.add('async-cell-stack-highlight');
           }
           else {
-            this.logger.error(`[public.highlightStack] Cannot find DOM of asyncNode: ${JSON.stringify(asyncNodes)}.`);
+            this.reportAsyncNodeElNotExists(asyncNode, 'highlightStack');
           }
         });
       }
@@ -508,7 +514,7 @@ class AsyncGraph extends GraphBase {
             asyncNodeEl.classList.add('async-cell-sync-root-highlight');
           }
           else {
-            this.logger.error(`[public.highlightSyncRoots] Cannot find DOM of asyncNode: ${JSON.stringify(asyncNodes)}.`);
+            this.reportAsyncNodeElNotExists(asyncNode, 'highlightSyncRoots');
           }
         });
       }
@@ -522,8 +528,13 @@ class AsyncGraph extends GraphBase {
       if (values) {
         values.forEach(({ applicationId, asyncNodeId, label, valueTraceId }) => {
           const asyncNodeData = this.allNodeData.get(applicationId, asyncNodeId);
-          asyncNodeData.valueLabel = label;
-          asyncNodeData.valueTraceId = valueTraceId;
+          if (asyncNodeData) {
+            asyncNodeData.valueLabel = label;
+            asyncNodeData.valueTraceId = valueTraceId;
+          }
+          else {
+            this.logger.warn(`[updateRootValueLabel] update before asyncNodeData is set.`);
+          }
         });
       }
       this.renderRootValueLabel();

dbux-graph-client/src/graph/controllers/FocusController.js

@@ -77,7 +77,7 @@ export default class FocusController extends ClientComponentEndpoint {
     }
 
     if (!node.el) {
-      this.logger.error(`Trying to focus on node without DOM element: ${JSON.stringify(node)}`);
+      this.logger.error(`Trying to focus on node without DOM element: ${node.debugTag}`);
       return;
     }
 

dbux-graph-client/src/graph/styles.css

@@ -190,7 +190,7 @@ div {
  * ############################################################################ */
 
 .async-graph {
-  grid-template-areas: "header" "main";
+  grid-template-areas: "header""main";
 }
 
 .async-grid {
@@ -495,20 +495,25 @@ div {
   0% {
     background: #fff;
   }
+
   20% {
     opacity: 1;
     background: none;
   }
+
   40% {
     background: #fff;
   }
+
   60% {
     opacity: 1;
     background: none;
   }
+
   80% {
     background: #fff;
   }
+
   100% {
     opacity: 1;
     background: none;
@@ -519,6 +524,7 @@ div {
   0% {
     background: #fff;
   }
+
   100% {
     opacity: 1;
     background: none;
@@ -752,4 +758,12 @@ body:not(.theme-mode-dark) .highlight {
 
 .research-mode .left-label {
   display: none !important;
+}
+
+/** ###########################################################################
+ * async stack
+ * ############################################################################*/
+
+[data-mount="AsyncStack"] .graph-mode-button {
+  display: none !important;
 }

dbux-graph-host/src/graph/GraphBase.js

@@ -63,6 +63,10 @@ class GraphBase extends HostComponentEndpoint {
     return this.parent.controllers.getComponent('FocusController');
   }
 
+  get graphContainer() {
+    return this.parent;
+  }
+
   /** ###########################################################################
    * helpers
    *  #########################################################################*/

dbux-graph-host/src/graph/Toolbar.js

@@ -68,7 +68,7 @@ class Toolbar extends HostComponentEndpoint {
       this.doc.setState({
         stackMode: StackMode.nextValue(this.parent.state.stackMode)
       });
-      this.doc.asyncStackContainer.refreshGraph();
+      this.doc.refreshGraphs();
     },
 
     setSearchMode(mode) {

dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js

@@ -42,7 +42,7 @@ class AsyncGraph extends GraphBase {
     const applications = this.makeApplicationState(allApplications.selection.getAll());
     const { selectedApplicationId, selected } = allApplications.selection.data.threadSelection;
     this.setState({ children, applications, selectedApplicationId, selectedThreadIds: Array.from(selected) });
-    this.postUpdate();
+    // this.viewUpdate();
   }
 
   clear() {
@@ -374,10 +374,18 @@ class AsyncGraph extends GraphBase {
     await this.remote.selectAsyncNode(asyncNode);
   }
 
+  update() {
+    this.registerViewUpdate();
+  }
+
   /**
    * Do view updates that depends on `TraceSelection`.
    */
-  postUpdate = async () => {
+  registerViewUpdate = async () => {
+    if (!this.graphContainer.isEnabled()) {
+      return;
+    }
+
     try {
       const trace = traceSelection.selected;
       await this.waitForRender();
@@ -394,17 +402,16 @@ class AsyncGraph extends GraphBase {
   }
 
   handleTraceSelected = async () => {
-    await this.postUpdate();
+    await this.registerViewUpdate();
   }
 
   // ###########################################################################
   // util
   // ###########################################################################
 
   async waitForRender() {
-    const { asyncGraphContainer } = this.context.graphDocument;
-    await asyncGraphContainer.graph.waitForRefresh();
-    await asyncGraphContainer.graph.waitForUpdate();
+    await this.waitForRefresh();
+    await this.waitForUpdate();
   }
 
   isRelevantAsyncNode(asyncNode) {

dbux-graph-host/src/graph/controllers/ContextFilterManager.js

@@ -93,9 +93,7 @@ export default class ContextFilterManager extends HostComponentEndpoint {
     const saved = this.externals.getContextFilter() || EmptyObject;
     for (const key of PredicateKeys) {
       this.history[key] = new History(saved[key]);
-      if (this.history[key].top()) {
-        this._rawPredicate[key] = this.history[key].top() ?? DefaultPredicateCfg[key];
-      }
+      this._rawPredicate[key] = this.history[key].top() ?? DefaultPredicateCfg[key];
     }
     this.makeIncludePredicate();
     this.state.filterActived = this.makeState();

dbux-graph-host/src/graph/controllers/FocusController.js

@@ -13,8 +13,6 @@ const { log, debug, warn, error: logError, trace: logTrace } = newLogger('FocusC
 export default class FocusController extends HostComponentEndpoint {
   init() {
     this.addDisposable(
-      // `setGraphMode` will call `refreshGraph` which `handleTraceSelected`
-      // this.context.graphDocument.onGraphModeChanged(this.handleTraceSelected),
       this.context.graphDocument.onFollowModeChanged(this.handleTraceSelected),
       traceSelection.onTraceSelectionChanged(this.handleTraceSelected),
     );