Implement Toolbar and ToolbarItem to anywidget and LitElement (gee-co…

…mmunity#2174)

* Implement LayerManager using LitElement + anywidget

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Update static files

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Use non-minified JS files to work around property renaming issue

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Set up tests for layer_manager_row

* Set up layer_manager_row test

* Implement LayerManager using LitElement + anywidget

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Update static files

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Use non-minified JS files to work around property renaming issue

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Clean up setuptools references in pyproject.toml

* Clean up setuptools references in pyproject.toml

* Fix dark mode and drop shadow issues in Colab

* Remove common.css, load fonts using JS instead.

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Rebuild

* Remove extraneous files

* Address comments from initial review

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Ignore static files

* Fix TS errors

* Convert tsconfig.json to spaces and export model interfaces

* Add TS tests for anywidgets

* Add a tab panel component

* clean up styles

* Add css classes for better testability

* Add better css classes (p2), build before test

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Add a rough basemap-selector widget

* Implement Inspector using anywidget and LitElement

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Add a tab panel and rough toolbar

* Add tests for basemap selector widget

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Increase margin to 4px

* Add working, rough toolbar (broken layer_manager)

* Add None check to plot tool

* Return empty list for extra tools in core

* Unbreak layer_manager

* Make sure rerendering preserves tab index

* Use primary styling to match old style

* Support dark mode better

* Fix toolbar unit tests

* Address review comments.

* Add type annotation

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Address review comments

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Address reviewer comments

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Extend LitWidget for ToolbarItem too

* Remove scratch file

* Fix core tests

* Adjust margins

* tab-clicked --> tab-changed

* Change info icon to point scan (cross-hair)

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Undo icon change

* Add better comment about tooltip property

* Change some icons to match mocks

---------

Co-authored-by: Nathaniel Schmitz <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Qiusheng Wu <[email protected]>

geemap/core.py

@@ -673,8 +673,14 @@ def _layer_manager(self) -> Optional[map_widgets.LayerManager]:
             Optional[map_widgets.LayerManager]: The layer manager widget if found, else None.
         """
         if toolbar_widget := self._toolbar:
-            if isinstance(toolbar_widget.accessory_widget, map_widgets.LayerManager):
-                return toolbar_widget.accessory_widget
+            return next(
+                (
+                    widget
+                    for widget in toolbar_widget.accessory_widgets
+                    if isinstance(widget, map_widgets.LayerManager)
+                ),
+                None,
+            )
         return self._find_widget_of_type(map_widgets.LayerManager)
 
     @property
@@ -917,35 +923,13 @@ def add(self, obj: Any, position: str = "", **kwargs: Any) -> None:
         else:
             super().add(obj)
 
-    def _on_toggle_toolbar_layers(self, is_open: bool) -> None:
-        """Handles the toggle event for the toolbar layers.
-
-        Args:
-            is_open (bool): Whether the toolbar layers are open.
-        """
-        if is_open:
-            if self._layer_manager:
-                return
-
-            layer_manager = map_widgets.LayerManager(self)
-            layer_manager.header_hidden = True
-            layer_manager.close_button_hidden = True
-            layer_manager.refresh_layers()
-            self._toolbar.accessory_widget = layer_manager
-        else:
-            self._toolbar.accessory_widget = None
-            self.remove("layer_manager")
-
     def _add_layer_manager(self, position: str, **kwargs: Any) -> None:
         """Adds a layer manager to the map.
 
         Args:
             position (str): The position to place the layer manager.
             **kwargs (Any): Additional keyword arguments.
         """
-        if self._layer_manager:
-            return
-
         layer_manager = map_widgets.LayerManager(self, **kwargs)
         layer_manager.on_close = lambda: self.remove("layer_manager")
         layer_manager.refresh_layers()
@@ -964,16 +948,21 @@ def _add_toolbar(self, position: str, **kwargs: Any) -> None:
         if self._toolbar:
             return
 
+        layer_manager = map_widgets.LayerManager(self)
+        layer_manager.header_hidden = True
+        layer_manager.close_button_hidden = True
+        layer_manager.refresh_layers()
+
         toolbar_val = toolbar.Toolbar(
-            self, self._toolbar_main_tools(), self._toolbar_extra_tools(), **kwargs
+            self,
+            self._toolbar_main_tools(),
+            self._toolbar_extra_tools(),
+            [layer_manager],
         )
-        toolbar_val.on_layers_toggled = self._on_toggle_toolbar_layers
         toolbar_control = ipyleaflet.WidgetControl(
             widget=toolbar_val, position=position
         )
         super().add(toolbar_control)
-        # Enable the layer manager by default.
-        toolbar_val.toggle_layers(True)
 
     def _add_inspector(self, position: str, **kwargs: Any) -> None:
         """Adds an inspector to the map.
@@ -1255,65 +1244,66 @@ def _add_colorbar(
         return control
 
     def _open_help_page(
-        self, host_map: "MapInterface", selected: bool, item: toolbar.Toolbar.Item
+        self, host_map: "MapInterface", selected: bool, item: toolbar.ToolbarItem
     ) -> None:
         """Opens the help page.
 
         Args:
             host_map (MapInterface): The host map.
             selected (bool): Whether the item is selected.
-            item (toolbar.Toolbar.Item): The toolbar item.
+            item (toolbar.ToolbarItem): The toolbar item.
         """
         del host_map, item  # Unused.
         if selected:
             coreutils.open_url("https://geemap.org")
 
-    def _toolbar_main_tools(self) -> List[toolbar.Toolbar.Item]:
+    def _toolbar_main_tools(self) -> List[toolbar.ToolbarItem]:
         """Gets the main tools for the toolbar.
 
         Returns:
-            List[toolbar.Toolbar.Item]: The main tools for the toolbar.
+            List[toolbar.ToolbarItem]: The main tools for the toolbar.
         """
 
         @toolbar._cleanup_toolbar_item
         def inspector_tool_callback(
-            map: Map, selected: bool, item: toolbar.Toolbar.Item
+            map: Map, selected: bool, item: toolbar.ToolbarItem
         ):
             del selected, item  # Unused.
             map.add("inspector")
             return map._inspector
 
         @toolbar._cleanup_toolbar_item
-        def basemap_tool_callback(map: Map, selected: bool, item: toolbar.Toolbar.Item):
+        def basemap_tool_callback(map: Map, selected: bool, item: toolbar.ToolbarItem):
             del selected, item  # Unused.
             map.add("basemap_selector")
             return map._basemap_selector
 
         return [
-            toolbar.Toolbar.Item(
+            toolbar.ToolbarItem(
                 icon="map",
                 tooltip="Basemap selector",
                 callback=basemap_tool_callback,
-                reset=False,
             ),
-            toolbar.Toolbar.Item(
-                icon="info",
+            toolbar.ToolbarItem(
+                icon="point_scan",
                 tooltip="Inspector",
                 callback=inspector_tool_callback,
-                reset=False,
             ),
-            toolbar.Toolbar.Item(
-                icon="question", tooltip="Get help", callback=self._open_help_page
+            toolbar.ToolbarItem(
+                icon="question_mark",
+                tooltip="Get help",
+                callback=self._open_help_page,
+                reset=True,
             ),
         ]
 
-    def _toolbar_extra_tools(self) -> Optional[List[toolbar.Toolbar.Item]]:
+    def _toolbar_extra_tools(self) -> List[toolbar.ToolbarItem]:
         """Gets the extra tools for the toolbar.
 
         Returns:
-            Optional[List[toolbar.Toolbar.Item]]: The extra tools for the toolbar.
+            List[toolbar.ToolbarItem]: The extra tools for the toolbar.
         """
-        return None
+        return []
 
     def _control_config(self) -> Dict[str, List[str]]:
         """Gets the control configuration.