search

jupyter-widgets / jupyterlab-sidecar

A sidecar output widget for JupyterLab
BSD 3-Clause "New" or "Revised" License
247 stars 39 forks source link

No display in sidecar when using Tab widget with GridSpecLayout and Ipyleaflet #42

Open nikhil003 opened 4 years ago

nikhil003 commented 4 years ago

I created a simple app using Ipywidgets where I used GridSpecLayout to define the layout of my app and then used a tab within the GridSpecLayout to have multiple tabs for the map.

Code with Tab widget

        self.app = GridspecLayout(9, 8, width='auto', height='600px')
        self.app[:, 2:] = Tab()
        self.app[0, :2] = VBox([Label("Vector:"), self._geomSelector])
        self.app[1, :2] = VBox([Label("Forcing GCM:"), self._gcmSelector])
        self.app[2, :2] = VBox([Label("Projection Year:"), self._yearsSelector])
        self.app[3, :2] = VBox([Label("Variable:"), self._variableSelector])
        self.app[4, :2] = VBox([Label("Frequency:"), self._freqSelector])
        self.app[5, :2] = VBox([Label("Time Slice:"), self._timeSelector])
        self.app[6:8, :2] = VBox([Label("Emission Scenario:"), self._emissionSelector])
        raster_im = self.get_overlay()

        self.app[:, 2:].children = [self.map]
        self.app[:, 2:].set_title(0, "State")
        self.map.add_layer(self._geoms[self._geomSelector.value])
        self.map.add_layer(raster_im)

Code without tab widget

        self.app = GridspecLayout(9, 8, width='auto', height='600px')
        self.app[:, 2:] = self.map
        self.app[0, :2] = VBox([Label("Vector:"), self._geomSelector])
        self.app[1, :2] = VBox([Label("Forcing GCM:"), self._gcmSelector])
        self.app[2, :2] = VBox([Label("Projection Year:"), self._yearsSelector])
        self.app[3, :2] = VBox([Label("Variable:"), self._variableSelector])
        self.app[4, :2] = VBox([Label("Frequency:"), self._freqSelector])
        self.app[5, :2] = VBox([Label("Time Slice:"), self._timeSelector])
        self.app[6:8, :2] = VBox([Label("Emission Scenario:"), self._emissionSelector])
        raster_im = self.get_overlay()

        self.map.add_layer(self._geoms[self._geomSelector.value])
        self.map.add_layer(raster_im)

When I used the code without tab widget, I could see the app in the Sidecar, however, when I used the tab widget, I can't see the map in the Sidecar.

Screenshot of app in Sidecar without Tab widget

sidecar_without_tab_widget

Screenshot of app in Sidecar with Tab widget

sidecar_with_tab_widget

Screenshot of app in notebook code cell

app_in_notebook_cell

I am not sure if this is some kind of incompatibility of Sidecar with the tab widget. The following screenshot show the behaviour.