Merge pull request #2154 from WikiWatershed/arr/tiny-compare-maps

Compare View Revamp: wire up maps and modification popovers
WikiWatershed · Aug 21, 2017 · e860700 · e860700
2 parents 7f7a542 + cc6656f
commit e860700
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 9 deletions.
diff --git a/src/mmw/js/src/compare/templates/compareDescriptionPopover.html b/src/mmw/js/src/compare/templates/compareDescriptionPopover.html
@@ -0,0 +1,16 @@
+{% if is_pre_columbian %}
+    <h3 class="compare-no-mod-title">{{name}}</h3>
+    <p>
+        Lorem ipsum this scenario shows the tr55 model results under pre columbian conditions...
+    </p>
+{% elif is_current_conditions %}
+    <h3 class="compare-no-mod-title">{{name}}</h3>
+    <p>
+        Lorem ipsum this is the model run under current conditions
+    </p>
+{% else %}
+    <h3 class="compare-no-mod-title">No modifications</h3>
+    <p>
+        To add modifications, close this modal and select "Land cover" or "Conservation practices" lorem ipsum dolor sit
+    </p>
+{% endif %}
diff --git a/src/mmw/js/src/compare/templates/compareModificationsPopover.html b/src/mmw/js/src/compare/templates/compareModificationsPopover.html
@@ -0,0 +1,23 @@
+{% macro modificationsTable(caption, modifications) %}
+<table class="compare-modifications-table">
+    {% if modifications.length > 0 %}
+        <h5>{{ caption }}</h5>
+    {% endif %}
+    <tbody>
+        {% for mod in modifications %}
+            <tr>
+                <td class="modification-value">
+                    {{ modConfigUtils.getHumanReadableShortName(mod.get('value')) }}
+                </td>
+                <td class="modification-area">
+                    +{{ mod.get('area').toFixed(1) }} {{ mod.get('units') }}
+                </td>
+            </tr>
+        {% endfor %}
+    </tbody>
+</table>
+{% endmacro %}
+
+<h3>Modifications</h3>
+{{ modificationsTable('Land Cover', landCovers) }}
+{{ modificationsTable('Conservation Practices', conservationPractices) }}
diff --git a/src/mmw/js/src/compare/templates/compareScenarioItem.html b/src/mmw/js/src/compare/templates/compareScenarioItem.html
@@ -1,2 +1,2 @@
-<div class="compare-mapplaceholder"></div>
-<h3><span class="scenario-badge"></span> {{ name }}</h3>
+<div class="compare-map-container" role="button" data-html="true" data-toggle="popover"></div>
+<div class="compare-scenario-title"><span class="scenario-badge"></span> {{ name }}</div>
diff --git a/src/mmw/js/src/compare/views.js b/src/mmw/js/src/compare/views.js
@@ -22,7 +22,9 @@ var _ = require('lodash'),
     compareScenariosTmpl = require('./templates/compareScenarios.html'),
     compareScenarioTmpl = require('./templates/compareScenario.html'),
     compareModelingTmpl = require('./templates/compareModeling.html'),
