s434730/RandomSec
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added summary widget to show the row or record counts.

Browse Source 
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
This commit is contained in:
David Huynh 2010-10-06 19:15:29 +00:00
parent d88dc68aa7
commit 76115a4edd
8 changed files with 80 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
main/webapp/modules/core/MOD-INF/controller.js
View File

@ -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",

1
main/webapp/modules/core/scripts/project.js
View File

@ -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);

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

@ -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];

21
main/webapp/modules/core/scripts/project/summary-widget.js Normal file
View File

@ -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());
};

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

@ -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="sortingControls" align="right"></td>' +
'<td bind="pageSizeControls" align="right"></td>' +
'<td bind="rowRecordControls">Show as ' +
'<span bind="modeSelectors" class="viewPanel-browsingModes">' +
'<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";
var from = (theProject.rowModel.start + 1);
var to = Math.min(theProject.rowModel.filtered, theProject.rowModel.start + theProject.rowModel.limit);
if (theProject.rowModel.filtered == theProject.rowModel.total) {
summaryText = from + ' &ndash; ' + to + ' of <span class="viewPanel-summary-row-count">' + (theProject.rowModel.total) + '</span> ' + units;
} else {
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);
$("#viewPanel-browsingMode-" +
(theProject.recordModel.hasRecords ? 'record-based' : 'row-based')).attr("checked", "checked");
elmts.modeSelectors.buttonset();
elmts.modeSelectors.find("input").change(function() {
ui.browsingEngine.setMode(this.value);
});
};
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>')

12
main/webapp/modules/core/styles/project/browsing.less
View File

@ -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;

9
main/webapp/modules/core/styles/project/summary-widget.less Normal file
View File

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

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

@ -1,9 +1,17 @@
@import-less url("../theme.less");
.viewPanel-summary-row-count {
font-size: 150%;
font-weight: bold;
.viewPanel-browsingModes .ui-button .ui-button-text {
line-height: 1.0;
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;