#729 Default configuration for live mode (#730)

Author: tariqksoliman

configure/src/core/Maker.js

@@ -406,9 +406,10 @@ const getComponent = (
           {inlineHelp ? (
             <>
               {inner}
-              <Typography className={c.subtitle2}>
-                {com.description || ""}
-              </Typography>
+              <div
+                className={c.subtitle2}
+                dangerouslySetInnerHTML={{ __html: com.description || "" }}
+              ></div>
             </>
           ) : (
             <Tooltip title={com.description || ""} placement="top" arrow>
@@ -708,9 +709,10 @@ const getComponent = (
           {inlineHelp ? (
             <>
               {inner}
-              <Typography className={c.subtitle2}>
-                {com.description || ""}
-              </Typography>
+              <div
+                className={c.subtitle2}
+                dangerouslySetInnerHTML={{ __html: com.description || "" }}
+              ></div>
             </>
           ) : (
             <Tooltip title={com.description || ""} placement="top" arrow>

configure/src/metaconfigs/tab-coordinates-config.json

@@ -116,9 +116,9 @@
         {
           "field": "coordinates.coordmain",
           "name": "Main Coordinate Type",
-          "description": "",
+          "description": "Sets which coordinates are shown by default in the bottom-right of the map.\n\t<strong>• LL</strong>: Longitude, Latitude\n\t<strong>• EN</strong>: Easting, Northing\n\t<strong>• CPROJ</strong>: Custom Projected (uses Projection tab)\n\t<strong>• SPROJ</strong>: Secondary Projected\n\t<strong>• RXY</strong>: Relative X, Y, (Z) in meters\n\t<strong>• SITE</strong>: Local Level Y, X, -Z",
           "type": "dropdown",
-          "width": 2,
+          "width": 4,
           "options": ["ll", "en", "cproj", "sproj", "rxy", "site"]
         }
       ]

configure/src/metaconfigs/tab-time-config.json

@@ -31,14 +31,6 @@
           "type": "checkbox",
           "width": 3,
           "defaultChecked": false
-        },
-        {
-          "field": "time.startInPointMode",
-          "name": "Start In Point Mode",
-          "description": "The Time UI begins in the Range Mode and allows users to bound by start and end times. Point Mode has users only control the end time and has start time implied by negative infinity.",
-          "type": "checkbox",
-          "width": 3,
-          "defaultChecked": false
         }
       ]
     },
@@ -50,7 +42,23 @@
           "name": "Time Format",
           "description": "The time format to be displayed on the Time UI. Uses D3 time format specifiers: <a target='_blank' href='https://github.com/d3/d3-time-format'>https://github.com/d3/d3-time-format</a>. Default: %Y-%m-%dT%H:%M:%SZ",
           "type": "text",
-          "width": 12
+          "width": 6
+        },
+        {
+          "field": "time.liveByDefault",
+          "name": "Live Mode On By Default",
+          "description": "If enabled, the Time UI will start in Live (Present) mode.",
+          "type": "checkbox",
+          "width": 3,
+          "defaultChecked": false
+        },
+        {
+          "field": "time.startInPointMode",
+          "name": "Start In Point Mode",
+          "description": "The Time UI begins in the Range Mode and allows users to bound by start and end times. Point Mode has users only control the end time and has start time implied by negative infinity.",
+          "type": "checkbox",
+          "width": 3,
+          "defaultChecked": false
         }
       ]
     },

src/essence/Ancillary/Coordinates.js

