More polishing on the facet panel.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@498 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-04-18 00:56:09 +00:00
parent 3adc5a8e84
commit 72f1f0956e
10 changed files with 62 additions and 39 deletions

View File

@ -28,6 +28,7 @@ public class ColumnModel implements Jsonizable {
transient protected Map<Integer, Column> _cellIndexToColumn;
transient protected List<ColumnGroup> _rootColumnGroups;
transient protected List<String> _columnNames;
transient boolean _hasDependentRows;
public ColumnModel() {
internalInitialize();
@ -93,6 +94,8 @@ public class ColumnModel implements Jsonizable {
writer.object();
writer.key("hasDependentRows"); writer.value(_hasDependentRows);
writer.key("columns");
writer.array();
for (Column column : columns) {

View File

@ -297,7 +297,7 @@ public class Project {
}
}
if (row.contextRowSlots != null) {
if (row.contextRowSlots != null && row.contextRowSlots.length > 0) {
row.recordIndex = -1;
row.contextRows = new ArrayList<Integer>();
for (int index : row.contextRowSlots) {
@ -306,6 +306,8 @@ public class Project {
}
}
Collections.sort(row.contextRows);
columnModel._hasDependentRows = true;
} else {
row.recordIndex = recordIndex++;
}

View File

@ -110,7 +110,7 @@ ListFacet.prototype.render = function() {
} catch (e) {
}
var container = this._div.empty().html(
var container = this._div.empty().show().html(
'<div class="facet-title">' +
'<img src="images/close.png" title="Remove this facet" class="facet-choice-link" bind="removeButton"/>' +
'<span bind="titleSpan"></span>' +

View File

@ -110,7 +110,7 @@ RangeFacet.prototype.hasSelection = function() {
RangeFacet.prototype._initializeUI = function() {
var self = this;
var container = this._div.empty();
var container = this._div.empty().show();
var headerDiv = $('<div></div>').addClass("facet-title").appendTo(container);
$('<span></span>').text(this._config.name).appendTo(headerDiv);

View File

@ -44,7 +44,7 @@ ScatterplotFacet.prototype.hasSelection = function() {
ScatterplotFacet.prototype._initializeUI = function() {
var self = this;
var container = this._div.empty();
var container = this._div.empty().show();
var headerDiv = $('<div></div>').addClass("facet-title").appendTo(container);
$('<span></span>').text(this._config.name).appendTo(headerDiv);

View File

@ -48,15 +48,17 @@ TextSearchFacet.prototype.hasSelection = function() {
TextSearchFacet.prototype._initializeUI = function() {
var self = this;
this._div.empty().html(
this._div.empty().show().html(
'<div class="facet-title">' +
'<img bind="removeButton" src="images/close.png" title="Remove this facet" class="facet-choice-link" />' +
'<span>' + this._config.name + '</span>' +
'</div>' +
'<div class="facet-text-body"><div class="grid-layout layout-tightest layout-full"><table>' +
'<tr><td colspan="2"><div class="input-container"><input bind="input" /></div></td></tr>' +
'<tr><td width="1%"><input type="checkbox" bind="caseSensitiveCheckbox" /></td><td>case sensitive</td></tr>' +
'<tr><td width="1%"><input type="checkbox" bind="regexCheckbox" /></td><td>regular expression</td></tr>' +
'<tr><td colspan="4"><div class="input-container"><input bind="input" /></div></td></tr>' +
'<tr>' +
'<td width="1%"><input type="checkbox" bind="caseSensitiveCheckbox" /></td><td>case sensitive</td>' +
'<td width="1%"><input type="checkbox" bind="regexCheckbox" /></td><td>regular expression</td>' +
'</tr>' +
'</table></div></div>'
);

View File

@ -47,21 +47,31 @@ BrowsingEngine.prototype._initializeUI = function() {
var self = this;
this._div.html(
'<div class="browsing-panel-header">' +
'<div class="browsing-panel-help" bind="help">' +
'<h1>Explore data ...</h1>' +
'<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? Watch this screencast.</p>' +
'</div>' +
'<div class="browsing-panel-indicator" bind="indicator"><img src="images/small-spinner.gif" /> refreshing facets ...</div>' +
'<div class="browsing-panel-controls" bind="controls">' +
'<p>' +
'<a href="javascript:{}" bind="refreshLink" title="Make sure all facets are up-to-date">refresh</a> &bull; ' +
'<a href="javascript:{}" bind="resetLink" title="Clear selection in all facets">reset</a> &bull; ' +
'<a href="javascript:{}" bind="removeLink" title="Remove all facets">remove</a> all facets' +
'</p>' +
'<p><input type="checkbox" class="inline" bind="includeDependentRowsCheck" /> show dependent rows</p>' +
'<div class="browsing-panel-help" bind="help">' +
'<h1>Explore data ...</h1>' +
'<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? Watch this screencast.</p>' +
'</div>' +
'<div class="browsing-panel-header" bind="header">' +
'<div class="browsing-panel-indicator" bind="indicator">' +
'<img src="images/small-spinner.gif" /> refreshing facets ...' +
'</div>' +
'<div class="browsing-panel-controls" bind="controls"><div class="grid-layout layout-tightest layout-full"><table>' +
'<tr>' +
'<td>' +
'<a href="javascript:{}" bind="refreshLink" class="action" title="Make sure all facets are up-to-date">Refresh</a>' +
'</td>' +
'<td width="1%">' +
'<a href="javascript:{}" bind="resetLink" class="action" title="Clear selection in all facets">Reset&nbsp;All</a>' +
'</td>' +
'<td width="1%">' +
'<a href="javascript:{}" bind="removeLink" class="action" title="Remove all facets">Remove&nbsp;All</a>' +
'</td>' +
'</tr>' +
'<tr bind="dependentRowControls">' +
'<td colspan="3"><input type="checkbox" class="inline" bind="includeDependentRowsCheck" /> show dependent rows</td>' +
'</tr>' +
'</table></div></div>' +
'</div>' +
'<ul bind="facets" class="facets-container"></ul>'
);
@ -134,7 +144,7 @@ BrowsingEngine.prototype.addFacet = function(type, config, options) {
};
BrowsingEngine.prototype._createFacetContainer = function() {
return $('<li></li>').addClass("facet-container").appendTo(this._elmts.facets);
return $('<li></li>').addClass("facet-container").hide().appendTo(this._elmts.facets);
};
BrowsingEngine.prototype.removeFacet = function(facet) {
@ -166,8 +176,11 @@ BrowsingEngine.prototype.removeFacet = function(facet) {
BrowsingEngine.prototype.update = function(onDone) {
var self = this;
this._elmts.indicator.show();
this._elmts.controls.hide();
this._elmts.help.hide();
this._elmts.header.show();
this._elmts.controls.css("visibility", "hidden");
this._elmts.indicator.css("visibility", "visible");
$.post(
"/command/compute-facets?" + $.param({ project: theProject.id }),
@ -179,10 +192,16 @@ BrowsingEngine.prototype.update = function(onDone) {
self._facets[i].facet.updateState(facetData[i]);
}
self._elmts.indicator.hide();
self._elmts.indicator.css("visibility", "hidden");
if (self._facets.length > 0) {
self._elmts.controls.show();
self._elmts.help.hide();
self._elmts.header.show();
self._elmts.controls.css("visibility", "visible");
if (theProject.columnModel.hasDependentRows) {
self._elmts.dependentRowControls.show();
} else {
self._elmts.dependentRowControls.hide();
}
} else {
self._elmts.help.show();
}

View File

@ -54,9 +54,9 @@ DataTableView.prototype._renderSummaryText = function(elmt) {
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 + ' to ' + to + ' of <span class="viewPanel-summary-row-count">' + (theProject.rowModel.total) + '</span> rows';
summaryText = from + ' &ndash; ' + to + ' of <span class="viewPanel-summary-row-count">' + (theProject.rowModel.total) + '</span> rows';
} else {
summaryText = from + ' to ' + to + ' of <span class="viewPanel-summary-row-count">' +
summaryText = from + ' &ndash; ' + to + ' of <span class="viewPanel-summary-row-count">' +
(theProject.rowModel.filtered) + '</span> matching rows (' + (theProject.rowModel.total) + ' total)';
}
$('<span>').html(summaryText).appendTo(elmt);

View File

@ -50,7 +50,7 @@ body {
background: white;
overflow: hidden;
padding: 0px;
font-size: 12px;
font-size: 11px;
}
.left-panel .ui-tabs {
padding: 0;

View File

@ -1,20 +1,18 @@
.browsing-panel-header {
height: 5em;
position: relative;
display: none;
}
.browsing-panel-indicator {
display: none;
visibility: hidden;
position: absolute;
width: 100%;
top: 0px;
}
.browsing-panel-controls {
display: none;
position: absolute;
width: 100%;
top: 0px;
visibility: hidden;
}
.browsing-panel-help {
padding: 10px;
background: white;
@ -90,7 +88,7 @@ a.facet-mode-link.facet-mode-link-selected {
color: #f88;
}
.facet-body-scrollable {
height: 20em;
height: 17em;
overflow: auto;
}
@ -163,7 +161,6 @@ img.facet-choice-link {
}
.facet-text-body {
border: 1px solid #ccc;
padding: 5px;
}
.facet-scatterplot-plot {