From 06e649671fc4e5ec2f2036176f4c60219453f2ac Mon Sep 17 00:00:00 2001
From: "Engelbart Kai Sven (PEA4-Fe)" <KaiSven.Engelbart@de.bosch.com>
Date: Wed, 24 Feb 2021 13:58:14 +0100
Subject: [PATCH 1/2] Allow viscosity number predictions to be saved

---
 src/app/prediction/prediction.component.html | 16 ++++++++++++++-
 src/app/prediction/prediction.component.ts   | 21 +++++++++++++++-----
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/app/prediction/prediction.component.html b/src/app/prediction/prediction.component.html
index db1dbdb..1bbe7ba 100644
--- a/src/app/prediction/prediction.component.html
+++ b/src/app/prediction/prediction.component.html
@@ -40,7 +40,7 @@
 </div>
 
 <div class="file-input space-below">
-	<rb-form-file name="spectrum-upload" label="spectrum file" maxSize="10000000" class="space-below" multiple
+	<rb-form-file name="spectrum-upload" label="Spectrum File" maxSize="10000000" class="space-below" multiple
 		(ngModelChange)="fileToArray($event)" placeholder="Select file or drag and drop" dragDrop ngModel>
 	</rb-form-file>
 
@@ -72,6 +72,20 @@
 	Export to PDF
 </rb-icon-button>
 
+<!-- Save Prediction -->
+<!-- Only available for single sample viscosity number predictions -->
+<div *ngIf="spectrumNames.length && !multipleSamples && activeGroup.group === 'Viscosity Number'">
+<rb-form-input name="prediction-name" label="Prediction Name" [(ngModel)]="predictionName"></rb-form-input>
+<rb-icon-button icon="forward-right" mode="secondary" (click)="savePrediction()" [rbModal]="modalSuccess">
+	Save Prediction
+</rb-icon-button>
+<ng-template #modalSuccess>
+	<rb-alert alertTitle="Success" type="success" okBtnLabel="Got it">
+		Prediction saved!
+	</rb-alert>
+</ng-template>
+</div>
+
 <div class="dpt-chart space-below">
 	<canvas baseChart
 		class="dpt-chart"
diff --git a/src/app/prediction/prediction.component.ts b/src/app/prediction/prediction.component.ts
index 42a9602..4106774 100644
--- a/src/app/prediction/prediction.component.ts
+++ b/src/app/prediction/prediction.component.ts
@@ -39,8 +39,11 @@ export class PredictionComponent implements OnInit {
 	loading = false;
 	activeGroup: ModelItemModel = new ModelItemModel();
 	activeModelIndex = 0;
+	predictionName: String;
+
 	// If true, spectra belong to different samples, otherwise multiple spectra from the same sample are given
 	multipleSamples = false;
+
 	spectrumNames: string[] = [];
 	spectrum: string[][] = [[]];
 	flattenedSpectra = [];
@@ -122,20 +125,28 @@ export class PredictionComponent implements OnInit {
 		});
 	}
 
