Skip to content
This repository has been archived by the owner on Jul 27, 2024. It is now read-only.

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

Open
markddesimone opened this issue Oct 5, 2020 · 8 comments
Open

Comments

@markddesimone
Copy link

markddesimone commented Oct 5, 2020

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

@jimbojw
Copy link
Contributor

jimbojw commented Oct 5, 2020

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?

@markddesimone
Copy link
Author

markddesimone commented Oct 5, 2020

updated comment below...

@markddesimone
Copy link
Author

markddesimone commented Oct 5, 2020

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:

  (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
Copy link
Author

@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
Copy link
Author

The huge zoom in and out icons were apparently fixed here:
#214
however on re-executing the cell they become huge. perhaps this is a clue to the error?

@jimbojw
Copy link
Contributor

jimbojw commented Oct 9, 2020

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.

@markddesimone
Copy link
Author

thank you

@pdpino
Copy link

pdpino commented Jan 21, 2021

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))

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants