aboutsummaryrefslogtreecommitdiff
path: root/frontend/src
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/app/_data/Model.ts16
-rw-r--r--frontend/src/app/_elements/dataset-load/dataset-load.component.html51
-rw-r--r--frontend/src/app/_elements/dataset-load/dataset-load.component.ts4
-rw-r--r--frontend/src/app/_elements/datatable/datatable.component.css0
-rw-r--r--frontend/src/app/_elements/datatable/datatable.component.html29
-rw-r--r--frontend/src/app/_elements/datatable/datatable.component.spec.ts25
-rw-r--r--frontend/src/app/_elements/datatable/datatable.component.ts19
-rw-r--r--frontend/src/app/_pages/add-model/add-model.component.html130
-rw-r--r--frontend/src/app/_pages/add-model/add-model.component.ts70
-rw-r--r--frontend/src/app/_services/web-socket.service.spec.ts16
-rw-r--r--frontend/src/app/_services/web-socket.service.ts39
-rw-r--r--frontend/src/app/app.component.html3
-rw-r--r--frontend/src/app/app.module.ts8
-rw-r--r--frontend/src/config.ts3
-rw-r--r--frontend/src/index.html6
15 files changed, 274 insertions, 145 deletions
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 0768a374..07364564 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -26,7 +26,9 @@ export default class Model {
public inputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
public hiddenLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
- public username: string = ''
+ public username: string = '',
+ public nullValues: NullValueOptions = NullValueOptions.DeleteRows,
+ public nullValuesReplacers = []
) { }
}
@@ -96,4 +98,16 @@ export enum Optimizer {
SGD = 'SGD',
SGDMomentum = 'SGDMomentum',
RMSprop = 'RMSprop'
+}
+
+export enum NullValueOptions {
+ DeleteRows = 'delete_rows',
+ DeleteColumns = 'delete_columns',
+ Replace = 'replace'
+}
+
+export enum ReplaceWith {
+ None = '...',
+ Mean = 'Srednja vrednost',
+ Median = 'Medijana'
} \ No newline at end of file
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
index 76fc40e2..b159c748 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
@@ -5,57 +5,28 @@
</div>
<div class="col-3">
<label for="name" class="col-form-label">Naziv dataseta:</label>
- <input type="text" class="form-control mb-3" name="name" placeholder="Naziv..."
- [(ngModel)]="dataset.name">
- <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
- <div>
- <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea>
- </div>
+ <input type="text" class="form-control mb-3" name="name" placeholder="Naziv..." [(ngModel)]="dataset.name">
+ <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+ <div>
+ <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea>
+ </div>
</div>
<div class="col-1">
</div>
<div class="col-4 mt-4">
- <input list=delimiterOptions
- placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2" [(ngModel)]="delimiter"
- (input)="update()">
+ <input list=delimiterOptions placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2"
+ [(ngModel)]="delimiter" (input)="update()">
<datalist id=delimiterOptions>
<option *ngFor="let option of delimiterOptions">{{option}}</option>
</datalist>
<label for="type" class="form-check-label my-5">Da li .csv ima header?
- <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="hasHeader" type="checkbox" value="" id="checkboxHeader" checked>
+ <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="hasHeader" type="checkbox"
+ value="" id="checkboxHeader" checked>
</label>
<br>
- <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" accept=".csv">
+ <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)"
+ accept=".csv">
</div>
</div>
-
- <div class="table-responsive" *ngIf="hasInput">
- <table *ngIf="csvRecords.length > 0 && hasHeader" class="table table-bordered table-light mt-4">
- <thead>
- <tr>
- <th *ngFor="let item of csvRecords[0]; let i = index">{{item}}</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let row of csvRecords | slice:1:11">
- <td *ngFor="let col of row">{{col}}</td>
- </tr>
- </tbody>
- </table>
-
- <table *ngIf="csvRecords.length > 0 && !hasHeader" class="table table-bordered table-light mt-4">
- <tbody>
- <tr *ngFor="let row of csvRecords | slice:0:10">
- <td *ngFor="let col of row">{{col}}</td>
- </tr>
- </tbody>
- </table>
- </div>
-
- <div *ngIf="csvRecords.length > 0 && hasInput" id="info">
- . . . <br>
- {{rowsNumber}} x {{colsNumber}}
- </div>
-
</div> \ 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 bccf13b7..7f432b9a 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
@@ -15,7 +15,6 @@ export class DatasetLoadComponent {
delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano ","
hasHeader: boolean = true;
-
hasInput: boolean = false;
csvRecords: any[] = [];
@@ -39,10 +38,9 @@ export class DatasetLoadComponent {
this.hasInput = false;
return;
}
- else
+ else
this.hasInput = true;
- console.log(this.files);
this.update();
}
diff --git a/frontend/src/app/_elements/datatable/datatable.component.css b/frontend/src/app/_elements/datatable/datatable.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/datatable/datatable.component.css
diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html
new file mode 100644
index 00000000..2c469ecc
--- /dev/null
+++ b/frontend/src/app/_elements/datatable/datatable.component.html
@@ -0,0 +1,29 @@
+<div *ngIf="data">
+ <div class="table-responsive">
+ <table *ngIf="hasHeader" class="table table-bordered table-light mt-4">
+ <thead>
+ <tr>
+ <th *ngFor="let item of data[0]; let i = index">{{item}}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let row of data | slice:1:11">
+ <td *ngFor="let col of row">{{col}}</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table *ngIf="data.length > 0 && !hasHeader" class="table table-bordered table-light mt-4">
+ <tbody>
+ <tr *ngFor="let row of data | slice:0:10">
+ <td *ngFor="let col of row">{{col}}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div id="info">
+ . . . <br>
+ {{data.length}} x {{data[0].length}}
+ </div>
+</div> \ No newline at end of file
diff --git a/frontend/src/app/_elements/datatable/datatable.component.spec.ts b/frontend/src/app/_elements/datatable/datatable.component.spec.ts
new file mode 100644
index 00000000..3cf06160
--- /dev/null
+++ b/frontend/src/app/_elements/datatable/datatable.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatatableComponent } from './datatable.component';
+
+describe('DatatableComponent', () => {
+ let component: DatatableComponent;
+ let fixture: ComponentFixture<DatatableComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ DatatableComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DatatableComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/frontend/src/app/_elements/datatable/datatable.component.ts b/frontend/src/app/_elements/datatable/datatable.component.ts
new file mode 100644
index 00000000..d3740d83
--- /dev/null
+++ b/frontend/src/app/_elements/datatable/datatable.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-datatable',
+ templateUrl: './datatable.component.html',
+ styleUrls: ['./datatable.component.css']
+})
+export class DatatableComponent implements OnInit {
+
+ @Input() hasHeader?: boolean = true;
+
+ @Input() data?: any[] = [];
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html
index 33066f80..afd4ceb4 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -3,9 +3,7 @@
</div>
<div id="wrapper">
-
<div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
-
<div class="form-group row mt-3 mb-2 d-flex justify-content-center">
<!--justify-content-center-->
<h2 class="col-2"> Nov model: </h2>
@@ -38,42 +36,39 @@
</button>
<h3 class="mt-3 mx-3">ili</h3>
<button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()"
- [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}">
+ [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}">
Dodajte novi dataset
</button>
</div>
- <!-- POSTOJECI ILI NOVI DATASET -->
-
- <!-- POSTOJECI -->
- <div class="px-5">
- <div *ngIf="showMyDatasets" class="overflow-auto" style="max-height: 500px;">
- <ul class="list-group">
- <li class="list-group-item p-3" *ngFor="let dataset of myDatasets" [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}">
- <app-item-dataset name="usersDataset" [dataset]="dataset" (click)="selectThisDataset(dataset)"></app-item-dataset>
- </li>
- </ul>
- </div>
+ <div class="px-5">
+ <div *ngIf="showMyDatasets" class="overflow-auto" style="max-height: 500px;">
+ <ul class="list-group">
+ <li class="list-group-item p-3" *ngFor="let dataset of myDatasets"
+ [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}">
+ <app-item-dataset name="usersDataset" [dataset]="dataset"
+ (click)="selectThisDataset(dataset)"></app-item-dataset>
+ </li>
+ </ul>
</div>
-
- <!-- NOVI -->
- <app-dataset-load *ngIf="!showMyDatasets" id="dataset" (loaded)="datasetLoaded = true"></app-dataset-load>
- </div>
+ </div>
+ <app-dataset-load *ngIf="!showMyDatasets" id="dataset"
+ (loaded)="datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.hasHeader">
+ </app-dataset-load>
+ <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable>
+ </div>
- <!-- ULAZNE/IZLAZNE KOLONE - POSTOJECI DATASET -->
- <div *ngIf="showMyDatasets && this.selectedDataset" class="mt-4">
- <h2 class="text-center">
- Izabrali ste dataset: <span style="color: #003459; font-weight: bold">{{this.selectedDataset.name}}</span>
- </h2>
- <div class="row mt-5">
+ <!-- ULAZNE/IZLAZNE KOLONE -->
+ <div *ngIf="selectedDataset">
+ <div class="row">
<div class="col d-flex justify-content-center">
<h3>Izaberite ulazne kolone:</h3>
<div id="divInputs" class="form-check mt-2">
<br>
- <div *ngFor="let item of this.selectedDataset.header; let i = index">
- <input class="form-check-input" type="checkbox" value="{{item}}"
- id="cb_{{item}}" name="cbsExisting" checked [disabled]="this.selectedOutputColumnVal == item">&nbsp;
+ <div *ngFor="let item of selectedDataset.header; let i = index">
+ <input class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}"
+ name="cbsNew" checked [disabled]="this.selectedOutputColumnVal == item">&nbsp;
<label class="form-check-label" for="cb_{{item}}">
{{item}}
</label>
@@ -84,45 +79,57 @@
<h3>Izaberite izlaznu kolonu:</h3>
<div id="divOutputs" class="form-check mt-2">
<br>
- <div *ngFor="let item of this.selectedDataset.header; let i = index">
- <input class="form-check-input" type="radio" value="{{item}}"
- id="rb_{{item}}" name="rbsExisting" (change)="this.selectedOutputColumnVal = item">&nbsp;
+ <div *ngFor="let item of selectedDataset.header; let i = index">
+ <input class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbsNew"
+ (change)="this.selectedOutputColumnVal = item">&nbsp;
<label class="form-check-label" for="rb_{{item}}">
{{item}}
</label>
</div>
</div>
</div>
- </div>
- </div>
- <!-- ULAZNE/IZLAZNE KOLONE - NOVI DATASET-->
- <div *ngIf="!showMyDatasets && datasetLoaded">
- <div *ngIf="datasetLoadComponent && datasetLoadComponent.files[0]" class="row">
- <div class="col d-flex justify-content-center">
- <h3>Izaberite ulazne kolone:</h3>
- <div id="divInputs" class="form-check mt-2">
- <br>
- <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index">
- <input class="form-check-input" type="checkbox" value="{{item}}"
- id="cb_{{item}}" name="cbsNew" checked [disabled]="this.selectedOutputColumnVal == item">&nbsp;
- <label class="form-check-label" for="cb_{{item}}">
- {{item}}
- </label>
- </div>
- </div>
- </div>
- <div class="col d-flex justify-content-left">
- <h3>Izaberite izlaznu kolonu:</h3>
- <div id="divOutputs" class="form-check mt-2">
- <br>
- <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index">
- <input class="form-check-input" type="radio" value="{{item}}"
- id="rb_{{item}}" name="rbsNew" (change)="this.selectedOutputColumnVal = item">&nbsp;
- <label class="form-check-label" for="rb_{{item}}">
- {{item}}
- </label>
+ <div class="my-2" *ngIf="datasetFile">
+ <h2>Popunjavanje nedostajućih vrednosti:</h2>
+ <div class="form-check">
+ <input type="radio" [(ngModel)]="newModel.nullValues" [value]="NullValueOptions.DeleteRows"
+ class="form-check-input" value="deleteRows" name="fillMissing" id="delRows" checked
+ data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
+ <label for="delRows" class="form-check-label">Obriši
+ redove sa nedostajućim vrednostima</label><br>
+ <input type="radio" [(ngModel)]="newModel.nullValues" [value]="NullValueOptions.DeleteColumns"
+ class="form-check-input" value="deleteCols" name="fillMissing" id="delCols"
+ data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
+ <label for="delCols" class="form-check-label">Obriši
+ kolone sa nedostajućim vrednostima</label><br>
+ <input type="radio" [(ngModel)]="newModel.nullValues" [value]="NullValueOptions.Replace"
+ class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse"
+ data-bs-target="#fillMissingCustom:not(.show)">
+ <label for="replace" class="form-check-label">Izabraću
+ vrednosti koje će da zamene nedostajuće vrednosti za svaku kolonu...</label><br><br>
+ <div class="collapse" id="fillMissingCustom">
+ <div>
+ <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
+ <div id="columnReplacers">
+ <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3">
+ <div class="input-group row" *ngIf="getInputById('cb_'+column).checked">
+ <span class="input-group-text col-4 text-center">
+ {{column}}
+ </span>
+ <input type="text" class="form-control col-4">
+ <select [id]="'replaceOptions'+i" class="form-control col-4"
+ *ngIf="isNumber(datasetFile[1][i])">
+ <option
+ *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
+ [value]="option">
+ {{ optionName }}
+ </option>
+ </select>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -257,7 +264,8 @@
</div>
<div class="col-5">
<label for="splitYesNo" class="form-check-label">Podela test skupa:&nbsp;&nbsp;
- <input id="splitYesNo" class="form-check-input" type="checkbox" [checked]="newModel.randomTestSet"
+ <input id="splitYesNo" class="form-check-input" type="checkbox"
+ [checked]="newModel.randomTestSet"
(change)="newModel.randomTestSet = !newModel.randomTestSet">
</label>
</div>
@@ -288,8 +296,8 @@
<label for="percentage" class="form-label">Procenat podataka koji se uzima za trening skup:</label>
</div>
<div class="col-1">
- <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90" [(ngModel)]="tempTestSetDistribution"
- [disabled] = "!newModel.randomTestSet">
+ <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90"
+ [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet">
</div>
</div>
diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts
index 7bfb7204..1c9198a3 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -1,10 +1,11 @@
import { Component, OnInit, ViewChild } from '@angular/core';
-import Model from 'src/app/_data/Model';
-import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from 'src/app/_data/Model';
+import Model, { ReplaceWith } from 'src/app/_data/Model';
+import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions } from 'src/app/_data/Model';
import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-load.component';
import { ModelsService } from 'src/app/_services/models.service';
import shared from 'src/app/Shared';
import Dataset from 'src/app/_data/Dataset';
+import { DatatableComponent } from 'src/app/_elements/datatable/datatable.component';
@Component({
@@ -15,6 +16,7 @@ import Dataset from 'src/app/_data/Dataset';
export class AddModelComponent implements OnInit {
@ViewChild(DatasetLoadComponent) datasetLoadComponent?: DatasetLoadComponent;
+ @ViewChild(DatatableComponent) datatable?: DatatableComponent;
datasetLoaded: boolean = false;
newModel: Model;
@@ -24,7 +26,10 @@ export class AddModelComponent implements OnInit {
ActivationFunction = ActivationFunction;
LossFunction = LossFunction;
Optimizer = Optimizer;
+ NullValueOptions = NullValueOptions;
+ ReplaceWith = ReplaceWith;
Object = Object;
+ document = document;
shared = shared;
selectedOutputColumnVal: string = '';
@@ -33,6 +38,8 @@ export class AddModelComponent implements OnInit {
myDatasets?: Dataset[];
existingDatasetSelected: boolean = false;
selectedDataset?: Dataset;
+ datasetFile?: any[];
+ datasetHasHeader?: boolean = true;
tempTestSetDistribution: number = 90;
@@ -62,9 +69,9 @@ export class AddModelComponent implements OnInit {
addModel() {
if (!this.showMyDatasets)
- this.saveModelWithNewDataset();
+ this.saveModelWithNewDataset();
else
- this.saveModelWithExistingDataset();
+ this.saveModelWithExistingDataset();
}
trainModel() {
@@ -124,14 +131,14 @@ export class AddModelComponent implements OnInit {
if (this.selectedDataset) { //dataset je izabran
this.getCheckedInputCols();
this.getCheckedOutputCol();
-
- if (this.validationInputsOutput()) {
+
+ if (this.validationInputsOutput()) {
this.newModel.datasetId = this.selectedDataset._id;
-
+
this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
this.tempTestSetDistribution = 90;
this.newModel.username = shared.username;
-
+
this.models.addModel(this.newModel).subscribe((response) => {
console.log('ADD MODEL: DONE! REPLY:\n', response);
}, (error) => {
@@ -147,11 +154,9 @@ export class AddModelComponent implements OnInit {
getCheckedInputCols() {
this.newModel.inputColumns = [];
let checkboxes: any;
- if (this.showMyDatasets)
- checkboxes = document.getElementsByName("cbsExisting");
- else
- checkboxes = document.getElementsByName("cbsNew");
-
+
+ checkboxes = document.getElementsByName("cbsNew");
+
for (let i = 0; i < checkboxes.length; i++) {
let thatCb = <HTMLInputElement>checkboxes[i];
if (thatCb.checked == true && thatCb.disabled == false)
@@ -162,10 +167,8 @@ export class AddModelComponent implements OnInit {
getCheckedOutputCol() {
this.newModel.columnToPredict = '';
let radiobuttons: any;
- if (this.showMyDatasets)
- radiobuttons = document.getElementsByName("rbsExisting");
- else
- radiobuttons = document.getElementsByName("rbsNew");
+
+ radiobuttons = document.getElementsByName("rbsNew");
for (let i = 0; i < radiobuttons.length; i++) {
let thatRb = <HTMLInputElement>radiobuttons[i];
@@ -208,6 +211,10 @@ export class AddModelComponent implements OnInit {
if (datasets[i]._id == dataset._id)
}*/
+
+ //this.datasetFile = csvRecords;
+ this.datasetHasHeader = false;
+
this.resetCbsAndRbs();
}
@@ -223,17 +230,8 @@ export class AddModelComponent implements OnInit {
}
checkAllCbs() {
let checkboxes: any;
- //if (this.showMyDatasets)
- checkboxes = document.getElementsByName("cbsExisting");
- //else
- //checkboxes = document.getElementsByName("cbsNew");
-
- for (let i = 0; i < checkboxes.length; i++) {
- (<HTMLInputElement>checkboxes[i]).checked = true;
- (<HTMLInputElement>checkboxes[i]).disabled = false;
- }
- checkboxes = document.getElementsByName("cbsNew");
+ checkboxes = document.getElementsByName("cbsNew");
for (let i = 0; i < checkboxes.length; i++) {
(<HTMLInputElement>checkboxes[i]).checked = true;
(<HTMLInputElement>checkboxes[i]).disabled = false;
@@ -242,16 +240,10 @@ export class AddModelComponent implements OnInit {
uncheckRbs() {
this.selectedOutputColumnVal = '';
let radiobuttons: any;
- //if (this.showMyDatasets)
- radiobuttons = document.getElementsByName("rbsExisting");
- //else
- //radiobuttons = document.getElementsByName("rbsNew");
+ radiobuttons = document.getElementsByName("rbsNew");
for (let i = 0; i < radiobuttons.length; i++)
(<HTMLInputElement>radiobuttons[i]).checked = false;
- radiobuttons = document.getElementsByName("rbsNew");
- for (let i = 0; i < radiobuttons.length; i++)
- (<HTMLInputElement>radiobuttons[i]).checked = false;
}
refreshMyDatasetList() {
@@ -260,4 +252,14 @@ export class AddModelComponent implements OnInit {
});
}
+ isNumber(value: string | number): boolean {
+ return ((value != null) &&
+ (value !== '') &&
+ !isNaN(Number(value.toString())));
+ }
+
+
+ getInputById(id: string): HTMLInputElement {
+ return document.getElementById(id) as HTMLInputElement;
+ }
}
diff --git a/frontend/src/app/_services/web-socket.service.spec.ts b/frontend/src/app/_services/web-socket.service.spec.ts
new file mode 100644
index 00000000..a86aeca7
--- /dev/null
+++ b/frontend/src/app/_services/web-socket.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { WebSocketService } from './web-socket.service';
+
+describe('WebSocketService', () => {
+ let service: WebSocketService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(WebSocketService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/frontend/src/app/_services/web-socket.service.ts b/frontend/src/app/_services/web-socket.service.ts
new file mode 100644
index 00000000..890ada6b
--- /dev/null
+++ b/frontend/src/app/_services/web-socket.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { ConstantBackoff, Websocket, WebsocketBuilder } from 'websocket-ts';
+import { API_SETTINGS } from 'src/config';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class WebSocketService {
+
+ ws?: Websocket;
+
+ private handlers: Function[] = [];
+
+ constructor() {
+ this.ws = new WebsocketBuilder(API_SETTINGS.apiWSUrl)
+ .withBackoff(new ConstantBackoff(30000))
+ .onOpen((i, e) => { console.log('WS: Connected to ' + API_SETTINGS.apiWSUrl) })
+ .onMessage((i, e) => {
+ console.log('WS MESSAGE: ', e.data);
+ this.handlers.forEach(handler => {
+ handler(e.data);
+ })
+ })
+ .onClose((i, e) => { console.log('WS: Connection closed!') })
+ .build();
+ }
+
+ send(msg: string) {
+ this.ws?.send(msg);
+ }
+
+ addHandler(handler: Function) {
+ this.handlers.push(handler);
+ }
+
+ removeHandler(handler: Function) {
+ this.handlers.splice(this.handlers.indexOf(handler), 1);
+ }
+}
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 2ec16fc2..f44a6d00 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -3,4 +3,5 @@
<router-outlet></router-outlet>
<!--<app-barchart></app-barchart>
<app-scatterchart></app-scatterchart>-->
-</div> \ No newline at end of file
+</div>
+<app-notifications></app-notifications> \ No newline at end of file
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 9d2bbc26..4612e3a7 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -6,8 +6,8 @@ import { HttpClientModule } from '@angular/common/http';
import { MatSliderModule } from '@angular/material/slider';
import { MatIconModule } from '@angular/material/icon';
-import {NgChartsModule} from 'ng2-charts';
-import { Ng2SearchPipe, Ng2SearchPipeModule } from 'ng2-search-filter';
+import { NgChartsModule } from 'ng2-charts';
+import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { DatasetLoadComponent } from './_elements/dataset-load/dataset-load.component';
@@ -33,6 +33,8 @@ import { BrowsePredictorsComponent } from './_pages/browse-predictors/browse-pre
import { PredictComponent } from './_pages/predict/predict.component';
import { ScatterchartComponent } from './scatterchart/scatterchart.component';
import { BarchartComponent } from './barchart/barchart.component';
+import { NotificationsComponent } from './_elements/notifications/notifications.component';
+import { DatatableComponent } from './_elements/datatable/datatable.component';
import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-datasets.component';
@NgModule({
@@ -57,6 +59,8 @@ import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-dataset
PredictComponent,
ScatterchartComponent,
BarchartComponent,
+ NotificationsComponent,
+ DatatableComponent,
FilterDatasetsComponent
],
imports: [
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
index 8c48672e..f1c14194 100644
--- a/frontend/src/config.ts
+++ b/frontend/src/config.ts
@@ -1,3 +1,4 @@
export const API_SETTINGS = {
- apiURL: 'http://localhost:5283/api'
+ apiURL: 'http://localhost:5283/api',
+ apiWSUrl: 'ws://localhost:5283/api/websocket/ws'
} \ No newline at end of file
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 0079969e..1461c9ae 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -1,5 +1,6 @@
<!doctype html>
<html lang="en">
+
<head>
<meta charset="utf-8">
<title>Frontend</title>
@@ -10,8 +11,9 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
+
<body class="mat-typography">
<app-root></app-root>
- <script src="node_modules/chart.js/src/chart.js"></script>
</body>
-</html>
+
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-20 00:41:48 +0000