.gitlab-ci.yml

-image: cypress/browsers:node18.12.0-chrome103-ff107
+image: cypress/browsers:node-20.17.0-chrome-129.0.6668.70-1-ff-130.0.1-edge-129.0.2792.52-1
 
 stages:
   - codeStyle
@@ -78,7 +78,7 @@ buildLibrary:
       - master
 
 auto-tag:
-  image: 'registry.gitlab.ics.muni.cz:443/csirt-mu-devel/csirt-mu-devel-artifact-repository/docker-common-ci:v0.1.6'
+  image: 'registry.gitlab.ics.muni.cz:443/muni-kypo-crp/dependency-forks/csirtmu-docker-common-ci/docker-common-ci:v0.2.0'
   variables:
     GIT_STRATEGY: clone
   stage: auto-tag

CHANGELOG.md

+### 16.0.1 Update sentinel versions.
+* c7979eb -- [CI/CD] Update packages.json version based on GitLab tag.
+* 53e36be -- Merge branch 'update-sentinel-versions' into 'master'
+* a5584ec -- Update sentinel versions.
 ### 16.0.0 Update to Angular 16 and update local issuer to keycloak.
 * c8331d2 -- [CI/CD] Update packages.json version based on GitLab tag.
 *   0450a63 -- Merge branch '6-update-to-angular-16' into 'master'

VERSION.txt

+18.0.0 Update to Angular 18.
+16.0.1 Update sentinel versions.
 16.0.0 Update to Angular 16 and update local issuer to keycloak.
 15.0.0 Update to Angular 15
 14.0.2 Propagate insufficient data info for dashboard processing

angular.json

