better scatterfacet selection dialog
git-svn-id: http://google-refine.googlecode.com/svn/trunk@616 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
parent
33895a7a6d
commit
5bb944161c
@ -22,24 +22,32 @@ ScatterplotDialog.prototype._createDialog = function() {
|
|||||||
).appendTo(frame);
|
).appendTo(frame);
|
||||||
|
|
||||||
var html = $(
|
var html = $(
|
||||||
'<div class="grid-layout layout-normal"><table width="100%">' +
|
'<div class="grid-layout layout-normal"><table width="100%" class="scatterplot-selectors">' +
|
||||||
'<tr>' +
|
'<tr>' +
|
||||||
'<td>' +
|
'<td nowrap>' +
|
||||||
'<span class="clustering-dialog-controls">Plot type: <select bind="plotSelector">' +
|
'<div class="buttonset scatterplot-dim-selector" bind="plotSelector">' +
|
||||||
'<option selected="true" value="lin">linear</option>' +
|
'<input type="radio" id="clustering-dialog-dim-lin" name="clustering-dialog-dim" value="lin" checked="checked"/><label class="dim-lin-label" for="clustering-dialog-dim-lin" title="Linear Plot">lin</label>' +
|
||||||
'<option value="log">log-log</option>' +
|
'<input type="radio" id="clustering-dialog-dim-log" name="clustering-dialog-dim" value="log"/><label class="dim-log-label" for="clustering-dialog-dim-log" title="Logarithmic Plot">log</label>' +
|
||||||
'</select></span>' +
|
'</div>' +
|
||||||
'<span class="clustering-dialog-controls">Plot Size: <input bind="plotSize" type="test" size="2" value=""> px</span>' +
|
|
||||||
'<span class="clustering-dialog-controls">Dot Size: <input bind="dotSize" type="test" size="2" value=""> px</span>' +
|
|
||||||
'<span class="clustering-dialog-controls">Rotation: <select bind="rotationSelector">' +
|
|
||||||
'<option selected="true" value="none">none</option>' +
|
|
||||||
'<option value="cw">45° clockwise</option>' +
|
|
||||||
'<option value="ccw">45° counter-clockwise</option>' +
|
|
||||||
'</select></span>' +
|
|
||||||
'</td>' +
|
'</td>' +
|
||||||
|
'<td nowrap>' +
|
||||||
|
'<div class="buttonset scatterplot-rot-selector" bind="rotationSelector">' +
|
||||||
|
'<input type="radio" id="clustering-dialog-rot-ccw" name="clustering-dialog-rot" value="ccw"/><label class="rot-ccw-label" for="clustering-dialog-rot-ccw" title="Rotated 45° Counter-Clockwise"> </label>' +
|
||||||
|
'<input type="radio" id="clustering-dialog-rot-none" name="clustering-dialog-rot" value="none" checked="checked"/><label class="rot-none-label" for="clustering-dialog-rot-none" title="No rotation"> </label>' +
|
||||||
|
'<input type="radio" id="clustering-dialog-rot-cw" name="clustering-dialog-rot" value="cw"/><label class="rot-cw-label" for="clustering-dialog-rot-cw" title="Rotated 45° Clockwise"> </label>' +
|
||||||
|
'</div>' +
|
||||||
|
'</td>' +
|
||||||
|
'<td nowrap>' +
|
||||||
|
'<div class="buttonset scatterplot-dot-selector" bind="dotSelector">' +
|
||||||
|
'<input type="radio" id="clustering-dialog-dot-small" name="clustering-dialog-dot" value="small"/><label class="dot-small-label" for="clustering-dialog-dot-small" title="Small Dot Size"> </label>' +
|
||||||
|
'<input type="radio" id="clustering-dialog-dot-regular" name="clustering-dialog-dot" value="regular" checked="checked"/><label class="dot-regular-label" for="clustering-dialog-dot-regular" title="Regular Dot Size"> </label>' +
|
||||||
|
'<input type="radio" id="clustering-dialog-dot-big" name="clustering-dialog-dot" value="big"/><label class="dot-big-label" for="clustering-dialog-dot-big" title="Big Dot Size"> </label>' +
|
||||||
|
'</div>' +
|
||||||
|
'</td>' +
|
||||||
|
'<td width="100%"> </td>' +
|
||||||
'</tr>' +
|
'</tr>' +
|
||||||
'<tr>' +
|
'<tr>' +
|
||||||
'<td>' +
|
'<td colspan="4">' +
|
||||||
'<div bind="tableContainer" class="scatterplot-dialog-table-container"></div>' +
|
'<div bind="tableContainer" class="scatterplot-dialog-table-container"></div>' +
|
||||||
'</td>' +
|
'</td>' +
|
||||||
'</tr>' +
|
'</tr>' +
|
||||||
@ -49,38 +57,32 @@ ScatterplotDialog.prototype._createDialog = function() {
|
|||||||
|
|
||||||
this._elmts = DOM.bind(html);
|
this._elmts = DOM.bind(html);
|
||||||
|
|
||||||
this._elmts.plotSelector.change(function() {
|
this._elmts.plotSelector.buttonset().change(function() {
|
||||||
self._plot_method = $(this).find("option:selected").attr("value");
|
self._plot_method = $(this).find("input:checked").val();
|
||||||
self._renderMatrix();
|
self._renderMatrix();
|
||||||
});
|
});
|
||||||
|
|
||||||
this._elmts.rotationSelector.change(function() {
|
this._elmts.rotationSelector.buttonset().change(function() {
|
||||||
self._rotation = $(this).find("option:selected").attr("value");
|
self._rotation = $(this).find("input:checked").val();
|
||||||
self._renderMatrix();
|
self._renderMatrix();
|
||||||
});
|
});
|
||||||
|
|
||||||
this._elmts.plotSize.change(function() {
|
this._elmts.dotSelector.buttonset().change(function() {
|
||||||
try {
|
var dot_size = $(this).find("input:checked").val();
|
||||||
self._plot_size = parseInt($(this).val(),10);
|
if (dot_size == "small") {
|
||||||
self._renderMatrix();
|
self._dot_size = 0.4;
|
||||||
} catch (e) {
|
} else if (dot_size == "big") {
|
||||||
alert("Must be a number");
|
self._dot_size = 1.4;
|
||||||
}
|
} else {
|
||||||
});
|
self._dot_size = 0.8;
|
||||||
|
|
||||||
this._elmts.dotSize.change(function() {
|
|
||||||
try {
|
|
||||||
self._dot_size = parseFloat($(this).val(),10);
|
|
||||||
self._renderMatrix();
|
|
||||||
} catch (e) {
|
|
||||||
alert("Must be a number");
|
|
||||||
}
|
}
|
||||||
|
self._renderMatrix();
|
||||||
});
|
});
|
||||||
|
|
||||||
var left_footer = footer.find(".left");
|
var left_footer = footer.find(".left");
|
||||||
|
$('<button></button>').text("cancel").click(function() { self._dismiss(); }).appendTo(left_footer);
|
||||||
|
|
||||||
var right_footer = footer.find(".right");
|
var right_footer = footer.find(".right");
|
||||||
$('<button></button>').text("Done").click(function() { self._dismiss(); }).appendTo(right_footer);
|
|
||||||
|
|
||||||
this._level = DialogSystem.showDialog(frame);
|
this._level = DialogSystem.showDialog(frame);
|
||||||
this._renderMatrix();
|
this._renderMatrix();
|
||||||
@ -113,8 +115,6 @@ ScatterplotDialog.prototype._renderMatrix = function() {
|
|||||||
if (typeof self._plot_size == 'undefined') {
|
if (typeof self._plot_size == 'undefined') {
|
||||||
self._plot_size = Math.max(Math.floor(500 / columns.length / 5) * 5,20);
|
self._plot_size = Math.max(Math.floor(500 / columns.length / 5) * 5,20);
|
||||||
self._dot_size = 0.8;
|
self._dot_size = 0.8;
|
||||||
self._elmts.plotSize.val(self._plot_size);
|
|
||||||
self._elmts.dotSize.val(self._dot_size);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var table = '<table class="scatterplot-matrix-table"><tbody>';
|
var table = '<table class="scatterplot-matrix-table"><tbody>';
|
||||||
@ -183,7 +183,7 @@ ScatterplotDialog.prototype._renderMatrix = function() {
|
|||||||
'r': self._rotation
|
'r': self._rotation
|
||||||
};
|
};
|
||||||
ui.browsingEngine.addFacet("scatterplot", options);
|
ui.browsingEngine.addFacet("scatterplot", options);
|
||||||
//self._dismiss();
|
self._dismiss();
|
||||||
});
|
});
|
||||||
|
|
||||||
var load_images = function(data) {
|
var load_images = function(data) {
|
||||||
|
@ -79,22 +79,22 @@ ScatterplotFacet.prototype._initializeUI = function() {
|
|||||||
'</div>' +
|
'</div>' +
|
||||||
'</td>' +
|
'</td>' +
|
||||||
'<td class="facet-scatterplot-selectors-container" width="100%">' +
|
'<td class="facet-scatterplot-selectors-container" width="100%">' +
|
||||||
'<div class="facet-scatterplot-selectors" bind="selectors">' +
|
'<div class="scatterplot-selectors" bind="selectors">' +
|
||||||
'<div class="buttonset facet-scatterplot-dim-selector">' +
|
'<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="Linear Plot">lin</label>' +
|
'<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="Linear Plot">lin</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="Logarithmic Plot">log</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="Logarithmic Plot">log</label>' +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'<div class="buttonset facet-scatterplot-rot-selector">' +
|
'<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="Rotated 45° Counter-Clockwise"> </label>' +
|
'<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="Rotated 45° Counter-Clockwise"> </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="No rotation"> </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="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="Rotated 45° Clockwise"> </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="Rotated 45° Clockwise"> </label>' +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'<div class="buttonset facet-scatterplot-dot-selector">' +
|
'<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="Small Dot Size"> </label>' +
|
'<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="Small Dot Size"> </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="Regular Dot Size"> </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="Regular Dot Size"> </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="Big Dot Size"> </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="Big Dot Size"> </label>' +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'<div><a bind="exportPlotLink" class="action" target="_blank">export plot</a></div>' +
|
'<div class="scatterplot-export-plot"><a bind="exportPlotLink" class="action" target="_blank">export plot</a></div>' +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'</td>' +
|
'</td>' +
|
||||||
'</tr></table>' +
|
'</tr></table>' +
|
||||||
@ -154,7 +154,7 @@ ScatterplotFacet.prototype._initializeUI = function() {
|
|||||||
this._elmts.selectors.find("#" + facet_id + "-dot-regular").attr('checked','checked');
|
this._elmts.selectors.find("#" + facet_id + "-dot-regular").attr('checked','checked');
|
||||||
}
|
}
|
||||||
|
|
||||||
this._elmts.selectors.find(".facet-scatterplot-dim-selector").change(function() {
|
this._elmts.selectors.find(".scatterplot-dim-selector").change(function() {
|
||||||
var dim = $(this).find("input:checked").val();
|
var dim = $(this).find("input:checked").val();
|
||||||
self._config.dim_x = dim;
|
self._config.dim_x = dim;
|
||||||
self._config.dim_y = dim;
|
self._config.dim_y = dim;
|
||||||
@ -163,14 +163,14 @@ ScatterplotFacet.prototype._initializeUI = function() {
|
|||||||
self.changePlot();
|
self.changePlot();
|
||||||
});
|
});
|
||||||
|
|
||||||
this._elmts.selectors.find(".facet-scatterplot-rot-selector").change(function() {
|
this._elmts.selectors.find(".scatterplot-rot-selector").change(function() {
|
||||||
self._config.r = $(this).find("input:checked").val();
|
self._config.r = $(this).find("input:checked").val();
|
||||||
self.reset();
|
self.reset();
|
||||||
self._updateRest();
|
self._updateRest();
|
||||||
self.changePlot();
|
self.changePlot();
|
||||||
});
|
});
|
||||||
|
|
||||||
this._elmts.selectors.find(".facet-scatterplot-dot-selector").change(function() {
|
this._elmts.selectors.find(".scatterplot-dot-selector").change(function() {
|
||||||
var dot_size = $(this).find("input:checked").val();
|
var dot_size = $(this).find("input:checked").val();
|
||||||
if (dot_size == "small") {
|
if (dot_size == "small") {
|
||||||
self._config.dot = 0.4;
|
self._config.dot = 0.4;
|
||||||
|
@ -23,7 +23,7 @@ table.scatterplot-matrix-table td.current_column {
|
|||||||
}
|
}
|
||||||
|
|
||||||
table.scatterplot-matrix-table div.current_column {
|
table.scatterplot-matrix-table div.current_column {
|
||||||
background-color: #ffeeee;
|
background-color: #fbede3;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.scatterplot-matrix-table .column_header {
|
table.scatterplot-matrix-table .column_header {
|
||||||
|
@ -221,20 +221,29 @@ img.facet-choice-link {
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-body .ui-button-text-only .ui-button-text {
|
.facet-scatterplot-selectors-container .scatterplot-selectors {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.facet-scatterplot-selectors-container .scatterplot-export-plot {
|
||||||
|
font-size: 95%;
|
||||||
|
margin-top: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.facet-scatterplot-selectors-container .scatterplot-selectors .buttonset {
|
||||||
|
margin: 0.8em 0em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scatterplot-selectors .ui-button-text-only .ui-button-text {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
padding: 0.0em 0.4em 0.1em 0.3em;
|
padding: 0.0em 0.4em 0.1em 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-selectors {
|
.scatterplot-selectors .buttonset {
|
||||||
text-align: center;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-selectors .buttonset {
|
.scatterplot-selectors .buttonset .ui-corner-top {
|
||||||
margin: 0.8em 0em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.facet-scatterplot-selectors .buttonset .ui-corner-top {
|
|
||||||
-moz-border-radius-topleft: 0.5em;
|
-moz-border-radius-topleft: 0.5em;
|
||||||
-webkit-border-top-left-radius: 0.5em;
|
-webkit-border-top-left-radius: 0.5em;
|
||||||
border-top-left-radius: 0.5em;
|
border-top-left-radius: 0.5em;
|
||||||
@ -243,7 +252,7 @@ img.facet-choice-link {
|
|||||||
border-top-right-radius: 0.5em;
|
border-top-right-radius: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-selectors .buttonset .ui-corner-bottom {
|
.scatterplot-selectors .buttonset .ui-corner-bottom {
|
||||||
-moz-border-radius-bottomleft: 0.5em;
|
-moz-border-radius-bottomleft: 0.5em;
|
||||||
-webkit-border-bottom-left-radius: 0.5em;
|
-webkit-border-bottom-left-radius: 0.5em;
|
||||||
border-bottom-left-radius: 0.5em;
|
border-bottom-left-radius: 0.5em;
|
||||||
@ -252,7 +261,7 @@ img.facet-choice-link {
|
|||||||
border-bottom-right-radius: 0.5em;
|
border-bottom-right-radius: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-selectors .buttonset .ui-corner-right {
|
.scatterplot-selectors .buttonset .ui-corner-right {
|
||||||
-moz-border-radius-topright: 0.5em;
|
-moz-border-radius-topright: 0.5em;
|
||||||
-webkit-border-top-right-radius: 0.5em;
|
-webkit-border-top-right-radius: 0.5em;
|
||||||
border-top-right-radius: 0.5em;
|
border-top-right-radius: 0.5em;
|
||||||
@ -261,7 +270,7 @@ img.facet-choice-link {
|
|||||||
border-bottom-right-radius: 0.5em;
|
border-bottom-right-radius: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-selectors .buttonset .ui-corner-left {
|
.scatterplot-selectors .buttonset .ui-corner-left {
|
||||||
-moz-border-radius-topleft: 0.5em;
|
-moz-border-radius-topleft: 0.5em;
|
||||||
-webkit-border-top-left-radius: 0.5em;
|
-webkit-border-top-left-radius: 0.5em;
|
||||||
border-top-left-radius: 0.5em;
|
border-top-left-radius: 0.5em;
|
||||||
@ -270,43 +279,43 @@ img.facet-choice-link {
|
|||||||
border-bottom-left-radius: 0.5em;
|
border-bottom-left-radius: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-selectors .facet-scatterplot-dim-selector label {
|
.scatterplot-selectors .scatterplot-dim-selector label {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-selectors .facet-scatterplot-rot-selector label {
|
.scatterplot-selectors .scatterplot-rot-selector label {
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
background-image: url("../../images/scatterplot-icons.png");
|
background-image: url("../../images/scatterplot-icons.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-selectors .facet-scatterplot-rot-selector label.rot-ccw-label {
|
.scatterplot-selectors .scatterplot-rot-selector label.rot-ccw-label {
|
||||||
background-position: -5px -5px;
|
background-position: -5px -5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-selectors .facet-scatterplot-rot-selector label.rot-none-label {
|
.scatterplot-selectors .scatterplot-rot-selector label.rot-none-label {
|
||||||
background-position: -28px -4px;
|
background-position: -28px -4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-selectors .facet-scatterplot-rot-selector label.rot-cw-label {
|
.scatterplot-selectors .scatterplot-rot-selector label.rot-cw-label {
|
||||||
background-position: -48px -3px;
|
background-position: -48px -3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-selectors .facet-scatterplot-dot-selector label {
|
.scatterplot-selectors .scatterplot-dot-selector label {
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
background-image: url("../../images/scatterplot-icons.png");
|
background-image: url("../../images/scatterplot-icons.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-selectors .facet-scatterplot-dot-selector label.dot-small-label {
|
.scatterplot-selectors .scatterplot-dot-selector label.dot-small-label {
|
||||||
background-position: -5px -25px;
|
background-position: -5px -25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-selectors .facet-scatterplot-dot-selector label.dot-regular-label {
|
.scatterplot-selectors .scatterplot-dot-selector label.dot-regular-label {
|
||||||
background-position: -27px -25px;
|
background-position: -27px -25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.facet-scatterplot-selectors .facet-scatterplot-dot-selector label.dot-big-label {
|
.scatterplot-selectors .scatterplot-dot-selector label.dot-big-label {
|
||||||
background-position: -48px -25px;
|
background-position: -48px -25px;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user