update angular to 13.1.0

2022-03-20 07:58:48 +01:00
parent 35df9e1fd2
commit 390407f2ed
37 changed files with 14907 additions and 6770 deletions
--- a/pdb-js/.browserslistrc
+++ b/pdb-js/.browserslistrc
@@ -2,11 +2,15 @@
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries

+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist

-> 0.5%
-last 2 versions
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
 Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
--- a/pdb-js/.editorconfig
+++ b/pdb-js/.editorconfig
@@ -8,6 +8,9 @@ indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true

+[*.ts]
+quote_type = single
+
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false
--- a/pdb-js/.gitignore
+++ b/pdb-js/.gitignore
@@ -1,8 +1,7 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.

 # compiled output
-/build
-/bin
+/dist
 /tmp
 /.gradle/
 /out-tsc
@@ -14,7 +13,6 @@

 # profiling files
 chrome-profiler-events*.json
-speed-measure-plugin*.json

 # IDEs and editors
 /.idea
@@ -34,6 +32,7 @@ speed-measure-plugin*.json
 .history/*

 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
@@ -46,4 +45,3 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
-/env.sh
--- a/pdb-js/.vscode/extensions.json
+++ b/pdb-js/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}
--- a/pdb-js/.vscode/launch.json
+++ b/pdb-js/.vscode/launch.json
@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}
--- a/pdb-js/.vscode/tasks.json
+++ b/pdb-js/.vscode/tasks.json
@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}
--- a/pdb-js/angular.json
+++ b/pdb-js/angular.json
@@ -3,88 +3,87 @@
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
-    "pdb": {
+    "pdb-js": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
-      "prefix": "pdb",
+      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
-            "outputPath": "build/generated/resources",
+            "outputPath": "dist/pdb-js",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
-              "src/styles.scss",
-              "src/custom-theme.scss"
+              "src/styles.scss"
            ],
-            "scripts": [],
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
+            "scripts": []
          },
          "configurations": {
            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
            }
          },
-          "defaultConfiguration": ""
+          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "pdb:build",
-            "proxyConfig": "proxy.conf.json"
-          },
          "configurations": {
            "production": {
-              "browserTarget": "pdb:build:production"
+              "browserTarget": "pdb-js:build:production"
+            },
+            "development": {
+              "browserTarget": "pdb-js:build:development"
            }
-          }
+          },
+          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
-            "browserTarget": "pdb:build"
+            "browserTarget": "pdb-js:build"
          }
        },
        "test": {
@@ -94,6 +93,7 @@
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
+            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
@@ -103,33 +103,9 @@
            ],
            "scripts": []
          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "pdb:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "pdb:serve:production"
-            }
-          }
        }
      }
-    }},
-  "defaultProject": "pdb"
+    }
+  },
+  "defaultProject": "pdb-js"
 }
--- a/pdb-js/e2e/protractor.conf.js
+++ b/pdb-js/e2e/protractor.conf.js
@@ -1,32 +0,0 @@
-// @ts-check
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-/**
- * @type { import("protractor").Config }
- */
-exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './src/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    'browserName': 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  onPrepare() {
-    require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.json')
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
-};
--- a/pdb-js/e2e/src/app.e2e-spec.ts
+++ b/pdb-js/e2e/src/app.e2e-spec.ts
@@ -1,23 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('pdb app is running!');
-  });
-
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
-    } as logging.Entry));
-  });
-});
--- a/pdb-js/e2e/src/app.po.ts
+++ b/pdb-js/e2e/src/app.po.ts
@@ -1,11 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class AppPage {
-  navigateTo() {
-    return browser.get(browser.baseUrl) as Promise<any>;
-  }
-
-  getTitleText() {
-    return element(by.css('app-root .content span')).getText() as Promise<string>;
-  }
-}
--- a/pdb-js/e2e/tsconfig.json
+++ b/pdb-js/e2e/tsconfig.json
@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "es2018",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}
--- a/pdb-js/env.sh
+++ b/pdb-js/env.sh
@@ -0,0 +1,4 @@
+#
+# usage: source env.sh
+#
+export PATH=/home/andi/ws/performanceDb/repo/pdb-js/node_modules/.bin:/home/andi/ws/performanceDb/repo/pdb-js/build/npm/npm-v8.1.2/bin:/home/andi/ws/performanceDb/repo/pdb-js/.gradle/nodejs/node-v16.13.1-linux-x64/bin:$PATH
--- a/pdb-js/karma.conf.js
+++ b/pdb-js/karma.conf.js
@@ -9,16 +9,28 @@ module.exports = function (config) {
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
+      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/pdb'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/pdb-js'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
--- a/pdb-js/package-lock.json
+++ b/pdb-js/package-lock.json
--- a/pdb-js/package.json
+++ b/pdb-js/package.json
@@ -1,52 +1,46 @@
 {
-  "name": "pdb",
+  "name": "pdb-js",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
-    "releasebuild": "ng build --configuration production",
+    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "releasebuild": "ng build --configuration production"
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^12.2.9",
-    "@angular/cdk": "^12.2.9",
-    "@angular/common": "^12.2.9",
-    "@angular/compiler": "^12.2.9",
-    "@angular/core": "^12.2.9",
-    "@angular/forms": "^12.2.9",
-    "@angular/material": "^12.2.9",
-    "@angular/platform-browser": "^12.2.9",
-    "@angular/platform-browser-dynamic": "^12.2.9",
-    "@angular/router": "^12.2.9",
+    "@angular/animations": "~13.1.0",
+    "@angular/cdk": "^13.1.0",
+    "@angular/common": "~13.1.0",
+    "@angular/compiler": "~13.1.0",
+    "@angular/core": "~13.1.0",
+    "@angular/forms": "~13.1.0",
+    "@angular/material": "^13.1.0",
+    "@angular/platform-browser": "~13.1.0",
+    "@angular/platform-browser-dynamic": "~13.1.0",
+    "@angular/router": "~13.1.0",
    "moment": "^2.29.1",
-    "rxjs": "^6.6.7",
+    "rxjs": "~7.4.0",
    "rxjs-compat": "^6.6.7",
-    "tslib": "^2.3.1",
+    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^12.2.9",
-    "@angular/cli": "^12.2.9",
-    "@angular/compiler-cli": "^12.2.9",
-    "@angular/language-service": "^12.2.9",
-    "@types/jasmine": "^3.9.1",
-    "@types/jasminewd2": "^2.0.10",
-    "@types/node": "^12.20.28",
-    "codelyzer": "^6.0.2",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.3.4",
+    "@angular-devkit/build-angular": "~13.1.1",
+    "@angular/cli": "~13.1.1",
+    "@angular/compiler-cli": "~13.1.0",
+    "@types/jasmine": "~3.10.0",
+    "@types/node": "^12.11.1",
+    "jasmine-core": "~3.10.0",
+    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.7.0",
-    "protractor": "~7.0.0",
-    "ts-node": "~8.5.4",
-    "tslint": "^6.1.0",
-    "typescript": "4.3.5"
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "typescript": "~4.5.2"
  }
 }
