Include In Report Button not working properly

p-a-s-c-a-l commented 5 years ago

The "Include in Report" Button does not work for the [Study Area Map]().
Layers shown on the map are not available in the report image generated with html2canvas. This is most likely a problem caused by html2canvas itself and not by the map component or the include in report button.

To track down the problem, the debug log in html2canvas can be used. The problem related to the missing map layers could be resolved by updating html2canvas to the latest version and by changing some configuration options or modifying the react JS Code of the map component.

p-a-s-c-a-l commented 5 years ago

Most likely a CORS problem. See https://github.com/clarity-h2020/emikat/issues/14 and https://github.com/clarity-h2020/data-package/issues/31

therter commented 5 years ago

Current status: When we use html2canvas version 1.0.0-rc1, set the options useCORS and foreignObjectRendering to true and additional ensure that the page is not scrolled down, then the Report button will work in Chrome. But the button does not work in Firefox, because the option foreignObjectRendering is not supported by Firefox and without the option foreignObjectRendering, the overlay layers will be clipped.

p-a-s-c-a-l commented 5 years ago

ensure that the page is not scrolled down

how?

therter commented 5 years ago

how?

we can set the page to the top position by execute window.scrollTo(0, 0); After a click on the report button, a popup will open. So the change of the viewport should not disturb the users.

patrickkaleta commented 5 years ago

The "Include in Report" Button does not work for the Study Area Map.

Same bug also mentioned here.

Problem is that the JSON:API and the Group module sometimes have troubles working together (issue described here). Most of the times this is not an issue for us, since we already have a GL-step relation to the Study group, which we can use to create the required relation between the Report image and the Study a different way (this is done via the csis_helpers_node_insert hook in the csis_helpers.module). Only place where it doesn't work is the Study area tab, since it does not have a GL-step.

Today someone finally found a workaround, which makes it possible to send a POST request via JSON:API to create a new Group content. I implemented the necessary function in my latest commit, but further testing is needed.

Note: The proposed patch #26 in the linked issue does not solve our problem and breaks the entire Study, so it's not an option for us!

patrickkaleta commented 5 years ago

The "Include in Report" Button does not work for the Study Area Map.

This is fixed now. I applied the proposed patch (workaround) from here and so far I haven't detected any unwanted side-effects.

p-a-s-c-a-l commented 5 years ago

I tried the 'include in report'-button with the new table component iframe, but it didn't work:

TypeError: A is undefined html2canvas.min.js:6:146514

therter commented 5 years ago

The wrong element is used by html2canvas. I should be able to fix this

DenoBeno commented 5 years ago

Excellent. :-)

therter commented 5 years ago

Since the html2canvas cannot handle iframes, the first div element of the table component should be used to create the image. So the csis helper module must ensure that a valid element will be delivered to html2canvas.

If the created image does not look like expected, then it is possible that the page uses some css properties, which are not supported. An uncomplete list of supported and not supported css properties can be found here. Sometimes they can be replaced by other css properties.

p-a-s-c-a-l commented 5 years ago

The feature is still not working properly for the map component (neither chrome nor firefox):

grafik

therter commented 5 years ago

It is working now for the map and the table (at least in firefox and chrome)

Bildschirmfoto vom 2019-09-25 19-26-08

Bildschirmfoto vom 2019-09-25 19-24-56

I think we can close this issue now.

p-a-s-c-a-l commented 5 years ago

MCDA App Report image messed up in Chrome: CSS is missing.

grafik

@therter any idea what's going on here?

therter commented 5 years ago

The stylesheets will be loaded in chrome, if the html2canvas option foreignObjectRendering is activated. But some images will not be drawn. The option foreignObjectRendering should not be activated in firefox, because firefox does not support this feature.

p-a-s-c-a-l commented 5 years ago

But some images will not be drawn.

Some or all? Which ones? Why?

DenoBeno commented 5 years ago

I'm lost here... In my experience, taking screenshots works for the maps & tables & at least some of the widgets in scenario analysis (didn't test them all). It doesn't work for EEA app.

p-a-s-c-a-l commented 5 years ago

