#327 Assorted UI Improvements (#328)

config/js/config.js

@@ -564,6 +564,9 @@ function initialize() {
                 if (cData.look && cData.look.miscellaneous != false) {
                   $("#tab_look #look_miscellaneous").prop("checked", true);
                 }
+                if (cData.look && cData.look.settings != false) {
+                  $("#tab_look #look_settings").prop("checked", true);
+                }
 
                 //look colors
                 $("#tab_look #look_primarycolor").val(
@@ -2099,6 +2102,7 @@ function save() {
     json.look["miscellaneous"] = $("#tab_look #look_miscellaneous").prop(
       "checked"
     );
+    json.look["settings"] = $("#tab_look #look_settings").prop("checked");
     //look colors
     json.look["primarycolor"] = $("#tab_look #look_primarycolor").val();
     json.look["secondarycolor"] = $("#tab_look #look_secondarycolor").val();
@@ -2679,7 +2683,8 @@ function layerPopulateVariable(modalId, layerType) {
             },
           };
     } else if (layerType == "query") {
-      currentLayerVars.useKeyAsName = currentLayerVars.useKeyAsName || "prop";
+      currentLayerVars.useKeyAsName =
+        currentLayerVars.useKeyAsName || "prop || [prop1, prop2, ...]";
       currentLayerVars.links = currentLayerVars.links || [
         {
           name: "example",
@@ -2713,7 +2718,8 @@ function layerPopulateVariable(modalId, layerType) {
         size: 1000,
       };
     } else {
-      currentLayerVars.useKeyAsName = currentLayerVars.useKeyAsName || "prop";
+      currentLayerVars.useKeyAsName =
+        currentLayerVars.useKeyAsName || "prop || [prop1, prop2, ...]";
       currentLayerVars.hideMainFeature =
         currentLayerVars.hideMainFeature || false;
 

docs/pages/Configure/Layers/Model/Model.md

@@ -154,7 +154,7 @@ Vector Layer Raw Variables
 
 ```json
 {
-  "useKeyAsName": "Name",
+  "useKeyAsName": "propKey || [propKey1, propKey2, ...]",
   "markerAttachments": {
     "model": {
       "pathProp": "images.0.url",

docs/pages/Configure/Layers/Query/Query.md

@@ -72,7 +72,7 @@ Example:
 
 ```javascript
 {
-    "useKeyAsName": "name",
+    "useKeyAsName": "propKey || [propKey1, propKey2, ...]",
     "datasetLinks": [
         {
             "prop": "{prop}",
@@ -116,7 +116,7 @@ Example:
 }
 ```
 
-- `useNameAsKey`: The property key whose value should be the hover text of each feature. If left unset, the hover key and value will be the first one listed in the feature's properties.
+- `useKeyAsName`: The property key whose value should be the hover text of each feature. If left unset, the hover key and value will be the first one listed in the feature's properties. This may also be an array of keys.
 - `links`: Configure deep links to other sites based on the properties on a selected feature. This requires the "Minimalist" option in the Look Tab to be unchecked. Upon clicking a feature, a list of deep links are put into the top bar and can be clicked on to navigate to any other page.
   - `name`: The name of the deep link. It should be unique.
   - `link`: A url template. Curly brackets are included. On feature click, all `{prop}` are replaced with the corresponding `features[i].properties.prop` value. Multiple `{prop}` are supported as are access to nested props using dot notation `{stores.food.candy}`.

docs/pages/Configure/Layers/Vector/Vector.md

@@ -126,7 +126,7 @@ Example:
 
 ```javascript
 {
-    "useKeyAsName": "name",
+    "useKeyAsName": "propKey || [propKey1, propKey2, ...]",
     "hideMainFeature": false,
     "datasetLinks": [
         {
@@ -235,7 +235,7 @@ Example:
 }
 ```
 
-- `useNameAsKey`: The property key whose value should be the hover text of each feature. If left unset, the hover key and value will be the first one listed in the feature's properties.
+- `useKeyAsName`: The property key whose value should be the hover text of each feature. If left unset, the hover key and value will be the first one listed in the feature's properties. This may also be an array of keys.
 - `hideMainFeature`: If true, hides all typically rendered features. This is useful if showing only `*Attachments` sublayers is desired. Default false
 - `datasetLinks`: Datasets are csvs uploaded from the "Manage Datasets" page accessible on the lower left. Every time a feature from this layer is clicked with datasetLinks configured, it will request the data from the server and include it with it's regular geojson properties. This is especially useful when single features need a lot of metadata to perform a task as it loads it only as needed.
   - `prop`: This is a property key already within the features properties. It's value will be searched for in the specified dataset column.

src/essence/Ancillary/CursorInfo.js

@@ -21,13 +21,15 @@ var CursorInfo = {
             .style('position', 'absolute')
             .style('left', 0)
             .style('top', 0)
-            .style('padding', '6px 9px 6px 9px')
+            .style('padding', '5px 9px 4px 9px')
+            .style('line-height', '22px')
             .style('border', '1px solid #17586E')
             .style('border-radius', '3px')
             .style('background-color', 'var(--color-a)')
             .style('color', '#DCDCDC')
             .style('font-weight', 'bold')
             .style('font-size', '16px')
+            .style('white-space', 'pre-wrap')
             //.style( 'box-shadow', '0px 5px 15px #000' )
             .style('z-index', '60000000')
             .style('pointer-events', 'none')
@@ -80,8 +82,24 @@ var CursorInfo = {
                     : 'none'
             })
             .style('display', 'block')
-        if (asHTML) CursorInfo.cursorInfoDiv.html(message)
-        else CursorInfo.cursorInfoDiv.text(message)
+        if (
+            typeof message === 'object' &&
+            !Array.isArray(message) &&
+            message !== null
+        ) {
+            let messageFormatted = ''
+            const keys = Object.keys(message)
+            keys.forEach((k, idx) => {
+                if (typeof k === 'string')
+                    messageFormatted += `<span style="color: var(--color-a5);">${k.capitalizeFirstLetter()}:</span> ${
+                        message[k]
+                    }${idx === keys.length - 1 ? '' : '\n'}`
+            })
+            CursorInfo.cursorInfoDiv.html(messageFormatted)
+        } else {
+            if (asHTML) CursorInfo.cursorInfoDiv.html(message)
+            else CursorInfo.cursorInfoDiv.text(message)
+        }
 
         if (time != null) {
             setTimeout(function () {

src/essence/Ancillary/TimeUI.css

@@ -105,10 +105,18 @@
     pointer-events: none;
 }
 #mmgisTimeUITimelineSlider .rangeSlider {
-    height: 2px;
-    margin: 20px 0px 20px 4px;
+    height: 0px;
+    margin: 21px 0px 21px 4px;
     background: var(--color-a2);
 }
+#mmgisTimeUITimelineSlider .rangeSlider:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    background: var(--color-a3);
+    pointer-events: none;
+}
 #mmgisTimeUITimelineSlider .rangeHandle {
     top: 0px;
     width: 20px;
@@ -140,23 +148,27 @@
     position: absolute;
     top: 0;
     display: flex;
+    pointer-events: none;
 }
 .mmgisTimeUITick .mmgisTimeUITickSmall {
     height: 30px;
     background: var(--color-a4);
     width: 1px;
+    pointer-events: none;
 }
 .mmgisTimeUITick .mmgisTimeUITickBig {
     height: 40px;
     background: var(--color-a3);
     width: 1px;
+    pointer-events: none;
 }
 .mmgisTimeUITick .mmgisTimeUITickLabel {
     height: 40px;
     line-height: 20px;
     padding-left: 4px;
     font-size: 13px;
     color: var(--color-a7);
+    pointer-events: none;
 }
 
 .mmgisTimeUITick .mmgisTimeUITickLabel span {
@@ -244,3 +256,13 @@
     font-size: 13px;
     padding: 5px 8px;
 }
+
+#mmgisTimeUIStartWrapperFake,
+#mmgisTimeUIEndWrapperFake {
+    position: absolute;
+    pointer-events: none;
+    display: none;
+}
+#mmgisTimeUIEndWrapperFake {
+    right: 0;
+}