Diagram loading very slow, with time out, when adding 2 images

[ane-gabriela]

Steps to reproduce:

1. Edit a diagram
2. Click on the plus sign > Image...
3. Drag and drop an image from your computer (resize if needed) eg.
4. Click on the plus sign > Image...
5. Add an URL with an image eg.
6. https://upload.wikimedia.org/wikipedia/commons/e/e0/Large_Scaled_Forest_Lizard.jpg
7. Click on Apply
8. Save & View the Diagram

Expected results: The images are added to the diagram.

Actual results: The images are added but the diagram is loading very slow when accessed. In the browser console there is:

Environment: Windows 10, XWiki 12.10.5, 9.11, Chrome 89, Diagram Application (Pro) 1.16-rc-2

[mflorea]

I don't reproduce the issue. Maybe it depends on the size of the images. For me the loading time of the diagram editor (after closing #192) is always between 2.5s (Chrome) and 3s (Firefox).

[ilieandriuta]

It seems I reproduce the issue as well on Diagram 1.17.3 (XWiki 14.9/ Edge 107/ PostgreSQL 15/ Tomcat 9.0.68), but on my side the page saved normal when using two local inserted images.

However, after inserting an image from an URL (e.g. https://upload.wikimedia.org/wikipedia/commons/e/e0/Large_Scaled_Forest_Lizard.jpg), the page was seemingly "stuck" for quite a long time in waiting when saving it (app. 50 sec) and I got the following error in browser's console:

Uncaught Error: Load timeout for modules: xwiki-l10n!xwiki-selectize-messages_unnormalized4,xwiki-l10n!xwiki-lightbox-messages_unnormalized5,draw.io.viewer,mxgraph-viewer,xwiki-l10n!xwiki-selectize-messages,xwiki-l10n!xwiki-lightbox-messages,noDocWrite!mxgraph-client_unnormalized6,noDocWrite!mxgraph-client,mxgraph-client,xwiki-job-runner,jsTree,tree-finder,mxgraph-init
https://requirejs.org/docs/errors.html#timeout
    at makeError (require.min.js?r=1:5:1795)
    at R (require.min.js?r=1:5:7823)
    at Object.completeLoad (require.min.js?r=1:5:16181)
    at HTMLScriptElement.onScriptLoad (require.min.js?r=1:5:16882)
makeError @ require.min.js?r=1:5
R @ require.min.js?r=1:5
completeLoad @ require.min.js?r=1:5
onScriptLoad @ require.min.js?r=1:5
load (async)
req.load @ require.min.js?r=1:5
load @ require.min.js?r=1:5
load @ require.min.js?r=1:5
fetch @ require.min.js?r=1:5
check @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
each @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
init @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
setTimeout (async)
req.nextTick @ require.min.js?r=1:5
s @ require.min.js?r=1:5
fetch @ require.min.js?r=1:5
check @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
each @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
init @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
setTimeout (async)
req.nextTick @ require.min.js?r=1:5
s @ require.min.js?r=1:5
fetch @ require.min.js?r=1:5
check @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
each @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
each @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
each @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
each @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
init @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
setTimeout (async)
req.nextTick @ require.min.js?r=1:5
s @ require.min.js?r=1:5
requirejs @ require.min.js?r=1:5
(anonymous) @ DiagramViewSheet?minify=false&language=en&docVersion=1.1:169
execCb @ require.min.js?r=1:5
check @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
each @ require.min.js?r=1:5
emit @ require.min.js?r=1:5
check @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
init @ require.min.js?r=1:5
a @ require.min.js?r=1:5
completeLoad @ require.min.js?r=1:5
onScriptLoad @ require.min.js?r=1:5
load (async)
req.load @ require.min.js?r=1:5
load @ require.min.js?r=1:5
load @ require.min.js?r=1:5
fetch @ require.min.js?r=1:5
check @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
each @ require.min.js?r=1:5
enable @ require.min.js?r=1:5
init @ require.min.js?r=1:5
(anonymous) @ require.min.js?r=1:5
setTimeout (async)
req.nextTick @ require.min.js?r=1:5
s @ require.min.js?r=1:5
requirejs @ require.min.js?r=1:5
(anonymous) @ DiagramViewSheet?minify=false&language=en&docVersion=1.1:168

[petrenkonikita112263]

I didn't reproduce this issue on the latest version of the app Diagram 1.17.3 on XWiki Docker image 13.10.11 MySQL & Tomcat. Moreover no errors in the browser's console

I created a diagram with two images:

• this one

https://upload.wikimedia.org/wikipedia/commons/e/e0/Large_Scaled_Forest_Lizard.jpg

• and this one

The last one was downloaded in original size. Both images were resized in the application due to the size

Maybe it depends on the size of the images

That's why I choose the largest size of one and which is free.

Load in edit mode with force refresh

Simple load of diagram with two images (no edit mode) with force refresh

[snazare]

@ane-gabriela could you please let us know if you reproduce on 14.10? thank you!

[ane-gabriela]

@snazare Hi! Just tested locally on XWiki 14.10, Chrome 127, Diagram Application (Pro) 1.20.5, Windows 11 Pro and I've followed the exact steps from here

It seems I can't save the diagram at all now. When I click Save & View I get:

and in the wiki console:

2024-08-08 14:26:51.572:WARN :oejs.Request:qtp1295083508-32 - http://localhost:8080/xwiki/bin/preview/Diagram/Diagram%201/WebHome: java.lang.IllegalStateException: Form is larger than max length 1000000
2024-08-08 14:26:51.573:WARN :oejs.HttpChannel:qtp1295083508-32: handleException /xwiki/bin/preview/Diagram/Diagram%201/WebHome org.eclipse.jetty.http.BadMessageException: 400: Unable to parse form content
2024-08-08 14:27:31.373:WARN :oejs.Request:qtp1295083508-28 - http://localhost:8080/xwiki/bin/preview/Diagram/Diagram%201/WebHome: java.lang.IllegalStateException: Form is larger than max length 1000000
2024-08-08 14:27:31.373:WARN :oejs.HttpChannel:qtp1295083508-28: handleException /xwiki/bin/preview/Diagram/Diagram%201/WebHome org.eclipse.jetty.http.BadMessageException: 400: Unable to parse form content
2024-08-08 14:27:58.396:WARN :oejs.Request:qtp1295083508-163 - http://localhost:8080/xwiki/bin/preview/Diagram/Diagram%201/WebHome: java.lang.IllegalStateException: Form is larger than max length 1000000
2024-08-08 14:27:58.397:WARN :oejs.HttpChannel:qtp1295083508-163: handleException /xwiki/bin/preview/Diagram/Diagram%201/WebHome org.eclipse.jetty.http.BadMessageException: 400: Unable to parse form content