Create hydrology tables

[kellyi]

Overview

This PR implements the hydrology tables as depicted below. Was able to reuse the the table view from TR55, with the data adjusted to reformat it for GWLFE.

The bulk of the change here is a reduce function to transform the GWLFE data into a shape for display in the tables.

Connects #2915

Demo

Testing Instructions

• serve this branch, then visit a MapShed project and open the compare view
• toggle the hydrology table and then verify that you see data and can toggle through the attributes using the selection box

[kellyi]

Committed this by mistake but I guess it'll be removed semi-immediately anyway.

[kellyi]

Also committed by mistake, but this function's going to get removed when the water quality work is in.

[rajadain]

This looks really good! I noticed that the pagination wasn't working out of the box as I expected, so I looked into the code, and found that extending the existing TableRowView and TableView works just as well, makes pagination work, and is more compact:

diff --git a/src/mmw/js/src/compare/views.js b/src/mmw/js/src/compare/views.js
index 780a7634..79195ba4 100644
--- a/src/mmw/js/src/compare/views.js
+++ b/src/mmw/js/src/compare/views.js
@@ -747,32 +747,6 @@ var GWLFEHydrologyChartView = Marionette.CollectionView.extend({
     childView: LineChartRowView,
 });
 
-var GWLFEHydrologyTableRowView = Marionette.ItemView.extend({
-    models: models.MonthlyTableRowModel,
-    className: 'compare-table-row -hydrology',
-    template: compareTableRowTmpl,
-
-    modelEvents: {
-        'change': 'render',
-    },
-
-    templateHelpers: function() {
-        var selectedAttribute = this.model.get('selectedAttribute');
-
-        return {
-            values: this.model
-                .get('values')
-                .map(function(v) {
-                    return v[selectedAttribute];
-                }),
-        };
-    },
-});
-
-var GWLFEHydrologyTableView = Marionette.CollectionView.extend({
-    childView: GWLFEHydrologyTableRowView,
-});
-
 var TR55ChartView = Marionette.CollectionView.extend({
     childView: BarChartRowView,
 
@@ -856,6 +830,22 @@ var TableView = Marionette.CollectionView.extend({
     }
 });
 
+var GWLFEHydrologyTableRowView = TableRowView.extend({
+    className: 'compare-table-row -hydrology',
+
+    templateHelpers: function() {
+        var selectedAttribute = this.model.get('selectedAttribute');
+
+        return {
+            values: this.model.get('values').pluck(selectedAttribute)
+        };
+    },
+});
+
+var GWLFEHydrologyTableView = TableView.extend({
+    childView: GWLFEHydrologyTableRowView,
+});
+
 var CompareWindow = Marionette.LayoutView.extend({
     //model: modelingModels.ProjectModel,
 

I would recommend adding that change and this will be good to merge! Will take care of the other demo stuff in this PR in upcoming Water Quality PRs.

[kellyi]

Sounds good to me. I'm making that change & will amend the existing commit to include it.

For whatever reason I've not been able to get .pluck to work, so I'll keep the .map op instead.

[kellyi]

Here's the table view with the column toggles:

[rajadain]

+1 tested. Working well. Great job!

[kellyi]

Great! Thanks for your help with this!