added help component, improved prediction with model templates

This commit is contained in:
VLE2FE
2020-08-20 10:42:02 +02:00
parent 9c2095c31a
commit 433572f819
25 changed files with 459 additions and 65 deletions

View File

@ -1,12 +1,53 @@
<h2>Prediction</h2>
<h4 *ngIf="result !== '' || loading" [@inOut]>
Result: {{result}}<rb-loading-spinner *ngIf="loading"></rb-loading-spinner>
</h4>
<rb-tab-panel (tabChanged)="groupChange($event)">
<ng-container *ngFor="let group of d.arr.modelGroups; index as i">
<div *rbTabPanelItem="group.group; id: i"></div>
</ng-container>
</rb-tab-panel>
<rb-form-file name="spectrum-upload" label="spectrum file" maxSize="10000000" class="space-below"
(ngModelChange)="fileToArray($event)" placeholder="Select file or drag and drop" dragDrop ngModel>
</rb-form-file>
<rb-form-select label="Model" (change)="result = undefined" [(ngModel)]="activeModelIndex">
<option *ngFor="let model of activeGroup.models; index as i" [value]="i">{{model.name}}</option>
</rb-form-select>
<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}}&nbsp;{{activeGroup.models[activeModelIndex].label}}
</h4>
</ng-container>
<ng-template #singleSampleResult>
<h4>
Average result: {{result.meanPrediction}}&nbsp;{{activeGroup.models[activeModelIndex].label}},
standard deviation: {{result.std}}
</h4>
<a href="javascript:" 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}}&nbsp;{{activeGroup.models[activeModelIndex].label}}
</p>
</div>
</ng-template>
</div>
<div class="file-input space-below">
<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>
<rb-loading-spinner *ngIf="loading; else predictButton"></rb-loading-spinner>
<ng-template #predictButton>
<rb-icon-button icon="forward-right" mode="primary" *ngIf="spectrumNames.length; else placeholder"
(click)="loadPrediction()">
Predict
</rb-icon-button>
<ng-template #placeholder><div></div></ng-template>
</ng-template>
<rb-form-checkbox name="multiple-samples" [(ngModel)]="multipleSamples">
multiple samples
</rb-form-checkbox>
</div>
<div class="dpt-chart">
<canvas baseChart