Upgraded omero-web dependencies #433

kyleBalisWest · 2023-01-05T14:06:36Z

Upgraded omero-web jquery dependencies. See upgrade spreadsheet for a detailed list of changes.

Library	Current Version	Latest Version	Link	Notes	Updated
jquery-ui	1.12.1	1.13.2	https://jqueryui.com/download/	Removed background and border from .ui-state-default Removed background and color from .ui-widget-content Removed border from .ui-state-active	Yes
jquery	3.5.1	3.6.2	https://jquery.com/download/	No changes needed because jQuery.htmlPrefilter isn't used	Yes
d3	3.5.17	7.7.0	https://d3js.org/	No longer d3.scale.linear, now is d3.scaleLinear No longer d3.svg.area, now is d3.area No longer d3.svg.line, now is d3.line	Yes
farbtastic	1.2	1.2	https://acko.net/blog/farbtastic-jquery-color-picker-plug-in/		Yes
hammer	2.0.2	2.0.8	https://hammerjs.github.io/		Yes
jquery.chosen	1.8.7	1.8.7	https://harvesthq.github.io/chosen/		Yes
jquery.flot	0.8.3	0.8.3	https://www.flotcharts.org/	Weirdness with npm version and github release version Sticking to github release for now	Yes
jquery.jstree	3.3.10	3.3.12	https://www.jstree.com/		Yes
jquery.tablesorter	2.0.3	2.31.3	https://mottie.github.io/tablesorter/docs/		No
JQuerySpinBtn	1.3a	?			No
panojs	2.0.0	3.0.0	https://dimin.net/software/panojs/	Staying at 2.0.0 to allow for irregular tile sizes	No
raphael	2.1.0	2.3.0	https://dmitrybaranovskiy.github.io/raphael/		Yes
underscore	1.13.1	1.13.6	https://underscorejs.org/		Yes
aop	1.3	?			No
jquery.blockUI	2.66.0	2.7	http://malsup.com/jquery/block/		No
jquery.form	4.3.0	4.3.0	https://github.com/jquery-form/form		No
jquery.hotkeys	0.8	?			No
jquery.mousewheel	3.0.6	3.1.12			Yes
jquery.quicksearch	1.0	?			No
jquery.selectboxes	2.2.6	?	https://github.com/SamWM/jQuery-Plugins/tree/master/selectboxes		No
jquery.ui.touch-punch	0.2.3	?	https://github.com/furf/jquery-ui-touch-punch		No

omeroweb/webgateway/static/webgateway/js/ome.viewportImage.js

sbesson · 2023-01-05T14:24:54Z

omeroweb/settings.py

@@ -1570,7 +1570,7 @@ def report_settings(module):
                "3rdparty/JQuerySpinBtn-1.3a/JQuerySpinBtn.css",
                "3rdparty/jquery-ui-1.10.4/themes/base/jquery-ui.all.css",


Interesting these were never updated for the previous jquery-ui upgrade but that things kept working. Is it still worth keeping in sync with the current proposed version of the library?

Yeah that is interesting. I tried fixing it to see if jquery-ui is loaded to the browser differently since it might be compressed with pipeline but I didn't see a difference.

omeroweb/webgateway/static/3rdparty/jquery-ui-1.13.2/css/jquery-ui.css

sbesson · 2023-01-05T15:27:12Z

omeroweb/settings.py

@@ -1585,20 +1585,20 @@ def report_settings(module):
                "3rdparty/jquery-ui-1.10.4/js/jquery-ui.1.10.4.js",


Same comment as above

will-moore · 2023-01-11T16:14:37Z

Mapr uses the jquery-UI auto-complete, which looks a bit different:

Before this PR:

With this PR:

See #180 (comment) and the commit just before that comment

chris-allan · 2023-01-18T10:54:11Z

Not important right now while we're iterating but I would suggest that before this is merged we get all detail out of the Google Spreadsheet as Markdown and into the description of this PR. We will need the content in that form for a migration guide and/or changelog anyway.

will-moore · 2023-01-18T15:57:04Z

omeroweb/webgateway/static/3rdparty/panojs-3.0.0/PanoJS.js

-  this.realXTileSize = this.xTileSize;
-  this.realYTileSize = this.yTileSize;
-
+  this.tileSize = (options.tileSize ? options.tileSize : PanoJS.TILE_SIZE);


It looks like PanoJs(viewer, options) no-longer supports options.xTileSize and options.yTileSize?
So in our usage of PanoJS we'll need to use options.tileSize instead, which should be fine for when tile size x and y is the same, but I think there are cases when this isn't true. I don't have a feel for how often this occurs or if there's any way to support it (except maybe not upgrading)?

Oh interesting, that's a good point. I don't know much about pyramidal data, so I was wondering how often does the xTileSize and yTileSize differ?

