Add Drainage Area Analyze View

src/mmw/apps/geoprocessing_api/tasks.py

@@ -584,3 +584,18 @@ def union(collection, line):
         'area_of_interest': area_of_interest,
         'stream_segment': json.loads(segment.geojson),
     }
+
+
+@shared_task
+def wrap_in_survey(result):
+    """
+    Takes a result, and wraps it in a dict with a `survey` key
+
+    This is used to make results compatible with /analyze/ API, which always
+    wraps results in a `survey`.
+
+    Example:
+
+    wrap_in_survey({'a': 1, 'b': 2}) => {'survey': {'a': 1, 'b': 2}}
+    """
+    return {'survey': result}

src/mmw/apps/geoprocessing_api/views.py

@@ -1653,7 +1653,8 @@ def start_analyze_drainage_area(request, format=None):
         convert_data.s(huc12_wkaoi),
         collect_data.s(huc12_geojson),
         run_gwlfe.s(inputmod_hash=''),
-        # TODO Scale results to Drainage Area
+        # TODO Scale results to Drainage Area #3558
+        tasks.wrap_in_survey.s(),
     ], area_of_interest, user)
 
 

src/mmw/js/src/analyze/models.js

@@ -214,7 +214,7 @@ var AnalyzeTaskGroupCollection = Backbone.Collection.extend({
     model: AnalyzeTaskGroupModel
 });
 
