diff options
Diffstat (limited to 'frontend/src/app/_elements')
5 files changed, 189 insertions, 143 deletions
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css index 7dbbde7a..9694119d 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css @@ -1,17 +1,46 @@ -canvas{ +.canvas-container { + height: 50%; + margin: 5px; +} + +.bottom { + height: 10%; +} - width:100% !important; - height:100% !important; +canvas { + max-height: 100%; border: 1px solid var(--ns-primary); background-color: var(--ns-bg-dark-100); border-radius: 5px; margin: 0; font-size: 11 !important; padding: 0; - } -.ns-col{ - margin: 5px; } -.hide{ - display: none; + +.ns-col { + margin: 5px; +} + +.hide { + display: none; } + +.dl-button { + position: relative; + color: var(--offwhite); + border-radius: 4px; + border: 1px solid var(--ns-primary); + background-color: var(--ns-bg-dark-50); + margin: 5px; + padding: 10px; + cursor: pointer; + z-index: 1001; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.dl-button:hover { + background-color: var(--ns-primary); +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html index e36d0dcf..a81f9dc4 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html @@ -1,24 +1,29 @@ -<div #wrapper class="position-relative " style="width:100%;height:95%;"> - <div class="ns-row" [ngClass]="{'hide':experiment.type != ProblemType.Regression}"> - <div class="ns-col" > - <canvas id="myChartmae" #canvasmae> +<div #wrapper class="position-relative" style="width:100%;height:95%;"> + <div class="d-flex flex-column align-items-stretch" [ngClass]="{'hide':experiment.type != ProblemType.Regression}" style="width: 100%; height: 90%;"> + <div class="canvas-container"> + <canvas id="myChartmae" #canvas> </canvas> </div> - <div class="ns-col"> - <canvas id="myChartmse" #canvasmse> + <div class="canvas-container"> + <canvas id="myChartmse" #canvas> </canvas> </div> </div> - <div class="ns-row" [ngClass]="{'hide':experiment.type == ProblemType.Regression}"> - <div class="ns-col" > - <canvas id="myChartloss" #canvasloss> + <div class="ns-row" [ngClass]="{'hide':experiment.type == ProblemType.Regression}"> + <div class="ns-col"> + <canvas id="myChartloss" #canvas> </canvas> </div> - <div class="ns-col" > - <canvas id="myChartacc" #canvasacc> + <div class="ns-col"> + <canvas id="myChartacc" #canvas> </canvas> </div> + </div> + + <div class="bottom d-flex flex-row align-items-center"> + <button *ngIf="predictor" class="btn-clear dl-button d-flex flex-row" (click)="downloadFile();" style="display: inline-block;" matTooltip="Preuzmi H5" matTooltipPosition="above"> + <mat-icon>download</mat-icon> <div>H5</div> + </button> </div> - </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts index 2b97d6b4..ceff02bd 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts @@ -1,7 +1,10 @@ -import { Component, AfterViewInit, ElementRef, ViewChild, Input } from '@angular/core'; +import { Component, AfterViewInit, ElementRef, ViewChild, Input, ViewChildren, QueryList } from '@angular/core'; import { Chart } from 'chart.js'; +import FileSaver from 'file-saver'; import Experiment from 'src/app/_data/Experiment'; import Model, { ProblemType } from 'src/app/_data/Model'; +import Predictor from 'src/app/_data/Predictor'; +import { PredictorsService } from 'src/app/_services/predictors.service'; @Component({ selector: 'app-line-chart', @@ -15,19 +18,34 @@ export class LineChartComponent implements AfterViewInit { dataMAE: number[] = []; dataMSE: number[] = []; dataLOSS: number[] = []; - dataValAcc:number[]=[]; - dataValMAE:number[]=[]; - dataValMSE:number[]=[]; - dataValLoss:number[]=[]; + dataValAcc: number[] = []; + dataValMAE: number[] = []; + dataValMSE: number[] = []; + dataValLoss: number[] = []; dataEpoch: number[] = []; @ViewChild('wrapper') wrapper!: ElementRef; - @ViewChild('canvas') - canvas!: ElementRef; - @Input() experiment!:Experiment; - constructor() { - + @ViewChildren('canvas') + canvas!: QueryList<ElementRef>; + @Input() experiment!: Experiment; + @Input() predictor?: Predictor; + + + downloadFile() { + if (!this.predictor) { + return; + } + + const fileId = this.predictor.h5FileId; + if (fileId != undefined) + this.predictorsService.downloadH5(fileId).subscribe((response) => { + FileSaver.saveAs(response, fileId + '.h5'); + }); + } + + constructor(private predictorsService: PredictorsService) { + } width = 700; height = 400; @@ -36,18 +54,13 @@ export class LineChartComponent implements AfterViewInit { myChartMae!: Chart; myChartMse!: Chart; myChartLoss!: Chart; - ProblemType=ProblemType; + ProblemType = ProblemType; resize() { - this.width = this.wrapper.nativeElement.offsetWidth; + //this.width = this.wrapper.nativeElement.offsetWidth; this.height = this.wrapper.nativeElement.offsetHeight; - - if (this.canvas) { - this.canvas.nativeElement.width = this.width; - this.canvas.nativeElement.height = this.height; - } } - update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[], myValAcc:number[],myValLoss:number[],myValMae:number[],myValMse:number[]) { - + update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[], myValAcc: number[], myValLoss: number[], myValMae: number[], myValMse: number[]) { + this.dataEpoch.length = 0; this.dataEpoch.push(...myEpochs); @@ -80,7 +93,7 @@ export class LineChartComponent implements AfterViewInit { this.myChartMae.update(); this.myChartMse.update(); } - updateAll(history: any[],totalEpochs:number) { + updateAll(history: any[], totalEpochs: number) { const myAcc: number[] = []; const myMae: number[] = []; const myMse: number[] = []; @@ -93,11 +106,10 @@ export class LineChartComponent implements AfterViewInit { const myEpochs: number[] = []; this.history = history; this.history.forEach((metrics, epoch) => { - if(totalEpochs>100) - { - let epochEstimate=epoch*Math.round(Math.sqrt(totalEpochs)) - if(epochEstimate>totalEpochs) - epochEstimate=totalEpochs; + if (totalEpochs > 100) { + let epochEstimate = epoch * Math.round(Math.sqrt(totalEpochs)) + if (epochEstimate > totalEpochs) + epochEstimate = totalEpochs; myEpochs.push(epochEstimate); } else @@ -131,10 +143,10 @@ export class LineChartComponent implements AfterViewInit { } }); - this.update(myEpochs, myAcc, myLoss, myMae, myMse, myValAcc,myValLoss,myValMAE,myValMSE); + this.update(myEpochs, myAcc, myLoss, myMae, myMse, myValAcc, myValLoss, myValMAE, myValMSE); } ngAfterViewInit(): void { - + window.addEventListener('resize', () => { this.resize() }); this.resize(); this.myChartAcc = new Chart("myChartacc", @@ -147,27 +159,27 @@ export class LineChartComponent implements AfterViewInit { label: 'Accuracy', data: this.dataAcc, borderWidth: 1, - + }, { label: 'Val_Accuracy', data: this.dataValAcc, borderWidth: 1 - } + } ] }, options: { - responsive: true, - maintainAspectRatio: true, + //responsive: true, + //maintainAspectRatio: true, plugins: { legend: { - labels: { - // This more specific font property overrides the global property - color:'white', - font: { - size: 10 - } + labels: { + // This more specific font property overrides the global property + color: 'white', + font: { + size: 10 } + } } }, scales: { @@ -181,14 +193,14 @@ export class LineChartComponent implements AfterViewInit { title: { display: true, text: 'Epoha', - color:"white" + color: "white" } }, y: { beginAtZero: true, ticks: { color: 'white' - + }, grid: { color: "rgba(0, 99, 171, 0.5)" @@ -196,7 +208,7 @@ export class LineChartComponent implements AfterViewInit { title: { display: true, text: 'Vrednost', - color:"white" + color: "white" } } @@ -207,40 +219,40 @@ export class LineChartComponent implements AfterViewInit { } }, - + ); - if(this.experiment.type==ProblemType.BinaryClassification || this.experiment.type==ProblemType.MultiClassification){} + if (this.experiment.type == ProblemType.BinaryClassification || this.experiment.type == ProblemType.MultiClassification) { } this.myChartLoss = new Chart("myChartloss", { type: 'line', data: { labels: this.dataEpoch, datasets: [ - { - label: 'Loss', - data: this.dataLOSS, - borderWidth: 1 - }, - { - label: 'Val_Loss', - data: this.dataValLoss, - borderWidth: 1 - }, + { + label: 'Loss', + data: this.dataLOSS, + borderWidth: 1 + }, + { + label: 'Val_Loss', + data: this.dataValLoss, + borderWidth: 1 + }, ] }, options: { - responsive: true, - maintainAspectRatio: true, + //responsive: true, + //maintainAspectRatio: true, plugins: { legend: { - labels: { - // This more specific font property overrides the global property - color:'white', - font: { - size: 10 - } + labels: { + // This more specific font property overrides the global property + color: 'white', + font: { + size: 10 } + } } }, scales: { @@ -254,14 +266,14 @@ export class LineChartComponent implements AfterViewInit { title: { display: true, text: 'Epoha', - color:"white" + color: "white" } }, y: { beginAtZero: true, ticks: { color: 'white' - + }, grid: { color: "rgba(0, 99, 171, 0.5)" @@ -269,7 +281,7 @@ export class LineChartComponent implements AfterViewInit { title: { display: true, text: 'Vrednost', - color:"white" + color: "white" } } @@ -280,7 +292,7 @@ export class LineChartComponent implements AfterViewInit { } }, - + ); this.myChartMse = new Chart("myChartmse", { @@ -288,31 +300,31 @@ export class LineChartComponent implements AfterViewInit { data: { labels: this.dataEpoch, datasets: [ - { - label: 'MSE', - data: this.dataMSE, - borderWidth: 1 - }, - { - label: 'Val_MSE', - data: this.dataValMSE, - borderWidth: 1 - } + { + label: 'MSE', + data: this.dataMSE, + borderWidth: 1 + }, + { + label: 'Val_MSE', + data: this.dataValMSE, + borderWidth: 1 + } ] }, options: { - responsive: true, - maintainAspectRatio: true, + //responsive: true, + //maintainAspectRatio: true, plugins: { legend: { - labels: { - // This more specific font property overrides the global property - color:'white', - font: { - size: 10 - } + labels: { + // This more specific font property overrides the global property + color: 'white', + font: { + size: 10 } + } } }, scales: { @@ -326,14 +338,14 @@ export class LineChartComponent implements AfterViewInit { title: { display: true, text: 'Epoha', - color:"white" + color: "white" } }, y: { beginAtZero: true, ticks: { color: 'white' - + }, grid: { color: "rgba(0, 99, 171, 0.5)" @@ -341,7 +353,7 @@ export class LineChartComponent implements AfterViewInit { title: { display: true, text: 'Vrednost', - color:"white" + color: "white" } } @@ -352,7 +364,7 @@ export class LineChartComponent implements AfterViewInit { } }, - + ); this.myChartMae = new Chart("myChartmae", { @@ -360,31 +372,31 @@ export class LineChartComponent implements AfterViewInit { data: { labels: this.dataEpoch, datasets: [ - { - label: 'MAE', - data: this.dataMAE, - borderWidth: 1 - }, - { - label: 'Val_MAE', - data: this.dataValMAE, - borderWidth: 1 - }, + { + label: 'MAE', + data: this.dataMAE, + borderWidth: 1 + }, + { + label: 'Val_MAE', + data: this.dataValMAE, + borderWidth: 1 + }, ] }, options: { - responsive: true, - maintainAspectRatio: true, + //responsive: true, + //maintainAspectRatio: true, plugins: { legend: { - labels: { - // This more specific font property overrides the global property - color:'white', - font: { - size: 10 - } + labels: { + // This more specific font property overrides the global property + color: 'white', + font: { + size: 10 } + } } }, scales: { @@ -398,14 +410,14 @@ export class LineChartComponent implements AfterViewInit { title: { display: true, text: 'Epoha', - color:"white" + color: "white" } }, y: { beginAtZero: true, ticks: { color: 'white' - + }, grid: { color: "rgba(0, 99, 171, 0.5)" @@ -413,7 +425,7 @@ export class LineChartComponent implements AfterViewInit { title: { display: true, text: 'Vrednost', - color:"white" + color: "white" } } @@ -424,9 +436,9 @@ export class LineChartComponent implements AfterViewInit { } }, - + ); - + } } diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 34cd4693..5d5e7822 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -76,16 +76,16 @@ {{file.lastUpdated | date}} </div> <div class="mx-2 hover-show" *ngIf="selectedTab !== TabType.PublicDatasets && selectedTab !== TabType.PublicModels"> - <button *ngIf="selectedTab==TabType.MyDatasets" class="btn-clear file-button" (click)="downloadFile(file,$event)" style="display: inline-block;"> - <mat-icon matTooltip="Preuzmi" matTooltipPosition="above">download</mat-icon> + <button *ngIf="selectedTab==TabType.MyDatasets" class="btn-clear file-button" (click)="downloadFile(file,$event)" style="display: inline-block;" matTooltip="Preuzmi" matTooltipPosition="above"> + <mat-icon>download</mat-icon> </button> - <button class="btn-clear file-button" (click)="deleteFile(file, $event)" style="display: inline-block;"> - <mat-icon matTooltip="Obriši" matTooltipPosition="above">delete</mat-icon> + <button class="btn-clear file-button" (click)="deleteFile(file, $event)" style="display: inline-block;" matTooltip="Obriši" matTooltipPosition="above"> + <mat-icon>delete</mat-icon> </button> </div> - <div class="mx-2 hover-show" *ngIf="selectedTab == TabType.PublicDatasets || selectedTab == TabType.PublicModels"> + <div class="mx-2 hover-show" *ngIf="selectedTab == TabType.PublicDatasets || selectedTab == TabType.PublicModels" matTooltip="Uvezi" matTooltipPosition="right"> <button class="btn-clear file-button" (click)="addFile(file, $event)"> - <mat-icon matTooltip="Uvezi" matTooltipPosition="right">note_add</mat-icon> + <mat-icon>note_add</mat-icon> </button> </div> </div> @@ -122,11 +122,11 @@ <div [ngSwitch]="newFileSelected" *ngIf="!listView"> <div class="file-bottom-buttons" *ngIf="selectedTab != TabType.NewFile"> <div class="file-bottom-buttons-helper"> - <button *ngIf="this.selectedFile && selectedTab == TabType.File && privacy != Privacy.Public" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)"> - <mat-icon matTooltip="Obriši" matTooltipPosition="above">delete</mat-icon> + <button *ngIf="this.selectedFile && selectedTab == TabType.File && privacy != Privacy.Public" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)" matTooltip="Obriši" matTooltipPosition="above"> + <mat-icon>delete</mat-icon> </button> - <button *ngIf="this.selectedFile && selectedTab==TabType.File && FolderType.Dataset==this.type" class="btn-clear file-button" (click)="downloadFile(this.selectedFile,$event)" style="display: inline-block;"> - <mat-icon matTooltip="Preuzmi" matTooltipPosition="above">download</mat-icon> + <button *ngIf="this.selectedFile && selectedTab==TabType.File && FolderType.Dataset==this.type" class="btn-clear file-button" (click)="downloadFile(this.selectedFile,$event)" style="display: inline-block;" matTooltip="Preuzmi" matTooltipPosition="above"> + <mat-icon>download</mat-icon> </button> </div> <!-- <button class="btn-clear file-button"> @@ -169,6 +169,6 @@ </button> </ng-container> </div> - + </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html index 9051a2d4..0d770fc1 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -90,8 +90,8 @@ <!-- GRAF --> <div class="m-2"> - <div class="row"> - <div class="col-sm-3 rounded" style="border:1px solid var(--ns-primary);margin-top: 10px; width: fit-content;"> + <div class="ns-row"> + <div class="ns-col rounded" style="border:1px solid var(--ns-primary);margin-top: 10px; min-width: fit-content; max-width: 30%;"> <!-- <label>Veličina skupa za validaciju: </label><b>{{validationSize}} %</b> <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div> <div class="text-center pt-0 mt-0 p-0">Trening ////slider////// Test</div> @@ -120,7 +120,7 @@ </div> </div> - <div class="col-sm-9"> + <div class="ns-col"> <!-- {{forExperiment._columnsSelected}} --> <app-graph [model]="newModel" [inputColumns]="getInputColumns()"></app-graph> </div> |