@@ -79,21 +79,21 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "example-app:build"
+            "buildTarget": "example-app:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "example-app:build:production"
+              "buildTarget": "example-app:build:production"
             },
             "local": {
-              "browserTarget": "example-app:build:local"
+              "buildTarget": "example-app:build:local"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "example-app:build"
+            "buildTarget": "example-app:build"
           }
         },
         "test": {

package.json

 {
-  "name": "@muni-kypo-crp/clustering-visualization",
-  "version": "1.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve --configuration local --ssl",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint && npm run prettier-check",
-    "e2e": "ng e2e",
-    "prettier-check": "prettier --check \"projects/**/*.ts\"",
-    "prettier-fix": "prettier --write \"./projects/**/*.ts\"",
-    "build-example-app": "ng build example-app --configuration production",
-    "build-library": "ng build kypo-trainings-clustering-viz-lib --configuration production && cp ./src/styles.css ./dist/kypo-trainings-clustering-viz-lib && cp -R ./utils/json-server ./dist/kypo-trainings-clustering-viz-lib",
-    "create-package": "cd dist/kypo-trainings-clustering-viz-lib && npm pack",
-    "build-and-pack": "npm install && npm run build-library && npm run create-package",
-    "ci-update-version": "cd ./projects/kypo-trainings-clustering-viz-lib/ && npm version $TAG_VERSION",
-    "ci-build-and-pack": "npm ci --cache .nnpm ERR! Cannot read property '@angular/animations' of undefinedpm --prefer-offline && npm run build-library && npm run create-package",
-    "ci-publish-package": "cd dist/kypo-trainings-clustering-viz-lib && npm publish",
-    "api": "json-server -w ./utils/json-server/db.js --routes ./utils/json-server/routes.json --middlewares ./utils/json-server/server.js"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run prettier-check"
+    "name": "@muni-kypo-crp/clustering-visualization",
+    "version": "1.0.0",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve --configuration local --ssl",
+        "build": "ng build",
+        "test": "ng test",
+        "lint": "ng lint && npm run prettier-check",
+        "e2e": "ng e2e",
+        "prettier-check": "prettier --check \"projects/**/*.ts\"",
+        "prettier-fix": "prettier --write \"./projects/**/*.ts\"",
+        "build-example-app": "ng build example-app --configuration production",
+        "build-library": "ng build kypo-trainings-clustering-viz-lib --configuration production && cp ./src/styles.css ./dist/kypo-trainings-clustering-viz-lib && cp -R ./utils/json-server ./dist/kypo-trainings-clustering-viz-lib",
+        "create-package": "cd dist/kypo-trainings-clustering-viz-lib && npm pack",
+        "build-and-pack": "npm install && npm run build-library && npm run create-package",
+        "ci-update-version": "cd ./projects/kypo-trainings-clustering-viz-lib/ && npm version $TAG_VERSION",
+        "ci-build-and-pack": "npm ci --cache .nnpm ERR! Cannot read property '@angular/animations' of undefinedpm --prefer-offline && npm run build-library && npm run create-package",
+        "ci-publish-package": "cd dist/kypo-trainings-clustering-viz-lib && npm publish",
+        "api": "json-server -w ./utils/json-server/db.js --routes ./utils/json-server/routes.json --middlewares ./utils/json-server/server.js"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "npm run lint"
+        }
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "^18.2.7",
+        "@angular/cdk": "^18.2.7",
+        "@angular/common": "^18.2.7",
+        "@angular/compiler": "^18.2.7",
+        "@angular/core": "^18.2.7",
+        "@angular/forms": "^18.2.7",
+        "@angular/material": "^18.2.7",
+        "@angular/platform-browser": "^18.2.7",
+        "@angular/platform-browser-dynamic": "^18.2.7",
+        "@angular/router": "^18.2.7",
+        "@muni-kypo-crp/d3-service": "^18.0.0",
+        "@sentinel/auth": "^18.0.2",
+        "@sentinel/common": "^18.0.3",
+        "@sentinel/layout": "^18.1.1",
+        "@types/d3": "^7.4.3",
+        "angular-oauth2-oidc": "^17.0.2",
+        "angular-oauth2-oidc-jwks": "^17.0.2",
+        "core-js": "^3.38.1",
+        "d3": "^7.9.0",
+        "ngx-indexed-db": "^18.0.0",
+        "rxjs": "^7.8.1",
+        "tslib": "^2.7.0",
+        "uuid": "^10.0.0",
+        "zone.js": "^0.14.10"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "^18.2.7",
+        "@angular-eslint/builder": "^18.3.1",
+        "@angular-eslint/eslint-plugin": "^18.3.1",
+        "@angular-eslint/eslint-plugin-template": "^18.3.1",
+        "@angular-eslint/schematics": "^18.3.1",
+        "@angular-eslint/template-parser": "^18.3.1",
+        "@angular/cli": "^18.2.7",
+        "@angular/compiler-cli": "^18.2.7",
+        "@angular/language-service": "^18.2.7",
+        "@types/jasmine": "^5.1.4",
+        "@types/jasminewd2": "^2.0.13",
+        "@types/node": "^22.6.1",
+        "@typescript-eslint/eslint-plugin": "^8.8.1",
+        "@typescript-eslint/parser": "^8.8.1",
+        "eslint": "^9.12.0",
+        "jasmine-core": "^5.3.0",
+        "jasmine-spec-reporter": "^7.0.0",
+        "json-server": "^0.17.4",
+        "karma": "^6.4.4",
+        "karma-chrome-launcher": "^3.2.0",
+        "karma-cli": "^2.0.0",
+        "karma-coverage-istanbul-reporter": "^3.0.3",
+        "karma-jasmine": "^5.1.0",
+        "karma-jasmine-html-reporter": "^2.1.0",
+        "ng-packagr": "^18.2.1",
+        "prettier": "^3.3.3",
+        "protractor": "~7.0.0",
+        "ts-node": "^10.9.2",
+        "typescript": "5.5.4"
     }
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^16.2.12",
-    "@angular/cdk": "^16.2.14",
-    "@angular/common": "^16.2.12",
-    "@angular/compiler": "^16.2.12",
-    "@angular/core": "^16.2.12",
-    "@angular/forms": "^16.2.12",
-    "@angular/material": "^16.2.14",
-    "@angular/platform-browser": "^16.2.12",
-    "@angular/platform-browser-dynamic": "^16.2.12",
-    "@angular/router": "^16.2.12",
-    "@muni-kypo-crp/d3-service": "~16.0.0",
-    "@sentinel/auth": "~16.1.0",
-    "@sentinel/common": "~16.2.3",
-    "@sentinel/layout": "~16.1.0",
-    "@types/d3": "^7.4.3",
-    "angular-oauth2-oidc": "^16.0.0",
-    "angular-oauth2-oidc-jwks": "^16.0.0",
-    "core-js": "^3.23.2",
-    "d3": "^7.9.0",
-    "ngx-indexed-db": "^16.0.0",
-    "rxjs": "~7.5.5",
-    "tslib": "^2.4.0",
-    "uuid": "^8.3.2",
-    "zone.js": "~0.13.3"
-  },
-  "devDependencies": {
-    "@angular-devkit/architect": "^0.1602.14",
-    "@angular-devkit/build-angular": "^16.2.14",
-    "@angular-eslint/builder": "~16.3.1",
-    "@angular-eslint/eslint-plugin": "^16.3.1",
-    "@angular-eslint/eslint-plugin-template": "^16.3.1",
-    "@angular-eslint/schematics": "^16.3.1",
-    "@angular-eslint/template-parser": "^16.3.1",
-    "@angular/cli": "^16.2.14",
-    "@angular/compiler-cli": "^16.2.12",
-    "@angular/language-service": "^16.2.12",
-    "@types/jasmine": "~4.0.3",
-    "@types/jasminewd2": "^2.0.10",
-    "@types/node": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
-    "eslint": "^8.39.0",
-    "jasmine-core": "~4.2.0",
-    "jasmine-spec-reporter": "~7.0.0",
-    "json-server": "^0.17.4",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.1",
-    "karma-cli": "~2.0.0",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^16.2.3",
-    "prettier": "^2.7.1",
-    "protractor": "~7.0.0",
-    "ts-node": "~10.8.1",
-    "typescript": "~4.9.5"
-  }
 }
