Enable toggling between analyze and BigCZ results

Allow the user to switch between the AoI analyze results, and the BigCZ
search page. This implementation is based on the analyze and modeling
tabs of MMW. Some views, templates, and CSS rules from that implementation
were duplicated and adjusted rather than abstracting the MMW
implementation and making it reusable.

Refs #2095

src/mmw/js/src/data_catalog/controllers.js

@@ -44,11 +44,14 @@ var DataCatalogController = {
             })
         ]);
 
-        var view = new views.DataCatalogWindow({
-            model: form,
-            collection: catalogs
-        });
-        App.rootView.sidebarRegion.show(view);
+        var resultsWindow = new views.ResultsWindow({
+                model: form,
+                collection: catalogs
+            }),
+            header = new views.HeaderView();
+
+        App.rootView.subHeaderRegion.show(header);
+        App.rootView.sidebarRegion.show(resultsWindow);
     },
 
     dataCatalogCleanUp: function() {

src/mmw/js/src/data_catalog/templates/header.html

@@ -0,0 +1,29 @@
+<header id="model-header" class="bigcz">
+    <div id="project-menu-region">
+        <div class="project">
+            <div class="project-left">
+                <div class="project-title">
+                    <button class="btn dropdown-toggle project-dropdown" type="button" data-toggle="dropdown" aria-expanded="true">
+                        {{ aoiName }}
+                    </button>
+                </div>
+                <div class="model-analyze-toggle-tab-header" role="tabpanel">
+                    <ul class="nav nav-tabs" role="tablist">
+                        <li role="presentation">
+                            <a aria-controls="home" aria-expanded="false"
+                               data-toggle="tab" href="#analyze-tab-contents" role="tab">
+                                <div> Analyze </div>
+                            </a>
+                        </li>
+                        <li class="active" role="presentation">
+                            <a aria-controls="home" aria-expanded="true"
+                               data-toggle="tab" href="#data-catalog-tab-contents" role="tab">
+                                <div> Data </div>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</header>

src/mmw/js/src/data_catalog/templates/resultsWindow.html

@@ -0,0 +1,6 @@
+<div class="tab-contents-region">
+    <div class="tab-content">
+        <div role="tabpanel" id="analyze-tab-contents" class="tab-pane data-catalog-stage-results-tab-pane"></div>
+        <div role="tabpanel" id="data-catalog-tab-contents" class="tab-pane data-catalog-stage-results-tab-pane"></div>
+    </div>
+</div>

src/mmw/js/src/data_catalog/views.js

@@ -5,6 +5,7 @@ var $ = require('jquery'),
     Marionette = require('../../shim/backbone.marionette'),
     moment = require('moment'),
     App = require('../app'),
+    analyzeViews = require('../analyze/views.js'),
     settings = require('../core/settings'),
     utils = require('./utils'),
     errorTmpl = require('./templates/error.html'),
@@ -14,7 +15,9 @@ var $ = require('jquery'),
     cuahsiSearchResultTmpl = require('./templates/cuahsiSearchResult.html'),
     tabContentTmpl = require('./templates/tabContent.html'),
     tabPanelTmpl = require('./templates/tabPanel.html'),
-    windowTmpl = require('./templates/window.html');
+    headerTmpl = require('./templates/header.html'),
+    windowTmpl = require('./templates/window.html'),
+    resultsWindowTmpl = require('./templates/resultsWindow.html');
 
 var ENTER_KEYCODE = 13,
     PAGE_SIZE = settings.get('data_catalog_page_size'),
@@ -24,6 +27,44 @@ var ENTER_KEYCODE = 13,
         cuahsi: cuahsiSearchResultTmpl,
     };
 
+var HeaderView = Marionette.LayoutView.extend({
+    template: headerTmpl,
+
+    templateHelpers: function() {
+        return {
+            aoiName: App.map.get('areaOfInterestName')
+        };
+    }
+});
+
+var ResultsWindow = Marionette.LayoutView.extend({
+    id: 'model-output-wrapper',
+    tagName: 'div',
+    template: resultsWindowTmpl,
+
+    regions: {
+        analyzeRegion: '#analyze-tab-contents',
+        dataCatalogRegion: '#data-catalog-tab-contents'
+    },
+
+    onShow: function() {
+        var analyzeCollection = App.getAnalyzeCollection();
+
+        this.analyzeRegion.show(new analyzeViews.AnalyzeWindow({
+            collection: analyzeCollection
+        }));
+
+        this.dataCatalogRegion.show(new DataCatalogWindow({
+            model: this.model,
+            collection: this.collection
+        }));
+    },
+
+    onRender: function() {
+        this.$el.find('.tab-pane:last').addClass('active');
+    }
+});
+
 var DataCatalogWindow = Marionette.LayoutView.extend({
     template: windowTmpl,
     className: 'data-catalog-window',
@@ -386,5 +427,6 @@ var PagerView = Marionette.ItemView.extend({
 });
 
 module.exports = {
-    DataCatalogWindow: DataCatalogWindow
+    HeaderView: HeaderView,
+    ResultsWindow: ResultsWindow
 };

src/mmw/sass/base/_header.scss

@@ -82,6 +82,10 @@ header {
   background-color: $ui-secondary;
   height: $height-xl*2;
 
+  &.bigcz {
+    height: $height-xl;
+  }
+
     .project {
       position: relative;
       top: -15px;

src/mmw/sass/components/_tabs.scss

@@ -57,6 +57,13 @@
     }
 }
 
+.data-catalog-stage-results-tab-pane {
+    .tab-content {
+      // Set a specific height to allow y-scroll:
+      height: 100% !important;
+    }
+}
+
 //Model Output Tabs
 .output-tabs-wrapper {
   .nav-tabs {

src/mmw/sass/pages/_data-catalog.scss

@@ -6,7 +6,7 @@
     flex-direction: column;
     position: absolute;
     bottom: 0;
-    top: 44px;
+    top: 90px;
 
     .tab-contents-region {
         background-color: rgba(0, 0, 0, 0.06);
@@ -16,6 +16,8 @@
     }
 
     .result-region {
+        height: auto !important;
+        width: auto !important;
         padding: 6px 0px;
 
         &.paginated {