Display seed string in view option

Author: nikitaeverywhere

package.json

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

src/static/index.html

@@ -126,16 +126,21 @@ <h1>General Settings</h1>
         <div>
             <div>
                 <b>Data source:</b>
-                <input type="text" value="http://localhost" id="settings.host" autosize placeholder="http://host.name"/>
-                : <input id="settings.port" autosize type="number" placeholder="port" value="57772"/>
-                / <input id="settings.webAppName" autosize type="text" placeholder="app name" value="EntityBrowser"/>
-                /domain/ <input id="settings.domain" autosize type="text" placeholder="domain" value="1"/>
-                /
-                <select id="settings.queryType" title="Query Type">
-                    <option value="related">related</option>
-                    <option value="similar">similar</option>
-                </select>
-                / <input autosize placeholder="seed string" id="settings.seed" type="text" value="crew"/>
+                <input type="text" value="http://localhost" id="settings.host" autosize
+                placeholder="http://host.name"/>:<input id="settings.port" autosize
+                type="number" placeholder="port" value="57772"/>/<input id="settings.webAppName"
+                autosize type="text" placeholder="app name" value="EntityBrowser"/>/domain/<input
+                id="settings.domain" autosize type="text" placeholder="domain" value="1"/>/<span
+                id="querySetting"><select id="settings.queryType" title="Query Type">
+                        <option value="related">related</option>
+                        <option value="similar">similar</option>
+                    </select>/ <input autosize placeholder="seed string" id="settings.seed"
+                type="text" value="crew"/>
+                </span>
+                <label>
+                    <input type="checkbox" id="settings.keepSeedInView"/>
+                    Keep seed string setting in view
+                </label>
             </div>
         </div>
         <h1>Tabular View Settings</h1>

src/static/js/graph/index.js

