Showing hidden nodes in table option, selection updates fix

Author: nikitaeverywhere

README.md

@@ -47,6 +47,7 @@ represented in the table below.
 | `queryType` | `related` | iKnow query type. Can be `related` or `similar`. |
 | `seed` | `crew` | Seed string. |
 | `keepSeedInView` | `false` | A `boolean` value determining whether the `queryType` and `seed` settings will be displayed on the screen all the time. |
+| `tabularShowHiddenNodes` | `false` | A `boolean` value determining whether to show entities hidden behind `X more` node in the table. |
 
 URL example: `http://.../index.html?domain=1&queryType=similar&seed=plane`
 

package.json

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

src/static/index.html

@@ -117,6 +117,9 @@
                 </tbody>
                 <tbody id="tabular-others">
 
+                </tbody>
+                <tbody id="tabular-hidden">
+
                 </tbody>
             </table>
         </div>
@@ -146,6 +149,12 @@ <h1>General Settings</h1>
         </div>
         <h1>Tabular View Settings</h1>
         <div>
+            <div>
+                <label>
+                    <input id="settings.tabularShowHiddenNodes" type="checkbox"/>
+                    Show hidden nodes in table
+                </label>
+            </div>
             <div>
                 <b>Columns:</b>
                 <span id="settings.tabularColumns"></span>

src/static/js/controls.js

@@ -40,14 +40,14 @@ function deleteSelection () {
     if (!selection.length)
         return;
     dropNodes(selection);
-    updateSelection();
+    // updateSelection();
 }
 
 function dropChildren () {
     if (!selection.length)
         return;
     dropDescendants(selection);
-    updateSelection();
+    // updateSelection();
 }
 
 export function init () {

src/static/js/index.js

@@ -3,6 +3,7 @@ import * as tabular from "./tabular";
 import * as settings from "./settings";
 import * as model from "./model";
 import * as controls from "./controls";
+import * as selection from "./selection";
 
 window.init = () => {
 
@@ -11,6 +12,7 @@ window.init = () => {
     graph.init();
     controls.init();
     model.init();
+    selection.init();
     model.update(() => graph.update(true));
 
 };

src/static/js/selection.js

@@ -2,13 +2,26 @@ import * as model from "./model";
 
 let selection = [],
     others = [],
+    hidden = [],
     callbacks = [];
 
 export function updateSelection () {
 
     let tree = model.getGraphData();
     selection = [];
     others = [];
+    hidden = [];
+
+    function findHidden (node) {
+        if (node.selected)
+            hidden.push(node);
+        else
+            hidden.push(node);
+        if (node.children)
+            for (let n of node.children) findHidden(n);
+        if (node._children)
+            for (let n of node._children) findHidden(n);
+    }
 
     function findSelected (node) {
         if (node.selected)
@@ -17,7 +30,10 @@ export function updateSelection () {
             others.push(node);
         if (node.children)
             for (let n of node.children) findSelected(n);
+        if (node._children)
+            for (let n of node._children) findHidden(n);
     }
+
     findSelected(tree);
 
     callbacks.forEach(c => c(selection));
@@ -32,6 +48,10 @@ export function getOthers () {
     return others;
 }
 
+export function getHidden () {
+    return hidden;
+}
+
 export function selectAll (node, nodeItself = true) {
     if (!node)
         return;
@@ -60,6 +80,10 @@ export function onSelectionUpdate (callback) {
 
 }
 
+export function init () {
+    model.onModelUpdate(() => updateSelection());
+}
+
 /**
  * This callback is invoked when selection changes.
  * @callback selectionCallback

src/static/js/settings/sourceSettings.js

@@ -22,7 +22,8 @@ export function init () {
         "settings.queryType",
         "settings.seed",
         "settings.webAppName",
-        "settings.keepSeedInView"
+        "settings.keepSeedInView",
+        "settings.tabularShowHiddenNodes"
     ]);
 
     function apply () {

src/static/js/settings/values.js

@@ -11,7 +11,8 @@ const settingsTypes = {
     domain: String,
     queryType: new Set(["similar", "related"]),
     seed: String,
-    keepSeedInView: Boolean
+    keepSeedInView: Boolean,
+    tabularShowHiddenNodes: Boolean
 };
 
 const settings = { // assign defaults here
@@ -22,6 +23,7 @@ const settings = { // assign defaults here
     queryType: "related",
     seed: "crew",
     keepSeedInView: false,
+    tabularShowHiddenNodes: false,
     tabularColumns: [
         {
             label: "ID",

src/static/js/tabular/index.js

@@ -1,7 +1,7 @@
 import { csv } from "./export";
 import * as model from "../model";
 import {
-    onSelectionUpdate, updateSelection, getSelection, getOthers, selectAll, deselectAll
+    onSelectionUpdate, updateSelection, getSelection, getOthers, getHidden, selectAll, deselectAll
 } from "../selection";
 import { getOption } from "../settings/values";
 import { getObjProp } from "../utils";
@@ -74,9 +74,11 @@ function insertRows (data, table, selected) {
         ee.addEventListener("click", switchSelected.bind(node));
         cell.appendChild(ee);
         if (node.children.length) cell.appendChild(ei);
-        row.addEventListener("mouseover", () => { node.element.classList.add("highlighted"); });
-        row.addEventListener("mouseout", () => { node.element.classList.remove("highlighted"); });
-        row.addEventListener("click", () => focusOn(node.x, node.y));
+        row.addEventListener("mouseover", () =>
+            node.element && node.element.classList.add("highlighted"));
+        row.addEventListener("mouseout", () =>
+            node.element && node.element.classList.remove("highlighted"));
+        row.addEventListener("click", () => node.element && focusOn(node.x, node.y));
     }
 }
 
@@ -94,10 +96,19 @@ function updateOthers () {
     insertRows(data, table, false);
 }
 
+function updateHidden () {
+    let data = getHidden().filter(node => node.type === "entity").sort(sorter),
+        table = document.querySelector("#tabular-hidden");
+    table.textContent = "";
+    if (getOption("tabularShowHiddenNodes"))
+        insertRows(data, table, false);
+}
+
 function updateAll () {
     updateHeaders();
     updateSelected();
     updateOthers();
+    updateHidden();
 }
 
 onSelectionUpdate(() => {

src/static/scss/tabular.scss

@@ -139,7 +139,21 @@ $headerHeight: 36px;
 
 #tabular-others {
 
-    opacity: 0.6;
+    opacity: 0.7;
+
+    tr:first-child td {
+        border-top: 1px solid black;
+    }
+
+    tr td:last-child .icon-add {
+        color: green;
+    }
+
+}
+
+#tabular-hidden {
+
+    opacity: 0.4;
 
     tr:first-child td {
         border-top: 1px solid black;