feat: add class when map is rendered and push-analytics helper files …

…and classes (#552)

* feat: add class when map is rendered

* chore: code cleaning

* chore: code cleaning

* feat: check if bing layer is loaded

* chore: code cleaning

* fix: rendering timeout

* chore: refactor

* chore: change isLoading to within the trycatch

* fix: clear render timeout when data is fetched or received

* fix: restore check that returns if loading layers are encountered

---------

Co-authored-by: Jen Jones Arnesen <jennifer@dhis2.org>
Co-authored-by: HendrikThePendric <hendrik@dhis2.org>

src/Map.js

@@ -15,6 +15,9 @@ import Popup from './ui/Popup'
 import Label from './ui/Label'
 import './Map.css'
 
+const renderedClass = 'dhis2-map-rendered'
+const RENDER_TIMEOUT_DURATION = 500
+
 export class MapGL extends Evented {
     // Returns true if the layer type is supported
     static hasLayerSupport(type) {
@@ -44,6 +47,7 @@ export class MapGL extends Evented {
 
         this._mapgl = mapgl
         this._glyphs = glyphs
+        this._renderTimeout = null
 
         // Translate strings
         if (locale) {
@@ -55,12 +59,18 @@ export class MapGL extends Evented {
             })
         }
 
+        mapgl.on('render', this.onRender)
+        mapgl.on('idle', this.onIdle)
         mapgl.on('load', this.onLoad)
         mapgl.on('click', this.onClick)
         mapgl.on('contextmenu', this.onContextMenu)
         mapgl.on('mousemove', this.onMouseMove)
         mapgl.on('mouseout', this.onMouseOut)
         mapgl.on('error', this.onError)
+        /* Data and dataloading events are an indication that
+         * the map is not done yet */
+        mapgl.on('data', this._clearRenderTimeout)
+        mapgl.on('dataloading', this._clearRenderTimeout)
 
         this._layers = []
         this._controls = {}
@@ -146,12 +156,16 @@ export class MapGL extends Evented {
     remove() {
         const mapgl = this._mapgl
 
+        mapgl.off('render', this.onRender)
+        mapgl.off('idle', this.onIdle)
         mapgl.off('load', this.onLoad)
         mapgl.off('click', this.onClick)
         mapgl.off('contextmenu', this.onContextMenu)
         mapgl.off('mousemove', this.onMouseMove)
         mapgl.off('mouseout', this.onMouseOut)
         mapgl.off('error', this.onError)
+        mapgl.off('data', this._clearRenderTimeout)
+        mapgl.off('dataloading', this._clearRenderTimeout)
 
         mapgl.remove()
 
@@ -258,6 +272,21 @@ export class MapGL extends Evented {
         this.getMapGL().getCanvas().style.cursor = feature ? 'pointer' : ''
     }
 
+    // Remove rendered class if rendering is happening
+    onRender = () => {
+        this._removeClass(renderedClass)
+        this._clearRenderTimeout()
+    }
+
+    // Add rendered class if map is idle
+    onIdle = () => {
+        if (this.getLayers().some(layer => layer._isLoading)) {
+            return
+        }
+
+        this._setRenderTimeout()
+    }
+
     // Set hover state for features
     setHoverState(features) {
         // Only set hover state when features are changed
@@ -453,6 +482,45 @@ export class MapGL extends Evented {
 
         return { type, coordinates, position, feature }
     }
+
+    _setRenderTimeout() {
+        // Ensure pending timeout is cleared before setting a new one
+        this._clearRenderTimeout()
+        // Make sure the map stay rendered for at least 500ms
+        this._renderTimeout = setTimeout(() => {
+            this._addClass(renderedClass)
+            this._renderTimeout = null
+        }, RENDER_TIMEOUT_DURATION)
+    }
+
+    _clearRenderTimeout() {
+        if (this._renderTimeout) {
+            clearTimeout(this._renderTimeout)
+            this._renderTimeout = null
+        }
+    }
+
+    // Add class to map container
+    _addClass(className) {
+        if (this._mapgl) {
+            const { classList } = this._mapgl._container
+
+            if (!classList.contains(className)) {
+                classList.add(className)
+            }
+        }
+    }
+
+    // Remove class from map container
+    _removeClass(className) {
+        if (this._mapgl) {
+            const { classList } = this._mapgl._container
+
+            if (classList.contains(className)) {
+                classList.remove(className)
+            }
+        }
+    }
 }
 
 export default MapGL

src/layers/BingLayer.js

@@ -31,12 +31,16 @@ class BingLayer extends Layer {
     }
 
     async addTo(map) {
+        this._isLoading = true
+
         await this.createSource()
 
         this.createLayer()
 
         await super.addTo(map)
 
+        this._isLoading = false
+
         // Make sure overlays are on top
         map.orderOverlays()
 

src/layers/EarthEngine.js

@@ -20,6 +20,7 @@ class EarthEngine extends Layer {
             this._map = map
 
             if (map.styleIsLoaded()) {
+                this._isLoading = true
                 this.getWorkerInstance()
                     .then(async worker => {
                         this.worker = worker
@@ -35,6 +36,8 @@ class EarthEngine extends Layer {
                             super.addTo(map)
                             this.onLoad()
 
+                            this._isLoading = false
+
                             const { preload, data } = this.options
 
                             // Get aggregations if not plugin (preload=false) and org units
@@ -46,7 +49,10 @@ class EarthEngine extends Layer {
 
                         resolve()
                     })
-                    .catch(reject)
+                    .catch(() => {
+                        this._isLoading = false
+                        reject()
+                    })
             } else {
                 resolve()
             }

src/layers/ServerCluster.js

@@ -165,6 +165,7 @@ class ServerCluster extends Cluster {
 
             if (!this.tileClusters[tileId]) {
                 this.tileClusters[tileId] = 'pending'
+                this._isLoading = true
                 this.options.load(this.getTileParams(tileId), this.onTileLoad)
             }
         }
@@ -196,6 +197,8 @@ class ServerCluster extends Cluster {
         if (visibleTiles.includes(tileId)) {
             this.updateClusters([tileId])
         }
+
+        this._isLoading = false
     }
 
     getBounds = () => this.options.bounds