').addClass("facet-scatterplot-plot").appendTo(bodyDiv);
+
+ this._plotDiv = $('
')
+ .addClass("facet-scatterplot-plot")
+ .width(this._config.l + "px")
+ .height(this._config.l + "px")
+ .appendTo(bodyDiv);
+
+ this._plotBaseImg = $('
![]()
')
+ .addClass("facet-scatterplot-image")
+ .attr("src", this._formulateImageUrl({}, "DDDDFF"))
+ .attr("width", this._config.l)
+ .attr("height", this._config.l)
+ .appendTo(this._plotDiv);
this._plotImg = $('
![]()
')
.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 = $('
').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() {
diff --git a/src/main/webapp/scripts/project/browsing-engine.js b/src/main/webapp/scripts/project/browsing-engine.js
index 501435590..566dd08da 100644
--- a/src/main/webapp/scripts/project/browsing-engine.js
+++ b/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)) {
- a.facets.push(this._facets[i].facet.getJSON());
+ if ((keepUnrestrictedFacets || facet.facet.hasSelection()) && (facet.facet !== except)) {
+ a.facets.push(facet.facet.getJSON());
}
}
return a;
diff --git a/src/main/webapp/styles/project/browsing.css b/src/main/webapp/styles/project/browsing.css
index 62a820eaa..2b13d8052 100644
--- a/src/main/webapp/styles/project/browsing.css
+++ b/src/main/webapp/styles/project/browsing.css
@@ -159,8 +159,11 @@ img.facet-choice-link {
border: 1px solid #ccc;
padding: 5px;
}
-
-.facet-scatterplot-image {
- border: 1px solid #f0f0f0;
- margin: 0.5em 0.8em;
+.facet-scatterplot-plot {
+ border: 1px solid #f0f0f0;
+ margin: 0.5em 0.8em;
+ position: relative;
+}
+.facet-scatterplot-image {
+ position: absolute;
}