').text("Loading...").addClass("facet-scatterplot-message").appendTo(bodyDiv);
+ this._plotDiv = $('
').addClass("facet-scatterplot-plot").appendTo(bodyDiv);
+ this._statusDiv = $('
').addClass("facet-scatterplot-status").appendTo(bodyDiv);
+
+ this._plot = new ScatterplotWidget(this._plotDiv, { binColors: [ "#ccccff", "#6666ff" ] });
+};
+
+ScatterplotFacet.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;
+ this._baseBins = data.baseBins;
+ this._bins = data.bins;
+
+ switch (this._config.mode) {
+ case "min":
+ this._from = Math.max(data.from, this._config.min);
+ break;
+ case "max":
+ this._to = Math.min(data.to, this._config.max);
+ break;
+ default:
+ this._from = Math.max(data.from, this._config.min);
+ if ("to" in data) {
+ this._to = Math.min(data.to, this._config.max);
+ } else {
+ this._to = data.max;
+ }
+ }
+
+ this._numericCount = data.numericCount;
+ this._nonNumericCount = data.nonNumericCount;
+ this._blankCount = data.blankCount;
+ this._errorCount = data.errorCount;
+ } else {
+ this._error = true;
+ this._errorMessage = "error" in data ? data.error : "Unknown error.";
+ }
+
+ this.render();
+};
+
+ScatterplotFacet.prototype.render = function() {
+ if (!this._initializedUI) {
+ 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._plotDiv.show();
+ this._statusDiv.show();
+
+ this._plot.update(
+ this._config.min,
+ this._config.max,
+ this._config.step,
+ [ this._baseBins, this._bins ],
+ this._from,
+ this._to
+ );
+};
+
+ScatterplotFacet.prototype._remove = function() {
+ ui.browsingEngine.removeFacet(this);
+
+ this._div = null;
+ this._config = null;
+ this._data = null;
+};
+
+ScatterplotFacet.prototype._updateRest = function() {
+ Gridworks.update({ engineChanged: true });
+};
diff --git a/src/main/webapp/scripts/project/browsing-engine.js b/src/main/webapp/scripts/project/browsing-engine.js
index 55a333a85..ca2ca255a 100644
--- a/src/main/webapp/scripts/project/browsing-engine.js
+++ b/src/main/webapp/scripts/project/browsing-engine.js
@@ -15,6 +15,9 @@ function BrowsingEngine(div, facetConfigs) {
case "range":
facet = RangeFacet.reconstruct(elmt, facetConfig);
break;
+ case "scatterplot":
+ facet = ScatterplotFacet.reconstruct(elmt, facetConfig);
+ break;
case "text":
facet = TextSearchFacet.reconstruct(elmt, facetConfig);
break;
@@ -111,6 +114,9 @@ BrowsingEngine.prototype.addFacet = function(type, config, options) {
case "range":
facet = new RangeFacet(elmt, config, options);
break;
+ case "scatterplot":
+ facet = new ScatterplotFacet(elmt, config, options);
+ break;
case "text":
facet = new TextSearchFacet(elmt, config, options);
break;
diff --git a/src/main/webapp/scripts/util/histogram-widget.js b/src/main/webapp/scripts/widgets/histogram-widget.js
similarity index 100%
rename from src/main/webapp/scripts/util/histogram-widget.js
rename to src/main/webapp/scripts/widgets/histogram-widget.js
diff --git a/src/main/webapp/scripts/project/history-widget.js b/src/main/webapp/scripts/widgets/history-widget.js
similarity index 100%
rename from src/main/webapp/scripts/project/history-widget.js
rename to src/main/webapp/scripts/widgets/history-widget.js
diff --git a/src/main/webapp/scripts/project/process-widget.js b/src/main/webapp/scripts/widgets/process-widget.js
similarity index 100%
rename from src/main/webapp/scripts/project/process-widget.js
rename to src/main/webapp/scripts/widgets/process-widget.js
diff --git a/src/main/webapp/scripts/widgets/scatterplot-widget.js b/src/main/webapp/scripts/widgets/scatterplot-widget.js
new file mode 100644
index 000000000..9898cbb08
--- /dev/null
+++ b/src/main/webapp/scripts/widgets/scatterplot-widget.js
@@ -0,0 +1,160 @@
+function ScatterplotWidget(elmt, options) {
+ this._elmt = elmt;
+ this._options = options;
+
+ this._range = null;
+ this._binMatrix = null;
+ this._highlight = null;
+
+ this._initializeUI();
+}
+
+ScatterplotWidget.prototype.highlight = function(from, to) {
+ this._highlight = { from: from, to: to };
+ this._update();
+};
+
+ScatterplotWidget.prototype.update = function(min, max, step, binMatrix, from, to) {
+ if (typeof min == "undefined" || typeof binMatrix == "undefined" || binMatrix.length === 0 || binMatrix[0].length === 0) {
+ this._range = null;
+ this._binMatrix = null;
+ this._highlight = null;
+
+ this._elmt.hide();
+ } else {
+ this._range = { min: min, max: max, step: step };
+ this._binMatrix = binMatrix;
+
+ this._peak = 0;
+ for (var r = 0; r < binMatrix.length; r++) {
+ var row = binMatrix[r];
+ for (var c = 0; c < row.length; c++) {
+ this._peak = Math.max(this._peak, row[c]);
+ }
+ }
+
+ if (typeof from != "undefined" && typeof to != "undefined") {
+ this._highlight = { from: from, to: to };
+ }
+
+ this._update();
+ }
+};
+
+ScatterplotWidget.prototype._update = function() {
+ if (this._binMatrix !== null) {
+ if (this._highlight !== null) {
+ this._highlight.from = Math.max(this._highlight.from, this._range.min);
+ this._highlight.to = Math.min(this._highlight.to, this._range.max);
+ }
+
+ this._elmt.show();
+ this._resize();
+ this._render();
+ }
+};
+
+ScatterplotWidget.prototype._initializeUI = function() {
+ this._elmt
+ .empty()
+ .hide()
+ .addClass("scatterplot-widget")
+ .html(
+ ''
+ );
+
+ this._elmts = DOM.bind(this._elmt);
+};
+
+ScatterplotWidget.prototype._resize = function() {
+ this._elmts.canvas.attr("height", "height" in this._options ? this._options.height : 50);
+ this._elmts.canvas.attr("width", this._elmts.canvas.width());
+};
+
+ScatterplotWidget.prototype._render = function() {
+ var self = this;
+ var options = this._options;
+
+ var canvas = this._elmts.canvas[0];
+ var ctx = canvas.getContext('2d');
+ ctx.fillStyle = "white";
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ ctx.save();
+ ctx.translate(0, canvas.height);
+ ctx.scale(1, -1);
+
+ var stepPixels = canvas.width / this._binMatrix[0].length;
+ var stepScale = stepPixels / this._range.step;
+
+ /*
+ * Draw axis
+ */
+ ctx.save();
+ ctx.strokeStyle = "emptyBinColor" in options ? options.emptyBinColor : "#faa";
+ ctx.lineWidth = 1;
+ ctx.moveTo(0, 0);
+ ctx.lineTo(canvas.width, 0);
+ ctx.stroke();
+ ctx.restore();
+
+ /*
+ * Draw bins
+ */
+ var makeColor = function(i) {
+ var n = Math.floor(15 * (self._binMatrix.length - i) / self._binMatrix.length);
+ var h = n.toString(16);
+ return "#" + h + h + h;
+ };
+ var renderRow = function(row, color) {
+ ctx.save();
+ ctx.lineWidth = 0;
+ ctx.fillStyle = color;
+ for (var c = 0; c < row.length; c++) {
+ var x = self._range.min + c * self._range.step;
+ var y = row[c];
+ if (y > 0) {
+ var left = c * stepPixels;
+ var width = Math.ceil(stepPixels);
+ var height = Math.ceil(y * canvas.height / self._peak);
+
+ ctx.fillRect(left, 0, width, height);
+ }
+ }
+ ctx.restore();
+ };
+ for (var r = 0; r < this._binMatrix.length; r++) {
+ renderRow(
+ this._binMatrix[r],
+ "binColors" in options && r < options.binColors.length ?
+ options.binColors[r] :
+ makeColor(r)
+ );
+ }
+
+ /*
+ * Draw highlight
+ */
+ if (this._highlight !== null) {
+ ctx.fillStyle = "rgba(192,192,192, 0.5)";
+ ctx.globalCompositeOperation = "source-over";
+ if (this._highlight.from > this._range.min) {
+ ctx.fillRect(
+ 0,
+ 0,
+ (this._highlight.from - this._range.min) * stepScale,
+ canvas.height
+ );
+ }
+ if (this._highlight.to < this._range.max) {
+ ctx.fillRect(
+ (this._highlight.to - this._range.min) * stepScale,
+ 0,
+ canvas.width - (this._highlight.to - this._range.min) * stepScale,
+ canvas.height
+ );
+ }
+ }
+
+ ctx.restore();
+};
diff --git a/src/main/webapp/styles/util/histogram-widget.css b/src/main/webapp/styles/widgets/histogram-widget.css
similarity index 100%
rename from src/main/webapp/styles/util/histogram-widget.css
rename to src/main/webapp/styles/widgets/histogram-widget.css
diff --git a/src/main/webapp/styles/project/history.css b/src/main/webapp/styles/widgets/history.css
similarity index 100%
rename from src/main/webapp/styles/project/history.css
rename to src/main/webapp/styles/widgets/history.css
diff --git a/src/main/webapp/styles/widgets/scatterplot-widget.css b/src/main/webapp/styles/widgets/scatterplot-widget.css
new file mode 100644
index 000000000..4e863c5fd
--- /dev/null
+++ b/src/main/webapp/styles/widgets/scatterplot-widget.css
@@ -0,0 +1,9 @@
+.scatterplot-widget {
+ margin: 0;
+ padding: 0;
+ position: relative;
+}
+
+.scatterplot-widget canvas {
+ width: 100%;
+}
starting up ...