\ No newline at end of file

projects/kypo-trainings-clustering-viz-lib/package.json

 {
-  "name": "@muni-kypo-crp/clustering-visualization",
-  "version": "16.0.0",
-  "peerDependencies": {
-    "@angular/common": "^16.2.12",
-    "@angular/core": "^16.2.12",
-    "@angular/material": "^16.2.14",
-    "@muni-kypo-crp/d3-service": "~16.0.0",
-    "d3": "^7.9.0",
-    "@types/d3": "^7.4.3"
-  },
-  "dependencies": {
-    "tslib": "^2.4.0"
-  }
-}
+    "name": "@muni-kypo-crp/clustering-visualization",
+    "version": "16.0.1",
+    "peerDependencies": {
+        "@angular/common": "^18.2.7",
+        "@angular/core": "^18.2.7",
+        "@angular/material": "^18.2.7",
+        "@muni-kypo-crp/d3-service": "^18.0.0",
+        "d3": "^7.9.0",
+        "@types/d3": "^7.4.3"
+    },
+    "dependencies": {
+        "tslib": "^2.7.0"
+    }
+}
\ No newline at end of file

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/api/visualization-data-api.service.ts

@@ -13,14 +13,14 @@ export abstract class VisualizationDataApi {
     featureType: string,
     numberOfClusters: number,
     instanceIds: number[],
-    level: number
+    level: number,
   ): Observable<VisualizationData>;
 
   abstract getRadarChartData(
     trainingDefinitionId: number,
     numberOfClusters: number,
     instanceIds: number[],
-    level: number
+    level: number,
   ): Observable<VisualizationData>;
 
   abstract getFeatureSSE(
@@ -28,6 +28,6 @@ export abstract class VisualizationDataApi {
     featureType: string,
     numberOfClusters: number,
     instanceIds: number[],
-    level: number
+    level: number,
   ): Observable<VisualizationData>;
 }

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/api/visualization-data-default-api.service.ts

