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

… into gh-pages

src/components/tools/astro-plot.html

@@ -0,0 +1,16 @@
+<template id="astro-plot" >
+<style data-src="/src/external/font-awesome/css/font-awesome.css"></style>
+<style data-src="/templates/livelystyle.css"></style>
+
+<style>
+
+</style>
+
+
+<div id="page">
+	<slot></slot>
+  <div id="embedding_plot" />
+</div>
+
+</template>
+

src/components/tools/astro-plot.js

@@ -0,0 +1,180 @@
+import Morph from 'src/components/widgets/lively-morph.js';
+
+import * as d3 from "https://d3js.org/d3.v4.min.js"
+import * as Plotly from "https://cdn.plot.ly/plotly-2.32.0.min.js"
+
+const traceConfig = {
+
+}
+
+export default class AstroPlot extends Morph {
+  showFeature(feature) {
+    const container = this.get('#embedding_plot');
+    const existingTraceIndex = this.plot && this.plot.data.findIndex(trace => trace.name === 'live_embedding');
+    if (existingTraceIndex > -1) {
+        Plotly.deleteTraces(container, existingTraceIndex);
+    }
+
+    const { umap_embedding, content, cluster } = feature;
+
+    // Add the new yellow point
+    const newTrace = {
+      x: [umap_embedding[0]],
+      y: [umap_embedding[1]],
+      z: [umap_embedding[2]],
+      mode: 'markers',
+      marker: {
+        size: 8,
+        color: cluster,
+        colorscale: 'Viridis',
+        line: {
+          color: 'rgba(20, 20, 20, 0.8)',
+          width: 2
+        },
+        opacity: 0.8,
+      },
+      hoverlabel: {
+        align: 'left'
+      },
+      customdata: [{
+        cluster: 'Cluster ' + cluster, 
+        contentAbbr: `${this.displayContent(content)}...`
+      }],
+      hovertemplate: `
+        <b>%{customdata.cluster}</b><br>
+        
+        <br>
+
+        <b>Code:</b><br>
+        %{customdata.contentAbbr}
+        <extra></extra>
+      `,
+      name: 'live_embedding',
+      type: 'scatter3d'
+    };
+
+    Plotly.addTraces(container, newTrace)
+  }
+
+  displayContent(str) {
+    return str.slice(0, 100).replace('\n', '<br>');
+  } 
+
+  async initialize() {
+    this.windowTitle = "AstroPlot";
+
+    lively.html.registerKeys(this); // automatically installs handler for some methods
+
+
+    let container = this.get('#embedding_plot')
+    let getExampleData = () => new Promise((resolve, reject) => {
+      d3.csv(
+        'https://raw.githubusercontent.com/plotly/datasets/master/3d-scatter.csv', 
+        (err, rows) => {
+          if (err) reject(err) else resolve(rows)
+        }
+      )
+    });
+
+    const getRealData2 = async () => {
+      const response = await fetch("http://127.0.0.1:5000/dataset/d3-force-main/umap");
+      return await response.json();
+    }
+
+    const getRealData = async () => await fetch("http://127.0.0.1:5000/dataset/d3-force-main/umap")
+      .then(response => response.json());
+    const getClusters = async () => await fetch("http://127.0.0.1:5000/dataset/d3-force-main/clusters")
+      .then(response => response.json());
+
+    //const getRealData = async () => await fetch("http://127.0.0.1:5000/dataset/d3-force-main/umap")
+
+    // const response = await getRealData();
+    const features = await getRealData(); //await response.json()
+    const clusters = await getClusters();
+
+    const dataframe = {
+      _push(el) {
+        Object.entries(el).forEach(([key, value]) => {
+          if (!(key in this)) this[key] = [];
+          this[key].push(value);
+        });
+      }
+    }; 
+
+    features.forEach(({ 
+      umap_embedding,
+      function_name,
+      content,
+      id
+    }, i) => dataframe._push({
+      x: umap_embedding[0],
+      y: umap_embedding[1],
+      z: umap_embedding[2],
+      text: function_name,
+      color: clusters[i],
+      customdata: { 
+        cluster: 'Cluster ' + clusters[i], 
+        content, 
+        contentAbbr: `${this.displayContent(content)}...`
+      },
+      ids: id
+    }));
+
+    const data = [
+      {
+        ...dataframe,
+        mode: 'markers+text',
+        marker: {
+          size: 8,
+          line: {
+            color: 'rgba(217, 217, 217, 0.14)',
+            width: 0.5
+          },
+          opacity: 0.8,
+          color: clusters,
+          colorscale: 'Viridis',
+        },
+        hoverlabel: {
+          align: 'left'
+        },
+        hovertemplate: `
+<b>%{customdata.cluster}</b><br>
+%{text}
+<br><br>
+
+<b>Code:</b><br>
+%{customdata.contentAbbr}
+<extra></extra>`,
+        type: 'scatter3d'
+      }
+    ]
+
+    var layout = {margin: {
+      l: 0,
+      r: 0,
+      b: 0,
+      t: 0
+      }};
+
+    this.plot = await Plotly.newPlot(container, data, layout, {
+      responsive: true,
+      displayModeBar: false
+    });
+ }
+
+/*
+  livelyInspect(contentNode, inspector) {
+    // overrides how the inspector displays this component
+  }
+*/
+
+  async livelyExample() {
+    // this customizes a default instance to a pretty example
+    // this is used by the 
+    // this.style.backgroundColor = "lightgray"
+    // this.someJavaScriptProperty = 42
+    // this.appendChild(<div>This is my content</div>)
+  }
+
+
+}

