facets icon indicating copy to clipboard operation
facets copied to clipboard

Published 20 hours ago • verified publisher icon PAIR-code

Binning | X-Axis selection is not rendering correctly as a dropdown

Open markddesimone opened this issue 4 years ago • 8 comments

Thanks for providing this fantastic tool! I am having trouble however with the rendering of the Binning axes etc. dropdowns

image

Here you can see they are not getting separated into individual lines. I can still awkwardly select them. This is in Jupyter Notebook using Chrome on ubuntu 18.04. The same issue for the others such as Binning | Y-Axis etc.

anything I can do here to correct this?

thank you

markddesimone avatar Oct 05 '20 19:10 markddesimone

This looks like an issue where one or more CSS styles have not loaded. I notice that the icons on the zoom menu buttons (lower left) are also missing.

If you're comfortable using the Chrome Developer Tools, could you check if there are there errors in the Console? Are there failing requests in the Networking tab?

jimbojw avatar Oct 05 '20 19:10 jimbojw

updated comment below...

markddesimone avatar Oct 05 '20 20:10 markddesimone

By restarting jupyter I have been able to get the cell rendered correctly. However if I re-execute the cell I get the issues decribed:

  • drop downs not working for Binning | X-Axis etc.
  • huge zoon in and out icons. image I have seen these errors in the console:
  • GET https://raw.githubusercontent.com/font-roboto/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2 net::ERR_ABORTED 400 (Bad Request)
  • HTML Imports is deprecated and has now been removed as of M80. See https://www.chromestatus.com/features/5144752345317376 and https://developers.google.com/web/updates/2019/07/web-components-time-to-upgrade for more details.
  • Error: attribute transform: Expected number, "translate(NaN,NaN) scale(N…".
  (anonymous) @ facets-jupyter.html-47.js:2
  each @ facets-jupyter.html-47.js:2
  attr @ facets-jupyter.html-47.js:2
  An @ facets-jupyter.html-130.js:20
  zoomed @ facets-jupyter.html-130.js:74
  apply @ facets-jupyter.html-47.js:2
  Ct @ facets-jupyter.html-47.js:2
  emit @ facets-jupyter.html-47.js:2
  zoom @ facets-jupyter.html-47.js:2
  (anonymous) @ facets-jupyter.html-47.js:2
  each @ facets-jupyter.html-47.js:2
  y.transform @ facets-jupyter.html-47.js:2
  call @ facets-jupyter.html-47.js:2
  fitToViewport @ facets-jupyter.html-130.js:78
  sp @ facets-jupyter.html-130.js:55
  yp @ facets-jupyter.html-130.js:65
  up @ facets-jupyter.html-130.js:56
  _updateColors @ facets-jupyter.html-130.js:90
  runObserverEffect @ facets-jupyter.html-16.js:197
  runEffectsForProperty @ facets-jupyter.html-16.js:142
  runEffects @ facets-jupyter.html-16.js:108
  _propertiesChanged @ facets-jupyter.html-16.js:1642
  _flushProperties @ facets-jupyter.html-13.js:327
  _flushProperties @ facets-jupyter.html-16.js:1490
  _invalidateProperties @ facets-jupyter.html-16.js:1462
  set @ facets-jupyter.html-16.js:1797
  _dataChange @ facets-jupyter.html-130.js:88
  (anonymous) @ facets-jupyter.html-1.js:16
  requestAnimationFrame (async)    
  window.requestAnimationFrame @ facets-jupyter.html-1.js:16
  _dataChange @ facets-jupyter.html-130.js:88
  runObserverEffect @ facets-jupyter.html-16.js:197
  runEffectsForProperty @ facets-jupyter.html-16.js:142
  runEffects @ facets-jupyter.html-16.js:108
  _propertiesChanged @ facets-jupyter.html-16.js:1642
  _flushProperties @ facets-jupyter.html-13.js:327
  _flushProperties @ facets-jupyter.html-16.js:1490
  ready @ facets-jupyter.html-16.js:1595
  ready @ facets-jupyter.html-19.js:590
  ready @ facets-jupyter.html-23.js:136
  ready @ facets-jupyter.html-31.js:194
  ready @ facets-jupyter.html-32.js:336
  _enableProperties @ facets-jupyter.html-13.js:307
  connectedCallback @ facets-jupyter.html-18.js:204
  connectedCallback @ facets-jupyter.html-19.js:576
  connectedCallback @ facets-jupyter.html-23.js:146
  connectedCallback @ facets-jupyter.html-31.js:91
  _attachDom @ facets-jupyter.html-19.js:632
  _readyClients @ facets-jupyter.html-19.js:605
  _flushClients @ facets-jupyter.html-16.js:1504
  _propertiesChanged @ facets-jupyter.html-16.js:1638
  _flushProperties @ facets-jupyter.html-13.js:327
  _flushProperties @ facets-jupyter.html-16.js:1490
  ready @ facets-jupyter.html-16.js:1595
  ready @ facets-jupyter.html-19.js:590
  ready @ facets-jupyter.html-23.js:136
  ready @ facets-jupyter.html-31.js:194
  ready @ facets-jupyter.html-32.js:336
  _enableProperties @ facets-jupyter.html-13.js:307
  connectedCallback @ facets-jupyter.html-18.js:204
  connectedCallback @ facets-jupyter.html-19.js:576
  connectedCallback @ facets-jupyter.html-23.js:146
  connectedCallback @ facets-jupyter.html-31.js:91
  window.Polymer._polymerFn @ facets-jupyter.html-33.js:32
  window.Polymer @ facets-jupyter.html-4.js:20
  (anonymous) @ facets-jupyter.html-139.js:2

