Skip to content

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

Open
@nikhil003

Description

@nikhil003

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions