Parent/relation type columns added to the tabular view

Author: nikitaeverywhere

src/static/index.html

@@ -54,6 +54,8 @@ <h1>Selected Nodes</h1>
                         <th>Score</th>
                         <th>Frequency</th>
                         <th>Spread</th>
+                        <th>Relation</th>
+                        <th>Parent</th>
                     </tr>
                     </thead>
                     <tbody>

src/static/js/tabular/index.js

@@ -12,12 +12,16 @@ onSelectionUpdate((selection) => {
     table.textContent = "";
     for (let i = 0; i < data.length; i++) {
         let row = table.insertRow(i),
-            node = data[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 || "?";
     }
 });
 

src/static/scss/basic.scss

@@ -28,6 +28,18 @@ table {
 
 }
 
+.relatedItem {
+    color: $relatedColor;
+}
+
+.similarItem {
+    color: $similarColor;
+}
+
+.otherItem, .undefinedItem {
+    color: $otherColor;
+}
+
 input[type=text], input[type=number] {
     border: 0;
     border-bottom: 1px solid gray;

src/static/scss/const.scss

@@ -6,5 +6,9 @@ $colorA: #02ad8b;
 $colorB: #e08f00;
 $colorC: #4c79c1;
 
+$relatedColor: #ffb840;
+$similarColor: #7ca1ff;
+$otherColor: red;
+
 $zIndexInterface: 100;
 $zIndexOnTop: 200;

src/static/scss/graph.scss

@@ -1,4 +1,5 @@
 @import "mixins";
+@import "const";
 
 #graph {
 
@@ -10,10 +11,10 @@
 
     .links line {
         &.similar {
-            stroke: #7ca1ff;
+            stroke: $similarColor;
         }
         &.related {
-            stroke: #ffb840;
+            stroke: $relatedColor;
         }
         &.other {
             stroke: #bbb;
@@ -27,11 +28,11 @@
             circle {
                 stroke: #fff;
                 stroke-width: 1px;
-                fill: red;
+                fill: $otherColor;
             }
 
             &.entity circle {
-                fill: #7ca1ff;
+                fill: $similarColor;
             }
 
             &.folder circle {
@@ -43,7 +44,7 @@
             }
 
             &.root circle {
-                fill: #ffb840;
+                fill: $relatedColor;
             }
 
             text {