Specifying settings via URL parameters feature, reset button styling

Author: nikitaeverywhere

package.json

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

src/static/js/settings/index.js

@@ -26,9 +26,9 @@ export function init () {
         .data([model.uiState])
         .on("click", toggleSettings);
 
-    sourceSettings.init();
     tabularViewSettings.init();
     initValues();
+    sourceSettings.init();
 
     // make inputs auto-sizable
     [].slice.call(document.querySelectorAll(`input[autosize]`)).forEach((i) => makeAutosizable(i));

src/static/js/settings/sourceSettings.js

@@ -43,5 +43,9 @@ export function init () {
             return;
         apply();
     });
-
+    document.getElementById("settings.seed").addEventListener(`keydown`, (e) => {
+        if (e.keyCode !== 13)
+            return;
+        document.getElementById("settings.seed").blur();
+    });
 }

src/static/js/settings/values.js

@@ -1,11 +1,22 @@
 import * as storage from "../storage";
 import { getObjProp } from "../utils";
+import * as url from "../url";
 
 const STORAGE_KEY = "settings";
 
-let settings = { // assign defaults here
+const settingsTypes = {
+    host: String,
+    port: Number,
+    webAppName: String,
+    domain: String,
+    queryType: new Set(["similar", "related"]),
+    seed: String,
+    keepSeedInView: Boolean
+};
+
+const settings = { // assign defaults here
     host: "http://localhost",
-    port: "57772",
+    port: 57772,
     webAppName: "EntityBrowser",
     domain: "1",
     queryType: "related",
@@ -111,5 +122,18 @@ export function setInputValue (e = {}) {
 }
 
 export function init () {
+    let params = url.getSearchString();
+    for (let param in params) {
+        let type = getObjProp(settingsTypes, param.split(".")),
+            v = params[param];
+        if (typeof type === "undefined")
+            continue;
+        settings[param] =
+            type === String ? v :
+            type === Number ? parseFloat(v) :
+            type === Boolean ? (v === "false" ? false : v === "" ? true : !!v) :
+            type instanceof Set ? (type.has(v) ? v : settings[param]) :
+            settings[param];
+    }
     applyFixedClass();
 }

src/static/js/url.js

@@ -0,0 +1,18 @@
+const getParams = query => {
+    if (!query) {
+        return {};
+    }
+    return (/^[?#]/.test(query) ? query.slice(1) : query)
+        .split('&')
+        .reduce((params, param) => {
+            let [ key, value ] = param.split('=');
+            params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
+            return params;
+        }, {});
+};
+
+let params = getParams(location.search);
+
+export function getSearchString () {
+    return params;
+}

src/static/js/utils.js

@@ -92,7 +92,6 @@ export function httpGet (theUrl, callback)  {
             try {
                 data = JSON.parse(xmlHttp.responseText);
             } catch (e) {
-                console.error(e, xmlHttp.responseText);
                 callback({ error: e });
                 return;
             }

src/static/scss/const.scss

@@ -5,11 +5,12 @@ $defaultShadow: 0 0 2px gray;
 $colorA: #02ad8b;
 $colorB: #e08f00;
 $colorC: #4c79c1;
+$colorD: #ff554b;
 
 $highlightColor: rgb(255, 245, 161);
 $relatedColor: #ffb840;
 $similarColor: #7ca1ff;
-$otherColor: red;
+$otherColor: $colorD;
 
 $zIndexInterface: 100;
 $zIndexOnTop: 200;

src/static/scss/settings.scss

@@ -55,6 +55,10 @@
 
 }
 
+#settings\.resetSettings {
+    background-color: $colorD;
+}
+
 #closeSettingsToggle {
 
     position: absolute;