s434730/RandomSec
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

better scatterfacet selection dialog

Browse Source 
git-svn-id: http://google-refine.googlecode.com/svn/trunk@616 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
Stefano Mazzocchi 2010-05-06 23:20:51 +00:00
parent 33895a7a6d
commit 5bb944161c
4 changed files with 77 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/main/webapp/scripts/dialogs/scatterplot-dialog.js
View File

@ -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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</label>' +
'</div>' +
'</td>' +
'<td width="100%">&nbsp;</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(); self._renderMatrix();
} catch (e) {
alert("Must be a number");
}
}); });
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) {

16
src/main/webapp/scripts/facets/scatterplot-facet.js
View File

@ -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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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;

2
src/main/webapp/styles/dialogs/scatterplot-dialog.css
View File

@ -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 {

49
src/main/webapp/styles/project/browsing.css
View File

@ -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;
} }