From 19ba207d27b990b9d48f112139a570bc79c17f2a Mon Sep 17 00:00:00 2001
From: David Huynh <dfhuynh@gmail.com>
Date: Mon, 22 Mar 2010 21:48:36 +0000
Subject: [PATCH] Re-ordered the "other" choices in numeric range facets to
 make better use of space. Changed main layout of whole application so that
 the horizontal scrollbar of the data table is visible without scrolling.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@335 7d457c2a-affb-35e4-300a-418c747d4874
---
 src/main/webapp/scripts/facets/range-facet.js | 46 +++++++----
 src/main/webapp/scripts/project.js            | 64 +++++++++++----
 .../webapp/scripts/project/browsing-engine.js |  3 +
 .../webapp/scripts/project/history-widget.js  |  3 +
 src/main/webapp/scripts/project/menu-bar.js   |  3 +
 .../webapp/scripts/project/process-widget.js  |  3 +
 src/main/webapp/scripts/util/menu.js          |  8 +-
 .../webapp/scripts/views/data-table-view.js   | 80 ++++++++-----------
 src/main/webapp/styles/project.css            | 32 +++++++-
 src/main/webapp/styles/project/browsing.css   | 13 ++-
 src/main/webapp/styles/project/process.css    |  3 +-
 .../webapp/styles/views/data-table-view.css   | 12 ++-
 12 files changed, 173 insertions(+), 97 deletions(-)