--- a/pdb-js/src/app/gallery-view/gallery-filter-view.component.html
+++ b/pdb-js/src/app/gallery-view/gallery-filter-view.component.html
@@ -10,7 +10,7 @@
  </mat-select>
 </mat-form-field>

-<pdb-image-toggle *ngIf="filterBy" images="{{compareImages}}" (valueChanged)="comparatorChanged($event)"></pdb-image-toggle>
+<pdb-image-toggle *ngIf="filterBy" images="{{compareImages}}" (valueChanged)="comparatorChanged()"></pdb-image-toggle>

 <mat-form-field  *ngIf="filterBy" class="pdb-form-number-long">
  <input matInput type="number" placeholder="" min="0" [(ngModel)]="value">
--- a/pdb-js/src/app/gallery-view/gallery-view.component.html
+++ b/pdb-js/src/app/gallery-view/gallery-view.component.html
@@ -15,10 +15,10 @@
    </mat-form-field>
    
    
-    <pdb-image-toggle images="{{ascDescImages}}" (valueChanged)="sortOrderChanged($event)"></pdb-image-toggle>
+    <pdb-image-toggle images="{{ascDescImages}}" (valueChanged)="sortOrderChanged()"></pdb-image-toggle>
    
    
-    <pdb-gallery-filter-view (valueChanged)="filterChanged($event)"></pdb-gallery-filter-view>
+    <pdb-gallery-filter-view (valueChanged)="filterChanged()"></pdb-gallery-filter-view>
    
    <mat-checkbox [(ngModel)]="showDetails">Show Details</mat-checkbox>
  </div>
