search

nglviewer / nglview

Jupyter widget to interactively view molecular structures and trajectories
http://nglviewer.org/nglview/latest/
Other
822 stars 135 forks source link

Interaction of iwd.gui_style='ngl' with CSS when using jupyter-nbconvert --to html #988

Open gph82 opened 3 years ago

gph82 commented 3 years ago

Hello!

I'm having trouble sorting this one myself, and it might not be even an nglview issue but some jupyter notebook issue.

Version report at the bottom of the page.

Depending on using iwd.gui_style='ngl' or not, the appearance of the resulting html-page (when using jupyter-nbconvert --to html) changes in style (pics below). The notebook contains only the following cell:

import nglview
iwd = nglview.demo()
#iwd.gui_style = "ngl"
iwd

Steps are

  1. Restart kernel, execute the cell
  2. Menu Widget->Save Notebook Widget State
  3. Externally run jupyter-nbconvert --to html notebook.ipynb
  4. Open notebook.html in any browser
  5. Uncomment iwd.gui_style = "ngl"
  6. Repeat 1-4

Only happens in the html pages, the notebooks are okay: notebook.html without iwd.gui_style = "ngl": image notebook.html with iwd.gui_style = "ngl" image

In the second case, it first loads with white background, and then changes to dark (some seconds). Also, some fonts are rendered differently in the Markdown cells (not shown for clarity, can do so if needed)

I strongly suspect sth is going on with the CSS, but I'm way out of my depth here. Don't really get anywhere with F12 console and element-wise inspection.

Since I don't have access to other machines right now, I'd be happy if at least someone else can confirm.

Thanks!

Version report

hainm commented 3 years ago

hi @gph82 I don't know either. I will think about this. Sorry for my late reply. I don't know why github does not send notification to my email anymore. um.

hainm commented 3 years ago

I can reproduce the issue when view.gui_style = 'ngl'. And I think it's nglview issue due to this code:

https://github.com/nglviewer/nglview/blob/4bab5accedc9131b6f58dbf11b887ee2b323416a/nglview/theme/theme.py#L83-L85

gph82 commented 3 years ago

Hey, man, thanks a lot for looking into this, don't worry about the late reply :wink:

I would not have found this alone, I think, but I can't really follow why this is a bug...why is it picking the dark theme if it only uses light.css and main.css?