From d07a5619bca7ee7ed63c703904de5b97dc22ce7f Mon Sep 17 00:00:00 2001
From: Nathaniel Schmitz <schmitznathaniel@gmail.com>
Date: Tue, 19 Nov 2024 13:23:50 -0500
Subject: [PATCH] Address review comments

---
 geemap/map_widgets.py |  7 +++++--
 js/container.ts       | 30 ++++++++++++++++++++----------
 js/inspector.ts       | 12 ++++++------
 js/tree_node.ts       |  4 ++--
 4 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/geemap/map_widgets.py b/geemap/map_widgets.py
index 6e19b4e7e4..75be189a1a 100644
--- a/geemap/map_widgets.py
+++ b/geemap/map_widgets.py
@@ -592,7 +592,7 @@ def _on_map_interaction(self, **kwargs: Any) -> None:
         Args:
             **kwargs (Any): The interaction event arguments.
         """
-        latlon = kwargs.get("coordinates")
+        latlon = kwargs.get("coordinates", [])
         if kwargs.get("type") == "click":
             self._on_map_click(latlon)
 
@@ -602,7 +602,10 @@ def _on_map_click(self, latlon: List[float]) -> None:
         Args:
             latlon (List[float]): The latitude and longitude of the click event.
         """
-        self._clear_inspector_output()
+        if not latlon or len(latlon) < 2:
+            return
+
+        self._clear_inspector_output()        
         self._host_map.default_style = {"cursor": "wait"}
 
         self.point_info = self._point_info(latlon)
diff --git a/js/container.ts b/js/container.ts
index 8b74e097a2..c7b13c5120 100644
--- a/js/container.ts
+++ b/js/container.ts
@@ -1,6 +1,7 @@
 import type { RenderProps } from "@anywidget/types";
 import { css, html, TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 
 import { legacyStyles } from "./ipywidgets_styles";
 import { LitWidget } from "./lit_widget";
@@ -24,11 +25,11 @@ export class Container extends LitWidget<ContainerModel, Container> {
             .header {
                 display: flex;
                 gap: 4px;
-                margin: 4px;
+                padding: 4px;
             }
 
             .widget-container {
-                margin: 4px;
+                padding: 4px;
             }
 
             .hidden {
@@ -65,10 +66,12 @@ export class Container extends LitWidget<ContainerModel, Container> {
         return html`
             <div class="header">
                 <button
-                    class="legacy-button primary header-button ${this
-                .hideCloseButton
-                ? "hidden"
-                : ""}"
+                    class=${classMap({
+                        "legacy-button": true,
+                        primary: true,
+                        "header-button": true,
+                        hidden: this.hideCloseButton,
+                    })}
                     @click="${this.onCloseButtonClicked}"
                 >
                     <span class="material-symbols-outlined">&#xe5cd;</span>
@@ -80,14 +83,21 @@ export class Container extends LitWidget<ContainerModel, Container> {
                     ${this.renderCollapseButtonIcon()}
                 </button>
                 <span
-                    class="legacy-text header-text ${this.title
-                ? ""
-                : "hidden"}"
+                    class=${classMap({
+                        "legacy-text": true,
+                        "header-text": true,
+                        hidden: !this.title,
+                    })}
                 >
                     ${this.title}
                 </span>
             </div>
-            <div class="widget-container ${this.collapsed ? "hidden" : ""}">
+            <div
+                class=${classMap({
+                    "widget-container": true,
+                    hidden: this.collapsed,
+                })}
+            >
                 <slot></slot>
             </div>
         `;
diff --git a/js/inspector.ts b/js/inspector.ts
index 8b01a3657f..da7866d65c 100644
--- a/js/inspector.ts
+++ b/js/inspector.ts
@@ -41,7 +41,7 @@ export class Inspector extends LitWidget<InspectorModel, Inspector> {
             .object-browser {
                 max-height: 300px;
                 min-width: 290px;
-                overflow: scroll;
+                overflow: auto;
             }
 
             input[type='checkbox'] {
@@ -50,10 +50,10 @@ export class Inspector extends LitWidget<InspectorModel, Inspector> {
         `,
     ];
 
-    @property() hideCloseButton: boolean = false;
-    @property() expandPoints: boolean = false;
-    @property() expandPixels: boolean = true;
-    @property() expandObjects: boolean = false;
+    @property({ type: Boolean }) hideCloseButton: boolean = false;
+    @property({ type: Boolean }) expandPoints: boolean = false;
+    @property({ type: Boolean }) expandPixels: boolean = true;
+    @property({ type: Boolean }) expandObjects: boolean = false;
     @property() pointInfo: Node = {};
     @property() pixelInfo: Node = {};
     @property() objectInfo: Node = {};
@@ -113,7 +113,7 @@ export class Inspector extends LitWidget<InspectorModel, Inspector> {
     }
 
     private renderNode(node: Node): TemplateResult | typeof nothing {
-        if ((node.children?.length ?? 0) > 0) {
+        if (node.children?.length) {
             return html`<tree-node .node="${node}"></tree-node> `;
         }
         return nothing;
diff --git a/js/tree_node.ts b/js/tree_node.ts
index 2fcd0df0de..4939789017 100644
--- a/js/tree_node.ts
+++ b/js/tree_node.ts
@@ -57,7 +57,7 @@ export class TreeNode extends LitElement {
     ];
 
     @property() node: Node = {};
-    @property({ reflect: true }) expanded: boolean = false;
+    @property({ type: Boolean, reflect: true }) expanded: boolean = false;
 
     updated(changedProperties: PropertyValues<TreeNode>): void {
         super.updated(changedProperties);
@@ -86,7 +86,7 @@ export class TreeNode extends LitElement {
     }
 
     private hasChildren(): boolean {
-        return (this.node.children?.length ?? 0) > 0;
+        return !!this.node.children?.length;
     }
 
     private renderChildren(): TemplateResult | typeof nothing {