Voila: QGrid widget breaks Voila

[DougRzz]

Hi,

QGrid does not seem to work in Voila. I can't see any error messages in the console. QGrid seems to prevent all widgets from being rendered. Has anyone found this issue with qgrid/Voila?

Example......

import numpy as np
import pandas as pd
import qgrid


np.random.seed(0)
n = 200
x = np.linspace(0.0, 10.0, n)
y = np.cumsum(np.random.randn(n))
df = pd.DataFrame({'x': x, 'y':y})

tableOut = qgrid.QgridWidget(df=df, show_toolbar=True)
tableOut

In Notebook:

In Voila

[candronikos]

That's my exact issue. I refer to it here #33.

I got it to work on my machine but I'm unable to produce the same result on the server.

[konwiddak]

I was able to workaround this issue by editing "pythonenv"sharejupyternbextensionsqgridindex.js

Changed:
define(["@jupyter-widgets/base","base/js/dialog"], function(__WEBPACK_EXTERNAL_MODULE_139__, __WEBPA...........

To:

define(["@jupyter-widgets/base"], function(__WEBPACK_EXTERNAL_MODULE_139__, __WEBPA

Perhaps this helps highlight where the error is originating?

[SylvainCorlay]

Yes! thank you @konwiddak. It appears that qgrid makes use of some of the classic notebook JavaScript which is not something that we anticipated in voila. I don't see a simple fix on voila's side. Maybe this is something that could be fixed with qgrid.

[DougRzz]

FYI QGrid works well in ipywidgets-server . But with this modification, QGrid works better in Voila because the rows above 100 weren't rendering correctly Ipywidgets-server.

QGrid is quite a popular tool (1000+ stars but Ipysheet might eat into that popularity :D) but maintenance seems to be stopped. Maybe a PR should be submitted, which is unlikely to be merged and we can install that PR using git. Alternatively, fork it. @konwiddak :)

[SylvainCorlay]

@DougRzz the difference is that the ipywidgets-server makes use of the unpkg bundle which probably does not include that classic notebook javascript use, while voila actually looks up for installed nbextensions.

[candronikos]

I made the change as per @konwiddak 's suggestion and see no difference.

I'm operating in a fresh environment called 'dashboard' where I installed all dependencies yesterday.

Do you have to do anything else before the changes come into effect?

[DougRzz]

@candronikos it worked for me. I only changed that 1 line in the qgrid index.js.

[candronikos]

@DougRzz Did a fresh install and changed the file in the root environment C:\Users\{USER}\AppData\Local\Continuum\anaconda3\share\jupyter\nbextensions\qgrid\index.js Then it worked.

Thank you for the workaround, @konwiddak.

[timkpaine]

@DougRzz can you check if this works with @maartenbreddels 's changes https://github.com/QuantStack/voila/pull/97

[DougRzz]

Sorry for the late reply. I had a few issues on 0.0.9 which weren't related to qgrid (similar to https://github.com/QuantStack/voila/issues/127)

But can now confirm Qgrid is fixed and works well on Voila v0.0.10. Thanks!!

[DentonGentry]

qgrid 1.1.1 isn't working with Voila v0.0.10 for me, with the same symptoms as described in this bug: it blocks all rendering after the qgrid tries to display.

[jtpio]

@DentonGentry is it still the case with voila 0.1.8?

[DentonGentry]

I was installing using "conda install -c conda-forge voila", which installs 0.0.10, and I hadn't realized there were releases since then.

After uninstalling 0.0.10 from conda and using pip to install 0.1.8: only the Markdown renders, I'm not sure my Python code is running at all. I'll try to sort out what is happening.

[jtpio]

And by running the update command for conda? conda update -c conda-forge voila

Otherwise it's also possible to install a specific version using: conda install -c conda-forge voila=0.1.8

[timkpaine]

for anyone still facing issues, i was able to fix this by modifying jupyter/nbextensions/qgrid/index.js to only define @jupyter-widgets/base and not base/js/dialog (e.g. deleting the second element in the first argument of define) as a workaround.

[jeffyjefflabs]

Qgrid was not working for us on an offline corporate network, so I tried a number of scenarios. In short, qgrid only worked out of the box with enable_nbextensions=False and an active internet connection.

In more detail, here's everything I tried:

• No changes, default enable_nbextensions=False. This only works online, because of Voila's ability to fallback to unpkg.com.
• Changed enable_nbextensions=True. This didn't work online or offline. Not sure why it didn't work online -- it did try to fallback, but the widget still didn't display. Maybe trying to load the local copy of qgrid broke things beyond repair, or there was a conflict with some other nbextension?
• With enable_nbextensions=True, patch qgrid/index.js as described in this thread here and here. This works both online and offline.
• With enable_nbextensions=True, patch Voila as in #75 (also in voila-embed project). This works both online and offline.

[jeffyjefflabs]

This looks fixed for offline scenarios with the recent qgrid 1.3 release!

[DougRzz]

This issue reappeared after installed qgrid 1.3. and was fixed using this: https://github.com/voila-dashboards/voila/issues/72#issuecomment-470070142

I have decided to embrace Vuetify more. See my Qgrid replacement:
https://github.com/mariobuikhuizen/ipyvuetify/issues/71

[gbrault]

for anyone still facing issues, i was able to fix this by modifying jupyter/nbextensions/qgrid/index.js to only define @jupyter-widgets/base and not base/js/dialog (e.g. deleting the second element in the first argument of define) as a workaround.

Yes I did the same... And it works!

[rjoffrin]

I'm still seeing the problem after amending index.js.

Is there any other change to apply ?

Versions used:
qgrid 1.3.1
voila 0.1.21

[gbrault]

you need to suppress reference to base/js/dialog
for example :

• https://github.com/quantopian/qgrid/blob/877b420d3bd83297bbcc97202b914001a85afff2/js/src/qgrid.widget.js#L11
• https://github.com/quantopian/qgrid/blob/877b420d3bd83297bbcc97202b914001a85afff2/js/webpack.config.js#L64

[jeffyjefflabs]

I was just checking qgrid with the new voila 0.2 release -- looks like even the fallback doesn't work currently due to https://github.com/quantopian/qgrid/issues/312 and/or https://github.com/quantopian/qgrid/issues/327.

We use voila in an offline scenario most of the time, and with our setup it's easier to patch voila rather than qgrid... so for anyone in the same boat, setting VoilaConfiguration.enable_nbextensions=True and applying the patch originally in #75 does still work, but that patch should go in a different file under voila/templates/base with the new template system:

--- voila_setup.macro.html.j2.orig      2020-09-21 20:05:26.264624811 +0000
+++ voila_setup.macro.html.j2   2020-09-21 20:06:33.816405415 +0000
@@ -6,6 +6,7 @@
 </script>
 <script>
 requirejs.config({ baseUrl: '{{base_url}}voila/', waitSeconds: 30})
+define("base/js/dialog", [], () => {})
 window.voila_js_url = "{{ static_url('voila.js')}}"
 requirejs(
     [

[jonsnowseven]

Hello.

Notwithstanding the fix that works, I would like to report that the Qgrid toolbar "Maximize" does not appear when using Qgrid within Voila:

Is there a solution for this?

[jeffyjefflabs]

Unfortunately, the maximize button is the part that causes the errors with Voila. The various patches in this thread basically disable the button to prevent the errors.

[jonsnowseven]

Thank you @jeffyjefflabs! Is there any ongoing fix or is this a technical limitation?

[jeffyjefflabs]

I'm not aware of any efforts to make it work, and I'm not even sure how actively qgrid is being maintained anymore. (I'm not a maintainer of either project, just another interested party.)

[jonsnowseven]

Thank you for the answer @jeffyjefflabs