pane.HTML does not embed outside sites with JavaScript as of 1.x; working in 0.14

[ledwithQ]

I occasionally embed a Tableau sites and other external pages which had JavaScript in our panel apps. Tableau supports embed with click on a share icon then copying the embed code and then paste it into pn.pane.HTML(" ---paste exactly here ").

ALL software version info

This worked as over version 0.14.4, but does not work on 1.x

Tested on multiple tableau servers (public and private )and other similar sites. Example: https://www.tableau.com/data-insights/dashboard-showcase/telecommunications-analytics

Description of expected behavior and the observed behavior

The pane is supposed to render in the page, but does not seem to load. Dev tools does not seem to generate any feedback.

Complete, minimal, self-contained example code that reproduces the issue

import panel as pn
pn.extension()

html1 = pn.pane.HTML('<h1>there will be a gap below in panel 1.0.x-1.2</h1>')

# the broken code
html2 = pn.pane.HTML("""<div class='tableauPlaceholder' id='viz1689628869174' style='position: relative'><noscript><a href='https:&#47;&#47;www.tableau.com&#47;'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;H9&#47;H9GZ4B6XN&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='path' value='shared&#47;H9GZ4B6XN' /> <param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;H9&#47;H9GZ4B6XN&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='tabs' value='no' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1689628869174');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='800px';vizElement.style.height='597px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>""",
    height=500, width=800)  # noqa: E501


btn = pn.widgets.Button(name="hi- just a sample widget to make sure page loads")

html3 = pn.pane.HTML("""
<h1>This is an HTML pane // to make sure html pane is working; from examples</h1>
<code>x = 5;<br>y = 6;<br>z = x + y;</code><br><br>
<table> <tr> <th>Firstname</th><th>Lastname</th> <th>Age</th></tr>
  <tr><td>Jill</td><td>Smith</td> <td>50</td></tr> </table>""", 
  styles={'background-color': '#F6F6F6', 'border': '2px solid black',
          'border-radius': '5px', 'padding': '10px'})

pn.serve(pn.Column(btn, html1, html2, html3), show=True)

Stack traceback and/or browser JavaScript console output

Screenshots or screencasts of the bug in action

working with 0.1.4.4

[avivazran]

I think I experience the issue when trying to render a hiplot.Experiment object exported html string. Ipython displays it fine, and also datapane shows it ok. only issue comes when trying to wrap it in some panel pane. tried multiple methods including wrapping it in jupyter widgets and then pass it to panel. nothing works. thing is I already somehow succeded doing this in the past but I suspect something is changed now.

[philippjfr]

Sorry we never dug into this. Could either or both of you try to inspect the page, check for any console errors and see what the DOM structure looks like where the embedded plot or dashboard should be?

[avivazran]

import hiplot as hip
from bokeh.sampledata.autompg import autompg as df
import panel as pn
pn.extension()

exp = hip.Experiment.from_dataframe(df)
html = exp.to_html()
pn.pane.HTML(html)


browser console ouotput

VM446:2 Uncaught Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at e.render (:2:1369048) at Module.ut (:2:1566947) at _hiplot_setup (:12:36) at :17:7 at v.render_to (bokeh-3.3.4.min.js:560:6331) at bokeh-3.3.4.min.js:218:834 at async u (bokeh-3.3.4.min.js:218:657) at async t.add_document_standalone (bokeh-3.3.4.min.js:218:972)