Unable to display valid HTML

[acarl005]

Describe the bug
Fails to display valid SVG.

To Reproduce
Steps to reproduce the behavior:

In a python cell:

from IPython.display import HTML
HTML("""<svg width="284pt" height="260pt"
 viewBox="0.00 0.00 284.00 260.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 256)">
<title>tree</title>
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-256 280,-256 280,4 -4,4"/>
<!-- 3 -->
<g id="node1" class="node">
<title>3</title>
<g id="a_node1"><a href="foo"  title="I">
<polygon fill="none" stroke="#000000" points="54,-36 0,-36 0,0 54,0 54,-36"/>
<text text-anchor="middle" x="27" y="-14.3" font-family="Times,serif" font-size="14.00" fill="#000000">I</text>
</a>
</g>
</g>
<!-- 5 -->
<g id="node2" class="node">
<title>5</title>
<g id="a_node2"><a href="foo"  title="love">
<polygon fill="none" stroke="#000000" points="126,-36 72,-36 72,0 126,0 126,-36"/>
<text text-anchor="middle" x="99" y="-14.3" font-family="Times,serif" font-size="14.00" fill="#000000">love</text>
</a>
</g>
</g>
<!-- 3&#45;&gt;5 -->
<g id="edge10" class="edge">
<title>3&#45;&gt;5</title>
<path fill="none" stroke="#cccccc" d="M54.2813,-18C60.013,-18 65.7448,-18 71.4766,-18"/>
<polygon fill="#cccccc" stroke="#cccccc" points="71.7495,-18 71.7495,-18 71.7495,-18 71.7495,-18"/>
</g>
<!-- 7 -->
<g id="node3" class="node">
<title>7</title>
<g id="a_node3"><a href="foo"  title="W266">
<polygon fill="none" stroke="#000000" points="203.5,-36 144.5,-36 144.5,0 203.5,0 203.5,-36"/>
<text text-anchor="middle" x="174" y="-14.3" font-family="Times,serif" font-size="14.00" fill="#000000">W266</text>
</a>
</g>
</g>
<!-- 5&#45;&gt;7 -->
<g id="edge11" class="edge">
<title>5&#45;&gt;7</title>
<path fill="none" stroke="#cccccc" d="M126.2461,-18C132.1221,-18 137.998,-18 143.874,-18"/>
<polygon fill="#cccccc" stroke="#cccccc" points="144.1538,-18 144.1538,-18 144.1538,-18 144.1538,-18"/>
</g>
<!-- 9 -->
<g id="node4" class="node">
<title>9</title>
<g id="a_node4"><a href="foo"  title="😄">
<polygon fill="none" stroke="#000000" points="276,-36 222,-36 222,0 276,0 276,-36"/>
<text text-anchor="middle" x="249" y="-14.3" font-family="Times,serif" font-size="14.00" fill="#000000">😄</text>
</a>
</g>
</g>
<!-- 7&#45;&gt;9 -->
<g id="edge12" class="edge">
<title>7&#45;&gt;9</title>
<path fill="none" stroke="#cccccc" d="M203.5898,-18C209.5266,-18 215.4634,-18 221.4002,-18"/>
<polygon fill="#cccccc" stroke="#cccccc" points="221.683,-18 221.683,-18 221.683,-18 221.683,-18"/>
</g>
<!-- 0 -->
<g id="node5" class="node">
<title>0</title>
<g id="a_node5"><a href="foo"  title="&quot;(4&#10; &#160;(4 (2 I) (3 love) (3 W266))&#10; &#160;(3 😄))&quot;">
<ellipse fill="#052061" stroke="#000000" cx="163" cy="-234" rx="18" ry="18"/>
<text text-anchor="middle" x="163" y="-230.3" font-family="Times,serif" font-size="14.00" fill="#ffffff">4</text>
</a>
</g>
</g>
<!-- 1 -->
<g id="node6" class="node">
<title>1</title>
<g id="a_node6"><a href="foo"  title="&quot;(4 (2 I) (3 love) (3 W266))&quot;">
<ellipse fill="#052061" stroke="#000000" cx="136" cy="-162" rx="18" ry="18"/>
<text text-anchor="middle" x="136" y="-158.3" font-family="Times,serif" font-size="14.00" fill="#ffffff">4</text>
</a>
</g>
</g>
<!-- 0&#45;&gt;1 -->
<g id="edge1" class="edge">
<title>0&#45;&gt;1</title>
<path fill="none" stroke="#000000" d="M156.6014,-216.937C153.407,-208.4186 149.471,-197.9227 145.8982,-188.3952"/>
<polygon fill="#000000" stroke="#000000" points="149.1411,-187.0749 142.3527,-178.9405 142.5868,-189.5328 149.1411,-187.0749"/>
</g>
<!-- 8 -->
<g id="node10" class="node">
<title>8</title>
<g id="a_node10"><a href="foo"  title="&quot;(3 😄)&quot;">
<ellipse fill="#92c5de" stroke="#000000" cx="212" cy="-162" rx="18" ry="18"/>
<text text-anchor="middle" x="212" y="-158.3" font-family="Times,serif" font-size="14.00" fill="#000000">3</text>
</a>
</g>
</g>
<!-- 0&#45;&gt;8 -->
<g id="edge8" class="edge">
<title>0&#45;&gt;8</title>
<path fill="none" stroke="#000000" d="M173.1528,-219.0816C179.7885,-209.3311 188.5923,-196.395 196.1409,-185.3032"/>
<polygon fill="#000000" stroke="#000000" points="199.1274,-187.1357 201.8602,-176.8993 193.3404,-183.1973 199.1274,-187.1357"/>
</g>
<!-- 2 -->
<g id="node7" class="node">
<title>2</title>
<g id="a_node7"><a href="foo"  title="&quot;(2 I)&quot;">
<ellipse fill="#f7f7f7" stroke="#000000" cx="41" cy="-90" rx="18" ry="18"/>
<text text-anchor="middle" x="41" y="-86.3" font-family="Times,serif" font-size="14.00" fill="#000000">2</text>
</a>
</g>
</g>
<!-- 1&#45;&gt;2 -->
<g id="edge2" class="edge">
<title>1&#45;&gt;2</title>
<path fill="none" stroke="#000000" d="M121.5715,-151.0647C106.2268,-139.435 81.7408,-120.8772 63.7854,-107.269"/>
<polygon fill="#000000" stroke="#000000" points="65.648,-104.289 55.5642,-101.0382 61.4199,-109.8678 65.648,-104.289"/>
</g>
<!-- 4 -->
<g id="node8" class="node">
<title>4</title>
<g id="a_node8"><a href="foo"  title="&quot;(3 love)&quot;">
<ellipse fill="#92c5de" stroke="#000000" cx="104" cy="-90" rx="18" ry="18"/>
<text text-anchor="middle" x="104" y="-86.3" font-family="Times,serif" font-size="14.00" fill="#000000">3</text>
</a>
</g>
</g>
<!-- 1&#45;&gt;4 -->
<g id="edge4" class="edge">
<title>1&#45;&gt;4</title>
<path fill="none" stroke="#000000" d="M128.5781,-145.3008C124.7009,-136.577 119.8694,-125.7062 115.5188,-115.9174"/>
<polygon fill="#000000" stroke="#000000" points="118.6414,-114.3253 111.3816,-106.6087 112.2447,-117.1683 118.6414,-114.3253"/>
</g>
<!-- 6 -->
<g id="node9" class="node">
<title>6</title>
<g id="a_node9"><a href="foo"  title="&quot;(3 W266)&quot;">
<ellipse fill="#92c5de" stroke="#000000" cx="168" cy="-90" rx="18" ry="18"/>
<text text-anchor="middle" x="168" y="-86.3" font-family="Times,serif" font-size="14.00" fill="#000000">3</text>
</a>
</g>
</g>
<!-- 1&#45;&gt;6 -->
<g id="edge6" class="edge">
<title>1&#45;&gt;6</title>
<path fill="none" stroke="#000000" d="M143.4219,-145.3008C147.2991,-136.577 152.1306,-125.7062 156.4812,-115.9174"/>
<polygon fill="#000000" stroke="#000000" points="159.7553,-117.1683 160.6184,-106.6087 153.3586,-114.3253 159.7553,-117.1683"/>
</g>
<!-- 2&#45;&gt;3 -->
<g id="edge3" class="edge">
<title>2&#45;&gt;3</title>
<path fill="none" stroke="#000000" d="M37.5393,-72.2022C36.0029,-64.3005 34.1577,-54.811 32.4436,-45.9959"/>
<polygon fill="#000000" stroke="#000000" points="35.8625,-45.2412 30.5181,-36.0931 28.9912,-46.5773 35.8625,-45.2412"/>
</g>
<!-- 4&#45;&gt;5 -->
<g id="edge5" class="edge">
<title>4&#45;&gt;5</title>
<path fill="none" stroke="#000000" d="M102.7383,-71.8314C102.2035,-64.131 101.5677,-54.9743 100.9734,-46.4166"/>
<polygon fill="#000000" stroke="#000000" points="104.4632,-46.1467 100.2787,-36.4133 97.48,-46.6317 104.4632,-46.1467"/>
</g>
<!-- 6&#45;&gt;7 -->
<g id="edge7" class="edge">
<title>6&#45;&gt;7</title>
<path fill="none" stroke="#000000" d="M169.5141,-71.8314C170.1558,-64.131 170.9188,-54.9743 171.6319,-46.4166"/>
<polygon fill="#000000" stroke="#000000" points="175.1229,-46.6694 172.4656,-36.4133 168.1471,-46.088 175.1229,-46.6694"/>
</g>
<!-- 8&#45;&gt;9 -->
<g id="edge9" class="edge">
<title>8&#45;&gt;9</title>
<path fill="none" stroke="#000000" d="M216.5369,-144.3428C222.8271,-119.8619 234.2663,-75.342 241.7485,-46.222"/>
<polygon fill="#000000" stroke="#000000" points="245.2104,-46.8124 244.3092,-36.256 238.4307,-45.0703 245.2104,-46.8124"/>
</g>
</g>
</svg>
""")