The screenshot functionality is still very unreliable. @therter which html2canvas version are we using? Did you upgrade to v1.0.0-rc.5?

therter commented 5 years ago

Did you upgrade to v1.0.0-rc.5?

At the moment, rc.1 is used, because the newer versions ignore the overlay layers of the maps.

therter commented 5 years ago

Current State: At the moment, the html2canvas version v1.0.0-rc.1 is used. But there are some problems with this version:

The css property transform does no work, if the value uses translate3d with negative values. But this property can be replaced by the top and left property.
The opacity property does not work, if the value is 0.0. So this property should be replaced by visibility: hidden.
Stylesheets from iframes will not be loaded in Chrome. This problem does not exist when the foreignObjectRendering mode is used or the href attribute of the style tags is explicitly set.
custom fonts will not be loaded in Firefox

Note: The css changes should be made on a copy of the div element that should be converted to an image to prevent failures after the conversion of the div to an image. For this reason, the html2canvas parameter onclone can take a callback function that allows you to make changes on a copy of the div that should be converted.

Another problem are SVG images. SVG images will be ignored in chrome, if the html2canvas parameter foreignObjectRendering is not set (but the foreignObjectRendering mode does not work in Firefox). The foreignObjectRendering mode has some restrictions:

images will only be rendered, if the base64 image encoding is used. So the images should be converted before html2canvas is used.
The onclone callback function will not be invoked.

The newer versions of html2canvas v1.0.0-rc.2+ have the following problems:

overlay layers of the map will not be drawn and I don't know why.
Stylesheets from iframes will not be loaded in Chrome. This problem does not exist when the foreignObjectRendering mode is used or the href attribute of the style tags is explicitly set.
if foreignObjectRendering is used, the left side of the image is cut off.
custom fonts will not be loaded in Chrome and Firefox

p-a-s-c-a-l commented 5 years ago

@therter Please report on the status of the report generation for the following integrated apps:

We are still not sure whether and under which circumstances it's working or not working.

therter commented 5 years ago

The report generation is working now for the tables, maps, Scenario Analysis App and the eea App.

p-a-s-c-a-l commented 4 years ago

Include Report Button is not visible for non-admin users.

patrickkaleta commented 4 years ago

Include Report Button is not visible for non-admin users.

