let relevance work

PDOK · Jan 2, 2025 · 2ae176e · 2ae176e
1 parent 6464db7
commit 2ae176e
Show file tree

Hide file tree

Showing 9 changed files with 304 additions and 31 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,4 +10,4 @@ viewer/dist
 viewer/node_modules
 viewer/cypress.env.json
 hack/tmp
-viewer/src/app/api/
+viewer/view-component-1.0.0.tgz
diff --git a/viewer/cypress/location-search-test.cy.ts b/viewer/cypress/location-search-test.cy.ts
@@ -3,6 +3,7 @@ import { LoggerModule } from 'ngx-logger'
 import { environment } from './../src/environments/environment'
 import { LocationSearchComponent } from './../src/app/location-search/location-search.component'
 import { checkAccessibility, injectAxe } from './shared'
+import { SeachResponse } from './seachResponse-model'
 
 function loadLocationSearchEmpty() {
   cy.mount(LocationSearchComponent, {
@@ -16,7 +17,7 @@ function loadLocationSearchEmpty() {
 }
 function loadLocationSearchWithUrl() {
   cy.intercept('GET', 'https://visualisation.example.com/locationapi/collections', { fixture: 'collectionfix.json' }).as('col')
-  cy.intercept('GET', 'https://visualisation.example.com/locationapi/search', { fixture: 'search-den-wgs84.json' }).as('search')
+  cy.intercept('GET', 'https://visualisation.example.com/locationapi/search?*', { fixture: 'search-den-wgs84.json' }).as('search')
   cy.intercept('GET', 'https://example.com/ogc/v1/collections/addresses/items/827*', { fixture: 'amsterdam-wgs84.json' }).as('geo')
   cy.intercept('GET', 'https://example.com/ogc/v1/collections/addresses/items/22215*', { fixture: 'grid-amsterdam-wgs84.json' }).as('geo2')
   cy.intercept('GET', 'https://tile.openstreetmap.org/**/*', { fixture: 'backgroundstub.png' }).as('background')
@@ -30,6 +31,7 @@ function loadLocationSearchWithUrl() {
     ],
     componentProperties: {
       url: 'https://visualisation.example.com/locationapi',
+
       //    backgroundmap: 'BRT',
     },
   })
@@ -116,6 +118,17 @@ describe('location-search-test', () => {
     cy.wait('@search')
     cy.wait('@search')
     cy.wait('@search')
+    cy.get('@search').then(res => {
+      const result = res as unknown as SeachResponse
+      const r = result.request.query
+      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')
+    })
 
     cy.contains('Beatrixlaan').focus()
     cy.wait('@geo')

diff --git a/viewer/cypress/seachResponse-model.ts b/viewer/cypress/seachResponse-model.ts
@@ -0,0 +1,111 @@
+export interface SeachResponse {
+  id: string
+  browserRequestId: string
+  routeId: string
+  request: Request
+  state: string
+  requestWaited: boolean
+  responseWaited: boolean
+  subscriptions: any[]
+  response: Response
+}
+
+export interface Request {
+  headers: RequestHeaders
+  url: string
+  method: string
+  httpVersion: string
+  resourceType: string
+  query: Query
+  body: string
+  responseTimeout: number
+  alias: string
+}
+
+export interface RequestHeaders {
+  host: string
+  connection: string
+  pragma: string
+  'cache-control': string
+  'sec-ch-ua-platform': string
+  'user-agent': string
+  accept: string
+  'sec-ch-ua': string
+  'sec-ch-ua-mobile': string
+  origin: string
+  'sec-fetch-site': string
+  'sec-fetch-mode': string
+  'sec-fetch-dest': string
+  referer: string
+  'accept-encoding': string
+  'accept-language': string
+}
+
+export interface Query {
+  q: string
+  functioneel_gebied: FunctioneelGebied
+  geografisch_gebied: FunctioneelGebied
+  ligplaats: FunctioneelGebied
+  standplaats: FunctioneelGebied
+  verblijfsobject: FunctioneelGebied
+  woonplaats: FunctioneelGebied
+}
+
+export interface FunctioneelGebied {
+  relevance: string
+  version: string
+}
+
+export interface Response {
+  headers: ResponseHeaders
+  body: Body
+  url: string
+  method: null
+  httpVersion: null
+  statusCode: number
+  statusMessage: null
+}
+
+export interface Body {
+  type: string
+  timeStamp: Date
+  links: Link[]
+  features: Feature[]
+  numberReturned: number
+}
+
+export interface Feature {
+  type: string
+  properties: Properties
+  geometry: Geometry
+  id: string
+  links: Link[]
+}
+
+export interface Geometry {
+  type: string
+  coordinates: Array<Array<number[]>>
+}
+
+export interface Link {
+  rel: string
+  title: string
+  type: string
+  href: string
+}
+
+export interface Properties {
+  collectionGeometryType: string
+  collectionId: string
+  collectionVersion: string
+  displayName: string
+  highlight: string
+  href: string
+  score: number
+}
+
+export interface ResponseHeaders {
+  'content-type': string
+  'access-control-allow-origin': string
+  'access-control-allow-credentials': string
+}
diff --git a/viewer/package.json b/viewer/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "npm run format && npm run lint && ng build --configuration production --verbose --output-hashing none",
+    "build": "npm run format && npm run lint && ng build --configuration production --verbose --output-hashing none && npm pack .",
     "watch": "ng build --watch --configuration development",
     "test": "npx cypress info && npx cypress run --component",
     "ghpage": "angular-cli-ghpages --dir=dist/view-component/browser",

diff --git a/viewer/src/app/location-search/location-search.component.html b/viewer/src/app/location-search/location-search.component.html
@@ -12,21 +12,25 @@ <h2>Enter text</h2>
     [placeholder]="placeholder"
     [title]="title"
     list="locatie-auto-complete"
-    aria-label="Search for a location" /><app-search-options [url]="url"> </app-search-options>
+    aria-label="Search for a location" /><app-search-options
+    [url]="url"
+    [searchParams]="searchParams"
+    (searchParamsEvent)="paramChanged($event)">
+  </app-search-options>
 
   <h2>Result</h2>
 
-  <div role="list" *ngFor="let r of $results | async">
+  <div role="list" *ngFor="let r of results">
     <div role="listitem">
-      <button title="{{ r.getProperties()['displayName'] }}" (mouseover)="selectResult(r)" (focus)="selectResult(r)">
-        <div [innerHTML]="r.getProperties()['highlight'] | safeHtml"></div>
+      <button title="{{ getDisplayname(r) }}" (mouseover)="selectResult(r)" (focus)="selectResult(r)">
+        <div [innerHTML]="getHighLight(r) | safeHtml"></div>
         <div hidden="hidden">
-          {{ r.getProperties()['collectionGeometryType:'] }}
-          {{ r.getProperties()['collectionId'] }}
-          {{ r.getProperties()['collectionVersion'] }}
-          {{ r.getProperties()['displayName'] }}
-          {{ r.getProperties()['href'] }}
-          {{ r.getProperties()['score'] }}
+          {{ getProperty(r, 'collectionGeometryType:') }}
+          {{ getProperty(r, 'collectionId') }}
+          {{ getProperty(r, 'collectionVersion') }}
+          {{ getProperty(r, 'displayName') }}
+          {{ getProperty(r, 'href') }}
+          {{ getProperty(r, 'score') }}
         </div>
       </button>
     </div>

diff --git a/viewer/src/app/location-search/location-search.component.ts b/viewer/src/app/location-search/location-search.component.ts
@@ -2,17 +2,18 @@ import { Component, Input } from '@angular/core'
 
 import { CommonModule } from '@angular/common'
 
-import { CollectionsService } from '../api/services'
+import { CollectionsService, FeaturesService } from '../api/services'
 import { NGXLogger } from 'ngx-logger'
-import { LocationSearchService } from '../location-search.service'
+
 import { defaultMapping, ProjectionMapping } from '../feature.service'
-import { Feature } from 'ol'
-import { Geometry } from 'ol/geom'
-import { Observable } from 'rxjs'
+
 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 { Search$Json$Params } from '../api/fn/features/search-json'
+
 @Component({
   selector: 'app-location-search',
   imports: [CommonModule, SafeHtmlPipe, FeatureViewComponent, SearchOptionsComponent],
@@ -27,29 +28,76 @@ export class LocationSearchComponent {
   @Input() title: string = 'Enter the location you want to search for'
   @Input() placeholder: string = 'Enter location to search'
   @Input() backgroundmap: BackgroundMap = 'OSM'
+  defaultColparams = { relevance: 0.5, version: 1 }
+  @Input() searchParams: Search$Json$Params = {
+    q: '',
+    functioneel_gebied: this.defaultColparams,
+    geografisch_gebied: this.defaultColparams,
+    ligplaats: this.defaultColparams,
+    standplaats: this.defaultColparams,
+    verblijfsobject: this.defaultColparams,
+    woonplaats: this.defaultColparams,
+  }
 
   searchLocation: string = ''
 
   projection: ProjectionMapping = defaultMapping
-  $results: Observable<Feature<Geometry>[]> | undefined = undefined
+  results: FeatureJsonfg[] = []
 
   constructor(
     private logger: NGXLogger,
     private collectionService: CollectionsService,
-    private locationSearchService: LocationSearchService
+    private featuresService: FeaturesService
   ) {}
 
   updateSearchField(event: KeyboardEvent) {
     const inputValue = (event.target as HTMLInputElement).value
+    this.searchParams.q = inputValue
     this.logger.log(inputValue)
+    this.lookup()
+  }
+
+  private lookup() {
     if (this.url) {
-      //Todo replace by generated aanroep openapi call and use inputvalue as search param:
-      this.$results = this.locationSearchService.getResults({ url: this.url + '/search', dataMapping: this.projection })
+      this.featuresService.rootUrl = this.url
+      this.results = []
+      this.featuresService.search$Json(this.searchParams).subscribe(x => {
+        this.results = x.features
+      })
     }
   }
 
-  selectResult(item: Feature<Geometry>) {
+  selectResult(item: FeatureJsonfg) {
+    this.logger.log('lookup via link to api: ')
     this.logger.log(item)
-    this.selectedResultUrl = item.getProperties()['href'] as string
+    if (item.links![0].href) {
+      // this.selectedResultUrl = item.links![0].href as string
+      //e.g: this.selectedResultUrl =
+      //  'https://api.pdok.nl/lv/bag/ogc/v1-demo/collections/verblijfsobject/items/80f96ef7-dfa4-5197-b681-cfd92b10757e'
+    }
+  }
+  getHighLight(r: { properties: unknown }): string {
+    return this.getProperty(r, 'highlight')
+  }
+
+  getDisplayname(r: { properties: unknown }): string {
+    return this.getProperty(r, 'displayName')
+  }
+
+  getProperty(r: { properties: unknown }, propertyName: string): string {
+    const p = r.properties as { [key: string]: unknown }
+
+    if (p[propertyName]) {
+      return p[propertyName] as string
+    } else {
+      return ''
+    }
+  }
+
+  paramChanged(event: Search$Json$Params) {
+    this.logger.log('paramchanged:')
+    this.logger.log(JSON.stringify(event))
+    this.searchParams = event
+    this.lookup()
   }
 }
diff --git a/viewer/src/app/location-search/search-options/search-options.component.html b/viewer/src/app/location-search/search-options/search-options.component.html
@@ -3,14 +3,25 @@
     <h2>Collections to search</h2>
     <div *ngFor="let collection of collections; let i = index">
       <label>
-        <input type="checkbox" [checked]="isActiveCollection(collection.title)" />
+        <input type="checkbox" [checked]="isActiveCollection(collection.title)" (change)="checboxChanged(collection.title, $event)" />
         {{ collection.title }}
       </label>
+      <label>
+        (weight
+        <input
+          type="number"
+          [value]="getRelevance(collection.title)"
+          (keyup)="relevanceChanged(collection.title, $event)"
+          min="0"
+          max="1"
+          step="0.1" />
+        )
+      </label>
     </div>
   </ng-container>
 </ng-container>
 
-<button title="show search options" (click)="toggleVisible()">
+<button title="show/hide search options" (click)="toggleVisible()">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24">
     <path
       d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" />