src/components/tools/astro-view.html

@@ -97,20 +97,32 @@
         <b>AST</b>
         <lively-ast-treesitter-inspector class="pane" id="ast"></lively-ast-treesitter-inspector>
       </div>
+
       <lively-separator></lively-separator>
+
       <div class="pane tool layout-column">
         <div>
           <b>Tokens</b> <span id="tokensInfo"></span>
         </div>
         <div class="pane" id="tokens">xxx</div>
+
+        <div>
+          <b>Pool Embedding</b>
+        </div>
+        <div class="pane">
+          <pre><code id="pool_embedding"></code></pre>
+        </div>
+
         <div>
-          <b>Embeddings</b> <span id="tokensInfo"></span>
+          <b>Embeddings</b> <span id="tokensInfo2"></span>
         </div>
         <div class="pane" id="embeddings">xxxx</div>
       </div>
+
     </div>
+
     <lively-separator></lively-separator>
-    <lively-editor class="pane" id="workspace"></lively-editor>
-
+
+    <astro-plot id="astro-plot"></astro-plot>
   </div>
 </template>

src/components/tools/astro-view.js

@@ -17,7 +17,6 @@ export default class AstroView extends Morph {
   get container() { return this.get("#content"); }
 
   get sourceEditor() { return this.get("#source"); }
-  get workspaceEditor() { return this.get("#workspace"); }
 
   get sourceLCM() { return this.sourceEditor.livelyCodeMirror(); }
   get sourceCM() { return this.sourceEditor.currentEditor(); }
@@ -31,10 +30,6 @@ export default class AstroView extends Morph {
   set sourceURL(urlString) { this.sourcePath.value = urlString; }
   onSourcePathEntered(urlString) { this.loadSourceFile(urlString); }
 
-  get workspaceURL() { return this.workspaceEditor.getURL(); }
-  set workspaceURL(urlString) {
-  this.workspaceEditor.setURL(urlString) }
-
   get updateButton() { return this.get("#update"); }
 
   get autoUpdate() { return this._autoUpdate; }
@@ -61,14 +56,6 @@ export default class AstroView extends Morph {
     await this.sourceEditor.loadFile();
     await this.update(); 
   }
-
-  async loadWorkspaceFile(urlString) {
-    console.log("LOAD Workspace", urlString);
-    this.workspaceURL = urlString;
-    this.workspaceEditor.setURL(lively.paths.normalizePath(urlString, ""));
-    await this.workspaceEditor.loadFile();
-  }
-
 
   async initialize() {
     this.windowTitle = "Astro View";
@@ -113,18 +100,7 @@ export default class AstroView extends Morph {
     const source = this.getAttribute("source");
     if (source) this.loadSourceFile(source);
     this.autoUpdate = true;
-
-
-    const workspace = this.getAttribute("workspace");
-    if (workspace) this.loadWorkspaceFile(workspace);
-
-    this.workspaceEditor.awaitEditor().then(() => {
-      // this object for workspace....
-      this.workspaceEditor.livelyCodeMirror().getDoitContext = () => this
-    })
-
-
-
+
     this.dispatchEvent(new CustomEvent("initialize"));
   }
 
@@ -137,6 +113,8 @@ export default class AstroView extends Morph {
 
   async updateTokens() {   
     let api = "http://127.0.0.1:5000";
+    let dataset = "d3-force-main";
+
     try {
       this.tokens = null;
 
@@ -159,6 +137,29 @@ export default class AstroView extends Morph {
       this.log(`error fetching tokens: ${e}`);
     }
 
+    try {
+      let response = await fetch(`${api}/dataset/${dataset}/embedding`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          text: this.source
+        }),
+      })
+
+      let embedding = await response.json()
+      this.embedding = embedding;
+    } catch (e) {
+      this.log(`error fetching embedding: ${e}`);
+    }
+
+    if (this.embedding) {
+      let formatted = JSON.stringify(this.embedding)
+      this.get('#pool_embedding').innerText = formatted
+      this.get('#astro-plot').showFeature(this.embedding)
+    }
+
     this.log('fetched tokens', this.tokens)
 
     if (this.tokens) {
@@ -227,7 +228,7 @@ export default class AstroView extends Morph {
       this.astInspector.inspect({Error: e.message});
     }
 
-    this.updateTokens()
+    this.updateTokens();
   }
 
   async save() {
@@ -249,7 +250,5 @@ export default class AstroView extends Morph {
 
   async livelyExample() {
     await this.loadSourceFile(AstroView.defaultSourceURL);
-    await this.loadWorkspaceFile(AstroView.defaultWorkspaceURL);
-
   }
 }