-function createAnalyzeTaskGroupCollection(aoi, wkaoi) {
+function createAnalyzeTaskGroupCollection(aoi, wkaoi, drainageArea) {
     var taskGroups = [
         {
             name: "streams",
@@ -387,6 +387,21 @@ function createAnalyzeTaskGroupCollection(aoi, wkaoi) {
         },
     ];
 
+    if (drainageArea) {
+        taskGroups.push({
+            name: "drainage_area",
+            displayName: "Drainage Area",
+            tasks: [
+                {
+                    name: "drainage_area",
+                    area_of_interest: aoi,
+                    wkaoi: wkaoi,
+                    taskName: "analyze/drainage-area"
+                }
+            ]
+        });
+    }
+
     if (settings.get('data_catalog_enabled')) {
         taskGroups = _(taskGroups)
             // Remove tasks not supported in data catalog mode

src/mmw/js/src/analyze/templates/drainageAreaResults.html

@@ -0,0 +1,5 @@
+<div class="results-content">
+    <div class="desc-region"></div>
+    <div class="var-selector-region"></div>
+    <div class="table-region"></div>
+</div>

src/mmw/js/src/analyze/views.js

@@ -20,6 +20,8 @@ var $ = require('jquery'),
     pointSourceLayer = require('../core/pointSourceLayer'),
     catchmentWaterQualityLayer = require('../core/catchmentWaterQualityLayer'),
     dataCatalogViews = require('../data_catalog/views'),
+    gwlfeRunoffViews = require('../modeling/gwlfe/runoff/views'),
+    gwlfeQualityViews = require('../modeling/gwlfe/quality/views'),
     windowTmpl = require('./templates/window.html'),
     AnalyzeDescriptionTmpl = require('./templates/analyzeDescription.html'),
     analyzeResultsTmpl = require('./templates/analyzeResults.html'),
@@ -48,6 +50,7 @@ var $ = require('jquery'),
     tabContentTmpl = require('./templates/tabContent.html'),
     barChartTmpl = require('../core/templates/barChart.html'),
     worksheetExportTmpl = require('./templates/worksheetExport.html'),
+    drainageAreaResultsTmpl = require('./templates/drainageAreaResults.html'),
     resultsWindowTmpl = require('./templates/resultsWindow.html');
 
 var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
@@ -1717,6 +1720,58 @@ var StreamResultView = AnalyzeResultView.extend({
     },
 });
 
+var DrainageAreaResultView = Marionette.LayoutView.extend({
+    template: drainageAreaResultsTmpl,
+
+    modelEvents: {
+        'change:activeVar': 'showTableView',
+    },
+
+    regions: {
+        descriptionRegion: '.desc-region',
+        varSelectorRegion: '.var-selector-region',
+        tableRegion: '.table-region',
+    },
+
+    initialize: function(options) {
+        // Wrap raw model in `result` to work with GWLF-E views
+        this.model = new Backbone.Model({ result: options.model.toJSON() });
+
+        // Initialize to runoff / hydrology
+        this.model.set('activeVar', 'runoff');
+    },
+
+    onShow: function() {
+        this.descriptionRegion.show(new AnalyzeDescriptionView({
+            model: new Backbone.Model({
+                title: 'Drainage Area Analysis',
+            })
+        }));
+
+        this.varSelectorRegion.show(new VarSelectorView({
+            model: this.model,
+            keys: [
+                { name: 'runoff', label: 'Hydrology' },
+                { name: 'quality', label: 'Water Quality' },
+            ]
+        }));
+
+        this.showTableView();
+    },
+
+    showTableView: function() {
+        var activeVar = this.model.get('activeVar'),
+            tableViews = {
+                'runoff': gwlfeRunoffViews.TableView,
+                'quality': gwlfeQualityViews.TableView,
+            };
+
+        this.tableRegion.show(new tableViews[activeVar]({
+            model: this.model,
+        }));
+    }
+});
+
 var AnalyzeResultViews = {
     land_2019_2019: LandResultView,
     land_2019_2016: LandResultView,
@@ -1735,6 +1790,7 @@ var AnalyzeResultViews = {
     protected_lands: LandResultView,
     drb_2100_land_centers: LandResultView,
     drb_2100_land_corridors: LandResultView,
+    drainage_area: DrainageAreaResultView,
 };
 
 module.exports = {

src/mmw/js/src/app.js

@@ -108,9 +108,10 @@ var App = new Marionette.Application({
     getAnalyzeCollection: function() {
         if (!this.analyzeCollection) {
             var aoi = this.map.get('areaOfInterest'),
-                wkaoi = this.map.get('wellKnownAreaOfInterest');
+                wkaoi = this.map.get('wellKnownAreaOfInterest'),
+                drainageArea = this.map.get('areaOfInterestDrainageArea');
 
-            this.analyzeCollection = analyzeModels.createAnalyzeTaskGroupCollection(aoi, wkaoi);
+            this.analyzeCollection = analyzeModels.createAnalyzeTaskGroupCollection(aoi, wkaoi, drainageArea);
         }
 
         return this.analyzeCollection;

src/mmw/js/src/core/models.js

@@ -19,6 +19,7 @@ var MapModel = Backbone.Model.extend({
         areaOfInterest: null,           // GeoJSON
         areaOfInterestName: '',
         wellKnownAreaOfInterest: null,  // "{layerCode}__{id}"
+        areaOfInterestDrainageArea: false,
         geolocationEnabled: true,
         previousAreaOfInterest: null,
         dataCatalogVisible: false,

src/mmw/js/src/draw/views.js

@@ -1138,6 +1138,7 @@ var DrainageAreaView = DrawToolBaseView.extend({
             };
 
             App.map.set('areaOfInterestAdditionals', additionalShapes);
+            App.map.set('areaOfInterestDrainageArea', true);
             addLayer(response.area_of_interest, 'Point-based Drainage Area');
             navigateToAnalyze();
             window.ga('send', 'event', GA_AOI_CATEGORY, 'aoi-create', 'drainage-point');
@@ -1177,6 +1178,7 @@ var DrainageAreaView = DrawToolBaseView.extend({
                 };
 
                 App.map.set('areaOfInterestAdditionals', additionalShapes);
+                App.map.set('areaOfInterestDrainageArea', true);
                 addLayer(response.area_of_interest, 'Stream-based Drainage Area');
                 navigateToAnalyze();
                 window.ga('send', 'event', GA_AOI_CATEGORY, 'aoi-create', 'drainage-stream');
@@ -1340,6 +1342,7 @@ function clearAoiLayer() {
         'areaOfInterest': null,
         'areaOfInterestName': '',
         'wellKnownAreaOfInterest': null,
+        'areaOfInterestDrainageArea': false,
     });
     App.projectNumber = undefined;
     App.map.setDrawSize(false);

src/mmw/js/src/modeling/gwlfe/quality/views.js

@@ -193,5 +193,6 @@ var TableView = Marionette.CompositeView.extend({
 });
 
 module.exports = {
+    TableView: TableView,
     ResultView: ResultView
 };

src/mmw/js/src/modeling/gwlfe/runoff/templates/result.html

@@ -25,6 +25,3 @@
 <div class="runoff-selector-region"></div>
 <div class="runoff-chart-region"></div>
 <div class="runoff-table-region"></div>
-<div class="downloadcsv-link" data-action="download-csv">
-    <i class="fa fa-download"></i> Download this data
-</div>

src/mmw/js/src/modeling/gwlfe/runoff/templates/table.html

@@ -26,3 +26,6 @@
         {% endfor %}
     </tbody>
 </table>
+<div class="downloadcsv-link" data-action="download-csv">
+    <i class="fa fa-download"></i> Download this data
+</div>

src/mmw/js/src/modeling/gwlfe/runoff/views.js

@@ -37,13 +37,7 @@ var ResultView = Marionette.LayoutView.extend({
     },
 
     ui: {
-        downloadCSV: '[data-action="download-csv"]',
         tooltip: 'a.model-results-tooltip',
-        table: '.runoff-table-region'
-    },
-
-    events: {
-        'click @ui.downloadCSV': 'downloadCSV'
     },
 
     modelEvents: {
@@ -112,14 +106,6 @@ var ResultView = Marionette.LayoutView.extend({
         this.activateTooltip();
     },
 
-    downloadCSV: function() {
-        var prefix = 'mapshed_hydrology_',
-            timestamp = new Date().toISOString(),
-            filename = prefix + timestamp;
-
-        this.ui.table.tableExport({ type: 'csv', fileName: filename });
-    },
-
     activateTooltip: function() {
         this.ui.tooltip.popover({
             placement: 'top',
@@ -231,6 +217,15 @@ window.sumFormatter = SumFormatter;
 var TableView = Marionette.CompositeView.extend({
     template: tableTmpl,
 
+    ui: {
+        downloadCSV: '[data-action="download-csv"]',
+        table: 'table'
+    },
+
+    events: {
+        'click @ui.downloadCSV': 'downloadCSV'
+    },
+
     onAttach: function() {
         $('[data-toggle="table"]').bootstrapTable();
     },
@@ -252,9 +247,18 @@ var TableView = Marionette.CompositeView.extend({
             rows: rows,
             monthNames: monthNames,
         };
-    }
+    },
+
+    downloadCSV: function() {
+        var prefix = 'mapshed_hydrology_',
+            timestamp = new Date().toISOString(),
+            filename = prefix + timestamp;
+
+        this.ui.table.tableExport({ type: 'csv', fileName: filename });
+    },
 });
 
 module.exports = {
+    TableView: TableView,
     ResultView: ResultView
 };