update angular to 13.1.0

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 1 Chrome version
-last 2 versions
+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'.

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

pdb-js/.gitignore

@@ -1,8 +1,7 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
-/build
+/dist
-/bin
 /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

pdb-js/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

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"
+    }
+  ]
+}

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"
+          }
+        }
+      }
+    }
+  ]
+}

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/styles.scss"
-              "src/custom-theme.scss"
             ],
-            "scripts": [],
+            "scripts": []
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
           },
           "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"
-              "outputHashing": "all",
+            },
-              "sourceMap": false,
+            "development": {
-              "namedChunks": false,
+              "buildOptimizer": false,
-              "extractLicenses": true,
+              "optimization": false,
-              "vendorChunk": false,
+              "vendorChunk": true,
-              "buildOptimizer": true,
+              "extractLicenses": false,
-              "budgets": [
+              "sourceMap": true,
-                {
+              "namedChunks": true
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
             }
           },
-          "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"
 }

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 } }));
-  }
-};

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));
-  });
-});

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>;
-  }
-}

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"
-    ]
-  }
-}

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

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: {
+    jasmineHtmlReporter: {
-      dir: require('path').join(__dirname, './coverage/pdb'),
+      suppressAll: true // removes the duplicated traces
-      reports: ['html', 'lcovonly', 'text-summary'],
+    },
-      fixWebpackSourcePaths: true
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/pdb-js'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,

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/animations": "~13.1.0",
-    "@angular/cdk": "^12.2.9",
+    "@angular/cdk": "^13.1.0",
-    "@angular/common": "^12.2.9",
+    "@angular/common": "~13.1.0",
-    "@angular/compiler": "^12.2.9",
+    "@angular/compiler": "~13.1.0",
-    "@angular/core": "^12.2.9",
+    "@angular/core": "~13.1.0",
-    "@angular/forms": "^12.2.9",
+    "@angular/forms": "~13.1.0",
-    "@angular/material": "^12.2.9",
+    "@angular/material": "^13.1.0",
-    "@angular/platform-browser": "^12.2.9",
+    "@angular/platform-browser": "~13.1.0",
-    "@angular/platform-browser-dynamic": "^12.2.9",
+    "@angular/platform-browser-dynamic": "~13.1.0",
-    "@angular/router": "^12.2.9",
+    "@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-devkit/build-angular": "~13.1.1",
-    "@angular/cli": "^12.2.9",
+    "@angular/cli": "~13.1.1",
-    "@angular/compiler-cli": "^12.2.9",
+    "@angular/compiler-cli": "~13.1.0",
-    "@angular/language-service": "^12.2.9",
+    "@types/jasmine": "~3.10.0",
-    "@types/jasmine": "^3.9.1",
+    "@types/node": "^12.11.1",
-    "@types/jasminewd2": "^2.0.10",
+    "jasmine-core": "~3.10.0",
-    "@types/node": "^12.20.28",
+    "karma": "~6.3.0",
-    "codelyzer": "^6.0.2",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.3.4",
     "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",
+    "karma-jasmine-html-reporter": "~1.7.0",
-    "protractor": "~7.0.0",
+    "typescript": "~4.5.2"
-    "ts-node": "~8.5.4",
-    "tslint": "^6.1.0",
-    "typescript": "4.3.5"
   }
 }

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">

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>

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){
+  comparatorChanged(){
-    this._comparator = newComparator;
     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: number, b: number) { return a <= b; }
-      : function(a, b) { 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){
+  sortOrderChanged(){
-    this.sortOrder = event;
     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;

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);

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>

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++)
+    if (this.stats) {
-    {
+      for (let i = 0; i < this.stats.dataSeriesStats.length; i++)
-      const stat = this.stats.dataSeriesStats[i];
-      if (stat.percentiles.hasOwnProperty("50.000"))
       {
-        this.hasPercentiles = true;
+        const stat = this.stats.dataSeriesStats[i];
-        this.percentilesToPlot.set('median','50.000');
+        if (stat.percentiles.hasOwnProperty("50.000"))
-        this.percentilesToPlot.set('75th','75.000');
+        {
-        this.percentilesToPlot.set('95th','95.000');
+          this.hasPercentiles = true;
-        this.percentilesToPlot.set('99th','99.000');
+          this.percentilesToPlot.set('median','50.000');
-        break;
+          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";
+  }
 }

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 

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;
+  imageUrl! : string;
-  stats : PlotResponseStats;
+  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();

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;
+  constructor(
-  newQuery: string;
+    public value: string,
-  newCaretPosition: number;
+    public newQuery: string,
+    public newCaretPosition: number){}
 }
 
 
 export class AutocompleteResult{
-  proposals: Array<Suggestion>;
+  constructor(public proposals: Array<Suggestion>){}
 }
 
 export class PlotRequest {
-  query : string;
+  constructor(
-  height : number;
+    public query : string,
-  width : number;
+    public height : number,
-  thumbnailMaxWidth : number = 300;
+    public width : number,
-  thumbnailMaxHeight : number = 200;
+    public thumbnailMaxWidth : number = 300,
-  groupBy : Array<string>;
+    public thumbnailMaxHeight : number = 200,
-  limitBy : string;
+    public groupBy : Array<string>,
-  limit : number;
+    public limitBy : string,
-  y1:YAxisDefinition;
+    public limit : number,
-  y2:YAxisDefinition;
+    public y1:YAxisDefinition,
-  dateRange : string;
+    public y2:YAxisDefinition|undefined,
-  aggregates : Array<string>;
+    public dateRange : string,
-  keyOutside : boolean = false;
+    public aggregates : Array<string>,
-  generateThumbnail : boolean;
+    public keyOutside : boolean = false,
-  intervalUnit: string;
+    public generateThumbnail : boolean,
-  intervalValue: number;
+    public intervalUnit: string,
-  renderBarChartTickLabels: boolean = false;
+    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;
+  constructor(
-  rangeMin : number;
+    public axisScale : string,
-  rangeMax : number;
+    public rangeMin : number,
-  rangeUnit  : string;
+    public rangeMax : number,
+    public rangeUnit  : string){}
 }
 
 export class PlotResponse {
-  imageUrl : string;
+  constructor(
-  stats : PlotResponseStats;
+    public imageUrl : string,
-  thumbnailUrl : string;
+    public stats : PlotResponseStats,
+    public thumbnailUrl : string){}
 }
 
 export class PlotResponseStats {
-  maxValue : number;
+  constructor(
-  values : number;
+    public maxValue : number,
-  average : number ;
+    public values : number,
-  plottedValues : number;
+    public average : number,
-  maxAvgRatio: number;
+    public plottedValues : number,
-  dataSeriesStats : Array<DataSeriesStats>;
+    public maxAvgRatio: number,
+    public dataSeriesStats : Array<DataSeriesStats>){}
 }
 
 export class DataSeriesStats {
-  name: string;
+  constructor(
-  values : number;
+    public name: string,
-  maxValue : number;
+    public values : number,
-  average : number;
+    public maxValue : number,
-  plottedValues : number;
+    public average : number ,
-  dashTypeAndColor: DashTypeAndColor;
+    public plottedValues : number,
-  percentiles: Map<string, number>
+    public dashTypeAndColor: DashTypeAndColor,
+    public percentiles: Map<string, number>){}
 }
 
 export class DashTypeAndColor {
-  color: string;
+  constructor(
-  pointType: number;
+    public color: string,
+    public pointType: number) {}
 }
 
 export class FilterDefaults {
-  groupBy: Array<string>;
+  constructor(
-  fields: Array<string>; 
+    public groupBy: Array<string>,
-  splitBy: string;
+    public fields: Array<string>, 
+    public splitBy: string){}
 }
 
 export enum ResultMode {

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 : '';
   }
 }

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);

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 = [];
+  selectedPlotType = new Array<PlotType>();
-  plotTypes: Array<any>;
+  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;
+    if (this.splitBy != null){
-    this.plotView.imageUrl = '';
+      const that = this;
-    that.plotView.stats = null;
+      this.plotView.imageUrl = '';
-    that.galleryView.show=true;
+      that.plotView.stats = null;
-    const request = this.createPlotRequest();
+      that.galleryView.show=true;
-    this.galleryView.renderGallery(request, this.splitBy.name);
+      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();
+    const request = new PlotRequest(
-    request.query = this.query.query;
+      this.query.query,
-    request.height = document.getElementById("results").offsetHeight-1;
+      results != null ? results.offsetHeight-1: 1024,
-    request.width = document.getElementById("results").offsetWidth-1;
+      results != null ? results.offsetWidth-1 : 1024,
-    request.groupBy = this.groupBy.map(o => o.name);
+      300, // thumbnailMaxWidth
-    request.limitBy = this.limitbycomponent.limitBy;
+      200, // thumbnailMaxHeight
-    request.limit = this.limitbycomponent.limit;
+      this.groupBy.map(o => o.name),
-    request.y1 = y1;
+      this.limitbycomponent.limitBy,
-    request.y2 = y2;
+      this.limitbycomponent.limit,
-    request.dateRange = this.dateRangeAsString(); 
+      y1,
-    request.aggregates = aggregates; 
+      y2,
-    request.keyOutside = false;
+      this.dateRangeAsString(), // dateRange 
-    request.generateThumbnail = this.enableGallery;
+      aggregates, // aggregates 
-    request.intervalUnit = this.intervalUnit;
+      false, // keyOutside
-    request.intervalValue = this.intervalValue;
+      this.enableGallery, // generateThumbnail
-    request.renderBarChartTickLabels = this.renderBarChartTickLabels;
+      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 startDate = moment(dateRangeAsString.slice(0, 19));
+    const endDate = moment(dateRangeAsString.slice(22, 41));
-      const endDate = moment(dateRangeAsString.slice(22, 41));
     
-      return {
+    return {
-        startDate: startDate,
+      startDate: startDate,
-        endDate: endDate,
+      endDate: endDate,
-        duration: moment.duration(endDate.diff(startDate))
+      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;
 }
+*/

pdb-js/src/app/y-axis-definition/y-axis-definition.component.ts

@@ -20,11 +20,6 @@ export class YAxisDefinitionComponent {
   }
   
   getAxisDefinition() {
-    const result = new YAxisDefinition();
+    return new YAxisDefinition(this.yAxisScale,this.minYValue,this.maxYValue,this.yAxisUnit);
-    result.axisScale = this.yAxisScale;
-    result.rangeMin = this.minYValue;
-    result.rangeMax = this.maxYValue;
-    result.rangeUnit = this.yAxisUnit;
-    return result;
   }
 }

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).
+// Create the theme object. A theme consists of configurations for individual
-$candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
+// 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

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),
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ * 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.
  *

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

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.

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"
   ]
 }

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
-  }
-}

pdb-js/tsconfig.json

@@ -1,17 +1,32 @@
-/*
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
-  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.
-*/
 {
-  "files": [],
+  "compileOnSave": false,
-  "references": [
+  "compilerOptions": {
-    {
+    "baseUrl": "./",
-      "path": "./tsconfig.app.json"
+    "outDir": "./dist/out-tsc",
-    },
+    "forceConsistentCasingInFileNames": true,
-    {
+    "strict": true,
-      "path": "./tsconfig.spec.json"
+    "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
+  }
 }

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",
+      "jasmine"
-      "node"
     ]
   },
   "files": [

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"
-  ]
-}