Select/deselect children from tabular view

Author: nikitaeverywhere

package.json

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

src/static/js/graph/index.js

@@ -245,7 +245,6 @@ export function update (g = lastGraph, reset = false) {
                     deselectAll(d);
                 else
                     selectAll(d);
-                updateSelected();
             } else {
                 d3.select(this).classed("selected", d.selected = !d.selected); // (!prevSel)
             }

src/static/js/selection.js

@@ -32,20 +32,22 @@ export function getOthers () {
     return others;
 }
 
-export function selectAll (node) {
+export function selectAll (node, nodeItself = true) {
     if (!node)
         return;
     if (node.children)
         node.children.forEach(c => selectAll(c));
-    node.selected = true;
+    if (nodeItself)
+        d3.select(node.element).classed("selected", node.selected = true);
 }
 
-export function deselectAll (node) {
+export function deselectAll (node, nodeItself = true) {
     if (!node)
         return;
     if (node.children)
         node.children.forEach(c => deselectAll(c));
-    node.selected = false;
+    if (nodeItself)
+        d3.select(node.element).classed("selected", node.selected = false);
 }
 
 /**

src/static/js/tabular/index.js

@@ -1,6 +1,8 @@
 import { csv } from "./export";
 import * as model from "../model";
-import { onSelectionUpdate, updateSelection, getSelection, getOthers } from "../selection";
+import {
+    onSelectionUpdate, updateSelection, getSelection, getOthers, selectAll, deselectAll
+} from "../selection";
 
 let sorting = {
     properties: ["entities", "0", "score"],
@@ -20,14 +22,28 @@ let sorter = (a, b) => {
 function switchSelected () {
     if (!this.element)
         return;
+    this.element.classList.remove("highlighted");
     d3.select(this.element).classed("selected", this.selected = !this.selected);
     updateSelection();
 }
 
-function updateSelected () {
-    let data = getSelection().filter(node => node.type === "entity").sort(sorter),
-        table = document.querySelector("#tabular-selected");
-    table.textContent = "";
+/**
+ * this: node
+ */
+function toggleChildrenSelected (e) {
+    let sel = false,
+        el = e.target || e.srcElement;
+    for (let o of this.children) { if (o.selected) { sel = true; break; } }
+    if (sel)
+        deselectAll(this, false);
+    else
+        selectAll(this, false);
+    el.className = `icon-${ !sel ? "filled" : "outline" }`;
+    this.element.classList.remove("highlighted");
+    updateSelection();
+}
+
+function insertRows (data, table, selected) {
     for (let i = 0; i < data.length; i++) {
         let row = table.insertRow(i),
             node = data[i],
@@ -40,34 +56,34 @@ function updateSelected () {
         (c = row.insertCell(5)).textContent = node.edgeType || "";
         c.className = `${ node.edgeType }Item`;
         row.insertCell(6).textContent = (node.parent || { label: "root" }).label || "?";
-        let ee = document.createElement("i");
-        ee.className = "icon-close";
+        let ee = document.createElement("i"),
+            ei = document.createElement("i"),
+            sel = false,
+            cell = row.insertCell(7);
+        for (let o of node.children) { if (o.selected) { sel = true; break; } }
+        ei.className = `icon-${ sel ? "filled" : "outline" }`;
+        ei.addEventListener("click", toggleChildrenSelected.bind(node));
+        ee.className = `icon-${ selected ? "close" : "add" }`;
         ee.addEventListener("click", switchSelected.bind(node));
-        row.insertCell(7).appendChild(ee);
+        cell.appendChild(ei);
+        cell.appendChild(ee);
+        row.addEventListener("mouseover", () => { node.element.classList.add("highlighted"); });
+        row.addEventListener("mouseout", () => { node.element.classList.remove("highlighted"); });
     }
 }
 
+function updateSelected () {
+    let data = getSelection().filter(node => node.type === "entity").sort(sorter),
+        table = document.querySelector("#tabular-selected");
+    table.textContent = "";
+    insertRows(data, table, true);
+}
+
 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 || "?";
-        let ee = document.createElement("i");
-        ee.className = "icon-add";
-        ee.addEventListener("click", switchSelected.bind(node));
-        row.insertCell(7).appendChild(ee);
-    }
+    insertRows(data, table, false);
 }
 
 function updateAll () {

src/static/scss/graph.scss

@@ -53,6 +53,10 @@
                 fill: black;
             }
 
+            &.highlighted circle {
+                fill: rgb(255, 245, 161);
+            }
+
         }
 
     }

src/static/scss/tabular.scss

@@ -76,7 +76,7 @@ $headerHeight: 36px;
 
     td:last-child {
 
-        width: 15px;
+        width: 30px;
         border-left: none;
 
     }
@@ -106,7 +106,7 @@ $headerHeight: 36px;
 
 #tabular-selected {
 
-    tr td:last-child {
+    tr td:last-child .icon-close {
         color: red;
     }
 
@@ -120,7 +120,7 @@ $headerHeight: 36px;
         border-top: 1px solid black;
     }
 
-    tr td:last-child {
+    tr td:last-child .icon-add {
         color: green;
     }