keepQueryTypeInView and keepSeedInView separate options add

Author: nikitaeverywhere

README.md

@@ -59,7 +59,8 @@ represented in the table below.
 | `domain` | `1` | iKnow domain name. |
 | `queryType` | `related` | iKnow query type. Can be `related` or `similar`. |
 | `seed` | `crew` | Seed string. |
-| `keepSeedInView` | `false` | A `boolean` value determining whether the `queryType` and `seed` settings will be displayed on the screen all the time. |
+| `keepQueryTypeInView` | `true` | A `boolean` value determining whether the `queryType` setting will be displayed on the screen all the time. |
+| `keepSeedInView` | `false` | A `boolean` value determining whether the `seed` setting will be displayed on the screen all the time. |
 | `tabularShowHiddenNodes` | `false` | A `boolean` value determining whether to show entities hidden behind `X more` node in the table. |
 
 URL example: `http://.../index.html?domain=1&queryType=similar&seed=plane`

package.json

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

src/static/index.html

@@ -134,6 +134,9 @@
     <div id="settings">
         <i id="closeSettingsToggle" class="ui icon-close"></i>
         <h1>General Settings</h1>
+        <div class="settingsNotice">
+            Changing any settings will refresh all the data.
+        </div>
         <div>
             <div>
                 <b>Data source:</b>
@@ -145,12 +148,15 @@ <h1>General Settings</h1>
                 />/<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>
+                    </select></span><span id="seedSetting"><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
+                    Keep seed option in view
+                </label>
+                <label>
+                    <input type="checkbox" id="settings.keepQueryTypeInView"/>
+                    Keep query type option in view
                 </label>
             </div>
         </div>
@@ -175,6 +181,9 @@ <h1>Tabular View Settings</h1>
             iKnow Entity Browser v<!-- @echo package.version -->
         </div>
     </div>
+    <div id="preservedToolbar">
+
+    </div>
 </div>
 </body>
 </html>

src/static/js/settings/index.js

@@ -3,13 +3,14 @@ import * as graph from "../graph";
 import * as sourceSettings from "./sourceSettings";
 import * as tabularViewSettings from "./tabularViewSettings";
 import * as storage from "../storage";
-import { getChanges, applyChanges, init as initValues } from "./values";
+import { getChanges, applyChanges, init as initValues, applyFixedClasses } from "./values";
 import { makeAutosizable } from "../utils";
 
 function toggleSettings (uiStateModel) {
     uiStateModel.settingsToggled = !uiStateModel.settingsToggled;
     d3.select("#settings").classed("active", uiStateModel.settingsToggled);
     d3.select("#windows").classed("offScreen", uiStateModel.settingsToggled);
+    applyFixedClasses();
     if (!uiStateModel.settingsToggled && getChanges().length !== 0) {
         applyChanges();
         model.update(() => graph.update(true));
@@ -27,7 +28,7 @@ export function init () {
         .on("click", toggleSettings);
 
     tabularViewSettings.init();
-    initValues();
+    initValues(model.uiState);
     sourceSettings.init();
 
     // make inputs auto-sizable

src/static/js/settings/sourceSettings.js

@@ -22,6 +22,7 @@ export function init () {
         "settings.queryType",
         "settings.seed",
         "settings.webAppName",
+        "settings.keepQueryTypeInView",
         "settings.keepSeedInView",
         "settings.tabularShowHiddenNodes"
     ]);
@@ -34,7 +35,7 @@ export function init () {
     }
 
     document.getElementById("settings.queryType").addEventListener(`change`, () => {
-        if (!getOption("keepSeedInView") || model.uiState.settingsToggled)
+        if (!getOption("keepQueryTypeInView") || model.uiState.settingsToggled)
             return;
         apply();
     });

src/static/js/settings/values.js

@@ -11,6 +11,7 @@ const settingsTypes = {
     domain: String,
     queryType: new Set(["similar", "related"]),
     seed: String,
+    keepQueryTypeInView: Boolean,
     keepSeedInView: Boolean,
     tabularShowHiddenNodes: Boolean
 };
@@ -22,6 +23,7 @@ const settings = { // assign defaults here
     domain: "1",
     queryType: "related",
     seed: "crew",
+    keepQueryTypeInView: true,
     keepSeedInView: false,
     tabularShowHiddenNodes: false,
     tabularColumns: [
@@ -94,13 +96,21 @@ export function setOption (options, value) {
     saveSettings();
 }
 
-function applyFixedClass () {
-    document.getElementById("querySetting")
-        .classList.toggle("fixed", !!settings["keepSeedInView"]);
+let preservedToolbarElement = null,
+    querySettingElement = null,
+    seedSettingElement = null,
+    uiState = null;
+export function applyFixedClasses () {
+    let queryParent = !uiState.settingsToggled && settings["keepQueryTypeInView"]
+            ? preservedToolbarElement : querySettingElement,
+        seedParent = !uiState.settingsToggled && settings["keepSeedInView"]
+            ? preservedToolbarElement : seedSettingElement;
+    queryParent.appendChild(document.getElementById("settings.queryType"));
+    seedParent.appendChild(document.getElementById("settings.seed"));
 }
 
 function saveSettings () {
-    applyFixedClass();
+    applyFixedClasses();
     storage.save(STORAGE_KEY, settings);
 }
 
@@ -123,7 +133,7 @@ export function setInputValue (e = {}) {
     return e;
 }
 
-export function init () {
+export function init (uiSt) {
     let params = url.getSearchString();
     for (let param in params) {
         let type = getObjProp(settingsTypes, param.split(".")),
@@ -137,5 +147,9 @@ export function init () {
             type instanceof Set ? (type.has(v) ? v : settings[param]) :
             settings[param];
     }
-    applyFixedClass();
+    uiState = uiSt;
+    preservedToolbarElement = document.getElementById("preservedToolbar");
+    querySettingElement = document.getElementById("querySetting");
+    seedSettingElement = document.getElementById("seedSetting");
+    applyFixedClasses();
 }

src/static/js/tabular/index.js

@@ -169,7 +169,7 @@ function updateHeaders (dataProp = sorting.properties.join(".")) {
 }
 
 function updateToolbarsWidth () {
-    document.getElementById("querySetting").style.width =
+    document.getElementById("preservedToolbar").style.width =
         document.getElementById("toolbarIcons").style.width =
             (document.body.getBoundingClientRect().width - (model.uiState.tabularToggled
                 ? document.getElementById("table").getBoundingClientRect().width : 0))

src/static/scss/basic.scss

@@ -100,7 +100,7 @@ input[type=button], button {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    margin: 0 0 .3em 0;
+    margin: .3em 0;
 }
 
 .loading {

src/static/scss/index.scss

@@ -34,4 +34,5 @@ html, body {
 @import "tabular";
 @import "settings";
 @import "interface";
-@import "tooltip";
+@import "tooltip";
+@import "preservedToolbar";

src/static/scss/mixins.scss

@@ -39,6 +39,14 @@
     transform: $options;
 }
 
+@mixin pointer-events ($options) {
+    -webkit-pointer-events: $options;
+    -moz-pointer-events: $options;
+    -ms-pointer-events: $options;
+    -o-pointer-events: $options;
+    pointer-events: $options;
+}
+
 @mixin animation-delay ($options) {
     -webkit-animation-delay: $options;
     -moz-animation-delay: $options;