From 4e8c0df425d92c8b0277f281f8d40efb2251a256 Mon Sep 17 00:00:00 2001 From: Terence Tuhinanshu Date: Wed, 6 Sep 2017 16:48:38 -0400 Subject: [PATCH 1/3] Update Compare Window model when polling We introduce a new `polling` boolean attribute on the Compare Window model, false by default, which reflects whether the window is currently in a state of polling or not. This is contingent on any of the scenarios having any results that are polling. To do this, we first collect all the `polling` attributes in each of the result in each scenario, and then flatten it to a single array. Then we use `Array.some` which takes a function and returns true if it evaluates to a truthy value for any of the values. Since the values are already boolean, we simply use `_.identity` as the evaluating function. --- src/mmw/js/src/compare/models.js | 19 +++++++++++++++++++ .../src/compare/templates/compareWindow2.html | 2 +- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/mmw/js/src/compare/models.js b/src/mmw/js/src/compare/models.js index e08f4c487..f67dab90d 100644 --- a/src/mmw/js/src/compare/models.js +++ b/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) { diff --git a/src/mmw/js/src/compare/templates/compareWindow2.html b/src/mmw/js/src/compare/templates/compareWindow2.html index 3fae396e7..7b0e2feaf 100644 --- a/src/mmw/js/src/compare/templates/compareWindow2.html +++ b/src/mmw/js/src/compare/templates/compareWindow2.html @@ -30,5 +30,5 @@

Scenarios

-
+
From f5329795eb012b1542a861f3f3e8b6956fda7853 Mon Sep 17 00:00:00 2001 From: Terence Tuhinanshu Date: Wed, 6 Sep 2017 16:51:07 -0400 Subject: [PATCH 2/3] Fade results when polling When the Window Model has `polling` set to true, the sections region containing charts or tables will appear faded. It will come back into saturation once the polling stops. This change is animated in the same manner as all other animations in the Compare Window. This does not impede user interactivity. They can still hover over the charts and select text in tables. --- src/mmw/js/src/compare/views.js | 11 ++++++++++- src/mmw/sass/pages/_compare.scss | 7 +++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/mmw/js/src/compare/views.js b/src/mmw/js/src/compare/views.js index fe8aa7b34..aad7dffb8 100644 --- a/src/mmw/js/src/compare/views.js +++ b/src/mmw/js/src/compare/views.js @@ -48,6 +48,7 @@ var CompareWindow2 = modalViews.ModalBaseView.extend({ modelEvents: { 'change:mode': 'showSectionsView', 'change:visibleScenarioIndex': 'highlightButtons', + 'change:polling': 'setPolling', }, regions: { @@ -137,6 +138,14 @@ var CompareWindow2 = modalViews.ModalBaseView.extend({ visibleScenarioIndex: Math.max(--visibleScenarioIndex, 0) }); }, + + setPolling: function() { + if (this.model.get('polling')) { + this.sectionsRegion.$el.addClass('polling'); + } else { + this.sectionsRegion.$el.removeClass('polling'); + } + }, }); var TabPanelView = Marionette.ItemView.extend({ @@ -406,7 +415,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 diff --git a/src/mmw/sass/pages/_compare.scss b/src/mmw/sass/pages/_compare.scss index 44f4a4c5a..ac9c28383 100644 --- a/src/mmw/sass/pages/_compare.scss +++ b/src/mmw/sass/pages/_compare.scss @@ -319,6 +319,12 @@ $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; + } + } } .compare-close { @@ -514,6 +520,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; From d1fc31fa048e8c2f91e03012db66e791d4b5bd2d Mon Sep 17 00:00:00 2001 From: Terence Tuhinanshu Date: Wed, 6 Sep 2017 17:01:13 -0400 Subject: [PATCH 3/3] Add spinner on poll Add a spinner on the top middle, left of the precipitation slider, to be shown when the scenarios are polling. This uses a new spinner which is sleeker and faster than the usual fa-circle-o-notch used elsewhere in the app. Eventually, all of those should be replaced with this. squash! Add spinner on poll The spinner is now in the middle of the screen, rather than the top-right. --- .../src/compare/templates/compareWindow2.html | 1 + src/mmw/js/src/compare/views.js | 3 +++ src/mmw/sass/components/_spinner.scss | 21 +++++++++++++++++++ src/mmw/sass/main.scss | 1 + src/mmw/sass/pages/_compare.scss | 6 ++++++ 5 files changed, 32 insertions(+) create mode 100644 src/mmw/sass/components/_spinner.scss diff --git a/src/mmw/js/src/compare/templates/compareWindow2.html b/src/mmw/js/src/compare/templates/compareWindow2.html index 7b0e2feaf..beed90045 100644 --- a/src/mmw/js/src/compare/templates/compareWindow2.html +++ b/src/mmw/js/src/compare/templates/compareWindow2.html @@ -3,6 +3,7 @@

Compare

+