AEDebugging_ Jump to event in timeline

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

Author: Markus-Brand

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

@@ -213,7 +213,7 @@ export class BaseActiveExpression {
     }
 
     this.initializeEvents();
-    this.logEvent('created', {ae: this, stack: lively.stack()});
+    this.logEvent('created', {ae: this, stack: lively.stack(), value: "no value yet"});
 
     if (new.target === BaseActiveExpression) {
       this.addToRegistry();
@@ -291,7 +291,7 @@ export class BaseActiveExpression {
    */
   onChange(callback) {
     this.callbacks.push(callback);
-    this.logEvent('dependencies changed', 'Added: ' + callback);
+    this.logEvent('callbacks changed', 'Added: ' + callback);
     AExprRegistry.updateAExpr(this);
     return this;
   }
@@ -305,7 +305,7 @@ export class BaseActiveExpression {
     const index = this.callbacks.indexOf(callback);
     if (index > -1) {
       this.callbacks.splice(index, 1);
-      this.logEvent('dependencies changed', 'Removed: ' + callback);
+      this.logEvent('callbacks', 'Removed: ' + callback);
       AExprRegistry.updateAExpr(this);
     }
     if (this._shouldDisposeOnLastCallbackDetached && this.callbacks.length === 0) {

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

@@ -46,6 +46,9 @@
       border: 1px solid #d5d5d5;
       overflow-y: auto;
     }
+    .tableCell {
+      cursor: pointer;
+    }
     .variable {
       color: #0000FF
     }

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

@@ -43,7 +43,7 @@ export default class EventDrops extends Morph {
               return 'red';
             case 'changed value':
               return 'blue';
-            case 'dependencies changed':
+            case 'callbacks changed':
               return 'purple';
             default:
               return 'black';
@@ -189,7 +189,7 @@ export default class EventDrops extends Morph {
           }, "", "o"]);
           break;
         }
-      case 'dependencies changed':
+      case 'callbacks changed':
       default:
         {
           break;
@@ -233,7 +233,7 @@ export default class EventDrops extends Morph {
           const location = ae.meta().get("location");
           return this.humanizePosition(location.file, location.start.line);
         }
-      case 'dependencies changed':
+      case 'callbacks changed':
       default:
         return (event.value || "").toString();
     }
@@ -332,20 +332,48 @@ export default class EventDrops extends Morph {
 
   updateValuesOverTime(aexprs) {
     const aeWithRelevantEvents = aexprs.map(ae => {
-      return { ae, events: ae.meta().get('events').filter(event => event.type === "changed value").filter(this.filterFunction) };
+      return { ae, events: ae.meta().get('events').filter(event => event.type === "changed value" || event.type === "created").filter(this.filterFunction) };
     });
+    
     this.valuesOverTime.innerHTML = "";
 
     for (const { ae, events } of aeWithRelevantEvents) {
       if (events.length === 0) continue;
       let row = <tr><th>{ae.meta().get('id')}</th></tr>;
-      row.append(<td>{events[0].value.lastValue}</td>);
+      //row.append(<td>{events[0].value.lastValue}</td>);
       for (const event of events) {
-        row.append(<td>{event.value.value}</td>);
+        const cell = <td class="tableCell">{event.value.value}</td>;
+
+        row.append(cell);
+
+        cell.addEventListener('click', () => {
+          this.showEvent(event, ae);
+          //lively.notify(event.value.value)
+        });
       }
       this.valuesOverTime.append(row);
     }
   }
+  
+  showEvent(event, ae) {    
+    let min = new Date(event.timestamp.getTime() - 10);
+    let max = new Date(event.timestamp.getTime() + 10);
+    this.chart.zoomToDomain([min, max]);    
+    //Add delay to allow rerender
+    setTimeout(() => { 
+      const selectedDrops = this.shadowRoot.querySelectorAll(".drop[cx=\"437\"]")
+        .filter(drop => {
+          const dropLineName = drop.parentElement.nextElementSibling.innerHTML;
+          let dropLineAEName = dropLineName.substring(0, dropLineName.lastIndexOf(" "));
+          return ae.meta().get('id').includes(dropLineAEName);
+        });
+      for(const drop of selectedDrops) {
+        drop.setAttribute("r", 10);
+      }
+      //filter to parent -> line-label sibling value = AE id
+    }, 30);
+
+  }
 
   updateOverview(aexprs) {
     jQuery(this.aeOverview).jstree(true).settings.core.data = this.generateOverviewJSON(aexprs);