More polishing on the facet panel.

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

src/main/java/com/metaweb/gridworks/model/ColumnModel.java

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

src/main/java/com/metaweb/gridworks/model/Project.java

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

src/main/webapp/scripts/facets/list-facet.js

@@ -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>' +

src/main/webapp/scripts/facets/range-facet.js

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

src/main/webapp/scripts/facets/scatterplot-facet.js

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

src/main/webapp/scripts/facets/text-search-facet.js

@@ -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 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></tr>' +
+            '<tr>' +
-            '<tr><td width="1%"><input type="checkbox" bind="regexCheckbox" /></td><td>regular expression</td></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>'
     );
     

src/main/webapp/scripts/project/browsing-engine.js

@@ -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">' +
-            '<div class="browsing-panel-help" bind="help">' +
+            '<h1>Explore data ...</h1>' +
-                '<h1>Explore data ...</h1>' +
+            '<p>by choosing a facet or filter method from the menus at the top of each column.</p>' +
-                '<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>' +
-                '<p>Not sure how to get started? Watch this screencast.</p>' +
+        '</div>' +
-            '</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-indicator" bind="indicator">' +
-            '<div class="browsing-panel-controls" bind="controls">' +
+                '<img src="images/small-spinner.gif" /> refreshing facets ...' +
-                '<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>' +
+            '<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.help.hide();
-    this._elmts.controls.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.header.show();
-                self._elmts.help.hide();
+                self._elmts.controls.css("visibility", "visible");
+                
+                if (theProject.columnModel.hasDependentRows) {
+                    self._elmts.dependentRowControls.show();
+                } else {
+                    self._elmts.dependentRowControls.hide();
+                }
             } else {
                 self._elmts.help.show();
             }

src/main/webapp/scripts/views/data-table-view.js

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

src/main/webapp/styles/project.css

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

src/main/webapp/styles/project/browsing.css

@@ -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;
+    visibility: hidden;
-    position: absolute;
-    width: 100%;
-    top: 0px;
 }
+
 .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 {