@@ -124,7 +124,11 @@ const Coordinates = {
             !(
                 L_.configData.time &&
                 L_.configData.time.enabled === true &&
-                L_.configData.time.visible === true
+                (
+                    L_.configData.time.visible === true ||
+                    L_.configData.time.liveByDefault === true ||
+                    L_.FUTURES.live === true
+                )
             )
         ) {
             $('#toggleTimeUI').css({ display: 'none' })
@@ -275,8 +279,13 @@ const Coordinates = {
         if (
             L_.configData.time &&
             L_.configData.time.enabled === true &&
-            L_.configData.time.visible === true &&
-            L_.configData.time.initiallyOpen === true
+            (
+                L_.FUTURES.live === true ||
+                (L_.FUTURES.live == null && (
+                    L_.configData.time.initiallyOpen === true ||
+                    L_.configData.time.liveByDefault === true
+                ))
+            )
         ) {
             toggleTimeUI()
         }

src/essence/Ancillary/QueryURL.js

@@ -37,6 +37,7 @@ var QueryURL = {
 
         var startTime = this.getSingleQueryVariable('startTime')
         var endTime = this.getSingleQueryVariable('endTime')
+        var live = this.getSingleQueryVariable('live')
 
         if (urlSite !== false) {
             L_.FUTURES.site = urlSite
@@ -176,6 +177,11 @@ var QueryURL = {
             }
         }
 
+        if (live !== false) {
+            const liveStr = (live + '').toLowerCase()
+            L_.FUTURES.live = liveStr === 'true' || liveStr === '1'
+        }
+
         if (layersOn !== false || selected !== false) {
             L_.FUTURES.customOn = true
             // lists all the on layers
@@ -400,6 +406,8 @@ var QueryURL = {
                     urlAppendage += '&startTime=' + TimeControl.startTime
             if (TimeControl.endTime)
                 urlAppendage += '&endTime=' + TimeControl.endTime
+            if (TimeControl.timeUI && typeof TimeControl.timeUI.now === 'boolean')
+                urlAppendage += '&live=' + (TimeControl.timeUI.now ? '1' : '0')
         }
 
         var url = encodeURI(urlAppendage)

src/essence/Ancillary/TimeUI.css

@@ -179,10 +179,7 @@
     text-transform: capitalize;
     color: var(--color-a5);
 }
-#mmgisTimeUIStartWrapper {
-}
-#mmgisTimeUIEndWrapper {
-}
+/* Start/End wrappers intentionally left for future styling hooks */
 #mmgisTimeUIActionsLeft,
 #mmgisTimeUIActionsRight {
     background: var(--color-a);
@@ -296,6 +293,28 @@
     transition: color 0.2s ease-out;
 }
 
+/* Live (Present) progress indicator */
+#mmgisTimeUIPresent {
+    position: relative;
+    overflow: hidden;
+    margin: 3px;
+    width: 34px;
+    height: 34px;
+}
+#mmgisTimeUIPresentProgress {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 3px;
+    width: 0;
+    background: #dcc565;
+    opacity: 0;
+    transition: width var(--live-duration, 1000ms) linear;
+}
+#mmgisTimeUIPresent.live #mmgisTimeUIPresentProgress {
+    opacity: 0.9;
+}
+
 #mmgisTimeUIFitTime:hover,
 #mmgisTimeUIFitWindow:hover,
 #mmgisTimeUIPresent:hover {
@@ -386,3 +405,12 @@
     transition: opacity 0.2s ease-out;
     z-index: -1;
 }
+
+/* Subtle tick flash on Live update (title text) */
+#mmgisTimeUIEndWrapper > span.flash {
+    animation: mmgis-time-text-flash 0.35s ease-out;
+}
+@keyframes mmgis-time-text-flash {
+    0% { color: var(--color-p4); }
+    100% { color: var(--color-h); }
+}

src/essence/Ancillary/TimeUI.js

