PAIR-code/facets

Issue with the dispaly of facet overview with Jupyter Lab black background

tarrade opened this issue · 2 comments

tarrade commented

Hi there,

I am using python 3.6.9 and facets-overview==1.0.0. I am using JupyterLab 1.1.4. My issue is that the facet overview display seems to have some transparent background and grey axis so it is very difficult to see something

image

I don't have with facet dive:
image

Is there an easy trick like defining white background in the HTML_TEMPLATE ?

Thanks

jameswex commented

you could try adding a div element before the facets-overview one that has position absolute, top: 0 , bottom: 0, left: 0, right: 0, and background color of white. I can't give it a shot myself today. Let me know if you can try that out.

  • 👍1
tarrade commented

great idea, in fact as you can see above some part of the text is black and the rest white. I had to fix both the background color and the font color:


from IPython.core.display import display, HTML
HTML_TEMPLATE = """<div style="background-color:lightgrey">
      <font color="black">
      <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>
       </font>
       </div>"""
html = HTML_TEMPLATE.format(protostr=protostr)
display(HTML(html))

image

This is what I wanted. Thanks for the hint