Big commit: tabular view improvements, custom editable table columns, settings refactoring

Author: nikitaeverywhere

package.json

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

src/static/fonts/iknowentitybrowsericons.eot

@@ -88,16 +88,7 @@
         <div class="wrapper">
             <table id="tabular">
                 <thead>
-                <tr>
-                    <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>
-                    <th></th>
-                </tr>
+                    <tr></tr>
                 </thead>
                 <tbody id="tabular-selected">
 
@@ -126,6 +117,13 @@ <h1>General Settings</h1>
                 / <input autosize placeholder="seed string" id="settings.seed" type="text" value="crew"/>
             </div>
         </div>
+        <h1>Tabular View Settings</h1>
+        <div>
+            <div>
+                <b>Columns:</b>
+                <span id="settings.tabularColumns"></span>
+            </div>
+        </div>
     </div>
 </div>
 </body>

src/static/fonts/iknowentitybrowsericons.svg

@@ -1,15 +1,13 @@
 import * as graph from "./graph";
 import * as tabular from "./tabular";
 import * as settings from "./settings";
-import * as source from "./source";
 import * as model from "./model";
 import * as controls from "./controls";
 
 window.init = () => {
 
     tabular.init();
     settings.init();
-    source.init();
     graph.init();
     controls.init();
     model.init();

src/static/fonts/iknowentitybrowsericons.ttf

@@ -1,5 +1,6 @@
 import sampleData from "../sample_output2.json";
-import { getData, getOption } from "../source";
+import { getData } from "../source";
+import { getOption } from "../settings/values";
 import { toggleLoader } from "../utils";
 import * as history from "./history";
 
@@ -101,13 +102,14 @@ function preprocess (graph) {
             id: 0,
             label: getOption("seed"),
             type: "entity",
+            edgeType: "root",
             entities: [{
                 id: -1,
                 value: getOption("seed"),
-                [SIZE_CRITERIA]: 9999,
                 score: 9999,
                 spread: 0,
-                frequency: 9999
+                frequency: 9999,
+                [SIZE_CRITERIA]: 9999
             }]
         });
     }

src/static/fonts/iknowentitybrowsericons.woff

@@ -1,6 +1,9 @@
 import * as model from "../model";
 import * as graph from "../graph";
-import { getChanges, applyChanges } from "../source";
+import * as sourceSettings from "./sourceSettings";
+import * as tabularViewSettings from "./tabularViewSettings";
+import { getChanges, applyChanges } from "./values";
+import { makeAutosizable } from "../utils";
 
 function toggleSettings (uiStateModel) {
     uiStateModel.settingsToggled = !uiStateModel.settingsToggled;
@@ -23,29 +26,9 @@ export function init () {
         .on("click", toggleSettings);
 
     // make inputs auto-sizable
-    [].slice.call(document.querySelectorAll(`input[autosize]`)).forEach((input) => {
+    [].slice.call(document.querySelectorAll(`input[autosize]`)).forEach((i) => makeAutosizable(i));
 
-        function updateInput () {
-            let style = window.getComputedStyle(input),
-                ghost = document.createElement(`span`);
-            ghost.style.cssText = `box-sizing:content-box;display:inline-block;height:0;`
-                + `overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap;`
-                + `font-family:${ style.fontFamily };font-size:${ style.fontSize };`
-                + `padding:${ style.padding }`;
-            ghost.textContent = input.value;
-            document.body.appendChild(ghost);
-            input.style.width = ghost.offsetWidth + 4
-                + (input.getAttribute("type") === "number" ? 20 : 0) + "px";
-            document.body.removeChild(ghost);
-        }
-
-        input.style.minWidth = "30px";
-        input.style.maxWidth = "90%";
-        input.addEventListener(`input`, () => updateInput());
-        updateInput();
-
-        return input;
-
-    });
+    sourceSettings.init();
+    tabularViewSettings.init();
 
 }

src/static/index.html

@@ -0,0 +1,20 @@
+import { setInputValue } from "./values.js";
+
+function bind (elements) {
+    for (let e of elements) {
+        setInputValue(document.getElementById(e)).addEventListener(`change`, setInputValue);
+    }
+}
+
+export function init () {
+
+    bind([
+        "settings.host",
+        "settings.port",
+        "settings.domain",
+        "settings.queryType",
+        "settings.seed",
+        "settings.webAppName"
+    ]);
+
+}