Include In Report Button not working properly

[p-a-s-c-a-l]

• 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]

Most likely a CORS problem. See clarity-h2020/emikat#14 and clarity-h2020/data-package#31

[therter]

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]

ensure that the page is not scrolled down

how?

[therter]

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]

• 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]

• 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]

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]

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

[DenoBeno]

Excellent. :-)

[therter]

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]

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

[therter]

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

I think we can close this issue now.

[p-a-s-c-a-l]

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]

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]

Again, not working on this page with FireFox 74.

[DenoBeno]

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]

Again, not working on this page with FireFox 74.

Thsi should be fixed now

[p-a-s-c-a-l]

[p-a-s-c-a-l]

@therter what is the current status? Did you test it with Firefox, too? Windows or Linux?

• Firefox 75.0 (64-Bit) Windows 7: working
• Firefox 75.0 (64-Bit) Windows 10: not working

So probably a problem with the graphic card driver. Doesn't seem that we have any influence on that.
I close the issue for now. We'll wait for the results of the technical validation: clarity-h2020/csis-technical-validation#1

[p-a-s-c-a-l]

This is a never ending story. I tried to make a screenshot of this map, but it's again not working:

[therter]

The position of the popup from the GetFeatureInfo request is correct now (on the dev instance), but I could not reproduce the errors on the left map.

[p-a-s-c-a-l]

O.K. Thanks.