[ https://issues.apache.org/jira/browse/BEAM-7926?focusedWorklogId=397185&page=com.atlassian.jira.plugin.system.issuetabpanels:worklog-tabpanel#worklog-397185 ]
ASF GitHub Bot logged work on BEAM-7926: ---------------------------------------- Author: ASF GitHub Bot Created on: 04/Mar/20 02:26 Start Date: 04/Mar/20 02:26 Worklog Time Spent: 10m Work Description: KevinGG commented on 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: us...@infra.apache.org Issue Time Tracking ------------------- Worklog Id: (was: 397185) Time Spent: 53.5h (was: 53h 20m) > Show PCollection with Interactive Beam in a data-centric user flow > ------------------------------------------------------------------ > > Key: BEAM-7926 > URL: https://issues.apache.org/jira/browse/BEAM-7926 > Project: Beam > Issue Type: New Feature > Components: runner-py-interactive > Reporter: Ning Kang > Assignee: Ning Kang > Priority: Major > Time Spent: 53.5h > Remaining Estimate: 0h > > Support auto plotting / charting of materialized data of a given PCollection > with Interactive Beam. > Say an Interactive Beam pipeline defined as > > {code:java} > p = beam.Pipeline(InteractiveRunner()) > pcoll = p | 'Transform' >> transform() > pcoll2 = ... > pcoll3 = ...{code} > The use can call a single function and get auto-magical charting of the data. > e.g., > {code:java} > show(pcoll, pcoll2) > {code} > Throughout the process, a pipeline fragment is built to include only > transforms necessary to produce the desired pcolls (pcoll and pcoll2) and > execute that fragment. > This makes the Interactive Beam user flow data-centric. > > Detailed > [design|https://docs.google.com/document/d/1DYWrT6GL_qDCXhRMoxpjinlVAfHeVilK5Mtf8gO6zxQ/edit#heading=h.v6k2o3roarzz]. -- This message was sent by Atlassian Jira (v8.3.4#803005)