Menus GUI implementation, styles updates

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/index.html

@@ -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/js/details/index.js

@@ -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/js/graph/index.js

@@ -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/js/index.js

@@ -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/js/model/index.js

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

src/static/js/selection.js

@@ -1,13 +1,30 @@
 import * as model from "./model";
 
 let selection = [],
-    callbacks = [];
+    callbacks = [],
+    lastSelectedNode = null;
 
 export function updateSelection () {
 
     selection = model.getGraphData().nodes.filter(node => !!node.selected);
 
-    callbacks.forEach(c => c(selection));
+    if (!selection.length) lastSelectedNode = null;
+    if (lastSelectedNode && !lastSelectedNode.selected) {
+        lastSelectedNode = selection[selection.length - 1];
+    }
+
+    callbacks.forEach(
+        c => c(selection, lastSelectedNode || selection[selection.length - 1] || null)
+    );
+
+}
+
+export function setLastSelectedNode (node) {
+
+    if (node && typeof node.id !== "undefined")
+        lastSelectedNode = node;
+    else
+        lastSelectedNode = null;
 
 }
 
@@ -25,4 +42,5 @@ export function onSelectionUpdate (callback) {
  * This callback is invoked when selection changes.
  * @callback selectionCallback
  * @param {*[]} nodes - Currently selected nodes.
+ * @param {*} lastNodeSelected - The last node selected by user.
  */

src/static/js/settings/index.js

@@ -0,0 +1,19 @@
+import * as model from "../model";
+
+function toggleSettings (uiStateModel) {
+    uiStateModel.settingsToggled = !uiStateModel.settingsToggled;
+    d3.select("#settings").classed("active", uiStateModel.settingsToggled);
+    d3.select("#windows").classed("offScreen", uiStateModel.settingsToggled);
+}
+
+export function init () {
+
+    d3.select("#settingsToggle")
+        .data([model.uiState])
+        .on("click", toggleSettings);
+
+    d3.select("#closeSettingsToggle")
+        .data([model.uiState])
+        .on("click", toggleSettings);
+
+}

src/static/scss/const.scss

@@ -2,4 +2,6 @@ $defaultTransition: all .3s ease;
 $defaultPadding: 10px;
 $defaultShadow: 0 0 2px gray;
 
-$colorA: #02ad8b;
+$colorA: #02ad8b;
+
+$zIndexInterface: 100;

src/static/scss/icons.scss

@@ -85,3 +85,6 @@
 .icon-android-options:before {
     content: "\6e";
 }
+.icon-close:before {
+    content: "\70";
+}

src/static/scss/index.scss

@@ -1,4 +1,5 @@
 @import "mixins";
+@import "const";
 
 html, body {
     position: relative;
@@ -10,15 +11,25 @@ html, body {
 }
 
 #windows {
+
     position: relative;
     overflow: hidden;
+    top: 0;
     width: 100%;
     height: 100%;
+    @include transition($defaultTransition);
+
+    &.offScreen {
+        top: 100%;
+        overflow: visible;
+    }
+
 }
 
 @import "basic";
 @import "icons-all";
 @import "icons";
 @import "graph";
 @import "tabular";
-@import "nodeDetails";
+@import "nodeDetails";
+@import "settings";

src/static/scss/nodeDetails.scss

@@ -18,28 +18,32 @@
         @include transform(translate(0,0));
     }
 
+    $headerPadding: 4px;
+    $headerFontSize: 16px;
+
     > .header {
 
         position: absolute;
         left: 0;
         right: 0;
         top: -28px;
-        height: 20px;
+        height: 20px + 2 * $headerPadding;
         max-width: 80%;
         width: 350px;
         margin: 0 auto;
         border-radius: 5px 5px 0 0;
         background: white;
-        padding: 4px;
-        font-size: 16px;
+        padding: $headerPadding;
+        font-size: $headerFontSize;
         box-shadow: 0 0 2px gray;
+        box-sizing: border-box;
+        @include transition($defaultTransition);
 
         > .icons {
             display: block;
             float: left;
             width: 30px;
             font-size: 24px;
-            color: gray;
         }
 
         > .text {
@@ -70,4 +74,20 @@
 
     }
 
+    &.active {
+
+        > .header {
+            top: 0;
+            border-radius: 0 0 5px 5px;
+            max-width: 100%;
+            width: 100%;
+            box-shadow: none;
+        }
+
+        > .content {
+            padding-top: $defaultPadding + $headerFontSize + $headerPadding;
+        }
+
+    }
+
 }

src/static/scss/settings.scss

@@ -0,0 +1,26 @@
+@import "const";
+@import "mixins";
+
+#settings {
+
+    position: absolute;
+    top: -100%;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background: white;
+    padding: $defaultPadding;
+
+    &.active {
+
+    }
+
+}
+
+#closeSettingsToggle {
+
+    position: absolute;
+    right: 7px;
+    top: 7px;
+
+}