KevinGG commented on a change in pull request #11020: [BEAM-7926] Update Data Visualization URL: https://github.com/apache/beam/pull/11020#discussion_r387268984
########## File path: sdks/python/apache_beam/runners/interactive/display/pcoll_visualization.py ########## @@ -52,42 +56,89 @@ except ImportError: _pcoll_visualization_ready = False +_LOGGER = logging.getLogger(__name__) + # 1-d types that need additional normalization to be compatible with DataFrame. _one_dimension_types = (int, float, str, bool, list, tuple) +_CSS = """ + <style> + .p-Widget.jp-OutputPrompt.jp-OutputArea-prompt:empty {{ + padding: 0; + border: 0; + }} + .p-Widget.jp-RenderedJavaScript.jp-mod-trusted.jp-OutputArea-output:empty {{ + padding: 0; + border: 0; + }} + </style>""" _DIVE_SCRIPT_TEMPLATE = """ - document.querySelector("#{display_id}").data = {jsonstr};""" -_DIVE_HTML_TEMPLATE = """ + try {{ + document.querySelector("#{display_id}").data = {jsonstr}; + }} catch (e) {{ + console.log("#{display_id} is not rendered yet."); + }}""" +_DIVE_HTML_TEMPLATE = _CSS + """ <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.3.3/webcomponents-lite.js"></script> <link rel="import" href="https://raw.githubusercontent.com/PAIR-code/facets/1.0.0/facets-dist/facets-jupyter.html"> <facets-dive sprite-image-width="{sprite_size}" sprite-image-height="{sprite_size}" id="{display_id}" height="600"></facets-dive> <script> document.querySelector("#{display_id}").data = {jsonstr}; </script>""" _OVERVIEW_SCRIPT_TEMPLATE = """ - document.querySelector("#{display_id}").protoInput = "{protostr}"; - """ -_OVERVIEW_HTML_TEMPLATE = """ + try {{ + document.querySelector("#{display_id}").protoInput = "{protostr}"; + }} catch (e) {{ + console.log("#{display_id} is not rendered yet."); + }}""" +_OVERVIEW_HTML_TEMPLATE = _CSS + """ <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.3.3/webcomponents-lite.js"></script> <link rel="import" href="https://raw.githubusercontent.com/PAIR-code/facets/1.0.0/facets-dist/facets-jupyter.html"> <facets-overview id="{display_id}"></facets-overview> <script> document.querySelector("#{display_id}").protoInput = "{protostr}"; Review comment: This is kernel (server) side rendering, the HTML is not in DOM yet, so the element must be there when the HTML gets rendered in browser. ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: us...@infra.apache.org With regards, Apache Git Services