Tabular view code refactoring, dedicated sort function

Author: nikitaeverywhere

package.json

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

src/static/index.html

@@ -89,16 +89,19 @@
             <table>
                 <thead>
                 <tr>
-                    <th>ID</th>
-                    <th>Label</th>
-                    <th>Score</th>
-                    <th>Frequency</th>
-                    <th>Spread</th>
-                    <th>Relation</th>
-                    <th>Parent</th>
+                    <th data-prop="id">ID</th>
+                    <th data-prop="label">Label</th>
+                    <th data-prop="entities.0.score">Score</th>
+                    <th data-prop="entities.0.frequency">Frequency</th>
+                    <th data-prop="entities.0.spread">Spread</th>
+                    <th data-prop="edgeType">Relation</th>
+                    <th data-prop="parent.label">Parent</th>
                 </tr>
                 </thead>
-                <tbody>
+                <tbody id="tabular-selected">
+
+                </tbody>
+                <tbody id="tabular-others">
 
                 </tbody>
             </table>

src/static/js/model/index.js

@@ -104,7 +104,10 @@ function preprocess (graph) {
             entities: [{
                 id: -1,
                 value: getOption("seed"),
-                [SIZE_CRITERIA]: 10000
+                [SIZE_CRITERIA]: 9999,
+                score: 9999,
+                spread: 0,
+                frequency: 9999
             }]
         });
     }

src/static/js/selection.js

@@ -20,6 +20,10 @@ export function updateSelection () {
 
 }
 
+export function getSelection () {
+    return selection;
+}
+
 export function selectAll (node) {
     if (!node)
         return;

src/static/js/tabular/index.js

@@ -1,14 +1,23 @@
 import { csv } from "./export";
 import * as model from "../model";
-import { onSelectionUpdate, updateSelection } from "../selection";
+import { onSelectionUpdate, updateSelection, getSelection } from "../selection";
 
-onSelectionUpdate((selection) => {
-    if (!model.uiState.tabularToggled)
-        return;
-    let data = selection.filter(node => node.type === "entity").sort((a, b) =>
-            a.entities[0].score > b.entities[0].score ? -1 : 1
-        ),
-        table = document.querySelector("#table table tbody");
+let sorting = {
+    enabled: false,
+    properties: ["entities", "0", "score"],
+    order: 1
+};
+
+let sorter = (a, b) => {
+    let i = 0;
+    while (i < sorting.properties.length && typeof (a = a[sorting.properties[i]]) !== "undefined"
+    && typeof (b = b[sorting.properties[i]]) !== "undefined") { console.log(i); ++i }
+    return a > b ? -sorting.order : a === b ? 0 : sorting.order;
+};
+
+function updateSelected () {
+    let data = getSelection().filter(node => node.type === "entity").sort(sorter),
+        table = document.querySelector("#tabular-selected");
     table.textContent = "";
     for (let i = 0; i < data.length; i++) {
         let row = table.insertRow(i),
@@ -23,6 +32,16 @@ onSelectionUpdate((selection) => {
         c.className = `${ node.edgeType }Item`;
         row.insertCell(6).textContent = (node.parent || { label: "root" }).label || "?";
     }
+}
+
+function updateOthers () {
+
+}
+
+onSelectionUpdate(() => {
+    if (!model.uiState.tabularToggled)
+        return;
+    updateSelected();
 });
 
 export function init () {