From 4bf8034dc1bd23f6629cbe72bad38e6e0cc751db Mon Sep 17 00:00:00 2001
From: Ken Hawkins <khawkins98@gmail.com>
Date: Tue, 20 Aug 2019 16:58:21 +0200
Subject: [PATCH] Feature: error messaging, param to disable mousezoom (#15)

* Feature: display error message on failures

So things don't look "JS is dead" on failure.

* Improve documentation a bit

* Add disableZoomScroll option
---
 assets/map_scripts.js | 43 +++++++++++++++++++++++++++++++++++++++++--
 assets/map_styles.css | 12 ++++++++++--
 live-data-map.html    | 16 ++++++++++------
 3 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/assets/map_scripts.js b/assets/map_scripts.js
index 38cda00..f042d89 100644
--- a/assets/map_scripts.js
+++ b/assets/map_scripts.js
@@ -71,6 +71,12 @@ if (issetPolyfill(config.debugMetrics)) {
   config.debugMetrics = true;
 }
 
+// error message display
+config.hideErrorMessages = paraseParam('hideErrorMessages');
+if (issetPolyfill(config.hideErrorMessages)) {
+  config.hideErrorMessages = true;
+}
+
 // passed zoom param
 config.zoom = paraseParam('zoomLevel');
 if (issetPolyfill(config.zoom)) {
@@ -95,6 +101,13 @@ if (issetPolyfill(config.lon)) {
   if (!isNaN(config.lon)) initialLon = config.lon;
 }
 
+// optionally disable mouse wheel zooming
+config.disableZoomScroll = paraseParam('disableZoomScroll');
+if (issetPolyfill(config.disableZoomScroll)) {
+  config.disableZoomScroll = true;
+  map.scrollWheelZoom.disable();
+}
+
 // show sunrise and sunset
 // http://joergdietrich.github.io/Leaflet.Terminator/
 var daynightoverlay = L.terminator({className:'daynightoverlay'});
@@ -248,6 +261,26 @@ function scheduledNodeRemoval(targetClusterGroup,targetNode) {
   }
 }
 
+// Show a user-friendly when data fetching fails
+var errorMessageTimeout;
+var errorFailCount = 0;
+var errorDisplayThreshold = 2; // so we don't show every time a fail occurs
+
+function showErrorMessage() {
+  errorFailCount++
+
+  if (errorFailCount >= errorDisplayThreshold && !(config.hideErrorMessages)) {
+    $('.modal--error').slideUp(); // ensure hidden to begin
+    clearTimeout(errorMessageTimeout); // ensure we're not already awaiting message to be cleared
+    $('.modal--error').slideDown('fast');
+    // show error message for length of http request lifespan
+    errorMessageTimeout = setTimeout(function(){ $('.modal--error').slideUp('slow'); }, lifeSpan);
+
+    errorFailCount = 0;
+  }
+
+}
+
 // loop to keep clusters updating
 function runClusters() {
   if (config.debugMetrics) { console.log(window.performance.memory); }
@@ -301,9 +334,15 @@ function runClusters() {
       }
       parseDate(data,offset);
     },
-    error: function(jqXHR, textStatus){
+    error: function(jqXHR, textStatus) {
+
+      showErrorMessage();
+
+      if(jqXHR.status === 403) {
+        console.log('There was an error fetching list of users. Please try again later.');
+      }
       if(textStatus === 'timeout') {
-        // console.log('Unable to get data source in a timely fashion',jqXHR);
+        console.log('Unable to get data source in a timely fashion');
         if (Raven.isSetup()) {
           Raven.captureMessage('Unable to get data source in a timely fashion', {
             level: 'warning' // one of 'info', 'warning', or 'error'
diff --git a/assets/map_styles.css b/assets/map_styles.css
index 0911cda..9005679 100644
--- a/assets/map_styles.css
+++ b/assets/map_styles.css
@@ -40,8 +40,6 @@ body.display-unified .leaflet-marker-icon div.markerClustersUniprot:hover,
 body.display-unified .legend div.markerClustersPortals .legend-icon,
 body.display-unified .legend div.markerClustersUniprot .legend-icon { background-color: rgba(168,200,19,.4); }
 
-
-
 .modal {
   background-color: #fff;
   padding: 10px;
@@ -51,6 +49,16 @@ body.display-unified .legend div.markerClustersUniprot .legend-icon { background
 
 .modal h4 { margin: 0 0 5px; }
 
+.modal--error {
+  opacity: .9;
+  display: none;
+  border-radius: 5px;
+  box-shadow: 0 0 6px rgba(0,0,0,.4);
+  left: 50%;
+  margin-left: -25%;
+  top: -10px;
+}
+
 .description {
   display: none;
   bottom: 0%;
diff --git a/live-data-map.html b/live-data-map.html
index 2791404..317a349 100644
--- a/live-data-map.html
+++ b/live-data-map.html
@@ -56,19 +56,19 @@
   - disable the legend: live-data-map.html?hideLegend=true
   - description block: live-data-map.html?description=true
 
-  You can throttle this for older devices with "?slimClient=true",
-  this will reduce the update frequency and trim some display options.
-
-  You can set an initial zoom level, lat, long:
+  You can set some other optional paramaters:
   - zoomLevel=2 (2 is default)
+  - disableZoomScroll=false (false is default)
   - lat=30 (30 is default)
   - lon=-10.5 (-10.5 is default)
+  - slimClient=false (reduces performance for older devices by lowering update frequency and trim some display options; false is default)
+  - hideErrorMessages=false (false is default)
+  - debug=false (false is default)
 
   The map and its asset URLs are subject to change, so please do not directly code the map into your web page.
 
   Updates:
-    2017-01-23: Various timing optimisations and the ability to request a legend display
-    2016-12-14: Initial go-live
+    - See https://github.com/ebiwd/EMBL-EBI-Live-data-map/releases
   Credits:
     - Philip Lewis: Backend server log queries, first implementation (http://wwwdev.ebi.ac.uk/ebiwebtrafficmap/kmlvector.html)
     - Ken Hawkins: Visual polish, various log optimisations, and MapBox-based implementation
@@ -94,6 +94,10 @@
   <!-- <script src="https://cdn.ravenjs.com/3.17.0/raven.min.js" crossorigin="anonymous"></script> -->
   <!-- <script>Raven.config('https://85a7e84090644f43801eedac0af1eb51@sentry.io/204881').install();</script> -->
 
+  <div class="modal modal--error">
+    <p class=""><strong>Retrying...</strong> Something went wrong while to fetch map data. Attempting to reconnect.</p>
+  </div>
+
   <div id="map"></div>
 
   <div id="legend" class="legend modal"></div>