css overrides from jdaviz/voila

[havok2063]

For web embeds, since jdaviz and voila are inserted last, its CSS always overrides existing CSS in the main web, where it conflicts. Attempts to inject fixes on our end have sometimes resulted in messed up jdaviz components and/or layouts. It's unclear if the problem is underlying CSS or Vuetify on our end or within jdaviz itself. Jdaviz does appear to be hardcoding some things, e.g. the height of the application. For example, see https://github.com/spacetelescope/jdaviz/blob/main/jdaviz/app.vue#L14-L25.

You can go here, https://z.mastdev.stsci.edu/object.html?survey=candels&objid=1000006666&spectra, and click the Spectra tab. You can also go here https://mastdev.stsci.edu/viz/jwst/spectra?uri=mast:JWST/product/jw00736-o039_t001_miri_ch3-medium_s3d.fits. I've attached screenshots of the issues.

There are additional CSS issues coming from Voila itself, captured in https://github.com/mariobuikhuizen/voila-embed/issues/17. This issue revolves around css applied to the global html body element.

Screenshots: The application being injected into a new row when it used to be contained in an adjacent column next to the sidebar.

An unknown 48-pixel top padding inserted.

The application height is fixed and cannot be modified.

[havok2063]

It seems the Vuetify v-content component is deprecated in favor of v-main. See https://vuetifyjs.com/en/features/layouts/#usage. When we switched to v-main in our z-mast service, it fixed the 48 pixel padding issue. However, replacing the deprecated component in jdaviz's app.vue and our jdaviz-mast service did not fix other issues. And it produces a new issue with the tool icon being moved into the app header. I think we should work to update to current Vuetify components and make the layout / css more flexible to upstream/downstream configuration. At the very least we want web users to have control over how jdaviz gets displayed on the page.

[havok2063]

@rosteen @mariobuikhuizen I've attempted to create a standalone example site that somewhat captures some of the CSS problems our developers are having. I've created three example index.html files. index_simple.html is just a very simple embed. index_jwst.html is an example of our current jdaviz-MAST site for JWST, which is a somewhat clean Vue+Vuetify only page. index_zmast.html is an example of a real ugly jumble where most of the site is in standard html / bootstrap / jquery but the spectra part is the Vue/Vuetify. I've tried to capture what the original sites are like but it's missing some css/js since I can't easily recreate the full sites. Each site loads the jdaviz_test.ipynb notebook. Let me know if you have any troubles.

To view each page:

1. Extract the zip file
2. cd into the example subdirectory
3. copy one of the example index files to index.html, e.g. cp index_simple.html index.html
4. run npx serve to spin up a local dev site
5. in a separate terminal window, navigate to the extracted directory where jdaviz_test.ipynb resides
6. start the voila server with voila --no-browser --template=embed --enable_nbextensions=True --Voila.tornado_settings="{'allow_origin': 'http://localhost:5000'}" --port=8000
7. navigate to the site in the browser.

jdaviz_embed.zip

[havok2063]

Here is an update from one of the ASB developers: "I am able to prevent the notebook from being pushed down to the bottom of the page. However there is a gap on the right side, and I am unable to adjust the width so that the notebook fills the full width of the frame. See attached.

I also tried to reduce the height to make the notebook fit within the frame. I tried a lot of CSS, bootstrap and Vue changes, but I was not able to reduce the height. For example, the following CSS has no effect: "

.notebook-container {
  height: 300px !important;
  width: 300px !important;
}
.fill-height {
  height: 300px !important;
}  

The current fix to get the notebook to render in the correct row was to change line 111 in the index_jwst.html file from a div into <v-col sm="12" md="7" lg="8" class="notebook-container">. It seems like trying to force-fix certain CSS issues causes other downstream CSS issues to occur that we have even less control over.

[javerbukh]

Followed the directions to spin up the npx server and I am stuck on the following screen. I am on the VPN. Do I need to do something else? @havok2063

[havok2063]

@javerbukh If you right click the browser and open up the inspector or developer window, what does the console output say?

[havok2063]

@javerbukh Oh I forgot some critical instructions. In a separate terminal, you need to start up an instance of the Voila server. Navigate to the directory where the jdaviz_test notebook lives and run the following command voila --no-browser --template=embed --enable_nbextensions=True --Voila.tornado_settings="{'allow_origin': 'http://localhost:5000'}" --port=8000. When you load the page, the notebook should load. I'll also edit the above instructions.