-	groupChange(index) {  // Group was changed
+	// Group was changed
+	groupChange(index) {
 		this.activeGroup = this.d.arr.modelGroups[index];
 		this.activeModelIndex = 0;
 		this.result = undefined;
 	}
 
+	// Save prediction to database
+	// This is not suited for multiple samples
+	savePrediction() {
+		let prediction = { name: this.predictionName, value: this.result.mean[0].value };
+		this.api.post<any>('/prediction/new', prediction);
+	}
+
 	// Aggregates spectrum names and prediction values into an associative array
 	prepareExport() {
 		const zip = (a, b) => a.map((k, i) => [k, b[i]]);
 		const values = this.result.predictions
-		.map(prediction => prediction
-			 .filter(field => field.category === 'Prediction')
-			 .map(field => field.value));
-			 return zip(this.spectrumNames, values);
+			.map(prediction => prediction
+				.filter(field => field.category === 'Prediction')
+				.map(field => field.value));
+		return zip(this.spectrumNames, values);
 	}
 
 	// Generates a timestamp suitable for file naming

From f7f351d6a303899fd86628d142e8585e03809636 Mon Sep 17 00:00:00 2001
From: "Engelbart Kai Sven (PEA4-Fe)" <KaiSven.Engelbart@de.bosch.com>
Date: Wed, 24 Feb 2021 15:34:46 +0100
Subject: [PATCH 2/2] Add very simple prediction delta UI

---
 src/app/app-routing.module.ts                 |  2 +
 src/app/app.component.html                    |  1 +
 src/app/app.module.ts                         |  4 +-
 .../prediction-delta.component.html           | 10 +++++
 .../prediction-delta.component.scss           |  0
 .../prediction-delta.component.spec.ts        | 25 +++++++++++
 .../prediction-delta.component.ts             | 41 +++++++++++++++++++
 7 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 src/app/prediction-delta/prediction-delta.component.html
 create mode 100644 src/app/prediction-delta/prediction-delta.component.scss
 create mode 100644 src/app/prediction-delta/prediction-delta.component.spec.ts
 create mode 100644 src/app/prediction-delta/prediction-delta.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index d5c4f6d..b180e60 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -11,6 +11,7 @@ import {UsersComponent} from './users/users.component';
 import {ChangelogComponent} from './changelog/changelog.component';
 import {DocumentationDatabaseComponent} from './documentation/documentation-database/documentation-database.component';
 import {PredictionComponent} from './prediction/prediction.component';
+import {PredictionDeltaComponent} from './prediction-delta/prediction-delta.component';
 import {ModelTemplatesComponent} from './model-templates/model-templates.component';
 import {DocumentationArchitectureComponent} from
 './documentation/documentation-architecture/documentation-architecture.component';
@@ -23,6 +24,7 @@ const routes: Routes = [
 	{path: '', component: HomeComponent},
 	{path: 'home', component: HomeComponent},
 	{path: 'prediction', component: PredictionComponent},
+	{path: 'prediction-delta', component: PredictionDeltaComponent},
 	{path: 'models', component: ModelTemplatesComponent},
 	{path: 'samples', component: SamplesComponent, canActivate: [LoginService]},
 	{path: 'samples/new', component: SampleComponent, canActivate: [LoginService]},
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 57cb40d..844116c 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -2,6 +2,7 @@
 	<nav *rbMainNavItems>
 		<a routerLink="/home" routerLinkActive="active" rbLoadingLink>Home</a>
 		<a routerLink="/prediction" routerLinkActive="active" rbLoadingLink *ngIf="login.hasPrediction">Prediction</a>
+		<a routerLink="/prediction-delta" routerLinkActive="active" rbLoadingLink *ngIf="login.hasPrediction">Prediction Delta</a>
 		<a routerLink="/models" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.dev">Models</a>
 		<a routerLink="/samples" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.read">Samples</a>
 		<a routerLink="/materials" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.dev">Materials</a>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3dab028..d4371c3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -37,6 +37,7 @@ import { DocumentationArchitectureComponent } from
 import { MaterialsComponent } from './materials/materials.component';
 import { MaterialComponent } from './material/material.component';
 import { DocumentationModelsComponent } from './documentation/documentation-models/documentation-models.component';
+import { PredictionDeltaComponent } from './prediction-delta/prediction-delta.component';
 
 @NgModule({
 	declarations: [
@@ -64,7 +65,8 @@ import { DocumentationModelsComponent } from './documentation/documentation-mode
 		DocumentationArchitectureComponent,
 		MaterialsComponent,
 		MaterialComponent,
-		DocumentationModelsComponent
+		DocumentationModelsComponent,
+		PredictionDeltaComponent
 	],
 	imports: [
 		LocalStorageModule.forRoot({
diff --git a/src/app/prediction-delta/prediction-delta.component.html b/src/app/prediction-delta/prediction-delta.component.html
new file mode 100644
index 0000000..dc14936
--- /dev/null
+++ b/src/app/prediction-delta/prediction-delta.component.html
@@ -0,0 +1,10 @@
+<h4>Enter the names of two predictions to compare</h4>
+
+<rb-form-input label="Prediction A" [(ngModel)]="nameA"></rb-form-input>
+<rb-form-input label="Prediction B" [(ngModel)]="nameB"></rb-form-input>
+<p *ngIf="delta">
+	The result is {{ delta }}.
+</p>
+<rb-icon-button icon="forward-right" mode="primary" (click)="compare()">
+	Compare Predictions
+</rb-icon-button>
diff --git a/src/app/prediction-delta/prediction-delta.component.scss b/src/app/prediction-delta/prediction-delta.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/prediction-delta/prediction-delta.component.spec.ts b/src/app/prediction-delta/prediction-delta.component.spec.ts
new file mode 100644
index 0000000..e3b3ebc
--- /dev/null
+++ b/src/app/prediction-delta/prediction-delta.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PredictionDeltaComponent } from './prediction-delta.component';
+
+describe('PredictionDeltaComponent', () => {
+  let component: PredictionDeltaComponent;
+  let fixture: ComponentFixture<PredictionDeltaComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PredictionDeltaComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PredictionDeltaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/prediction-delta/prediction-delta.component.ts b/src/app/prediction-delta/prediction-delta.component.ts
new file mode 100644
index 0000000..0b65097
--- /dev/null
+++ b/src/app/prediction-delta/prediction-delta.component.ts
@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { animate, style, transition, trigger } from '@angular/animations';
+import { ApiService } from '../services/api.service';
+
+@Component({
+	selector: 'app-prediction-delta',
+	templateUrl: './prediction-delta.component.html',
+	styleUrls: ['./prediction-delta.component.scss'],
+	animations: [
+		trigger(
+			'inOut', [
+				transition(':enter', [
+					style({height: 0, opacity: 0}),
+					animate('0.5s ease-out', style({height: '*', opacity: 1}))
+				]),
+				transition(':leave', [
+					style({height: '*', opacity: 1}),
+					animate('0.5s ease-in', style({height: 0, opacity: 0}))
+				])
+			]
+		)
+	]
+})
+export class PredictionDeltaComponent {
+
+	nameA: String;
+	nameB: String;
+	delta: Number;
+
+	constructor(
+		private api: ApiService,
+	) {}
+
+	// Compares the two predictions
+	compare() {
+		let data = { nameA: this.nameA, nameB: this.nameB };
+		this.api.post<Number>('/prediction/compare', data, result => {
+			this.delta = result;
+		});
+	}
+}