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

[markddesimone]

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

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]

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]

updated comment below...

[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.
  
  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]

@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]

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]

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]

thank you

[pdpino]

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.

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