#279 Time Improvements (#280)

* Configure global start end time, Partial local vector time filter * #279 Time Improvements
NASA-AMMOS · Nov 21, 2022 · 1ec3a54 · 1ec3a54
1 parent 1370cb0
commit 1ec3a54
Show file tree

Hide file tree

Showing 8 changed files with 390 additions and 139 deletions.
diff --git a/config/js/config.js b/config/js/config.js
diff --git a/src/essence/Ancillary/TimeControl.js b/src/essence/Ancillary/TimeControl.js
@@ -182,6 +182,8 @@ var TimeControl = {
         if (typeof layer == 'string') {
             layer = L_.layersNamed[layer]
         }
+        if (L_.layersGroup[layer.name] === null) return
+
         var layerTimeFormat = d3.utcFormat(layer.time.format)
         layer.time.current = TimeControl.currentTime // keeps track of when layer was refreshed
 
@@ -197,24 +199,38 @@ var TimeControl = {
         } else {
             // replace start/endtime keywords
             if (layer.time && layer.time.enabled == true) {
-                var originalUrl = layer.url
-                layer.url = layer.url
-                    .replace(
-                        /{starttime}/g,
-                        layerTimeFormat(Date.parse(layer.time.start))
-                    )
-                    .replace(
-                        /{endtime}/g,
-                        layerTimeFormat(Date.parse(layer.time.end))
-                    )
+                if (layer.time.type === 'global') {
+                    var originalUrl = layer.url
+                    layer.url = layer.url
+                        .replace(
+                            /{starttime}/g,
+                            layerTimeFormat(Date.parse(layer.time.start))
+                        )
+                        .replace(
+                            /{endtime}/g,
+                            layerTimeFormat(Date.parse(layer.time.end))
+                        )
+                }
             }
-            // refresh map
-            if (L_.toggledArray[layer.name] || evenIfOff) {
-                await Map_.refreshLayer(layer)
+            if (
+                layer.type === 'vector' &&
+                layer.time.type === 'local' &&
+                layer.time.endProp != null
+            ) {
+                L_.timeFilterVectorLayer(
+                    layer.name,
+                    new Date(layer.time.start).getTime(),
+                    new Date(layer.time.end).getTime()
+                )
+            } else {
+                // refresh map
+                if (L_.toggledArray[layer.name] || evenIfOff) {
+                    await Map_.refreshLayer(layer)
+                }
+                // put start/endtime keywords back
+                if (layer.time && layer.time.enabled == true)
+                    layer.url = originalUrl
             }
-            // put start/endtime keywords back
-            if (layer.time && layer.time.enabled == true)
-                layer.url = originalUrl
         }
 
         return true
@@ -235,11 +251,7 @@ var TimeControl = {
         var updatedLayers = []
         for (let layerName in L_.layersNamed) {
             const layer = L_.layersNamed[layerName]
-            if (
-                layer.time &&
-                layer.time.enabled == true &&
-                layer.time.type == 'global'
-            ) {
+            if (layer.time && layer.time.enabled == true) {
                 layer.time.start = TimeControl.startTime
                 layer.time.end = TimeControl.currentTime
                 d3.select('.starttime.' + layer.name.replace(/\s/g, '')).text(
@@ -249,7 +261,7 @@ var TimeControl = {
                     layer.time.end
                 )
                 updatedLayers.push(layer.name)
-                if (layer.type == 'tile') {
+                if (layer.type === 'tile') {
                     TimeControl.setLayerWmsParams(layer)
                 }
             }

diff --git a/src/essence/Ancillary/TimeUI.css b/src/essence/Ancillary/TimeUI.css
@@ -6,7 +6,7 @@
     bottom: -40px;
     left: 0px;
     margin: 0;
-    z-index: 777;
+    z-index: 77777;
     font-size: 14px;
     opacity: 0;
     pointer-events: none;
@@ -51,6 +51,7 @@
     flex: 1;
     display: flex;
     justify-content: space-between;
+    position: relative;
 }
 
 #mmgisTimeUI input {
@@ -92,9 +93,16 @@
     display: flex;
     flex: 1;
     position: relative;
-    /*cursor: ew-resize;*/
     user-select: none;
 }
+#mmgisTimeUITimelineFixedStartSlider {
+    position: absolute;
+    left: 200px;
+    width: 4px;
+    height: 40px;
+    background: var(--color-h);
+    pointer-events: none;
+}
 #mmgisTimeUITimelineSlider {
     width: 100%;
 }
@@ -105,12 +113,14 @@
 }
 #mmgisTimeUITimelineSlider .rangeSlider {
     height: 2px;
-    margin: 20px 6px 20px 8px;
+    margin: 20px 0px 20px 4px;
     background: var(--color-a2);
 }
 #mmgisTimeUITimelineSlider .rangeHandle:first-child {
     display: none;
     pointer-events: none;
+    width: 0px;
+    padding: 0px;
 }
 #mmgisTimeUITimelineSlider .rangeHandle {
     top: 0px;
@@ -162,7 +172,7 @@
     font-size: 12px;
     line-height: 22px;
     text-transform: capitalize;
-    color: var(--color-a7);
+    color: var(--color-a5);
 }
 #mmgisTimeUIStartWrapper {
 }
@@ -210,3 +220,19 @@
     height: 100%;
     transition: margin-top 0.2s ease-in-out;
 }
+
+#mmgisTimeUIRateDropdown {
+    width: 60px;
+}
+#mmgisTimeUIRateDropdown .dropy__title i {
+    color: var(--color-a5);
+}
+#mmgisTimeUIRateDropdown .dropy__title span {
+    font-size: 12px;
+    padding: 14px 0px 14px 12px;
+    color: var(--color-a5);
+}
+#mmgisTimeUIRateDropdown li a {
+    font-size: 13px;
+    padding: 5px 8px;
+}