Problems with SVG files containing `<script>` #546

kimikage · 2020-10-08T11:10:21Z

First of all, I don't know much about the Pluto inside or JavaScript. Please correct me if there is any misunderstanding.

For example, the SVGJS backend of Gadfly outputs a <svg> with embedded <script>s (cf. http://gadflyjl.org/v1.3/man/backends/#Interactive-SVGs-1). However, there are some problems in using the interactive feature.

Static <img>

Since Pluto uses <img> to display SVG images, interactive features are not available. This problem can be solved by changing the output format to MIME"text/html" (in the packages or user code).

SVGScriptElement

SVG's <script> element (SVGScriptElement) is similar to HTML's <script>, but they are not identical in the specifications.
The problem is that SVGScriptElement does not have the src attribute. (Some implementations may support it, though.) Thus, node.src in the following lines may be undefined, and (node.src != "") will be true.

Pluto.jl/frontend/components/CellOutput.js

Lines 157 to 161 in b113783

    
           // Run scripts sequentially 
        
           for (let node of script_nodes) { 
        
               root_node.currentScript = node 
        
               if (node.src != "") {

This problem should be solved by changing the condition to if (node.src). Of course, we can do a more strict check.

Separation of environments by ID

An SVG image may contain multiple <script> elements. They are usually assumed to share an environment. However, the separation is currently done based on node.id.

Pluto.jl/frontend/components/CellOutput.js

Line 180 in b113783

let script_id = node.id

I don't know of a versatile solution to this, but I think that we could loosen up the scope a bit more, as shown below.

let script_id = node.id ? node.id : node.parentNode.id

AMD & RequireJS support

The SVGJS backend of Gadfly uses Snap.svg. Snap.svg uses the AMD (Asynchronous Module Definition) for module management.
Now that ES Modules are widely supported, the AMD is an old technology, but some JavaScript libraries still use the AMD and RequireJS. This can lead to the following problem.

Fallback using the global environment

The libraries which use the AMD usually register a module object in the global environment when the AMD is not available. In general, this can cause problems with conflicts between multiple versions, but as far as the libraries are used in a single Pluto notebook, I think they rarely cause conflicts.
However, on the Pluto front-end, the default environment (this) is undefined. This can cause an error in code which assumes that this is the global environment, i.e., window.

Pluto.jl/frontend/components/CellOutput.js

Line 183 in b113783

this: script_id ? previous_results_map.get(script_id) : undefined,

I don't think polluting the global environment is a good idea. However, it would be better to share a Node object of some kind (e.g. root_node) with the same script_id instead of undefined.

innerHTML

I think textContent is more appropriate than innerHTML.

Pluto.jl/frontend/components/CellOutput.js

Line 188 in b113783

code: node.innerHTML,

The text was updated successfully, but these errors were encountered:

dralletje · 2020-10-08T12:39:25Z

Do you have an example notebook using Gadfly?
Rendering svg's in img tags has several benefits we are not keen on getting rid of, and I want to see how much is actually broken when rendering Gadfly as html.

dralletje · 2020-10-08T13:09:37Z

Okay tried it myself 😁
Your feedback it totally valid, we're still on a bit of a crossroad between "Supporting all inline html and script" and "Make writing html and scripts in Pluto itself fun". Most likely we will end on the side of "Supporting all inline html and script" though, and when doing that your points will be very helpful :)

Until we have this covered, you can wrap the snippet in <html> tags, so Pluto will render it in an iframe

# ╔═╡ af27fc22-0964-11eb-0382-8343faea368e
using Gadfly

# ╔═╡ 09a1b2ba-0965-11eb-2f11-73708c4a8bd9
HTMLDocument(plot(y=[1,2,3]))

# ╔═╡ 0751415a-0966-11eb-07d0-69316a9b61c8
struct HTMLDocument
	embedded
end

# ╔═╡ 062f3880-0967-11eb-3c2c-1db7aa9d40b8
function Base.show(io::IO, mime::MIME"text/html", doc::HTMLDocument)
	println(io, "<html>")
	show(io, mime, doc.embedded)
	println(io, "</html>")
end

kimikage · 2020-10-08T13:14:12Z

Oh, sorry. I mentioned Gadfly just because I thought it was a well-known package, but as for "1. Static <img>", Gadfly should already output SVGs as HTML, as you get. 😅

Perhaps the only essential issue is AMD support.

dralletje · 2020-10-08T13:28:37Z

Yeah, I was expecting all AMD packages to be imported with <script src="...">, never seen an AMD package just placed in a <script>...</script> tag 😂 I'll keep you posted

fonsp · 2020-11-01T16:55:02Z

1: we will not change this behaviour. Your suggestion is correct: a package that wants scripts to work should output the html mime type.

2: fixed in 694526b

3: I am not sure what you mean with "environment", but our ID tracking is only used for a pluto-specific (additional) feature. It should be unrelated

4 & 5: this is a good point. Let's make that the focus of this issue

6: you must have misread something

kimikage · 2020-11-01T18:27:50Z

Thank you for your response and the fix.

6: you must have misread something

Please explain in a little more detail. The innerHTML is for HTML and should not be used for anything other than HTML.

fonsp · 2020-11-01T19:20:19Z

Ah it is I who misread. Still I don't think this matters.

kimikage · 2020-11-02T08:07:27Z

Still I don't think this matters.

Yes. So I placed it at the end (i.e. 6.). However, in SVG, an XML format, <script> is often used with CDATA, and innerHTML causes unintentional escaping.

### A Pluto.jl notebook ###
# v0.12.6

using Markdown
using InteractiveUtils

# ╔═╡ 10303500-1cc2-11eb-22fc-6711d6ea7162
struct MyStruct end

# ╔═╡ 2f160ee0-1cc2-11eb-0db8-9f9c1b645189
Base.showable(::MIME"text/html", ::MyStruct) = true

# ╔═╡ 54186492-1cc2-11eb-109d-c31ef1da0c3c
function Base.show(io::IO, ::MIME"text/html", ::MyStruct)
    write(io, """
        <html>
        <body>
          <svg width="20mm" height="15mm" viewBox="0,0,20,15">
            <script><![CDATA[
              if (1 > 0) {
                console.log(document.getElementById("my-circle"));
              }
            ]]></script>
            <circle fill="green" cx="10" cy="7" r="5" id="my-circle" />
          </svg>
        </body>
        </html>
        """)
end

# ╔═╡ 051d1660-1cdb-11eb-3e3f-01545ab6cb41
MyStruct()

# ╔═╡ Cell order:
# ╠═10303500-1cc2-11eb-22fc-6711d6ea7162
# ╠═2f160ee0-1cc2-11eb-0db8-9f9c1b645189
# ╠═54186492-1cc2-11eb-109d-c31ef1da0c3c
# ╠═051d1660-1cdb-11eb-3e3f-01545ab6cb41

fonsp · 2020-11-02T12:49:53Z

Ah okay, your original wording made it sound like a style comment. We'll change it

fonsp · 2020-11-05T00:35:41Z

We reverted to this === window for classic <script>s with no id set. And innerHTML 👉 innerText

This fixes the interactivity of Gadfly plots on Pluto, solving the Gadfly example in fonsp/Pluto.jl#546 and this [stackoverflow question](https://stackoverflow.com/questions/66297678/using-gadfly-interactively-in-pluto).

dralletje self-assigned this Oct 8, 2020

kimikage mentioned this issue Oct 9, 2020

Support for displaying SVG wrapped in HTML kimikage/ProfileSVG.jl#50

Merged

fonsp added enhancement New feature or request frontend Concerning the HTML editor labels Oct 14, 2020

mbaz mentioned this issue Oct 21, 2020

Interactive Plots in Pluto? mbaz/Gaston.jl#146

Closed

fonsp added a commit that referenced this issue Nov 1, 2020

for #546

694526b

fonsp closed this as completed in e268b99 Nov 5, 2020

mbaz mentioned this issue Nov 15, 2020

Zoom and moving around with mouse for Gaston plots, in Pluto mbaz/Gaston.jl#156

Closed

diegozea mentioned this issue Jul 11, 2021

Use the html tag for text/html GiovineItalia/Compose.jl#426

Merged

This was referenced Jan 5, 2022

Gadfly plot needs to be scrolled GiovineItalia/Gadfly.jl#1561

Open

Revert "Use the html tag for text/html" GiovineItalia/Compose.jl#429

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problems with SVG files containing `<script>` #546

Problems with SVG files containing `<script>` #546

kimikage commented Oct 8, 2020 •

edited

Loading

dralletje commented Oct 8, 2020

dralletje commented Oct 8, 2020

kimikage commented Oct 8, 2020

dralletje commented Oct 8, 2020

fonsp commented Nov 1, 2020 •

edited

Loading

kimikage commented Nov 1, 2020

fonsp commented Nov 1, 2020

kimikage commented Nov 2, 2020 •

edited

Loading

fonsp commented Nov 2, 2020

fonsp commented Nov 5, 2020

Problems with SVG files containing <script> #546

Problems with SVG files containing <script> #546

Comments

kimikage commented Oct 8, 2020 • edited Loading

dralletje commented Oct 8, 2020

dralletje commented Oct 8, 2020

kimikage commented Oct 8, 2020

dralletje commented Oct 8, 2020

fonsp commented Nov 1, 2020 • edited Loading

kimikage commented Nov 1, 2020

fonsp commented Nov 1, 2020

kimikage commented Nov 2, 2020 • edited Loading

fonsp commented Nov 2, 2020

fonsp commented Nov 5, 2020

Problems with SVG files containing `<script>` #546

Problems with SVG files containing `<script>` #546

kimikage commented Oct 8, 2020 •

edited

Loading

fonsp commented Nov 1, 2020 •

edited

Loading

kimikage commented Nov 2, 2020 •

edited

Loading