From b5cbf38ef1298751abc0d9aca953c189816f0f3e Mon Sep 17 00:00:00 2001
From: Marcel <me@m4rc3l.de>
Date: Sun, 30 Jun 2024 16:52:39 +0200
Subject: [PATCH] search: improve performance

---
 demo/flake.lock                | 31 ++++--------------------------
 src/app/app.component.html     |  8 ++++++--
 src/app/app.component.ts       | 11 ++++++++---
 src/app/core/search.service.ts | 35 +++++++++++++++++++++++++++++++---
 4 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/demo/flake.lock b/demo/flake.lock
index 525dd9c..bee6738 100644
--- a/demo/flake.lock
+++ b/demo/flake.lock
@@ -224,7 +224,9 @@
         "nixpkgs": [
           "nixpkgs"
         ],
-        "search": "search"
+        "search": [
+          "search"
+        ]
       },
       "locked": {
         "lastModified": 1719615856,
@@ -289,35 +291,10 @@
         "nixos-modules": "nixos-modules",
         "nixpkgs": "nixpkgs",
         "nixvim": "nixvim",
-        "search": "search_2"
+        "search": "search"
       }
     },
     "search": {
-      "inputs": {
-        "flake-utils": [
-          "nixos-modules",
-          "flake-utils"
-        ],
-        "nixpkgs": [
-          "nixos-modules",
-          "nixpkgs"
-        ]
-      },
-      "locked": {
-        "lastModified": 1719609822,
-        "narHash": "sha256-zc6zlMx/x/LFTAbipkDBsWBE99SX1HDqry1Bxi5Sqqg=",
-        "owner": "nuschtos",
-        "repo": "search",
-        "rev": "4e13cf6dbd5d1f193a852af35f2f684eb538c8b8",
-        "type": "github"
-      },
-      "original": {
-        "owner": "nuschtos",
-        "repo": "search",
-        "type": "github"
-      }
-    },
-    "search_2": {
       "inputs": {
         "flake-utils": [
           "flake-utils"
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 103eae2..e9b8b3a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -7,10 +7,14 @@ <h1>NüschtOS Search</h1>
     <feel-text-field [formControl]="search" label="Search"></feel-text-field>
 
     <ul>
-      <li *ngFor="let option of results | async">
-        <a [routerLink]="[]" [queryParams]="{option: option.name}" queryParamsHandling="merge" routerLinkActive="active"><code>{{option.name}}</code></a>
+      <li *ngFor="let option of results | async; trackBy trackBy">
+        <a [routerLink]="[]" [queryParams]="{option: option.name}" queryParamsHandling="merge"
+          routerLinkActive="active">
+          <code>{{option.name}}</code>
+        </a>
       </li>
     </ul>
+    <p>Only showing the first 500 results. Make your search term more concise.</p>
   </div>
 </aside>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ea916cd..651f0e5 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Router, RouterLink, RouterOutlet } from '@angular/router';
-import { SearchService } from './core/search.service';
+import { Option, SearchService } from './core/search.service';
 import { of, switchMap } from 'rxjs';
 import { AsyncPipe, NgFor } from '@angular/common';
 import { TextFieldComponent } from "@feel/form";
@@ -25,7 +25,7 @@ export class AppComponent implements AfterViewInit {
       if (q && q.length > 0) {
         return this.searchService.search(q);
       } else {
-        return of([]);
+        return this.searchService.all();
       }
     }),
   );
@@ -36,10 +36,15 @@ export class AppComponent implements AfterViewInit {
   ) {
   }
 
-  ngAfterViewInit(): void {
+  public ngAfterViewInit(): void {
     this.search.setValue(AppComponent.getQuery());
   }
+
   private static getQuery(): string | null {
     return new URL(location.href).searchParams.get("query");
   }
+
+  protected trackBy(_idx: number, { name }: Option): string {
+    return name;
+  }
 }
diff --git a/src/app/core/search.service.ts b/src/app/core/search.service.ts
index 0a6e07f..fcb093b 100644
--- a/src/app/core/search.service.ts
+++ b/src/app/core/search.service.ts
@@ -36,12 +36,41 @@ export class SearchService {
 
   public search(query: string): Observable<Option[]> {
     this.update();
-    return this.data.pipe(map(options => options.filter(option => {
-      return option.name.includes(query)
-    })));
+    return this.data.pipe(map(options => {
+      const result = [];
+      let i = 0;
+      for (const option of options) {
+        if (option.name.includes(query)) {
+          result.push(option);
+          i++;
+          // TODO: pagination
+          if (i === 500) {
+            return result;
+          }
+        }
+      }
+      return result;
+    }));
   }
+
   public getByName(name: string): Observable<Option | undefined> {
     this.update();
     return this.data.pipe(map(options => options.find(option => option.name === name)));
   }
+
+  public all(): Observable<Option[]> {
+    return this.data.pipe(map(options => {
+      const result = [];
+      let i = 0;
+      for (const option of options) {
+        result.push(option);
+        i++;
+        // TODO: pagination
+        if (i === 500) {
+          return result;
+        }
+      }
+      return result;
+    }));
+  }
 }