Hover tokens

SQUASHED: AUTO-COMMIT-src-components-tools-astro-view.js,Fetch-tokens-from-backend,

src/components/tools/astro-view-example-source.js

@@ -1,4 +1,3 @@
-function a() {
-
-
+function add(a, b) {
+  return a+b;
 }

src/components/tools/astro-view.html

@@ -57,6 +57,10 @@
       background: steelblue;
     }
 
+    #tokens {
+      overflow: scroll;
+    }
+
     #log {
       white-space: pre;
       overflow: auto;

src/components/tools/astro-view.js

@@ -94,6 +94,7 @@ export default class AstroView extends Morph {
 
     this.sourceEditor.livelyCodeMirror().editor.on("cursorActivity", (cm) => {
       // #TODO continue here....
+      console.log(cm)
       // this.selectPath(pathKeys);
     })
 
@@ -134,30 +135,49 @@ export default class AstroView extends Morph {
     this.get("#editorInfo").textContent = `${cm.indexFromPos(from)}-${cm.indexFromPos(to)}`
   }
 
-  async updateTokens() {    
-    this.get("#tokens").innerHTML = ""
-    let counter = 1
-    let pos = 0
-
-    // #TODO
-    // this.tokens = await fetch("lukas.server/asfasdfasdf")
-
-    this.tokens = this.source.split(/(?=[^a-zA-Z])/g)
-      .map(ea => { 
-        let start = pos
-        let end = start + ea.length
-        pos = end
-        return { id: counter++, start: start, end: end, value: ea}
+  async updateTokens() {   
+    let api = "http://127.0.0.1:5000";
+    try {
+      this.tokens = null;
+
+      let response = await fetch(`${api}/tokenize`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          text: this.source
+        })
       })
-      .filter(ea => !ea.value.match(/^[ \n]+$/))
-
-    for(let token of this.tokens) {
-      let tokenView = <div class="token" style="">
-          <div style="font-size: 6pt">{token.id}</div>
-          <div style="background-color: lightgray" click={() => this.selectToken(tokenView, token)}>{token.value}</div>
-          <div style="font-size: 6pt; color: blue">{token.start}-{token.end}</div>
-        </div>
-      this.get("#tokens").appendChild(tokenView)
+
+      let tokens = await response.json();
+      // filter new-lines
+      tokens = tokens.filter(ea => !ea.value.match(/^[ \n]+$/));
+
+      this.tokens = tokens;
+    } catch (e) {
+      this.log(`error fetching tokens: ${e}`);
+    }
+
+    this.log('fetched tokens', this.tokens)
+
+    if (this.tokens) {
+      this.get("#tokens").innerHTML = ""
+      this.tokens.forEach((token) => {
+        let tokenView = 
+          <div class="token" style="">
+            <div style="font-size: 6pt">{token.id}</div>
+            <div style="background-color: lightgray" 
+              click={() => this.selectToken(tokenView, token)}
+              pointerenter={() => this.hoverToken(tokenView, token, true)}
+              pointerleave={() => this.hoverToken(tokenView, token, false)}
+            >{token.value}</div>
+            <div style="font-size: 6pt; color: blue">{token.start}-{token.end}</div>
+          </div>
+        this.get("#tokens").appendChild(tokenView)
+      })
+    } else {
+      this.get("#tokens").innerHTML = "Error fetching tokens"
     }
   }
 
@@ -182,7 +202,16 @@ export default class AstroView extends Morph {
   }
 
 
-
+  hoverToken(view, token, active) {
+    if (active) {
+      const start = loc(this.sourceCM.posFromIndex(token.start));
+      const end = loc(this.sourceCM.posFromIndex(token.end));
+      this.hoverMarker = this.sourceCM.markText(start.asCM(), end.asCM(), {css: "background-color: #fe3"});
+    } else {
+      this.hoverMarker.clear();
+      this.hoverMarker = null;
+    }
+  }
 
   /*MD ## Execution MD*/
 

src/components/tools/lively-ast-inspector.js

@@ -428,6 +428,7 @@ export default class AstInspector extends Morph {
     if (this.editor && element.target.loc) {
       if (this.hoverMarker) this.hoverMarker.clear();
       const cm = this.editor.currentEditor();
+      console.log('here')
       const start = loc(element.target.loc.start);
       const end = loc(element.target.loc.end);
       this.hoverMarker = cm.markText(start.asCM(), end.asCM(), {css: "background-color: #fe3"});