issue rendering vuetify components in jdaviz about voila-embed-vuetify HOT 21 CLOSED

@mariobuikhuizen Pinging again. Do you have thoughts on what could be the issue here?

from voila-embed-vuetify.

Sorry, I missed this issue. I can't think of anything that would cause this. Do you have a minimal example that reproduces this issue that I can run?

from voila-embed-vuetify.

No worries. I don't offhand having a separable example. I will try to create one and get back to you.

from voila-embed-vuetify.

@mariobuikhuizen Ok I have an example set up here https://github.com/havok2063/standalone_jdaviz, see the frontend subdirectory, and the "Vue Component Example" section of the readme. Although I am getting additional errors in the console regarding vuetify so I couldn't exactly reproduce the above display errors.

from voila-embed-vuetify.

Thanks @havok2063, I've looked into it for a while, but haven't found the cause of problem yet.

from voila-embed-vuetify.

Thanks @mariobuikhuizen . I'll keep poking at it as well. Were you able to reproduce the above problem with my standalone example?

from voila-embed-vuetify.

@mariobuikhuizen I've pushed some updates to my standalone_jdaviz repo that get the frontend example working, but Jdaviz does not render correctly. See attached screenshot

I have ipyvuetify=1.8.1 installed. It looks like that is still using your custom vuetify=2.2.26.rc. Is this an issue between the frontend using vuetify=2.6.3 but Jdaviz using an older vuetify? I tried downgrading with yarn add [email protected] but that didn't change anything.

I also tried upgrading to voila=0.3.2 but I get the following traceback in voila below. Currently I have to use voila=0.2.16.

ERROR:tornado.application:Uncaught exception in write_error
Traceback (most recent call last):
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/tornado/web.py", line 1704, in _execute
    result = await result
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/jupyter_server/services/kernels/handlers.py", line 376, in get
    await super(ZMQChannelsHandler, self).get(kernel_id=kernel_id)
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/jupyter_server/base/zmqhandlers.py", line 286, in get
    await res
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/jupyter_server/services/kernels/handlers.py", line 349, in pre_get
    kernel = self.kernel_manager.get_kernel(self.kernel_id)
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/jupyter_client/multikernelmanager.py", line 329, in get_kernel
    self._check_kernel_id(kernel_id)
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/jupyter_server/services/kernels/kernelmanager.py", line 490, in _check_kernel_id
    raise web.HTTPError(404, "Kernel does not exist: %s" % kernel_id)
tornado.web.HTTPError: HTTP 404: Not Found (Kernel does not exist: ab8c2f16-d594-4359-94b0-9b50d82906e1)

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/tornado/web.py", line 1217, in send_error
    self.write_error(status_code, **kwargs)
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/jupyter_server/base/handlers.py", line 590, in write_error
    html = self.render_template("%s.html" % status_code, **ns)
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/jupyter_server/base/handlers.py", line 521, in render_template
    return template.render(**ns)
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/jinja2/environment.py", line 1291, in render
    self.environment.handle_exception()
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/jinja2/environment.py", line 925, in handle_exception
    raise rewrite_traceback_stack(source=source)
  File "/Users/bcherinka/anaconda3/envs/voila-mast/share/jupyter/voila/templates/base/404.html", line 1, in top-level template code
    {% extends "error.html" %}
  File "/Users/bcherinka/anaconda3/envs/voila-mast/share/jupyter/voila/templates/base/error.html", line 1, in top-level template code
    {% extends "page.html" %}
  File "/Users/bcherinka/anaconda3/envs/voila-mast/share/jupyter/voila/templates/lab/page.html", line 1, in top-level template code
    {%- extends 'voila/templates/base/page.html' -%}
  File "/Users/bcherinka/anaconda3/envs/voila-mast/share/jupyter/voila/templates/base/page.html", line 13, in top-level template code
    {% block stylesheets %}
  File "/Users/bcherinka/anaconda3/envs/voila-mast/share/jupyter/voila/templates/lab/page.html", line 11, in block 'stylesheets'
    {{ include_css("static/index.css") }}
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/jinja2/utils.py", line 84, in from_obj
    if hasattr(obj, "jinja_pass_arg"):
jinja2.exceptions.UndefinedError: 'include_css' is undefined
WARNING:tornado.access:404 GET /api/kernels/ab8c2f16-d594-4359-94b0-9b50d82906e1/channels?session_id=2c5faaa5-32b2-4b0a-93d2-1f7c33c3ee87 (::1) 7.86ms

from voila-embed-vuetify.

Were you able to reproduce the above problem with my standalone example?

No, I had a problem with no components showing at all and console errors about not finding those components. With the latest changes, it now works.

