From 50472e1b355e6b9b0cc3a7238b187f4a3f5777cf Mon Sep 17 00:00:00 2001
From: Tariq Soliman <Tariq.K.Soliman@jpl.nasa.gov>
Date: Thu, 7 Sep 2023 18:05:17 -0700
Subject: [PATCH] #425 Description Item fixes (#426)

* #425 Description Item fixes

* Remove outdated comment
---
 src/css/mmgisUI.css                               | 13 +++++++++++++
 src/essence/Ancillary/Description.js              | 15 ++++++++++-----
 src/essence/Basics/Layers_/Layers_.js             |  8 ++++++++
 .../Basics/UserInterface_/UserInterface_.css      | 11 ++++++++++-
 .../Basics/UserInterface_/UserInterface_.js       |  7 ++++++-
 5 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/css/mmgisUI.css b/src/css/mmgisUI.css
index 768fc0a8..7b29f14c 100644
--- a/src/css/mmgisUI.css
+++ b/src/css/mmgisUI.css
@@ -769,6 +769,19 @@
     background-color: var(--color-a2);
 }
 
+.hideScrollbar::-webkit-scrollbar-track {
+    background-color: Transparent;
+}
+
+.hideScrollbar::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+}
+
+.hideScrollbar::-webkit-scrollbar-thumb {
+    border-radius: 0px;
+}
+
 ::-webkit-scrollbar {
     width: 14px;
     height: 14px;
diff --git a/src/essence/Ancillary/Description.js b/src/essence/Ancillary/Description.js
index 4fa1a534..f23c3d52 100644
--- a/src/essence/Ancillary/Description.js
+++ b/src/essence/Ancillary/Description.js
@@ -69,18 +69,23 @@ const Description = {
         this.inited = true
         if (this.waitingOnUpdate) this.updateInfo()
     },
-    updateInfo() {
-        this.waitingOnUpdate = false
-        if (!this.inited) {
-            this.waitingOnUpdate = true
-            return
+    updateInfo(force) {
+        if (force !== true) {
+            this.waitingOnUpdate = false
+            if (!this.inited) {
+                this.waitingOnUpdate = true
+                return
+            }
         }
 
+        this.descInfoCont.html('')
+
         let infos = []
 
         for (let layer in this.L_.layers.data) {
             let l = this.L_.layers.data[layer]
             if (
+                this.L_.layers.on[layer] === true &&
                 this.L_.layers.layer[layer] &&
                 l.hasOwnProperty('variables') &&
                 l.variables.hasOwnProperty('info') &&
diff --git a/src/essence/Basics/Layers_/Layers_.js b/src/essence/Basics/Layers_/Layers_.js
index 3228f8f2..d08f2a1e 100644
--- a/src/essence/Basics/Layers_/Layers_.js
+++ b/src/essence/Basics/Layers_/Layers_.js
@@ -228,6 +228,14 @@ const L_ = {
         Object.keys(L_._onLayerToggleSubscriptions).forEach((k) => {
             L_._onLayerToggleSubscriptions[k](s.name, !on)
         })
+
+        // Always reupdate layer infos at the end to keep them in sync
+        Description.updateInfo()
+
+        // Deselect active feature if its layer is being turned off
+        if (L_.activeFeature && L_.activeFeature.layerName === s.name && on) {
+            L_.setActiveFeature(null)
+        }
     },
     toggleLayerHelper: async function (
         s,
diff --git a/src/essence/Basics/UserInterface_/UserInterface_.css b/src/essence/Basics/UserInterface_/UserInterface_.css
index a3a9f28d..241213d6 100644
--- a/src/essence/Basics/UserInterface_/UserInterface_.css
+++ b/src/essence/Basics/UserInterface_/UserInterface_.css
@@ -24,11 +24,20 @@
     pointer-events: auto;
 }
 
+#main-container > #topBar > #topBarLeft {
+    flex: 1;
+    pointer-events: none;
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin-right: 8px;
+}
 #main-container > #topBar > #topBarLeft,
 #main-container > #topBar > #topBarRight {
     display: flex;
 }
-
+#main-container > #topBar #topBarSecondary {
+    flex: 1;
+}
 #main-container > #topBar #topBarMain,
 #main-container > #topBar #topBarSecondary {
     display: flex;
diff --git a/src/essence/Basics/UserInterface_/UserInterface_.js b/src/essence/Basics/UserInterface_/UserInterface_.js
index 0d623020..e1b38268 100644
--- a/src/essence/Basics/UserInterface_/UserInterface_.js
+++ b/src/essence/Basics/UserInterface_/UserInterface_.js
@@ -60,7 +60,7 @@ var UserInterface = {
         // prettier-ignore
         const topBarMarkup = [
             "<div id='topBar'>",
-                "<div id='topBarLeft'>",
+                "<div id='topBarLeft' class='hideScrollbar'>",
                     "<div id='topBarMain'>",
                         "<div id='topBarTitle'>",
                             `<div id='topBarTitleName' tabindex='200'>`,
@@ -84,6 +84,11 @@ var UserInterface = {
         //TopBar
         $('#main-container').append(topBarMarkup)
 
+        $('#topBarLeft').on('wheel', function (e) {
+            e.preventDefault()
+            this.scrollLeft += e.originalEvent.deltaY
+        })
+
         this.rightPanel = d3
             .select('body')
             .append('div')