function ScatterplotFacet(div, config, options) {
this._div = div;
this._config = config;
this._options = options;
this._error = false;
this._initializedUI = false;
}
ScatterplotFacet.prototype.update = function() {
this._plotAreaSelector.update();
};
ScatterplotFacet.prototype.reset = function() {
delete this._config.from_x;
delete this._config.from_y;
delete this._config.to_x;
delete this._config.to_y;
this._plotAreaSelector.setOptions({ hide : true });
this._plotAreaSelector.update();
};
ScatterplotFacet.reconstruct = function(div, uiState) {
return new ScatterplotFacet(div, uiState.c, uiState.o);
};
ScatterplotFacet.prototype.dispose = function() {
this._elmts.plotImg.imgAreaSelect({ hide : true });
};
ScatterplotFacet.prototype.getUIState = function() {
var json = {
c: this.getJSON(),
o: this._options
};
return json;
};
ScatterplotFacet.prototype.getJSON = function() {
this._config.type = "scatterplot";
var dot = this._config.dot;
if (typeof dot == 'number') this._config.dot.toFixed(2);
return this._config;
};
ScatterplotFacet.prototype.hasSelection = function() {
return ("from_x" in this._config && this._config.from_x !== 0) ||
("from_y" in this._config && this._config.from_y !== 0) ||
("to_x" in this._config && this._config.to_x !== 1) ||
("to_y" in this._config && this._config.to_y !== 1);
};
ScatterplotFacet.prototype._initializeUI = function() {
var self = this;
var container = this._div.empty().show();
var facet_id = container.attr("id");
this._div.empty().show().html(
'
' +
'
' +
' | ' +
'' +
'reset' +
'' +
' | ' +
'
' +
'
' +
'' +
'
Loading...
' +
'
' +
'' +
'' +
' ' +
' ![]() ' +
' ![]() ' +
' ' +
' ' +
' | ' +
'' +
'' +
' | ' +
'
' +
'
' +
'
'
);
this._elmts = DOM.bind(this._div);
this._elmts.titleSpan.text(this._config.name);
this._elmts.removeButton.click(function() { self._remove(); });
this._elmts.resetButton.click(function() {
self.reset();
self._updateRest();
});
this._elmts.plotDiv.width(this._config.l + "px").height(this._config.l + "px");
this._elmts.plotBaseImg.attr("src", this._formulateBaseImageUrl())
.attr("width", this._config.l)
.attr("height", this._config.l);
this._elmts.plotImg.attr("src", this._formulateCurrentImageUrl())
.attr("width", this._config.l)
.attr("height", this._config.l);
var ops = {
instance: true,
handles: false,
parent: this._elmts.plotDiv,
fadeSpeed: 70,
onSelectEnd: function(elmt, selection) {
self._putSelectionOptions(selection);
self._updateRest();
}
};
this._fillSelectionOptions(ops);
this._plotAreaSelector = this._elmts.plotImg.imgAreaSelect(ops);
if (this._config.dim_x == 'lin' && this._config.dim_y == 'lin') {
this._elmts.selectors.find("#" + facet_id + "-dim-lin").attr('checked','checked');
} else if (this._config.dim_x == 'log' && this._config.dim_y == 'log') {
this._elmts.selectors.find("#" + facet_id + "-dim-log").attr('checked','checked');
}
if (this._config.r == 'cw') {
this._elmts.selectors.find("#" + facet_id + "-rot-cw").attr('checked','checked');
} else if (this._config.r == 'ccw') {
this._elmts.selectors.find("#" + facet_id + "-rot-ccw").attr('checked','checked');
} else {
this._elmts.selectors.find("#" + facet_id + "-rot-none").attr('checked','checked');
}
if (this._config.dot >= 1.2) {
this._elmts.selectors.find("#" + facet_id + "-dot-big").attr('checked','checked');
} else if (this._config.dot <= 0.4) {
this._elmts.selectors.find("#" + facet_id + "-dot-small").attr('checked','checked');
} else {
this._elmts.selectors.find("#" + facet_id + "-dot-regular").attr('checked','checked');
}
this._elmts.selectors.find(".facet-scatterplot-dim-selector").change(function() {
var dim = $(this).find("input:checked").val();
self._config.dim_x = dim;
self._config.dim_y = dim;
self.reset();
self._updateRest();
self.changePlot();
});
this._elmts.selectors.find(".facet-scatterplot-rot-selector").change(function() {
self._config.r = $(this).find("input:checked").val();
self.reset();
self._updateRest();
self.changePlot();
});
this._elmts.selectors.find(".facet-scatterplot-dot-selector").change(function() {
var dot_size = $(this).find("input:checked").val();
if (dot_size == "small") {
self._config.dot = 0.4;
} else if (dot_size == "big") {
self._config.dot = 1.4;
} else {
self._config.dot = 0.8;
}
self.changePlot();
});
this._elmts.selectors.find(".buttonset").buttonset();
};
ScatterplotFacet.prototype._fillSelectionOptions = function(ops) {
if (this.hasSelection()) {
ops.x1 = this._config.l * this._config.from_x;
ops.x2 = this._config.l * this._config.to_x;
ops.y1 = this._config.l - (this._config.l * this._config.to_y);
ops.y2 = this._config.l - (this._config.l * this._config.from_y);
} else {
ops.x1 = ops.y1 = 0;
ops.x2 = ops.y2 = this._config.l;
ops.hide = true;
}
};
ScatterplotFacet.prototype._putSelectionOptions = function(selection) {
if (selection.height === 0 || selection.width === 0) {
this.reset();
} else {
this._config.from_x = selection.x1 / this._config.l;
this._config.to_x = selection.x2 / this._config.l;
this._config.from_y = (this._config.l - selection.y2) / this._config.l;
this._config.to_y = (this._config.l - selection.y1) / this._config.l;
}
};
ScatterplotFacet.prototype._formulateCurrentImageUrl = function() {
return this._formulateImageUrl(ui.browsingEngine.getJSON(false, this), { color: "ff6a00" });
};
ScatterplotFacet.prototype._formulateBaseImageUrl = function() {
return this._formulateImageUrl({},{ color: "888888", dot : this._config.dot * 0.9 });
};
ScatterplotFacet.prototype._formulateImageUrl = function(engineConfig, conf) {
for (var p in conf) {
if (conf.hasOwnProperty(p)) {
this._config[p] = conf[p];
}
}
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 ("error" in data) {
this._error = true;
this._errorMessage = "error" in data ? data.error : "Unknown error.";
} else {
this._error = false;
// These are in 0 - 1 coordinates
if ("from_x" in data) {
this._config.from_x = Math.min(Math.max(data.from_x, 0), 1);
} else {
this._config.from_x = 0;
}
if ("to_x" in data) {
this._config.to_x = Math.min(Math.max(data.to_x, data.from_x), 1);
} else {
this._config.to_x = 1;
}
if ("from_y" in data) {
this._config.from_y = Math.min(Math.max(data.from_y, 0), 1);
} else {
this._config.from_y = 0;
}
if ("to_y" in data) {
this._config.to_y = Math.min(Math.max(data.to_y, data.from_y), this._config.l);
} else {
this._config.to_y = 1;
}
if (this._plotAreaSelector) {
var ops = {};
this._fillSelectionOptions(ops);
this._plotAreaSelector.setOptions(ops);
this._plotAreaSelector.update();
}
}
this.render();
};
ScatterplotFacet.prototype.changePlot = function() {
this._elmts.plotBaseImg.attr("src", this._formulateBaseImageUrl());
this._elmts.plotImg.attr("src", this._formulateCurrentImageUrl());
};
ScatterplotFacet.prototype.render = function() {
if (!this._initializedUI) {
this._initializeUI();
this._initializedUI = true;
}
if (this._error) {
this._elmts.messageDiv.text(this._errorMessage).show();
this._elmts.plotDiv.hide();
this._elmts.statusDiv.hide();
return;
}
this._elmts.messageDiv.hide();
this._elmts.plotDiv.show();
this._elmts.statusDiv.show();
this._elmts.plotImg.attr("src", this._formulateCurrentImageUrl());
};
ScatterplotFacet.prototype._remove = function() {
ui.browsingEngine.removeFacet(this);
this._div = null;
this._config = null;
};
ScatterplotFacet.prototype._updateRest = function() {
Gridworks.update({ engineChanged: true });
};