Menus GUI implementation, styles updates

Author: nikitaeverywhere

package.json

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

src/static/fonts/iknowentitybrowsericons.eot

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>iKnow Entity Browser</title>
     <meta name="author" content="ZitRo">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <link rel="stylesheet" href="css/index.css"/>
     <script src="lib/d3.v4.min.js"></script>
     <script type="text/javascript" src="js/index.js"></script>
@@ -13,8 +14,11 @@
     <svg id="graph"></svg>
     <div id="table">
         <i id="tableToggle" class="ui icon-window-list"></i>
+        <div id="rightTopIcons">
+            <i id="settingsToggle" class="ui icon-cog"></i>
+        </div>
         <div class="wrapper">
-            <div>
+            <div class="controls">
                 <i id="exportCSV" class="ui icon-page-export-csv"></i>
             </div>
             <h1>Selected Nodes</h1>
@@ -44,11 +48,29 @@ <h1>Selected Nodes</h1>
             <div class="text">Please, select a node.</div>
         </div>
         <div class="content">
-            <h1>WELCOME</h1>
-            <h3>THIS IS A GAME</h3>
-            <h5>TEST GAME!</h5>
+            <!--h1>
+                <span id="nodeDetails-label">Duck</span>
+                <span style="color: darkgray">ID=<span id="nodeDetails-id">0</span></span>
+            </h1-->
+            <table id="nodeDetails-entitiesTable">
+                <thead>
+                <tr>
+                    <th>Entity</th>
+                    <th>ID</th>
+                    <th>Frequency</th>
+                    <th>Score</th>
+                    <th>Spread</th>
+                </tr>
+                </thead>
+                <tbody>
+
+                </tbody>
+            </table>
         </div>
     </div>
+    <div id="settings">
+        <i id="closeSettingsToggle" class="ui icon-close"></i>
+    </div>
 </div>
 </body>
 </html>

src/static/fonts/iknowentitybrowsericons.svg

@@ -3,24 +3,58 @@ import { onSelectionUpdate } from "../selection";
 
 let selectedNode = null;
 
-onSelectionUpdate((selection) => {
+onSelectionUpdate((selection, lastNodeSelected) => {
 
-    d3.select("#nodeDetailsToggle").classed("disabled", selection.length !== 1);
-    selectedNode = selection.length === 1 ? selection[0] : null;
+    d3.select("#nodeDetailsToggle").classed("disabled", selection.length === 0);
+    selectedNode = lastNodeSelected
+        ? lastNodeSelected
+        : selection.length > 0
+            ? selection[selection.length - 1]
+            : null;
     updateHeader();
 
 });
 
 function updateHeader () {
 
+    let typeName = ((selectedNode || {}).type || "Node".toString());
+
     d3.select("#nodeDetails .header .text").text(
         selectedNode
-            ? `Node "${ selectedNode.label }" (${ selectedNode.type }) selected.`
+            ? `${ typeName[0].toUpperCase() + typeName.slice(1) } "${ 
+                selectedNode.label }" selected.`
             : "Please, select one node."
     );
 
     if (!selectedNode) {
         d3.select("#nodeDetails").classed("active", model.uiState.detailsToggled = false);
+    } else {
+        updateData();
+    }
+
+}
+
+function updateData () {
+
+    if (!selectedNode)
+        return;
+
+    let tableElement = document.querySelector("#nodeDetails-entitiesTable tbody");
+        // labelElement = document.querySelector("#nodeDetails-label"),
+        // idElement = document.querySelector("#nodeDetails-id");
+
+    // idElement.textContent = selectedNode.id;
+    // labelElement.textContent = selectedNode.label;
+
+    tableElement.textContent = "";
+    for (let i = 0; i < (selectedNode.entities || []).length; i++) {
+        let row = tableElement.insertRow(i),
+            entity = selectedNode.entities[i];
+        row.insertCell(0).textContent = entity.value;
+        row.insertCell(1).textContent = entity.id;
+        row.insertCell(2).textContent = entity.frequency;
+        row.insertCell(3).textContent = entity.score;
+        row.insertCell(4).textContent = entity.spread;
     }
 
 }

src/static/fonts/iknowentitybrowsericons.ttf

@@ -1,6 +1,6 @@
 import { updateSelectedNodes } from "../tabular";
 import { getGraphData } from "../model";
-import { updateSelection } from "../selection";
+import { updateSelection, setLastSelectedNode } from "../selection";
 
 export function update () {
 
@@ -76,6 +76,7 @@ export function update () {
                 node.classed("selected", (p) => p.selected = p.previouslySelected = false)
             }
             d3.select(this).classed("selected", d.selected = !d.selected); // (!prevSel)
+            setLastSelectedNode(d.selected ? d : null);
             updateSelection();
         });
 
@@ -108,9 +109,10 @@ export function update () {
             if (!extent)
                 return;
             node.classed("selected", (d) => {
-                return d.selected = d.previouslySelected ^
-                    (extent[0][0] <= d.x && d.x < extent[1][0]
+                let selected = (extent[0][0] <= d.x && d.x < extent[1][0]
                     && extent[0][1] <= d.y && d.y < extent[1][1]);
+                if (selected) setLastSelectedNode(d);
+                return d.selected = d.previouslySelected ^ selected;
             });
         })
         .on("end.brush", () => {

src/static/fonts/iknowentitybrowsericons.woff

@@ -1,11 +1,13 @@
 import { update } from "./graph";
 import * as tabular from "./tabular";
 import * as details from "./details";
+import * as settings from "./settings";
 
 window.init = () => {
 
     update();
     tabular.init();
     details.init();
+    settings.init();
 
 };

src/static/index.html

@@ -13,5 +13,6 @@ export function getGraphData () {
 
 export var uiState = {
     tabularToggled: false,
-    detailsToggled: false
+    detailsToggled: false,
+    settingsToggled: false
 };