diff options
Diffstat (limited to 'frontend/src/app/_elements')
11 files changed, 83 insertions, 35 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 862a86e1..60b341d0 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 @@ -22,7 +22,8 @@ canvas { } .hide { - display: none; + display: none !important; + background-color: red; } .dl-button { 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 cc1c0121..505dd50b 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,5 +1,5 @@ <div #wrapper class="position-relative" style="width:100%;height:95%; border: 1px solid var(--ns-accent); background-color: var(--ns-bg-dark-100); border-radius: 15px;"> - <div class="d-flex flex-column align-items-stretch" [ngClass]="{'hide':experiment.type != ProblemType.Regression}" style="width: 100%; height: 90%;"> + <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 #myChartmae> </canvas> @@ -9,18 +9,16 @@ </canvas> </div> </div> - <div class="ns-row" [ngClass]="{'hide':experiment.type == ProblemType.Regression}"> - <div class="ns-col"> + <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 #myChartloss> </canvas> </div> - <div class="ns-col"> + <div class="canvas-container"> <canvas #myChartacc> </canvas> </div> </div> - - <div class="bottom d-flex flex-row" style="justify-content: space-between; align-items: center;"> <h3 class="mt-5 mx-2"><span *ngIf="modelName.length > 0 && predictor">Model treniran za konfiguraciju: {{modelName}}</span><span *ngIf="modelName.length > 0 && !predictor">Model se trenira za konfiguraciju: {{modelName}}</span></h3> <button *ngIf="predictor" class="mt-5 mx-2 btn-clear dl-button d-flex flex-row" (click)="downloadFile();" style="display: inline-block;" matTooltip="Preuzmi H5" matTooltipPosition="above"> diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 5d5e7822..e77e05a3 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -76,6 +76,9 @@ {{file.lastUpdated | date}} </div> <div class="mx-2 hover-show" *ngIf="selectedTab !== TabType.PublicDatasets && selectedTab !== TabType.PublicModels"> + <button *ngIf="selectedTab==TabType.MyDatasets || selectedTab==TabType.MyModels" class="btn-clear file-button" (click)="shareFile(file,$event)" style="display: inline-block;" matTooltip="Podeli" matTooltipPosition="above"> + <mat-icon>share</mat-icon> + </button> <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> @@ -122,12 +125,15 @@ <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)" matTooltip="Obriši" matTooltipPosition="above"> + <button *ngIf="this.selectedFile && selectedTab == TabType.File && privacy != Privacy.Public" class="btn-clear file-button" (click)="deleteFile(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;" matTooltip="Preuzmi" matTooltipPosition="above"> + <button *ngIf="this.selectedFile && selectedTab==TabType.File && FolderType.Dataset==this.type" class="btn-clear file-button" (click)="downloadFile(selectedFile,$event)" style="display: inline-block;" matTooltip="Preuzmi" matTooltipPosition="above"> <mat-icon>download</mat-icon> </button> + <button *ngIf="this.selectedFile && selectedTab == TabType.File" class="btn-clear file-button" (click)="shareFile(selectedFile,$event)" style="display: inline-block;" matTooltip="Podeli" matTooltipPosition="above"> + <mat-icon>share</mat-icon> + </button> </div> <!-- <button class="btn-clear file-button"> <mat-icon>zoom_out_map</mat-icon> diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index 6eccb61b..5fa20859 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -15,6 +15,8 @@ import { ActivatedRoute, Router } from '@angular/router'; import Predictor from 'src/app/_data/Predictor'; import FileSaver from 'file-saver'; import isEqual from 'lodash.isequal'; +import { ShareDialogComponent } from 'src/app/_modals/share-dialog/share-dialog.component'; +import { MatDialog } from '@angular/material/dialog'; @Component({ selector: 'app-folder', @@ -50,7 +52,7 @@ export class FolderComponent implements AfterViewInit { searchTerm: string = ''; - constructor(private datasetsService: DatasetsService, private experimentsService: ExperimentsService, private modelsService: ModelsService, private predictorsService: PredictorsService, private signalRService: SignalRService, private router: Router, private route: ActivatedRoute) { + constructor(private datasetsService: DatasetsService, private experimentsService: ExperimentsService, private modelsService: ModelsService, private predictorsService: PredictorsService, private signalRService: SignalRService, private router: Router, private route: ActivatedRoute, public dialog: MatDialog) { this.tabsToShow.forEach(tab => this.folders[tab] = []); } @@ -104,6 +106,18 @@ export class FolderComponent implements AfterViewInit { } selectFile(file?: FolderFile) { + if (this.privacy == Privacy.Public) { + if (file) { + if (this.type == FolderType.Dataset) { + this.router.navigate(['dataset', file?._id]); + } else if (this.type == FolderType.Model) { + this.router.navigate(['model', file?._id]); + } + } + + } + + this.formDataset.resetPagging(); this.selectedFile = file; this.updateLastFileData(file); @@ -154,6 +168,22 @@ export class FolderComponent implements AfterViewInit { this.okPressed.emit(); } + fileToShare: FolderFile | undefined = undefined; + + shareFile(file: FolderFile, event: Event) { + event.stopPropagation(); + + this.fileToShare = file; + + const dialogRef = this.dialog.open(ShareDialogComponent, { + width: '550px', + data: { file: this.fileToShare, fileType: this.type } + }); + dialogRef.afterClosed().subscribe(experiment => { + this.refreshFiles(); + }); + } + _initialized: boolean = false; refreshFiles(selectedDatasetId: string | null = null, selectedModelId: string | null = null) { @@ -547,9 +577,9 @@ export class FolderComponent implements AfterViewInit { selectTab(tab: TabType) { if (tab == TabType.NewFile) { this.selectNewFile(); - } else if (tab == TabType.File) { + } /*else if (tab == TabType.File) { this.selectFile(this.selectedFile); - } + }*/ this.listView = this.getListView(tab); this.type = this.getFolderType(tab); this.privacy = this.getPrivacy(tab); diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.html b/frontend/src/app/_elements/form-dataset/form-dataset.component.html index 2a956128..b518f15c 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html @@ -2,7 +2,7 @@ <div class="topBar"> <div class="kolona mb-3"> <div class="fileButton"> - <button type="button" mat-raised-button (click)="fileInput.click()" [disabled]="dataset._id != ''" > + <button type="button" mat-raised-button (click)="fileInput.click()" [disabled]="dataset._id != '' || disableAll"> <span *ngIf="!firstInput && dataset._id == '' ">Dodaj izvor podataka</span> <span *ngIf="firstInput && dataset._id == '' ">{{filename}}</span> <span *ngIf="dataset._id != '' ">Fajl je odabran</span> @@ -14,7 +14,7 @@ <div role="group"> <mat-form-field class="example-full-width" appearance="fill"> <mat-label>Naziv</mat-label> - <input type="text" matInput value="{{dataset?.name}}" [(ngModel)]="dataset.name" (input)="editEvent.emit()"> + <input type="text" matInput value="{{dataset?.name}}" [(ngModel)]="dataset.name" (input)="editEvent.emit()" [readonly]="disableAll"> <mat-error *ngIf="nameFormControl.hasError('required')"> @@ -26,7 +26,7 @@ <div class="kolona"> <mat-form-field appearance="fill"> <mat-label>Delimiter</mat-label> - <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (selectionChange)="update(); editEvent.emit();" value=","> + <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (selectionChange)="update(); editEvent.emit();" value="," [disabled]="disableAll"> <mat-option *ngFor="let option of delimiterOptions" [value]="option"> {{ option }} </mat-option> @@ -42,7 +42,7 @@ <i class="material-icons-outlined icon-display" [ngClass]="{'hidden': tableData.hasInput}">file_upload</i> - <input class="file" id="file-upload" [disabled]="dataset._id != ''" (change)="changeListener($event)" (valueChange)="dataset.isPreProcess = false; editEvent.emit()" #fileInput type="file" accept=".csv"> + <input class="file" id="file-upload" [disabled]="dataset._id != '' || disableAll" (change)="changeListener($event)" (valueChange)="dataset.isPreProcess = false; editEvent.emit()" #fileInput type="file" accept=".csv"> <div class="datatable"> <div [ngClass]="{'hidden': (!existingFlag)}" class="text-center"> diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts index 3df76aa5..3eb6fe39 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts @@ -13,6 +13,7 @@ import { FormControl, Validators } from '@angular/forms'; styleUrls: ['./form-dataset.component.css'] }) export class FormDatasetComponent { + @Input() disableAll: boolean = false; @ViewChild(DatatableComponent) datatable!: DatatableComponent; 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 0d770fc1..1f0208fa 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -1,4 +1,4 @@ -<div *ngIf="newModel"> +<div *ngIf="newModel!=undefined"> <div id="container"> <div class="ns-row"> @@ -122,7 +122,8 @@ <div class="ns-col"> <!-- {{forExperiment._columnsSelected}} --> - <app-graph [model]="newModel" [inputColumns]="getInputColumns()"></app-graph> + + <app-graph [model]="newModel" [inputColumns]="getInputColumns()" [outputColumn]="(this.forExperiment!=undefined)?this.forExperiment.outputColumn:''"></app-graph> </div> </div> </div> diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts index 7c84d2ba..7831f573 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -12,6 +12,8 @@ import { MatSliderChange } from '@angular/material/slider'; styleUrls: ['./form-model.component.css'] }) export class FormModelComponent implements AfterViewInit { + @Input() disableAll: boolean = false; + @ViewChild(GraphComponent) graph!: GraphComponent; @Input() forExperiment!: Experiment; @Output() selectedModelChangeEvent = new EventEmitter<Model>(); @@ -25,11 +27,7 @@ export class FormModelComponent implements AfterViewInit { @Output() editEvent = new EventEmitter(); ngAfterViewInit(): void { - this.lossFunction = this.lossFunctions[this.forProblemType][0]; - this.outputLayerActivationFunction = this.outputLayerActivationFunctions[this.forProblemType][0]; - - this.newModel.lossFunction = this.lossFunction; - this.newModel.outputLayerActivationFunction = this.outputLayerActivationFunction; + } selectFormControl = new FormControl('', Validators.required); @@ -80,10 +78,17 @@ export class FormModelComponent implements AfterViewInit { loadModel(model: Model) { this.newModel = model; this.forProblemType = model.type; + this.lossFunction = this.lossFunctions[this.forProblemType][0]; + this.outputLayerActivationFunction = this.outputLayerActivationFunctions[this.forProblemType][0]; + + this.newModel.lossFunction = this.lossFunction; + this.newModel.outputLayerActivationFunction = this.outputLayerActivationFunction; + this.updateGraph(); } updateGraph() { - this.graph.update(); + if(this.newModel) + this.graph.update(); } removeLayer() { diff --git a/frontend/src/app/_elements/graph/graph.component.css b/frontend/src/app/_elements/graph/graph.component.css index 456a8df1..f8604125 100644 --- a/frontend/src/app/_elements/graph/graph.component.css +++ b/frontend/src/app/_elements/graph/graph.component.css @@ -10,11 +10,14 @@ /*border: 1px solid red;*/ transform: translate(-50%, -50%); } - -.node-text:not(.inputs) { +.output{ + font-weight: bold; + color: var(--offwhite); +} +.node-text:not(.output) { color: transparent; } -.node-text:not(.inputs):hover { +.node-text:not(.output):hover { color: var(--offwhite); -}
\ No newline at end of file +} diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html index 411e8b53..2ba42eba 100644 --- a/frontend/src/app/_elements/graph/graph.component.html +++ b/frontend/src/app/_elements/graph/graph.component.html @@ -1,8 +1,10 @@ <div #graphWrapper class="position-relative" style="height: 14rem; width: 100%;"> - <!-- <ng-container *ngFor="let layer of layers; let i = index"> - <div [ngClass]="{'inputs': i==0}" class="node-text" *ngFor="let node of layer; let j = index" [style.left.%]="node.x * 99.4" [style.top.%]="node.y * 100"> - {{ i == 0 ? (inputColumns && inputColumns.length >= j ? inputColumns[j] : 'nepoznato') : (i > 0 && i - < layers.length - 1 ? model!.layers[i-1].activationFunction : (i==layers.length - 1 ? 'out' : '')) }} </div> - </ng-container> --> + <div *ngIf="outputColumn!='' && inputColumns!=[]"> + <ng-container *ngFor="let layer of layers; let i = index"> + <div [ngClass]="{'inputs': i==0,'output':i==layers.length-1}" class="node-text" *ngFor="let node of layer; let j = index" [style.left.%]="node.x * 100" [style.top.%]="(i!=layers.length-1)?node.y * 100:node.y*70"> + {{ i == 0 ? (inputColumns && inputColumns.length >= j ? inputColumns[j] : 'nepoznato') : (i > 0 && i + < layers.length - 1 ? model!.layers[i-1].activationFunction : (i==layers.length - 1 ? " "+outputColumn : '')) }} </div> + </ng-container> + </div> <canvas #graphCanvas></canvas> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts index 04be9f04..f14e54e7 100644 --- a/frontend/src/app/_elements/graph/graph.component.ts +++ b/frontend/src/app/_elements/graph/graph.component.ts @@ -28,7 +28,8 @@ export class GraphComponent implements AfterViewInit { @Input() outputNodeColor: string = '#dfd7d7'; private ctx!: CanvasRenderingContext2D; - @Input() inputColumns?: string[]; + @Input() inputColumns?: string[]=[]; + @Input() outputColumn?:string=""; constructor() { } @@ -81,7 +82,7 @@ export class GraphComponent implements AfterViewInit { this.layers.push([new Node(outX, outY, this.outputNodeColor)]) this.draw(); } - + draw() { this.ctx.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height); |