diff --git a/src/main/webapp/scripts/facets/range-facet.js b/src/main/webapp/scripts/facets/range-facet.js
index ed92790e2..aa98dde1c 100644
--- a/src/main/webapp/scripts/facets/range-facet.js
+++ b/src/main/webapp/scripts/facets/range-facet.js
@@ -196,6 +196,9 @@ RangeFacet.prototype._renderOtherChoices = function() {
     var tr0 = table.insertRow(0);
     var tr1 = table.insertRow(1);
     
+    /*
+     *  Numeric
+     */
     var td00 = $(tr0.insertCell(0)).attr("width", "1%");
     var numericCheck = $('<input type="checkbox" />').appendTo(td00).change(function() {
         self._selectNumeric = !self._selectNumeric;
@@ -209,21 +212,11 @@ RangeFacet.prototype._renderOtherChoices = function() {
     $('<span>').text("Numeric ").addClass("facet-choice-label").appendTo(td01);
     $('<span>').text(this._numericCount).addClass("facet-choice-count").appendTo(td01);
     
+    /*
+     *  Blank
+     */
     var td02 = $(tr0.insertCell(2)).attr("width", "1%");
-    var nonNumericCheck = $('<input type="checkbox" />').appendTo(td02).change(function() {
-        self._selectNonNumeric = !self._selectNonNumeric;
-        self._updateRest();
-    });
-    if (this._selectNonNumeric) {
-        nonNumericCheck[0].checked = true;
-    }
-    
-    var td03 = $(tr0.insertCell(3));
-    $('<span>').text("Non-numeric ").addClass("facet-choice-label").appendTo(td03);
-    $('<span>').text(this._nonNumericCount).addClass("facet-choice-count").appendTo(td03);
-    
-    var td10 = $(tr1.insertCell(0)).attr("width", "1%");
-    var blankCheck = $('<input type="checkbox" />').appendTo(td10).change(function() {
+    var blankCheck = $('<input type="checkbox" />').appendTo(td02).change(function() {
         self._selectBlank = !self._selectBlank;
         self._updateRest();
     });
@@ -231,10 +224,29 @@ RangeFacet.prototype._renderOtherChoices = function() {
         blankCheck[0].checked = true;
     }
     
-    var td11 = $(tr1.insertCell(1));
-    $('<span>').text("Blank ").addClass("facet-choice-label").appendTo(td11);
-    $('<span>').text(this._blankCount).addClass("facet-choice-count").appendTo(td11);
+    var td03 = $(tr0.insertCell(3));
+    $('<span>').text("Blank ").addClass("facet-choice-label").appendTo(td03);
+    $('<span>').text(this._blankCount).addClass("facet-choice-count").appendTo(td03);
     
+    /*
+     *  Non-Numeric
+     */
+    var td10 = $(tr1.insertCell(0)).attr("width", "1%");
+    var nonNumericCheck = $('<input type="checkbox" />').appendTo(td10).change(function() {
+        self._selectNonNumeric = !self._selectNonNumeric;
+        self._updateRest();
+    });
+    if (this._selectNonNumeric) {
+        nonNumericCheck[0].checked = true;
+    }
+    
+    var td11 = $(tr1.insertCell(1));
+    $('<span>').text("Non-numeric ").addClass("facet-choice-label").appendTo(td11);
+    $('<span>').text(this._nonNumericCount).addClass("facet-choice-count").appendTo(td11);
+    
+    /*
+     *  Error
+     */
     var td12 = $(tr1.insertCell(2)).attr("width", "1%");
     var errorCheck = $('<input type="checkbox" />').appendTo(td12).change(function() {
         self._selectError = !self._selectError;
diff --git a/src/main/webapp/scripts/project.js b/src/main/webapp/scripts/project.js
index 46e46fcec..d2c80d495 100644
--- a/src/main/webapp/scripts/project.js
+++ b/src/main/webapp/scripts/project.js
@@ -48,28 +48,60 @@ function initializeUI(uiState) {
         })
         .appendTo(path);
     
-    var body = $("#body").empty();
+    var body = $("#body").empty().html(
+        '<div bind="viewPanel" class="view-panel"></div>' +
+        '<div bind="facetPanel" class="facet-panel"></div>' +
+        '<div bind="historyPanel" class="history-panel"></div>' +
+        '<div bind="processPanel" class="process-panel"></div>' +
+        '<div class="menu-bar-container" bind="menuBarContainer"><div bind="menuBarPanel" class="menu-bar"></div></div>'
+    );
+    ui = DOM.bind(body);
     
-    var table = document.createElement("table");
-    $(table).attr("cellspacing", 20).css("width", "100%");
-    body.append(table);
-    
-    var tr = table.insertRow(0);
-    var tdLeft = tr.insertCell(0);
-    var tdRight = tr.insertCell(1);
-    tdRight.setAttribute("width", "250");
-    
-    ui.viewPanel = $('<div></div>').appendTo(tdLeft);
-    ui.facetPanel = $('<div></div>').appendTo(tdRight);
-    ui.historyPanel = $('<div></div>').addClass("history-panel").appendTo(document.body);
-    ui.processPanel = $('<div></div>').addClass("process-panel").appendTo(document.body);
-    ui.menuBarPanel = $('<div></div>'); $("#header").after(ui.menuBarPanel);
+    ui.menuBarContainer.css("top", $("#header").outerHeight() + "px");
+    ui.menuBar = new MenuBar(ui.menuBarPanel); // construct the menu first so we can resize everything else
     
+    resize();
+
     ui.browsingEngine = new BrowsingEngine(ui.facetPanel, uiState.facets || []);
     ui.processWidget = new ProcessWidget(ui.processPanel);
     ui.historyWidget = new HistoryWidget(ui.historyPanel);
     ui.dataTableView = new DataTableView(ui.viewPanel);
-    ui.menuBar = new MenuBar(ui.menuBarPanel);
+    
+    $(window).bind("resize", resizeAll);
+}
+
+function resize() {
+    var header = $("#header");
+    var footer = $("#footer");
+    
+    ui.menuBarContainer.css("top", header.outerHeight() + "px");
+
+    var facetPanelWidth = 250;
+    var width = $(window).width();
+    var top = ui.menuBarContainer.offset().top + ui.menuBarContainer.outerHeight();
+    var height = footer.offset().top - top;
+    
+    ui.viewPanel
+        .css("top", top + "px")
+        .css("height", height + "px")
+        .css("left", "0px")
+        .css("width", (width - facetPanelWidth) + "px");
+        
+    ui.facetPanel
+        .css("top", top + "px")
+        .css("height", height + "px")
+        .css("left", (width - facetPanelWidth) + "px")
+        .css("width", facetPanelWidth + "px");
+}
+
+function resizeAll() {
+    resize();
+    
+    ui.menuBar.resize();
+    ui.browsingEngine.resize();
+    ui.processWidget.resize();
+    ui.historyWidget.resize();
+    ui.dataTableView.resize();
 }
 
 Gridworks.reinitializeProjectData = function(f) {
diff --git a/src/main/webapp/scripts/project/browsing-engine.js b/src/main/webapp/scripts/project/browsing-engine.js
index 240e72f57..c8830341e 100644
--- a/src/main/webapp/scripts/project/browsing-engine.js
+++ b/src/main/webapp/scripts/project/browsing-engine.js
@@ -28,6 +28,9 @@ function BrowsingEngine(div, facetConfigs) {
     }
 }
 
+BrowsingEngine.prototype.resize = function() {
+};
+
 BrowsingEngine.prototype.getFacetUIStates = function() {
     var f = [];
     for (var i = 0; i < this._facets.length; i++) {
diff --git a/src/main/webapp/scripts/project/history-widget.js b/src/main/webapp/scripts/project/history-widget.js
index 0b7ae3f40..6c0727bd9 100644
--- a/src/main/webapp/scripts/project/history-widget.js
+++ b/src/main/webapp/scripts/project/history-widget.js
@@ -3,6 +3,9 @@ function HistoryWidget(div) {
     this.update();
 }
 
+HistoryWidget.prototype.resize = function() {
+};
+
 HistoryWidget.prototype.update = function(onDone) {
     var self = this;
     Ajax.chainGetJSON(
diff --git a/src/main/webapp/scripts/project/menu-bar.js b/src/main/webapp/scripts/project/menu-bar.js
index 15b6fd95f..9d323d2e6 100644
--- a/src/main/webapp/scripts/project/menu-bar.js
+++ b/src/main/webapp/scripts/project/menu-bar.js
@@ -3,6 +3,9 @@ function MenuBar(div) {
     this._initializeUI();
 }
 
+MenuBar.prototype.resize = function() {
+};
+
 MenuBar.prototype._initializeUI = function() {
     this._mode = "inactive";
     this._menuItemRecords = [];
diff --git a/src/main/webapp/scripts/project/process-widget.js b/src/main/webapp/scripts/project/process-widget.js
index e6f165ab5..aa1438284 100644
--- a/src/main/webapp/scripts/project/process-widget.js
+++ b/src/main/webapp/scripts/project/process-widget.js
@@ -9,6 +9,9 @@ function ProcessWidget(div) {
     this.update({});
 }
 
+ProcessWidget.prototype.resize = function() {
+};
+
 ProcessWidget.prototype.update = function(updateOptions, onDone) {
     for (var n in updateOptions) {
         if (updateOptions.hasOwnProperty(n)) {
diff --git a/src/main/webapp/scripts/util/menu.js b/src/main/webapp/scripts/util/menu.js
index a88ef4e6b..bc5e9fd0e 100644
--- a/src/main/webapp/scripts/util/menu.js
+++ b/src/main/webapp/scripts/util/menu.js
@@ -51,8 +51,8 @@ MenuSystem.createMenuItem = function() {
 
 MenuSystem.positionMenuAboveBelow = function(menu, elmt) {
     var offset = elmt.offset();
-    var windowWidth = $(document.body).innerWidth();
-    var windowHeight = $(document.body).innerHeight();
+    var windowWidth = $(window).width();
+    var windowHeight = $(window).height();
     
     if (offset.top + elmt.outerHeight() - document.body.scrollTop + menu.outerHeight() > windowHeight - 10) {
         menu.css("top", (offset.top - menu.outerHeight()) + "px");
@@ -69,8 +69,8 @@ MenuSystem.positionMenuAboveBelow = function(menu, elmt) {
 
 MenuSystem.positionMenuLeftRight = function(menu, elmt) {
     var offset = elmt.offset();
-    var windowWidth = $(document.body).innerWidth();
-    var windowHeight = $(document.body).innerHeight();
+    var windowWidth = $(window).width();
+    var windowHeight = $(window).height();
     
     if (offset.top - document.body.scrollTop + menu.outerHeight() > windowHeight - 10) {
         menu.css("top", (offset.top + elmt.outerHeight() - menu.outerHeight()) + "px");
diff --git a/src/main/webapp/scripts/views/data-table-view.js b/src/main/webapp/scripts/views/data-table-view.js
index 13264442d..a25636f6a 100644
--- a/src/main/webapp/scripts/views/data-table-view.js
+++ b/src/main/webapp/scripts/views/data-table-view.js
@@ -4,18 +4,15 @@ function DataTableView(div) {
     this._showRecon = true;
     this._collapsedColumnNames = {};
     
-    this._initializeUI();
     this._showRows(0);
 }
 
-DataTableView.prototype._initializeUI = function() {
-    this._div.addClass("view-panel");
+DataTableView.prototype.resize = function() {
+    var topHeight = this._div.find(".viewPanel-summary").outerHeight(true) + this._div.find(".viewPanel-pagingControls").outerHeight(true);
     
-    var self = this;
-    $(window).resize(function() {
-        var dataTableContainer = self._div.find(".data-table-container");
-        dataTableContainer.hide().width(self._div.width() + "px").show();
-    });
+    this._div.find(".data-table-container")
+        .css("height", (this._div.innerHeight() - topHeight - 1) + "px")
+        .css("display", "block");
 };
 
 DataTableView.prototype.update = function(onDone) {
@@ -24,18 +21,29 @@ DataTableView.prototype.update = function(onDone) {
 
 DataTableView.prototype.render = function() {
     var self = this;
-    var container = this._div;
     
-    var scrollLeft = 0;
-    var oldTableDiv = container.find(".data-table-container");
-    if (oldTableDiv.length > 0) {
-        scrollLeft = oldTableDiv[0].scrollLeft;
-    }
+    var oldTableDiv = this._div.find(".data-table-container");
+    var scrollLeft = (oldTableDiv.length > 0) ? oldTableDiv[0].scrollLeft : 0;
     
-    container.empty();
+    var html = $(
+        '<div bind="summaryDiv" class="viewPanel-summary"></div>' +
+        '<table bind="pagingControls" width="100%" class="viewPanel-pagingControls"><tr><td align="right"></td><td align="right"></td></tr></table>' +
+        '<div bind="dataTableContainer" class="data-table-container" style="display: none;"><table bind="table" class="data-table" cellspacing="0"></table></div>'
+    );
+    var elmts = DOM.bind(html);
     
-    var divSummary = $('<div></div>').addClass("viewPanel-summary").appendTo(container);
+    this._renderSummaryText(elmts.summaryDiv);
+    this._renderPagingControls(elmts.pagingControls[0]);
+    this._renderDataTable(elmts.table[0]);
     
+    this._div.empty().append(html);
+    
+    this.resize();
+        
+    elmts.dataTableContainer[0].scrollLeft = scrollLeft;
+};
+
+DataTableView.prototype._renderSummaryText = function(elmt) {
     var summaryText;
     
     var from = (theProject.rowModel.start + 1);
@@ -46,15 +54,14 @@ DataTableView.prototype.render = function() {
         summaryText = from + ' to ' + to + ' of <span class="viewPanel-summary-row-count">' + 
             (theProject.rowModel.filtered) + '</span> rows (filtered from ' + (theProject.rowModel.total) + ' rows total)';
     }
-    $('<span>').html(summaryText).appendTo(divSummary);
+    $('<span>').html(summaryText).appendTo(elmt);
+};
+
+DataTableView.prototype._renderPagingControls = function(table) {
+    var self = this;
     
-    /*
-     *  Paging controls
-     */
-    
-    var pagingControls = $('<table width="100%"><tr><td align="right"></td><td align="right"></td></tr></table>').addClass("viewPanel-pagingControls").appendTo(container);
-    var pagingControls0 = pagingControls[0].rows[0].cells[0];
-    var pagingControls1 = pagingControls[0].rows[0].cells[1];
+    var pagingControls0 = table.rows[0].cells[0];
+    var pagingControls1 = table.rows[0].cells[1];
     
     var firstPage = $('<a href="javascript:{}">&laquo; first</a>').appendTo(pagingControls0);
     var previousPage = $('<a href="javascript:{}">&laquo; previous</a>').appendTo(pagingControls0);
@@ -93,20 +100,10 @@ DataTableView.prototype.render = function() {
     for (var i = 0; i < sizes.length; i++) {
         renderPageSize(i);
     }
-    
-    /*============================================================
-     *  Data Table
-     *============================================================
-     */
-    var tableDiv = $('<div></div>')
-        .addClass("data-table-container")
-        .css("width", container.width() + "px")
-        .appendTo(container);
-    
-    var table = document.createElement("table");
-    $(table)
-        .attr("cellspacing", "0")
-        .addClass("data-table");
+};
+
+DataTableView.prototype._renderDataTable = function(table) {
+    var self = this;
     
     var columns = theProject.columnModel.columns;
     var columnGroups = theProject.columnModel.columnGroups;
@@ -288,13 +285,6 @@ DataTableView.prototype.render = function() {
         }
         renderRow(tr, r, row, even);
     }
-    
-    /*
-     *  Finally, inject the table into the DOM
-     */
-    $(table).appendTo(tableDiv);
-    
-    tableDiv[0].scrollLeft = scrollLeft;
 };
 
 DataTableView.prototype._showRows = function(start, onDone) {
diff --git a/src/main/webapp/styles/project.css b/src/main/webapp/styles/project.css
index 8d591439b..3a9dbbab6 100644
--- a/src/main/webapp/styles/project.css
+++ b/src/main/webapp/styles/project.css
@@ -1,11 +1,39 @@
 #body {
-    padding: 20px;
+    padding: 0;
+    margin: 0;
 }
 
 #loading-message {
     text-align: center;
     font-size: 300%;
     color: #faa;
-    margin: 1in;
+    padding: 1in;
     font-style: italic;
 }
+
+#footer {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    z-index: 1000;
+    background: #eee;
+}
+
+.menu-bar-container {
+    position: fixed;
+    left: 0px;
+    width: 100%;
+}
+
+.view-panel {
+    position: fixed;
+    background: white;
+    overflow: hidden;
+}
+
+.facet-panel {
+    position: fixed;
+    background: white;
+    overflow: auto;
+}
diff --git a/src/main/webapp/styles/project/browsing.css b/src/main/webapp/styles/project/browsing.css
index 6aef30821..a0153969d 100644
--- a/src/main/webapp/styles/project/browsing.css
+++ b/src/main/webapp/styles/project/browsing.css
@@ -1,21 +1,18 @@
-.browsing-panel {
-}
 .browsing-panel-indicator {
-    clear: both;
     display: none;
-    margin: 1em;
+    margin: 0 1em;
+    margin-top: 50px;
     text-align: center;
 }
 .browsing-panel-controls {
-    clear: both;
     display: none;
-    margin: 1em;
+    margin: 0 1em;
+    margin-top: 50px;
     text-align: center;
 }
 
 ul.facets-container {
-    margin: 0;
-    padding: 0;
+    padding: 0 1em;
 }
 
 li.facet-container {
diff --git a/src/main/webapp/styles/project/process.css b/src/main/webapp/styles/project/process.css
index e2d7749fc..4e0da563a 100644
--- a/src/main/webapp/styles/project/process.css
+++ b/src/main/webapp/styles/project/process.css
@@ -1,8 +1,9 @@
 .process-panel {
-    position: absolute;
+    position: fixed;
     top: -1px;
     width: 100%;
     text-align: center;
+    z-index: 1000;
 }
 
 .process-panel-inner {
diff --git a/src/main/webapp/styles/views/data-table-view.css b/src/main/webapp/styles/views/data-table-view.css
index e1eae5e12..0dc0b1efc 100644
--- a/src/main/webapp/styles/views/data-table-view.css
+++ b/src/main/webapp/styles/views/data-table-view.css
@@ -1,11 +1,12 @@
-.view-panel {
-}
 .data-table-container {
     border: 1px solid #ccc;
-    overflow-x: auto;
+    overflow: auto;
 }
 
 table.data-table {
+    margin: 0px;
+    padding: 0px;
+    border-collapse: collapse;
 }
 
 table.data-table > tbody > tr > td {
@@ -81,6 +82,7 @@ a.column-header-menu:hover {
 
 
 .viewPanel-summary {
+    margin: 1em 2em 0em 2em;
 }
 .viewPanel-summary-row-count {
     font-size: 150%;
@@ -89,7 +91,9 @@ a.column-header-menu:hover {
 
 .viewPanel-pagingControls {
     text-align: center;
-    margin: 1em 0;
+}
+.viewPanel-pagingControls td {
+    padding: 1em 2em;
 }
 
 div.data-table-cell-content {