Selected and not selected list of nodes implementation

package.json

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

src/static/js/selection.js

@@ -1,16 +1,20 @@
 import * as model from "./model";
 
 let selection = [],
+    others = [],
     callbacks = [];
 
 export function updateSelection () {
 
     let tree = model.getGraphData();
     selection = [];
+    others = [];
 
     function findSelected (node) {
         if (node.selected)
             selection.push(node);
+        else
+            others.push(node);
         if (node.children)
             for (let n of node.children) findSelected(n);
     }
@@ -24,6 +28,10 @@ export function getSelection () {
     return selection;
 }
 
+export function getOthers () {
+    return others;
+}
+
 export function selectAll (node) {
     if (!node)
         return;

src/static/js/tabular/index.js

@@ -1,6 +1,6 @@
 import { csv } from "./export";
 import * as model from "../model";
-import { onSelectionUpdate, updateSelection, getSelection } from "../selection";
+import { onSelectionUpdate, updateSelection, getSelection, getOthers } from "../selection";
 
 let sorting = {
     properties: ["entities", "0", "score"],
@@ -34,7 +34,22 @@ function updateSelected () {
 }
 
 function updateOthers () {
-
+    let data = getOthers().filter(node => node.type === "entity").sort(sorter),
+        table = document.querySelector("#tabular-others");
+    table.textContent = "";
+    for (let i = 0; i < data.length; i++) {
+        let row = table.insertRow(i),
+            node = data[i],
+            c;
+        row.insertCell(0).textContent = node.id;
+        row.insertCell(1).textContent = node.label;
+        row.insertCell(2).textContent = node.entities[0].score;
+        row.insertCell(3).textContent = node.entities[0].frequency;
+        row.insertCell(4).textContent = node.entities[0].spread;
+        (c = row.insertCell(5)).textContent = node.edgeType || "";
+        c.className = `${ node.edgeType }Item`;
+        row.insertCell(6).textContent = (node.parent || { label: "root" }).label || "?";
+    }
 }
 
 function updateAll () {
@@ -45,7 +60,7 @@ function updateAll () {
 onSelectionUpdate(() => {
     if (!model.uiState.tabularToggled)
         return;
-    updateSelected();
+    updateAll();
 });
 
 /**

src/static/scss/tabular.scss

@@ -44,6 +44,9 @@ $headerHeight: 36px;
 
 #tabular th {
 
+    @include user-select(none);
+    cursor: pointer;
+
     &.sort-up:after {
         content: " ▼";
     }
@@ -52,4 +55,21 @@ $headerHeight: 36px;
         content: " ▲";
     }
 
+}
+
+#tabular td {
+    max-width: 150px;
+    white-space: pre;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#tabular-others {
+
+    opacity: 0.6;
+
+    tr:first-child td {
+        border-top: 1px solid black;
+    }
+
 }