Changes: Colors for Prediction added

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "definma",
-  "version": "0.5.5",
+  "version": "0.9.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/app/app.component.html

@@ -1,7 +1,7 @@
 <rb-full-header id="top">
   <nav *rbMainNavItems>
     <a routerLink="/home" routerLinkActive="active" rbLoadingLink>Home</a>
-    <a routerLink="/prediction" routerLinkActive="active" rbLoadingLink *ngIf="login.isLevel.dev">Prediction</a>
+    <a routerLink="/prediction" routerLinkActive="active" rbLoadingLink *ngIf="login.hasPrediction">Prediction</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>

src/app/prediction/prediction.component.html

@@ -11,17 +11,29 @@
 <div *ngIf="result" class="result" [@inOut]>
   <ng-container *ngIf="multipleSamples; else singleSampleResult">
     <h4 *ngFor="let prediction of result.predictions; index as i">
-      {{spectrumNames[i]}}: {{prediction}}<a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
+      {{spectrumNames[i]}}:
+      <span *ngFor="let predictionEntry of prediction">
+        {{predictionEntry.category}}&nbsp;<span [ngStyle]="{color: predictionEntry.color}">{{predictionEntry.value}}</span>&nbsp;{{predictionEntry.label}}
+      </span>
+      <a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
     </h4>
   </ng-container>
   <ng-template #singleSampleResult>
     <h4>
-      Average result: {{result.mean}}<a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
+      Average result:
+    <span *ngFor="let predictionEntry of result.mean">
+        {{predictionEntry.category}}&nbsp;<span [ngStyle]="{color: predictionEntry.color}">{{predictionEntry.value}}</span>&nbsp;{{predictionEntry.label}} &nbsp;{{( predictionEntry.std !== '' ? ' (standard deviation: '+ predictionEntry.std+')' : '') }}
+      </span>
+    <a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
     </h4>
     <a class="rb-details-toggle" rbDetailsToggle #triggerDetails="rbDetailsToggle">Details</a>
     <div *ngIf="triggerDetails.open" class="space-below">
       <p *ngFor="let prediction of result.predictions; index as i">
-        {{spectrumNames[i]}}: {{prediction}}<a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
+        {{spectrumNames[i]}}:
+        <span *ngFor="let predictionEntry of prediction">
+          {{predictionEntry.category}}&nbsp;<span [ngStyle]="{color: predictionEntry.color}">{{predictionEntry.value}}</span>&nbsp;{{predictionEntry.label}}
+        </span>
+        <a [routerLink]='"."' fragment="disclaimer"><sup>#</sup></a>
       </p>
     </div>
   </ng-template>

src/app/prediction/prediction.component.ts

@@ -29,7 +29,7 @@ import {ModelItemModel} from '../models/model-item.model';
 })
 export class PredictionComponent implements OnInit {
 
-  result: {predictions: string[], mean: string};  // prediction result from python container
+  result: {predictions: any[], mean: any[]};  // prediction result from python container
   loading = false;
   activeGroup: ModelItemModel = new ModelItemModel();
   activeModelIndex = 0;
@@ -104,14 +104,12 @@ export class PredictionComponent implements OnInit {
   loadPrediction() {
     this.loading = true;
     this.api.post<any>(this.activeGroup.models[this.activeModelIndex].url, this.flattenedSpectra, data => {
-      this.result = {  // parse result into prediction and mean string
+      let tmp = Object.entries(omit(data, ['mean', 'std', 'label']))  // form: [[label, [{value, color}]]]
-        predictions: Object.entries(omit(data, ['mean', 'std', 'label']))
+          .map((entry: any) => entry[1].map(e => ({category: entry[0], label: data.label[entry[0]], value: e.value, color: e.color})));  // form: [[{category, label, value, color}]]
-          .map((p: any) => p[1].map(e => `${p[0]}: ${e} ${data.label[p[0]]}`))
+      this.result = {
-          .reduce((s, e) => s.map((el, i) => this.clip(el) + ', ' + e[i])),
+        predictions: tmp[0].map((ignore, columnIndex) => tmp.map(row => row[columnIndex])),  // transpose tmp
-        mean: Object.keys(data.mean).map(e =>
+        mean: Object.entries(data.mean)
-            this.clip(`${e}: ${data.mean[e]} ${data.label[e]}`) +
+          .map((entry:any) => ({category: entry[0], label: data.label[entry[0]], value: entry[1].value, color: entry[1].color, std: data.std[entry[0]]}))  // form: [{category, label, value, color}]
-            (data.std[e] !== '' ? ` (standard deviation: ${data.std[e]})` : '')
-          ).join(', ')
       };
       this.loading = false;
     });