From 8740d1bcbac5b3316f69963a0994555a63b85680 Mon Sep 17 00:00:00 2001
From: rachittiwari8562 <54476275+rachittiwari8562@users.noreply.github.com>
Date: Sun, 29 Nov 2020 06:46:23 +0530
Subject: [PATCH] Fix UI of scatterplot-facet and dialog - fixes #3228 (#3338)

---
 .../scripts/dialogs/scatterplot-dialog.html   | 18 +++++++--------
 .../scripts/dialogs/scatterplot-dialog.js     |  5 +++++
 .../core/scripts/facets/scatterplot-facet.js  | 22 ++++++++++++-------
 .../modules/core/styles/project/facets.less   |  5 ++++-
 4 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.html b/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.html
index 400a53e81..c76a23c0f 100644
--- a/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.html
+++ b/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.html
@@ -12,22 +12,22 @@
           <table class="scatterplot-selectors"><tr>
             <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" bind="or_dialog_linplot">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" bind="or_dialog_logplot">log</label>
+                <input class="no-icon" 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" bind="or_dialog_linplot">lin</label>
+                <input class="no-icon" type="radio" id="clustering-dialog-dim-log" name="clustering-dialog-dim" value="log"/><label class="dim-log-label" for="clustering-dialog-dim-log" bind="or_dialog_logplot">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" bind="or_dialog_counter">&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" bind="or_dialog_norot">&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" bind="or_dialog_clock">&nbsp;</label>
+                <input class="no-icon" type="radio" id="clustering-dialog-rot-ccw"  name="clustering-dialog-rot" value="ccw"/><label class="rot-ccw-label" for="clustering-dialog-rot-ccw" bind="or_dialog_counter">&nbsp;</label>
+                <input class="no-icon" 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" bind="or_dialog_norot">&nbsp;</label>
+                <input class="no-icon" type="radio" id="clustering-dialog-rot-cw"   name="clustering-dialog-rot" value="cw"/><label class="rot-cw-label" for="clustering-dialog-rot-cw" bind="or_dialog_clock">&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" bind="or_dialog_smallDot">&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" bind="or_dialog_regularDot">&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"  bind="or_dialog_bigDot">&nbsp;</label>
+                <input class="no-icon" type="radio" id="clustering-dialog-dot-small"   name="clustering-dialog-dot" value="small"/><label class="dot-small-label" for="clustering-dialog-dot-small" bind="or_dialog_smallDot">&nbsp;</label>
+                <input class="no-icon" 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" bind="or_dialog_regularDot">&nbsp;</label>
+                <input class="no-icon" type="radio" id="clustering-dialog-dot-big"     name="clustering-dialog-dot" value="big"/><label class="dot-big-label" for="clustering-dialog-dot-big"  bind="or_dialog_bigDot">&nbsp;</label>
               </div>
             </td>
           </tr></table>
@@ -38,4 +38,4 @@
       </td>
     </tr></table>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.js b/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.js
index fa0b472b5..256e62e50 100644
--- a/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.js
+++ b/main/webapp/modules/core/scripts/dialogs/scatterplot-dialog.js
@@ -81,6 +81,11 @@ ScatterplotDialog.prototype._createDialog = function() {
     
     this._level = DialogSystem.showDialog(dialog);
     this._renderMatrix();
+    //the function buttonset() groups the input buttons into one but in doing so it creates icon on the input button
+    //the icon is created using checkboxradio() 
+    //to get rid of the icon a class "no-icon" is directly applied to input button and checkboxradio() is called again with option :- icon=false  
+    $(".no-icon").checkboxradio("option", "icon", false);
+    //this function only works after initialisation
 };
 
 ScatterplotDialog.prototype._renderMatrix = function() {
diff --git a/main/webapp/modules/core/scripts/facets/scatterplot-facet.js b/main/webapp/modules/core/scripts/facets/scatterplot-facet.js
index b8b665ac6..877d8ad0e 100644
--- a/main/webapp/modules/core/scripts/facets/scatterplot-facet.js
+++ b/main/webapp/modules/core/scripts/facets/scatterplot-facet.js
@@ -114,18 +114,18 @@ class ScatterplotFacet extends Facet {
           '<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>' +
+                '<input class="no-icon" 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 class="no-icon" 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')+'">&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="'+$.i18n('core-facets/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="'+$.i18n('core-facets/rotated-clock')+'">&nbsp;</label>' +
+                '<input class="no-icon" 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')+'">&nbsp;</label>' +
+                '<input class="no-icon" 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')+'">&nbsp;</label>' +
+                '<input class="no-icon" 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')+'">&nbsp;</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')+'">&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="'+$.i18n('core-facets/regular-dot')+'">&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="'+$.i18n('core-facets/big-dot')+'">&nbsp;</label>' +
+                '<input class="no-icon" 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')+'">&nbsp;</label>' +
+                '<input class="no-icon" 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')+'">&nbsp;</label>' +
+                '<input class="no-icon" 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')+'">&nbsp;</label>' +
               '</div>' +
               '<div class="scatterplot-export-plot"><a bind="exportPlotLink" class="action" target="_blank">'+$.i18n('core-facets/export-plot')+'</a></div>' +
             '</div>' +
@@ -218,6 +218,12 @@ class ScatterplotFacet extends Facet {
     });
 
     this._elmts.selectors.find(".buttonset").buttonset();
+    
+    //the function buttonset() groups the input buttons into one but in doing so it creates icon on the input button
+    //the icon is created using checkboxradio() 
+    //to get rid of the icon a class "no-icon" is directly applied to input button and checkboxradio() is called again with option :- icon=false  
+    $(".no-icon").checkboxradio("option", "icon", false);
+    //this function only works after initialisation
   };
 
   _fillSelectionOptions(ops) {
diff --git a/main/webapp/modules/core/styles/project/facets.less b/main/webapp/modules/core/styles/project/facets.less
index 6f3d6c35f..2759867d8 100644
--- a/main/webapp/modules/core/styles/project/facets.less
+++ b/main/webapp/modules/core/styles/project/facets.less
@@ -282,7 +282,7 @@ img.facet-choice-link {
   }
 
 .facet-scatterplot-selectors-container .scatterplot-selectors .buttonset {
-  margin: 0.8em 0em;
+  margin: 0.4em 0em;
   }
 
 .scatterplot-selectors .ui-button-text-only .ui-button-text {
@@ -333,11 +333,13 @@ img.facet-choice-link {
 .scatterplot-selectors .scatterplot-dim-selector label {
   width: 32px;
   height: 16px;
+  padding: 0px;
   }
 
 .scatterplot-selectors .scatterplot-rot-selector label {
   width: 22px;
   height: 18px;
+  padding: 0px;
   background-image: url("../../images/scatterplot-icons.png");
   }
     
@@ -356,6 +358,7 @@ img.facet-choice-link {
 .scatterplot-selectors .scatterplot-dot-selector label {
   width: 22px;
   height: 18px;
+  padding: 0px;
   background-image: url("../../images/scatterplot-icons.png");
   }