AEDebugging_ Reuse Dependencies in Graph

SQUASHED: AUTO-COMMIT-src-client-reactive-active-expression-rewriting-active-expression-rewriting.js,AUTO-COMMIT-src-client-reactive-components-basic-aexpr-graph.js,

Author: Markus-Brand

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

@@ -205,7 +205,7 @@ class Dependency {
     if (this.isGlobalDependency()) {
       return identifier.toString()
     }
-    return context.constructor.name + "." + identifier;
+    return (context?context.constructor.name:"") + "." + identifier;
   }
 
   getAsDependencyDescription() {

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

@@ -8,19 +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:100%; height: 100%"></d3-graphviz>)
+    this.graphViz = await (<d3-graphviz style="background:gray"></d3-graphviz>)
     this.graph.append(this.graphViz);
     await this.graphViz.setDotData(this.graphData());
     const containerElement = this.graphViz.shadowRoot.querySelector("#container");
-    containerElement.setAttribute("display", "flex");
+    /*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%");
-    }, 100);
+    }, 10000);*/
   }
 
   graphData() {
@@ -30,25 +32,32 @@ export default class AexprGraph extends Morph {
 
     const aes = AExprRegistry.allAsArray();
 
+    const allDeps = new Map();
+    
     let aeCount = 0;
     let depCount = 0;
     let hookCount = 0;
     for (const ae of aes) {
-      debugger;
       const aeData = this.extractData(ae);
       nodes.push(`AE${aeCount} [shape="record" label="{${aeData.join("|")}}"]`);
       for(const dep of ae.dependencies().all()) {
-        nodes.push(`DEP${depCount} [shape="record" label="{${this.escapeTextForDOTRecordLabel(dep.getName())}|${dep.type()}}"]`);
-        edges.push(`AE${aeCount} -> DEP${depCount}`);
-        for(const hook of dep.getHooks()) {
-          nodes.push(`HOOK${hookCount} [shape="record" label="{${this.escapeTextForDOTRecordLabel(hook.informationString())}}"]`);
-          edges.push(`DEP${depCount} -> HOOK${hookCount}`);
-          hookCount++;
+        if(!allDeps.has(dep)) {
+          allDeps.set(dep, depCount);
+          nodes.push(`DEP${depCount} [shape="record" label="{${this.escapeTextForDOTRecordLabel(dep.getName())}|${dep.type()}}"]`);
+          depCount++;
         }
-        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++;
+      }
+    }
 
     return `digraph {
       graph [  splines="true"  overlap="false"  ];