markddesimone avatar Oct 05 '20 20:10 markddesimone

@jimbojw Do you have any feedback on how to progress? Unfortunately I have to completely restart jupyter notebook every time I want to execute the cell. thank you

markddesimone avatar Oct 07 '20 17:10 markddesimone

The huge zoom in and out icons were apparently fixed here: https://github.com/PAIR-code/facets/issues/214 however on re-executing the cell they become huge. perhaps this is a clue to the error?

markddesimone avatar Oct 08 '20 23:10 markddesimone

Sorry for the delay, and thanks for the additional information. I seem to recall seeing the huge-on-re-execute flow earlier when fixing #214. This definitely feels like an issue with some combination of the WebComponents Polyfill and the notebook environment. I'll have to dig into it.

jimbojw avatar Oct 09 '20 20:10 jimbojw

thank you

markddesimone avatar Oct 09 '20 21:10 markddesimone

Are there any updates on this?

I'm having the same problem with the dropdowns, and I also see the Error: attribute transform: Expected number, "translate(NaN,NaN) scale(N…". error on the console.

image

I was also having the huge-zoom problem, but using the facets-jupyter.html from the master branch fixed it. (I had to: shutdown the notebook, restart the jupyter process, change the link URL to https://raw.githubusercontent.com/PAIR-code/facets/master/facets-dist/facets-jupyter.html, and only then it would be fixed. Apparently jupyter or the browser save HTML links on some cache, so the shutdown and restart were needed).

I'm using Chrome 88.0.4324.96, ubuntu 16.04, running Facets Dive on a jupyter notebook. Also seeing it in Brave browser version 1.19.86 (Chromium v88.0.4324.96).

This is the python snippet from my notebook:

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-dive
        sprite-image-width="{sprite_w}"
        sprite-image-height="{sprite_h}"
        id="elem"
        height="600"
        atlas-url="{atlas_fpath}">
    </facets-dive>
    <script>
      document.querySelector("#elem").data = {jsonstr};
    </script>
"""

# Load the json dataset and the sprite_size into the template
html = HTML_TEMPLATE.format(jsonstr=json_records,
                            sprite_h=target_h,
                            sprite_w=target_w,
                            atlas_fpath=ATLAS_FPATH,
                           )

# Display the template
display(HTML(html))

pdpino avatar Jan 21 '21 23:01 pdpino