Though, if you don't want to upgrade it should be an easy switch back.

@kyleBalisWest Often enough, see example in #433 (comment) please :)

will-moore · 2023-01-19T10:47:38Z

I'm afraid jQuery-UI auto-complete is still off (mapr):

It looks like this is due to the previous jQuery-ui having a display: block on the <a>

Whereas there is no such rule in the updated version:

Probably easiest fix is to add display: block to that dusty.css under .ui-menu-item a?

jburel · 2023-01-19T10:52:06Z

Preview tab (right-hand panel)
- when moving the right-hand side of the slider knob to the left, the knob always moves back to the full range after release

PW: WFM, can you maybe add details please ?
PW: Aha, got it, the can confirm the comment of #433 (comment)

will-moore · 2023-01-19T10:54:17Z

@jburel I think that sounds like expected behaviour if the right slider value is above the max intensity, the slider will update it's upper limit to be the max of the current slider value or the max intensity value.

will-moore · 2023-01-19T10:57:57Z

Re: Pano.js comment above #433 (comment):
As @pwalczysko noticed: this image https://merge-ci.openmicroscopy.org/web/webclient/?show=image-146365 has:

tile_size": {
"width": 2592,
"height": 134
},

and doesn't show up in the Preview panel

PW: Edit: Other examples are https://merge-ci.openmicroscopy.org/web/webclient/?show=image-169215
https://merge-ci.openmicroscopy.org/web/webclient/?show=image-210315
https://merge-ci.openmicroscopy.org/web/webclient/?show=image-250767

Note: opening the image https://merge-ci.openmicroscopy.org/web/webclient/?show=image-140039 in old viewer of OMERO.web, you see as below (the glitch in left-hand side of the image is not present in iviewer)

jburel · 2023-01-19T11:57:10Z

@jburel I think that sounds like expected behaviour if the right slider value is above the max intensity, the slider will update it's upper limit to be the max of the current slider value or the max intensity value.

The problem was noticed when using https://merge-ci.openmicroscopy.org/web/webclient/?show=image-236165

PW: The problem is not caused by the tested PR

will-moore · 2023-01-19T12:41:54Z

@pwalczysko For me, the old viewer with that image looks a bit different - Maybe you've got some tiles cached? Anyway, it's also due to Pano.js: In this case the tiles are square: "tile_size": { "width": 1024, "height": 1024 },, so it could be fixed by passing Pano.js the correct (new) options, but I think we need to roll back the Pano.js upgrade anyway, to support non-square tiles of other images.

pwalczysko · 2023-01-19T12:52:03Z

@pwalczysko For me, the old viewer with that image looks a bit different - Maybe you've got some tiles cached? Anyway, it's also due to Pano.js: In this case the tiles are square: "tile_size": { "width": 1024, "height": 1024 },, so it could be fixed by passing Pano.js the correct (new) options, but I think we need to roll back the Pano.js upgrade anyway, to support non-square tiles of other images.

No, I tried to clear cache and also a new browser, the problem persists. The issue here might be that I have zoomed in a little, otherwise the problem does not manifest.

pwalczysko · 2023-01-23T12:11:49Z

There are still some issues with icons on the Preview pane, see for example images such as https://merge-ci.openmicroscopy.org/web/webclient/?show=image-146365

The icons on merge-ci

And errors in the Console

The icons on lates-ci

will-moore · 2023-01-23T12:52:42Z

omeroweb/webgateway/static/webgateway/js/ome.viewportImage.js