--- a/pdb-js/src/app/gallery-view/gallery-view.component.ts
+++ b/pdb-js/src/app/gallery-view/gallery-view.component.ts
@@ -46,8 +46,7 @@ export class GalleryFilterView {
  @Output()
  valueChanged : EventEmitter<GalleryFilterData> = new EventEmitter<GalleryFilterData>();
  
-  comparatorChanged(newComparator: string){
-    this._comparator = newComparator;
+  comparatorChanged(){
    this.valueChanged.emit(undefined);
  }
  
@@ -115,7 +114,7 @@ export class GalleryViewComponent implements OnInit {
  showDetails = false;
  
  @ViewChild(GalleryFilterView)
-  filter : GalleryFilterView;
+  filter! : GalleryFilterView;
  
  ascDescImages = JSON.stringify([
    {
@@ -133,7 +132,7 @@ export class GalleryViewComponent implements OnInit {
  constructor(private plotService: PlotService, private snackBar: MatSnackBar) {
  }

-  showError(message) {
+  showError(message: string) {
    this.snackBar.open(message, "", {
      duration: 5000,
      verticalPosition: 'top'
@@ -193,8 +192,8 @@ export class GalleryViewComponent implements OnInit {
  
  filterPredicate(galleryItem: GalleryItem){
    const predicate = this.filter.comparator == 'LESS_EQUAL'
-      ? function(a, b) { return a <= b; }
-      : function(a, b) { return a >= b; };
+      ? function(a: number, b: number) { return a <= b; }
+      : function(a: number, b: number) { return a >= b; };
    const millis = this.timeUnitToMillis(this.filter.value, this.filter.unit);
    switch(this.filter.filterBy){
      case 'NONE':
@@ -214,7 +213,7 @@ export class GalleryViewComponent implements OnInit {
    throw "unhandled option: " + this.filter.filterBy;
  }
  
-  timeUnitToMillis(value, unit)
+  timeUnitToMillis(value: number, unit: string)
  {
    switch(unit){
      case 'NO_UNIT':
@@ -260,7 +259,7 @@ export class GalleryViewComponent implements OnInit {
      return;
    }
    
-    const splitByValue = this.splitByValuesQueue.pop();
+    const splitByValue = <string>this.splitByValuesQueue.pop();
    
    let request = masterRequest.copy();
    request.query = "("+request.query+") and " + splitByField+"="+ splitByValue;
@@ -283,7 +282,7 @@ export class GalleryViewComponent implements OnInit {
      that.sortAndFilterGallery();
      that.renderGalleryRecursively(masterRequest, splitByField);
    },
-    error => {
+    (error:any) => {
      that.showError(error.error.message);
    });
  }
@@ -295,12 +294,11 @@ export class GalleryViewComponent implements OnInit {

  get sortBy(): string { return this._sortBy; }
 
-  sortOrderChanged(event){
-    this.sortOrder = event;
+  sortOrderChanged(){
    this.sortAndFilterGallery();
  }
  
-  filterChanged(event){
+  filterChanged(){
    this.sortAndFilterGallery();
  }

@@ -313,7 +311,7 @@ export class GalleryViewComponent implements OnInit {
 })
 export class GalleryItemView {
  @Input()
-  data: GalleryItem;
+  data!: GalleryItem;

  @Input()
  showDetails: boolean = false;
@@ -338,7 +336,7 @@ export class GalleryItem {
  imageUrl: string;
  stats: PlotResponseStats;
  splitByValue : string;
-  show : boolean;
+  show : boolean = false;
  
  constructor(splitByValue: string, plotResponse: PlotResponse){
    this.thumbnailUrl = plotResponse.thumbnailUrl;
--- a/pdb-js/src/app/image-toggle/image-toggle.component.ts
+++ b/pdb-js/src/app/image-toggle/image-toggle.component.ts
@@ -17,7 +17,7 @@ export class ImageToggleComponent implements OnInit {
  
  text = undefined;
  
-  _states : Array<any>;
+  _states : Array<any> = [];

  constructor() { }

@@ -34,7 +34,7 @@ export class ImageToggleComponent implements OnInit {
    return this._states[this.index].title;
  }

-  toggle(event){
+  toggle(event: any){
    this.index = (this.index+1) % this._states.length;
    this.text = this._states[this.index].text;
    this.valueChanged.emit(this._states[this.index].value);
--- a/pdb-js/src/app/plot-details/plot-details.component.html
+++ b/pdb-js/src/app/plot-details/plot-details.component.html
@@ -17,7 +17,7 @@
    <td><div class="{{ pointTypeClass(stat.dashTypeAndColor) }}" title="{{ stat.name }}"></div></td>
    <td>{{ stat.values }}</td>
    <td>{{ utils.format(stat.average, valueFormat) }}</td>
-    <td *ngFor="let key of percentilesToPlot.keys()">{{utils.format(stat.percentiles[percentilesToPlot.get(key)], valueFormat)}}</td>
+    <td *ngFor="let key of percentilesToPlot.keys()">{{percentileStat(key, stat)}}</td> 
    <td>{{ utils.format(stat.maxValue, valueFormat)}}</td>
  </tr>
 </table>
@@ -51,7 +51,7 @@
      <tr *ngFor="let statsRow of stats.dataSeriesStats">
        <td><div class="{{ pointTypeClass(statsRow.dashTypeAndColor) }}" title="{{ statsRow.name }}"></div></td>
        <td *ngFor="let statsCol of stats.dataSeriesStats">
-          {{ utils.toPercent(statsRow.percentiles[percentilesToPlot.get(p)] / statsCol.percentiles[percentilesToPlot.get(p)])  }}
+          {{ toPercent(statsRow, statsCol, p) }}
        </td>
      </tr>
    </table>
--- a/pdb-js/src/app/plot-details/plot-details.component.ts
+++ b/pdb-js/src/app/plot-details/plot-details.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Output, ViewChild, EventEmitter, ɵpublishDefaultGlobalUtils } from '@angular/core';
-import { DashTypeAndColor, PlotResponseStats } from '../plot.service';
+import { DashTypeAndColor, PlotResponseStats, DataSeriesStats } from '../plot.service';
 import { UtilService } from '../utils.service';

@Component({
@@ -10,7 +10,7 @@ import { UtilService } from '../utils.service';
 export class PlotDetailsComponent {

  @Input()
-  stats: PlotResponseStats;
+  stats!: PlotResponseStats;

  hasPercentiles = false;
  
@@ -25,17 +25,19 @@ export class PlotDetailsComponent {
  ngOnInit() {
    this.hasPercentiles = false;
    this.percentilesToPlot.clear();
-    for (let i = 0; i < this.stats.dataSeriesStats.length; i++)
-    {
-      const stat = this.stats.dataSeriesStats[i];
-      if (stat.percentiles.hasOwnProperty("50.000"))
+    if (this.stats) {
+      for (let i = 0; i < this.stats.dataSeriesStats.length; i++)
      {
-        this.hasPercentiles = true;
-        this.percentilesToPlot.set('median','50.000');
-        this.percentilesToPlot.set('75th','75.000');
-        this.percentilesToPlot.set('95th','95.000');
-        this.percentilesToPlot.set('99th','99.000');
-        break;
+        const stat = this.stats.dataSeriesStats[i];
+        if (stat.percentiles.hasOwnProperty("50.000"))
+        {
+          this.hasPercentiles = true;
+          this.percentilesToPlot.set('median','50.000');
+          this.percentilesToPlot.set('75th','75.000');
+          this.percentilesToPlot.set('95th','95.000');
+          this.percentilesToPlot.set('99th','99.000');
+          break;
+        }
      }
    }
  }
@@ -49,4 +51,27 @@ export class PlotDetailsComponent {
      +" plot-details-plotType_"+typeAndColor.pointType
      +" plot-details-plotType_"+typeAndColor.color.toLocaleLowerCase();
  } 
+  
+  toPercent(statsRow: DataSeriesStats, statsCol: DataSeriesStats, key: string){
+    const percentile = this.percentilesToPlot.get(key);
+    if (percentile) {
+      const rowValue = statsRow.percentiles.get(percentile);
+      const columnValue = statsCol.percentiles.get(percentile);
+      if (rowValue !== undefined && columnValue !== undefined) {
+        return this.utils.toPercent(rowValue / columnValue);
+      }
+    }
+    return "?%"
+  }
+
+  percentileStat(key: string, stat: DataSeriesStats): string{
+    const plotKey = this.percentilesToPlot.get(key);
+    if (plotKey !== undefined){
+      const value = stat.percentiles.get(plotKey);
+      if (value !== undefined){
+        return this.utils.format(value, this.valueFormat);
+      }
+    }
+    return "no value";
+  }
 }
--- a/pdb-js/src/app/plot-view/plot-view.component.html
+++ b/pdb-js/src/app/plot-view/plot-view.component.html
@@ -29,7 +29,7 @@
       [style.width]="zoomInSliderStyleWidth"
    ></div>
  </div>
-  <div *ngIf="showStats" class="plot-view-overlay">
+  <div *ngIf="showStats && stats != null" class="plot-view-overlay">
    <pdb-plot-details [stats]="stats"></pdb-plot-details>
    <div class="top-right">
      <img 
--- a/pdb-js/src/app/plot-view/plot-view.component.ts
+++ b/pdb-js/src/app/plot-view/plot-view.component.ts
@@ -15,10 +15,10 @@ export class PlotViewComponent implements OnInit {
  readonly gnuplotBMargin = 76; // The bottom margin configured for gnuplot


-  imageUrl : string;
-  stats : PlotResponseStats;
+  imageUrl! : string;
+  stats: PlotResponseStats | null = null;
  
-  axes: AxesTypes;
+  axes!: AxesTypes;
  
  @Output()
  zoomRange : EventEmitter<SelectionRange> = new EventEmitter<SelectionRange>();
@@ -49,20 +49,20 @@ export class PlotViewComponent implements OnInit {
  hideZoomInSlider() {
    this.zoomInSliderStyleDisplay = "none";
  }
-  update_cursor(event){
+  update_cursor(event: MouseEvent){
    //$('#result-image').css('cursor', this.isInPlot(event) ? 'crosshair' : 'default');
    this.imageCursor = this.isInPlot(event) ? 'crosshair' : 'default';
  }
  
  imageWidth() {
-    return Math.floor(document.getElementById('result-image').offsetWidth);
+    return Math.floor(document.getElementById('result-image')!.offsetWidth);
  }
  
  imageHeight() {
-    return Math.floor(document.getElementById('result-image').offsetHeight);
+    return Math.floor(document.getElementById('result-image')!.offsetHeight);
  }
  
-  positionInImage(event) : any {
+  positionInImage(event: MouseEvent) : any {
    const rect = (<HTMLImageElement>document.getElementById('result-image')).getBoundingClientRect();
    const x= event.clientX - rect.left; 
    const y= event.clientY - rect.top; 
@@ -73,7 +73,7 @@ export class PlotViewComponent implements OnInit {
    return {x: x, y: y};
  }
  
-  isInPlot(event) : boolean{
+  isInPlot(event: MouseEvent) : boolean{
    const pos = this.positionInImage(event);
        
    return pos.x > this.gnuplotLMargin 
@@ -82,7 +82,7 @@ export class PlotViewComponent implements OnInit {
        && pos.y < this.imageHeight()- this.gnuplotBMargin;
  }
  
-  isInImage(event) : boolean{
+  isInImage(event: MouseEvent) : boolean{
    const pos = this.positionInImage(event);
        
    return pos.x > 0 
@@ -91,7 +91,7 @@ export class PlotViewComponent implements OnInit {
        && pos.y < this.imageHeight();
  }
  
-  dragStart(event) {
+  dragStart(event: MouseEvent) {
    //console.log("dragStart inPlot: " + this.isInPlot(event));
    
    event.preventDefault();
@@ -104,7 +104,7 @@ export class PlotViewComponent implements OnInit {
    }
  }

-  dragging(event) {
+  dragging(event: MouseEvent) {
    //console.log("dragging " + this.isInPlot(event));
    
    this.update_cursor(event);
@@ -128,7 +128,7 @@ export class PlotViewComponent implements OnInit {
    }
  }
  
-  dragStop(event) {
+  dragStop(event: MouseEvent) {
   if (this.in_drag_mode){
      this.in_drag_mode = false;
      this.hideZoomInSlider();
@@ -152,7 +152,7 @@ export class PlotViewComponent implements OnInit {
    }
  }
  
-  dragAbort(event) {
+  dragAbort(event: MouseEvent) {
    //console.log("drag_abort");
    if (this.in_drag_mode && !this.isInImage(event)) {
      this.in_drag_mode = false;
@@ -162,7 +162,7 @@ export class PlotViewComponent implements OnInit {
    }
  }
  
-  zoomByScroll(event) {
+  zoomByScroll(event: WheelEvent) {
    if (this.isInImage(event) && event.deltaY != 0 && this.axes.hasXAxis(DataType.Time)) {
      this.in_drag_mode = false;
      this.hideZoomInSlider();
--- a/pdb-js/src/app/plot.service.ts
+++ b/pdb-js/src/app/plot.service.ts
@@ -1,6 +1,6 @@
 import { Injectable, OnInit } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';


@@ -80,7 +80,7 @@ export class PlotService {
    const q = "("+query+") and "+splitBy+"=";
    return this.autocomplete(q, q.length+1, ResultMode.FULL_VALUES).pipe(
      map(
-        autocompleteResult => autocompleteResult.proposals.map(suggestion => suggestion.value)
+        (autocompleteResult: AutocompleteResult) => autocompleteResult.proposals.map((suggestion:Suggestion) => suggestion.value)
      )
    );
  }
@@ -181,39 +181,44 @@ export class AxesTypes {
    const x2 = this.getXAxisDataType(2);
    const y2 = this.getYAxisDataType(2);
  
-    return "x1:"+DataType[x1]+ " y1:"+DataType[y1]+ " x2:"+DataType[x2]+ " y2:"+DataType[y2]; 
+    return (x1 ? "x1:"+DataType[x1] : "")
+      + (y1 ? " y1:"+DataType[y1] : "")
+      + (x2 ? " x2:"+DataType[x2] : "")
+      + (y2 ? " y2:"+DataType[y2] : ""); 
  }
 }

 export class Suggestion {
-  value: string;
-  newQuery: string;
-  newCaretPosition: number;
+  constructor(
+    public value: string,
+    public newQuery: string,
+    public newCaretPosition: number){}
 }


 export class AutocompleteResult{
-  proposals: Array<Suggestion>;
+  constructor(public proposals: Array<Suggestion>){}
 }

 export class PlotRequest {
-  query : string;
-  height : number;
-  width : number;
-  thumbnailMaxWidth : number = 300;
-  thumbnailMaxHeight : number = 200;
-  groupBy : Array<string>;
-  limitBy : string;
-  limit : number;
-  y1:YAxisDefinition;
-  y2:YAxisDefinition;
-  dateRange : string;
-  aggregates : Array<string>;
-  keyOutside : boolean = false;
-  generateThumbnail : boolean;
-  intervalUnit: string;
-  intervalValue: number;
-  renderBarChartTickLabels: boolean = false;
+  constructor(
+    public query : string,
+    public height : number,
+    public width : number,
+    public thumbnailMaxWidth : number = 300,
+    public thumbnailMaxHeight : number = 200,
+    public groupBy : Array<string>,
+    public limitBy : string,
+    public limit : number,
+    public y1:YAxisDefinition,
+    public y2:YAxisDefinition|undefined,
+    public dateRange : string,
+    public aggregates : Array<string>,
+    public keyOutside : boolean = false,
+    public generateThumbnail : boolean,
+    public intervalUnit: string,
+    public intervalValue: number,
+    public renderBarChartTickLabels: boolean = false){}
  
  copy(): PlotRequest {
    return JSON.parse(JSON.stringify(this));
@@ -221,46 +226,52 @@ export class PlotRequest {
 }

 export class YAxisDefinition {
-  axisScale : string;
-  rangeMin : number;
-  rangeMax : number;
-  rangeUnit  : string;
+  constructor(
+    public axisScale : string,
+    public rangeMin : number,
+    public rangeMax : number,
+    public rangeUnit  : string){}
 }

 export class PlotResponse {
-  imageUrl : string;
-  stats : PlotResponseStats;
-  thumbnailUrl : string;
+  constructor(
+    public imageUrl : string,
+    public stats : PlotResponseStats,
+    public thumbnailUrl : string){}
 }

 export class PlotResponseStats {
-  maxValue : number;
-  values : number;
-  average : number ;
-  plottedValues : number;
-  maxAvgRatio: number;
-  dataSeriesStats : Array<DataSeriesStats>;
+  constructor(
+    public maxValue : number,
+    public values : number,
+    public average : number,
+    public plottedValues : number,
+    public maxAvgRatio: number,
+    public dataSeriesStats : Array<DataSeriesStats>){}
 }

 export class DataSeriesStats {
-  name: string;
-  values : number;
-  maxValue : number;
-  average : number;
-  plottedValues : number;
-  dashTypeAndColor: DashTypeAndColor;
-  percentiles: Map<string, number>
+  constructor(
+    public name: string,
+    public values : number,
+    public maxValue : number,
+    public average : number ,
+    public plottedValues : number,
+    public dashTypeAndColor: DashTypeAndColor,
+    public percentiles: Map<string, number>){}
 }

 export class DashTypeAndColor {
-  color: string;
-  pointType: number;
+  constructor(
+    public color: string,
+    public pointType: number) {}
 }

 export class FilterDefaults {
-  groupBy: Array<string>;
-  fields: Array<string>; 
-  splitBy: string;
+  constructor(
+    public groupBy: Array<string>,
+    public fields: Array<string>, 
+    public splitBy: string){}
 }

 export enum ResultMode {
--- a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts
+++ b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts
@@ -16,12 +16,12 @@ export class QueryAutocompleteComponent implements OnInit {

  suggestions = new FormControl();
    
-  filteredSuggestions: Observable<Suggestion[]>;
+  filteredSuggestions!: Observable<Suggestion[]>;
  
-  query : string; 
+  query : string = ""; 
  
  @ViewChild(MatAutocompleteTrigger)
-  autocomplete: MatAutocompleteTrigger;
+  autocomplete!: MatAutocompleteTrigger;
  
  
  constructor(private plotService: PlotService) {}
@@ -72,12 +72,12 @@ export class QueryAutocompleteComponent implements OnInit {
          
          that.autocomplete.openPanel();
        }, 
-        error => console.log(error)
+        (error:any) => console.log(error)
      );
  }
  
-  displaySuggestion(suggestion?: Suggestion): string | undefined {
+  displaySuggestion(suggestion?: Suggestion): string {
    //console.log("suggestion: "+JSON.stringify(suggestion));
-    return suggestion ? suggestion.newQuery : undefined;
+    return suggestion ? suggestion.newQuery : '';
  }
 }
--- a/pdb-js/src/app/utils.service.ts
+++ b/pdb-js/src/app/utils.service.ts
@@ -17,7 +17,7 @@ export class UtilService {
        }
    }

-    formatMs(valueInMs):string {
+    formatMs(valueInMs: number):string {
        const ms = Math.floor(valueInMs % 1000);
        const s = Math.floor((valueInMs / 1000) % 60);
        const m = Math.floor((valueInMs / (60*1000)) % 60);
--- a/pdb-js/src/app/visualization-page/visualization-page.component.ts
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { PlotService, PlotType, PlotRequest, PlotResponse, TagField, FilterDefaults, DataType, YAxisDefinition, AxesTypes  } from '../plot.service';
-import { Observable } from 'rxjs/Observable';
 import { FormControl, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { LimitByComponent } from '../limit-by/limit-by.component';
@@ -21,34 +20,34 @@ export class VisualizationPageComponent implements OnInit {
  
  dateRange = new FormControl('2019-10-05 00:00:00 - 2019-10-11 23:59:59');
    
-  selectedPlotType = [];
-  plotTypes: Array<any>;
+  selectedPlotType = new Array<PlotType>();
+  plotTypes: Array<any> = [];
    
  tagFields: Array<TagField> = new Array<TagField>();
  
  groupBy = new Array<TagField>();
  
  @ViewChild('limitbycomponent')
-  private limitbycomponent : LimitByComponent;
+  private limitbycomponent! : LimitByComponent;
  
  
  @ViewChild('y1AxisDefinitionComponent',  { read: YAxisDefinitionComponent })
-  private y1AxisDefinitionComponent : YAxisDefinitionComponent;
+  private y1AxisDefinitionComponent! : YAxisDefinitionComponent;
  
  @ViewChild('y2AxisDefinitionComponent',  { read: YAxisDefinitionComponent })
-  private y2AxisDefinitionComponent : YAxisDefinitionComponent;
+  private y2AxisDefinitionComponent! : YAxisDefinitionComponent;
  
  @ViewChild('query')
-  query: QueryAutocompleteComponent;
+  query!: QueryAutocompleteComponent;
  
  @ViewChild('plotView')
-  plotView: PlotViewComponent;
+  plotView!: PlotViewComponent;
  
  @ViewChild('galleryView')
-  galleryView: GalleryViewComponent;
+  galleryView!: GalleryViewComponent;
    
  enableGallery = false;
-  splitBy = null;
+  splitBy : TagField | undefined = undefined;
  y2AxisAvailable = false;
  
  intervalUnit = 'NO_INTERVAL';
@@ -58,7 +57,7 @@ export class VisualizationPageComponent implements OnInit {
  constructor(private plotService: PlotService, private snackBar: MatSnackBar) {
  }

-  showError(message) {
+  showError(message:string) {
    this.snackBar.open(message, "", {
      duration: 5000,
      verticalPosition: 'top'
@@ -70,12 +69,12 @@ export class VisualizationPageComponent implements OnInit {
    this.plotTypes = this.plotService.getPlotTypes();
    this.selectedPlotType.push(this.plotTypes[0]);
            
-    that.plotService.getFilterDefaults().subscribe(function(filterDefaults) {
+    that.plotService.getFilterDefaults().subscribe(function(filterDefaults: FilterDefaults) {
    
-      filterDefaults.fields.forEach(function(name) {
+      filterDefaults.fields.forEach(function(name:string) {
        that.tagFields.push(new TagField(name));
      },
-      error => {
+      (error: any) => {
        that.showError(error.error.message);
      });
    
@@ -103,12 +102,16 @@ export class VisualizationPageComponent implements OnInit {
  }
  
  gallery(){
-    const that = this;
-    this.plotView.imageUrl = '';
-    that.plotView.stats = null;
-    that.galleryView.show=true;
-    const request = this.createPlotRequest();
-    this.galleryView.renderGallery(request, this.splitBy.name);
+    if (this.splitBy != null){
+      const that = this;
+      this.plotView.imageUrl = '';
+      that.plotView.stats = null;
+      that.galleryView.show=true;
+      const request = this.createPlotRequest();
+      this.galleryView.renderGallery(request, this.splitBy.name);
+    } else {
+      console.error("variable splitBy was null when rendering gallery");
+    }
  }
  
  getAxes() : AxesTypes {
@@ -141,13 +144,13 @@ export class VisualizationPageComponent implements OnInit {
    
    const request = this.createPlotRequest();
    
-    this.plotService.sendPlotRequest(request).subscribe(function(plotResponse){
+    this.plotService.sendPlotRequest(request).subscribe(function(plotResponse: PlotResponse){
      console.log("response: " + JSON.stringify(plotResponse));
      that.plotView.imageUrl = "http://"+window.location.hostname+':'+window.location.port+'/'+plotResponse.imageUrl;
      that.plotView.stats = plotResponse.stats;
      document.dispatchEvent(new Event("invadersPause", {}));
    },
-    error => {
+    (error:any) => {
      that.plotView.imageUrl = '';
      that.plotView.stats = null;
      that.showError(error.error.message);
@@ -156,28 +159,31 @@ export class VisualizationPageComponent implements OnInit {
  }
  
  createPlotRequest(): PlotRequest {
-    const aggregates = [];
+    const aggregates = new Array<string>();
    this.selectedPlotType.forEach(a => aggregates.push(a.id));
    
    const y1 = this.y1AxisDefinitionComponent.getAxisDefinition();
    const y2 = this.y2AxisDefinitionComponent ? this.y2AxisDefinitionComponent.getAxisDefinition() : undefined;
+    const results = document.getElementById("results");
    
-    const request = new PlotRequest();
-    request.query = this.query.query;
-    request.height = document.getElementById("results").offsetHeight-1;
-    request.width = document.getElementById("results").offsetWidth-1;
-    request.groupBy = this.groupBy.map(o => o.name);
-    request.limitBy = this.limitbycomponent.limitBy;
-    request.limit = this.limitbycomponent.limit;
-    request.y1 = y1;
-    request.y2 = y2;
-    request.dateRange = this.dateRangeAsString(); 
-    request.aggregates = aggregates; 
-    request.keyOutside = false;
-    request.generateThumbnail = this.enableGallery;
-    request.intervalUnit = this.intervalUnit;
-    request.intervalValue = this.intervalValue;
-    request.renderBarChartTickLabels = this.renderBarChartTickLabels;
+    const request = new PlotRequest(
+      this.query.query,
+      results != null ? results.offsetHeight-1: 1024,
+      results != null ? results.offsetWidth-1 : 1024,
+      300, // thumbnailMaxWidth
+      200, // thumbnailMaxHeight
+      this.groupBy.map(o => o.name),
+      this.limitbycomponent.limitBy,
+      this.limitbycomponent.limit,
+      y1,
+      y2,
+      this.dateRangeAsString(), // dateRange 
+      aggregates, // aggregates 
+      false, // keyOutside
+      this.enableGallery, // generateThumbnail
+      this.intervalUnit,
+      this.intervalValue,
+      this.renderBarChartTickLabels);
    return request;
  }
  
@@ -222,16 +228,14 @@ export class VisualizationPageComponent implements OnInit {
  }
  
  parseDateRange(dateRangeAsString : string) : DateRange {
-    if (dateRangeAsString) {
-      const startDate = moment(dateRangeAsString.slice(0, 19));
-      const endDate = moment(dateRangeAsString.slice(22, 41));
+    const startDate = moment(dateRangeAsString.slice(0, 19));
+    const endDate = moment(dateRangeAsString.slice(22, 41));
    
-      return {
-        startDate: startDate,
-        endDate: endDate,
-        duration: moment.duration(endDate.diff(startDate))
-      };
-    }
+    return {
+      startDate: startDate,
+      endDate: endDate,
+      duration: moment.duration(endDate.diff(startDate))
+    };
  }
  
  setDateRange(startDate: any, endDate: any) {
@@ -260,9 +264,11 @@ export class DateRange {
  duration: any;
 }

+/*
 export class AxesUsed {
  x1: DataType;
  y1: DataType;
  x2: DataType;
  y2: DataType;
 }
+*/
--- a/pdb-js/src/app/y-axis-definition/y-axis-definition.component.ts
+++ b/pdb-js/src/app/y-axis-definition/y-axis-definition.component.ts
@@ -20,11 +20,6 @@ export class YAxisDefinitionComponent {
  }
  
  getAxisDefinition() {
-    const result = new YAxisDefinition();
-    result.axisScale = this.yAxisScale;
-    result.rangeMin = this.minYValue;
-    result.rangeMax = this.maxYValue;
-    result.rangeUnit = this.yAxisUnit;
-    return result;
+    return new YAxisDefinition(this.yAxisScale,this.minYValue,this.maxYValue,this.yAxisUnit);
  }
 }
--- a/pdb-js/src/custom-theme.scss
+++ b/pdb-js/src/custom-theme.scss
@@ -1,4 +1,6 @@
-@use '~@angular/material' as mat;
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
 // Plus imports for other components in your app.

 // Include the common styles for Angular Material. We include this here so that you only
@@ -10,13 +12,20 @@
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
 $candy-app-primary: mat.define-palette(mat.$blue-palette);
-$candy-app-accent:  mat.define-palette(mat.$blue-palette, A200, A100, A400);
+$candy-app-accent: mat.define-palette(mat.$blue-palette, A200, A100, A400);

 // The warn palette is optional (defaults to red).
-$candy-app-warn:    mat.define-palette(mat.$red-palette);
+$candy-app-warn: mat.define-palette(mat.$red-palette);

-// Create the theme object (a Sass map containing all of the palettes).
-$candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$candy-app-theme: mat.define-light-theme((
+  color: (
+    primary: $candy-app-primary,
+    accent: $candy-app-accent,
+    warn: $candy-app-warn,
+  )
+));

 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
--- a/pdb-js/src/polyfills.ts
+++ b/pdb-js/src/polyfills.ts
@@ -8,8 +8,8 @@
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */
@@ -18,16 +18,6 @@
 * BROWSER POLYFILLS
 */

-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -35,7 +25,7 @@
 * will put import in the top of bundle, so user need to create a separate file
 * in this directory (for example: zone-flags.ts), and put the following flags
 * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
+ * import './zone-flags';
 *
 * The flags allowed in zone-flags.ts are listed here.
 *
--- a/pdb-js/src/styles.scss
+++ b/pdb-js/src/styles.scss
@@ -1,5 +1,3 @@
-/* You can add global styles to this file, and also import other style files */
-@use '~@angular/material' as mat;
 /*
 blue
 #CBD7F4
--- a/pdb-js/src/test.ts
+++ b/pdb-js/src/test.ts
@@ -7,13 +7,19 @@ import {
  platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';

-declare const require: any;
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};

 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(),
 );
+
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.
--- a/pdb-js/tsconfig.app.json
+++ b/pdb-js/tsconfig.app.json
@@ -1,5 +1,6 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "./tsconfig.base.json",
+  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
@@ -10,9 +11,5 @@
  ],
  "include": [
    "src/**/*.d.ts"
-  ],
-  "exclude": [
-    "src/test.ts",
-    "src/**/*.spec.ts"
  ]
 }
--- a/pdb-js/tsconfig.base.json
+++ b/pdb-js/tsconfig.base.json
@@ -1,26 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "module": "es2020",
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "es2015",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2018",
-      "dom"
-    ]
-  },
-  "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
-  }
-}
--- a/pdb-js/tsconfig.json
+++ b/pdb-js/tsconfig.json
@@ -1,17 +1,32 @@
-/*
-  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
-  It is not intended to be used to perform a compilation.
-
-  To learn more about this file see: https://angular.io/config/solution-tsconfig.
-*/
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2017",
+    "module": "es2020",
+    "lib": [
+      "es2020",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
 }
--- a/pdb-js/tsconfig.spec.json
+++ b/pdb-js/tsconfig.spec.json
@@ -1,10 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "./tsconfig.base.json",
+  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
-      "jasmine",
-      "node"
+      "jasmine"
    ]
  },
  "files": [
--- a/pdb-js/tslint.json
+++ b/pdb-js/tslint.json
@@ -1,155 +0,0 @@
-{
-  "extends": "tslint:recommended",
-  "rules": {
-    "align": {
-      "options": [
-        "parameters",
-        "statements"
-      ]
-    },
-    "array-type": false,
-    "arrow-parens": false,
-    "arrow-return-shorthand": true,
-    "curly": true,
-    "deprecation": {
-      "severity": "warning"
-    },
-    "component-class-suffix": true,
-    "contextual-lifecycle": true,
-    "directive-class-suffix": true,
-    "directive-selector": [
-      true,
-      "attribute",
-      "app",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ],
-    "eofline": true,
-    "import-blacklist": [
-      true,
-      "rxjs/Rx"
-    ],
-    "import-spacing": true,
-    "indent": {
-      "options": [
-        "spaces"
-      ]
-    },
-    "interface-name": false,
-    "max-classes-per-file": false,
-    "max-line-length": [
-      true,
-      140
-    ],
-    "member-access": false,
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "static-field",
-          "instance-field",
-          "static-method",
-          "instance-method"
-        ]
-      }
-    ],
-    "no-consecutive-blank-lines": false,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-empty": false,
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-non-null-assertion": true,
-    "no-redundant-jsdoc": true,
-    "no-switch-case-fall-through": true,
-    "no-var-requires": false,
-    "object-literal-key-quotes": [
-      true,
-      "as-needed"
-    ],
-    "object-literal-sort-keys": false,
-    "ordered-imports": false,
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "semicolon": {
-      "options": [
-        "always"
-      ]
-    },
-    "space-before-function-paren": {
-      "options": {
-        "anonymous": "never",
-        "asyncArrow": "always",
-        "constructor": "never",
-        "method": "never",
-        "named": "never"
-      }
-    },
-    "trailing-comma": false,
-    "no-conflicting-lifecycle": true,
-    "no-host-metadata-property": true,
-    "no-input-rename": true,
-    "no-inputs-metadata-property": true,
-    "no-output-native": true,
-    "no-output-on-prefix": true,
-    "no-output-rename": true,
-    "no-outputs-metadata-property": true,
-    "template-banana-in-box": true,
-    "template-no-negated-async": true,
-    "typedef-whitespace": {
-      "options": [
-        {
-          "call-signature": "nospace",
-          "index-signature": "nospace",
-          "parameter": "nospace",
-          "property-declaration": "nospace",
-          "variable-declaration": "nospace"
-        },
-        {
-          "call-signature": "onespace",
-          "index-signature": "onespace",
-          "parameter": "onespace",
-          "property-declaration": "onespace",
-          "variable-declaration": "onespace"
-        }
-      ]
-    },
-    "use-lifecycle-interface": true,
-    "use-pipe-transform-interface": true
-  ,    "variable-name": {
-      "options": [
-        "ban-keywords",
-        "check-format",
-        "allow-pascal-case"
-      ]
-    },
-    "whitespace": {
-      "options": [
-        "check-branch",
-        "check-decl",
-        "check-operator",
-        "check-separator",
-        "check-type",
-        "check-typecast"
-      ]
-    }
-},
-  "rulesDirectory": [
-    "codelyzer"
-  ]
-}