Restructured the Facets (#3097)
* added class to List Facet * added class to Timerange Facet * added class to Range Facet * added class to Text Filter Facet * added class to Scatterplot Facet * added base class * added end line in facet.js * fixed indentations facet.js * fixed indentation again * removed fields * added suggested changes
This commit is contained in:
Lisa Chandra
GitHub
parent
2a86927b2c
commit
5ca5f3cb7b
@ -466,6 +466,7 @@ function init() {
|
||||
"scripts/project/exporters.js",
|
||||
"scripts/project/scripting.js",
|
||||
|
||||
"scripts/facets/facet.js",
|
||||
"scripts/facets/list-facet.js",
|
||||
"scripts/facets/range-facet.js",
|
||||
"scripts/facets/timerange-facet.js",
|
||||
|
||||
@ -333,6 +333,7 @@
|
||||
"core-facets/big-dot": "Big Dot Size",
|
||||
"core-facets/export-plot": "export plot",
|
||||
"core-facets/numeric": "Numeric",
|
||||
"core-facets/value-range": "$1 — $2",
|
||||
"core-project/open": "Open",
|
||||
"core-project/permalink": "Permalink",
|
||||
"core-project/export": "Export",
|
||||
|
||||
67
main/webapp/modules/core/scripts/facets/facet.js
Normal file
67
main/webapp/modules/core/scripts/facets/facet.js
Normal file
@ -0,0 +1,67 @@
|
||||
/*
|
||||
|
||||
Copyright 2010, Google Inc.
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are
|
||||
met:
|
||||
|
||||
* Redistributions of source code must retain the above copyright
|
||||
notice, this list of conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above
|
||||
copyright notice, this list of conditions and the following disclaimer
|
||||
in the documentation and/or other materials provided with the
|
||||
distribution.
|
||||
* Neither the name of Google Inc. nor the names of its
|
||||
contributors may be used to endorse or promote products derived from
|
||||
this software without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
||||
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
||||
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
||||
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
||||
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
||||
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
||||
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
||||
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
||||
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
||||
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
*/
|
||||
|
||||
class Facet {
|
||||
constructor(div, config, options) {
|
||||
this._div = div;
|
||||
this._config = config;
|
||||
this._options = options || {};
|
||||
this._minimizeState = false;
|
||||
};
|
||||
|
||||
_minimize() {
|
||||
if(!this._minimizeState) {
|
||||
this._div.addClass("facet-state-minimize");
|
||||
} else {
|
||||
this._div.removeClass("facet-state-minimize");
|
||||
}
|
||||
|
||||
this._minimizeState = !this._minimizeState;
|
||||
};
|
||||
|
||||
_remove() {
|
||||
ui.browsingEngine.removeFacet(this);
|
||||
|
||||
this._div = null;
|
||||
this._config = null;
|
||||
|
||||
this._selection = null;
|
||||
this._blankChoice = null;
|
||||
this._errorChoice = null;
|
||||
this._data = null;
|
||||
this._options = null;
|
||||
};
|
||||
|
||||
dispose() {
|
||||
};
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@ -31,389 +31,357 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
*/
|
||||
|
||||
function RangeFacet(div, config, options) {
|
||||
this._div = div;
|
||||
this._config = config;
|
||||
this._options = options;
|
||||
class RangeFacet extends Facet {
|
||||
constructor(div, config, options) {
|
||||
super(div, config, options);
|
||||
|
||||
this._minimizeState = false;
|
||||
this._from = ("from" in this._config) ? this._config.from : null;
|
||||
this._to = ("to" in this._config) ? this._config.to : null;
|
||||
|
||||
this._from = ("from" in this._config) ? this._config.from : null;
|
||||
this._to = ("to" in this._config) ? this._config.to : null;
|
||||
this._selectNumeric = ("selectNumeric" in this._config) ? this._config.selectNumeric : true;
|
||||
this._selectNonNumeric = ("selectNonNumeric" in this._config) ? this._config.selectNonNumeric : true;
|
||||
this._selectBlank = ("selectBlank" in this._config) ? this._config.selectBlank : true;
|
||||
this._selectError = ("selectError" in this._config) ? this._config.selectError : true;
|
||||
|
||||
this._selectNumeric = ("selectNumeric" in this._config) ? this._config.selectNumeric : true;
|
||||
this._selectNonNumeric = ("selectNonNumeric" in this._config) ? this._config.selectNonNumeric : true;
|
||||
this._selectBlank = ("selectBlank" in this._config) ? this._config.selectBlank : true;
|
||||
this._selectError = ("selectError" in this._config) ? this._config.selectError : true;
|
||||
this._lang = Refine.getPreference('userLang', 'en');
|
||||
this._formatter = new Intl.NumberFormat(this._lang, { useGrouping: true, maximumFractionDigits: 2 });
|
||||
|
||||
this._baseNumericCount = 0;
|
||||
this._baseNonNumericCount = 0;
|
||||
this._baseBlankCount = 0;
|
||||
this._baseErrorCount = 0;
|
||||
this._baseNumericCount = 0;
|
||||
this._baseNonNumericCount = 0;
|
||||
this._baseBlankCount = 0;
|
||||
this._baseErrorCount = 0;
|
||||
|
||||
this._numericCount = 0;
|
||||
this._nonNumericCount = 0;
|
||||
this._blankCount = 0;
|
||||
this._errorCount = 0;
|
||||
this._numericCount = 0;
|
||||
this._nonNumericCount = 0;
|
||||
this._blankCount = 0;
|
||||
this._errorCount = 0;
|
||||
|
||||
this._error = false;
|
||||
this._initializedUI = false;
|
||||
}
|
||||
this._error = false;
|
||||
this._initializedUI = false;
|
||||
};
|
||||
|
||||
RangeFacet.prototype.reset = function() {
|
||||
this._from = this._config.min;
|
||||
this._to = this._config.max;
|
||||
this._sliderWidget.update(
|
||||
this._config.min,
|
||||
this._config.max,
|
||||
this._config.step,
|
||||
this._from,
|
||||
this._to
|
||||
);
|
||||
reset() {
|
||||
this._from = this._config.min;
|
||||
this._to = this._config.max;
|
||||
this._sliderWidget.update(
|
||||
this._config.min,
|
||||
this._config.max,
|
||||
this._config.step,
|
||||
this._from,
|
||||
this._to
|
||||
);
|
||||
|
||||
this._selectNumeric = true;
|
||||
this._selectNonNumeric = true;
|
||||
this._selectBlank = true;
|
||||
this._selectError = true;
|
||||
this._selectNumeric = true;
|
||||
this._selectNonNumeric = true;
|
||||
this._selectBlank = true;
|
||||
this._selectError = true;
|
||||
|
||||
this._setRangeIndicators();
|
||||
this._setRangeIndicators();
|
||||
};
|
||||
|
||||
getUIState() {
|
||||
var json = {
|
||||
c: this.getJSON(),
|
||||
o: this._options
|
||||
};
|
||||
|
||||
return json;
|
||||
};
|
||||
|
||||
getJSON() {
|
||||
var o = {
|
||||
type: "range",
|
||||
name: this._config.name,
|
||||
expression: this._config.expression,
|
||||
columnName: this._config.columnName,
|
||||
selectNumeric: this._selectNumeric,
|
||||
selectNonNumeric: this._selectNonNumeric,
|
||||
selectBlank: this._selectBlank,
|
||||
selectError: this._selectError
|
||||
};
|
||||
|
||||
if (this._from !== null) {
|
||||
o.from = this._from;
|
||||
}
|
||||
if (this._to !== null) {
|
||||
o.to = this._to;
|
||||
}
|
||||
|
||||
return o;
|
||||
};
|
||||
|
||||
hasSelection() {
|
||||
if (!this._selectNumeric || !this._selectNonNumeric || !this._selectBlank || !this._selectError) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (this._from !== null && (!this._initializedUI || this._from > this._config.min)) ||
|
||||
(this._to !== null && (!this._initializedUI || this._to < this._config.max));
|
||||
};
|
||||
|
||||
_initializeUI() {
|
||||
var self = this;
|
||||
this._div
|
||||
.empty()
|
||||
.show()
|
||||
.html(
|
||||
'<div class="facet-title" bind="headerDiv">' +
|
||||
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td>' +
|
||||
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
|
||||
'<a href="javascript:{}" class="facet-choice-link" bind="changeButton">'+$.i18n('core-facets/change')+'</a>' +
|
||||
'<span bind="facetTitle"></span>' +
|
||||
'</td>' +
|
||||
'</tr></table></div>' +
|
||||
'</div>' +
|
||||
'<div class="facet-expression" bind="expressionDiv" title="'+$.i18n('core-facets/click-to-edit')+'"></div>' +
|
||||
'<div class="facet-range-body">' +
|
||||
'<div class="facet-range-message" bind="messageDiv">'+$.i18n('core-facets/loading')+'</div>' +
|
||||
'<div class="facet-range-slider" bind="sliderWidgetDiv">' +
|
||||
'<div class="facet-range-histogram" bind="histogramDiv"></div>' +
|
||||
'</div>' +
|
||||
'<div class="facet-range-status" bind="statusDiv"></div>' +
|
||||
'<div class="facet-range-other-choices" bind="otherChoicesDiv"></div>' +
|
||||
'</div>'
|
||||
);
|
||||
this._elmts = DOM.bind(this._div);
|
||||
|
||||
this._elmts.facetTitle.text(this._config.name);
|
||||
this._elmts.changeButton.attr("title",$.i18n('core-facets/current-expression')+": " + this._config.expression).click(function() {
|
||||
self._elmts.expressionDiv.slideToggle(100, function() {
|
||||
if (self._elmts.expressionDiv.css("display") != "none") {
|
||||
self._editExpression();
|
||||
}
|
||||
});
|
||||
});
|
||||
this._elmts.expressionDiv.text(this._config.expression).click(function() {
|
||||
self._editExpression();
|
||||
}).hide();
|
||||
|
||||
this._elmts.resetButton.click(function() {
|
||||
self.reset();
|
||||
self._updateRest();
|
||||
});
|
||||
|
||||
this._elmts.removeButton.click(function() { self._remove(); });
|
||||
this._elmts.minimizeButton.click(function() { self._minimize(); });
|
||||
|
||||
this._histogram = new HistogramWidget(this._elmts.histogramDiv, { binColors: [ "#bbccff", "#88aaee" ] });
|
||||
this._sliderWidget = new SliderWidget(this._elmts.sliderWidgetDiv);
|
||||
|
||||
this._elmts.sliderWidgetDiv.bind("slide", function(evt, data) {
|
||||
self._from = data.from;
|
||||
self._to = data.to;
|
||||
self._setRangeIndicators();
|
||||
}).bind("stop", function(evt, data) {
|
||||
self._from = data.from;
|
||||
self._to = data.to;
|
||||
self._selectNumeric = true;
|
||||
self._updateRest();
|
||||
});
|
||||
};
|
||||
|
||||
_renderOtherChoices() {
|
||||
var self = this;
|
||||
var container = this._elmts.otherChoicesDiv.empty();
|
||||
|
||||
if (this._baseNonNumericCount === 0 && this._baseBlankCount === 0 && this._baseErrorCount === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var facet_id = this._div.attr("id");
|
||||
|
||||
var choices = $('<div>').addClass("facet-range-choices");
|
||||
|
||||
// ----------------- numeric -----------------
|
||||
|
||||
var numericDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var numericCheck = $('<input type="checkbox" />').attr("id",facet_id + "-numeric").appendTo(numericDiv).change(function() {
|
||||
self._selectNumeric = !self._selectNumeric;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectNumeric) numericCheck.prop('checked', true);
|
||||
|
||||
var numericLabel = $('<label>').attr("for", facet_id + "-numeric").appendTo(numericDiv);
|
||||
$('<span>').text($.i18n('core-facets/numeric')+" ").addClass("facet-range-choice-label").appendTo(numericLabel);
|
||||
$('<div>').text(this._numericCount).addClass("facet-range-choice-count").appendTo(numericLabel);
|
||||
|
||||
// ----------------- non-numeric -----------------
|
||||
|
||||
var nonNumericDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var nonNumericCheck = $('<input type="checkbox" />').attr("id",facet_id + "-non-numeric").appendTo(nonNumericDiv).change(function() {
|
||||
self._selectNonNumeric = !self._selectNonNumeric;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectNonNumeric) nonNumericCheck.prop('checked', true);
|
||||
|
||||
var nonNumericLabel = $('<label>').attr("for", facet_id + "-non-numeric").appendTo(nonNumericDiv);
|
||||
$('<span>').text("Non-numeric ").addClass("facet-range-choice-label").appendTo(nonNumericLabel);
|
||||
$('<div>').text(this._nonNumericCount).addClass("facet-range-choice-count").appendTo(nonNumericLabel);
|
||||
|
||||
if (this._baseNonNumericCount === 0) nonNumericCheck.prop('checked', false);
|
||||
|
||||
// ----------------- blank -----------------
|
||||
|
||||
var blankDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var blankCheck = $('<input type="checkbox" />').attr("id",facet_id + "-blank").appendTo(blankDiv).change(function() {
|
||||
self._selectBlank = !self._selectBlank;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectBlank) blankCheck.prop('checked', true);
|
||||
|
||||
var blankLabel = $('<label>').attr("for", facet_id + "-blank").appendTo(blankDiv);
|
||||
$('<span>').text("Blank ").addClass("facet-range-choice-label").appendTo(blankLabel);
|
||||
$('<div>').text(this._blankCount).addClass("facet-range-choice-count").appendTo(blankLabel);
|
||||
|
||||
if (this._baseBlankCount === 0) blankCheck.prop('checked', false);
|
||||
|
||||
// ----------------- error -----------------
|
||||
|
||||
var errorDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var errorCheck = $('<input type="checkbox" />').attr("id",facet_id + "-error").appendTo(errorDiv).change(function() {
|
||||
self._selectError = !self._selectError;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectError) errorCheck.prop('checked', true);
|
||||
|
||||
var errorLabel = $('<label>').attr("for", facet_id + "-error").appendTo(errorDiv);
|
||||
$('<span>').text("Error ").addClass("facet-range-choice-label").appendTo(errorLabel);
|
||||
$('<div>').text(this._errorCount).addClass("facet-range-choice-count").appendTo(errorLabel);
|
||||
|
||||
if (this._baseErrorCount === 0) errorCheck.prop("checked", false);
|
||||
|
||||
// --------------------------
|
||||
|
||||
choices.appendTo(container);
|
||||
};
|
||||
|
||||
_setRangeIndicators() {
|
||||
this._elmts.statusDiv.html($.i18n('core-facets/value-range', this._formatter.format(this._from), this._formatter.format(this._to)));
|
||||
};
|
||||
|
||||
updateState(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._baseNumericCount = data.baseNumericCount;
|
||||
this._baseNonNumericCount = data.baseNonNumericCount;
|
||||
this._baseBlankCount = data.baseBlankCount;
|
||||
this._baseErrorCount = data.baseErrorCount;
|
||||
|
||||
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 : $.i18n('core-facets/unknown-error')+".";
|
||||
}
|
||||
|
||||
this.render();
|
||||
};
|
||||
|
||||
render() {
|
||||
if (!this._initializedUI) {
|
||||
this._initializeUI();
|
||||
this._initializedUI = true;
|
||||
}
|
||||
|
||||
if (this._error) {
|
||||
this._elmts.messageDiv.text(this._errorMessage).show();
|
||||
this._elmts.sliderWidgetDiv.hide();
|
||||
this._elmts.histogramDiv.hide();
|
||||
this._elmts.statusDiv.hide();
|
||||
this._elmts.otherChoicesDiv.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
this._elmts.messageDiv.hide();
|
||||
this._elmts.sliderWidgetDiv.show();
|
||||
this._elmts.histogramDiv.show();
|
||||
this._elmts.statusDiv.show();
|
||||
this._elmts.otherChoicesDiv.show();
|
||||
|
||||
this._sliderWidget.update(
|
||||
this._config.min,
|
||||
this._config.max,
|
||||
this._config.step,
|
||||
this._from,
|
||||
this._to
|
||||
);
|
||||
this._histogram.update(
|
||||
this._config.min,
|
||||
this._config.max,
|
||||
this._config.step,
|
||||
[ this._baseBins, this._bins ]
|
||||
);
|
||||
|
||||
this._setRangeIndicators();
|
||||
this._renderOtherChoices();
|
||||
};
|
||||
|
||||
_updateRest() {
|
||||
Refine.update({ engineChanged: true });
|
||||
};
|
||||
|
||||
_editExpression() {
|
||||
var self = this;
|
||||
var title = (this._config.columnName) ?
|
||||
($.i18n('core-facets/edit-based-col')+" " + this._config.columnName) :
|
||||
$.i18n('core-facets/edit-facet-exp');
|
||||
|
||||
var column = Refine.columnNameToColumn(this._config.columnName);
|
||||
var o = DataTableView.sampleVisibleRows(column);
|
||||
|
||||
new ExpressionPreviewDialog(
|
||||
title,
|
||||
column ? column.cellIndex : -1,
|
||||
o.rowIndices,
|
||||
o.values,
|
||||
this._config.expression,
|
||||
function(expr) {
|
||||
if (expr != self._config.expression) {
|
||||
self._config.expression = expr;
|
||||
self._elmts.expressionDiv.text(self._config.expression);
|
||||
|
||||
self.reset();
|
||||
self._from = null;
|
||||
self._to = null;
|
||||
self._updateRest();
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
RangeFacet.reconstruct = function(div, uiState) {
|
||||
return new RangeFacet(div, uiState.c, uiState.o);
|
||||
};
|
||||
|
||||
RangeFacet.prototype.dispose = function() {
|
||||
};
|
||||
|
||||
RangeFacet.prototype.getUIState = function() {
|
||||
var json = {
|
||||
c: this.getJSON(),
|
||||
o: this._options
|
||||
};
|
||||
|
||||
return json;
|
||||
};
|
||||
|
||||
RangeFacet.prototype.getJSON = function() {
|
||||
var o = {
|
||||
type: "range",
|
||||
name: this._config.name,
|
||||
expression: this._config.expression,
|
||||
columnName: this._config.columnName,
|
||||
selectNumeric: this._selectNumeric,
|
||||
selectNonNumeric: this._selectNonNumeric,
|
||||
selectBlank: this._selectBlank,
|
||||
selectError: this._selectError
|
||||
};
|
||||
|
||||
if (this._from !== null) {
|
||||
o.from = this._from;
|
||||
}
|
||||
if (this._to !== null) {
|
||||
o.to = this._to;
|
||||
}
|
||||
|
||||
return o;
|
||||
};
|
||||
|
||||
RangeFacet.prototype.hasSelection = function() {
|
||||
if (!this._selectNumeric || !this._selectNonNumeric || !this._selectBlank || !this._selectError) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (this._from !== null && (!this._initializedUI || this._from > this._config.min)) ||
|
||||
(this._to !== null && (!this._initializedUI || this._to < this._config.max));
|
||||
};
|
||||
|
||||
RangeFacet.prototype._initializeUI = function() {
|
||||
var self = this;
|
||||
this._div
|
||||
.empty()
|
||||
.show()
|
||||
.html(
|
||||
'<div class="facet-title" bind="headerDiv">' +
|
||||
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td>' +
|
||||
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
|
||||
'<a href="javascript:{}" class="facet-choice-link" bind="changeButton">'+$.i18n('core-facets/change')+'</a>' +
|
||||
'<span bind="facetTitle"></span>' +
|
||||
'</td>' +
|
||||
'</tr></table></div>' +
|
||||
'</div>' +
|
||||
'<div class="facet-expression" bind="expressionDiv" title="'+$.i18n('core-facets/click-to-edit')+'"></div>' +
|
||||
'<div class="facet-range-body">' +
|
||||
'<div class="facet-range-message" bind="messageDiv">'+$.i18n('core-facets/loading')+'</div>' +
|
||||
'<div class="facet-range-slider" bind="sliderWidgetDiv">' +
|
||||
'<div class="facet-range-histogram" bind="histogramDiv"></div>' +
|
||||
'</div>' +
|
||||
'<div class="facet-range-status" bind="statusDiv"></div>' +
|
||||
'<div class="facet-range-other-choices" bind="otherChoicesDiv"></div>' +
|
||||
'</div>'
|
||||
);
|
||||
this._elmts = DOM.bind(this._div);
|
||||
|
||||
this._elmts.facetTitle.text(this._config.name);
|
||||
this._elmts.changeButton.attr("title",$.i18n('core-facets/current-expression')+": " + this._config.expression).click(function() {
|
||||
self._elmts.expressionDiv.slideToggle(100, function() {
|
||||
if (self._elmts.expressionDiv.css("display") != "none") {
|
||||
self._editExpression();
|
||||
}
|
||||
});
|
||||
});
|
||||
this._elmts.expressionDiv.text(this._config.expression).click(function() {
|
||||
self._editExpression();
|
||||
}).hide();
|
||||
|
||||
this._elmts.resetButton.click(function() {
|
||||
self.reset();
|
||||
self._updateRest();
|
||||
});
|
||||
|
||||
this._elmts.removeButton.click(function() { self._remove(); });
|
||||
this._elmts.minimizeButton.click(function() { self._minimize(); });
|
||||
|
||||
this._histogram = new HistogramWidget(this._elmts.histogramDiv, { binColors: [ "#bbccff", "#88aaee" ] });
|
||||
this._sliderWidget = new SliderWidget(this._elmts.sliderWidgetDiv);
|
||||
|
||||
this._elmts.sliderWidgetDiv.bind("slide", function(evt, data) {
|
||||
self._from = data.from;
|
||||
self._to = data.to;
|
||||
self._setRangeIndicators();
|
||||
}).bind("stop", function(evt, data) {
|
||||
self._from = data.from;
|
||||
self._to = data.to;
|
||||
self._selectNumeric = true;
|
||||
self._updateRest();
|
||||
});
|
||||
};
|
||||
|
||||
RangeFacet.prototype._renderOtherChoices = function() {
|
||||
var self = this;
|
||||
var container = this._elmts.otherChoicesDiv.empty();
|
||||
|
||||
if (this._baseNonNumericCount === 0 && this._baseBlankCount === 0 && this._baseErrorCount === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var facet_id = this._div.attr("id");
|
||||
|
||||
var choices = $('<div>').addClass("facet-range-choices");
|
||||
|
||||
// ----------------- numeric -----------------
|
||||
|
||||
var numericDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var numericCheck = $('<input type="checkbox" />').attr("id",facet_id + "-numeric").appendTo(numericDiv).change(function() {
|
||||
self._selectNumeric = !self._selectNumeric;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectNumeric) numericCheck.prop('checked', true);
|
||||
|
||||
var numericLabel = $('<label>').attr("for", facet_id + "-numeric").appendTo(numericDiv);
|
||||
$('<span>').text($.i18n('core-facets/numeric')+" ").addClass("facet-range-choice-label").appendTo(numericLabel);
|
||||
$('<div>').text(this._numericCount).addClass("facet-range-choice-count").appendTo(numericLabel);
|
||||
|
||||
// ----------------- non-numeric -----------------
|
||||
|
||||
var nonNumericDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var nonNumericCheck = $('<input type="checkbox" />').attr("id",facet_id + "-non-numeric").appendTo(nonNumericDiv).change(function() {
|
||||
self._selectNonNumeric = !self._selectNonNumeric;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectNonNumeric) nonNumericCheck.prop('checked', true);
|
||||
|
||||
var nonNumericLabel = $('<label>').attr("for", facet_id + "-non-numeric").appendTo(nonNumericDiv);
|
||||
$('<span>').text("Non-numeric ").addClass("facet-range-choice-label").appendTo(nonNumericLabel);
|
||||
$('<div>').text(this._nonNumericCount).addClass("facet-range-choice-count").appendTo(nonNumericLabel);
|
||||
|
||||
if (this._baseNonNumericCount === 0) nonNumericCheck.prop('checked', false);
|
||||
|
||||
// ----------------- blank -----------------
|
||||
|
||||
var blankDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var blankCheck = $('<input type="checkbox" />').attr("id",facet_id + "-blank").appendTo(blankDiv).change(function() {
|
||||
self._selectBlank = !self._selectBlank;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectBlank) blankCheck.prop('checked', true);
|
||||
|
||||
var blankLabel = $('<label>').attr("for", facet_id + "-blank").appendTo(blankDiv);
|
||||
$('<span>').text("Blank ").addClass("facet-range-choice-label").appendTo(blankLabel);
|
||||
$('<div>').text(this._blankCount).addClass("facet-range-choice-count").appendTo(blankLabel);
|
||||
|
||||
if (this._baseBlankCount === 0) blankCheck.prop('checked', false);
|
||||
|
||||
// ----------------- error -----------------
|
||||
|
||||
var errorDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var errorCheck = $('<input type="checkbox" />').attr("id",facet_id + "-error").appendTo(errorDiv).change(function() {
|
||||
self._selectError = !self._selectError;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectError) errorCheck.prop('checked', true);
|
||||
|
||||
var errorLabel = $('<label>').attr("for", facet_id + "-error").appendTo(errorDiv);
|
||||
$('<span>').text("Error ").addClass("facet-range-choice-label").appendTo(errorLabel);
|
||||
$('<div>').text(this._errorCount).addClass("facet-range-choice-count").appendTo(errorLabel);
|
||||
|
||||
if (this._baseErrorCount === 0) errorCheck.prop("checked", false);
|
||||
|
||||
// --------------------------
|
||||
|
||||
choices.appendTo(container);
|
||||
};
|
||||
|
||||
RangeFacet.prototype._setRangeIndicators = function() {
|
||||
this._elmts.statusDiv.html(this._addCommas(this._from.toFixed(2)) + " — " + this._addCommas(this._to.toFixed(2)));
|
||||
};
|
||||
|
||||
RangeFacet.prototype._addCommas = function(nStr) {
|
||||
nStr += '';
|
||||
x = nStr.split('.');
|
||||
x1 = x[0];
|
||||
x2 = x.length > 1 ? '.' + x[1] : '';
|
||||
var rgx = /(\d+)(\d{3})/;
|
||||
while (rgx.test(x1)) {
|
||||
x1 = x1.replace(rgx, '$1' + ',' + '$2');
|
||||
}
|
||||
return x1 + x2;
|
||||
};
|
||||
|
||||
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;
|
||||
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._baseNumericCount = data.baseNumericCount;
|
||||
this._baseNonNumericCount = data.baseNonNumericCount;
|
||||
this._baseBlankCount = data.baseBlankCount;
|
||||
this._baseErrorCount = data.baseErrorCount;
|
||||
|
||||
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 : $.i18n('core-facets/unknown-error')+".";
|
||||
}
|
||||
|
||||
this.render();
|
||||
};
|
||||
|
||||
RangeFacet.prototype.render = function() {
|
||||
if (!this._initializedUI) {
|
||||
this._initializeUI();
|
||||
this._initializedUI = true;
|
||||
}
|
||||
|
||||
if (this._error) {
|
||||
this._elmts.messageDiv.text(this._errorMessage).show();
|
||||
this._elmts.sliderWidgetDiv.hide();
|
||||
this._elmts.histogramDiv.hide();
|
||||
this._elmts.statusDiv.hide();
|
||||
this._elmts.otherChoicesDiv.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
this._elmts.messageDiv.hide();
|
||||
this._elmts.sliderWidgetDiv.show();
|
||||
this._elmts.histogramDiv.show();
|
||||
this._elmts.statusDiv.show();
|
||||
this._elmts.otherChoicesDiv.show();
|
||||
|
||||
this._sliderWidget.update(
|
||||
this._config.min,
|
||||
this._config.max,
|
||||
this._config.step,
|
||||
this._from,
|
||||
this._to
|
||||
);
|
||||
this._histogram.update(
|
||||
this._config.min,
|
||||
this._config.max,
|
||||
this._config.step,
|
||||
[ this._baseBins, this._bins ]
|
||||
);
|
||||
|
||||
this._setRangeIndicators();
|
||||
this._renderOtherChoices();
|
||||
};
|
||||
|
||||
RangeFacet.prototype._remove = function() {
|
||||
ui.browsingEngine.removeFacet(this);
|
||||
|
||||
this._div = null;
|
||||
this._config = null;
|
||||
this._data = null;
|
||||
};
|
||||
|
||||
RangeFacet.prototype._minimize = function() {
|
||||
if(!this._minimizeState) {
|
||||
this._div.addClass("facet-state-minimize");
|
||||
} else {
|
||||
this._div.removeClass("facet-state-minimize");
|
||||
}
|
||||
|
||||
this._minimizeState = !this._minimizeState;
|
||||
};
|
||||
|
||||
RangeFacet.prototype._updateRest = function() {
|
||||
Refine.update({ engineChanged: true });
|
||||
};
|
||||
|
||||
RangeFacet.prototype._editExpression = function() {
|
||||
var self = this;
|
||||
var title = (this._config.columnName) ?
|
||||
($.i18n('core-facets/edit-based-col')+" " + this._config.columnName) :
|
||||
$.i18n('core-facets/edit-facet-exp');
|
||||
|
||||
var column = Refine.columnNameToColumn(this._config.columnName);
|
||||
var o = DataTableView.sampleVisibleRows(column);
|
||||
|
||||
new ExpressionPreviewDialog(
|
||||
title,
|
||||
column ? column.cellIndex : -1,
|
||||
o.rowIndices,
|
||||
o.values,
|
||||
this._config.expression,
|
||||
function(expr) {
|
||||
if (expr != self._config.expression) {
|
||||
self._config.expression = expr;
|
||||
self._elmts.expressionDiv.text(self._config.expression);
|
||||
|
||||
self.reset();
|
||||
self._from = null;
|
||||
self._to = null;
|
||||
self._updateRest();
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
@ -31,345 +31,326 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
*/
|
||||
|
||||
function ScatterplotFacet(div, config, options) {
|
||||
this._div = div;
|
||||
this._config = config;
|
||||
this._options = options;
|
||||
class ScatterplotFacet extends Facet {
|
||||
constructor(div, config, options) {
|
||||
super(div, config, options);
|
||||
|
||||
this._minimizeState = false;
|
||||
this._error = false;
|
||||
this._initializedUI = false;
|
||||
};
|
||||
|
||||
this._error = false;
|
||||
this._initializedUI = false;
|
||||
}
|
||||
update() {
|
||||
this._plotAreaSelector.update();
|
||||
};
|
||||
|
||||
ScatterplotFacet.prototype.update = function() {
|
||||
this._plotAreaSelector.update();
|
||||
};
|
||||
reset() {
|
||||
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.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();
|
||||
dispose() {
|
||||
this._elmts.plotImg.imgAreaSelect({ hide : true });
|
||||
};
|
||||
|
||||
getUIState() {
|
||||
var json = {
|
||||
c: this.getJSON(),
|
||||
o: this._options
|
||||
};
|
||||
|
||||
return json;
|
||||
};
|
||||
|
||||
getJSON() {
|
||||
this._config.type = "scatterplot";
|
||||
var dot = this._config.dot;
|
||||
if (typeof dot == 'number') this._config.dot.toFixed(2);
|
||||
return this._config;
|
||||
};
|
||||
|
||||
hasSelection() {
|
||||
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);
|
||||
};
|
||||
|
||||
_initializeUI() {
|
||||
var self = this;
|
||||
var container = this._div.empty().show();
|
||||
|
||||
var facet_id = container.attr("id");
|
||||
|
||||
this._div.empty().show().html(
|
||||
'<div class="facet-title">' +
|
||||
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td>' +
|
||||
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
|
||||
'<span bind="titleSpan"></span>' +
|
||||
'</td>' +
|
||||
'</tr></table></div>' +
|
||||
'</div>' +
|
||||
'<div class="facet-scatterplot-body" bind="bodyDiv">' +
|
||||
'<div class="facet-scatterplot-message" bind="messageDiv">'+$.i18n('core-facets/loading')+'</div>' +
|
||||
'<table width="100%"><tr>' +
|
||||
'<td>' +
|
||||
'<div class="facet-scatterplot-plot-container">' +
|
||||
'<div class="facet-scatterplot-plot" bind="plotDiv">' +
|
||||
'<img class="facet-scatterplot-image" bind="plotBaseImg" />' +
|
||||
'<img class="facet-scatterplot-image" bind="plotImg" />' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</td>' +
|
||||
'<td class="facet-scatterplot-selectors-container" width="100%">' +
|
||||
'<div class="scatterplot-selectors" bind="selectors">' +
|
||||
'<div class="buttonset scatterplot-dim-selector">' +
|
||||
'<input type="radio" id="' + facet_id + '-dim-lin" name="' + facet_id + '-dim" value="lin"/><label class="dim-lin-label" for="' + facet_id + '-dim-lin" title="'+$.i18n('core-facets/linear-plot')+'">'+$.i18n('core-facets/linear-plot-abbr')+'</label>' +
|
||||
'<input type="radio" id="' + facet_id + '-dim-log" name="' + facet_id + '-dim" value="log"/><label class="dim-log-label" for="' + facet_id + '-dim-log" title="'+$.i18n('core-facets/logar-plot')+'">'+$.i18n('core-facets/logar-plot-abbr')+'</label>' +
|
||||
'</div>' +
|
||||
'<div class="buttonset scatterplot-rot-selector">' +
|
||||
'<input type="radio" id="' + facet_id + '-rot-ccw" name="' + facet_id + '-rot" value="ccw"/><label class="rot-ccw-label" for="' + facet_id + '-rot-ccw" title="'+$.i18n('core-facets/rotated-counter-clock')+'"> </label>' +
|
||||
'<input type="radio" id="' + facet_id + '-rot-none" name="' + facet_id + '-rot" value="none"/><label class="rot-none-label" for="' + facet_id + '-rot-none" title="'+$.i18n('core-facets/no-rotation')+'"> </label>' +
|
||||
'<input type="radio" id="' + facet_id + '-rot-cw" name="' + facet_id + '-rot" value="cw"/><label class="rot-cw-label" for="' + facet_id + '-rot-cw" title="'+$.i18n('core-facets/rotated-clock')+'"> </label>' +
|
||||
'</div>' +
|
||||
'<div class="buttonset scatterplot-dot-selector">' +
|
||||
'<input type="radio" id="' + facet_id + '-dot-small" name="' + facet_id + '-dot" value="small"/><label class="dot-small-label" for="' + facet_id + '-dot-small" title="'+$.i18n('core-facets/small-dot')+'"> </label>' +
|
||||
'<input type="radio" id="' + facet_id + '-dot-regular" name="' + facet_id + '-dot" value="regular"/><label class="dot-regular-label" for="' + facet_id + '-dot-regular" title="'+$.i18n('core-facets/regular-dot')+'"> </label>' +
|
||||
'<input type="radio" id="' + facet_id + '-dot-big" name="' + facet_id + '-dot" value="big"/><label class="dot-big-label" for="' + facet_id + '-dot-big" title="'+$.i18n('core-facets/big-dot')+'"> </label>' +
|
||||
'</div>' +
|
||||
'<div class="scatterplot-export-plot"><a bind="exportPlotLink" class="action" target="_blank">'+$.i18n('core-facets/export-plot')+'</a></div>' +
|
||||
'</div>' +
|
||||
'</td>' +
|
||||
'</tr></table>' +
|
||||
'<div class="facet-scatterplot-status" bind="statusDiv"></div>' +
|
||||
'</div>'
|
||||
);
|
||||
this._elmts = DOM.bind(this._div);
|
||||
|
||||
this._elmts.titleSpan.text(this._config.name);
|
||||
this._elmts.removeButton.click(function() { self._remove(); });
|
||||
this._elmts.minimizeButton.click(function() { self._minimize(); });
|
||||
|
||||
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").prop('checked', true);
|
||||
} else if (this._config.dim_x == 'log' && this._config.dim_y == 'log') {
|
||||
this._elmts.selectors.find("#" + facet_id + "-dim-log").prop('checked', true);
|
||||
}
|
||||
|
||||
if (this._config.r == 'cw') {
|
||||
this._elmts.selectors.find("#" + facet_id + "-rot-cw").prop('checked', true);
|
||||
} else if (this._config.r == 'ccw') {
|
||||
this._elmts.selectors.find("#" + facet_id + "-rot-ccw").prop('checked', true);
|
||||
} else {
|
||||
this._elmts.selectors.find("#" + facet_id + "-rot-none").prop('checked', true);
|
||||
}
|
||||
|
||||
if (this._config.dot >= 1.2) {
|
||||
this._elmts.selectors.find("#" + facet_id + "-dot-big").prop('checked', true);
|
||||
} else if (this._config.dot <= 0.4) {
|
||||
this._elmts.selectors.find("#" + facet_id + "-dot-small").prop('checked', true);
|
||||
} else {
|
||||
this._elmts.selectors.find("#" + facet_id + "-dot-regular").prop('checked', true);
|
||||
}
|
||||
|
||||
this._elmts.selectors.find(".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(".scatterplot-rot-selector").change(function() {
|
||||
self._config.r = $(this).find("input:checked").val();
|
||||
self.reset();
|
||||
self._updateRest();
|
||||
self.changePlot();
|
||||
});
|
||||
|
||||
this._elmts.selectors.find(".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();
|
||||
};
|
||||
|
||||
_fillSelectionOptions(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;
|
||||
}
|
||||
};
|
||||
|
||||
_putSelectionOptions(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;
|
||||
}
|
||||
};
|
||||
|
||||
_formulateCurrentImageUrl() {
|
||||
return this._formulateImageUrl(ui.browsingEngine.getJSON(false, this), { color: "ff6a00" });
|
||||
};
|
||||
|
||||
_formulateBaseImageUrl() {
|
||||
return this._formulateImageUrl({},{ color: "888888", dot : this._config.dot * 0.9 });
|
||||
};
|
||||
|
||||
_formulateExportImageUrl() {
|
||||
return this._formulateImageUrl(ui.browsingEngine.getJSON(false, this), { dot : this._config.dot * 5, l: 500, base_color: "888888" });
|
||||
};
|
||||
|
||||
_formulateImageUrl(engineConfig, conf) {
|
||||
var options = {};
|
||||
for (var p in this._config) {
|
||||
if (this._config.hasOwnProperty(p)) {
|
||||
options[p] = this._config[p];
|
||||
}
|
||||
}
|
||||
for (var p in conf) {
|
||||
if (conf.hasOwnProperty(p)) {
|
||||
options[p] = conf[p];
|
||||
}
|
||||
}
|
||||
var params = {
|
||||
project: theProject.id,
|
||||
engine: JSON.stringify(engineConfig),
|
||||
plotter: JSON.stringify(options)
|
||||
};
|
||||
return "command/core/get-scatterplot?" + $.param(params);
|
||||
};
|
||||
|
||||
updateState(data) {
|
||||
if ("error" in data) {
|
||||
this._error = true;
|
||||
this._errorMessage = "error" in data ? data.error : $.i18n('core-facets/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();
|
||||
};
|
||||
|
||||
changePlot() {
|
||||
this._elmts.plotBaseImg.attr("src", this._formulateBaseImageUrl());
|
||||
this._elmts.plotImg.attr("src", this._formulateCurrentImageUrl());
|
||||
this._elmts.exportPlotLink.attr("href", this._formulateExportImageUrl());
|
||||
};
|
||||
|
||||
render() {
|
||||
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());
|
||||
this._elmts.exportPlotLink.attr("href", this._formulateExportImageUrl());
|
||||
};
|
||||
|
||||
_updateRest() {
|
||||
Refine.update({ engineChanged: true });
|
||||
};
|
||||
};
|
||||
|
||||
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(
|
||||
'<div class="facet-title">' +
|
||||
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td>' +
|
||||
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
|
||||
'<span bind="titleSpan"></span>' +
|
||||
'</td>' +
|
||||
'</tr></table></div>' +
|
||||
'</div>' +
|
||||
'<div class="facet-scatterplot-body" bind="bodyDiv">' +
|
||||
'<div class="facet-scatterplot-message" bind="messageDiv">'+$.i18n('core-facets/loading')+'</div>' +
|
||||
'<table width="100%"><tr>' +
|
||||
'<td>' +
|
||||
'<div class="facet-scatterplot-plot-container">' +
|
||||
'<div class="facet-scatterplot-plot" bind="plotDiv">' +
|
||||
'<img class="facet-scatterplot-image" bind="plotBaseImg" />' +
|
||||
'<img class="facet-scatterplot-image" bind="plotImg" />' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</td>' +
|
||||
'<td class="facet-scatterplot-selectors-container" width="100%">' +
|
||||
'<div class="scatterplot-selectors" bind="selectors">' +
|
||||
'<div class="buttonset scatterplot-dim-selector">' +
|
||||
'<input type="radio" id="' + facet_id + '-dim-lin" name="' + facet_id + '-dim" value="lin"/><label class="dim-lin-label" for="' + facet_id + '-dim-lin" title="'+$.i18n('core-facets/linear-plot')+'">'+$.i18n('core-facets/linear-plot-abbr')+'</label>' +
|
||||
'<input type="radio" id="' + facet_id + '-dim-log" name="' + facet_id + '-dim" value="log"/><label class="dim-log-label" for="' + facet_id + '-dim-log" title="'+$.i18n('core-facets/logar-plot')+'">'+$.i18n('core-facets/logar-plot-abbr')+'</label>' +
|
||||
'</div>' +
|
||||
'<div class="buttonset scatterplot-rot-selector">' +
|
||||
'<input type="radio" id="' + facet_id + '-rot-ccw" name="' + facet_id + '-rot" value="ccw"/><label class="rot-ccw-label" for="' + facet_id + '-rot-ccw" title="'+$.i18n('core-facets/rotated-counter-clock')+'"> </label>' +
|
||||
'<input type="radio" id="' + facet_id + '-rot-none" name="' + facet_id + '-rot" value="none"/><label class="rot-none-label" for="' + facet_id + '-rot-none" title="'+$.i18n('core-facets/no-rotation')+'"> </label>' +
|
||||
'<input type="radio" id="' + facet_id + '-rot-cw" name="' + facet_id + '-rot" value="cw"/><label class="rot-cw-label" for="' + facet_id + '-rot-cw" title="'+$.i18n('core-facets/rotated-clock')+'"> </label>' +
|
||||
'</div>' +
|
||||
'<div class="buttonset scatterplot-dot-selector">' +
|
||||
'<input type="radio" id="' + facet_id + '-dot-small" name="' + facet_id + '-dot" value="small"/><label class="dot-small-label" for="' + facet_id + '-dot-small" title="'+$.i18n('core-facets/small-dot')+'"> </label>' +
|
||||
'<input type="radio" id="' + facet_id + '-dot-regular" name="' + facet_id + '-dot" value="regular"/><label class="dot-regular-label" for="' + facet_id + '-dot-regular" title="'+$.i18n('core-facets/regular-dot')+'"> </label>' +
|
||||
'<input type="radio" id="' + facet_id + '-dot-big" name="' + facet_id + '-dot" value="big"/><label class="dot-big-label" for="' + facet_id + '-dot-big" title="'+$.i18n('core-facets/big-dot')+'"> </label>' +
|
||||
'</div>' +
|
||||
'<div class="scatterplot-export-plot"><a bind="exportPlotLink" class="action" target="_blank">'+$.i18n('core-facets/export-plot')+'</a></div>' +
|
||||
'</div>' +
|
||||
'</td>' +
|
||||
'</tr></table>' +
|
||||
'<div class="facet-scatterplot-status" bind="statusDiv"></div>' +
|
||||
'</div>'
|
||||
);
|
||||
this._elmts = DOM.bind(this._div);
|
||||
|
||||
this._elmts.titleSpan.text(this._config.name);
|
||||
this._elmts.removeButton.click(function() { self._remove(); });
|
||||
this._elmts.minimizeButton.click(function() { self._minimize(); });
|
||||
|
||||
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").prop('checked', true);
|
||||
} else if (this._config.dim_x == 'log' && this._config.dim_y == 'log') {
|
||||
this._elmts.selectors.find("#" + facet_id + "-dim-log").prop('checked', true);
|
||||
}
|
||||
|
||||
if (this._config.r == 'cw') {
|
||||
this._elmts.selectors.find("#" + facet_id + "-rot-cw").prop('checked', true);
|
||||
} else if (this._config.r == 'ccw') {
|
||||
this._elmts.selectors.find("#" + facet_id + "-rot-ccw").prop('checked', true);
|
||||
} else {
|
||||
this._elmts.selectors.find("#" + facet_id + "-rot-none").prop('checked', true);
|
||||
}
|
||||
|
||||
if (this._config.dot >= 1.2) {
|
||||
this._elmts.selectors.find("#" + facet_id + "-dot-big").prop('checked', true);
|
||||
} else if (this._config.dot <= 0.4) {
|
||||
this._elmts.selectors.find("#" + facet_id + "-dot-small").prop('checked', true);
|
||||
} else {
|
||||
this._elmts.selectors.find("#" + facet_id + "-dot-regular").prop('checked', true);
|
||||
}
|
||||
|
||||
this._elmts.selectors.find(".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(".scatterplot-rot-selector").change(function() {
|
||||
self._config.r = $(this).find("input:checked").val();
|
||||
self.reset();
|
||||
self._updateRest();
|
||||
self.changePlot();
|
||||
});
|
||||
|
||||
this._elmts.selectors.find(".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._formulateExportImageUrl = function() {
|
||||
return this._formulateImageUrl(ui.browsingEngine.getJSON(false, this), { dot : this._config.dot * 5, l: 500, base_color: "888888" });
|
||||
};
|
||||
|
||||
ScatterplotFacet.prototype._formulateImageUrl = function(engineConfig, conf) {
|
||||
var options = {};
|
||||
for (var p in this._config) {
|
||||
if (this._config.hasOwnProperty(p)) {
|
||||
options[p] = this._config[p];
|
||||
}
|
||||
}
|
||||
for (var p in conf) {
|
||||
if (conf.hasOwnProperty(p)) {
|
||||
options[p] = conf[p];
|
||||
}
|
||||
}
|
||||
var params = {
|
||||
project: theProject.id,
|
||||
engine: JSON.stringify(engineConfig),
|
||||
plotter: JSON.stringify(options)
|
||||
};
|
||||
return "command/core/get-scatterplot?" + $.param(params);
|
||||
};
|
||||
|
||||
ScatterplotFacet.prototype.updateState = function(data) {
|
||||
if ("error" in data) {
|
||||
this._error = true;
|
||||
this._errorMessage = "error" in data ? data.error : $.i18n('core-facets/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());
|
||||
this._elmts.exportPlotLink.attr("href", this._formulateExportImageUrl());
|
||||
};
|
||||
|
||||
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());
|
||||
this._elmts.exportPlotLink.attr("href", this._formulateExportImageUrl());
|
||||
};
|
||||
|
||||
ScatterplotFacet.prototype._remove = function() {
|
||||
ui.browsingEngine.removeFacet(this);
|
||||
|
||||
this._div = null;
|
||||
this._config = null;
|
||||
};
|
||||
|
||||
ScatterplotFacet.prototype._minimize = function() {
|
||||
if(!this._minimizeState) {
|
||||
this._div.addClass("facet-state-minimize");
|
||||
} else {
|
||||
this._div.removeClass("facet-state-minimize");
|
||||
}
|
||||
|
||||
this._minimizeState = !this._minimizeState;
|
||||
};
|
||||
|
||||
ScatterplotFacet.prototype._updateRest = function() {
|
||||
Refine.update({ engineChanged: true });
|
||||
};
|
||||
|
||||
@ -31,205 +31,183 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
*/
|
||||
|
||||
function TextSearchFacet(div, config, options) {
|
||||
this._div = div;
|
||||
this._config = config;
|
||||
if (!("invert" in this._config)) {
|
||||
class TextSearchFacet extends Facet {
|
||||
constructor(div, config, options) {
|
||||
super(div, config, options);
|
||||
if (!("invert" in this._config)) {
|
||||
this._config.invert = false;
|
||||
}
|
||||
|
||||
this._query = config.query || null;
|
||||
this._timerID = null;
|
||||
|
||||
this.textSearchFacetCounterForLabels = 0;
|
||||
|
||||
this._initializeUI();
|
||||
this._update();
|
||||
};
|
||||
|
||||
reset() {
|
||||
this._query = null;
|
||||
this._div.find(".input-container input").each(function() { this.value = ""; });
|
||||
};
|
||||
|
||||
getUIState() {
|
||||
var json = {
|
||||
c: this.getJSON(),
|
||||
o: this._options
|
||||
};
|
||||
|
||||
return json;
|
||||
};
|
||||
|
||||
getJSON() {
|
||||
var o = {
|
||||
type: "text",
|
||||
name: this._config.name,
|
||||
columnName: this._config.columnName,
|
||||
mode: this._config.mode,
|
||||
caseSensitive: this._config.caseSensitive,
|
||||
invert: this._config.invert,
|
||||
query: this._query
|
||||
};
|
||||
return o;
|
||||
};
|
||||
|
||||
hasSelection() {
|
||||
return this._query !== null;
|
||||
};
|
||||
|
||||
_initializeUI() {
|
||||
var self = this;
|
||||
var counter = this._uniqueIdForLabels();
|
||||
this._div.empty().show().html(
|
||||
'<div class="facet-title" bind="facetTitle">' +
|
||||
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td>' +
|
||||
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
|
||||
'<a href="javascript:{}" class="facet-choice-link" bind="invertButton">'+$.i18n('core-facets/invert')+'</a>' +
|
||||
'<span bind="titleSpan"></span>' +
|
||||
'</td>' +
|
||||
'</tr></table></div>' +
|
||||
'</div>' +
|
||||
'<div class="facet-text-body"><div class="grid-layout layout-tightest layout-full"><table>' +
|
||||
'<tr><td colspan="4"><div class="input-container"><input bind="input" /></div></td></tr>' +
|
||||
'<tr>' +
|
||||
'<td width="1%"><input type="checkbox" bind="caseSensitiveCheckbox" id="caseSensitiveCheckbox'+counter+'" /></td>' +
|
||||
'<td><label for="caseSensitiveCheckbox'+counter+'">'+$.i18n('core-facets/case-sensitive')+'</label></td>' +
|
||||
'<td width="1%"><input type="checkbox" bind="regexCheckbox" id="regexCheckbox'+counter+'" /></td>' +
|
||||
'<td><label for="regexCheckbox'+counter+'">'+$.i18n('core-facets/regular-exp')+'</label></td>' +
|
||||
'</tr>' +
|
||||
'</table></div>'
|
||||
);
|
||||
|
||||
this._elmts = DOM.bind(this._div);
|
||||
|
||||
this._elmts.titleSpan.text(this._config.name);
|
||||
if (this._config.caseSensitive) {
|
||||
this._elmts.caseSensitiveCheckbox.prop('checked', true);
|
||||
}
|
||||
if (this._config.mode === "regex") {
|
||||
this._elmts.regexCheckbox.prop('checked', true);
|
||||
}
|
||||
|
||||
this._elmts.removeButton.click(function() { self._remove(); });
|
||||
this._elmts.minimizeButton.click(function() { self._minimize(); });
|
||||
this._elmts.resetButton.click(function() { self._reset(); });
|
||||
this._elmts.invertButton.click(function() { self._invert(); });
|
||||
|
||||
this._elmts.caseSensitiveCheckbox.bind("change", function() {
|
||||
self._config.caseSensitive = this.checked;
|
||||
if (self._query !== null && self._query.length > 0) {
|
||||
self._scheduleUpdate();
|
||||
}
|
||||
});
|
||||
this._elmts.regexCheckbox.bind("change", function() {
|
||||
self._config.mode = this.checked ? "regex" : "text";
|
||||
if (self._query !== null && self._query.length > 0) {
|
||||
self._scheduleUpdate();
|
||||
}
|
||||
});
|
||||
|
||||
if (this._query) {
|
||||
this._elmts.input[0].value = this._query;
|
||||
}
|
||||
|
||||
this._elmts.input.bind("keyup change input",function(evt) {
|
||||
// Ignore events which don't change our input value
|
||||
if(this.value === self._query || this.value === '' && !self._query) {
|
||||
return;
|
||||
}
|
||||
self._query = this.value;
|
||||
self._scheduleUpdate();
|
||||
}).focus();
|
||||
|
||||
};
|
||||
|
||||
updateState(data) {
|
||||
this._update();
|
||||
};
|
||||
|
||||
render() {
|
||||
this._setRangeIndicators();
|
||||
};
|
||||
|
||||
_reset() {
|
||||
this._query = null;
|
||||
this._config.mode = "text";
|
||||
this._config.caseSensitive = false;
|
||||
this._elmts.input.val([]);
|
||||
this._elmts.caseSensitiveCheckbox.prop("checked", false);
|
||||
this._elmts.regexCheckbox.prop("checked", false);
|
||||
this._config.invert = false;
|
||||
}
|
||||
|
||||
this._options = options;
|
||||
this._updateRest();
|
||||
};
|
||||
|
||||
this._minimizeState = false;
|
||||
_invert() {
|
||||
this._config.invert = !this._config.invert;
|
||||
|
||||
this._query = config.query || null;
|
||||
this._timerID = null;
|
||||
this._updateRest();
|
||||
};
|
||||
|
||||
_update() {
|
||||
var invert = this._config.invert;
|
||||
if (invert) {
|
||||
this._elmts.facetTitle.addClass("facet-title-inverted");
|
||||
this._elmts.invertButton.addClass("facet-mode-inverted");
|
||||
} else {
|
||||
this._elmts.facetTitle.removeClass("facet-title-inverted");
|
||||
this._elmts.invertButton.removeClass("facet-mode-inverted");
|
||||
}
|
||||
};
|
||||
|
||||
_scheduleUpdate() {
|
||||
if (!this._timerID) {
|
||||
var self = this;
|
||||
this._timerID = window.setTimeout(function() {
|
||||
self._timerID = null;
|
||||
self._updateRest();
|
||||
}, self._config.mode === 'regex' ? 1500 : 500);
|
||||
}
|
||||
};
|
||||
|
||||
_updateRest() {
|
||||
Refine.update({ engineChanged: true });
|
||||
};
|
||||
|
||||
_uniqueIdForLabels() {
|
||||
return this.textSearchFacetCounterForLabels++;
|
||||
};
|
||||
};
|
||||
|
||||
this._initializeUI();
|
||||
this._update();
|
||||
}
|
||||
|
||||
TextSearchFacet.reconstruct = function(div, uiState) {
|
||||
return new TextSearchFacet(div, uiState.c, uiState.o);
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype.dispose = function() {
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype.reset = function() {
|
||||
this._query = null;
|
||||
this._div.find(".input-container input").each(function() { this.value = ""; });
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype.getUIState = function() {
|
||||
var json = {
|
||||
c: this.getJSON(),
|
||||
o: this._options
|
||||
};
|
||||
|
||||
return json;
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype.getJSON = function() {
|
||||
var o = {
|
||||
type: "text",
|
||||
name: this._config.name,
|
||||
columnName: this._config.columnName,
|
||||
mode: this._config.mode,
|
||||
caseSensitive: this._config.caseSensitive,
|
||||
invert: this._config.invert,
|
||||
query: this._query
|
||||
};
|
||||
return o;
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype.hasSelection = function() {
|
||||
return this._query !== null;
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype._initializeUI = function() {
|
||||
var self = this;
|
||||
var counter = this._uniqueIdForLabels();
|
||||
this._div.empty().show().html(
|
||||
'<div class="facet-title" bind="facetTitle">' +
|
||||
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td>' +
|
||||
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
|
||||
'<a href="javascript:{}" class="facet-choice-link" bind="invertButton">'+$.i18n('core-facets/invert')+'</a>' +
|
||||
'<span bind="titleSpan"></span>' +
|
||||
'</td>' +
|
||||
'</tr></table></div>' +
|
||||
'</div>' +
|
||||
'<div class="facet-text-body"><div class="grid-layout layout-tightest layout-full"><table>' +
|
||||
'<tr><td colspan="4"><div class="input-container"><input bind="input" /></div></td></tr>' +
|
||||
'<tr>' +
|
||||
'<td width="1%"><input type="checkbox" bind="caseSensitiveCheckbox" id="caseSensitiveCheckbox'+counter+'" /></td>' +
|
||||
'<td><label for="caseSensitiveCheckbox'+counter+'">'+$.i18n('core-facets/case-sensitive')+'</label></td>' +
|
||||
'<td width="1%"><input type="checkbox" bind="regexCheckbox" id="regexCheckbox'+counter+'" /></td>' +
|
||||
'<td><label for="regexCheckbox'+counter+'">'+$.i18n('core-facets/regular-exp')+'</label></td>' +
|
||||
'</tr>' +
|
||||
'</table></div>'
|
||||
);
|
||||
|
||||
this._elmts = DOM.bind(this._div);
|
||||
|
||||
this._elmts.titleSpan.text(this._config.name);
|
||||
if (this._config.caseSensitive) {
|
||||
this._elmts.caseSensitiveCheckbox.prop("checked", true);
|
||||
}
|
||||
if (this._config.mode === "regex") {
|
||||
this._elmts.regexCheckbox.prop('checked', true);
|
||||
}
|
||||
|
||||
this._elmts.removeButton.click(function() { self._remove(); });
|
||||
this._elmts.minimizeButton.click(function() { self._minimize(); });
|
||||
this._elmts.resetButton.click(function() { self._reset(); });
|
||||
this._elmts.invertButton.click(function() { self._invert(); });
|
||||
|
||||
this._elmts.caseSensitiveCheckbox.bind("change", function() {
|
||||
self._config.caseSensitive = this.checked;
|
||||
if (self._query !== null && self._query.length > 0) {
|
||||
self._scheduleUpdate();
|
||||
}
|
||||
});
|
||||
this._elmts.regexCheckbox.bind("change", function() {
|
||||
self._config.mode = this.checked ? "regex" : "text";
|
||||
if (self._query !== null && self._query.length > 0) {
|
||||
self._scheduleUpdate();
|
||||
}
|
||||
});
|
||||
|
||||
if (this._query) {
|
||||
this._elmts.input[0].value = this._query;
|
||||
}
|
||||
|
||||
this._elmts.input.bind("keyup change input",function(evt) {
|
||||
// Ignore events which don't change our input value
|
||||
if(this.value === self._query || this.value === '' && !self._query) {
|
||||
return;
|
||||
}
|
||||
self._query = this.value;
|
||||
self._scheduleUpdate();
|
||||
}).focus();
|
||||
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype.updateState = function(data) {
|
||||
this._update();
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype.render = function() {
|
||||
this._setRangeIndicators();
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype._reset = function() {
|
||||
this._query = null;
|
||||
this._config.mode = "text";
|
||||
this._config.caseSensitive = false;
|
||||
this._elmts.input.val([]);
|
||||
this._elmts.caseSensitiveCheckbox.prop("checked", false);
|
||||
this._elmts.regexCheckbox.prop("checked", false);
|
||||
this._config.invert = false;
|
||||
|
||||
this._updateRest();
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype._invert = function() {
|
||||
this._config.invert = !this._config.invert;
|
||||
|
||||
this._updateRest();
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype._remove = function() {
|
||||
ui.browsingEngine.removeFacet(this);
|
||||
|
||||
this._div = null;
|
||||
this._config = null;
|
||||
this._options = null;
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype._minimize = function() {
|
||||
if(!this._minimizeState) {
|
||||
this._div.addClass("facet-state-minimize");
|
||||
} else {
|
||||
this._div.removeClass("facet-state-minimize");
|
||||
}
|
||||
|
||||
this._minimizeState = !this._minimizeState;
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype._update = function () {
|
||||
var invert = this._config.invert;
|
||||
if (invert) {
|
||||
this._elmts.facetTitle.addClass("facet-title-inverted");
|
||||
this._elmts.invertButton.addClass("facet-mode-inverted");
|
||||
} else {
|
||||
this._elmts.facetTitle.removeClass("facet-title-inverted");
|
||||
this._elmts.invertButton.removeClass("facet-mode-inverted");
|
||||
}
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype._scheduleUpdate = function() {
|
||||
if (!this._timerID) {
|
||||
var self = this;
|
||||
this._timerID = window.setTimeout(function() {
|
||||
self._timerID = null;
|
||||
self._updateRest();
|
||||
}, self._config.mode === 'regex' ? 1500 : 500);
|
||||
}
|
||||
};
|
||||
|
||||
TextSearchFacet.prototype._updateRest = function() {
|
||||
Refine.update({ engineChanged: true });
|
||||
};
|
||||
|
||||
var textSearchFacetCounterForLabels = 0;
|
||||
TextSearchFacet.prototype._uniqueIdForLabels = function() {
|
||||
return textSearchFacetCounterForLabels++;
|
||||
};
|
||||
|
||||
@ -31,245 +31,374 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
*/
|
||||
|
||||
function TimeRangeFacet(div, config, options) {
|
||||
this._div = div;
|
||||
this._config = config;
|
||||
this._options = options;
|
||||
class TimeRangeFacet extends Facet{
|
||||
constructor(div, config, options) {
|
||||
super(div, config, options);
|
||||
|
||||
this._minimizeState = false;
|
||||
this._from = ("from" in this._config) ? this._config.from : null;
|
||||
this._to = ("to" in this._config) ? this._config.to : null;
|
||||
this._step = ("step" in this._config) ? this._config.step : null;
|
||||
|
||||
this._from = ("from" in this._config) ? this._config.from : null;
|
||||
this._to = ("to" in this._config) ? this._config.to : null;
|
||||
this._step = ("step" in this._config) ? this._config.step : null;
|
||||
this._selectTime = ("selectTime" in this._config) ? this._config.selectTime : true;
|
||||
this._selectNonTime = ("selectNonTime" in this._config) ? this._config.selectNonTime : true;
|
||||
this._selectBlank = ("selectBlank" in this._config) ? this._config.selectBlank : true;
|
||||
this._selectError = ("selectError" in this._config) ? this._config.selectError : true;
|
||||
|
||||
this._selectTime = ("selectTime" in this._config) ? this._config.selectTime : true;
|
||||
this._selectNonTime = ("selectNonTime" in this._config) ? this._config.selectNonTime : true;
|
||||
this._selectBlank = ("selectBlank" in this._config) ? this._config.selectBlank : true;
|
||||
this._selectError = ("selectError" in this._config) ? this._config.selectError : true;
|
||||
this._baseTimeCount = 0;
|
||||
this._baseNonTimeCount = 0;
|
||||
this._baseBlankCount = 0;
|
||||
this._baseErrorCount = 0;
|
||||
|
||||
this._baseTimeCount = 0;
|
||||
this._baseNonTimeCount = 0;
|
||||
this._baseBlankCount = 0;
|
||||
this._baseErrorCount = 0;
|
||||
this._timeCount = 0;
|
||||
this._nonTimeCount = 0;
|
||||
this._blankCount = 0;
|
||||
this._errorCount = 0;
|
||||
|
||||
this._timeCount = 0;
|
||||
this._nonTimeCount = 0;
|
||||
this._blankCount = 0;
|
||||
this._errorCount = 0;
|
||||
this._error = false;
|
||||
this._initializedUI = false;
|
||||
};
|
||||
|
||||
this._error = false;
|
||||
this._initializedUI = false;
|
||||
}
|
||||
reset() {
|
||||
this._from = this._config.min;
|
||||
this._to = this._config.max;
|
||||
this._sliderWidget.update(
|
||||
this._config.min,
|
||||
this._config.max,
|
||||
this._config.step,
|
||||
this._from,
|
||||
this._to
|
||||
);
|
||||
|
||||
TimeRangeFacet.prototype.reset = function() {
|
||||
this._from = this._config.min;
|
||||
this._to = this._config.max;
|
||||
this._sliderWidget.update(
|
||||
this._config.min,
|
||||
this._config.max,
|
||||
this._config.step,
|
||||
this._from,
|
||||
this._to
|
||||
);
|
||||
this._selectTime = true;
|
||||
this._selectNonTime = true;
|
||||
this._selectBlank = true;
|
||||
this._selectError = true;
|
||||
|
||||
this._selectTime = true;
|
||||
this._selectNonTime = true;
|
||||
this._selectBlank = true;
|
||||
this._selectError = true;
|
||||
this._setRangeIndicators();
|
||||
};
|
||||
|
||||
this._setRangeIndicators();
|
||||
getUIState() {
|
||||
var json = {
|
||||
c: this.getJSON(),
|
||||
o: this._options
|
||||
};
|
||||
|
||||
return json;
|
||||
};
|
||||
|
||||
getJSON() {
|
||||
var o = {
|
||||
type: "timerange",
|
||||
name: this._config.name,
|
||||
expression: this._config.expression,
|
||||
columnName: this._config.columnName,
|
||||
selectTime: this._selectTime,
|
||||
selectNonTime: this._selectNonTime,
|
||||
selectBlank: this._selectBlank,
|
||||
selectError: this._selectError
|
||||
};
|
||||
|
||||
if (this._from !== null) {
|
||||
o.from = this._from;
|
||||
}
|
||||
if (this._to !== null) {
|
||||
o.to = this._to;
|
||||
}
|
||||
|
||||
return o;
|
||||
};
|
||||
|
||||
hasSelection() {
|
||||
if (!this._selectTime || !this._selectNonTime || !this._selectBlank || !this._selectError) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (this._from !== null && (!this._initializedUI || this._from > this._config.min)) ||
|
||||
(this._to !== null && (!this._initializedUI || this._to < this._config.max));
|
||||
};
|
||||
|
||||
_initializeUI() {
|
||||
var self = this;
|
||||
this._div
|
||||
.empty()
|
||||
.show()
|
||||
.html(
|
||||
'<div class="facet-title" bind="headerDiv">' +
|
||||
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td>' +
|
||||
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
|
||||
'<a href="javascript:{}" class="facet-choice-link" bind="changeButton">'+$.i18n('core-facets/change')+'</a>' +
|
||||
'<span bind="facetTitle"></span>' +
|
||||
'</td>' +
|
||||
'</tr></table></div>' +
|
||||
'</div>' +
|
||||
'<div class="facet-expression" bind="expressionDiv" title="'+$.i18n('core-facets/click-to-edit')+'"></div>' +
|
||||
'<div class="facet-range-body">' +
|
||||
'<div class="facet-range-message" bind="messageDiv">'+$.i18n('core-facets/loading')+'</div>' +
|
||||
'<div class="facet-range-slider" bind="sliderWidgetDiv">' +
|
||||
'<div class="facet-range-histogram" bind="histogramDiv"></div>' +
|
||||
'</div>' +
|
||||
'<div class="facet-range-status" bind="statusDiv"></div>' +
|
||||
'<div class="facet-range-other-choices" bind="otherChoicesDiv"></div>' +
|
||||
'</div>'
|
||||
);
|
||||
this._elmts = DOM.bind(this._div);
|
||||
|
||||
this._elmts.facetTitle.text(this._config.name);
|
||||
this._elmts.changeButton.attr("title",$.i18n('core-facets/current-exp')+": " + this._config.expression).click(function() {
|
||||
self._elmts.expressionDiv.slideToggle(100, function() {
|
||||
if (self._elmts.expressionDiv.css("display") != "none") {
|
||||
self._editExpression();
|
||||
}
|
||||
});
|
||||
});
|
||||
this._elmts.expressionDiv.text(this._config.expression).click(function() {
|
||||
self._editExpression();
|
||||
}).hide();
|
||||
|
||||
this._elmts.resetButton.click(function() {
|
||||
self.reset();
|
||||
self._updateRest();
|
||||
});
|
||||
|
||||
this._elmts.removeButton.click(function() { self._remove(); });
|
||||
this._elmts.minimizeButton.click(function() { self._minimize(); });
|
||||
|
||||
this._histogram = new HistogramWidget(this._elmts.histogramDiv, { binColors: [ "#ccccff", "#6666ff" ] });
|
||||
this._sliderWidget = new SliderWidget(this._elmts.sliderWidgetDiv);
|
||||
|
||||
this._elmts.sliderWidgetDiv.bind("slide", function(evt, data) {
|
||||
self._from = data.from;
|
||||
self._to = data.to;
|
||||
self._setRangeIndicators();
|
||||
}).bind("stop", function(evt, data) {
|
||||
self._from = data.from;
|
||||
self._to = data.to;
|
||||
self._selectTime = true;
|
||||
self._updateRest();
|
||||
});
|
||||
};
|
||||
|
||||
_renderOtherChoices() {
|
||||
var self = this;
|
||||
var container = this._elmts.otherChoicesDiv.empty();
|
||||
|
||||
if (this._baseNonTimeCount === 0 && this._baseBlankCount === 0 && this._baseErrorCount === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var facet_id = this._div.attr("id");
|
||||
|
||||
var choices = $('<div>').addClass("facet-range-choices");
|
||||
|
||||
// ----------------- time -----------------
|
||||
|
||||
var timeDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var timeCheck = $('<input type="checkbox" />').attr("id",facet_id + "-time").appendTo(timeDiv).change(function() {
|
||||
self._selectTime = !self._selectTime;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectTime) timeCheck.prop('checked', true);
|
||||
|
||||
var timeLabel = $('<label>').attr("for", facet_id + "-time").appendTo(timeDiv);
|
||||
$('<span>').text($.i18n('core-facets/time')+" ").addClass("facet-range-choice-label").appendTo(timeLabel);
|
||||
$('<div>').text(this._timeCount).addClass("facet-range-choice-count").appendTo(timeLabel);
|
||||
|
||||
// ----------------- non-Time -----------------
|
||||
|
||||
var nonTimeDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var nonTimeCheck = $('<input type="checkbox" />').attr("id",facet_id + "-non-time").appendTo(nonTimeDiv).change(function() {
|
||||
self._selectNonTime = !self._selectNonTime;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectNonTime) nonTimeCheck.prop('checked', true);
|
||||
|
||||
var nonTimeLabel = $('<label>').attr("for", facet_id + "-non-time").appendTo(nonTimeDiv);
|
||||
$('<span>').text($.i18n('core-facets/non-time')+" ").addClass("facet-range-choice-label").appendTo(nonTimeLabel);
|
||||
$('<div>').text(this._nonTimeCount).addClass("facet-range-choice-count").appendTo(nonTimeLabel);
|
||||
|
||||
if (this._baseNonTimeCount === 0) nonTimeCheck.prop("checked", false);
|
||||
|
||||
// ----------------- blank -----------------
|
||||
|
||||
var blankDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var blankCheck = $('<input type="checkbox" />').attr("id",facet_id + "-blank").appendTo(blankDiv).change(function() {
|
||||
self._selectBlank = !self._selectBlank;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectBlank) blankCheck.prop('checked', true);
|
||||
|
||||
var blankLabel = $('<label>').attr("for", facet_id + "-blank").appendTo(blankDiv);
|
||||
$('<span>').text($.i18n('core-facets/blank')+" ").addClass("facet-range-choice-label").appendTo(blankLabel);
|
||||
$('<div>').text(this._blankCount).addClass("facet-range-choice-count").appendTo(blankLabel);
|
||||
|
||||
if (this._baseBlankCount === 0) blankCheck.prop("checked", false);
|
||||
|
||||
// ----------------- error -----------------
|
||||
|
||||
var errorDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var errorCheck = $('<input type="checkbox" />').attr("id",facet_id + "-error").appendTo(errorDiv).change(function() {
|
||||
self._selectError = !self._selectError;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectError) errorCheck.prop('checked', true);
|
||||
|
||||
var errorLabel = $('<label>').attr("for", facet_id + "-error").appendTo(errorDiv);
|
||||
$('<span>').text($.i18n('core-facets/error')+" ").addClass("facet-range-choice-label").appendTo(errorLabel);
|
||||
$('<div>').text(this._errorCount).addClass("facet-range-choice-count").appendTo(errorLabel);
|
||||
|
||||
if (this._baseErrorCount === 0) errorCheck.prop("checked", false);
|
||||
|
||||
// --------------------------
|
||||
|
||||
choices.appendTo(container);
|
||||
};
|
||||
|
||||
_setRangeIndicators() {
|
||||
var fromDate = new Date(this._from);
|
||||
var toDate = new Date(this._to);
|
||||
|
||||
if (this._step > 2629746000) { // > month
|
||||
var format = "yyyy";
|
||||
this._elmts.statusDiv.html(fromDate.toString(format) + " — " + toDate.toString(format));
|
||||
} else if (this.step > 3600000) { // > hour
|
||||
var format = "yyyy-MM-dd";
|
||||
this._elmts.statusDiv.html(fromDate.toString(format) + " — " + toDate.toString(format));
|
||||
} else {
|
||||
var timeOfDayformat = "HH:mm:ss";
|
||||
var dayOfYearFormat = "yyyy-MM-dd";
|
||||
this._elmts.statusDiv.html("<b>" + fromDate.toString(dayOfYearFormat) + "</b> " + fromDate.toString(timeOfDayformat) + " — " + "<b>" + toDate.toString(dayOfYearFormat) + "</b> " + toDate.toString(timeOfDayformat) );
|
||||
}
|
||||
};
|
||||
|
||||
updateState(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._baseTimeCount = data.baseTimeCount;
|
||||
this._baseNonTimeCount = data.baseNonTimeCount;
|
||||
this._baseBlankCount = data.baseBlankCount;
|
||||
this._baseErrorCount = data.baseErrorCount;
|
||||
|
||||
this._timeCount = data.timeCount;
|
||||
this._nonTimeCount = data.nonTimeCount;
|
||||
this._blankCount = data.blankCount;
|
||||
this._errorCount = data.errorCount;
|
||||
} else {
|
||||
this._error = true;
|
||||
this._errorMessage = "error" in data ? data.error : $.i18n('core-facets/unknown-error')+".";
|
||||
}
|
||||
|
||||
this.render();
|
||||
};
|
||||
|
||||
render() {
|
||||
if (!this._initializedUI) {
|
||||
this._initializeUI();
|
||||
this._initializedUI = true;
|
||||
}
|
||||
|
||||
if (this._error) {
|
||||
this._elmts.messageDiv.text(this._errorMessage).show();
|
||||
this._elmts.sliderWidgetDiv.hide();
|
||||
this._elmts.histogramDiv.hide();
|
||||
this._elmts.statusDiv.hide();
|
||||
this._elmts.otherChoicesDiv.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
this._elmts.messageDiv.hide();
|
||||
this._elmts.sliderWidgetDiv.show();
|
||||
this._elmts.histogramDiv.show();
|
||||
this._elmts.statusDiv.show();
|
||||
this._elmts.otherChoicesDiv.show();
|
||||
|
||||
this._sliderWidget.update(
|
||||
this._config.min,
|
||||
this._config.max,
|
||||
this._config.step,
|
||||
this._from,
|
||||
this._to
|
||||
);
|
||||
this._histogram.update(
|
||||
this._config.min,
|
||||
this._config.max,
|
||||
this._config.step,
|
||||
[ this._baseBins, this._bins ]
|
||||
);
|
||||
|
||||
this._setRangeIndicators();
|
||||
this._renderOtherChoices();
|
||||
};
|
||||
|
||||
_updateRest() {
|
||||
Refine.update({ engineChanged: true });
|
||||
};
|
||||
|
||||
_editExpression() {
|
||||
var self = this;
|
||||
var title = (this._config.columnName) ?
|
||||
($.i18n('core-facets/edit-based-col')+" " + this._config.columnName) :
|
||||
$.i18n('core-facets/edit-facet-exp');
|
||||
|
||||
var column = Refine.columnNameToColumn(this._config.columnName);
|
||||
var o = DataTableView.sampleVisibleRows(column);
|
||||
|
||||
new ExpressionPreviewDialog(
|
||||
title,
|
||||
column ? column.cellIndex : -1,
|
||||
o.rowIndices,
|
||||
o.values,
|
||||
this._config.expression,
|
||||
function(expr) {
|
||||
if (expr != self._config.expression) {
|
||||
self._config.expression = expr;
|
||||
self._elmts.expressionDiv.text(self._config.expression);
|
||||
|
||||
self.reset();
|
||||
self._from = null;
|
||||
self._to = null;
|
||||
self._updateRest();
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
TimeRangeFacet.reconstruct = function(div, uiState) {
|
||||
return new TimeRangeFacet(div, uiState.c, uiState.o);
|
||||
};
|
||||
|
||||
TimeRangeFacet.prototype.dispose = function() {
|
||||
};
|
||||
|
||||
TimeRangeFacet.prototype.getUIState = function() {
|
||||
var json = {
|
||||
c: this.getJSON(),
|
||||
o: this._options
|
||||
};
|
||||
|
||||
return json;
|
||||
};
|
||||
|
||||
TimeRangeFacet.prototype.getJSON = function() {
|
||||
var o = {
|
||||
type: "timerange",
|
||||
name: this._config.name,
|
||||
expression: this._config.expression,
|
||||
columnName: this._config.columnName,
|
||||
selectTime: this._selectTime,
|
||||
selectNonTime: this._selectNonTime,
|
||||
selectBlank: this._selectBlank,
|
||||
selectError: this._selectError
|
||||
};
|
||||
|
||||
if (this._from !== null) {
|
||||
o.from = this._from;
|
||||
}
|
||||
if (this._to !== null) {
|
||||
o.to = this._to;
|
||||
}
|
||||
|
||||
return o;
|
||||
};
|
||||
|
||||
TimeRangeFacet.prototype.hasSelection = function() {
|
||||
if (!this._selectTime || !this._selectNonTime || !this._selectBlank || !this._selectError) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return (this._from !== null && (!this._initializedUI || this._from > this._config.min)) ||
|
||||
(this._to !== null && (!this._initializedUI || this._to < this._config.max));
|
||||
};
|
||||
|
||||
TimeRangeFacet.prototype._initializeUI = function() {
|
||||
var self = this;
|
||||
this._div
|
||||
.empty()
|
||||
.show()
|
||||
.html(
|
||||
'<div class="facet-title" bind="headerDiv">' +
|
||||
'<div class="grid-layout layout-tightest layout-full"><table><tr>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td width="1%">' +
|
||||
'<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton"> </a>' +
|
||||
'</td>' +
|
||||
'<td>' +
|
||||
'<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
|
||||
'<a href="javascript:{}" class="facet-choice-link" bind="changeButton">'+$.i18n('core-facets/change')+'</a>' +
|
||||
'<span bind="facetTitle"></span>' +
|
||||
'</td>' +
|
||||
'</tr></table></div>' +
|
||||
'</div>' +
|
||||
'<div class="facet-expression" bind="expressionDiv" title="'+$.i18n('core-facets/click-to-edit')+'"></div>' +
|
||||
'<div class="facet-range-body">' +
|
||||
'<div class="facet-range-message" bind="messageDiv">'+$.i18n('core-facets/loading')+'</div>' +
|
||||
'<div class="facet-range-slider" bind="sliderWidgetDiv">' +
|
||||
'<div class="facet-range-histogram" bind="histogramDiv"></div>' +
|
||||
'</div>' +
|
||||
'<div class="facet-range-status" bind="statusDiv"></div>' +
|
||||
'<div class="facet-range-other-choices" bind="otherChoicesDiv"></div>' +
|
||||
'</div>'
|
||||
);
|
||||
this._elmts = DOM.bind(this._div);
|
||||
|
||||
this._elmts.facetTitle.text(this._config.name);
|
||||
this._elmts.changeButton.attr("title",$.i18n('core-facets/current-exp')+": " + this._config.expression).click(function() {
|
||||
self._elmts.expressionDiv.slideToggle(100, function() {
|
||||
if (self._elmts.expressionDiv.css("display") != "none") {
|
||||
self._editExpression();
|
||||
}
|
||||
});
|
||||
});
|
||||
this._elmts.expressionDiv.text(this._config.expression).click(function() {
|
||||
self._editExpression();
|
||||
}).hide();
|
||||
|
||||
this._elmts.resetButton.click(function() {
|
||||
self.reset();
|
||||
self._updateRest();
|
||||
});
|
||||
|
||||
this._elmts.removeButton.click(function() { self._remove(); });
|
||||
this._elmts.minimizeButton.click(function() { self._minimize(); });
|
||||
|
||||
this._histogram = new HistogramWidget(this._elmts.histogramDiv, { binColors: [ "#ccccff", "#6666ff" ] });
|
||||
this._sliderWidget = new SliderWidget(this._elmts.sliderWidgetDiv);
|
||||
|
||||
this._elmts.sliderWidgetDiv.bind("slide", function(evt, data) {
|
||||
self._from = data.from;
|
||||
self._to = data.to;
|
||||
self._setRangeIndicators();
|
||||
}).bind("stop", function(evt, data) {
|
||||
self._from = data.from;
|
||||
self._to = data.to;
|
||||
self._selectTime = true;
|
||||
self._updateRest();
|
||||
});
|
||||
};
|
||||
|
||||
TimeRangeFacet.prototype._renderOtherChoices = function() {
|
||||
var self = this;
|
||||
var container = this._elmts.otherChoicesDiv.empty();
|
||||
|
||||
if (this._baseNonTimeCount === 0 && this._baseBlankCount === 0 && this._baseErrorCount === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
var facet_id = this._div.attr("id");
|
||||
|
||||
var choices = $('<div>').addClass("facet-range-choices");
|
||||
|
||||
// ----------------- time -----------------
|
||||
|
||||
var timeDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var timeCheck = $('<input type="checkbox" />').attr("id",facet_id + "-time").appendTo(timeDiv).change(function() {
|
||||
self._selectTime = !self._selectTime;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectTime) timeCheck.prop('checked', true);
|
||||
|
||||
var timeLabel = $('<label>').attr("for", facet_id + "-time").appendTo(timeDiv);
|
||||
$('<span>').text($.i18n('core-facets/time')+" ").addClass("facet-range-choice-label").appendTo(timeLabel);
|
||||
$('<div>').text(this._timeCount).addClass("facet-range-choice-count").appendTo(timeLabel);
|
||||
|
||||
// ----------------- non-Time -----------------
|
||||
|
||||
var nonTimeDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var nonTimeCheck = $('<input type="checkbox" />').attr("id",facet_id + "-non-time").appendTo(nonTimeDiv).change(function() {
|
||||
self._selectNonTime = !self._selectNonTime;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectNonTime) nonTimeCheck.prop('checked', true);
|
||||
|
||||
var nonTimeLabel = $('<label>').attr("for", facet_id + "-non-time").appendTo(nonTimeDiv);
|
||||
$('<span>').text($.i18n('core-facets/non-time')+" ").addClass("facet-range-choice-label").appendTo(nonTimeLabel);
|
||||
$('<div>').text(this._nonTimeCount).addClass("facet-range-choice-count").appendTo(nonTimeLabel);
|
||||
|
||||
if (this._baseNonTimeCount === 0) nonTimeCheck.prop("checked", false);
|
||||
|
||||
// ----------------- blank -----------------
|
||||
|
||||
var blankDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var blankCheck = $('<input type="checkbox" />').attr("id",facet_id + "-blank").appendTo(blankDiv).change(function() {
|
||||
self._selectBlank = !self._selectBlank;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectBlank) blankCheck.prop('checked', true);
|
||||
|
||||
var blankLabel = $('<label>').attr("for", facet_id + "-blank").appendTo(blankDiv);
|
||||
$('<span>').text($.i18n('core-facets/blank')+" ").addClass("facet-range-choice-label").appendTo(blankLabel);
|
||||
$('<div>').text(this._blankCount).addClass("facet-range-choice-count").appendTo(blankLabel);
|
||||
|
||||
if (this._baseBlankCount === 0) blankCheck.prop("checked", false);
|
||||
|
||||
// ----------------- error -----------------
|
||||
|
||||
var errorDiv = $('<div class="facet-range-item"></div>').appendTo(choices);
|
||||
var errorCheck = $('<input type="checkbox" />').attr("id",facet_id + "-error").appendTo(errorDiv).change(function() {
|
||||
self._selectError = !self._selectError;
|
||||
self._updateRest();
|
||||
});
|
||||
if (this._selectError) errorCheck.prop('checked', true);
|
||||
|
||||
var errorLabel = $('<label>').attr("for", facet_id + "-error").appendTo(errorDiv);
|
||||
$('<span>').text($.i18n('core-facets/error')+" ").addClass("facet-range-choice-label").appendTo(errorLabel);
|
||||
$('<div>').text(this._errorCount).addClass("facet-range-choice-count").appendTo(errorLabel);
|
||||
|
||||
if (this._baseErrorCount === 0) errorCheck.prop("checked", false);
|
||||
|
||||
// --------------------------
|
||||
|
||||
choices.appendTo(container);
|
||||
};
|
||||
|
||||
TimeRangeFacet.prototype.steps = [
|
||||
1, // msec
|
||||
1000, // sec
|
||||
@ -283,167 +412,3 @@ TimeRangeFacet.prototype.steps = [
|
||||
1000*31556952*100, // century
|
||||
1000*31556952*1000 // millennium
|
||||
];
|
||||
|
||||
TimeRangeFacet.prototype._setRangeIndicators = function() {
|
||||
var fromDate = new Date(this._from);
|
||||
var toDate = new Date(this._to);
|
||||
|
||||
if (this._step > 2629746000) { // > month
|
||||
var format = "yyyy";
|
||||
this._elmts.statusDiv.html(fromDate.toString(format) + " — " + toDate.toString(format));
|
||||
} else if (this.step > 3600000) { // > hour
|
||||
var format = "yyyy-MM-dd";
|
||||
this._elmts.statusDiv.html(fromDate.toString(format) + " — " + toDate.toString(format));
|
||||
} else {
|
||||
var timeOfDayformat = "HH:mm:ss";
|
||||
var dayOfYearFormat = "yyyy-MM-dd";
|
||||
this._elmts.statusDiv.html("<b>" + fromDate.toString(dayOfYearFormat) + "</b> " + fromDate.toString(timeOfDayformat) + " — " + "<b>" + toDate.toString(dayOfYearFormat) + "</b> " + toDate.toString(timeOfDayformat) );
|
||||
}
|
||||
};
|
||||
|
||||
TimeRangeFacet.prototype._addCommas = function(nStr) {
|
||||
nStr += '';
|
||||
x = nStr.split('.');
|
||||
x1 = x[0];
|
||||
x2 = x.length > 1 ? '.' + x[1] : '';
|
||||
var rgx = /(\d+)(\d{3})/;
|
||||
while (rgx.test(x1)) {
|
||||
x1 = x1.replace(rgx, '$1' + ',' + '$2');
|
||||
}
|
||||
return x1 + x2;
|
||||
};
|
||||
|
||||
TimeRangeFacet.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._baseTimeCount = data.baseTimeCount;
|
||||
this._baseNonTimeCount = data.baseNonTimeCount;
|
||||
this._baseBlankCount = data.baseBlankCount;
|
||||
this._baseErrorCount = data.baseErrorCount;
|
||||
|
||||
this._timeCount = data.timeCount;
|
||||
this._nonTimeCount = data.nonTimeCount;
|
||||
this._blankCount = data.blankCount;
|
||||
this._errorCount = data.errorCount;
|
||||
} else {
|
||||
this._error = true;
|
||||
this._errorMessage = "error" in data ? data.error : $.i18n('core-facets/unknown-error')+".";
|
||||
}
|
||||
|
||||
this.render();
|
||||
};
|
||||
|
||||
TimeRangeFacet.prototype.render = function() {
|
||||
if (!this._initializedUI) {
|
||||
this._initializeUI();
|
||||
this._initializedUI = true;
|
||||
}
|
||||
|
||||
if (this._error) {
|
||||
this._elmts.messageDiv.text(this._errorMessage).show();
|
||||
this._elmts.sliderWidgetDiv.hide();
|
||||
this._elmts.histogramDiv.hide();
|
||||
this._elmts.statusDiv.hide();
|
||||
this._elmts.otherChoicesDiv.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
this._elmts.messageDiv.hide();
|
||||
this._elmts.sliderWidgetDiv.show();
|
||||
this._elmts.histogramDiv.show();
|
||||
this._elmts.statusDiv.show();
|
||||
this._elmts.otherChoicesDiv.show();
|
||||
|
||||
this._sliderWidget.update(
|
||||
this._config.min,
|
||||
this._config.max,
|
||||
this._config.step,
|
||||
this._from,
|
||||
this._to
|
||||
);
|
||||
this._histogram.update(
|
||||
this._config.min,
|
||||
this._config.max,
|
||||
this._config.step,
|
||||
[ this._baseBins, this._bins ]
|
||||
);
|
||||
|
||||
this._setRangeIndicators();
|
||||
this._renderOtherChoices();
|
||||
};
|
||||
|
||||
TimeRangeFacet.prototype._remove = function() {
|
||||
ui.browsingEngine.removeFacet(this);
|
||||
|
||||
this._div = null;
|
||||
this._config = null;
|
||||
this._data = null;
|
||||
};
|
||||
|
||||
TimeRangeFacet.prototype._minimize = function() {
|
||||
if(!this._minimizeState) {
|
||||
this._div.addClass("facet-state-minimize");
|
||||
} else {
|
||||
this._div.removeClass("facet-state-minimize");
|
||||
}
|
||||
|
||||
this._minimizeState = !this._minimizeState;
|
||||
};
|
||||
|
||||
TimeRangeFacet.prototype._updateRest = function() {
|
||||
Refine.update({ engineChanged: true });
|
||||
};
|
||||
|
||||
TimeRangeFacet.prototype._editExpression = function() {
|
||||
var self = this;
|
||||
var title = (this._config.columnName) ?
|
||||
($.i18n('core-facets/edit-based-col')+" " + this._config.columnName) :
|
||||
$.i18n('core-facets/edit-facet-exp');
|
||||
|
||||
var column = Refine.columnNameToColumn(this._config.columnName);
|
||||
var o = DataTableView.sampleVisibleRows(column);
|
||||
|
||||
new ExpressionPreviewDialog(
|
||||
title,
|
||||
column ? column.cellIndex : -1,
|
||||
o.rowIndices,
|
||||
o.values,
|
||||
this._config.expression,
|
||||
function(expr) {
|
||||
if (expr != self._config.expression) {
|
||||
self._config.expression = expr;
|
||||
self._elmts.expressionDiv.text(self._config.expression);
|
||||
|
||||
self.reset();
|
||||
self._from = null;
|
||||
self._to = null;
|
||||
self._updateRest();
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user