update results faster and cancel type when new request

viewer/cypress/location-search-test.cy.ts

@@ -109,11 +109,13 @@ describe('location-search-test', () => {
     })
   })
 
-  /*it('disable collection and typeahead', () => {
+  it('disable collection and typeahead', () => {
     loadLocationSearchWithUrl()
     cy.get('button').should('have.attr', 'title', 'show/hide search options').click()
-    cy.get(':nth-child(3) >  label > input[type=checkbox]').uncheck()
-    cy.get(':nth-child(6) >  label > input[type=checkbox]').uncheck()
+    cy.contains('ligplaats').find('input[type="checkbox"]').uncheck()
+    cy.contains('standplaats').find('input[type="checkbox"]').uncheck()
+    cy.contains('verblijfsobject').find('input[type="checkbox"]').uncheck()
+    cy.get('input[placeholder="Enter Relevance for woonplaats"]').type('{backspace}{backspace}0.8')
     cy.get('#searchBox').should('be.visible').should('be.enabled').type('den')
     cy.wait('@search')
     cy.wait('@search')
@@ -124,15 +126,15 @@ describe('location-search-test', () => {
       expect(r.q).to.equal('den')
       expect(r.functioneel_gebied.version).to.equal('1')
       expect(r.geografisch_gebied.version).to.equal('1')
-      expect(r.ligplaats.version).to.equal('1')
-      expect(r.standplaats.version).to.equal('1')
-      expect(r.verblijfsobject.version).to.equal('1')
       expect(r.woonplaats.version).to.equal('1')
+      expect(r.woonplaats.relevance).to.equal('0.8')
+      expect(result.request.url).to.equal(
+        'https://visualisation.example.com/locationapi/search?q=den&functioneel_gebied%5Brelevance%5D=0.5&functioneel_gebied%5Bversion%5D=1&geografisch_gebied%5Brelevance%5D=0.5&geografisch_gebied%5Bversion%5D=1&woonplaats%5Brelevance%5D=0.8&woonplaats%5Bversion%5D=1'
+      )
     })
 
     cy.contains('Beatrixlaan').focus()
-    cy.wait('@geo')
+    //  cy.wait('@geo')
     cy.wait('@background')
   })
-    */ 
 })

viewer/src/app/location-search/location-search.component.html

@@ -16,7 +16,8 @@
     [searchParams]="searchParams"
     (searchParamsEvent)="paramChanged($event)">
   </app-search-options>
-  <div role="list" *ngFor="let r of results">
+  <div *ngIf="results"></div>
+  <div role="list" *ngFor="let r of getResults(results | async)">
     <div role="listitem">
       <button title="{{ getDisplayname(r) }}" (mouseover)="selectResult(r)" (focus)="selectResult(r)">
         <div [innerHTML]="getHighLight(r) | safeHtml"></div>

viewer/src/app/location-search/location-search.component.ts

@@ -11,8 +11,9 @@ import { SafeHtmlPipe } from '../safe-html.pipe'
 import { BackgroundMap, FeatureViewComponent } from '../feature-view/feature-view.component'
 import { SearchOptionsComponent } from './search-options/search-options.component'
 
-import { FeatureJsonfg } from '../api/models'
+import { FeatureCollectionJsonfg, FeatureJsonfg } from '../api/models'
 import { Search$Json$Params } from '../api/fn/features/search-json'
+import { Observable } from 'rxjs'
 
 @Component({
   selector: 'app-location-search',
@@ -22,6 +23,7 @@ import { Search$Json$Params } from '../api/fn/features/search-json'
 })
 export class LocationSearchComponent {
   selectedResultUrl: string | undefined = undefined
+  //@Output() activeFeature = new EventEmitter<FeatureLike>()
 
   @Input() url: string | undefined = undefined
   @Input() label: string = 'Search location'
@@ -42,7 +44,7 @@ export class LocationSearchComponent {
   searchLocation: string = ''
 
   projection: ProjectionMapping = defaultMapping
-  results: FeatureJsonfg[] = []
+  results: Observable<FeatureCollectionJsonfg> | undefined = undefined
 
   constructor(
     private logger: NGXLogger,
@@ -60,16 +62,14 @@ export class LocationSearchComponent {
   private lookup() {
     if (this.url) {
       this.featuresService.rootUrl = this.url
-      this.results = []
-      this.featuresService.search$Json(this.searchParams).subscribe(x => {
-        this.results = x.features
-      })
+      this.results = this.featuresService.search$Json(this.searchParams)
     }
   }
 
   selectResult(item: FeatureJsonfg) {
     this.logger.log('lookup via link to api: ')
     this.logger.log(item)
+    //this.activeFeature.emit(item)
     if (item.links![0].href) {
       // this.selectedResultUrl = item.links![0].href as string
       //e.g: this.selectedResultUrl =
@@ -100,4 +100,12 @@ export class LocationSearchComponent {
     this.searchParams = event
     this.lookup()
   }
+
+  getResults(f: FeatureCollectionJsonfg | null): FeatureJsonfg[] {
+    if (f) {
+      return f?.features
+    } else {
+      return []
+    }
+  }
 }

viewer/src/app/location-search/search-options/search-options.component.html

@@ -35,7 +35,7 @@
                 max="1"
                 step="0.1"
                 title="Relevance to boost or descrease results from {{ collection.title }}"
-                placeholder="Enter Relevance" />
+                placeholder="Enter Relevance for {{ collection.title }}" />
             </label>
           </td>
         </tr>

viewer/src/index.html

@@ -12,12 +12,12 @@
   </head>
 
   <body>
-    <h2>Location API sample to test <a href="https://github.com/PDOK/gomagpie">gomagpie</a></h2>
+    <h2>Location API sample to test <a href="https://api.pdok.nl/bzk/location-api/autocomplete/v1-preprod">location api (preprod)</a></h2>
 
     <app-location-search
       id="locationsearch1"
       url="https://api.pdok.nl/bzk/location-api/autocomplete/v1-preprod"
-      label= ""
+      label=""
       aria-label="Location Search"></app-location-search>
   </body>
 </html>