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

Author: BraunTom

doc/journal/2021-02-24.md/generate_drawio_content.png

@@ -0,0 +1,65 @@
+## 2021-02-24
+*Author: @JensLincke*
+
+
+![](generate_drawio_content.png)
+
+### Reverse Engineering
+
+Copy some drawio content and past it into a workspace...
+
+```javascript
+import XML from "src/client/xml.js"
+
+lively.get("#drawiosource").value = XML.prettify(decodeURIComponent(
+lively.get("#drawiocode").value))
+```
+
+That produces some source... and copy and pasting it back into drawio produced actual graphical content. 
+
+```javascript
+<mxGraphModel>
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <UserObject label="[@Olsen2007EUI]" id="2">
+      <mxCell style="text;whiteSpace=wrap;html=1;fontSize=12;fontColor=#000000;" vertex="1" parent="1">
+        <mxGeometry x="240" y="220" width="100" height="30" as="geometry"/>
+      </mxCell>
+    </UserObject>
+    <UserObject label="[@Hoho]" id="3">
+      <mxCell style="text;whiteSpace=wrap;html=1;fontSize=12;fontColor=#000000;" vertex="1" parent="1">
+        <mxGeometry x="250" y="270" width="100" height="30" as="geometry"/>
+      </mxCell>
+    </UserObject>
+  </root>
+</mxGraphModel>
+```
+
+### Generating Draw.io Content
+
+So, we can actually generate content
+
+
+```javascript
+
+var source = `<mxGraphModel>
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>`
+
+var idCounter = 3;
+that.childNodes.forEach((ea,index) => {
+  source += `<UserObject label="[@${ea.key}] ${ea.getAuthors()[0]} ${ea.year}. ${ea.title} " id="${idCounter++}">
+      <mxCell style="text;whiteSpace=wrap;html=1;fontSize=12;fontColor=#000000;" vertex="1" parent="1">
+        <mxGeometry x="250" y="${30 *index}" width="600" height="40" as="geometry"/>
+      </mxCell>
+    </UserObject>`
+  
+})
+
+source += `  </root>
+</mxGraphModel>`
+
+
+```

doc/journal/2021-02-24.md/index.md

@@ -770,7 +770,8 @@ export default class FileIndex {
     }).then(r => r.clone().json())
 
     if (!stats.error) {
-      await this.addFile(url, stats.name, stats.type, stats.size, stats.modified)
+      let name = url.replace(/.*\//,"")
+      await this.addFile(url, name, stats.type, stats.size, stats.modified)
     }
   } 
 

src/client/fileindex.js

@@ -216,6 +216,13 @@ export default class HTML {
       if (node.getAttribute) {
 
         var href = node.getAttribute("href")
+        if (!href) {
+          href = node.getAttribute("xlink:href")
+          if (href) {
+            var isXLink = true;
+          }
+        }
+        
         if (href) {
           // console.log("FIX LINK ", href)
           // #TODO load inplace....

src/client/html.js

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

src/client/lively.js

@@ -21,6 +21,9 @@ export class BibScheme extends BibliographyScheme {
     var entry = entries[0] || {authors: undefined, keywords: undefined, title: ""}
     var key = query
     var files = await FileIndex.current().db.files.where("bibkey").equals(key).toArray()
+    var literatureNotes = await FileIndex.current().db.files
+      .filter( ea => ea.name.match(key + ".md")).toArray()
+
 
     var papers = await Literature.db.papers.where("key").equals(key).toArray()
 
@@ -43,7 +46,7 @@ export class BibScheme extends BibliographyScheme {
     if (entry.source) {
       content += "<pre>" + entry.source+ "</pre>"
     }         
-    content += "<h3>Documents</h3><ul>" + files.map(ea => {
+    content += "<h3>Documents</h3><ul>" + (files.concat(literatureNotes)).map(ea => {
       return `<li><a href="${ea.url}">${ea.name}</a></li>`     
     }).join("\n") + "</ul>"
 

src/client/protocols/bib.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/active-expression/active-expression.js

@@ -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.html

@@ -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/client/reactive/components/basic/aexpr-timeline.js

@@ -5,6 +5,12 @@ import Bindings from "src/client/bindings.js"
 import {promisedEvent} from "src/client/utils.js"
 
 
+/*MD # File Chooser
+
+![](file-chooser.png){width=300px}
+
+MD*/
+
 export default class FileChooser extends Morph {
   async initialize() {
     this.registerAttributes(["root"]);