I have ipyvuetify=1.8.1 installed. It looks like that is still using your custom vuetify=2.2.26.rc. Is this an issue between the frontend using vuetify=2.6.3 but Jdaviz using an older vuetify?

It should be compatible since it's a minor version difference. I only see a few deprecation warnings when using 2.6.3.

I also tried upgrading to voila=0.3.2 but I get the following traceback in voila below. Currently I have to use voila=0.2.16.

Version 0.3.1 is the last version that works for me. I can take a look to see what goes wrong when using 0.3.2.

from voila-embed-vuetify.

Voila 0.3.1 doesn't work for me. I get an "invalid syntax" error inside the hotpot-kernel voila add-on.

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/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/tornado/web.py", line 1704, in _execute
    result = await result
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/voila/handler.py", line 191, in get
    async for html in gen:
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/voila/handler.py", line 160, in get_generator
    env=kernel_env,
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/nbclient/util.py", line 96, in ensure_async
    result = await obj
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/hotpot_km/pooled.py", line 134, in start_kernel
    kernel_id = await self._pop_pooled_kernel(kernel_name, kwargs)
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/hotpot_km/pooled.py", line 125, in _pop_pooled_kernel
    return await self._update_kernel(kernel_name, fut, kwargs)
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/hotpot_km/pooled.py", line 223, in _update_kernel
    await client.execute(code)
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/hotpot_km/client_helper.py", line 313, in execute
    self._check_raise_for_error(exec_reply)
  File "/Users/bcherinka/anaconda3/envs/voila-mast/lib/python3.7/site-packages/hotpot_km/client_helper.py", line 405, in _check_raise_for_error
    raise ExecutionError.from_msg(exec_reply_content)
hotpot_km.client_helper.ExecutionError:   File "/var/folders/js/s2zfzbv16019vjh0dft_l_w0000263/T/ipykernel_42444/3764529923.py", line 2

from voila-embed-vuetify.

But this might mean I just need to switch to using this voila-dashboards/voila#936 for voila > 0.3. This looks like a more robust version.

from voila-embed-vuetify.

How odd. I'm running with Voila 0.3.1 and it's working. Added in mario's MR to standalone-jdaviz and I see as attached

from voila-embed-vuetify.

You might not have the hotpot-km package for voila installed. This is a separate package to create a pool of kernels to increase voila efficiency on notebook runtime. We are seeing a bunch of Vue/Vuetify console errors though. I removed vuetify and re-installed 2.2.26 and I am still seeing the same errors. I don't know how much of these errors are just warnings and do not affect vuetify functionality?

from voila-embed-vuetify.

We are seeing a bunch of Vue/Vuetify console errors though.

These errors and warnings are also visible in the notebook version, when using ipyvue in dev-mode. So it's not specific to the standalone version.

from voila-embed-vuetify.

Ok, we're still having a problem where it looks like Vuetify itself isn't activating or rendering correctly inside the voila Jdaviz ipywidget compared to vuetify in the front-end. None of the normal vuetify components are rendering correctly in the widget. The standalone_jdaviz example does not reproduce the problem we are seeing in our dev and prod environments.

from voila-embed-vuetify.

It's a bit hard to debug without access. Can you send screenshots of the console and network tabs of the browsers development console on Slack? Maybe I can spot an issue.

from voila-embed-vuetify.

Yeah I understand. It's a bit strange to me why the standalone_jdaviz example works ok but our main environment does not. Here are some screenshots of the console and network tabs, along with some examples of vuetify not rendering correctly.

from voila-embed-vuetify.

@havok2063 problem solved: it was the vuetify import

from voila-embed-vuetify.

For context for @mariobuikhuizen and posterity, we identified a problem with how we were importing vuetify in our Vue project. We needed to adjust the line import Vuetify from 'vuetify/lib/framework' to import Vuetify from 'vuetify' in our src/plugins/vuetify.js file. This fixed this particular Vuetify issue we were having. The odd thing is that the working standalone_jdaviz example has the same import statement. So maybe there were differences in how each project installed vuetify?

The problem is technically solved but not understood.

from voila-embed-vuetify.

I think I used the 'vue cli install' chapter of https://vuetifyjs.com/en/getting-started/installation/, but how that creates a project might also change over time.

Using the lib version (default in cli) enables https://vuetifyjs.com/en/features/treeshaking/ and together with code-splitting this would make other pages which don't have jdaviz on it faster.

from voila-embed-vuetify.

I did a lot of mucking around when setting up the new project. Looking back at it, I might have simply done a yarn add vuetify instead of using vue add vuetify. I'll check out what it would take to switch that over...

from voila-embed-vuetify.

Closing this, as I think this is resolved.

from voila-embed-vuetify.