AEDebugging_ Add sourceCode to callback changes, add more hook location data and bugfixes

SQUASHED: AUTO-COMMIT-src-client-reactive-active-expression-active-expression.js,AUTO-COMMIT-src-client-reactive-active-expression-rewriting-active-expression-rewriting.js,AUTO-COMMIT-src-client-reactive-active-expression-rewriting-injective-map.js,AUTO-COMMIT-src-client-reactive-babel-plugin-active-expression-rewriting-index.js,AUTO-COMMIT-src-client-reactive-components-basic-aexpr-timeline.js,AUTO-COMMIT-src-client-reactive-components-rewritten-aexpr-test-component.js,AUTO-COMMIT-src-client-utils-stack.js,AUTO-COMMIT-src-client-utils-stack.js.l4a,

Author: Markus-Brand

src/client/reactive/active-expression-rewriting/active-expression-rewriting.js

@@ -152,7 +152,10 @@ class Dependency {
     const compKey = CompositeKeyToDependencies.getLeftFor(this);
     CompositeKeyToDependencies.removeRight(this);
     HooksToDependencies.disconnectAllForDependency(this);
-    ContextAndIdentifierCompositeKey.remove(compKey);
+    
+    if(!CompositeKeyToDependencies.hasLeft(compKey)) {
+      ContextAndIdentifierCompositeKey.remove(compKey);
+    }
   }
 
   contextIdentifierValue() {
@@ -582,13 +585,16 @@ class Hook {
 
   async getLocations() {
     this.locations = await Promise.all(this.locations);
+    this.locations = this.locations.filter(l => l);
     return this.locations;
   }
 
   untrack() {}
 
-  notifyDependencies(location) {
-    HooksToDependencies.getDepsForHook(this).forEach(dep => dep.notifyAExprs(location));
+  notifyDependencies(location) {    
+    const loc = location || TracingHandler.findRegistrationLocation();
+    this.addLocation(loc);
+    HooksToDependencies.getDepsForHook(this).forEach(dep => dep.notifyAExprs(loc));
 
     this.getLocations().then(locations => DebuggingCache.updateFiles(locations.map(loc => loc.file)));
     for (const dep of HooksToDependencies.getDepsForHook(this)) {
@@ -666,9 +672,7 @@ class DataStructureHook extends Hook {
               }
 
               this; // references the modified container
-              const location = TracingHandler.findRegistrationLocation();
-              hook.addLocation(location);
-              hook.notifyDependencies(location);
+              hook.notifyDependencies();
             });
           } else {
             // console.warn(`Property ${addDescriptor.key} has a value that is not a function, but ${addDescriptor.value}.`)
@@ -949,21 +953,18 @@ class TracingHandler {
   static memberUpdated(obj, prop, location) {
     const hook = SourceCodeHook.get(obj, prop);
     if (!hook) return;
-    hook.addLocation(location || TracingHandler.findRegistrationLocation());
     hook.notifyDependencies(location);
   }
 
   static globalUpdated(globalName, location) {
     const hook = SourceCodeHook.get(globalRef, globalName);
     if (!hook) return;
-    hook.addLocation(location || TracingHandler.findRegistrationLocation());
     hook.notifyDependencies(location);
   }
 
   static localUpdated(scope, varName, location) {
     const hook = SourceCodeHook.get(scope, varName);
     if (!hook) return;
-    hook.addLocation(location || TracingHandler.findRegistrationLocation());
     hook.notifyDependencies(location);
   }
 
@@ -977,6 +978,13 @@ class TracingHandler {
         return await frame.getSourceLocBabelStyle();
       }
     }
+
+    for (let frame of frames.slice()) {
+      if (frame.func.includes(".notifyDependencies")) {
+        return await frame.getSourceLocBabelStyle();
+      }
+    }
+    console.log(stack);
     return undefined;
   }
 

src/client/reactive/active-expression-rewriting/injective-map.js

@@ -14,12 +14,12 @@ export default class InjectiveMap {
     return this.leftToRight.get(left);
   }
 
-  hasRightFor(left) {
+  hasLeft(left) {
     return this.leftToRight.has(left);
   }
 
   getOrCreateRightFor(left, constructorCallback) {
-    if (!this.hasRightFor(left)) {
+    if (!this.hasLeft(left)) {
       this.associate(left, constructorCallback(left));
     }
     return this.leftToRight.get(left);
@@ -37,12 +37,12 @@ export default class InjectiveMap {
     return this.rightToLeft.get(right);
   }
 
-  hasLeftFor(right) {
+  hasRight(right) {
     return this.rightToLeft.has(right);
   }
 
   getOrCreateLeftFor(right, constructorCallback) {
-    if (!this.hasLeftFor(right)) {
+    if (!this.hasRight(right)) {
       this.associate(constructorCallback(right), right);
     }
     return this.rightToLeft.get(right);

src/client/reactive/active-expression/active-expression.js

@@ -289,9 +289,9 @@ export class BaseActiveExpression {
    * @param callback
    * @returns {BaseActiveExpression} this very active expression (for chaining)
    */
-  onChange(callback) {
+  onChange(callback, originalSource) {
     this.callbacks.push(callback);
-    this.logEvent('callbacks changed', 'Added: ' + callback);
+    this.logEvent('callbacks changed', 'Added: ' + originalSource.sourceCode);
     AExprRegistry.updateAExpr(this);
     return this;
   }
@@ -301,11 +301,11 @@ export class BaseActiveExpression {
    * @returns {BaseActiveExpression} this very active expression (for chaining)
    */
   // #TODO: should this remove all occurences of the callback?
-  offChange(callback) {
+  offChange(callback, originalSource) {
     const index = this.callbacks.indexOf(callback);
     if (index > -1) {
       this.callbacks.splice(index, 1);
-      this.logEvent('callbacks', 'Removed: ' + callback);
+      this.logEvent('callbacks', 'Removed: ' + originalSource.sourceCode);
       AExprRegistry.updateAExpr(this);
     }
     if (this._shouldDisposeOnLastCallbackDetached && this.callbacks.length === 0) {
@@ -471,9 +471,9 @@ export class BaseActiveExpression {
     return this;
   }
 
-  dataflow(callback) {
+  dataflow(callback, orignalSource) {
     // setup dependency
-    this.onChange(callback);
+    this.onChange(callback, orignalSource);
 
     // call immediately
     // #TODO: duplicated code: we should extract this call

src/client/reactive/babel-plugin-active-expression-rewriting/index.js

@@ -779,6 +779,21 @@ export default function (babel) {
               if (isInDestructuringAssignment(path)) {
                 return;
               }
+              
+              if(t.isMemberExpression(path.node.callee)) {
+                const methodName = path.node.callee.property.name;
+                if(methodName === "dataflow" || methodName === "onChange" || methodName === "offChange") {                  
+                  const args = path.get('arguments');
+                  if (args.length > 0) {
+                    const expressionPath = args[0];
+                    const sourceCode = expressionPath.getSource();
+                    debugger;
+                    path.pushContainer('arguments', t.objectExpression([t.objectProperty(t.identifier("sourceCode"), t.stringLiteral(sourceCode))]));
+                  }
+                  //addOriginalSourceCode(path);
+                  return;
+                }                
+              }
 
               // check whether we call a MemberExpression
               if (t.isMemberExpression(path.node.callee)) {

src/client/reactive/components/basic/aexpr-timeline.js

@@ -173,10 +173,14 @@ export default class EventDrops extends Morph {
           const stack = data.value.stack;
           const locations = await Promise.all(stack.frames.map(frame => frame.getSourceLocBabelStyle()));
           locations.forEach((location, index) => {
-            const isAELoaction = aeLocation.file === location.file && aeLocation.start.line === location.start.line;
-            menuItems.push([this.fileNameString(location.file) + ":" + location.start.line, () => {
-              this.openLocationInBrowser(isAELoaction ? aeLocation : location);
-            }, isAELoaction ? "aexpr call" : "", index + 1]);
+            if(!location) {
+              menuItems.push(["anonymous", () => {}, "", index + 1]);
+            } else {
+              const isAELoaction = aeLocation.file === location.file && aeLocation.start.line === location.start.line;
+              menuItems.push([this.fileNameString(location.file) + ":" + location.start.line, () => {
+                this.openLocationInBrowser(isAELoaction ? aeLocation : location);
+              }, isAELoaction ? "aexpr call" : "", index + 1]);
+            }
           });
           break;
         }
@@ -295,7 +299,6 @@ export default class EventDrops extends Morph {
   updateTimeline(aexprs) {
     const checkedIndices = jQuery(this.aeOverview).jstree(true).get_bottom_selected();
     const selectedAEs = checkedIndices.map(i => aexprs[i - 1]).filter(ae => ae);
-    this.updateValuesOverTime(selectedAEs);
     let scrollBefore = this.diagram.scrollTop;
     let groups = selectedAEs.groupBy(this.getGroupingFunction());
     groups = Object.keys(groups).map(each => ({
@@ -328,6 +331,7 @@ export default class EventDrops extends Morph {
     this.chart.scale().domain(newDomain);
     this.chart.zoomToDomain(newDomain);
     this.diagram.scrollTop = scrollBefore;
+    this.updateValuesOverTime(selectedAEs);
   }
 
   updateValuesOverTime(aexprs) {
@@ -361,7 +365,8 @@ export default class EventDrops extends Morph {
     this.chart.zoomToDomain([min, max]);    
     //Add delay to allow rerender
     setTimeout(() => { 
-      const selectedDrops = this.shadowRoot.querySelectorAll(".drop[cx=\"437\"]")
+      const referenceItem = this.shadowRoot.querySelector(".domain");
+      const selectedDrops = this.shadowRoot.querySelectorAll(".drop[cx=\"" + referenceItem.getBoundingClientRect().width/2 + "\"]")
         .filter(drop => {
           const dropLineName = drop.parentElement.nextElementSibling.innerHTML;
           let dropLineAEName = dropLineName.substring(0, dropLineName.lastIndexOf(" "));

src/client/reactive/components/rewritten/aexpr-test-component.js

@@ -18,7 +18,7 @@ export default class AexprTest extends Morph {
 
   addAE() {
     let z = 4;
-    this.aes.push(aexpr(() => this.x.getBestOption() + this.y + z));
+    this.aes.push(aexpr(() => this.x.getBestOption() + this.y + z + 8).onChange(lively.notify));
     this.aes.push(aexpr(() => this.x.getBestOption() + this.y + z));
     z++;
   }

src/client/utils/stack.js

@@ -205,6 +205,7 @@ export class Frame {
   async getSourceLocBabelStyle() {
     if(!this._sourceLoc) {
       await this._determineSourceInfo();
+      if(!this._sourceLoc) return undefined;
     }
     const location = {line: this._sourceLoc.line, column: this._sourceLoc.column};
     return {start: location, end: location, file: this._sourceLoc.source};