Show popover descriptions for scenarios with no modifications

- Add a new popover view to show if a scenario can't or doesn't have
  modifications
 - Current Conditions and 100% Forest Cover explain what they are
 - Regular Scenarios without modifications, describe how to add modifications

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 %}

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

@@ -21,7 +21,8 @@ var _ = require('lodash'),
     compareScenarioTmpl = require('./templates/compareScenario.html'),
     compareModelingTmpl = require('./templates/compareModeling.html'),
     compareModificationsTmpl = require('./templates/compareModifications.html'),
-    compareModificationsPopoverTmpl = require('./templates/compareModificationsPopover.html');
+    compareModificationsPopoverTmpl = require('./templates/compareModificationsPopover.html'),
+    compareDescriptionPopoverTmpl = require('./templates/compareDescriptionPopover.html');
 
 var CompareWindow2 = Marionette.LayoutView.extend({
     template: compareWindow2Tmpl,
@@ -155,6 +156,7 @@ var InputsView = Marionette.LayoutView.extend({
 });
 
 var CompareModificationsPopoverView = Marionette.ItemView.extend({
+    // model: ModificationsCollection
     template: compareModificationsPopoverTmpl,
 
     templateHelpers: function() {
@@ -170,6 +172,12 @@ var CompareModificationsPopoverView = Marionette.ItemView.extend({
     }
 });
 
+var CompareDescriptionPopoverView = Marionette.ItemView.extend({
+    // model: ScenarioModel
+    template: compareDescriptionPopoverTmpl,
+    className: 'compare-no-mods-popover'
+});
+
 var ScenarioItemView = Marionette.ItemView.extend({
     className: 'compare-column',
     template: compareScenarioItemTmpl,
@@ -200,17 +208,20 @@ var ScenarioItemView = Marionette.ItemView.extend({
     },
 
     onRender: function() {
-        var modifications = this.model.get('modifications');
-
-        if (modifications.length > 0) {
-            this.ui.mapContainer.popover({
-                placement: 'bottom',
-                trigger: 'hover focus',
-                content: new CompareModificationsPopoverView({
-                    model: this.model.get('modifications')
-                }).render().el
-            });
-        }
+        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
+        });
     }
 });
 

src/mmw/sass/pages/_compare.scss

@@ -524,6 +524,13 @@ $compare-chart-table-height: calc(100vh - #{$height-lg} - #{$compare-footer-heig
       }
   }
 
+  .compare-no-mods-popover {
+      width: 189px;
+      > .compare-no-mod-title {
+          margin-bottom: 2px;
+      }
+  }
+
   .compare-inputs {
     float: right;
     margin-right: -5px;