Speed up mobile delivery by skipping wind/solar

Pantkowsky · Oct 10, 2016 · f80c788 · f80c788
1 parent 6ac278d
commit f80c788
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 43 deletions.
diff --git a/api/static/app/main.js b/api/static/app/main.js
@@ -472,56 +472,76 @@ if (!nobrowsercheck && !isChrome()) {
 
     // Periodically load data
     var REFRESH_TIME_MINUTES = 5;
+    var connectionWarningTimeout = null;
+
+    function handleConnectionError(err) {
+        if (err) {
+            console.error(err);
+            document.getElementById('connection-warning').className = "show";
+        } else {
+            document.getElementById('connection-warning').className = "hide";
+            clearInterval(connectionWarningTimeout);
+        }
+    }
+
     function fetchAndReschedule() {
         // If data doesn't load in 30 secs, show connection warning
-        timeout_interval = setTimeout(function(){
+        connectionWarningTimeout = setTimeout(function(){
             document.getElementById('connection-warning').className = "show";
         }, 15 * 1000);
         var Q = queue()
-            .defer(d3.json, 'europe.topo.json')
-            .defer(d3.json, ENDPOINT + '/v1/production')
-            .defer(d3.json, ENDPOINT + '/v1/solar')
-            .defer(d3.json, ENDPOINT + '/v1/wind');
-        if (isMobile() && d3.select('.country-table-initial-text').style() != 'none') {
-            Q.defer(geolocaliseCountryCode);
-        }
-        Q.await(function(err, countryTopos, production, solar, wind, countryCode) {
-            if (err) {
-                console.error(err);
-                document.getElementById('connection-warning').className = "show";
-            } else {
-                document.getElementById('connection-warning').className = "hide";
-                clearInterval(timeout_interval);
-                dataLoaded(err, countryTopos, production, solar, wind);
-                if (isMobile() && d3.select('.country-table-initial-text').style() != 'none') {
-                    if (countryCode && countries[countryCode] ) {
-                        // Select one country
-                        d3.select('.country-table-initial-text')
-                            .style('display', 'none');
-                        countryTable
-                            .show()
-                            .data(countries[countryCode].data);
-                    } else {
-                        // Show picker
-                        var countryCodes = d3.entries(countries)
-                            .filter(function (d) { return d.value.data.production; })
-                            .map(function (d) { return d.key; });
-                        countryCodes.unshift('< press to select >');
-                        var countryOptions = d3.select('select.country-picker')
-                            .selectAll('option')
-                            .data(countryCodes);
-                        countryOptions.enter()
-                            .append('option');
-                        countryOptions
-                            .text(function(d) { return d });
-                        countryOptions.exit().remove();
+        if (isMobile()) {
+            Q
+                .defer(d3.json, 'europe.topo.json')
+                .defer(d3.json, ENDPOINT + '/v1/production');
+            if (d3.select('.country-table-initial-text').style() != 'none') {
+                Q.defer(geolocaliseCountryCode);
+            }
+            Q.await(function(err, countryTopos, production, countryCode) {
+                handleConnectionError(err);
+                if (!err) {
+                    dataLoaded(err, countryTopos, production);
+                    if (d3.select('.country-table-initial-text').style() != 'none') {
+                        if (countryCode && countries[countryCode] ) {
+                            // Select one country
+                            d3.select('.country-table-initial-text')
+                                .style('display', 'none');
+                            countryTable
+                                .show()
+                                .data(countries[countryCode].data);
+                        } else {
+                            // Show picker
+                            var countryCodes = d3.entries(countries)
+                                .filter(function (d) { return d.value.data.production; })
+                                .map(function (d) { return d.key; });
+                            countryCodes.unshift('< press to select >');
+                            var countryOptions = d3.select('select.country-picker')
+                                .selectAll('option')
+                                .data(countryCodes);
+                            countryOptions.enter()
+                                .append('option');
+                            countryOptions
+                                .text(function(d) { return d });
+                            countryOptions.exit().remove();
+                        }
                     }
                 }
-            }
-        });
-
-        setTimeout(fetchAndReschedule, REFRESH_TIME_MINUTES * 60 * 1000);
-    }
+                setTimeout(fetchAndReschedule, REFRESH_TIME_MINUTES * 60 * 1000);
+            });
+        } else {
+            Q
+                .defer(d3.json, 'europe.topo.json')
+                .defer(d3.json, ENDPOINT + '/v1/production')
+                .defer(d3.json, ENDPOINT + '/v1/solar')
+                .defer(d3.json, ENDPOINT + '/v1/wind')
+                .await(function(err, countryTopos, production, solar, wind) {
+                    handleConnectionError(err);
+                    if (!err)
+                        dataLoaded(err, countryTopos, production, solar, wind);
+                    setTimeout(fetchAndReschedule, REFRESH_TIME_MINUTES * 60 * 1000);
+                });
+        }
+    };
 
     function redraw() {
         countryTable.render();

diff --git a/api/static/style.css b/api/static/style.css
@@ -33,6 +33,7 @@ html, body {
     font-size: 0.8em;
     border-bottom-right-radius: 5px;
     border-bottom-left-radius: 5px;
+    max-width: 600px;
 }
 
 .contribute-text {