Adding and removing nodes from tabular view

Author: nikitaeverywhere

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/fonts/iknowentitybrowsericons.eot

@@ -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/fonts/iknowentitybrowsericons.svg

@@ -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/fonts/iknowentitybrowsericons.ttf

@@ -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/fonts/iknowentitybrowsericons.woff

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

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