Jupyter notebook DOES NOT display facet-overview but can write output.html

[bhishanpdl]

I was following the notebook example:

https://colab.research.google.com/github/PAIR-code/facets/blob/master/colab_facets.ipynb

• The facets-dive part can be displayed and also can be saved as html in jupyter-notebook.

• The facets-overview part CAN NOT be displayed in jupyter-notebook but can be saved as html file. (NOTE: in google colaboratory it can be displayed but for some reasons it is not displayed in my computer).

Versions

Software | Version
-- | --
Python | 3.7.0 64bit [Clang 4.0.1 (tags/RELEASE_401/final)]
IPython | 6.5.0
OS | Darwin 18.6.0 x86_64 i386 64bit
numpy | 1.15.4
scipy | 1.1.0
pandas | 0.24.2
protobuf | 3.8.0
Sun Jul 07 15:45:20 2019 EDT

!jupyter notebook --version # 5.6.0

Code to test

• I have downloaded the repo "facets" to my local folder "~/Softwares/".
• I have installed bazel using homebrew and it is working.
• If I change sys.path.insert in google colaboratory it works there.
• This code

def facets_overview(df_train, df_test,output_html_path):

    # Add the path to the feature stats generation code.
    import sys
    sys.path.insert(0, '/Users/poudel/Softwares/facets/facets_overview/python/')

    # Create the feature stats for the datasets and stringify it.
    import base64
    from generic_feature_statistics_generator import GenericFeatureStatisticsGenerator

    gfsg = GenericFeatureStatisticsGenerator()
    proto = gfsg.ProtoFromDataFrames([{'name': 'train', 'table': df_train},
                                  {'name': 'test', 'table': df_test}])

    protostr = base64.b64encode(proto.SerializeToString()).decode("utf-8")

    # Display the facets overview visualization for this data
    from IPython.core.display import display, HTML

    HTML_TEMPLATE = """
          <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/master/facets-dist/facets-jupyter.html" >
          <facets-overview id="elem"></facets-overview>
          <script>
            document.querySelector("#elem").protoInput = "{protostr}";
          </script>"""
    html_str = HTML_TEMPLATE.format(protostr=protostr)
    html = HTML(html_str)

    display(html) # this works in google colab but not in my computer.
    
    # the saved output.html works fine in my local computer.
    with open(output_html_path,'w') as fo:
        fo.write(html_str)
    
facets_overview(train_data, test_data,'output_overview.html')
!open output_overview.html

How to display the html in jupyter notebook without creating output.html file?

[jameswex]

For jupyter (not colab) notebooks, restart your jupyter kernel and try a notebook with just Facets Overview by itself. I believe this may be an issue with displaying both widgets in a single Jupyter notebook.

[tarrade]

Same issue with JupyterLab (My own local instance). I can see the facet Dive in the notebook but not the facet Overview display.

Restarting the notebook didn't help.

BUT, cleaning the cell with facet Dive display solved the issue and I can now see the display of facet overview.

[sajid-r]

Facing the same issue, jupyter is unable to render both Dive and Overview together in local system. It renders only that one which it encounters first. Restarting the kernel doesn't help.

Is there any workaround to render both in the same notebook?

[jameswex]

The workaround is to display one, or both, inside an iframe so they don't interfere with each other. Note this issue doesn't happen in colab notebooks because colab already wraps each output cell in its own iframe, under the hood.

This code would display Facets Dive inside an iframe in its output cell: ` from IPython.core.display import display, HTML

jsonstr = train_data.to_json(orient='records') HTML_TEMPLATE = """ """ html = HTML_TEMPLATE.format(jsonstr=jsonstr) display(HTML(html)) `