@@ -116,6 +116,7 @@ const TimeUI = {
                     `</div>`,
                     `<div id="mmgisTimeUIPresent" class="mmgisTimeUIButton">`,
                         `<i class='mdi mdi-clock-end mdi-24px'></i>`,
+                        `<div id="mmgisTimeUIPresentProgress"></div>`,
                     `</div>`,
                 `</div>`,
                 /*
@@ -443,6 +444,8 @@ const TimeUI = {
             placement: 'top',
             theme: 'blue',
         })
+        // Initialize live progress duration on load
+        TimeUI._refreshLiveProgress()
 
         if (L_.configData.time?.startInPointMode == true) {
             TimeUI.modeIndex = TimeUI.modes.indexOf('Point')
@@ -516,6 +519,7 @@ const TimeUI = {
         Dropy.init($('#mmgisTimeUIRateDropdown'), function (idx) {
             TimeUI.intervalIndex = idx
             TimeUI._refreshIntervals()
+            TimeUI._refreshLiveProgress()
         })
 
         // Interval Duration dropdown
@@ -730,6 +734,17 @@ const TimeUI = {
         // Set modeIndex to 1/Point if a deeplink had an endtime but no starttime
         else if (TimeUI.modeIndex != TimeUI._startingModeIndex)
             TimeUI.changeMode(TimeUI._startingModeIndex)
+
+        // Enable live (present) based on deeplink override, else config default
+        const deeplinkLive = L_.FUTURES?.live
+        if (TimeUI.now !== true) {
+            if (deeplinkLive === true) {
+                TimeUI.toggleTimeNow(true)
+            } else if (deeplinkLive == null && L_.configData.time?.liveByDefault === true) {
+                TimeUI.toggleTimeNow(true)
+            }
+        }
+        TimeUI._refreshLiveProgress()
     },
     changeMode(idx) {
         TimeUI.modeIndex = idx
@@ -865,6 +880,7 @@ const TimeUI = {
             $('#mmgisTimeUIEndWrapper').css('cursor', 'inherit')
         }
         if (butDontActuallyPlay !== true) TimeUI._refreshIntervals()
+        TimeUI._refreshLiveProgress()
     },
     _updateExtentIndicator(forceStartTimestamp, forceEndTimestamp) {
         if (TimeUI.play) return
@@ -917,6 +933,35 @@ const TimeUI = {
                 TimeUI.intervalValues[TimeUI.intervalIndex]
             )
         }
+        TimeUI._refreshLiveProgress()
+    },
+    _refreshLiveProgress() {
+        const dur = TimeUI.intervalValues[TimeUI.intervalIndex] || 1000
+        const present = $('#mmgisTimeUIPresent')
+        const progress = $('#mmgisTimeUIPresentProgress')
+        progress.css('--live-duration', `${dur}ms`)
+        if (TimeUI.now === true) {
+            present.addClass('live')
+            progress.css('opacity', 0.9)
+            TimeUI._restartLiveProgressTransition()
+        } else {
+            present.removeClass('live')
+            progress.css('opacity', 0)
+            progress.css('transition', 'none')
+            progress.css('width', '0')
+        }
+    },
+    _restartLiveProgressTransition() {
+        const dur = TimeUI.intervalValues[TimeUI.intervalIndex] || 1000
+        const progress = $('#mmgisTimeUIPresentProgress')
+        // Reset width to 0 without transition, then animate to 100%
+        progress.css('transition', 'none')
+        progress.css('width', '0')
+        // Force reflow to apply width reset before re-enabling transition
+        const _ = progress.get(0) && progress.get(0).offsetWidth
+        progress.css('transition', `width ${dur}ms linear`)
+        // Kick off the ramp
+        progress.css('width', '100%')
     },
     _loopTime(loopBackwards) {
         const mode = TimeUI.modes[TimeUI.modeIndex]
@@ -1025,6 +1070,8 @@ const TimeUI = {
                 .css('color', 'white')
             $('#mmgisTimeUIEnd').css('pointer-events', 'none')
             $('#mmgisTimeUIEndWrapper').css('cursor', 'not-allowed')
+            // Rename label to Live Time
+            $('#mmgisTimeUIEndWrapper > span').text('Live Time')
             TimeUI.now = true
             TimeUI.togglePlay(false)
         } else {
@@ -1034,6 +1081,8 @@ const TimeUI = {
                 .css('color', 'var(--color-a4)')
             $('#mmgisTimeUIEnd').css('pointer-events', 'inherit')
             $('#mmgisTimeUIEndWrapper').css('cursor', 'inherit')
+            // Restore label to Active Time
+            $('#mmgisTimeUIEndWrapper > span').text('Active Time')
             TimeUI.now = false
         }
         TimeUI._refreshIntervals()
@@ -1310,6 +1359,17 @@ const TimeUI = {
             TimeUI.setCurrentTime(parsedNow, disableChange)
             //TimeUI._remakeTimeSlider(true)
             TimeUI.endTempus.dates.setValue(parsedNow)
+            // Subtle tick flash indicator when live updates (title text)
+            if (TimeUI.now === true) {
+                const endLabel = $('#mmgisTimeUIEndWrapper > span')
+                endLabel.addClass('flash')
+                clearTimeout(TimeUI._flashTimeout)
+                TimeUI._flashTimeout = setTimeout(() => {
+                    endLabel.removeClass('flash')
+                }, 600)
+                // Restart progress bar exactly on tick
+                TimeUI._restartLiveProgressTransition()
+            }
         }
     },
     updateTimes(start, end, current) {

src/essence/Basics/Layers_/Layers_.js

@@ -3200,7 +3200,7 @@ const L_ = {
             layerConfig.type === 'vector' &&
             layerConfig.time.type === 'local' &&
             layerConfig.time.endProp != null &&
-            layer != false &&
+            layer != false && layer != null &&
             layer._sourceGeoJSON != null
         ) {
             const filteredGeoJSON = JSON.parse(