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:
parent
3adc5a8e84
commit
72f1f0956e
@ -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) {
|
||||
|
@ -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++;
|
||||
}
|
||||
|
@ -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>' +
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
|
@ -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>'
|
||||
);
|
||||
|
||||
|
@ -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> • ' +
|
||||
'<a href="javascript:{}" bind="resetLink" title="Clear selection in all facets">reset</a> • ' +
|
||||
'<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 All</a>' +
|
||||
'</td>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" bind="removeLink" class="action" title="Remove all facets">Remove 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();
|
||||
}
|
||||
|
@ -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 + ' – ' + 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 + ' – ' + to + ' of <span class="viewPanel-summary-row-count">' +
|
||||
(theProject.rowModel.filtered) + '</span> matching rows (' + (theProject.rowModel.total) + ' total)';
|
||||
}
|
||||
$('<span>').html(summaryText).appendTo(elmt);
|
||||
|
@ -50,7 +50,7 @@ body {
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
padding: 0px;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.left-panel .ui-tabs {
|
||||
padding: 0;
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user