- Made removing facet a bit more interactive: the removed facet disappears right away.

- Made list facets limit themselves to only 2000 choices, so not to overload the browser.
- Made list and range facets handle errors in expressions better.

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

src/main/java/com/metaweb/gridworks/browsing/facets/ListFacet.java

@@ -15,6 +15,8 @@ import com.metaweb.gridworks.browsing.filters.ExpressionEqualRowFilter;
 import com.metaweb.gridworks.browsing.filters.RowFilter;
 import com.metaweb.gridworks.expr.Evaluable;
 import com.metaweb.gridworks.expr.MetaParser;
+import com.metaweb.gridworks.expr.ParsingException;
+import com.metaweb.gridworks.model.Column;
 import com.metaweb.gridworks.model.Project;
 import com.metaweb.gridworks.util.JSONUtilities;
 
@@ -31,8 +33,10 @@ public class ListFacet implements Facet {
     protected String     _name;
     protected String     _expression;
     protected String     _columnName;
+    
     protected int        _cellIndex;
     protected Evaluable  _eval;
+    protected String     _errorMessage;
     
     // computed
     protected List<NominalFacetChoice> _choices = new LinkedList<NominalFacetChoice>();
@@ -50,6 +54,11 @@ public class ListFacet implements Facet {
         writer.key("expression"); writer.value(_expression);
         writer.key("columnName"); writer.value(_columnName);
         
+        if (_errorMessage != null) {
+            writer.key("error"); writer.value(_errorMessage);
+        } else if (_choices.size() > 2000) {
+            writer.key("error"); writer.value("Too many choices.");
+        } else {
             writer.key("choices"); writer.array();
             for (NominalFacetChoice choice : _choices) {
                 choice.write(writer, options);
@@ -70,6 +79,7 @@ public class ListFacet implements Facet {
                 writer.key("c"); writer.value(_errorCount);
                 writer.endObject();
             }
+        }
         
         writer.endObject();
     }
@@ -80,12 +90,22 @@ public class ListFacet implements Facet {
         _columnName = o.getString("columnName");
         
         if (_columnName.length() > 0) {
-        	_cellIndex = project.columnModel.getColumnByName(_columnName).getCellIndex();
+            Column column = project.columnModel.getColumnByName(_columnName);
+            if (column != null) {
+                _cellIndex = column.getCellIndex();
+            } else {
+                _errorMessage = "No column named " + _columnName;
+            }
         } else {
         	_cellIndex = -1;
         }
         
+        try {
             _eval = MetaParser.parse(_expression);
+        } catch (ParsingException e) {
+            _errorMessage = e.getMessage();
+        }
+        
         _selection.clear();
         
         JSONArray a = o.getJSONArray("selection");
@@ -112,11 +132,21 @@ public class ListFacet implements Facet {
     }
 
     public RowFilter getRowFilter() {
-        return _selection.size() == 0 && !_selectBlank && !_selectError ? null :
+        return 
-            new ExpressionEqualRowFilter(_eval, _cellIndex, createMatches(), _selectBlank, _selectError);
+            _eval == null || 
+            _errorMessage != null ||
+            (_selection.size() == 0 && !_selectBlank && !_selectError) ? 
+                null :
+                new ExpressionEqualRowFilter(
+                    _eval, 
+                    _cellIndex, 
+                    createMatches(), 
+                    _selectBlank, 
+                    _selectError);
     }
 
     public void computeChoices(Project project, FilteredRows filteredRows) {
+        if (_eval != null && _errorMessage == null) {
             ExpressionNominalRowGrouper grouper = 
                 new ExpressionNominalRowGrouper(_eval, _cellIndex);
             
@@ -138,6 +168,7 @@ public class ListFacet implements Facet {
             _blankCount = grouper.blankCount;
             _errorCount = grouper.errorCount;
         }
+    }
     
     protected Object[] createMatches() {
         Object[] a = new Object[_selection.size()];

src/main/java/com/metaweb/gridworks/browsing/facets/RangeFacet.java

@@ -11,6 +11,7 @@ import com.metaweb.gridworks.browsing.filters.ExpressionNumberComparisonRowFilte
 import com.metaweb.gridworks.browsing.filters.RowFilter;
 import com.metaweb.gridworks.expr.Evaluable;
 import com.metaweb.gridworks.expr.MetaParser;
+import com.metaweb.gridworks.expr.ParsingException;
 import com.metaweb.gridworks.model.Column;
 import com.metaweb.gridworks.model.Project;
 import com.metaweb.gridworks.util.JSONUtilities;
@@ -19,8 +20,10 @@ public class RangeFacet implements Facet {
     protected String     _name;
     protected String     _expression;
     protected String     _columnName;
+    
     protected int        _cellIndex;
     protected Evaluable  _eval;
+    protected String     _errorMessage;
     
     protected String    _mode;
     protected double    _min;
@@ -53,6 +56,9 @@ public class RangeFacet implements Facet {
         writer.key("columnName"); writer.value(_columnName);
         writer.key("mode"); writer.value(_mode);
         
+        if (_errorMessage != null) {
+            writer.key("error"); writer.value(_errorMessage);
+        } else {
             if (!Double.isInfinite(_min) && !Double.isInfinite(_max)) {
                 writer.key("min"); writer.value(_min);
                 writer.key("max"); writer.value(_max);
@@ -84,7 +90,7 @@ public class RangeFacet implements Facet {
             writer.key("nonNumericCount"); writer.value(_nonNumericCount);
             writer.key("blankCount"); writer.value(_blankCount);
             writer.key("errorCount"); writer.value(_errorCount);
-        
+        }
         writer.endObject();
     }
 
@@ -92,9 +98,23 @@ public class RangeFacet implements Facet {
         _name = o.getString("name");
         _expression = o.getString("expression");
         _columnName = o.getString("columnName");
-        _cellIndex = project.columnModel.getColumnByName(_columnName).getCellIndex();
         
+        if (_columnName.length() > 0) {
+            Column column = project.columnModel.getColumnByName(_columnName);
+            if (column != null) {
+                _cellIndex = column.getCellIndex();
+            } else {
+                _errorMessage = "No column named " + _columnName;
+            }
+        } else {
+            _cellIndex = -1;
+        }
+        
+        try {
             _eval = MetaParser.parse(_expression);
+        } catch (ParsingException e) {
+            _errorMessage = e.getMessage();
+        }
         
         _mode = o.getString("mode");
         if ("min".equals(_mode)) {
@@ -126,7 +146,7 @@ public class RangeFacet implements Facet {
     }
 
     public RowFilter getRowFilter() {
-        if (_selected) {
+        if (_eval != null && _errorMessage == null && _selected) {
             if ("min".equals(_mode)) {
                 return new ExpressionNumberComparisonRowFilter(
                         _eval, _cellIndex, _selectNumeric, _selectNonNumeric, _selectBlank, _selectError) {
@@ -158,6 +178,7 @@ public class RangeFacet implements Facet {
     }
 
     public void computeChoices(Project project, FilteredRows filteredRows) {
+        if (_eval != null && _errorMessage == null) {
             Column column = project.columnModel.getColumnByCellIndex(_cellIndex);
             
             String key = "numeric-bin:" + _expression;
@@ -192,3 +213,4 @@ public class RangeFacet implements Facet {
             _errorCount = binner.errorCount;
         }
     }
+}

src/main/java/com/metaweb/gridworks/gel/Parser.java

@@ -106,7 +106,7 @@ public class Parser {
     
     protected Evaluable parseFactor() throws ParsingException {
         if (_token == null) {
-            throw makeException("Expression ends too early");
+            throw makeException("Expecting something more at end of expression");
         }
         
         Evaluable eval = null;
@@ -170,7 +170,7 @@ public class Parser {
                 throw makeException("Missing )");
             }
         } else {
-            throw makeException("Missing number, string, identifier, or parenthesized expression");
+            throw makeException("Missing number, string, identifier, regex, or parenthesized expression");
         }
         
         while (_token != null) {

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

@@ -62,6 +62,7 @@ ListFacet.prototype.hasSelection = function() {
 ListFacet.prototype.updateState = function(data) {
     this._data = data;
     
+    if ("choices" in data) {
         var selection = [];
         var choices = data.choices;
         for (var i = 0; i < choices.length; i++) {
@@ -75,6 +76,7 @@ ListFacet.prototype.updateState = function(data) {
     
         this._blankChoice = data.blankChoice || null;
         this._errorChoice = data.errorChoice || null;
+    }
     
     this.render();
 };
@@ -117,8 +119,11 @@ ListFacet.prototype.render = function() {
     }
     
     if (this._data == null) {
+        $('<div>').text("Loading...").addClass("facet-body-message").appendTo(bodyDiv);
+        bodyDiv.appendTo(container);
+    } else if ("error" in this._data) {
+        $('<div>').text(this._data.error).addClass("facet-body-message").appendTo(bodyDiv);
         bodyDiv.appendTo(container);
-        bodyDiv.html("Loading...");
     } else {
         var selectionCount = this._selection.length
             + (this._blankChoice != null && this._blankChoice.s ? 1 : 0)

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

@@ -138,14 +138,11 @@ RangeFacet.prototype._initializeUI = function() {
         
     var bodyDiv = $('<div></div>').addClass("facet-range-body").appendTo(container);
     
-    if (this._error) {
+    this._messageDiv = $('<div>').text("Loading...").addClass("facet-range-message").appendTo(bodyDiv);
-        return;
+    this._histogramDiv = $('<div>').addClass("facet-range-histogram").appendTo(bodyDiv);
-    }
+    this._sliderDiv = $('<div>').addClass("facet-range-slider").appendTo(bodyDiv);
-    
+    this._statusDiv = $('<div>').addClass("facet-range-status").appendTo(bodyDiv);
-    this._histogramDiv = $('<div></div>').addClass("facet-range-histogram").appendTo(bodyDiv);
+    this._otherChoicesDiv = $('<div>').addClass("facet-range-other-choices").appendTo(bodyDiv);
-    this._sliderDiv = $('<div></div>').addClass("facet-range-slider").appendTo(bodyDiv);
-    this._statusDiv = $('<div></div>').addClass("facet-range-status").appendTo(bodyDiv);
-    this._otherChoicesDiv = $('<div></div>').addClass("facet-range-other-choices").appendTo(bodyDiv);
     
     var onSlide = function(event, ui) {
         switch (self._config.mode) {
@@ -166,34 +163,27 @@ RangeFacet.prototype._initializeUI = function() {
         self._updateRest();
     };
     var sliderConfig = {
-        range: "max",
         min: this._config.min,
         max: this._config.max,
-        value: 2,
         stop: onStop,
         slide: onSlide
     };
-    if ("step" in this._config) {
-        sliderConfig.step = this._config.step;
-    }
         
     switch (this._config.mode) {
     case "min":
         sliderConfig.range = "max";
-        sliderConfig.value = this._from;
+        sliderConfig.value = this._config.min;
         break;
     case "max":
         sliderConfig.range = "min";
-        sliderConfig.value = this._to;
+        sliderConfig.value = this._config.max;
         break;
     default:
         sliderConfig.range = true;
-        sliderConfig.values = [ this._from, this._to ];
+        sliderConfig.values = [ this._config.min, this._config.max ];
     }
     
     this._sliderDiv.slider(sliderConfig);
-    this._setRangeIndicators();
-    this._renderOtherChoices();
 };
 
 RangeFacet.prototype._renderOtherChoices = function() {
@@ -276,6 +266,8 @@ RangeFacet.prototype._setRangeIndicators = function() {
 
 RangeFacet.prototype.updateState = function(data) {
     if ("min" in data && "max" in data) {
+        this._error = false;
+        
         this._config.min = data.min;
         this._config.max = data.max;
         this._config.step = data.step;
@@ -304,6 +296,7 @@ RangeFacet.prototype.updateState = function(data) {
         this._errorCount = data.errorCount;
     } else {
         this._error = true;
+        this._errorMessage = "error" in data ? data.error : "Unknown error.";
     }
     
     this.render();
@@ -314,10 +307,22 @@ RangeFacet.prototype.render = function() {
         this._initializeUI();
         this._initializedUI = true;
     }
+    
     if (this._error) {
+        this._messageDiv.text(this._errorMessage).show();
+        this._sliderDiv.hide();
+        this._histogramDiv.hide();
+        this._statusDiv.hide();
+        this._otherChoicesDiv.hide();
         return;
     }
     
+    this._messageDiv.hide();
+    this._sliderDiv.show();
+    this._histogramDiv.show();
+    this._statusDiv.show();
+    this._otherChoicesDiv.show();
+    
     this._sliderDiv.slider("option", "min", this._config.min);
     this._sliderDiv.slider("option", "max", this._config.max);
     this._sliderDiv.slider("option", "step", this._config.step);

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

@@ -119,8 +119,17 @@ BrowsingEngine.prototype.removeFacet = function(facet) {
     var update = facet.hasSelection();
     for (var i = this._facets.length - 1;i >= 0; i--) {
         if (this._facets[i].facet === facet) {
-            this._facets[i].elmt.remove();
+            var elmt = this._facets[i].elmt;
             this._facets.splice(i, 1);
+            
+            // This makes really big facet disappear right away. If you just call remove()
+            // then it takes a while for all the event handlers to get unwired, and the UI
+            // appear frozen.
+            elmt.hide();
+            window.setTimeout(function() {
+                elmt.remove();
+            }, 300);
+            
             break;
         }
     }

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

@@ -37,6 +37,10 @@ li.facet-container {
     border: 1px solid #ccc;
     padding: 1px;
 }
+.facet-body-message {
+    margin: 1em;
+    color: #f88;
+}
 .facet-body-scrollable {
     height: 20em;
     overflow: auto;
@@ -113,6 +117,10 @@ img.facet-choice-link {
     border: 1px solid #ccc;
     padding: 15px;
 }
+.facet-range-message {
+    margin: 1em;
+    color: #f88;
+}
 .facet-range-histogram {
     margin: 10px 4px;
     overflow: hidden;