Browser & styling problems

[jarrah42]

Hi,

I'm having some issues with embedding the visualizer in Galaxy and was hoping you might have some ideas. Any thoughts or suggestions appreciated!

The first problem is that I'm getting different results for Safari and Chrome for the heatmap viewer. Using Safari, it looks identical to your demo. However for Chrome it looks like this screenshot. It seems like some data is missing, but since it's the same frontend and backend it seems to be some issue with the browser that is causing the problem.

The second problem is that I see some minor styling differences between your demo and Galaxy for both Safari and Chrome. In particular there is a grey background that appears when mousing over a control as shown in the screenshot. I'm importing @h5web/app/dist/styles.css in my component. I've also tried importing normalize.css but it doesn't make any difference.

[axelboc]

I think the first issue is just a matter of changing the scale of the color map from log back to linear. This setting is saved in the browser, so maybe you've changed the scale in Chrome at some point?

The second issue is definitely a bug, we'll fix it asap!

[jarrah42]

Ah thank you! The setting seems to be saved across invocations of galaxy and even if I clear the browser cache, so it was confusing!

[axelboc]

Yeah, it's saved to localStorage, so you need to clear your browser's "saved websites data" (or equivalent term).

[axelboc]

The first issue is most likely caused by Galaxy's own styles. This is a tough one to fix "cleanly" due to the way CSS works: you have to override each problematic style with a more specific selector but not too specific that it breaks other H5Web styles...

For instance, for the gray background when hovering buttons, Galaxy probably has a style rule that looks like this: button:hover { background-color: ... }. A good override for H5Web might be .btnClean:hover { background-color: transparent } (where btnClean is the base class for buttons in H5Web), but you have to make sure that this override comes before H5Web's styles; otherwise, you risk overriding other hover rules such as ._btn_1rdn9_17:hover { background-color: var(--primary-light); }, which is used in the explorer.

There is one alternative solution, however, which is to render the viewer inside an iframe. Typically this involves serving the app at a static URL and then embedding it with <iframe src="..."></iframe>. However, after some research, it seems to be possible to use a portal to render the app directly inside an iframe with React: https://blog.logrocket.com/best-practices-react-iframes/

If this technique works, it would be perfect for the jupyterlab-h5web extension as well! 😱 @loichuder