From 40033283678fc92155cbf87b6a93626b08cfd7ba Mon Sep 17 00:00:00 2001
From: sufyanAbbasi <sufyanAbbasi@users.noreply.github.com>
Date: Wed, 15 Jan 2025 11:09:55 -0800
Subject: [PATCH] Small search bar style/UX tweaks (#2209)

* Combine name/address + lat-lon search, plus add compact mode for widget-containers

* Make sure widget-container respects background color variables.

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

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

* Wrap toolbar in a widget-container with no header

* Fix imports.

* Fix typo

* Separate LayerManager from Toolbar

* Keep the basemap selector resource select field visible when not needed, and fill with "---"

* Minor CSS tweaks on container and inspector

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

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

* Fix widget removal from the top right layout box

* Update unit tests

* Add padding around search elements and some other tweaks

* Add margin to tabs

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Nathaniel Schmitz <schmitznathaniel@gmail.com>
---
 geemap/map_widgets.py | 20 ++++++++++++--------
 js/search_bar.ts      | 26 ++++++++++++++++----------
 js/tab_panel.ts       |  2 +-
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/geemap/map_widgets.py b/geemap/map_widgets.py
index 13b112d568..01838352e5 100644
--- a/geemap/map_widgets.py
+++ b/geemap/map_widgets.py
@@ -1501,18 +1501,22 @@ def import_button_clicked(self):
 
             contents = "".join(code).strip()
             # create_code_cell(contents)
-
+            copy_success = False
             try:
                 import pyperclip
 
                 pyperclip.copy(str(contents))
+                copy_success = True
             except Exception as e:
                 pass
-            dataset_model["additional_html"] = (
-                "<pre>"
-                "# The code has been copied to the clipboard.\n"
-                "# Press Ctrl+V in a new cell to paste it.\n"
-                f"{contents}"
-                "</pre"
-            )
+            if copy_success:
+                dataset_model["additional_html"] = (
+                    "<pre>"
+                    "# The code has been copied to the clipboard.\n"
+                    "# Press Ctrl+V in a new cell to paste it.\n"
+                    f"{contents}"
+                    "</pre"
+                )
+            else:
+                dataset_model["additional_html"] = f"<pre>{contents}</pre"
             self.dataset_model = json.dumps(dataset_model)
diff --git a/js/search_bar.ts b/js/search_bar.ts
index 135f5bc003..7edffffae7 100644
--- a/js/search_bar.ts
+++ b/js/search_bar.ts
@@ -43,12 +43,12 @@ export class SearchBar extends LitWidget<
             }
 
             .input-container {
-                max-width: 340px;
+                max-width: 460px;
                 padding: 5px;
             }
 
             .input-container > p {
-                margin: 5px 3px;
+                margin: 8px 3px;
                 max-width: 230px;
             }
 
@@ -61,7 +61,7 @@ export class SearchBar extends LitWidget<
                 list-style-type: none;
                 margin: 0;
                 margin-bottom: 4px;
-                padding: 0;
+                padding: 8px 0;
             }
 
             label.result {
@@ -72,6 +72,7 @@ export class SearchBar extends LitWidget<
             .import-button, .reset-button {
                 margin: 0 2px 2px 2px;
                 padding: 0 8px;
+                white-space: nowrap;
             }
 
             .dataset-select {
@@ -82,6 +83,7 @@ export class SearchBar extends LitWidget<
             .additional-html-container {
                 max-height: 300px;
                 overflow: auto;
+                padding: 8px 0;
             }
 
             .additional-html-container pre {
@@ -200,9 +202,11 @@ export class SearchBar extends LitWidget<
                 ${results}
             </ul>`);
         }
-        renderedInputs.push(html`<div class="additional-html-container">
-            ${unsafeHTML(locationModel.additional_html)}
-        </div>`);
+        if (locationModel.additional_html) {
+            renderedInputs.push(html`<div class="additional-html-container">
+                ${unsafeHTML(locationModel.additional_html)}
+            </div>`);
+        }
         if (locationModel.search ||
             locationModel.results.length ||
             locationModel.selected) {
@@ -248,7 +252,7 @@ export class SearchBar extends LitWidget<
             @click="${() => {
                 this.model?.send({ type: "click", id: "import" });
             }}">
-            Import
+            Reveal Code
         </button>`;
         const results = html`
             <select
@@ -271,10 +275,12 @@ export class SearchBar extends LitWidget<
             html`<div class="row">
                 ${importButton}
                 ${results}
-            </div>`,
-            html`<div class="additional-html-container">
-                ${unsafeHTML(datasetModel.additional_html)}
             </div>`);
+        if (datasetModel.additional_html) {
+            renderedInputs.push(html`<div class="additional-html-container">
+                ${unsafeHTML(datasetModel.additional_html)}
+            </div>`)
+        }
         return renderedInputs;
     }
 }
diff --git a/js/tab_panel.ts b/js/tab_panel.ts
index 914d5c0287..0f89692a19 100644
--- a/js/tab_panel.ts
+++ b/js/tab_panel.ts
@@ -82,7 +82,7 @@ export class TabPanel extends LitElement {
             .tab-container button {
                 border-radius: 5px;
                 height: 28px;
-                margin: 2px;
+                margin: 2px 0 2px 8px;
                 user-select: none;
             }