diff options
Diffstat (limited to 'frontend/src/app')
6 files changed, 43 insertions, 29 deletions
diff --git a/frontend/src/app/_data/Notification.ts b/frontend/src/app/_data/Notification.ts index 181bb332..c505d399 100644 --- a/frontend/src/app/_data/Notification.ts +++ b/frontend/src/app/_data/Notification.ts @@ -3,6 +3,7 @@ export default class Notification { constructor( public title: string = 'Treniranje u toku...', public id: string = '042', - public progress: number = 0.5 + public progress: number = 0.5, + public hasProgress: boolean = false ) { } }
\ No newline at end of file diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts index f68277c8..62cca456 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -7,13 +7,14 @@ import { DatatableComponent, TableData } from 'src/app/_elements/datatable/datat import { DatasetsService } from 'src/app/_services/datasets.service'; import { CsvParseService } from 'src/app/_services/csv-parse.service'; import { Output, EventEmitter } from '@angular/core'; +import { SignalRService } from 'src/app/_services/signal-r.service'; @Component({ selector: 'app-dataset-load', templateUrl: './dataset-load.component.html', styleUrls: ['./dataset-load.component.css'] }) -export class DatasetLoadComponent { +export class DatasetLoadComponent implements OnInit { @Output() selectedDatasetChangeEvent = new EventEmitter<Dataset>(); @@ -32,7 +33,7 @@ export class DatasetLoadComponent { term: string = ""; - constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) { + constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService, private signalRService: SignalRService) { this.datasets.getMyDatasets().subscribe((datasets) => { this.myDatasets = datasets; }); @@ -84,4 +85,14 @@ export class DatasetLoadComponent { this.selectedDatasetChangeEvent.emit(this.selectedDataset); return true; } + + ngOnInit(): void { + if (this.signalRService.hubConnection) { + this.signalRService.hubConnection.on("NotifyDataset", _ => { + this.refreshMyDatasets(); + }); + } else { + console.warn("Dataset-Load: No connection!"); + } + } } diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html index 527d3f1a..1c21fb6c 100644 --- a/frontend/src/app/_elements/graph/graph.component.html +++ b/frontend/src/app/_elements/graph/graph.component.html @@ -1,3 +1,3 @@ -<div id="graphWrapper" class="w-100" style="height: 16rem;"> - <canvas id="graphCanvas" class="border"></canvas> +<div #graphWrapper class="w-100" style="height: 16rem;"> + <canvas #graphCanvas class="border"></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 e0a05145..8051acc3 100644 --- a/frontend/src/app/_elements/graph/graph.component.ts +++ b/frontend/src/app/_elements/graph/graph.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import Dataset from 'src/app/_data/Dataset'; import Model from 'src/app/_data/Model'; @@ -7,7 +7,12 @@ import Model from 'src/app/_data/Model'; templateUrl: './graph.component.html', styleUrls: ['./graph.component.css'] }) -export class GraphComponent implements OnInit { +export class GraphComponent implements AfterViewInit { + + @ViewChild('graphWrapper') + wrapper!: ElementRef; + @ViewChild('graphCanvas') + canvas!: ElementRef; @Input() model?: Model; @Input() inputCols: number = 1; @@ -20,16 +25,12 @@ export class GraphComponent implements OnInit { @Input() inputNodeColor: string = '#ffdd11'; @Input() outputNodeColor: string = '#44ee22'; - private wrapper?: HTMLDivElement; - private canvas?: HTMLCanvasElement; private ctx?: CanvasRenderingContext2D; constructor() { } - ngOnInit(): void { - this.wrapper = (<HTMLDivElement>document.getElementById('graphWrapper')); - this.canvas = (<HTMLCanvasElement>document.getElementById('graphCanvas')); - const ctx = this.canvas.getContext('2d'); + ngAfterViewInit(): void { + const ctx = this.canvas.nativeElement.getContext('2d'); if (ctx) { this.ctx = ctx; } else { @@ -39,10 +40,6 @@ export class GraphComponent implements OnInit { window.addEventListener('resize', () => { this.resize() }); this.update(); this.resize(); - - /*setInterval(() => { - this.update(); - }, 5000);*/ } layers?: Node[][]; @@ -83,7 +80,7 @@ export class GraphComponent implements OnInit { } draw() { - this.ctx!.clearRect(0, 0, this.canvas!.width, this.canvas!.height); + this.ctx!.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height); let index = 0; while (index < this.layers!.length - 1) { @@ -126,13 +123,13 @@ export class GraphComponent implements OnInit { ratio = 1; resize() { - this.width = this.wrapper!.offsetWidth; - this.height = this.wrapper!.offsetHeight; + this.width = this.wrapper.nativeElement.offsetWidth; + this.height = this.wrapper.nativeElement.offsetHeight; this.ratio = this.width / this.height; if (this.canvas) { - this.canvas.width = this.width; - this.canvas.height = this.height; + this.canvas.nativeElement.width = this.width; + this.canvas.nativeElement.height = this.height; } this.draw(); diff --git a/frontend/src/app/_elements/notifications/notifications.component.html b/frontend/src/app/_elements/notifications/notifications.component.html index 4e33f77c..ef897cfc 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.html +++ b/frontend/src/app/_elements/notifications/notifications.component.html @@ -1,5 +1,10 @@ <div *ngIf="notifications && notifications.length > 0" class="position-fixed card card-body p-1 m-3" style="bottom: 0; right: 0; width: 18rem;"> - <h2 class="m-auto" (click)="closed = !closed;" data-bs-toggle="collapse" href="#collapseNotifs" role="button" aria-expanded="true" aria-controls="collapseNotifs">Notifikacije + <h2 class="m-auto" (click)="closed = !closed;" data-bs-toggle="collapse" href="#collapseNotifs" role="button" aria-expanded="true" aria-controls="collapseNotifs"> + Notifikacije + <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> + {{notifications.length}} + <span class="visually-hidden">unread notifications</span> + </span> <button class="border-0 bg-white"> <mat-icon class="position-absolute" style="top: 8px; right: 12px;">{{closed ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon> @@ -11,7 +16,7 @@ <div class="d-flex flex-row"> <p>{{notification.title}}</p> </div> - <div class="border-3 border-primary bg-dark m-1" style="height: 5px; margin-top: -10px !important;"> + <div *ngIf="notification.hasProgress" class="border-3 border-primary bg-dark m-1" style="height: 5px; margin-top: -10px !important;"> <div class="bg-primary" style="height: 5px;" [style]="'width: '+(notification.progress*100)+'%;'"> </div> </div> diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts index cad8a95f..e199f70a 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.ts +++ b/frontend/src/app/_elements/notifications/notifications.component.ts @@ -13,17 +13,17 @@ export class NotificationsComponent implements OnInit { closed: boolean = false; constructor(private signalRService: SignalRService) { - } ngOnInit(): void { if (this.signalRService.hubConnection) { - this.signalRService.hubConnection.on("NotifyDataset", (message: string) => { - this.notifications.push(new Notification(message, "datasetIDOvde!!!", 1.0)); + this.signalRService.hubConnection.on("NotifyDataset", (dName: string, dId: string) => { + this.notifications.push(new Notification(`Obrađen izvor podataka: ${dName}`, dId, 1.0, false)); }); - this.signalRService.hubConnection.on("NotifyEpoch", (message: string) => { - this.notifications.push(new Notification(message, "predictorIDOvde!!!", 0.5 /*(epoch / model.epochs)*/)); + this.signalRService.hubConnection.on("NotifyEpoch", (epoch: string, mName: string, mId: string, numEpochs) => { + //todo epoch + this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, 0.5)); }); } else { console.warn("Notifications: No connection!"); |