Merge branch 'gh-pages' of https://github.com/LivelyKernel/lively4-core into gh-pages

Author: onsetsu

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

@@ -172,6 +172,11 @@ class Dependency {
     DependencyManager.checkAndNotifyAExprs(aexprs, location, this, hook);
   }
 
+  type() {
+    if(this.isGlobal()) return "global";
+    return this._type;
+  }
+  
   isMemberDependency() {
     return this._type === 'member' && !this.isGlobal();
   }
@@ -189,9 +194,23 @@ class Dependency {
     const [object] = ContextAndIdentifierCompositeKey.keysFor(compKey);
     return object === self;
   }
+  
+  getHooks() {
+    return HooksToDependencies.getHooksForDep(this);
+  }
+  
+  getName() {    
+    const [context, identifier] = this.contextIdentifierValue();
+
+    if (this.isGlobalDependency()) {
+      return identifier.toString()
+    }
+    return (context?context.constructor.name:"") + "." + identifier;
+  }
 
   getAsDependencyDescription() {
     const [context, identifier, value] = this.contextIdentifierValue();
+    debugger;
 
     if (this.isMemberDependency()) {
       return {
@@ -707,6 +726,10 @@ class DataStructureHook extends Hook {
     // }
     return hook;
   }
+
+  informationString() {
+    return "DataStructureHook";
+  }
 }
 
 class PropertyWrappingHook extends Hook {
@@ -717,6 +740,7 @@ class PropertyWrappingHook extends Hook {
   constructor(property) {
     super();
 
+    this.property = property;
     this.value = self[property];
     const { configurable, enumerable } = Object.getOwnPropertyDescriptor(self, property);
 
@@ -733,6 +757,10 @@ class PropertyWrappingHook extends Hook {
       }
     });
   }
+
+  informationString() {
+    return "PropertyWrappingHook: " + this.property;
+  }
 }
 
 class MutationObserverHook extends Hook {
@@ -792,6 +820,10 @@ class MutationObserverHook extends Hook {
   changeHappened() {
     this.notifyDependencies();
   }
+
+  informationString() {
+    return "MutationObserverHook: " + this._element;
+  }
 }
 
 class EventBasedHook extends Hook {
@@ -819,6 +851,10 @@ class EventBasedHook extends Hook {
   changeHappened() {
     this.notifyDependencies();
   }
+
+  informationString() {
+    return "EventBasedHook: " + this._element;
+  }
 }
 
 class FrameBasedHook extends Hook {
@@ -844,6 +880,10 @@ class FrameBasedHook extends Hook {
   changeHappened() {
     this.notifyDependencies();
   }
+
+  informationString() {
+    return "FrameBasedHook";
+  }
 }
 
 export class RewritingActiveExpression extends BaseActiveExpression {

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

@@ -1,3 +1,5 @@
+"enable aexpr"
+
 import Morph from 'src/components/widgets/lively-morph.js';
 import { AExprRegistry } from 'src/client/reactive/active-expression/active-expression.js';
 import { DebuggingCache } from 'src/client/reactive/active-expression-rewriting/active-expression-rewriting.js';
@@ -6,13 +8,21 @@ import { DebuggingCache } from 'src/client/reactive/active-expression-rewriting/
 export default class AexprGraph extends Morph {
   async initialize() {
     this.windowTitle = "Active Expression Graph";
+    this.setWindowSize(1200, 800);
     let width = window.innerWidth;
     let height = window.innerHeight;
-    this.graphViz = await (<d3-graphviz style="background:gray; width:1200px; height: 800px"></d3-graphviz>)
+    this.graphViz = await (<d3-graphviz style="background:gray"></d3-graphviz>)
     this.graph.append(this.graphViz);
-    this.graphViz.setDotData(this.graphData());
-    //const graphvizElement = this.shadowRoot.querySelector("svg");
-    //graphvizElement.setAttribute("height", "400px");
+    await this.graphViz.setDotData(this.graphData());
+    const containerElement = this.graphViz.shadowRoot.querySelector("#container");
+    /*containerElement.setAttribute("display", "flex");
+    containerElement.children[0].setAttribute("display", "flex");
+    setTimeout(() => {
+      debugger;
+      const svgElement = this.graphViz.shadowRoot.querySelector("svg");
+      svgElement.setAttribute("height", "100%");
+      svgElement.setAttribute("width", "100%");
+    }, 10000);*/
   }
 
   graphData() {
@@ -22,17 +32,31 @@ export default class AexprGraph extends Morph {
 
     const aes = AExprRegistry.allAsArray();
 
-    let i = 0;
-    let j = 0;
+    const allDeps = new Map();
+    
+    let aeCount = 0;
+    let depCount = 0;
+    let hookCount = 0;
     for (const ae of aes) {
       const aeData = this.extractData(ae);
-      nodes.push(`AE${i} [shape="record" label="{${aeData.join("|")}}"]`);
-      for (const { _, dep, hook } of DebuggingCache.getTripletsForAE(ae)) {
-        nodes.push(`HOOK${j} [shape="record" label="{${this.escapeTextForDOTRecordLabel(hook.informationString())}}"]`);
-        edges.push(`AE${i} -> HOOK${j}`);
-        j++;
+      nodes.push(`AE${aeCount} [shape="record" label="{${aeData.join("|")}}"]`);
+      for(const dep of ae.dependencies().all()) {
+        if(!allDeps.has(dep)) {
+          allDeps.set(dep, depCount);
+          nodes.push(`DEP${depCount} [shape="record" label="{${this.escapeTextForDOTRecordLabel(dep.getName())}|${dep.type()}}"]`);
+          depCount++;
+        }
+        
+        edges.push(`AE${aeCount} -> DEP${allDeps.get(dep)}`);
+      }
+      aeCount++;
+    }
+    for(const dep of allDeps.keys()) {
+      for(const hook of dep.getHooks()) {
+        nodes.push(`HOOK${hookCount} [shape="record" label="{${this.escapeTextForDOTRecordLabel(hook.informationString())}}"]`);
+        edges.push(`DEP${allDeps.get(dep)} -> HOOK${hookCount}`);
+        hookCount++;
       }
-      i++;
     }
 
     return `digraph {