Adding and removing nodes from tabular view

package.json

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

src/static/index.html

@@ -96,6 +96,7 @@
                     <th data-prop="entities.0.spread">Spread</th>
                     <th data-prop="edgeType">Relation</th>
                     <th data-prop="parent.label">Parent</th>
+                    <th></th>
                 </tr>
                 </thead>
                 <tbody id="tabular-selected">

src/static/js/graph/index.js

@@ -221,7 +221,7 @@ export function update (g = lastGraph, reset = false) {
     node = nodes.selectAll(".node").data(graph.nodes, function (d) { return this._id || d.id; });
     node.exit().remove();
     let nodeEnter = node.enter().append("g")
-        .each(function (d) { this._id = d.id; })
+        .each(function (d) { this._id = d.id; d.element = this; })
         .attr("class", d => `node${ d.id === 0 ? " root" : "" } ${ d.type || "unknown" }`)
         .classed("selected", (p) => p.selected)
         .call(dragger)

src/static/js/tabular/index.js

@@ -14,6 +14,16 @@ let sorter = (a, b) => {
     return a > b ? sorting.order : a === b ? 0 : -sorting.order;
 };
 
+/**
+ * this: node
+ */
+function switchSelected () {
+    if (!this.element)
+        return;
+    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");
@@ -30,6 +40,10 @@ 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";
+        ee.addEventListener("click", switchSelected.bind(node));
+        row.insertCell(7).appendChild(ee);
     }
 }
 
@@ -49,6 +63,10 @@ function updateOthers () {
         (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);
     }
 }
 
@@ -96,7 +114,8 @@ export function init () {
             d.tabularToggled = !d.tabularToggled;
             d3.select(this).classed("toggled", d.tabularToggled);
             d3.select("#table").classed("active", d.tabularToggled);
-            updateSelection();
+            if (d.tabularToggled)
+                updateAll();
         });
 
     d3.select("#exportCSV").on("click", () => {

src/static/scss/basic.scss

@@ -9,7 +9,7 @@ table {
     box-shadow: $defaultShadow;
 
     td, th {
-        padding: 3px;
+        padding: 1px 2px;
     }
 
     td:not(:last-child), th:not(:last-child) {

src/static/scss/icons.scss

@@ -100,3 +100,6 @@
 .icon-undo:before {
     content: "\75";
 }
+.icon-add:before {
+    content: "\62";
+}

src/static/scss/tabular.scss

@@ -55,6 +55,14 @@ $headerHeight: 36px;
         content: " ▲";
     }
 
+    &:last-child {
+        border-left: none;
+    }
+
+    &:nth-last-child(2) {
+        border-right: none;
+    }
+
 }
 
 #tabular td {
@@ -64,6 +72,46 @@ $headerHeight: 36px;
     text-overflow: ellipsis;
 }
 
+#tabular {
+
+    td:last-child {
+
+        width: 15px;
+        border-left: none;
+
+    }
+
+    tr td:last-child {
+        overflow: visible;
+        text-overflow: clip;
+        & i {
+            position: relative;
+            top: 2px;
+            font-size: 13px;
+            height: 13px;
+            display: none;
+            @include transition(none);
+        }
+    }
+
+    tr:hover td:last-child i {
+        display: inline-block;
+    }
+
+    td:nth-last-child(2) {
+        border-right: none;
+    }
+
+}
+
+#tabular-selected {
+
+    tr td:last-child {
+        color: red;
+    }
+
+}
+
 #tabular-others {
 
     opacity: 0.6;
@@ -72,4 +120,8 @@ $headerHeight: 36px;
         border-top: 1px solid black;
     }
 
+    tr td:last-child {
+        color: green;
+    }
+
 }