feat(web worker): more fluent search

Phonebook.Frontend/.dockerignore

@@ -8,6 +8,9 @@
 !protractor.conf.js
 !proxy.conf.json
 !tsconfig.json
+!tsconfig.app.json
+!tsconfig.spec.json
+!tsconfig.worker.json
 !tslint.json
 !nginx
 !substitute_variables.sh

Phonebook.Frontend/.gitignore

@@ -1,13 +1,18 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-dist/
+/dist
 /tmp
 /out-tsc
-/src/changelog.md
+# Only exists if Bazel was run
+/bazel-out
 
 # dependencies
-node_modules/
+/node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
 
 # IDEs and editors
 /.idea
@@ -25,23 +30,28 @@ node_modules/
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+.history/*
 
 # misc
 /.sass-cache
 /connect.lock
 /coverage
 /libpeerconnection.log
 npm-debug.log
+yarn-error.log
 testem.log
 /typings
-yarn-error.log
 key.pem
 cert.pem
 
-# e2e
-/e2e/*.js
-/e2e/*.map
-
 # System Files
 .DS_Store
-Thumbs.db
+Thumbs.db
+
+
+# Custom Settings
+
+/src/changelog.md
+
+## e2e
+/e2e/*.map

Phonebook.Frontend/Dockerfile

@@ -12,7 +12,7 @@ RUN npm ci
 # Because: https://stackoverflow.com/questions/37715224/copy-multiple-directories-with-one-command
 COPY ./src/ ./src/
 
-COPY ["angular.json", "tsconfig.json", "tslint.json", "./"]
+COPY ["angular.json", "tsconfig.json", "tsconfig.app.json", "tsconfig.spec.json", "tsconfig.worker.json", "tslint.json", "./"]
 RUN npm run build:de
 RUN npm run build:en
 

Phonebook.Frontend/angular.json

@@ -14,7 +14,7 @@
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
             "assets": [
               "src/assets",
@@ -79,7 +79,7 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "showCircularDependencies": true,
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
             "assets": [
               "src/assets",
@@ -112,7 +112,8 @@
                 "replace": "src/environments/environment.ts",
                 "with": "src/environments/environment.prod.ts"
               }
-            ]
+            ],
+            "webWorkerTsConfig": "tsconfig.worker.json"
           },
           "configurations": {
             "en": {
@@ -172,7 +173,7 @@
             "main": "src/test.ts",
             "karmaConfig": "./karma.conf.js",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
+            "tsConfig": "tsconfig.spec.json",
             "scripts": [],
             "sourceMap": false,
             "styles": [
@@ -196,38 +197,22 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json",
+              "tsconfig.worker.json"
             ],
             "exclude": [
               "**/node_modules/**"
             ]
           }
-        }
-      }
-    },
-    "phonebook-e2e": {
-      "root": "",
-      "sourceRoot": "",
-      "projectType": "application",
-      "architect": {
+        },
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
-            "protractorConfig": "./protractor.conf.js",
+            "protractorConfig": "e2e/protractor.conf.js",
             "devServerTarget": "phonebook:serve"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }

Phonebook.Frontend/protractor.conf.js → Phonebook.Frontend/e2e/protractor.conf.js

@@ -6,9 +6,12 @@ process.env.CHROME_BIN = require('puppeteer').executablePath();
 
 const { SpecReporter } = require('jasmine-spec-reporter');
 
+/**
+ * @type { import("protractor").Config }
+ */
 exports.config = {
   allScriptsTimeout: 11000,
-  specs: ['./e2e/**/*.e2e-spec.ts'],
+  specs: ['./src/**/*.e2e-spec.ts'],
   capabilities: {
     browserName: 'chrome',
     binary: process.env.CHROME_BIN,
@@ -26,7 +29,7 @@ exports.config = {
   },
   onPrepare() {
     require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
+      project: require('path').join(__dirname, './tsconfig.json')
     });
     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   },

Phonebook.Frontend/e2e/tsconfig.e2e.json → Phonebook.Frontend/e2e/tsconfig.json

@@ -2,13 +2,8 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
-    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
+    "types": ["jasmine", "jasminewd2", "node"]
   }
-}
+}

Phonebook.Frontend/src/app/modules/table/PersonsDataSource.ts

@@ -1,9 +1,10 @@
+import { HttpClient } from '@angular/common/http';
 import { MatTableDataSource } from '@angular/material/table';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { TableLogic } from 'src/app/modules/table/table-logic';
-import { Column, SearchFilter, TableSort } from 'src/app/shared/models';
+import { BehaviorSubject, Observable, Subscriber } from 'rxjs';
+import { performSearch, SearchParams } from 'src/app/modules/table/SearchParams';
+import { SearchFilter, TableSort } from 'src/app/shared/models';
 import { Person } from 'src/app/shared/models/classes';
