How To: Resolve Add-on Mode Not Rendering, but Notebook is

Overview

Users can sometimes encounter an issue where their Add-ons work flawlessly when executed in Classic Notebook mode but exhibit unexpected behavior when switched to Add-on Mode.

The problem can be demonstrated by considering a simple notebook containing a Python class with a header and a button. When the button is clicked, a specific action should be displayed on the page. In Classic Notebook mode, this functionality works as expected. However, when the same notebook is executed in Add-on Mode, the button click fails to produce the desired output. Although the button is being clicked, nothing is being displayed on the screen.

This discrepancy in behavior can be attributed to an upgrade that occurred when Data Lab was updated to include an Advanced Mode (JupyterLab). As part of the upgrade, the rendering process for Add-on Mode was enhanced by integrating Voila, a tool that transforms Jupyter Notebooks into standalone Add-ons. However, it has been identified that Voila contains a known bug, documented as

https://github.com/voila-dashboards/voila/issues/532 , which prevents the proper rendering of certain embedded ipywidgets on the screen.

Unfortunately, the timeline for resolving this bug in Voila is uncertain. However, there is a straightforward solution available that can rectify the issue and ensure the Add-on functions as expected.

The subsequent sections of this document present the solution to this problem, involving a minor modification to the script that accommodates the Voila bug. By following the recommended changes, users can successfully overcome the rendering issue and achieve the desired functionality of their Add-ons in both Classic Notebook mode and Add-on Mode.

Classic Jupyter Notebook	Add-on Mode

Solution

To address the rendering issue caused by the Voila bug and ensure the proper functionality of Add-ons in both Classic Notebook mode and Add-on Mode, a simple modification needs to be made to the script. The solution involves incorporating the use of the ipywidgets.Output() widget— https://ipywidgets.readthedocs.io/en/7.7.0/examples/Widget%20List.html?highlight=Output#Output .

In the original code, the ShowWidget class defines a button and a header within the self.box widget. When the button is clicked, the onBtnClick() function attempts to display the action on the screen. However, due to the Voila bug, the display is not rendered correctly in Add-on Mode.

To resolve this, the script should be adjusted by introducing an output widget of the ipywidgets module. This widget serves as a designated location for rendering the button click. The modified code includes the following changes:

1. The self.output widget is created and added to the widget hierarchy by including it in the self.box widget alongside the header and button widgets.

2. The onBtnClick() function is updated to use the self.output widget for rendering. The button click is wrapped within a with statement that directs the output to the self.output widget.

3. Finally, the modified script ensures the proper display of the Add-on by invoking the display(self.box) function.

import ipywidgets as widgets

class ShowWidget():
    def __init__(self):
        self.button = widgets.Button(description='Action Button', 
                                      button_style='success')
        self.button.on_click(self.onBtnClick)
        
        self.header = widgets.HTML('<h2>Widget Header</h2>')
        self.box = widgets.VBox(children=[self.header, self.button])
    
    def onBtnClick(self, b): 
        display(widgets.Label('Button Clicked'))
    
    def run(self):
        display(self.box)

import ipywidgets as widgets

class ShowWidget():
    def __init__(self):
        self.button = widgets.Button(description='Action Button', 
                                      button_style='success')
        self.button.on_click(self.onBtnClick)
        
        self.output = widgets.Output() # Adding a widget.Output() to render to
        self.header = widgets.HTML('<h2>Widget Header</h2>')
        
        # Include self.output to the widget
        self.box = widgets.VBox(children=[self.header, self.button, self.output])
    
    def onBtnClick(self, b): 
        with self.output: # Render the button click to the Output()
            display(widgets.Label('Button Clicked'))
    
    def run(self):
        display(self.box)

By implementing these changes, the Add-on will function correctly in both Classic Notebook mode and Add-on Mode. The self.output widget acts as the designated rendering area for displaying the action when the button is clicked. This solution effectively mitigates the rendering issue caused by the Voila bug and guarantees consistent behavior of the Add-on across different Seeq versions.

Add-on Mode After Modification