Added summary widget to show the row or record counts.

Moved browsing mode toggles from browsing panel to view panel.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@1435 7d457c2a-affb-35e4-300a-418c747d4874

main/webapp/modules/core/MOD-INF/controller.js

@@ -206,6 +206,7 @@ function init() {
             "scripts/widgets/slider-widget.js",
 
             "scripts/project/extension-bar.js",
+            "scripts/project/summary-widget.js",
             "scripts/project/exporters.js",
             "scripts/project/browsing-engine.js",
             "scripts/project/scripting.js",
@@ -262,6 +263,7 @@ function init() {
             "styles/project/browsing.less",
             "styles/project/process.less",
             "styles/project/extension-bar.less",
+            "styles/project/summary-widget.less",
             
             "styles/widgets/history.less",
             "styles/widgets/histogram-widget.less",

main/webapp/modules/core/scripts/project.js

@@ -89,6 +89,7 @@ function initializeUI(uiState) {
     resize();
     resizeTabs();
     
+    ui.summaryWidget = new SummaryWidget(ui.summaryBar);
     ui.browsingEngine = new BrowsingEngine(ui.facetPanel, uiState.facets || []);
     ui.processWidget = new ProcessWidget(ui.processPanel);
     ui.historyWidget = new HistoryWidget(ui.historyPanel, ui.historyTabHeader);

main/webapp/modules/core/scripts/project/browsing-engine.js

@@ -1,7 +1,8 @@
 function BrowsingEngine(div, facetConfigs) {
     this._div = div;
-    this._facets = [];
+    this._mode = theProject.recordModel.hasRecords ? 'record-based' : 'row-based';
     
+    this._facets = [];
     this._initializeUI();
     
     if (facetConfigs.length > 0) {
@@ -40,7 +41,6 @@ BrowsingEngine.prototype.resize = function() {
         var height = 
             this._div.height() -
             this._div.find(".browsing-panel-header").outerHeight(true) -
-            this._div.find(".browsing-panel-modes").outerHeight(true) -
             bodyPaddings;
         
         body.css("height", height + "px");
@@ -67,13 +67,6 @@ BrowsingEngine.prototype._initializeUI = function() {
             '<p>by choosing a facet or filter method from the menus at the top of each column.</p>' +
             '<p>Not sure how to get started? <a href="http://vimeo.com/groups/gridworks/videos" target="_blank">Watch these screencasts</a>.</p>' +
         '</div>' +
-        '<div class="browsing-panel-modes">' +
-            'Browse by ' +
-            '<span bind="modeSelectors">' + 
-                '<input type="radio" id="browsing-panel-mode-row-based" name="browsing-panel-mode" value="row-based" /><label for="browsing-panel-mode-row-based">rows</label>' +
-                '<input type="radio" id="browsing-panel-mode-record-based" name="browsing-panel-mode" value="record-based" /><label for="browsing-panel-mode-record-based">records</label>' +
-            '</span>' +
-        '</div>' +
         '<div class="browsing-panel-header" bind="header">' +
             '<div class="browsing-panel-indicator" bind="indicator">' +
                 '<img src="images/small-spinner.gif" /> refreshing facets ...' +
@@ -101,15 +94,7 @@ BrowsingEngine.prototype._initializeUI = function() {
             self._updateFacetOrder();
         }
     });
-    
-    $("#browsing-panel-mode-" + 
-        (theProject.recordModel.hasRecords ? 'record-based' : 'row-based')).attr("checked", "checked");
         
-    this._elmts.modeSelectors.buttonset();
-    this._elmts.modeSelectors.find("input").change(function() {
-        Refine.update({ engineChanged: true });
-    });
-    
     this._elmts.refreshLink.click(function() { self.update(); });
     this._elmts.resetLink.click(function() { self.reset(); });
     this._elmts.removeLink.click(function() { self.remove(); });
@@ -131,13 +116,20 @@ BrowsingEngine.prototype._updateFacetOrder = function() {
 };
 
 BrowsingEngine.prototype.getMode = function() {
-    return this._elmts.modeSelectors.find("input:checked")[0].value;
+    return this._mode;
+};
+
+BrowsingEngine.prototype.setMode = function(mode) {
+    if (this._mode != mode) {
+        this._mode = mode;
+        Refine.update({ engineChanged: true });
+    }
 };
 
 BrowsingEngine.prototype.getJSON = function(keepUnrestrictedFacets, except) {
     var a = {
         facets: [],
-        mode: this._elmts.modeSelectors.find("input:checked")[0].value
+        mode: this._mode
     };
     for (var i = 0; i < this._facets.length; i++) {
         var facet = this._facets[i];

main/webapp/modules/core/scripts/project/summary-widget.js

@@ -0,0 +1,21 @@
+function SummaryWidget(div) {
+    this._div = div;
+    this._initializeUI();
+}
+
+SummaryWidget.prototype._initializeUI = function() {
+    
+};
+
+SummaryWidget.prototype.updateResultCount = function() {
+    var summaryText;
+    var units = theProject.rowModel.mode == "row-based" ? "rows" : "records";
+    if (theProject.rowModel.filtered == theProject.rowModel.total) {
+        summaryText = '<span class="summaryWidget-rowCount">' + (theProject.rowModel.total) + ' ' + units + '</span>';
+    } else {
+        summaryText = '<span class="summaryWidget-rowCount">' + 
+            (theProject.rowModel.filtered) + ' matching ' + units + '</span>' + ' (' + (theProject.rowModel.total) + ' total)';
+    }
+    
+    $('<span>').html(summaryText).appendTo(this._div.empty());
+};

main/webapp/modules/core/scripts/views/data-table/data-table-view.js

@@ -1,7 +1,7 @@
 function DataTableView(div) {
     this._div = div;
     
-    this._pageSize = 20;
+    this._pageSize = 10;
     this._showRecon = true;
     this._collapsedColumnNames = {};
     this._sorting = { criteria: [] };
@@ -35,9 +35,14 @@ DataTableView.prototype.render = function() {
     var html = $(
         '<table class="viewPanel-header">' +
             '<tr>' +
-                '<td bind="summary"></td>' +
+                '<td bind="rowRecordControls">Show as ' +
-                '<td bind="sortingControls" align="right"></td>' +
+                    '<span bind="modeSelectors" class="viewPanel-browsingModes">' + 
-                '<td bind="pageSizeControls" align="right"></td>' +
+                        '<input type="radio" id="viewPanel-browsingMode-row-based" name="viewPanel-browsingMode" value="row-based" /><label for="viewPanel-browsingMode-row-based">rows</label>' +
+                        '<input type="radio" id="viewPanel-browsingMode-record-based" name="viewPanel-browsingMode" value="record-based" /><label for="viewPanel-browsingMode-record-based">records</label>' +
+                    '</span>' +
+                '</td>' +
+                '<td bind="pageSizeControls"></td>' +
+                '<td bind="sortingControls" align="center"></td>' +
                 '<td bind="pagingControls" align="right"></td>' +
             '</tr>' +
         '</table>' +
@@ -45,7 +50,8 @@ DataTableView.prototype.render = function() {
     );
     var elmts = DOM.bind(html);
     
-    this._renderSummaryText(elmts.summary);
+    ui.summaryWidget.updateResultCount();
+    
     this._renderPagingControls(elmts.pageSizeControls, elmts.pagingControls);
     this._renderDataTable(elmts.table[0]);
     
@@ -58,21 +64,14 @@ DataTableView.prototype.render = function() {
     this.resize();
         
     elmts.dataTableContainer[0].scrollLeft = scrollLeft;
-};
-
-DataTableView.prototype._renderSummaryText = function(elmt) {
-    var summaryText;
     
-    var units = theProject.rowModel.mode == "row-based" ? "rows" : "records";
+    $("#viewPanel-browsingMode-" + 
-    var from = (theProject.rowModel.start + 1);
+        (theProject.recordModel.hasRecords ? 'record-based' : 'row-based')).attr("checked", "checked");
-    var to = Math.min(theProject.rowModel.filtered, theProject.rowModel.start + theProject.rowModel.limit);
+    
-    if (theProject.rowModel.filtered == theProject.rowModel.total) {
+    elmts.modeSelectors.buttonset();
-        summaryText = from + ' &ndash; ' + to + ' of <span class="viewPanel-summary-row-count">' + (theProject.rowModel.total) + '</span> ' + units;
+    elmts.modeSelectors.find("input").change(function() {
-    } else {
+        ui.browsingEngine.setMode(this.value);
-        summaryText = from + ' &ndash; ' + to + ' of <span class="viewPanel-summary-row-count">' + 
+    });
-            (theProject.rowModel.filtered) + '</span> matching ' + units + ' (' + (theProject.rowModel.total) + ' total)';
-    }
-    $('<span>').html(summaryText).appendTo(elmt);
 };
 
 DataTableView.prototype._renderSortingControls = function(sortingControls) {
@@ -91,6 +90,9 @@ DataTableView.prototype._renderSortingControls = function(sortingControls) {
 DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagingControls) {
     var self = this;
     
+    var from = (theProject.rowModel.start + 1);
+    var to = Math.min(theProject.rowModel.filtered, theProject.rowModel.start + theProject.rowModel.limit);
+    
     var firstPage = $('<a href="javascript:{}">&laquo; first</a>').appendTo(pagingControls);
     var previousPage = $('<a href="javascript:{}">&laquo; previous</a>').appendTo(pagingControls);
     if (theProject.rowModel.start > 0) {
@@ -100,7 +102,9 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin
         firstPage.addClass("inaction");
         previousPage.addClass("inaction");
     }
-    $('<span> &bull; </span>').appendTo(pagingControls);
+    
+    $('<span>').addClass("viewPanel-pagingControls-currentPageInfo").html(" " + from + " &mdash; " + to + " ").appendTo(pagingControls);
+    
     var nextPage = $('<a href="javascript:{}">next page &raquo;</a>').appendTo(pagingControls);
     var lastPage = $('<a href="javascript:{}">last &raquo;</a>').appendTo(pagingControls);
     if (theProject.rowModel.start + theProject.rowModel.limit < theProject.rowModel.filtered) {
@@ -112,7 +116,7 @@ DataTableView.prototype._renderPagingControls = function(pageSizeControls, pagin
     }
     
     $('<span>Show </span>').appendTo(pageSizeControls);
-    var sizes = [ 10, 20, 25, 50 ];
+    var sizes = [ 5, 10, 25, 50 ];
     var renderPageSize = function(index) {
         var pageSize = sizes[index];
         var a = $('<a href="javascript:{}"></a>')

main/webapp/modules/core/styles/project/browsing.less

@@ -1,17 +1,5 @@
 @import-less url("../theme.less");
 
-.browsing-panel-modes {
-    padding-bottom: 0.5em;
-    text-align: center;
-}
-.browsing-panel-modes .ui-button .ui-button-text {
-    line-height: 1.0;
-    text-decoration: line-through;
-}
-.browsing-panel-modes .ui-button.ui-state-active .ui-button-text {
-    text-decoration: none;
-}
-
 .browsing-panel-header {
     padding-bottom: 0.5em;
     position: relative;

main/webapp/modules/core/styles/project/summary-widget.less

@@ -0,0 +1,9 @@
+@import-less url("../theme.less");
+
+#summary-bar {
+}
+
+.summaryWidget-rowCount {
+  font-size: 150%;
+  font-weight: bold;
+}

main/webapp/modules/core/styles/views/data-table-view.less

@@ -1,9 +1,17 @@
 @import-less url("../theme.less");
 
-.viewPanel-summary-row-count {
+.viewPanel-browsingModes .ui-button .ui-button-text {
-    font-size: 150%;
+    line-height: 1.0;
-    font-weight: bold;
+    text-decoration: line-through;
 }
+.viewPanel-browsingModes .ui-button.ui-state-active .ui-button-text {
+    text-decoration: none;
+}
+
+.viewPanel-pagingControls-currentPageInfo {
+    font-size: 150%;
+}
+
 a.viewPanel-pagingControls-page {
     margin: 0 2px;
     padding: 2px 4px 3px 4px;