[GitHub] [beam] KevinGG commented on a change in pull request #11020: [BEAM-7926] Update Data Visualization

[GitBox <gi...@apache.org>]

KevinGG commented on a change in pull request #11020: [BEAM-7926] Update Data Visualization
URL: https://github.com/apache/beam/pull/11020#discussion_r387267410
 
 

 ##########
 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.");
 
 Review comment:
   Facets widgets doesn't depend on the jQuery we setup.
   The JS also doesn't depend on the webcomponent (it's for HTML import).
   So there is no need to wait for `onload` of anything.
   This is to avoid the DOM change when the output area containing the widgets being updated gets deleted by the user in the notebook and some JS exceptions could be thrown out.
   `display_javascript` would pollute the output area in this scenario.

----------------------------------------------------------------
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:
users@infra.apache.org


With regards,
Apache Git Services