Design enhancements, CSV data export

Author: nikitaeverywhere

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iknow-entity-browser",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Visualizer for iKnow entities",
   "main": "gulpfile.babel.js",
   "scripts": {

src/static/fonts/iknowentitybrowsericons.eot

@@ -12,25 +12,30 @@
 <div id="windows">
     <svg id="graph"></svg>
     <div id="table">
-        <h1>Selected Nodes</h1>
+        <i id="tableToggle" class="ui icon-window-list"></i>
         <div class="wrapper">
-            <table>
-                <thead>
-                <tr>
-                    <th>ID</th>
-                    <th>Label</th>
-                    <th>Frequency</th>
-                </tr>
-                </thead>
-                <tbody>
+            <div>
+                <i id="exportCSV" class="ui icon-page-export-csv"></i>
+            </div>
+            <h1>Selected Nodes</h1>
+            <div class="wrapper">
+                <table>
+                    <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>Label</th>
+                        <th>Score</th>
+                        <th>Frequency</th>
+                        <th>Spread</th>
+                    </tr>
+                    </thead>
+                    <tbody>
 
-                </tbody>
-            </table>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 </div>
-<div class="uiIconGroup topRight">
-    <i id="tableToggle" class="ui icon-window-list"></i>
-</div>
 </body>
 </html>

src/static/fonts/iknowentitybrowsericons.svg

@@ -0,0 +1,26 @@
+/**
+ * @param {*[][]} dataArray - Table to be exported.
+ */
+export function csv (dataArray = []) {
+
+    console.log(dataArray);
+    let csvContent = "data:text/csv;charset=utf-8,";
+
+    dataArray.forEach((infoArray, index) => {
+
+        let dataString = infoArray.join(",");
+        csvContent += index < dataArray.length ? dataString + "\n" : dataString;
+
+    });
+
+    let encodedUri = encodeURI(csvContent),
+        link = document.createElement("a");
+
+    link.setAttribute("href", encodedUri);
+    link.setAttribute("download", "entityGraph.csv");
+    document.body.appendChild(link);
+    link.click();
+
+    setTimeout(() => link.parentNode.removeChild(link), 10);
+
+}

src/static/fonts/iknowentitybrowsericons.ttf

@@ -1,22 +1,30 @@
 import sampleData from "./sample_output2.json";
+import { uiState } from "./ui";
+import { csv } from "./export";
 
 var graph = preprocess(sampleData.graph);
 
 function preprocess (graph) {
-    graph.nodes.forEach(node => node.radius = 5 + Math.sqrt(node.entities[0].frequency || 25));
+    graph.nodes.forEach(node => node.radius = 5 + Math.sqrt(node.entities[0].score/4 || 25));
     return graph;
 }
 
 function updateSelectedNodes () {
-    let data = graph.nodes.filter(node => !!node.selected),
+    if (!uiState.tableToggled)
+        return;
+    let data = graph.nodes.filter(node => !!node.selected).sort((a, b) =>
+            a.entities[0].score > b.entities[0].score ? -1 : 1
+        ),
         table = document.querySelector("#table table tbody");
     table.textContent = "";
     for (let i = 0; i < data.length; i++) {
         let row = table.insertRow(i),
             node = data[i];
         row.insertCell(0).textContent = node.id;
         row.insertCell(1).textContent = node.label;
-        row.insertCell(2).textContent = node.entities[0].frequency;
+        row.insertCell(2).textContent = node.entities[0].score;
+        row.insertCell(3).textContent = node.entities[0].frequency;
+        row.insertCell(4).textContent = node.entities[0].spread;
     }
 }
 
@@ -91,7 +99,7 @@ window.init = () => {
             if (!ctrlKey) {
                 node.classed("selected", (p) => p.selected = p.previouslySelected = false)
             }
-            d3.select(this).classed("selected", d.selected = !d.previouslySelected);
+            d3.select(this).classed("selected", d.selected = !d.selected); // (!prevSel)
             updateSelectedNodes();
         });
 
@@ -197,10 +205,18 @@ window.init = () => {
     }
 
     d3.select("#tableToggle")
-        .data([{ toggled: false }])
-        .on("click", (d) => {
-            d.toggled = !d.toggled;
-            d3.select("#table").classed("active", d.toggled);
+        .data([uiState])
+        .on("click", function (d) {
+            d.tableToggled = !d.tableToggled;
+            d3.select(this).classed("toggled", d.tableToggled);
+            d3.select("#table").classed("active", d.tableToggled);
+            updateSelectedNodes();
         });
 
+    d3.select("#exportCSV").on("click", () => {
+        csv([].slice.call(document.querySelector("#table table").rows).map(row =>
+            [].slice.call(row.cells).map(cell => cell.textContent)
+        ));
+    });
+
 };

src/static/fonts/iknowentitybrowsericons.woff

@@ -0,0 +1,3 @@
+export var uiState = {
+    tableToggled: false
+};

src/static/index.html

@@ -20,9 +20,13 @@ table {
     }
 
     th {
-        background-color: rgb(2, 173, 139);
+        background-color: $colorA;
         color: white;
         text-shadow: 0 1px 1px black;
     }
 
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0 0 .3em 0;
 }