-import { PhonebookSortDirection } from 'src/app/shared/models/enumerables/PhonebookSortDirection';
+import { ColumnId } from 'src/app/shared/models/enumerables/ColumnId';
 
 export class PersonsDataSource extends MatTableDataSource<Person> {
   private PAGE_SIZE: number = 30;
@@ -32,9 +33,9 @@ export class PersonsDataSource extends MatTableDataSource<Person> {
 
   public dataChanged: BehaviorSubject<Person[]> = new BehaviorSubject<Person[]>(this.data);
 
-  private lastFilterKeyword: string = '';
+  private worker: Worker | null = null;
 
-  constructor(private dataSource: Person[]) {
+  constructor(private dataSource: Person[], private httpClient: HttpClient) {
     super();
   }
 
@@ -50,41 +51,63 @@ export class PersonsDataSource extends MatTableDataSource<Person> {
   public refresh(
     filterKeyword: string,
     searchFilters: SearchFilter[],
-    searchableColumns: Column[],
-    sort: TableSort
+    searchableColumns: ColumnId[],
+    sort: TableSort | null
   ): Observable<Person[]> {
     this.loadingSubject.next(true);
     return new Observable<Person[]>(observer => {
-      let preResult = this.dataSource;
+      const searchParams: SearchParams = {
+        filterKeyword: filterKeyword,
+        searchFilters: searchFilters,
+        searchableColumns: searchableColumns,
+        sort: sort,
+        data: this.dataSource
+      };
 
-      // Filtering
-      searchFilters.forEach(searchFilter => {
-        preResult = TableLogic.filter(preResult, searchFilter.filterValue, [searchFilter.filterColumn]);
-      });
-
-      // Searching
-      let searchResult: Person[] = TableLogic.filter(preResult, filterKeyword, searchableColumns);
-
-      // Sorting
-      switch (sort.direction) {
-        case PhonebookSortDirection.none: {
-          searchResult = TableLogic.rankedSort(searchResult, filterKeyword, searchableColumns);
-          break;
-        }
-        default: {
-          searchResult = TableLogic.sort(searchResult, sort);
-          break;
+      if (typeof Worker !== 'undefined') {
+        // Reuse the Worker if it already exists.
+        if (this.worker == null) {
+          // Loading external Workers does not error if it could not be found...
+          this.httpClient
+            .get('table.worker', {
+              responseType: 'text'
+            })
+            .subscribe(
+              req => {
+                const blob = new Blob([req]);
+                this.worker = new Worker(window.URL.createObjectURL(blob), { type: 'module' });
+                this.worker.onmessage = ({ data }) => {
+                  this.resolveObserver(data, observer);
+                };
+                this.worker.onerror = (error: ErrorEvent) => {
+                  const searchResult = performSearch(searchParams);
+                  this.resolveObserver(searchResult, observer);
+                  throw new Error('Service Worker crashed.');
+                };
+                this.worker.postMessage(searchParams);
+              },
+              () => {
+                const searchResult = performSearch(searchParams);
+                this.resolveObserver(searchResult, observer);
+                throw new Error('Service Worker could not be loaded.');
+              }
+            );
         }
+      } else {
+        const searchResult = performSearch(searchParams);
+        this.resolveObserver(searchResult, observer);
       }
-      this.allData = searchResult;
-      this.lastFilterKeyword = filterKeyword;
-
-      this.loadingSubject.next(false);
-      observer.next(searchResult);
-      observer.complete();
     });
   }
 
+  private resolveObserver(searchResult: Person[], observer: Subscriber<Person[]>): void {
+    this.allData = searchResult;
+
+    this.loadingSubject.next(false);
+    observer.next(searchResult);
+    observer.complete();
+  }
+
   private updateVisibleData() {
     this.dataChanged.next(this.allData.slice(0, this.pageSize));
   }

Phonebook.Frontend/src/app/modules/table/SearchParams.ts

@@ -0,0 +1,31 @@
+import { TableLogic } from 'src/app/modules/table/table-logic';
+import { Person, PhonebookSortDirection, SearchFilter, TableSort } from 'src/app/shared/models';
+import { ColumnId } from 'src/app/shared/models/enumerables/ColumnId';
+
+export class SearchParams {
+  public filterKeyword: string;
+  public searchFilters: SearchFilter[];
+  public searchableColumns: ColumnId[];
+  public sort: TableSort | null;
+  public data: Person[];
+}
+
+export function performSearch(searchParams: SearchParams): Person[] {
+  let preResult = searchParams.data;
+
+  // Filtering
+  searchParams.searchFilters.forEach(searchFilter => {
+    preResult = TableLogic.filter(preResult, searchFilter.filterValue, [searchFilter.filterColumn]);
+  });
+
+  // Searching
+  let searchResult: Person[] = TableLogic.filter(preResult, searchParams.filterKeyword, searchParams.searchableColumns);
+
+  // Sorting
+  if (searchParams.sort == null || searchParams.sort.direction === PhonebookSortDirection.none) {
+    searchResult = TableLogic.rankedSort(searchResult, searchParams.filterKeyword, searchParams.searchableColumns);
+  } else {
+    searchResult = TableLogic.sort(searchResult, searchParams.sort);
+  }
+  return searchResult;
+}