I'm guessing you're talking about those buttons in the general "Study" Step (e.g. https://csis.myclimateservice.eu/study/55/view/area) for ordinary team members (so not the owners). For those users the "Include in report" was hidden due to the discussions in the User/group Permissions issue.

But you're right. Even though members cannot edit anything high-level (so anything in the "Study" step), they should still be able to at least take a screenshot of those things. I fixed that and the button is now visible there for ordinary team members.

DenoBeno commented 4 years ago

Good

Patrick Kaleta notifications@github.com schrieb am Fr., 17. Jan. 2020, 10:13:

Include Report Button is not visible for non-admin users.

I'm guessing you're talking about those buttons in the general "Study" Step (e.g. https://csis.myclimateservice.eu/study/55/view/area) for ordinary team members (so not the owners). For those users the "Include in report" was hidden due to the discussions in the User/group Permissions issue https://github.com/clarity-h2020/csis/issues/114.

But you're right. Even though members cannot edit anything high-level (so anything in the "Study" step), they should still be able to at least take a screenshot of those things. I fixed that and the button is now visible there for ordinary team members.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/clarity-h2020/csis-helpers-module/issues/9?email_source=notifications&email_token=AAWTC7TRWW6C2IQXBMBUUK3Q6FZCXA5CNFSM4H63CFEKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJHA6IQ#issuecomment-575541026, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAWTC7SXC4R4RRC4OBC4MV3Q6FZCXANCNFSM4H63CFEA .

p-a-s-c-a-l commented 4 years ago

Getting

Uncaught TypeError: Cannot read property 'getElementById' of null
    at HTMLButtonElement.<anonymous> (js_G7lmQBqjZHSWK9IX7Avj9xZS4PdGx6x03vpb7BfP-vU.js:3463)
    at HTMLButtonElement.dispatch (js_VN7rwrZCfKyapY1QuY241S22w6myG2_M6JuGNsj-3Lc.js:3)
    at HTMLButtonElement.q.handle (js_VN7rwrZCfKyapY1QuY241S22w6myG2_M6JuGNsj-3Lc.js:3)

when trying to use the include in report feature on this page to create a screenshot of the Transport Application embedded as iFrame.

therter commented 4 years ago

when trying to use the include in report feature on this page to create a screenshot of the Transport Application embedded as iFrame.

I will have a look on it

therter commented 4 years ago

@ghilbrae @luis-meteogrid In order to allow the creation of screenshots, the X-Frame-Option SAMEORIGIN should be removed from the Transport Application (this was also mentioned here) and the Access-Control-Allow-Origin header should be set to allow the site https://csis.myclimateservice.eu to access the Transport Application.

ghilbrae commented 4 years ago

ACK.

I'm adding my colleague @rapto to the discussion so he is also aware of this.

@ghilbrae @luis-meteogrid In order to allow the creation of screenshots, the X-Frame-Option SAMEORIGIN should be removed from the Transport Application (this was also mentioned here) and the Access-Control-Allow-Origin header should be set to allow the site https://csis.myclimateservice.eu to access the Transport Application.

ghilbrae commented 4 years ago

The generation of the report/summary has been discussed here: https://github.com/clarity-h2020/csis/issues/134#issuecomment-577590718 and we think that the best option is for us to generate a PDF and send it to the CSIS when it is needed, i.e., when the user wants to generate a Summary.

I think this would make this point moot, isn't it?

therter commented 4 years ago

The generation of the report/summary has been discussed here: clarity-h2020/csis#134 (comment) and we think that the best option is for us to generate a PDF and send it to the CSIS when it is needed, i.e., when the user wants to generate a Summary.

I think this would make this point moot, isn't it?

Yes, that is right

p-a-s-c-a-l commented 4 years ago

resolved

p-a-s-c-a-l commented 4 years ago

Just another SHOWSTOPPER for CSIS Public BETA Release: No include in report button for Scenario Analysis:

grafik

AFAIR this used to work @therter ?

therter commented 4 years ago

AFAIR this used to work

Yes, this was working and it is working again. I have added the button via "Manage display".

patrickkaleta commented 4 years ago

AFAIR this used to work

Yes, this was working and it is working again. I have added the button via "Manage display".

I remember it working a couple of weeks/months ago. But if I recall correctly, it didn't use the "include in report" button on the bottom of the page (the one @therter just added back into the tab), but instead it had multiple "include" buttons directly inside the app (and that's why, when you go on the Summary and open the "Attached Scenario analysis" you'll see just individual graphs instead of the whole component).

p-a-s-c-a-l commented 4 years ago

instead it had multiple "include" buttons directly inside the app (and that's why, when you go on the Summary and open the "Attached Scenario analysis" you'll see just individual graphs instead of the whole component).

Yes, that never worked reliably, therefore we had to disable it. But perhaps we can add several include in report buttons for different parts the iFramed application?

for Scenario Analysis App we would just need atm the table and the bar charts. So if I add a unique id to the respective DIV elements, this should be possible @therter ?

grafik

therter commented 4 years ago

So if I add a unique id to the respective DIV elements, this should be possible @therter ?

Yes, this should then be possible. At least from the html2canvas side. But we need additional buttons and I don't know, how this buttons can be added.

p-a-s-c-a-l commented 4 years ago

The button is configured here in the respective GL Step, but I couldn't find the actual button entity, field, or whatever it is. @patrickkaleta Can you please tell us where this include in report button is defined?

patrickkaleta commented 4 years ago

The button is configured here in the respective GL Step, but I couldn't find the actual button entity, field, or whatever it is. @patrickkaleta Can you please tell us where this include in report button is defined?

The actual button is created as a "Token field" here via the Display suite module.

p-a-s-c-a-l commented 4 years ago

Another problem with the button which currently causes the ui integration tests to fail:

Error: only one instance of babel-polyfill is allowed area line 2 > scriptElement:167:49465
https://csis.myclimateservice.eu/study/33/view/area line 2 > scriptElement:167 https://csis.myclimateservice.eu/study/33/view/area line 2 > scriptElement:167 r https://csis.myclimateservice.eu/study/33/view/area line 2 > scriptElement:167 https://csis.myclimateservice.eu/study/33/view/area line 2 > scriptElement:167 r https://csis.myclimateservice.eu/study/33/view/area line 2 > scriptElement:167 https://csis.myclimateservice.eu/study/33/view/area line 2 > scriptElement:167 https://csis.myclimateservice.eu/study/33/view/area line 2 > scriptElement:167 TypeError: Drupal.editors is undefinedarea line 2 > scriptElement:103:5 https://csis.myclimateservice.eu/study/33/view/area line 2 > scriptElement:103 https://csis.myclimateservice.eu/study/33/view/area line 2 > scriptElement:209

When pressing the button on this page. Furthermore, the 'edit report image' window is not shown which is probably related to the above errors.

fgeyer16 commented 4 years ago

I just checked and found, that the "include in report Button" fails to post the imaget o Drupal. The ajax request fails with an 422 "Unprocessable Entity" Error. @patrickkaleta any changes in the content type or js?

Furthermore, the 'edit report image' window is not shown which is probably related to the above errors.

When I check on click events on thebutton in Chromes Developer tools It seens if thereis an empty handler. But maybe this is the result of this errors. Who is using babel The map component?

patrickkaleta commented 4 years ago

I just checked and found, that the "include in report Button" fails to post the imaget o Drupal. The ajax request fails with an 422 "Unprocessable Entity" Error. @patrickkaleta any changes in the content type or js?

No, no changes in entity or js. Drupal logs say that the error is caused, because the screenshot file already exists (log message). These errors started occuring today at around 13:00.

patrickkaleta commented 4 years ago

I just checked and found, that the "include in report Button" fails to post the imaget o Drupal. The ajax request fails with an 422 "Unprocessable Entity" Error. @patrickkaleta any changes in the content type or js?

No, no changes in entity or js. Drupal logs say that the error is caused, because the screenshot file already exists (log message). These errors started occuring today at around 13:00.

This was probably caused by the fact that some files on the server were removed after reverting to the state of yesterday (while the DB stayed the same). I created the missing files on the server by duplicating another report image (shouldn't really matter, since all those screenshots are still just from dummy studies).

Report images are now again being generated & stored properly.

therter commented 4 years ago

Error: only one instance of babel-polyfill is allowed

This error is solved now.

therter commented 4 years ago

But perhaps we can add several include in report buttons for different parts the iFramed application?

for Scenario Analysis App we would just need atm the table and the bar charts.

The Scenario Analysis page has now two buttons to include the table and the chart in the report.

p-a-s-c-a-l commented 4 years ago

Layers from the group CLARITY Backgrounds selected on this map do not appear in the report image. This is probably caused by the fact that TLS is still not available for services.clarity-h2020.eu

therter commented 4 years ago

No Access-Control-Allow-Origin' header is present in the response from the wms http://services.clarity-h2020.eu:8080/geoserver/clarity/ows. So I have reopend this issue

p-a-s-c-a-l commented 4 years ago

Again, not working on this page with FireFox 74.

grafik

DenoBeno commented 4 years ago

Taking screenshots works for everything expect for the CLARITY land use layers at my side. (Test with latest chrome)

If i get this correctly, the wms serving CLARITY land use layers is misconfigured. Missing the Access-Control-Allow-Origin or not having TLS configured. Whatever it is, we already have another server that's working OK, so we just need the same configuration as on that one (server with hazard layers), no?

Who is responsible for this server? Is it @ghilbrae ? If it's @negroscuro , I have just noticed that he isn't included in this conversation.

therter commented 4 years ago

Again, not working on this page with FireFox 74.

Thsi should be fixed now

p-a-s-c-a-l commented 4 years ago

grafik

clarity-h2020 / csis-helpers-module

Include In Report Button not working properly #9