KevinGG commented on a change in pull request #11020: [BEAM-7926] Update Data
Visualization
URL: https://github.com/apache/beam/pull/11020#discussion_r387414898
##########
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:
Sorry, let me put it in an example.
The HTML+JS template is formatted into an HTML obj and gets displayed into
the frontend. Inside this little piece of HTML, the
`document.querySelector("#{display_id}")` will always return such queried
element because the element is created within the HTML itself.
Then this little piece of HTML is embedded in the notebook's DOM. It resides
in the output area of a cell in the notebook.
If the user "clears all outputs" from the notebook, the HTML is deleted from
the DOM.
Now, `document.querySelector("#{display_id}")` will return `undefined`.
The user will see `Javascript error` being populated in the output area that
just got cleared.
The output continuously increases at the `show` interval (1 second) until
the visualization is done.
----------------------------------------------------------------
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:
[email protected]
With regards,
Apache Git Services
