Merge pull request #2094 from umap-project/overpass-boundary-persistent

feat: make boundary persistent in overpass importer

umap/static/umap/js/modules/autocomplete.js

@@ -306,15 +306,11 @@ export const SingleMixin = (Base) =>
         textContent: '×',
       })
       this.input.style.display = 'none'
-      DomEvent.on(
-        close,
-        'click',
-        function () {
-          this.selectedContainer.innerHTML = ''
-          this.input.style.display = 'block'
-        },
-        this
-      )
+      DomEvent.on(close, 'click', () => {
+        this.selectedContainer.innerHTML = ''
+        this.input.style.display = 'block'
+        this.options.on_unselect(result)
+      })
       this.hide()
     }
   }

umap/static/umap/js/modules/importers/overpass.js

@@ -52,11 +52,10 @@ export class Importer {
       options?.searchUrl ||
       'https://photon.komoot.io/api?q={q}&layer=county&layer=city&layer=state'
     this.id = 'overpass'
+    this.boundaryChoice = null
   }
 
   async open(importer) {
-    let boundary = null
-    let boundaryName = null
     const container = DomUtil.create('div')
     container.innerHTML = TEMPLATE
     this.autocomplete = new Autocomplete(container.querySelector('#area'), {
@@ -65,10 +64,15 @@ export class Importer {
         'Type area name, or let empty to load data in current map view'
       ),
       on_select: (choice) => {
-        boundary = choice.item.value
-        boundaryName = choice.item.label
+        this.boundaryChoice = choice
+      },
+      on_unselect: (choice) => {
+        this.boundaryChoice = null
       },
     })
+    if (this.boundaryChoice) {
+      this.autocomplete.displaySelected(this.boundaryChoice)
+    }
     this.map.help.parse(container)
 
     const confirm = (form) => {
@@ -79,10 +83,10 @@ export class Importer {
       let tags = form.tags
       if (!tags.startsWith('[')) tags = `[${tags}]`
       let area = '{south},{west},{north},{east}'
-      if (boundary) area = `area:${boundary}`
+      if (this.boundaryChoice) area = `area:${this.boundaryChoice.item.value}`
       const query = `[out:json];nwr${tags}(${area});out ${form.out};`
       importer.url = `${this.baseUrl}?data=${query}`
-      if (boundary) importer.layerName = boundaryName
+      if (this.boundaryChoice) importer.layerName = this.boundaryChoice.item.label
       importer.format = 'osm'
     }
 
@@ -91,7 +95,7 @@ export class Importer {
         template: container,
         className: `${this.id} importer dark`,
         accept: translate('Choose this data'),
-        cancel: false
+        cancel: false,
       })
       .then(confirm)
   }

umap/tests/integration/test_import.py

@@ -579,6 +579,66 @@ def test_overpass_import_with_bbox(page, live_server, tilelayer, settings):
     )
 
 
+def test_overpass_import_retains_boundary(page, live_server, tilelayer, settings):
+    settings.UMAP_IMPORTERS = {
+        "overpass": {
+            "url": "https://my.overpass.io/interpreter",
+            "searchUrl": "https://foobar.io/api?q={q}",
+        }
+    }
+
+    def handle(route):
+        route.fulfill(
+            json={
+                "features": [
+                    {
+                        "geometry": {
+                            "coordinates": [3.2394035, 48.4149956],
+                            "type": "Point",
+                        },
+                        "type": "Feature",
+                        "properties": {
+                            "osm_type": "R",
+                            "osm_id": 1393025,
+                            "extent": [3.2290211, 48.4268302, 3.2623032, 48.4041636],
+                            "country": "France",
+                            "osm_key": "place",
+                            "countrycode": "FR",
+                            "osm_value": "village",
+                            "postcode": "77480",
+                            "name": "Bray-sur-Seine",
+                            "county": "Seine-et-Marne",
+                            "state": "Île-de-France",
+                            "type": "city",
+                        },
+                    }
+                ],
+                "type": "FeatureCollection",
+            }
+        )
+
+    # Intercept the route
+    page.route(re.compile("https://foobar.io/api.*"), handle)
+    page.goto(f"{live_server.url}/map/new/")
+    page.get_by_role("link", name="Import data").click()
+    page.get_by_role("button", name="Overpass").click()
+    page.get_by_placeholder("amenity=drinking_water").fill("building")
+    page.get_by_placeholder("Type area name, or let empty").click()
+    page.get_by_placeholder("Type area name, or let empty").press_sequentially("bray")
+    page.get_by_text("Bray-sur-Seine, Seine-et-Marne, Île-de-France, France").click()
+    expect(page.locator("#area")).to_contain_text(
+        "Bray-sur-Seine, Seine-et-Marne, Île-de-France, France"
+    )
+    page.get_by_role("button", name="Choose this data").click()
+    expect(page.get_by_placeholder("Provide an URL here")).to_have_value(
+        "https://my.overpass.io/interpreter?data=[out:json];nwr[building](area:3601393025);out geom;"
+    )
+    page.get_by_role("button", name="Overpass").click()
+    expect(page.locator("#area")).to_contain_text(
+        "Bray-sur-Seine, Seine-et-Marne, Île-de-France, France"
+    )
+
+
 def test_import_from_datasets(page, live_server, tilelayer, settings):
     settings.UMAP_IMPORTERS = {
         "datasets": {