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

Author: s4pu

src/client/lively.js

@@ -1481,6 +1481,7 @@ export default class Lively {
 
     return containerPromise.then(comp => {
       if (existingFound) {
+        comp.parentElement.focus();
         comp.focus();
         return;
       }

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

@@ -81,6 +81,7 @@ export const AExprRegistry = {
   },
 
   eventListeners() {
+    if(!this.listeners) return [];
     this.listeners = this.listeners.filter(listener => listener.reference);
     return this.listeners;
   }

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

@@ -12,34 +12,63 @@
     #content {
       background-color: gray;
     }
+    td {
+      border: 1px solid black;
+      padding: 3px;
+    }
+    th {
+      border: 2px solid black;
+      padding: 2px;
+      text-align: center;
+    }
+    #valuesOverTime {
+      width: 100%;
+      border-spacing: 0px;
+    }
     .container {
       display: grid;
-      grid-template-rows: auto 1fr auto;
+      grid-template-rows: 1fr 3fr auto;
       align-items:stretch;
       justify-items:stretch;
       height: 100%;
+      overflow: hidden;
     }
     .row {
       display: grid;
       grid-template-columns: 1fr 1fr;
       align-items:stretch;
       justify-items:stretch;
       width: 100%;
+      overflow-y: hidden;
     }
     .pane {
       margin: 1px;
       border: 1px solid #d5d5d5;
+      overflow-y: auto;
+    }
+    .variable {
+      color: #0000FF
     }
   </style>
 
   <div class="container">    
     <div class="row">
-      <div id="aeOverview" class="pane"></div>
-      <div>
-        Values over time
+      <div class="pane">     
+        <h3> AE Overview </h3>
+        <div id="aeOverview"></div>
+      </div>
+      <div class="pane">
+        <h3> Values over time </h3>
+        <table id="valuesOverTime">
+        </table>
+        Filter: <span class="variable">event</span> => {<input id="filterInput">}
+        <button id="filterButton">Filter</button>
       </div>
     </div>
-    <div id="diagram" class="pane"></div>
+    <div class="pane">    
+      <h3> Timeline </h3>      
+      <div id="diagram"></div>
+    </div>
     <div id="footer" class="pane">
       <p class="infos">
         <span id="numberEvents"></span> events <span class="light">found between</span> <br />

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

@@ -106,31 +106,44 @@ export default class EventDrops extends Morph {
         "themes": { "icons": false }
       }
     });
-    
+
     this.aeChangedDebounced = (() => this.setAexprs(this.getDataFromSource())).debounce(10, 300);
     this.eventsChangedDebounced = (() => this.updateTimeline(this.getDataFromSource())).debounce(100, 1000);
     this.activeExpressionsChanged();
     //Register to AE changes
     AExprRegistry.addEventListener(this, (ae, event) => {
-      if(event.type === "created" || event.type === "disposed") {
-        this.activeExpressionsChanged()
+      if (event.type === "created" || event.type === "disposed") {
+        this.activeExpressionsChanged();
       } else {
-        this.eventsChanged()        
+        this.eventsChanged();
       }
     });
     //Register to overview selection changes
     jQuery(this.aeOverview).on("changed.jstree", (e, data) => {
       this.eventsChanged();
-    })
+    }
     //Register to grouping change
-    this.groupByLine.addEventListener('change', () => {
+    );this.groupByLine.addEventListener('change', () => {
       if (this.groupByLine.checked) {
         this.groupingFunction = this.locationGrouping();
       } else {
         this.groupingFunction = this.instanceGrouping();
       }
       this.eventsChanged();
     });
+    //Register to filter changes
+    this.filterFunction = () => true;
+    this.filterButton.addEventListener('click', () => {
+      const inputValue = this.filterInput.value;
+      if (!inputValue) {
+        this.filterFunction = () => true;
+      } else {
+        this.filterFunction = event => {
+          return eval(inputValue);
+        };
+      }
+      this.eventsChanged();
+    });
   }
 
   humanizeEventData(event) {
@@ -178,7 +191,6 @@ export default class EventDrops extends Morph {
   getGroupingFunction() {
     return this.groupingFunction || this.locationGrouping();
   }
-  
 
   activeExpressionsChanged() {
     this.aeChangedDebounced();
@@ -201,15 +213,19 @@ export default class EventDrops extends Morph {
       aexprs[i].timelineID = i;
     }
     this.updateOverview(aexprs);
-    this.updateTimeline(aexprs)
+    this.updateTimeline(aexprs);
   }
 
   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 => ({ name: each, data: groups[each].flatMap(ae => ae.meta().get('events')) }));
+    groups = Object.keys(groups).map(each => ({
+      name: each,
+      data: groups[each].flatMap(ae => ae.meta().get('events')).filter(this.filterFunction)
+    }));
     this.setData(groups);
     if (selectedAEs.length == 0) return;
 
@@ -238,6 +254,23 @@ export default class EventDrops extends Morph {
     this.diagram.scrollTop = scrollBefore;
   }
 
+  updateValuesOverTime(aexprs) {
+    const aeWithRelevantEvents = aexprs.map(ae => {
+      return { ae, events: ae.meta().get('events').filter(event => event.type === "changed value").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>);
+      for(const event of events) {
+        row.append(<td>{event.value.value}</td>);
+      }
+      this.valuesOverTime.append(row);
+    }
+  }
+
   updateOverview(aexprs) {
     jQuery(this.aeOverview).jstree(true).settings.core.data = this.generateOverviewJSON(aexprs);
     jQuery(this.aeOverview).jstree(true).refresh();
@@ -320,4 +353,17 @@ export default class EventDrops extends Morph {
   get aeOverview() {
     return this.get("#aeOverview");
   }
+
+  get filterInput() {
+    return this.get("#filterInput");
+  }
+
+  get filterButton() {
+    return this.get("#filterButton");
+  }
+
+  get valuesOverTime() {
+    return this.get("#valuesOverTime");
+  }
+
 }

src/components/tools/lively-sync.html

@@ -113,7 +113,7 @@
 
 
     #logContainer {
-      background-color: rgb(155,155,155);
+      background-color: rgb(230,230,230);
     }
 
     #syncButton, #squashButton {

src/components/widgets/lively-code-mirror.js

@@ -1402,7 +1402,7 @@ export default class LivelyCodeMirror extends HTMLElement {
   }
 
   async updateAExprDependencies() {
-    if(!this.isJavaScript) return;
+    if(!this.isJavaScript || !lively.query(this, "lively-container")) return;
     await this.editor;
     const dependencyGraph = await this.dependencyGraph();
     if (!dependencyGraph.capabilities.canParse || !dependencyGraph.hasActiveExpressionsDirective) {