Merge pull request #2119 from WikiWatershed/cpc/search-analyze-naviga…

…tion Enable toggling between analyze and BigCZ results
WikiWatershed · Aug 8, 2017 · a9475f8 · a9475f8
2 parents 1da4051 + df4e326
commit a9475f8
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 16 deletions.
diff --git a/src/mmw/js/src/data_catalog/controllers.js b/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() {

diff --git a/src/mmw/js/src/data_catalog/templates/header.html b/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>
diff --git a/src/mmw/js/src/data_catalog/templates/resultsWindow.html b/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>
diff --git a/src/mmw/js/src/data_catalog/views.js b/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',
@@ -365,15 +406,15 @@ var PagerView = Marionette.ItemView.extend({
     },
 
     templateHelpers: function() {
-         var resultCount = this.model.get('resultCount'),
-             page = this.model.get('page'),
-             lastPage = Math.ceil(resultCount / PAGE_SIZE);
+        var resultCount = this.model.get('resultCount'),
+            page = this.model.get('page'),
+            lastPage = Math.ceil(resultCount / PAGE_SIZE);
 
-         return {
-             has_results: resultCount > 0,
-             has_previous: page > 1,
-             has_next: page < lastPage,
-         };
+        return {
+            has_results: resultCount > 0,
+            has_previous: page > 1,
+            has_next: page < lastPage,
+        };
     },
 
     previousPage: function() {
@@ -386,5 +427,6 @@ var PagerView = Marionette.ItemView.extend({
 });
 
 module.exports = {
-    DataCatalogWindow: DataCatalogWindow
+    HeaderView: HeaderView,
+    ResultsWindow: ResultsWindow
 };
diff --git a/src/mmw/sass/base/_header.scss b/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;

diff --git a/src/mmw/sass/components/_tabs.scss b/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 {

diff --git a/src/mmw/sass/pages/_data-catalog.scss b/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 {