Scatterplot facet now shows 2 layers of dots: one for the base distribution and one that's constrained by the other facets.

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

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

@@ -59,18 +59,23 @@ ScatterplotFacet.prototype._initializeUI = function() {
         
     var bodyDiv = $('<div></div>').addClass("facet-scatterplot-body").appendTo(container);
     
-    var params = {
-        project: theProject.id,
-        engine: JSON.stringify(ui.browsingEngine.getJSON(false, this)), 
-        plotter: JSON.stringify(this._config) 
-    };
-    var url = "/command/get-scatterplot?" + $.param(params);
-    
     this._messageDiv = $('<div>').text("Loading...").addClass("facet-scatterplot-message").appendTo(bodyDiv);
-    this._plotDiv = $('<div>').addClass("facet-scatterplot-plot").appendTo(bodyDiv);
+    
+    this._plotDiv = $('<div>')
+        .addClass("facet-scatterplot-plot")
+        .width(this._config.l + "px")
+        .height(this._config.l + "px")
+        .appendTo(bodyDiv);
+        
+    this._plotBaseImg = $('<img>')
+        .addClass("facet-scatterplot-image")
+        .attr("src", this._formulateImageUrl({}, "DDDDFF"))
+        .attr("width", this._config.l)
+        .attr("height", this._config.l)
+        .appendTo(this._plotDiv);
     this._plotImg = $('<img>')
         .addClass("facet-scatterplot-image")
-        .attr("src",url)
+        .attr("src", this._formulateCurrentImageUrl())
         .attr("width", this._config.l)
         .attr("height", this._config.l)
         .imgAreaSelect({ 
@@ -91,6 +96,20 @@ ScatterplotFacet.prototype._initializeUI = function() {
     this._statusDiv = $('<div>').addClass("facet-scatterplot-status").appendTo(bodyDiv);
 };
 
+ScatterplotFacet.prototype._formulateCurrentImageUrl = function() {
+    return this._formulateImageUrl(ui.browsingEngine.getJSON(false, this), "444488")
+};
+
+ScatterplotFacet.prototype._formulateImageUrl = function(engineConfig, color) {
+    this._config.color = color;
+    var params = {
+        project: theProject.id,
+        engine: JSON.stringify(engineConfig), 
+        plotter: JSON.stringify(this._config) 
+    };
+    return "/command/get-scatterplot?" + $.param(params);
+};
+
 ScatterplotFacet.prototype.updateState = function(data) {
     if ("min_x" in data && "max_x" in data && "max_x" in data && "min_x" in data) {
         this._error = false;
@@ -137,6 +156,8 @@ ScatterplotFacet.prototype.render = function() {
     this._messageDiv.hide();
     this._plotDiv.show();
     this._statusDiv.show();
+    
+    this._plotImg.attr("src", this._formulateCurrentImageUrl());
 };
 
 ScatterplotFacet.prototype._remove = function() {

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

@@ -105,8 +105,8 @@ BrowsingEngine.prototype.getJSON = function(keepUnrestrictedFacets, except) {
     };
     for (var i = 0; i < this._facets.length; i++) {
         var facet = this._facets[i];
-        if ((keepUnrestrictedFacets || facet.facet.hasSelection()) && (facet.facet != except)) {
+        if ((keepUnrestrictedFacets || facet.facet.hasSelection()) && (facet.facet !== except)) {
-            a.facets.push(this._facets[i].facet.getJSON());
+            a.facets.push(facet.facet.getJSON());
         }
     }
     return a;

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

@@ -159,8 +159,11 @@ img.facet-choice-link {
     border: 1px solid #ccc;
     padding: 5px;
 }
-
+.facet-scatterplot-plot {
-.facet-scatterplot-image {
     border: 1px solid #f0f0f0;
     margin: 0.5em 0.8em;
+    position: relative;
+}
+.facet-scatterplot-image {
+    position: absolute;
 }