Izmenio Notifications, dodao automatsko osvezavanje dataset-load kada se dataset preprocesira. Ispravio bag sa grafom gde samo prva graf komponenta funkcionise.

7 files changed, 43 insertions, 30 deletions

diff --git a/backend/microservice/api/controller.py b/backend/microservice/api/controller.py
index 08f953a6..8e12c41d 100644
--- a/backend/microservice/api/controller.py
+++ b/backend/microservice/api/controller.py
@@ -73,5 +73,4 @@ def returnColumnsInfo():
     return jsonify(dataset)
     
 print("App loaded.")
-ml_socket.start()
 app.run()
\ No newline at end of file
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!");