Expected behavior
An SVG of a tree diagram should render below the cell, as it renders just fine when saved to a separate file and opened in a tab. Also works fine in Jupyter Notebook.

Desktop (please complete the following information):

• OS: MacOS 10.14
• Browser: Chrome 69
• JupyterLab: 0.34.12

Additional context
There is an exception thrown in the console, something about unable to call e.toLowerCase() inside url.js. Looks like its trying to parse a URL but was passed undefined.

[jasongrout]

You're right that it is in the url-checking code. It has to do with SVG strings, as far as I can tell. The url in this case is an svg string, and as far as I can tell the toLowerCase function doesn't exist on svg strings:

jupyterlab/packages/coreutils/src/url.ts

Line 150 in 0a0fbf9

return url.toLowerCase().indexOf(protocol) !== 0 && url.indexOf('//') !== 0;

[jasongrout]

I think you could make the case that we shouldn't be checking urls inside of svg elements.

[Madhu94]

I don't think urls are checked inside SVG elements, the above code path would go inside renderHTML

@acarl005 , could you try

from IPython.display import SVG
SVG(" ... ")

instead?

[acarl005]

@Madhu94 Thanks for the suggestion. That does work for only the SVG, as in this example. However, in my real notebook, that SVG is actually embedded in some other HTML, hence the use of IPython.display.HTML instead. (I had removed extraneous HTML the sake of brevity in this issue). I assumed the intended behavior is for SVGs to render correctly using IPython.display.HTML, since it renders with the old Jupyter Notebooks.

[Madhu94]

The fix is in #5610

[KevinGG]

May I ask the minimum version of jupyterlab that includes the fix?
I'm on 0.33.12 (from pip install) that still haven't included this fix. Thanks!

[Update] Thanks, it was fixed in 1.0

[KevinGG]

Looks like this automatically re-opened when I mentioned it in some other PR. Sorry for the inconvenience.