better scatterfacet selection dialog

git-svn-id: http://google-refine.googlecode.com/svn/trunk@616 7d457c2a-affb-35e4-300a-418c747d4874

src/main/webapp/scripts/dialogs/scatterplot-dialog.js

@@ -22,24 +22,32 @@ ScatterplotDialog.prototype._createDialog = function() {
     ).appendTo(frame);
         
     var html = $(
-        '<div class="grid-layout layout-normal"><table width="100%">' +
+        '<div class="grid-layout layout-normal"><table width="100%" class="scatterplot-selectors">' +
             '<tr>' +
-                '<td>' +
-                    '<span class="clustering-dialog-controls">Plot type: <select bind="plotSelector">' +
-                        '<option selected="true" value="lin">linear</option>' +
-                        '<option value="log">log-log</option>' +
-                    '</select></span>' +
-                    '<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 nowrap>' +
+                    '<div class="buttonset scatterplot-dim-selector" bind="plotSelector">' +
+                        '<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>' +
+                        '<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>' +
+                    '</div>' + 
                 '</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>' +
-                '<td>' +
+                '<td colspan="4">' +
                     '<div bind="tableContainer" class="scatterplot-dialog-table-container"></div>' +
                 '</td>' +
             '</tr>' +
@@ -48,39 +56,33 @@ ScatterplotDialog.prototype._createDialog = function() {
     
     
     this._elmts = DOM.bind(html);
-    
-    this._elmts.plotSelector.change(function() {
-        self._plot_method = $(this).find("option:selected").attr("value");
+        
+    this._elmts.plotSelector.buttonset().change(function() {
+        self._plot_method = $(this).find("input:checked").val();
         self._renderMatrix();
     });
 
-    this._elmts.rotationSelector.change(function() {
-        self._rotation = $(this).find("option:selected").attr("value");
+    this._elmts.rotationSelector.buttonset().change(function() {
+        self._rotation = $(this).find("input:checked").val();
         self._renderMatrix();
     });
     
-    this._elmts.plotSize.change(function() {
-        try {
-            self._plot_size = parseInt($(this).val(),10);
-            self._renderMatrix();
-        } catch (e) {
-            alert("Must be a number");
-        }
-    });
-
-    this._elmts.dotSize.change(function() {
-        try {
-            self._dot_size = parseFloat($(this).val(),10);
-            self._renderMatrix();
-        } catch (e) {
-            alert("Must be a number");
+    this._elmts.dotSelector.buttonset().change(function() {
+        var dot_size = $(this).find("input:checked").val();
+        if (dot_size == "small") {
+            self._dot_size = 0.4;
+        } else if (dot_size == "big") {
+            self._dot_size = 1.4;
+        } else {
+            self._dot_size = 0.8;
         }
+        self._renderMatrix();
     });
     
     var left_footer = footer.find(".left");    
+    $('<button></button>').text("cancel").click(function() { self._dismiss(); }).appendTo(left_footer);
     
     var right_footer = footer.find(".right");    
-    $('<button></button>').text("Done").click(function() { self._dismiss(); }).appendTo(right_footer);
     
     this._level = DialogSystem.showDialog(frame);
     this._renderMatrix();
@@ -113,8 +115,6 @@ ScatterplotDialog.prototype._renderMatrix = function() {
             if (typeof self._plot_size == 'undefined') {
                 self._plot_size = Math.max(Math.floor(500 / columns.length / 5) * 5,20);
                 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>';
@@ -183,7 +183,7 @@ ScatterplotDialog.prototype._renderMatrix = function() {
                     'r': self._rotation
                 };
                 ui.browsingEngine.addFacet("scatterplot", options);
-                //self._dismiss();
+                self._dismiss();
             });
 
             var load_images = function(data) {

src/main/webapp/scripts/facets/scatterplot-facet.js

@@ -79,22 +79,22 @@ ScatterplotFacet.prototype._initializeUI = function() {
                     '</div>' +
                 '</td>' +
                 '<td class="facet-scatterplot-selectors-container" width="100%">' +
-                    '<div class="facet-scatterplot-selectors" bind="selectors">' +
-                        '<div class="buttonset facet-scatterplot-dim-selector">' +
+                    '<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="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>' +
                         '</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-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>' +
                         '</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-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>' +
                         '</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>' +
                 '</td>' + 
             '</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-scatterplot-dim-selector").change(function() {
+    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;
@@ -163,14 +163,14 @@ ScatterplotFacet.prototype._initializeUI = function() {
         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.reset();
         self._updateRest();
         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();
         if (dot_size == "small") {
             self._config.dot = 0.4;

src/main/webapp/styles/dialogs/scatterplot-dialog.css

@@ -23,7 +23,7 @@ table.scatterplot-matrix-table td.current_column {
 }
 
 table.scatterplot-matrix-table div.current_column {
-    background-color: #ffeeee;
+    background-color: #fbede3;
 }
 
 table.scatterplot-matrix-table .column_header {

src/main/webapp/styles/project/browsing.css

@@ -221,20 +221,29 @@ img.facet-choice-link {
     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%;
     padding: 0.0em 0.4em 0.1em 0.3em;
 }
 
-.facet-scatterplot-selectors {
-    text-align: center;
+.scatterplot-selectors .buttonset {
+	margin: 0px;
 }
 
-.facet-scatterplot-selectors .buttonset {
-    margin: 0.8em 0em;
-}
-
-.facet-scatterplot-selectors .buttonset .ui-corner-top { 
+.scatterplot-selectors .buttonset .ui-corner-top { 
     -moz-border-radius-topleft: 0.5em; 
     -webkit-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; 
 }
 
-.facet-scatterplot-selectors .buttonset .ui-corner-bottom { 
+.scatterplot-selectors .buttonset .ui-corner-bottom { 
     -moz-border-radius-bottomleft: 0.5em; 
     -webkit-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; 
 }
 
-.facet-scatterplot-selectors .buttonset .ui-corner-right { 
+.scatterplot-selectors .buttonset .ui-corner-right { 
     -moz-border-radius-topright: 0.5em; 
     -webkit-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; 
 }
 
-.facet-scatterplot-selectors .buttonset .ui-corner-left { 
+.scatterplot-selectors .buttonset .ui-corner-left { 
     -moz-border-radius-topleft: 0.5em; 
     -webkit-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; 
 }
 
-.facet-scatterplot-selectors .facet-scatterplot-dim-selector label {
+.scatterplot-selectors .scatterplot-dim-selector label {
     width: 32px;
     height: 16px;
 }
-    
-.facet-scatterplot-selectors .facet-scatterplot-rot-selector label {
+
+.scatterplot-selectors .scatterplot-rot-selector label {
     width: 22px;
     height: 18px;
     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;
 }
 
-.facet-scatterplot-selectors .facet-scatterplot-rot-selector label.rot-none-label {
+.scatterplot-selectors .scatterplot-rot-selector label.rot-none-label {
     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;
 }
 
-.facet-scatterplot-selectors .facet-scatterplot-dot-selector label {
+.scatterplot-selectors .scatterplot-dot-selector label {
     width: 22px;
     height: 18px;
     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;
 }
 
-.facet-scatterplot-selectors .facet-scatterplot-dot-selector label.dot-regular-label {
+.scatterplot-selectors .scatterplot-dot-selector label.dot-regular-label {
     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;
 }