Scatterplot facet UI regression

[wetneb]

The UI of the scatterplot has got more ugly between 3.4 and the current development version.

To Reproduce

Steps to reproduce the behavior: create any scatterplot facet.

Current Results (master)

Expected Behavior (3.4)

Screenshots

Versions

• Operating System: Linux
• Browser Version: Firefox 68
• JRE or JDK Version: 11

[thadguidry]

@tfmorris Likely from the Jquery update I suspect?

[tfmorris]

I also noted that the rotate 45 degree buttons don't seem to work, perhaps due to incomplete jQuery Migrate support for the deprecated jquery.fn.load() call

migrateWarn | @ | project-bundle.js:11061
-- | -- | --
  | jQuery.fn.<computed> | @ | project-bundle.js:11574
  | load_image | @ | project-bundle.js:48576
  | load_images | @ | project-bundle.js:48565
  | (anonymous) | @ | project-bundle.js:48585
  | fire | @ | project-bundle.js:3234
  | fireWith | @ | project-bundle.js:3364
  | done | @ | project-bundle.js:9842
  | callback | @ | project-bundle.js:10313
  | XMLHttpRequest.send (async) |   |  
  | (anonymous) | @ | VM27946:1
  | send | @ | project-bundle.js:10256
  | ajax | @ | project-bundle.js:9740
  | jQuery.<computed> | @ | project-bundle.js:9892
  | getJSON | @ | project-bundle.js:9873
  | ScatterplotDialog._renderMatrix | @ | project-bundle.js:48473
  | ScatterplotDialog._createDialog | @ | project-bundle.js:48459
  | ScatterplotDialog | @ | project-bundle.js:48413
  | click | @ | project-bundle.js:43950
  | (anonymous) | @ | project-bundle.js:36142
  | dispatch

The style changes are likely due to either jQuery UI class name changes (e.g. ui-checkboxradio) causing overrides to no longer work, or some direct hacking on the jQuery UI style files which got lost in the jQuery UI upgrade.

The two styling problems are:

• the boxes are too big, messing up the cropping for the sprites
• the large selected (yellow)/not selected (orange) icons in the middle of the buttons where the labels need to be

[rachittiwari8562]

Can you please explain me the work of two span elements which are lying inside label in all the input fields like lin log etc.I am also attaching a screenshot here.

[tfmorris]

Thanks for taking a look at this!

The second span contains the text label like "lin" for linear or "log" for logarithmic. The first span would, I'm guessing be the span which normally contains the icon, which we don't use (perhaps why it's get the class ui-icon-blank). If you look at the original problem report, it has a screenshot of how it is supposed to look. You can also run OpenRefine 3.4.1 to compare the HTML/CSS when it is working correctly.

[tfmorris]

Update - that first icon span isn't in 3.4.1, it needs to be gotten rid of. You're definitely on the right track. The other thing that needs to be done is to resize the buttons so that they are back to their original smaller size. Good luck!

[rachittiwari8562]

In the jquery-ui.js which is located at main/webapp/modules/core/externals/jquery-ui
In line no. 6519 there is used an jquery api to convert normal radio buttons to themeable buttons . There is a option named icon which is True which generates the radio button via span and if it false then the radio button disappears.I am attaching photo of the document.

photo of buttons after turning the icon off:

But I am not sure whether its the right way as it may affect other radio labels too which requires a icon in their button.

[tfmorris]

That sounds promising. You obviously don't want to modify the source of jquery-ui, since that's a standard library, but I suspect you should be able to turn off the icon, just for the buttons in these two dialogs, using an appropriately specific CSS selector.

[rachittiwari8562]

The bug is due to the jquery-ui widget function checkboxradio() which was adding icon to the input field.
Fix:
To override this a class "no-icon" is applied to individual input (radio) button on which we use checkbox("option","icon","false") to remove the icons.
Also added some CSS modification in the main/webapp/modules/core/styles/project/facets.less file .

Here are some sample photos:

[rachittiwari8562]

Should i open a pull request??

[tfmorris]

Looks great!

Should i open a pull request??

Yes, please. That will allow the team to review the changes and get them merged.

[rachittiwari8562]

I am unable to resolve the rotate functionality of the facet and dialog .Actually i am having problem to understand the server side code .Is there any documentation available on it?.

[wetneb]

@rachittiwari8562 this is the documentation we have so far: https://docs.openrefine.org/manual/facets#scatterplot-facet
That being said I would not be surprised if there were bugs in this facet (even server side) independently of this regression, so if you notice something that does not look right in 3.4.1 about this, I would assume you are right and it is a genuine bug (or something worth improving), so feel free to open an issue about it.

[tfmorris]

I've created #3371 for the remaining rotation button bug.

[rachittiwari8562]

Sorry to bother you but earlier I had created the same issue #3344 .Please look at that issue and also provide me directions regarding the same.