@@ -64,7 +64,6 @@ export function translateBy (x = 0, y = 0) {
 }
 
 export function focusOn (x = 0, y = 0) {
-    console.log(x, y);
     svg.transition()
         .duration(300)
         .call(
@@ -333,6 +332,7 @@ export function update (g = lastGraph, reset = false) {
     if (reset) {
         for (let i = 100; i > 0; --i) simulation.tick();
         updateSelection();
+        resetZoom();
     }
 
 }

src/static/js/settings/index.js

@@ -3,7 +3,7 @@ import * as graph from "../graph";
 import * as sourceSettings from "./sourceSettings";
 import * as tabularViewSettings from "./tabularViewSettings";
 import * as storage from "../storage";
-import { getChanges, applyChanges } from "./values";
+import { getChanges, applyChanges, init as initValues } from "./values";
 import { makeAutosizable } from "../utils";
 
 function toggleSettings (uiStateModel) {
@@ -26,6 +26,10 @@ export function init () {
         .data([model.uiState])
         .on("click", toggleSettings);
 
+    sourceSettings.init();
+    tabularViewSettings.init();
+    initValues();
+
     // make inputs auto-sizable
     [].slice.call(document.querySelectorAll(`input[autosize]`)).forEach((i) => makeAutosizable(i));
     document.getElementById("settings.resetSettings").addEventListener("click", () => {
@@ -35,7 +39,4 @@ export function init () {
         location.reload();
     });
 
-    sourceSettings.init();
-    tabularViewSettings.init();
-
 }

src/static/js/settings/sourceSettings.js

@@ -1,8 +1,15 @@
-import { setInputValue } from "./values.js";
+import { setInputValue, getOption, getChanges, applyChanges } from "./values.js";
+import * as model from "../model"
+import * as graph from "../graph";
 
 function bind (elements) {
     for (let e of elements) {
-        setInputValue(document.getElementById(e)).addEventListener(`change`, setInputValue);
+        let el = document.getElementById(e);
+        setInputValue(el);
+        if (el.getAttribute("type") === "text")
+            el.addEventListener(`input`, setInputValue);
+        else
+            el.addEventListener(`change`, setInputValue);
     }
 }
 
@@ -14,7 +21,27 @@ export function init () {
         "settings.domain",
         "settings.queryType",
         "settings.seed",
-        "settings.webAppName"
+        "settings.webAppName",
+        "settings.keepSeedInView"
     ]);
 
+    function apply () {
+        if (getChanges().length !== 0) {
+            applyChanges();
+            model.update(() => graph.update(true));
+        }
+    }
+
+    document.getElementById("settings.queryType").addEventListener(`change`, () => {
+        if (!getOption("keepSeedInView") || model.uiState.settingsToggled)
+            return;
+        apply();
+    });
+
+    document.getElementById("settings.seed").addEventListener(`blur`, () => {
+        if (!getOption("keepSeedInView") || model.uiState.settingsToggled)
+            return;
+        apply();
+    });
+
 }

src/static/js/settings/values.js

@@ -10,6 +10,7 @@ let settings = { // assign defaults here
     domain: "1",
     queryType: "related",
     seed: "crew",
+    keepSeedInView: false,
     tabularColumns: [
         {
             label: "ID",
@@ -80,7 +81,13 @@ export function setOption (options, value) {
     saveSettings();
 }
 
+function applyFixedClass () {
+    document.getElementById("querySetting")
+        .classList.toggle("fixed", !!settings["keepSeedInView"]);
+}
+
 function saveSettings () {
+    applyFixedClass();
     storage.save(STORAGE_KEY, settings);
 }
 
@@ -90,14 +97,19 @@ export function setInputValue (e = {}) {
     if (!el)
         return e;
     if ((id = el.getAttribute(`id`)).indexOf(`settings.`) === 0) {
-        let key = id.replace(/^settings\./, ``);
+        let key = id.replace(/^settings\./, ``),
+            prop = el.getAttribute("type") === "checkbox" ? "checked" : "value";
         if (isEvent) {
-            settings[key] = el.value;
-            changes.push([key, el.value]);
+            settings[key] = el[prop];
+            changes.push([key, el[prop]]);
             saveSettings();
         } else {
-            el.value = settings[key];
+            el[prop] = settings[key];
         }
     }
     return e;
+}
+
+export function init () {
+    applyFixedClass();
 }

src/static/js/tabular/index.js

@@ -138,17 +138,18 @@ function updateHeaders (dataProp = sorting.properties.join(".")) {
     head.appendChild(document.createElement("th"));
 }
 
-function updateToolbarWidth () {
-    document.getElementById("toolbarIcons").style.width =
-        (document.body.getBoundingClientRect().width - (model.uiState.tabularToggled
-            ? document.getElementById("table").getBoundingClientRect().width : 0))
-        + "px";
+function updateToolbarsWidth () {
+    document.getElementById("querySetting").style.width =
+        document.getElementById("toolbarIcons").style.width =
+            (document.body.getBoundingClientRect().width - (model.uiState.tabularToggled
+                ? document.getElementById("table").getBoundingClientRect().width : 0))
+            + "px";
 }
 
 export function init () {
 
-    window.addEventListener("resize", updateToolbarWidth);
-    updateToolbarWidth();
+    window.addEventListener("resize", updateToolbarsWidth);
+    updateToolbarsWidth();
 
     d3.select("#tableToggle")
         .data([model.uiState])
@@ -158,7 +159,7 @@ export function init () {
             d3.select("#table").classed("active", d.tabularToggled);
             if (d.tabularToggled)
                 updateAll();
-            updateToolbarWidth();
+            updateToolbarsWidth();
             let w = document.getElementById("table").getBoundingClientRect().width / 2;
             translateBy(d.tabularToggled ? -w : w);
         });

src/static/scss/basic.scss

@@ -37,6 +37,10 @@ input[type=text], input[type=number] {
     text-shadow: inherit;
 }
 
+input[type=checkbox], label {
+    cursor: pointer;
+}
+
 select {
 
     cursor: pointer;

src/static/scss/settings.scss

@@ -15,6 +15,20 @@
 
     }
 
+    &:not(.active) {
+
+        #querySetting.fixed {
+            position: absolute;
+            left: 0;
+            bottom: -20px;
+            width: 100%;
+            text-align: center;
+            display: block;
+            z-index: $zIndexInterface - 2;
+        }
+
+    }
+
 }
 
 #settings\.tabularColumns {

src/static/scss/tabular.scss

@@ -14,6 +14,7 @@ $headerHeight: 36px;
     background: white;
     overflow: visible;
     box-shadow: $defaultShadow;
+    z-index: $zIndexInterface - 1;
     @include transition($defaultTransition);
     @include transform(translate(100%,0));
     &.active {