@@ -24,7 +24,10 @@ export class VisualizationDataDefaultApi extends VisualizationDataApi {
   });
   options = { headers: this.headers };
 
-  constructor(private http: HttpClient, private configService: ConfigService) {
+  constructor(
+    private http: HttpClient,
+    private configService: ConfigService,
+  ) {
     super();
   }
 
@@ -36,13 +39,13 @@ export class VisualizationDataDefaultApi extends VisualizationDataApi {
     featureType: string,
     numberOfClusters: number,
     instanceIds: number[],
-    level: number
+    level: number,
   ): Observable<VisualizationData> {
     return this.http
       .get<VisualizationDataDTO>(
         this.configService.config.trainingServiceUrl +
           `clusters/training-definitions/${trainingDefinitionId}/${featureType}`,
-        { params: this.addParams(numberOfClusters, instanceIds, level) }
+        { params: this.addParams(numberOfClusters, instanceIds, level) },
       )
       .pipe(map((response) => ClusterVisualizationDataMapper.fromDTO(response)));
   }
@@ -54,13 +57,13 @@ export class VisualizationDataDefaultApi extends VisualizationDataApi {
     trainingDefinitionId: number,
     numberOfClusters: number,
     instanceIds: number[],
-    level: number
+    level: number,
   ): Observable<VisualizationData> {
     return this.http
       .get<VisualizationDataDTO>(
         this.configService.config.trainingServiceUrl +
           `clusters/training-definitions/${trainingDefinitionId}/n-dimensional`,
-        { params: this.addParams(numberOfClusters, instanceIds, level) }
+        { params: this.addParams(numberOfClusters, instanceIds, level) },
       )
       .pipe(map((response) => RadarChartDataMapper.fromDTO(response)));
   }
@@ -70,13 +73,13 @@ export class VisualizationDataDefaultApi extends VisualizationDataApi {
     featureType: string,
     numberOfClusters: number,
     instanceIds: number[],
-    level: number
+    level: number,
   ): Observable<SseDataMapper> {
     return this.http
       .get<SseDTO>(
         this.configService.config.trainingServiceUrl +
           `clusters/training-definitions/${trainingDefinitionId}/${featureType}/sse`,
-        { params: this.addParams(numberOfClusters, instanceIds, level) }
+        { params: this.addParams(numberOfClusters, instanceIds, level) },
       )
       .pipe(map((response) => SseDataMapper.fromDTO(response)));
   }

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/line-chart/line-chart.component.ts

@@ -31,7 +31,10 @@ export class LineChartComponent implements OnChanges, OnInit {
   private xAxis: any;
   private yAxis: any;
 
-  constructor(d3Service: D3Service, private appConfig: AppConfig) {
+  constructor(
+    d3Service: D3Service,
+    private appConfig: AppConfig,
+  ) {
     this.d3 = d3Service.getD3();
   }
 
@@ -123,7 +126,7 @@ export class LineChartComponent implements OnChanges, OnInit {
         d3
           .line()
           .x((d, index) => this.x(index + 1))
-          .y((d) => this.y(d))
+          .y((d) => this.y(d)),
       );
 
     // Add the dots

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/radar-chart/radar-chart.component.ts

-import { Component, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
 import { D3, D3Service } from '@muni-kypo-crp/d3-service';
 import { BaseConfig } from '../../../models/base-config';
 import { AppConfig } from '../../../../app.config';
 import { ConfigService } from '../../../config/config.service';
-import { Subscription } from 'rxjs';
 import { VisualizationData } from '../../../models/visualization-data';
 import { EuclidianDoublePoint, Point } from '../../../models/eucledian-double-point';
 
@@ -41,7 +40,11 @@ export class RadarChartComponent implements OnChanges, OnInit {
   public showInfo: boolean;
   public numberOfParticipants: number;
 
-  constructor(d3Service: D3Service, private configService: ConfigService, private appConfig: AppConfig) {
+  constructor(
+    d3Service: D3Service,
+    private configService: ConfigService,
+    private appConfig: AppConfig,
+  ) {
     this.d3 = d3Service.getD3();
     this.radialScale = this.d3.scaleLinear().domain(appConfig.radialScaleDomain).range(appConfig.radialScaleRange);
     this.smallScale = this.d3.scaleLinear().domain(appConfig.radialScaleDomain).range([0, 62]);
@@ -145,7 +148,7 @@ export class RadarChartComponent implements OnChanges, OnInit {
         .attr('preserveAspectRatio', 'xMidYMid meet');
       this.smallSvgs.push(smallChartsSvg);
 
-      const clip = smallChartsSvg
+      /* const clip = smallChartsSvg
         .append('defs')
         .append('SVG:clipPath')
         .attr('id', 'clip')
@@ -153,7 +156,7 @@ export class RadarChartComponent implements OnChanges, OnInit {
         .attr('width', 200)
         .attr('height', 200)
         .attr('x', 0)
-        .attr('y', 0);
+        .attr('y', 0);*/
 
       const smallChartsClipPath = smallChartsSvg.append('g').attr('clip-path', 'url(#clip)');
 
@@ -173,7 +176,7 @@ export class RadarChartComponent implements OnChanges, OnInit {
           .attr('fill', 'none')
           .attr('stroke-width', '1.2')
           .attr('stroke', 'lightGray')
-          .attr('r', radialScaleSmall(t))
+          .attr('r', radialScaleSmall(t)),
       );
 
       for (let i = 0; i < this.features.length; i++) {
@@ -236,7 +239,7 @@ export class RadarChartComponent implements OnChanges, OnInit {
       .attr('viewBox', this.width / 6 + ' ' + this.height / 6 + ' ' + this.width / 1.8 + ' ' + this.height / 1.8)
       .attr('preserveAspectRatio', 'xMidYMid meet');
 
-    const clip = this.svg
+    /* const clip = this.svg
       .append('defs')
       .append('SVG:clipPath')
       .attr('id', 'clip')
@@ -244,7 +247,7 @@ export class RadarChartComponent implements OnChanges, OnInit {
       .attr('width', this.width)
       .attr('height', this.height)
       .attr('x', 0)
-      .attr('y', 0);
+      .attr('y', 0); */
 
     this.gPlot = this.svg.append('g').attr('width', this.width).attr('height', this.height).attr('x', 0).attr('y', 0);
 
@@ -267,7 +270,7 @@ export class RadarChartComponent implements OnChanges, OnInit {
         .attr('fill', 'none')
         .attr('stroke', '#919191')
         .attr('stroke-width', '0.5')
-        .attr('r', this.radialScale(t))
+        .attr('r', this.radialScale(t)),
     );
 
     const tooltip = this.tooltip;
@@ -298,7 +301,7 @@ export class RadarChartComponent implements OnChanges, OnInit {
         .attr('text-anchor', 'middle')
         .style('font-size', '9')
         .text(ft_name)
-        .on('mouseover', function (event, d) {
+        .on('mouseover', function (event) {
           const vizBox = document
             .querySelector('#radarchartPlaceholder kypo-clustering-visualization')
             .getBoundingClientRect();
@@ -309,7 +312,7 @@ export class RadarChartComponent implements OnChanges, OnInit {
             .style('left', event.clientX - vizBox.x + 'px')
             .style('top', event.clientY - vizBox.y - 20 + 'px');
         })
-        .on('mousemove', function (event, d) {
+        .on('mousemove', function (event) {
           const vizBox = document
             .querySelector('#radarchartPlaceholder kypo-clustering-visualization')
             .getBoundingClientRect();
@@ -348,7 +351,7 @@ export class RadarChartComponent implements OnChanges, OnInit {
         .selectAll('.cluster')
         .attr('id', (d, i) => 'c-' + i)
         .attr('clusterNum', (d, i) => i)
-        .on('mouseover', function (event, d) {
+        .on('mouseover', function (event) {
           const clusterSize = data[d3.select(this).attr('clusterNum')].points.length;
           const vizBox = document
             .querySelector('#radarchartPlaceholder kypo-clustering-visualization')
@@ -425,14 +428,13 @@ export class RadarChartComponent implements OnChanges, OnInit {
 
   drawChartBase(baseConfig: BaseConfig): void {
     const d3: D3 = this.d3,
-      padding = baseConfig.padding,
       element = baseConfig.element;
 
     // create svg
     // calculate the height first, width can change when the scrollbar is added
     this.wrapperWidth = Math.max(
       document.getElementById(element)?.getBoundingClientRect().width, // original (standalone) size
-      window.innerWidth - window.innerWidth * 0.37
+      window.innerWidth - window.innerWidth * 0.37,
     ); // get width in the dashboard as a 75% piece of a halfpage
     const maxHeight: number = Math.min(this.wrapperWidth * 0.7, window.innerHeight - 130);
     const minHeight = 400;

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/scatter-plot/scatter-plot.component.ts

@@ -43,7 +43,7 @@ export class ScatterPlotComponent implements OnChanges, OnInit {
   constructor(
     d3Service: D3Service,
     private visualizationDataService: VisualizationsDataService,
-    private appConfig: AppConfig
+    private appConfig: AppConfig,
   ) {
     this.d3 = d3Service.getD3();
   }
@@ -239,7 +239,7 @@ export class ScatterPlotComponent implements OnChanges, OnInit {
           .style('left', event.clientX - vizBox.x + 'px')
           .style('top', event.clientY - vizBox.y - 10 + 'px');
       })
-      .on('mousemove', function (event: any, d: any) {
+      .on('mousemove', function (event: any) {
         const vizBox = document
           .querySelector('#scatterClustersSvgPlaceholder kypo-clustering-visualization')
           .getBoundingClientRect();

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/visualizations.component.ts

@@ -50,7 +50,7 @@ export class VisualizationsComponent implements OnInit, OnChanges {
       this.trainingDefinitionId,
       this.elbowNumClusters,
       this.trainingInstanceIds,
-      this.level
+      this.level,
     );
     lineService.subscribe((res) => {
       this.lineData$ = res;
@@ -60,7 +60,7 @@ export class VisualizationsComponent implements OnInit, OnChanges {
         this.trainingDefinitionId,
         this.numOfClusters,
         this.trainingInstanceIds,
-        this.level
+        this.level,
       );
       scatterService.subscribe((res) => {
         this.visualizationData$ = res;
@@ -71,7 +71,7 @@ export class VisualizationsComponent implements OnInit, OnChanges {
         this.trainingDefinitionId,
         this.numOfClusters,
         this.trainingInstanceIds,
-        this.level
+        this.level,
       );
       radarService.subscribe((res) => {
         this.radarChartData$ = res;

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/services/visualizations-data-concrete.service.ts

@@ -33,7 +33,7 @@ export class VisualizationsDataConcreteService extends VisualizationsDataService
     trainingDefinitionId: number,
     numOfClusters: number,
     instanceIds: number[],
-    level: number
+    level: number,
   ): Observable<VisualizationData> {
     switch (this._selectedFeature) {
       case Clusterables.WrongFlags:
@@ -43,7 +43,7 @@ export class VisualizationsDataConcreteService extends VisualizationsDataService
             map((data: any) => ClusterVisualizationDataMapper.fromDTO(data)),
             catchError((error) => {
               return throwError(this.messageBase + error.message);
-            })
+            }),
           );
       case Clusterables.TimeAfterHint:
         return this.visualizationApi
@@ -52,7 +52,7 @@ export class VisualizationsDataConcreteService extends VisualizationsDataService
             map((data: any) => ClusterVisualizationDataMapper.fromDTO(data)),
             catchError((error) => {
               return throwError(this.messageBase + error.message);
-            })
+            }),
           );
       default:
         return new Observable<VisualizationData>();
@@ -63,13 +63,13 @@ export class VisualizationsDataConcreteService extends VisualizationsDataService
     trainingDefinitionId: number,
     numOfClusters: number,
     instanceIds: number[],
-    level: number
+    level: number,
   ): Observable<VisualizationData> {
     return this.visualizationApi.getRadarChartData(trainingDefinitionId, numOfClusters, instanceIds, level).pipe(
       map((data: any) => RadarChartDataMapper.fromDTO(data)),
       catchError((error) => {
         return throwError(this.messageBase + error.message);
-      })
+      }),
     );
   }
 
@@ -77,7 +77,7 @@ export class VisualizationsDataConcreteService extends VisualizationsDataService
     trainingDefinitionId: number,
     numOfClusters: number,
     instanceIds: number[],
-    level: number
+    level: number,
   ): Observable<any> {
     switch (this._selectedFeature) {
       case Clusterables.WrongFlags:
@@ -87,7 +87,7 @@ export class VisualizationsDataConcreteService extends VisualizationsDataService
             map((data: any) => SseDataMapper.fromDTO(data)),
             catchError((error) => {
               return throwError(this.messageBase + error.message);
-            })
+            }),
           );
       case Clusterables.TimeAfterHint:
         return this.visualizationApi
@@ -96,7 +96,7 @@ export class VisualizationsDataConcreteService extends VisualizationsDataService
             map((data: any) => SseDataMapper.fromDTO(data)),
             catchError((error) => {
               return throwError(this.messageBase + error.message);
-            })
+            }),
           );
       case Clusterables.NDimensional:
         return this.visualizationApi
@@ -105,7 +105,7 @@ export class VisualizationsDataConcreteService extends VisualizationsDataService
             map((data: any) => SseDataMapper.fromDTO(data)),
             catchError((error) => {
               return throwError(this.messageBase + error.message);
-            })
+            }),
           );
     }
   }

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/services/visualizations-data-mock.service.ts

@@ -29,7 +29,7 @@ export class MockedRestService extends VisualizationsDataConcreteService {
         ', level ' +
         level +
         '. Number of clusters set to ' +
-        numOfClusters
+        numOfClusters,
     );
     switch (this._selectedFeature) {
       case Clusterables.WrongFlags:
@@ -49,7 +49,7 @@ export class MockedRestService extends VisualizationsDataConcreteService {
         ', level ' +
         level +
         '. Number of clusters set to ' +
-        numOfClusters
+        numOfClusters,
     );
     return of(RadarChartDataMapper.fromDTO(radarClusters));
   }
@@ -62,7 +62,7 @@ export class MockedRestService extends VisualizationsDataConcreteService {
         ', level ' +
         level +
         '. Number of clusters set to ' +
-        numOfClusters
+        numOfClusters,
     );
     switch (this._selectedFeature) {
       case Clusterables.WrongFlags:

src/app/clustering/clustering-overview.component.ts

-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
-import {MatSidenav} from '@angular/material/sidenav';
-import { Clusterables
+import { Component, ViewChild } from '@angular/core';
+import { MatSidenav } from '@angular/material/sidenav';
+import {
+  Clusterables
 } from '../../../projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/models/clusterables-enum';
-import { Components
+import {
+  Components
 } from '../../../projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/models/components-enum';
 
 @Component({

src/environments/environment.local.ts

@@ -45,7 +45,7 @@ export const environment = {
           scope: 'openid email profile',
           logoutUrl: AUTH_URL + '/keycloak/realms/KYPO/protocol/openid-connect/logout',
           silentRefreshRedirectUri: AUTH_URL + '/silent-refresh.html',
-          postLogoutRedirectUri: HOME_URL + '/logout-confirmed',
+          postLogoutRedirectUri: AUTH_URL + '/logout-confirmed',
           clearHashAfterLogin: true
         },
       },

src/test.ts

 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'core-js/es7/reflect';
+import 'core-js/es/reflect'
 import 'zone.js';
 import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';

src/typings.d.ts

-/* SystemJS module definition */
-declare let module: NodeModule;
-interface NodeModule {
-  id: string;
-}