[javerbukh]

Does index.html need to be in the same directory as jdaviz_test.ipynb?

ERROR:tornado.application:Uncaught exception GET /voila/render/jdaviz_test.ipynb (::1)
HTTPServerRequest(protocol='http', host='localhost:8000', method='GET', uri='/voila/render/jdaviz_test.ipynb', version='HTTP/1.1', remote_ip='::1')
Traceback (most recent call last):
  File "/Users/javerbukh/anaconda3/envs/jdaviz-1.1/lib/python3.8/site-packages/tornado/web.py", line 1704, in _execute
    result = await result
  File "/Users/javerbukh/anaconda3/envs/jdaviz-1.1/lib/python3.8/site-packages/voila/handler.py", line 154, in get
    async for html_snippet, resources in self.exporter.generate_from_notebook_node(notebook, resources=resources, extra_context=extra_context):
  File "/Users/javerbukh/anaconda3/envs/jdaviz-1.1/lib/python3.8/site-packages/voila/exporter.py", line 100, in generate_from_notebook_node
    async for output in self.template.generate_async(nb=nb_copy, resources=resources, **extra_context, static_url=self.static_url):
  File "/Users/javerbukh/anaconda3/envs/jdaviz-1.1/lib/python3.8/site-packages/nbconvert/exporters/templateexporter.py", line 148, in template
    self._template_cached = self._load_template()
  File "/Users/javerbukh/anaconda3/envs/jdaviz-1.1/lib/python3.8/site-packages/nbconvert/exporters/templateexporter.py", line 355, in _load_template
    return self.environment.get_template(template_file)
  File "/Users/javerbukh/anaconda3/envs/jdaviz-1.1/lib/python3.8/site-packages/jinja2/environment.py", line 883, in get_template
    return self._load_template(name, self.make_globals(globals))
  File "/Users/javerbukh/anaconda3/envs/jdaviz-1.1/lib/python3.8/site-packages/jinja2/environment.py", line 857, in _load_template
    template = self.loader.load(self, name, globals)
  File "/Users/javerbukh/anaconda3/envs/jdaviz-1.1/lib/python3.8/site-packages/jinja2/loaders.py", line 429, in load
    raise TemplateNotFound(name)
jinja2.exceptions.TemplateNotFound: index.html.j2
ERROR:tornado.access:500 GET /voila/render/jdaviz_test.ipynb (::1) 96.31ms

[javerbukh]

With index.html (as index_jwst.html) in standalone/ and running npx and voila from that directory in two different terminals, I get the following view:

[havok2063]

index.html needs to be in the example subdirectory. And npx should be run within the example directory. The notebook should be in the top level directory and the voila server should be started there. Can you check the console in the development window for any errors?

[javerbukh]

I noticed that voila is using --port=8000 and npx is pointing me to http://localhost:5000, not sure if that is causing a problem. Here is the console output:

[havok2063]

The ports are ok. Voila should be on port 8000 and the front-end on 5000. What version of voila are you using? I'm on 0.2.7. I also run both terminals in my conda environment where I have jdaviz and voila installed. If you navigate to http:/localhost:8000 do you see a voila dashboard with the notebook in it? If you click it, it should render into a JSON blob rather than a notebook. It looks like it's having trouble finding voila css files and there's an issue with notebook server path. I included the necessary voila-embed.js file in the zip but just to be safe, you could try installing https://github.com/mariobuikhuizen/voila-embed.

My console looks like

[javerbukh]

I am on voila 0.2.7 as well. To the best of my knowledge I have everything set up correctly and am following the order in your previous comment. I have two screenshots attached, one is at localhost:8000 and the second is when I click on jdaviz_test.ipynb. I'll try reinstalling voila-embed and update after I follow the same process.

[havok2063]

Hmm, so the voila server is starting ok at least. Here is a screenshot of what you should see when you click on the notebook.

When you try to access the notebook, is there any error output in the terminal where the Voila server is running? Another thing you can try is to run the Voila command without the template command. E.g. voila --no-browser --enable_nbextensions=True --Voila.tornado_settings="{'allow_origin': 'http://localhost:5000'}" --port=8000. If you click on the notebook, it should attempt to render the notebook rather than the JSON blob.

Another thought I had is maybe if you have a Voila configuration file that is taking precedence over these settings. Try voila --no-browser --template=embed --enable_nbextensions=True --Voila.tornado_settings allow_origin='http://localhost:5000' --port=8000 -- Voila.show_config=True. This should print out the used configuration, and you can check that some of the settings match.

