Nglview works only in the first tab of ipw.Tab() widget

[yakutovicha]

When I try to use nglivew in ipw.Tab() widget - the only way to make it work is to place it in the very first tab. Placing it in 2, 3... tabs results in not showing the nglview.

Here is the minimal code snippet to reproduce the problem (Jupyter notebook):

class Test(ipw.VBox):
    def __init__(self):
        import nglview
        self.viewer = nglview.NGLWidget()
        self.viewer.add_component('rcsb://1tsu.pdb')
        super().__init__([self.viewer])

class Vwr(ipw.VBox):
    def __init__(self):
        t = Test()
        b = ipw.Button()
        self.tab = ipw.Tab()
        self.tab.children = [b, t]  # Does not work.
        #self.tab.children = [t, b]  # Does work.
        super().__init__([self.tab])

display(Vwr())

• Version report
  Nglview version is: 2.7.1
  Ipywidgets version is: 7.5.1

[hainm]

hi @yakutovicha for an unknown reason, the viewer is not resized properly.
Please call handle_resize method

import ipywidgets as ipw

class Test(ipw.VBox):
    def __init__(self):
        import nglview
        self.viewer = nglview.NGLWidget()
        self.viewer.add_component('rcsb://1tsu.pdb')
        super().__init__([self.viewer])

class Vwr(ipw.VBox):
    def __init__(self):
        t = Test()
        b = ipw.Button()
        self.tab = ipw.Tab()
        self.tab.children = [b, t]  # Does not work.
        # self.tab.children = [t, b]  # Does work.
        
        def on_change(change):
            index = change['new']
            if index == 1: # 2nd tab:
                t.viewer.handle_resize()
        
        self.tab.observe(on_change, 'selected_index')
            
            
        super().__init__([self.tab])

v = Vwr()
v

[hainm]

Resolved.

[yakutovicha]

Just to let you know that the problem is still there for 2.7.7, unless you consider adding the code below as the fix

        def on_change(change):
            index = change['new']
            if index == 1: # 2nd tab:
                t.viewer.handle_resize()
        
        self.tab.observe(on_change, 'selected_index')

[hainm]

reopen