Merge pull request #2226 from WikiWatershed/tt/compare-view-revamp-lo…

…ading-states

Compare View Revamp: Loading States

Connects #2134

src/mmw/js/src/compare/models.js

@@ -208,6 +208,25 @@ var WindowModel = Backbone.Model.extend({
         scenarios: null, // ScenariosCollection
         tabs: null,  // TabsCollection
         visibleScenarioIndex: 0, // Index of the first visible scenario
+        polling: false,  // If any results are polling
+    },
+
+    initialize: function() {
+        var setPolling = _.bind(this.setPolling, this);
+
+        this.get('scenarios').forEach(function(scenario) {
+            scenario.get('results').on('change', setPolling);
+        });
+    },
+
+    setPolling: function() {
+        var getPolling = function(scenario) {
+                return scenario.get('results').pluck('polling');
+            },
+            scenarios = this.get('scenarios'),
+            polling = _(scenarios.map(getPolling)).flatten().some();
+
+        this.set({ polling: polling });
     },
 
     addOrReplaceInput: function(input) {

src/mmw/js/src/compare/templates/compareWindow2.html

@@ -3,6 +3,7 @@
     <div class="compare-title">
         <h1>Compare</h1>
     </div>
+    <div class="spinner hidden"></div>
     <div class="compare-close">
         <button>
             <i class="fa fa-times"></i>
@@ -30,5 +31,5 @@ <h2>Scenarios</h2>
         </button>
     </div>
 </div>
-<div class="compare-sections">
+<div class="compare-sections polling">
 </div>

src/mmw/js/src/compare/views.js

@@ -37,6 +37,7 @@ var CompareWindow2 = modalViews.ModalBaseView.extend({
         closeButton: '.compare-close > button',
         nextButton: '.compare-scenario-buttons > .btn-next-scenario',
         prevButton: '.compare-scenario-buttons > .btn-prev-scenario',
+        spinner: '.spinner',
     },
 
     events: _.defaults({
@@ -48,6 +49,7 @@ var CompareWindow2 = modalViews.ModalBaseView.extend({
     modelEvents: {
         'change:mode': 'showSectionsView',
         'change:visibleScenarioIndex': 'highlightButtons',
+        'change:polling': 'setPolling',
     },
 
     regions: {
@@ -137,6 +139,16 @@ var CompareWindow2 = modalViews.ModalBaseView.extend({
             visibleScenarioIndex: Math.max(--visibleScenarioIndex, 0)
         });
     },
+
+    setPolling: function() {
+        if (this.model.get('polling')) {
+            this.ui.spinner.removeClass('hidden');
+            this.sectionsRegion.$el.addClass('polling');
+        } else {
+            this.ui.spinner.addClass('hidden');
+            this.sectionsRegion.$el.removeClass('polling');
+        }
+    },
 });
 
 var TabPanelView = Marionette.ItemView.extend({
@@ -406,7 +418,7 @@ var ChartView = Marionette.CollectionView.extend({
 
         // Show charts from visibleScenarioIndex
         this.$('.nv-group > rect:nth-child(n + ' + (i+1) + ')').css({
-            'opacity': 1,
+            'opacity': '',
         });
 
         // Hide charts up to visibleScenarioIndex

src/mmw/sass/components/_spinner.scss

@@ -0,0 +1,21 @@
+.spinner:after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  top: 22px;
+  right: 14px;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: -10px;
+  border-radius: 50%;
+  border: 2px solid #ccc;
+  border-top-color: #333;
+  animation: spinner-animation 0.6s linear infinite;
+}
+
+@keyframes spinner-animation {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/mmw/sass/main.scss

@@ -64,6 +64,7 @@
   "components/sidebar",
   "components/global-navigation",
   "components/layerpicker",
+  "components/spinner",
   "components/slider";
 
 /**

src/mmw/sass/pages/_compare.scss

@@ -319,6 +319,18 @@ $compare-chart-table-height: calc(100vh - #{$height-lg} - #{$compare-footer-heig
   .compare-sections {
     flex: 0 1 auto;
     overflow: auto;
+
+    &.polling {
+      .compare-column, rect {
+        opacity: 0.25;
+      }
+    }
+  }
+
+  .spinner {
+    position: absolute;
+    top: 53px;
+    right: 50%;
   }
 
   .compare-close {
@@ -514,6 +526,7 @@ $compare-chart-table-height: calc(100vh - #{$height-lg} - #{$compare-footer-heig
   .compare-column {
     min-width: 120px;
     width: 120px;
+    transition: opacity 0.3s ease-in-out;
 
     .compare-scenario-title {
       font-size: $font-size-h5;