@mariobuikhuizen might have some ideas on what could be going wrong here.

[javerbukh]

Running the command with the template flag produces the following error:

ERROR:tornado.application:Uncaught exception GET /voila/render/jdaviz_test.ipynb (::1)
HTTPServerRequest(protocol='http', host='localhost:8000', method='GET', uri='/voila/render/jdaviz_test.ipynb', version='HTTP/1.1', remote_ip='::1')
Traceback (most recent call last):
  File "/Users/javerbukh/anaconda3/envs/jdaviz-test-dep/lib/python3.8/site-packages/tornado/web.py", line 1704, in _execute
    result = await result
  File "/Users/javerbukh/anaconda3/envs/jdaviz-test-dep/lib/python3.8/site-packages/voila/handler.py", line 154, in get
    async for html_snippet, resources in self.exporter.generate_from_notebook_node(notebook, resources=resources, extra_context=extra_context):
  File "/Users/javerbukh/anaconda3/envs/jdaviz-test-dep/lib/python3.8/site-packages/voila/exporter.py", line 100, in generate_from_notebook_node
    async for output in self.template.generate_async(nb=nb_copy, resources=resources, **extra_context, static_url=self.static_url):
  File "/Users/javerbukh/anaconda3/envs/jdaviz-test-dep/lib/python3.8/site-packages/nbconvert/exporters/templateexporter.py", line 148, in template
    self._template_cached = self._load_template()
  File "/Users/javerbukh/anaconda3/envs/jdaviz-test-dep/lib/python3.8/site-packages/nbconvert/exporters/templateexporter.py", line 355, in _load_template
    return self.environment.get_template(template_file)
  File "/Users/javerbukh/anaconda3/envs/jdaviz-test-dep/lib/python3.8/site-packages/jinja2/environment.py", line 883, in get_template
    return self._load_template(name, self.make_globals(globals))
  File "/Users/javerbukh/anaconda3/envs/jdaviz-test-dep/lib/python3.8/site-packages/jinja2/environment.py", line 857, in _load_template
    template = self.loader.load(self, name, globals)
  File "/Users/javerbukh/anaconda3/envs/jdaviz-test-dep/lib/python3.8/site-packages/jinja2/loaders.py", line 429, in load
    raise TemplateNotFound(name)
jinja2.exceptions.TemplateNotFound: index.html.j2
ERROR:tornado.access:500 GET /voila/render/jdaviz_test.ipynb (::1) 59.98ms
[Voila] WARNING | Replacing stale connection: 7384ead7-a9ea-4650-93a2-0a3df7442610:fb924468-ccc7-4a2d-8701-2510c307718d

Running the first command (without template) did in fact get me further in the process. There were no errors in the terminal window with that command and I saw Running and Executing x of 8 show up before getting the following view:

Running the second command gave the following output:

  .open_browser = False
  .port = 8000
  .tornado_settings = {'allow_origin': 'http://localhost:5000'}
VoilaConfiguration
  .enable_nbextensions = True
  .template = 'embed'

[havok2063]

Ok we're getting closer. Maybe there's something missing regarding how I set up the standalone site. That index file should be in share/jupyter/voila/templates/embed/ in the standalone site. I suspect that file isn't getting used on my system and instead it's getting pulled from somewhere else on my system. I would try installing voila-embed into the environment, and see if that resolves the issue.

[javerbukh]

Installing voila-embed into the environment worked! Thank you for the help!

[javerbukh]

I am able to get jdaviz to render in the correct row but anytime I hover over the viewer part of the app, my browser automatically scrolls down to make the viewer full size (height-wise). I'm looking in app.vue and I am not able to figure out why this is happening. Any ideas @mariobuikhuizen ?

[rosteen]

Can this be closed now that we're using Solara instead of Voila?

[havok2063]

There are still css fixes that need to be applied to resolve issues between Solara and Jdaviz. It would be great to have a permanent solution to that in place on the Jdaviz side, or at least document the fixes/gotchas. MAST is still using Voila + Jdaviz at the moment as well, which has similar css fixes that need to be applied. And I think there will still be css conflicts between Jdaviz and any service using Vuetify with custom styling that embeds Jdaviz. All that said, this ticket is old and not quite applicable anymore. I'd be ok closing it.