-    compareModificationsTmpl = require('./templates/compareModifications.html');
+    compareModificationsTmpl = require('./templates/compareModifications.html'),
+    compareModificationsPopoverTmpl = require('./templates/compareModificationsPopover.html'),
+    compareDescriptionPopoverTmpl = require('./templates/compareDescriptionPopover.html');
 
 var CompareWindow2 = Marionette.LayoutView.extend({
     template: compareWindow2Tmpl,
@@ -158,9 +160,74 @@ var InputsView = Marionette.LayoutView.extend({
     },
 });
 
+var CompareModificationsPopoverView = Marionette.ItemView.extend({
+    // model: ModificationsCollection
+    template: compareModificationsPopoverTmpl,
+
+    templateHelpers: function() {
+        return {
+            conservationPractices: this.model.filter(function(modification) {
+                return modification.get('name') === 'conservation_practice';
+            }),
+            landCovers: this.model.filter(function(modification) {
+                return modification.get('name') === 'landcover';
+            }),
+            modConfigUtils: modConfigUtils
+        };
+    }
+});
+
+var CompareDescriptionPopoverView = Marionette.ItemView.extend({
+    // model: ScenarioModel
+    template: compareDescriptionPopoverTmpl,
+    className: 'compare-no-mods-popover'
+});
+
 var ScenarioItemView = Marionette.ItemView.extend({
     className: 'compare-column',
     template: compareScenarioItemTmpl,
+
+    ui: {
+        'mapContainer': '.compare-map-container',
+    },
+
+    onShow: function() {
+        var mapView = new coreViews.MapView({
+            model: new coreModels.MapModel({
+                'areaOfInterest': App.currentProject.get('area_of_interest'),
+                'areaOfInterestName': App.currentProject.get('area_of_interest_name'),
+            }),
+            el: this.ui.mapContainer,
+            addZoomControl: false,
+            addLocateMeButton: false,
+            addSidebarToggleControl: false,
+            showLayerAttribution: false,
+            initialLayerName: App.getLayerTabCollection().getCurrentActiveBaseLayerName(),
+            layerTabCollection: new coreModels.LayerTabCollection(),
+            interactiveMode: false,
+        });
+        mapView.updateAreaOfInterest();
+        mapView.updateModifications(this.model.get('modifications'));
+        mapView.fitToModificationsOrAoi();
+        mapView.render();
+    },
+
+    onRender: function() {
+        var modifications = this.model.get('modifications'),
+            popOverView = modifications.length > 0 ?
+                              new CompareModificationsPopoverView({
+                                  model: modifications
+                              }) :
+                              new CompareDescriptionPopoverView({
+                                  model: this.model
+                              });
+
+        this.ui.mapContainer.popover({
+            placement: 'bottom',
+            trigger: 'hover focus',
+            content: popOverView.render().el
+        });
+    }
 });
 
 var ScenariosRowView = Marionette.CollectionView.extend({

diff --git a/src/mmw/js/src/core/views.js b/src/mmw/js/src/core/views.js
@@ -627,6 +627,16 @@ var MapView = Marionette.ItemView.extend({
         }
     },
 
+    fitToModificationsOrAoi: function() {
+        var modificationsBounds = this._modificationsLayer.getBounds();
+
+        if (modificationsBounds.isValid()) {
+            this._leafletMap.fitBounds(modificationsBounds, { reset: true });
+        } else {
+            this.fitToAoi();
+        }
+    },
+
     updateCurrentZoomLevel: function(layer) {
         var layerMaxZoom = layer.options.maxZoom,
             map = this,

diff --git a/src/mmw/sass/pages/_compare.scss b/src/mmw/sass/pages/_compare.scss
@@ -300,6 +300,7 @@ $compare-chart-table-height: calc(100vh - #{$height-lg} - #{$compare-footer-heig
   margin-top: 20px;
   max-width: 1200px;
   max-height: calc(100% - 20px);
+  -webkit-font-smoothing: antialiased;
 
   @media screen and (max-width: 1300px) {
     max-width: 1000px;
@@ -505,7 +506,7 @@ $compare-chart-table-height: calc(100vh - #{$height-lg} - #{$compare-footer-heig
     min-width: 120px;
     width: 120px;
 
-    h3 {
+    .compare-scenario-title {
       font-size: $font-size-h5;
       font-weight: 400;
     }
@@ -557,11 +558,31 @@ $compare-chart-table-height: calc(100vh - #{$height-lg} - #{$compare-footer-heig
     }
   }
 
-  .compare-mapplaceholder {
-    height: 90px;
-    background-color: #aaa;
-    margin-bottom: 10px;
-    width: 120px;
+  .compare-map-container {
+      cursor: pointer !important;
+      height: 90px;
+      background-color: #aaa;
+      margin-bottom: 10px;
+      width: 120px;
+  }
+
+  .compare-modifications-table {
+      font-size: $font-size-h5;
+      width: 100%;
+      .modification-value {
+          padding-right: 12px;
+      }
+      .modification-area {
+          color: $brand-primary;
+          text-align: right;
+      }
+  }
+
+  .compare-no-mods-popover {
+      width: 189px;
+      > .compare-no-mod-title {
+          margin-bottom: 2px;
+      }
   }
 
   .compare-inputs {