[academic_query] remove annoying MutationObserver and ... done_

SQUASHED: AUTO-COMMIT-demos-bibliographie-academic-histogram.md,AUTO-COMMIT-demos-visualizations-academic-histogram.md,AUTO-COMMIT-src-components-widgets-academic-query.js,AUTO-COMMIT-src-components-widgets-academic-subquery.html,AUTO-COMMIT-src-components-widgets-academic-subquery.js,

Author: s4pu

demos/bibliographie/leoUIexample.md renamed to demos/bibliographie/academic-histogram.md

@@ -11,7 +11,7 @@ import AcademicQuery from "src/components/widgets/academic-query.js"
 
 import files from "src/client/files.js"
 
-const default_query="Composite(AA.AuId=2055148755)"
+const default_query="Y=2020"
 const default_count = 1000
 const default_min = 0
 const default_attr = "F.FN"

src/components/widgets/academic-query.js

@@ -1,47 +1,13 @@
 import Morph from 'src/components/widgets/lively-morph.js';
 import AcademicSubquery from "src/components/widgets/academic-subquery.js";
 
-var timeout;
-
 export default class AcademicQuery extends Morph {
   constructor() {
     super();
   }
 
   async initialize() {
     this.updateView();
-    
-    // alternativ immer das AcademicQuery object mitgeben
-    // und dem Bescheid geben, wenn ein update ist
-    // (alles kacke)
-    // idealerweise bemerkt der hier schon, wenn sich
-    // irgendwo unter ihm Text ändert
-    var observer = new MutationObserver((mutations) => {
-      mutations.forEach(async mutation => {
-        //lively.notify("SUPER observation", mutation.type)
-        clearTimeout(timeout);
-        timeout = setTimeout(async () => {
-          if (mutation.type == "childList") {
-            if (this.subquery) {
-              this.textContent = await this.subquery.viewToQuery();
-              var queryText = this.get('#queryText');
-              queryText.innerHTML = this.getQuery();
-            }
-          }
-        }, 1000);
-      })
-    });
-    
-    const config = {
-      attributes: true,
-      childList: true,
-      subtree: true,
-      attributeOldValue: true,
-      characterDataOldValue: true,
-      //attributeFilter: true // breaks for some reason
-    };
-    
-    observer.observe(this.get('#pane'), config);
   }
 
   async setQuery(q) {
@@ -57,12 +23,19 @@ export default class AcademicQuery extends Morph {
   getQuery() {
     return this.textContent;
   }
+  
+  async update(){
+    this.textContent = await this.subquery.viewToQuery();
+    var queryText = this.get('#queryText');
+    queryText.innerHTML = this.getQuery();
+  }
 
   async updateView() {
     if(!this.subquery) { return }
     var pane = this.get("#pane")
     var queryView = <academic-subquery></academic-subquery>;
     queryView = this.subquery;
+    queryView.parentQuery = this;
 
     var queryText = <span id="queryText" style="width: 300px; font-style: italic; color: lightgray;">{this.textContent}</span>;
     var searchButton = <button click={() => lively.openBrowser("academic://expr:" + this.textContent + "?count=100")}>search</button>;
@@ -81,10 +54,6 @@ export default class AcademicQuery extends Morph {
 
   async livelyExample() {
     this.setQuery("Composite(AA.AuId = 2055148755)")
-    //this.setQuery("And(Composite(AA.AuId = 2154319088),Y = 2020)")
-    //this.setQuery("And(O='abc', Y='1000')")
-    //this.setQuery("Y='1000'")
   }
 
-  
 }

src/components/widgets/academic-subquery.js

@@ -3,14 +3,6 @@ import ohm from "https://unpkg.com/[email protected]/dist/ohm.js";
 import {Author, Paper, MicrosoftAcademicEntities} from "src/client/literature.js";
 import files from "src/client/files.js"
 
-/*MD 
-# Blabla 
-Strg + Alt + P
-oder Alt + P MD*/
-
-/*MD <edit://src/components/widgets/academic-subquery.html>
-oder browse:// 
- #TODO MD*/
 var g = ohm.grammar(
   `Academic { 
     Exp =
@@ -132,53 +124,14 @@ s.addOperation(
   }
 )
 
-var observer;
-var timeout;
-
 export default class AcademicSubquery extends Morph {
   constructor() {
     super();
   }
 
-  /*MD ## Init MD*/
   async initialize() {
     this.updateView();
 
-    observer = new MutationObserver((mutations) => {
-      clearTimeout(timeout);
-      timeout = setTimeout(async () => {
-        mutations.forEach(async mutation => {
-          if (mutation.type == "characterData") {
-            //this.textContent = await this.viewToQuery();
-          }
-          if (mutation.type == "childList") {
-            // TODO: better propagation to super elements
-            var div = <div id="update"></div>;
-            this.appendChild(div);
-            this.removeChild(div);
-          
-          }
-        })
-      }, 300);
-    });
-    const config = {
-      attributes: true,
-      childList: true,
-      subtree: true,
-      attributeOldValue: true,
-      characterDataOldValue: true,
-    };
-    observer.observe(this.get('#pane'), config);
-    
-    // TODO: falls ich das umbaue, sodass eine subquery einfach als
-    // html Element in updateView erstellt wird, muss das hier auch da rein
-    /* this.addEventListener('dragstart', (evt) => this.onDragStart(evt))
-     this.addEventListener('dragend', (evt) => this.onDragEnd(evt))
-     this.addEventListener('dragover', (evt) => this.onDragOver(evt))
-     this.addEventListener('dragenter', (evt) => this.onDragEnter(evt))
-     this.addEventListener('dragleave', (evt) => this.onDragLeave(evt))
-     this.addEventListener('drop', (evt) => this.onDrop(evt))
-    */
     this.style.draggable = 'true';
   }
 
@@ -281,38 +234,24 @@ export default class AcademicSubquery extends Morph {
   }
 
   onDragStart(event) {
-    //event.dataTransfer.setData("element", event.target.id);
     this.style.opacity = '0.4';
     this.style.color = "black";
 
-    // var id = lively.ensureID(this)
-    // this.id = id
-    
     event.dataTransfer.effectAllowed = 'move';
     event.dataTransfer.setData('text', this.queryElement.getQuery()); // set Query as info
-    //event.dataTransfer.setData("application/lively4id", id);
   }
 
   onDragEnd(event) {
-    //event.dataTransfer.setData("element", event.target.id);
     this.style.opacity = '1.0';
   }
 
   onDragOver(event) {
-    //event.dataTransfer.setData("element", event.target.id);
-    // the next line should not be neccessary with onDragEnter()...
     this.classList.add('over');
-    //this.style.border = '3px dotted #666';
   }
 
   onDrop(event) {
     event.preventDefault();
     event.stopPropagation();
-    //if (this.dragStart !== this) {
-      //var id = event.dataTransfer.getData("application/lively4id")
-      //var el = lively.query(this, "#"+id);
-      //lively.notify("ELEMENT", el);
-    //lively.notify("MATCH", g.match(query));
     var query = event.dataTransfer.getData("text");
     this.classList.remove('over');
     try {
@@ -327,16 +266,12 @@ export default class AcademicSubquery extends Morph {
 
   onDragEnter(event) {
     event.preventDefault();
-    //if (!this.complexQuery) this.style.border = '3px dotted #666';
-    //lively.notify("ENTERED THIS", this.classList)
     this.classList.add('over');
   }
 
   onDragLeave(event) {
     event.preventDefault();
     this.classList.remove('over');
-
-    //if (!this.isComplex) this.style.border = '3px dotted #FFF';
   }
 
 
@@ -357,46 +292,33 @@ export default class AcademicSubquery extends Morph {
       this.ui.addEventListener('drop', this.onDrop)
     }
     this.ui.queryElement = this; // for drag and drop
-    /*if (!this.isComplex) {
-      this.addEventListener('dragstart', this.onDragStart)
-      this.addEventListener('dragend', this.onDragEnd)
-      this.addEventListener('dragover', this.onDragOver)
-      this.addEventListener('dragenter', this.onDragEnter)
-      this.addEventListener('dragleave', this.onDragLeave)
-      this.addEventListener('drop', this.onDrop)
-    }*/
+
     pane.appendChild(this.ui)
   }
 
+  async update(){
+    if (this.parentQuery) await this.parentQuery.update();
+  }
+  
   async setQuery(q) {
     this.textContent = q;
 
     var match = g.match(q);
     this.ast = s(match).interpret();
     this.ui = await this.queryToView(this.ast);
 
-    this.updateView()
+    this.updateView();
+    if (this.parentQuery) await this.parentQuery.update();
   }
 
   getQuery() {
     return this.textContent;
   }
-  
-  async setQueryObject(o) {
-    this.ast = o
-    this.ui = await this.queryToView();
-    
-    this.updateView();
-    
-    // when only setting the query object, the query might not be set yet
-    this.textContent = await this.viewToQuery();
-  }
 
   async viewToQuery() {
     var query = this.textContent;
 
     if (this.isComplex) { // conjunction
-      // TODO: Why is this neccessary?
       if (await this.leftSubquery && await this.rightSubquery) {
         var left = await this.leftSubquery.viewToQuery();
         var right = await this.rightSubquery.viewToQuery();
@@ -420,7 +342,6 @@ export default class AcademicSubquery extends Morph {
         comp = compElement.options[compElement.selectedIndex].value; // or .text;
         val = innerSpan.querySelector('#value').value;
       } else { // read mode
-        //lively.notify("INNERSPAN", innerSpan)
         [attribute, comp, val] = innerSpan
           .querySelectorAll("span[name='queryPart']")
           .map(e => e.textContent);
@@ -439,7 +360,6 @@ export default class AcademicSubquery extends Morph {
 
       if (currentAttribute.name.match(/\./))
         query = "Composite(" + currentAttribute.name + comp + val + ")";
-        // TODO: Set type to Composite?
       else
         query = currentAttribute.name + comp + val; 
     }
@@ -455,7 +375,6 @@ export default class AcademicSubquery extends Morph {
       this.editing = !this.editing;
       lively.notify("Please enter a value!", e.message)
     }
-    //this.ui = await this.queryToView(); // update ui to read-mode
     this.updateView();
   }
 
@@ -562,13 +481,13 @@ export default class AcademicSubquery extends Morph {
     var conjunction = <span id="conjunction" contenteditable="false" style="font-size: 150%">{ast.conjunction}</span>;
 
     var left = await (<academic-subquery style="font-size: smaller;"></academic-subquery>);
-    //await left.setQueryObject(ast.left); // TODO: Remove all traces this ever existed
     await left.setQuery(leftQuery);
+    left.parentQuery = this;
     this.leftSubquery = left; // for viewToQuery
 
     var right = await (<academic-subquery style="font-size: smaller;"></academic-subquery>);
-    //await right.setQueryObject(ast.right);
     await right.setQuery(rightQuery);
+    right.parentQuery = this;
     this.rightSubquery = right; // for viewToQuery
     inner.appendChild(
       <table>
@@ -691,10 +610,6 @@ export default class AcademicSubquery extends Morph {
 
   async livelyExample() {
     this.setQuery("Composite(AA.AuN=='susan t dumais')");
-    //this.setQuery("Composite(AA.AuId=2055148755)")
-    //this.setQuery("And(Or(Y=1985, Y=2008), Ti='disordered electronic systems')")
-    //this.setQuery("And(O='abc', Y=1000)")
-    //this.setQuery("Y='1000'")
   }