@@ -552,7 +552,7 @@ jQuery.fn.viewportImage = function(options) {
                imageWidth      : myPyramid.width,
                imageHeight     : myPyramid.height,
                initialZoom     : init_zoom,
-                staticBaseURL   : mediaroot+'3rdparty/panojs-2.0.0/images/',
+                staticBaseURL   : mediaroot+'3rdparty/panojs-2.0.0/',


I tracked it down to this change that didn't get reverted when you returned to panojs-2.0.0 and that is breaking the icons.

Oh yeah I missed that, thanks for finding it @will-moore. It should be fixed now!

pwalczysko · 2023-01-24T12:38:19Z

All looks good to me now, thanks @kyleBalisWest

will-moore

All looks good - Just the auto-complete issues (and suggested fix) at #433 (comment) to address

sbesson · 2023-01-25T17:40:11Z

All looks good - Just the auto-complete issues (and suggested fix) at #433 (comment) to address

@will-moore do you know if there anything in vanilla OMERO.web that allows auto-completion and would be affected by this issue? If not, could the display:block not be added to the relevant CSS element in the omero-mapr?

will-moore · 2023-01-26T17:57:40Z

@sbesson That would mean that the web upgrade is a breaking change and you wouldn't want to upgrade omero-web without also upgrading mapr. But how to enforce that.
It adds complexity unnecessarily I think.
Just add display: block to .ui-menu-item a in dusty.css should fix it (going on my comment above)

chris-allan · 2023-01-27T09:48:37Z

That would mean that the web upgrade is a breaking change and you wouldn't want to upgrade omero-web without also upgrading mapr.

We are upgrading several core libraries in this PR and #435 is also likely to go in to the next version. These are both breaking changes in my opinion. Do you disagree?

Consequently, yes, I would expect you would not want to upgrade omero-web without also upgrading mapr, no? And you would want this new mapr version to depend on the at least the new minor version. This is the same pattern we followed for the Django 3.2 work in #356. Am I missing something here?

will-moore · 2023-01-27T13:00:28Z

I guess I don't understand the objection to fixing the issue in this PR?

sbesson · 2023-01-30T15:36:12Z

I guess I don't understand the objection to fixing the issue in this PR?

Having looked a bit the history, I found the root of this issue precedes this PR and turned out to already be a problem during the former jquery upgrade in #180. At the time, patches were introduced directly in the CSS to meet the expectations of the mapr plugin, more specifically in

omero-web/omeroweb/webgateway/static/3rdparty/jquery-ui-1.12.1/css/jquery-ui.css

Lines 133 to 141 in efc042b

    
           /* EDIT - copied from jquery-ui-1.10.4/themes/base/jquery.ui.menu.css */ 
        
           .ui-menu .ui-menu-item a { 
        
           	text-decoration: none; 
        
               display: block; 
        
               padding: 2px .4em; 
        
               line-height: 1.5; 
        
               min-height: 0; 
        
               font-weight: normal; 
        
           }

and

omero-web/omeroweb/webgateway/static/3rdparty/jquery-ui-1.12.1/css/jquery-ui.css

Lines 159 to 163 in efc042b

    
           /* Fixes auto-complete menu in mapr */ 
        
           .ui-menu-item a.ui-state-active{ 
        
               background: #D4D6D8; 
        
           	margin: 0; 
        
           }

In other terms, we have been maintaining a vendored fork of jquery-ui. More than the proposed fix itself, my main concern has to do with perpetuating this practice.

Let's assume another Web app developed by the community was relying on the internals of d3 and using d3.scale.linear which has been dropped in the upgraded version. Would we consider introducing some form of compatibility layer in OMERO.web allowing them to continue using this API in the foreseeable future even as we keep upgrading the library? In that case, I think we would all agree the maintenance cost is really high and the plugin should be responsible for upgrading its internals and making another release compatible with the new OMERO.web release. As far as I understand, the situation is no different for mapr which effectively relies on some jquery-ui styling which has been change upstream almost a decade ago.

Beyond this particular fix, paraphrasing @chris-allan, I also think we want to be transparent about the fact there are breaking changes associated with the library upgrades proposed here. I would be very careful about conveying the misleading idea that consumers/app developers can just upgrade OMERO.web without thinking about the nature of these changes and the implications on their own plugins. In many ways, having a handful of OMERO.web apps in our own ecosystem that also need to be updated and released is a healthy process as it forces us to think how to communicate the upgrade process to our community.

will-moore · 2023-01-30T16:54:46Z

OK, I guess this PR is good to merge then

knabar · 2023-01-31T09:50:24Z

Thanks everyone for the PR reviews!

Not adding custom plugin CSS at this time

kyleBalisWest added 6 commits December 9, 2022 13:41

Upgraded jquery and jquery-ui

f001364

Updated d3, panojs, and hammer. Working out problem with image previews

ef9b47e

Updated panojs, jstree, and underscore to newer versions

f225aaa

Updated jquery mousewheel to 3.1.13

f5ce22b

Removed /images from panojs static url to fix image 404s

57d6f59

Updated jquery from 3.6.1 to 3.6.2

e1fee83

kyleBalisWest marked this pull request as draft January 5, 2023 14:07

github-advanced-security bot found potential problems Jan 5, 2023

View reviewed changes

omeroweb/webgateway/static/webgateway/js/ome.viewportImage.js Fixed Show fixed Hide fixed

omeroweb/webgateway/static/webgateway/js/ome.viewportImage.js Fixed Show fixed Hide fixed

omeroweb/webgateway/static/webgateway/js/ome.viewportImage.js Fixed Show fixed Hide fixed

sbesson reviewed Jan 5, 2023

View reviewed changes

Added icon images for jquery-ui

a0145c0

sbesson mentioned this pull request Jan 10, 2023

Mark unused templates as deprecated #424

Merged

jburel marked this pull request as ready for review January 17, 2023 12:32

chris-allan mentioned this pull request Jan 18, 2023

Allow the JSONSerializer to be used as a session serializer #435

Merged

will-moore reviewed Jan 18, 2023

View reviewed changes

Made custom changes to jquery-ui to match previous versions

44b7d4c

will-moore added the include label Jan 19, 2023

will-moore reviewed Jan 23, 2023

View reviewed changes

Downgraded panojs to allow irregular tile sizes

0af5e4f

kyleBalisWest force-pushed the upgrade branch from ab88dda to 0af5e4f Compare January 23, 2023 13:44

pwalczysko approved these changes Jan 24, 2023

View reviewed changes

will-moore previously requested changes Jan 24, 2023

View reviewed changes

sbesson approved these changes Jan 31, 2023

View reviewed changes

knabar mentioned this pull request Feb 1, 2023

Add change log for 5.18.0 #442

Merged

knabar merged commit 6fb0e85 into ome:master Feb 9, 2023

sbesson mentioned this pull request Feb 23, 2023

Fix auto-complete for jquery 1.13.2 ome/omero-mapr#75

Closed

will-moore mentioned this pull request Mar 7, 2023

Fix auto-complete css for omero-web 5.18.0 jquery-ui 1.13.2 ome/omero-mapr#76

Merged

sbesson mentioned this pull request Jul 26, 2023

Missing jquery-ui images #333

Closed

kyleBalisWest deleted the upgrade branch May 24, 2024 14:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgraded omero-web dependencies #433

Upgraded omero-web dependencies #433

kyleBalisWest commented Jan 5, 2023 •

edited

Loading

sbesson Jan 5, 2023

kyleBalisWest Jan 5, 2023

sbesson Jan 5, 2023

will-moore commented Jan 11, 2023 •

edited

Loading

chris-allan commented Jan 18, 2023

will-moore Jan 18, 2023

kyleBalisWest Jan 18, 2023

pwalczysko Jan 19, 2023

will-moore commented Jan 19, 2023

jburel commented Jan 19, 2023 •

edited by pwalczysko

Loading

will-moore commented Jan 19, 2023

will-moore commented Jan 19, 2023 •

edited by pwalczysko

Loading

jburel commented Jan 19, 2023 •

edited by pwalczysko

Loading

will-moore commented Jan 19, 2023

pwalczysko commented Jan 19, 2023

pwalczysko commented Jan 23, 2023 •

edited

Loading

will-moore Jan 23, 2023

kyleBalisWest Jan 23, 2023

pwalczysko commented Jan 24, 2023

will-moore left a comment

sbesson commented Jan 25, 2023

will-moore commented Jan 26, 2023

chris-allan commented Jan 27, 2023

will-moore commented Jan 27, 2023

sbesson commented Jan 30, 2023 •

edited

Loading

will-moore commented Jan 30, 2023

knabar commented Jan 31, 2023

		@@ -1570,7 +1570,7 @@ def report_settings(module):
		"3rdparty/JQuerySpinBtn-1.3a/JQuerySpinBtn.css",
		"3rdparty/jquery-ui-1.10.4/themes/base/jquery-ui.all.css",

		@@ -1585,20 +1585,20 @@ def report_settings(module):
		"3rdparty/jquery-ui-1.10.4/js/jquery-ui.1.10.4.js",

Upgraded omero-web dependencies #433

Upgraded omero-web dependencies #433

Conversation

kyleBalisWest commented Jan 5, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

will-moore commented Jan 11, 2023 • edited Loading

chris-allan commented Jan 18, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

will-moore commented Jan 19, 2023

jburel commented Jan 19, 2023 • edited by pwalczysko Loading

will-moore commented Jan 19, 2023

will-moore commented Jan 19, 2023 • edited by pwalczysko Loading

jburel commented Jan 19, 2023 • edited by pwalczysko Loading

will-moore commented Jan 19, 2023

pwalczysko commented Jan 19, 2023

pwalczysko commented Jan 23, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pwalczysko commented Jan 24, 2023

will-moore left a comment

Choose a reason for hiding this comment

sbesson commented Jan 25, 2023

will-moore commented Jan 26, 2023

chris-allan commented Jan 27, 2023

will-moore commented Jan 27, 2023

sbesson commented Jan 30, 2023 • edited Loading

will-moore commented Jan 30, 2023

knabar commented Jan 31, 2023

kyleBalisWest commented Jan 5, 2023 •

edited

Loading

will-moore commented Jan 11, 2023 •

edited

Loading

jburel commented Jan 19, 2023 •

edited by pwalczysko

Loading

will-moore commented Jan 19, 2023 •

edited by pwalczysko

Loading

jburel commented Jan 19, 2023 •

edited by pwalczysko

Loading

pwalczysko commented Jan 23, 2023 •

edited

Loading

sbesson commented Jan 30, 2023 •

edited

Loading