From b1c19a1729f5a875ab486e06d5bc70c9d59cc44c Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Sat, 30 Apr 2022 21:01:57 +0200 Subject: Regulisan odabir kolona i zatamnjenje kolona koje su unchecked (column-table). Backend: u klasu Experiment dodat type i u ColumnInfo columnType. Frontend: u ColumnInfo columnType. Promenjene boje boxplota. --- .../column-table/column-table.component.css | 32 ++++++++++++++++++---- 1 file changed, 27 insertions(+), 5 deletions(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.css') diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index 108efb32..5dc2e9ec 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -3,7 +3,6 @@ table.fixed { display: block; overflow-x: auto; white-space: nowrap; - border: 1px solid var(--ns-primary-50); font-size: 12px; border-radius: 4px; } @@ -18,7 +17,6 @@ table.fixed td { max-width: 200px; min-width: 200px; vertical-align: middle; - background-color: var(--ns-bg-dark-100); margin: 4px; } @@ -27,13 +25,12 @@ table.fixed th { max-width: 120px; min-width: 120px; vertical-align: middle; - background-color: var(--ns-bg-dark-100); + background-color: var(--ns-primary-50); font-size: 14px; } table.fixed th:first-child { text-align: center; - background-color: var(--ns-primary-25); } .columnNames { @@ -107,7 +104,7 @@ table ::ng-deep .mat-form-field-wrapper { } .graphic-class { - background-color: white !important; + opacity: 0.5; } @@ -220,4 +217,29 @@ table ::ng-deep .mat-form-field-wrapper { .long { height: 3rem; +} + +.col-disabled { + background-color: rgb(0, 45, 69); +} + +.text-disabled { + color: gray; +} + +.header-disabled { + color: gray; +} + +.menu-disabled { + pointer-events: none; + opacity: .5; +} + +col:not(.col-disabled) { + background-color: var(--ns-bg-dark-100); +} + +.col-first { + background-color: rgb(1, 56, 86) !important; } \ No newline at end of file -- cgit v1.2.3 From 763eaf066e3b831facd278c32f5c6241c57fa639 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Mon, 2 May 2022 20:01:29 +0200 Subject: Column-table: difolt kategorijska kolona uvek ostaje kategorijska, a numericku korisnik moze da menja. Dodata rotacija na dugmice za podesavanje. Zakomentarisan hasHeader i neka dodavanja na beku da ne bi javljalo kompajlersku. --- backend/api/api/Models/Dataset.cs | 2 +- backend/api/api/Services/FillAnEmptyDb.cs | 18 +++++++-------- frontend/src/app/_data/Dataset.ts | 6 ++--- .../column-table/column-table.component.css | 24 +++++++++++++++++-- .../column-table/column-table.component.html | 27 +++++++++++----------- .../column-table/column-table.component.ts | 15 ++++++++++-- 6 files changed, 62 insertions(+), 30 deletions(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.css') diff --git a/backend/api/api/Models/Dataset.cs b/backend/api/api/Models/Dataset.cs index 0faa43d5..a01f3cf7 100644 --- a/backend/api/api/Models/Dataset.cs +++ b/backend/api/api/Models/Dataset.cs @@ -22,7 +22,7 @@ namespace api.Models public DateTime dateCreated { get; set; } public DateTime lastUpdated { get; set; } public string delimiter { get; set; } - public bool hasHeader { get; set; } + //public bool hasHeader { get; set; } public ColumnInfo[] columnInfo { get; set; } public int rowCount { get; set; } diff --git a/backend/api/api/Services/FillAnEmptyDb.cs b/backend/api/api/Services/FillAnEmptyDb.cs index 062eada3..2690ba93 100644 --- a/backend/api/api/Services/FillAnEmptyDb.cs +++ b/backend/api/api/Services/FillAnEmptyDb.cs @@ -63,9 +63,9 @@ namespace api.Services dataset.dateCreated = DateTime.Now; dataset.lastUpdated = DateTime.Now; dataset.delimiter = ""; - dataset.hasHeader = true; + //dataset.hasHeader = true; dataset.columnInfo = new ColumnInfo[] { }; - dataset.columnInfo = new[] + /*dataset.columnInfo = new[] { new ColumnInfo( "PassengerId", true, 0, 446, 1, 891, 446, new string[]{ }), new ColumnInfo( "Survived", true, 0, 0.38383838534355164f, 0, 1, 0, new string[]{ }), @@ -79,7 +79,7 @@ namespace api.Services new ColumnInfo( "Fare", true, 0, 32.20420837402344f, 0, 512.3292236328125f, 14.45419979095459f, new string[]{ }), new ColumnInfo( "Cabin", false, 687, 0, 0, 0, 0, new string[]{ "B96 B98", "G6", "C23 C25 C27", "C22 C26", "F33", "F2", "E101", "D", "C78", "C93" }), new ColumnInfo( "Embarked", false, 2, 0.3815937042236328f, 0, 6, 0, new string[]{ "S", "C", "Q" }), - }; + };*/ dataset.rowCount = 891; dataset.nullCols = 3; dataset.nullRows = 708; @@ -179,8 +179,8 @@ namespace api.Services dataset.dateCreated = DateTime.Now; dataset.lastUpdated = DateTime.Now; dataset.delimiter = ""; - dataset.hasHeader = true; - dataset.columnInfo = new[] + //dataset.hasHeader = true; + /*dataset.columnInfo = new[] { new ColumnInfo( "Unnamed: 0", true, 0, 26969.5f, 0, 53939, 26969.5f, new string[]{ }), new ColumnInfo( "carat", true, 0, 0.7979397773742676f, 0.20000000298023224f, 5.010000228881836f, 0.699999988079071f, new string[]{ }), @@ -193,7 +193,7 @@ namespace api.Services new ColumnInfo( "x", true, 0, 5.731157302856445f, 0, 10.739999771118164f, 5.699999809265137f, new string[]{ }), new ColumnInfo( "y", true, 0, 5.73452615737915f, 0, 58.900001525878906f, 5.710000038146973f, new string[]{ }), new ColumnInfo( "z", true, 0, 3.538733720779419f, 0, 31.799999237060547f, 3.5299999713897705f, new string[]{ }) - }; + };*/ dataset.rowCount = 53940; dataset.nullCols = 0; dataset.nullRows = 0; @@ -297,15 +297,15 @@ namespace api.Services dataset.dateCreated = DateTime.Now; dataset.lastUpdated = DateTime.Now; dataset.delimiter = ""; - dataset.hasHeader = true; - dataset.columnInfo = new[] + //dataset.hasHeader = true; + /*dataset.columnInfo = new[] { new ColumnInfo( "sepal_length", true, 0, 5.8433332443237305f, 4.300000190734863f, 7.900000095367432f, 5.800000190734863f, new string[]{ }), new ColumnInfo( "sepal_width", true, 0, 3.053999900817871f, 2, 4.400000095367432f, 3, new string[]{ }), new ColumnInfo( "petal_length", true, 0, 3.758666753768921f, 1, 6.900000095367432f, 4.349999904632568f, new string[]{ }), new ColumnInfo( "petal_width", true, 0, 1.1986666917800903f, 0.10000000149011612f, 2.5f, 1.2999999523162842f, new string[]{}), new ColumnInfo( "class", false, 0, 0, 0, 0, 0, new string[]{ "Iris-setosa", "Iris-versicolor", "Iris-virginica" }), - }; + };*/ dataset.nullCols = 150; dataset.nullRows = 0; dataset.isPreProcess = true; diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index 525d371a..09e293fd 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -37,10 +37,10 @@ export class ColumnInfo { public min?: number, public max?: number ) { - if (isNumber) - columnType = ColumnType.numerical; + /*if (isNumber) + this.columnType = ColumnType.numerical; else - columnType = ColumnType.categorical; + this.columnType = ColumnType.categorical;*/ } } diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index 5dc2e9ec..c3f5e4e8 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -55,8 +55,8 @@ mat-slider { } #missingValuesHeader { - font-size: 12px; - line-height: 110% !important; + font-size: 13px; + line-height: 140% !important; } .verticalAlign { @@ -242,4 +242,24 @@ col:not(.col-disabled) { .col-first { background-color: rgb(1, 56, 86) !important; +} + + +/* mat-icon rotate */ + +.rotate { + animation: rotation 3s infinite linear; +} + +.rotate:hover { + cursor: pointer; +} + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } } \ No newline at end of file diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 42c43138..22c9841f 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -100,10 +100,11 @@ Tip - - - Kategorijski - Numerički +

Kategorijski

+ + + Kategorijski + Numerički @@ -111,14 +112,14 @@ Grafik - - + + Statistika - + Mean: {{colInfo.mean}}
Median: {{colInfo.median}}
Min: {{colInfo.min}}
@@ -128,7 +129,7 @@ Q3: {{colInfo.q3}}
--> -
+
{{uniqueValue}}
 @@ -138,7 +139,7 @@ Enkodiranje  - settings + settings @@ -152,8 +153,8 @@ -
Regulisanje
nedostajućih
vrednosti
- settings +
Nedostajuće
vrednosti
+ settings @@ -164,9 +165,9 @@
- + - + diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index 4499196c..e4c41cd8 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -1,5 +1,5 @@ import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core'; -import Dataset from 'src/app/_data/Dataset'; +import Dataset, { ColumnType } from 'src/app/_data/Dataset'; import Experiment, { ColumnEncoding, Encoding, NullValReplacer, NullValueOptions } from 'src/app/_data/Experiment'; import { DatasetsService } from 'src/app/_services/datasets.service'; import { EncodingDialogComponent } from 'src/app/_modals/encoding-dialog/encoding-dialog.component'; @@ -23,6 +23,7 @@ export class ColumnTableComponent implements AfterViewInit { Object = Object; Encoding = Encoding; NullValueOptions = NullValueOptions; + ColumnType = ColumnType; tableData?: any[][]; nullValOption: string[] = []; @@ -35,7 +36,9 @@ export class ColumnTableComponent implements AfterViewInit { ngAfterViewInit(): void { this.datasetService.getMyDatasets().subscribe((datasets) => { - this.dataset = datasets[0]; + this.dataset = datasets[1]; + + this.setColumnTypeInitial(); this.experiment = new Experiment(); this.dataset.columnInfo.forEach(column => { this.columnsChecked.push(true); @@ -57,6 +60,14 @@ export class ColumnTableComponent implements AfterViewInit { }); } + setColumnTypeInitial() { + if (this.dataset != undefined) { + for (let i = 0; i < this.dataset.columnInfo.length; i++) { + this.dataset.columnInfo[i].columnType = (this.dataset.columnInfo[i].isNumber) ? ColumnType.numerical : ColumnType.categorical; + } + } + } + setDeleteColumnsForMissingValTreatment() { if (this.experiment != undefined) { this.experiment.nullValues = NullValueOptions.DeleteRows; -- cgit v1.2.3 From 7fa58b061d19b34b92cf54864a7b353ef4de5ef6 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Tue, 3 May 2022 18:25:00 +0200 Subject: Column-table funkcionalnosti - razno (q1, q3, uniqueValuesPercent, outputColumn, experiment.type). Komponenta javlja roditeljskoj komponenti kad se dese izmene. Malo sredjen izgled. --- frontend/src/app/_data/Dataset.ts | 8 +- frontend/src/app/_data/Experiment.ts | 3 + .../column-table/column-table.component.css | 2 +- .../column-table/column-table.component.html | 110 ++++++++++----------- .../column-table/column-table.component.ts | 47 +++++++-- .../_pages/experiment/experiment.component.html | 4 +- .../app/_pages/experiment/experiment.component.ts | 5 + frontend/src/styles/helper.css | 2 +- 8 files changed, 108 insertions(+), 73 deletions(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.css') diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index 21b4b9ef..7ae5c4ab 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -31,14 +31,14 @@ export class ColumnInfo { public isNumber: boolean = false, public numNulls: number = 0, public uniqueValues?: string[], - public uniqueValuesCount?:number[], - public uniqueValuesPrecent?:number[], + public uniqueValuesCount?: number[], + public uniqueValuesPercent?: number[], public median?: number, public mean?: number, public min?: number, public max?: number, - public q1?:number, - public q3?:number, + public q1?: number, + public q3?: number, ) { /*if (isNumber) this.columnType = ColumnType.numerical; diff --git a/frontend/src/app/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts index ab87e3ca..9ad57fc3 100644 --- a/frontend/src/app/_data/Experiment.ts +++ b/frontend/src/app/_data/Experiment.ts @@ -1,9 +1,12 @@ +import { ProblemType } from "./Model"; + export default class Experiment { _id: string = ''; uploaderId: string = ''; constructor( public name: string = 'Novi eksperiment', public description: string = '', + public type: ProblemType = ProblemType.Regression, public datasetId: string = '', public inputColumns: string[] = [], public outputColumn: string = '', diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index c3f5e4e8..aee2314e 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -87,7 +87,7 @@ table ::ng-deep .mat-form-field-wrapper { } .no-pad { - padding: 1px; + padding: 2px; margin: 0; } diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index fac82bc2..53372574 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -102,7 +102,7 @@

Kategorijski

- + Kategorijski Numerički @@ -118,21 +118,19 @@ Statistika - + - Mean: {{colInfo.mean}}
- Median: {{colInfo.median}}
- Min: {{colInfo.min}}
- Max: {{colInfo.max}}
- - -
+ Mean: {{colInfo.mean}}
+ Median: {{colInfo.median}}
+ Min: {{colInfo.min}}
+ Max: {{colInfo.max}}
+ Q1: {{colInfo.q1}}
+ Q3: {{colInfo.q3}}
+ +
- {{uniqueValue}}
- + ({{colInfo.uniqueValuesPercent[i].toFixed(4)}}%) {{uniqueValue}}
+
@@ -143,7 +141,7 @@ - + {{ optionName }} @@ -158,75 +156,69 @@ - - - - - - - - - - - - +
+ + + + + + - + + + + + - - + - - - + + - - - - + + + + + + + +
+
+ Nema nedostajućih vrednosti. +
-
-
+
Tip problema - - Regresioni - Binarni-Klasifikacioni - Multi-Klasifikacioni + + Regresioni + Binarni-klasifikacioni + Multi-klasifikacioni
Izlazna kolona - - {{item.columnName}} + + {{inputColumn}}
diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index 1946c1f1..01e4e564 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -7,6 +7,7 @@ import { MatDialog } from '@angular/material/dialog'; import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dialog/missingvalues-dialog.component'; import { MatCheckboxChange } from '@angular/material/checkbox'; import { CsvParseService } from 'src/app/_services/csv-parse.service'; +import { ProblemType } from 'src/app/_data/Model'; @Component({ selector: 'app-column-table', @@ -19,10 +20,13 @@ export class ColumnTableComponent implements AfterViewInit { @Input() experiment?: Experiment; @ViewChildren("nullValMenu") nullValMenus!: ElementRef[]; @Output() okPressed: EventEmitter = new EventEmitter(); + @Output() columnTableChanged = new EventEmitter(); + Object = Object; Encoding = Encoding; NullValueOptions = NullValueOptions; ColumnType = ColumnType; + ProblemType = ProblemType; tableData?: any[][]; nullValOption: string[] = []; @@ -35,7 +39,7 @@ export class ColumnTableComponent implements AfterViewInit { ngAfterViewInit(): void { this.datasetService.getMyDatasets().subscribe((datasets) => { - this.dataset = datasets[1]; + this.dataset = datasets[2]; this.setColumnTypeInitial(); this.experiment = new Experiment(); @@ -46,8 +50,9 @@ export class ColumnTableComponent implements AfterViewInit { for (let i = 0; i < this.dataset?.columnInfo.length; i++) { this.experiment?.inputColumns.push(this.dataset.columnInfo[i].columnName); } + this.experiment.outputColumn = this.experiment.inputColumns[0]; this.resetColumnEncodings(Encoding.Label); - this.setDeleteColumnsForMissingValTreatment(); + this.setDeleteRowsForMissingValTreatment(); this.nullValOption = [].constructor(this.dataset.columnInfo.length).fill('Obriši redove'); @@ -67,7 +72,7 @@ export class ColumnTableComponent implements AfterViewInit { } } - setDeleteColumnsForMissingValTreatment() { + setDeleteRowsForMissingValTreatment() { if (this.experiment != undefined) { this.experiment.nullValues = NullValueOptions.DeleteRows; this.experiment.nullValuesReplacers = []; @@ -81,8 +86,13 @@ export class ColumnTableComponent implements AfterViewInit { } } + columnTableChangeDetected() { + this.columnTableChanged.emit(); + } + changeInputColumns(targetMatCheckbox: MatCheckboxChange, columnName: string) { if (this.experiment != undefined) { + if (targetMatCheckbox.checked) { if (this.experiment.inputColumns.filter(x => x == columnName)[0] == undefined) { this.experiment.inputColumns.push(columnName); @@ -94,7 +104,26 @@ export class ColumnTableComponent implements AfterViewInit { //TODO: da se zatamni kolona koja je unchecked //this.experiment.encodings = this.experiment.encodings.filter(x => x.columnName != columnName); samo na kraju iz enkodinga skloni necekirane this.experiment.nullValuesReplacers = this.experiment.nullValuesReplacers.filter(x => x.column != columnName); + if (columnName == this.experiment.outputColumn) + this.experiment.outputColumn = this.experiment.inputColumns[0]; } + this.columnTableChangeDetected(); + } + } + + changeOutputColumn() { + if (this.experiment != undefined && this.dataset != undefined) { + let column = this.dataset.columnInfo.filter(x => x.columnName == this.experiment!.outputColumn)[0]; + if (column.columnType == ColumnType.numerical) { + this.experiment.type = ProblemType.Regression; + } + else { + if (column.uniqueValues!.length == 2) + this.experiment.type = ProblemType.BinaryClassification; + else + this.experiment.type = ProblemType.MultiClassification; + } + this.columnTableChangeDetected(); } } @@ -105,6 +134,7 @@ export class ColumnTableComponent implements AfterViewInit { this.experiment.encodings.push(new ColumnEncoding(this.dataset?.columnInfo[i].columnName, encodingType)); //console.log(this.experiment.encodings); } + this.columnTableChangeDetected(); } } openEncodingDialog() { @@ -141,9 +171,11 @@ export class ColumnTableComponent implements AfterViewInit { option: NullValueOptions.DeleteRows, value: "" }); - this.nullValOption[i] = "Obriši redove"; + let numOfRowsToDelete = (this.dataset.columnInfo.filter(x => x.columnName == this.experiment!.inputColumns[i])[0]).numNulls; + this.nullValOption[i] = "Obriši redove (" + numOfRowsToDelete + ")"; } } + this.columnTableChangeDetected(); } } openMissingValuesDialog() { @@ -159,7 +191,7 @@ export class ColumnTableComponent implements AfterViewInit { MissValsDeleteClicked(event: Event, replacementType: NullValueOptions, index: number) { - if (this.experiment != undefined) { + if (this.experiment != undefined && this.dataset != undefined) { let columnName = (event.currentTarget).value; let arrayElement = this.experiment.nullValuesReplacers.filter(x => x.column == columnName)[0]; @@ -175,7 +207,9 @@ export class ColumnTableComponent implements AfterViewInit { arrayElement.value = ""; } - this.nullValOption[index] = (replacementType == NullValueOptions.DeleteColumns) ? "Obriši kolonu" : "Obriši redove"; + let numOfRowsToDelete = (this.dataset.columnInfo.filter(x => x.columnName == this.experiment!.inputColumns[index])[0]).numNulls; + this.nullValOption[index] = (replacementType == NullValueOptions.DeleteColumns) ? "Obriši kolonu" : "Obriši redove (" + numOfRowsToDelete + ")"; + this.columnTableChangeDetected(); } } @@ -197,6 +231,7 @@ export class ColumnTableComponent implements AfterViewInit { } this.nullValOption[index] = "Popuni sa: " + fillValue; + this.columnTableChangeDetected(); } } getValue(columnName: string): string { diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 86faeb2a..6c53180d 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -32,7 +32,7 @@
- +
@@ -41,7 +41,7 @@
-
+
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 70f941b6..7d71e567 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -92,4 +92,9 @@ export class ExperimentComponent implements AfterViewInit { TabType = TabType; + columnTableChangedEvent() { + //sta se desi kad se nesto promeni u column-table komponenti... + console.log("promenio se column-table"); + } + } diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index d4772134..1c172058 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -121,7 +121,7 @@ .chart-wrapper { width: 150px; height: 150px; - margin: auto; + padding-left: 2px; } .close-button { -- cgit v1.2.3 From 2fbc26bb36c79c9b86a8eb9818b85b1c52a16159 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Tue, 3 May 2022 21:24:20 +0200 Subject: Ispravio bug gde se graf nije prikazivao dok se strane ne resize-uje. --- .../column-table/column-table.component.css | 5 +- .../src/app/_elements/folder/folder.component.html | 2 +- .../src/app/_elements/folder/folder.component.ts | 35 +-- .../_elements/form-model/form-model.component.html | 341 +++++++++++---------- .../_elements/form-model/form-model.component.ts | 14 +- .../src/app/_elements/graph/graph.component.ts | 3 +- .../_pages/experiment/experiment.component.html | 2 +- 7 files changed, 198 insertions(+), 204 deletions(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.css') diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index aee2314e..0477b7be 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -189,8 +189,9 @@ table ::ng-deep .mat-form-field-wrapper { } .hidden { - visibility: hidden; - height: 1px; + /*visibility: hidden; + height: 1px;*/ + display: none; } .bottom-button { diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index e77f837e..113db616 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -66,7 +66,7 @@ zoom_out_map
- +
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index e0336ded..e92ea468 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -9,6 +9,7 @@ import { FormDatasetComponent } from '../form-dataset/form-dataset.component'; import Experiment from 'src/app/_data/Experiment'; import { ExperimentsService } from 'src/app/_services/experiments.service'; import { PredictorsService } from 'src/app/_services/predictors.service'; +import { FormModelComponent } from '../form-model/form-model.component'; @Component({ selector: 'app-folder', @@ -17,18 +18,16 @@ import { PredictorsService } from 'src/app/_services/predictors.service'; }) export class FolderComponent implements AfterViewInit { - @ViewChild(FormDatasetComponent) formDataset?: FormDatasetComponent; - - - + @ViewChild(FormDatasetComponent) formDataset!: FormDatasetComponent; + @ViewChild(FormModelComponent) formModel!: FormModelComponent; @Input() folderName: string = 'Moji podaci'; @Input() files!: FolderFile[] - newFile!: Dataset | Model; + newFile?: Dataset | Model; @Input() type: FolderType = FolderType.Dataset; - @Input() forExperiment?: Experiment; + @Input() forExperiment!: Experiment; @Input() startingTab: TabType = TabType.MyDatasets; newFileSelected: boolean = true; @@ -45,24 +44,22 @@ export class FolderComponent implements AfterViewInit { searchTerm: string = ''; constructor(private datasetsService: DatasetsService, private experimentsService: ExperimentsService, private modelsService: ModelsService, private predictorsService: PredictorsService) { - //PLACEHOLDER - this.forExperiment = new Experiment(); - this.forExperiment.inputColumns = ['kolona1', 'kol2', '???', 'test']; - - this.folders[TabType.File] = []; - this.folders[TabType.NewFile] = []; + this.tabsToShow.forEach(tab => this.folders[tab] = []); + this.files = []; + this.filteredFiles = [] + this.selectTab(this.startingTab); } ngAfterViewInit(): void { this.refreshFiles(); } - _initialized = false; - displayFile() { if (this.type == FolderType.Dataset) - this.formDataset!.dataset = this.fileToDisplay; + this.formDataset.dataset = this.fileToDisplay; + else if (this.type == FolderType.Model) + this.formModel.newModel = this.fileToDisplay; } hoverOverFile(i: number) { @@ -142,12 +139,7 @@ export class FolderComponent implements AfterViewInit { this.folders[TabType.MyExperiments] = experiments; }); - if (!this._initialized) { - this.selectTab(this.startingTab); - this._initialized = true; - } - else - this.searchTermsChanged(); + this.searchTermsChanged(); } saveNewFile() { @@ -232,7 +224,6 @@ export class FolderComponent implements AfterViewInit { selectTab(tab: TabType) { if (tab == TabType.NewFile) { - this.selectNewFile(); } 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 e51c2cac..fa57ad46 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -1,219 +1,220 @@ -
-
+
+
+
+ +
+ + Naziv + + +
+
+ + Tip problema + + + {{ optionName }} + + + +
+ +
+ +
+ + Optimizacija + + + {{ optionName }} + + + + +
+
+ + Funkcija troška + + + {{ optionName }} + + + +
+ +
+ +
+ + Funkcija aktivacije izlaznog sloja + + + {{ optionName }} + + + +
+
+ + Stopa učenja + + + {{ optionName }} + + + +
+ +
+ +
+ + Broj epoha + + +
+
+ + Broj uzoraka po iteraciji + + + {{option}} + + +
-
- - Naziv - -
-
- - Tip problema - - - {{ optionName }} - - - +
+
+
+
+ +
{{testSetDistribution}}% : {{100-testSetDistribution}}%
+
Trening + + Test
+ +
+
+ Nasumični redosled podataka +
+ +
+
-
+ +
+
+ +
+
-
- - Optimizacija - - - {{ optionName }} - - +
+
Broj Skrivenih Slojeva
+ +
{{newModel.hiddenLayers}}
+ -
+
- Funkcija troška - - + Aktivaciona funkcija svih slojeva + + + {{ optionName }}
-
-
- Funkcija aktivacije izlaznog sloja - - - {{ optionName }} - - + Broj neurona svih slojeva +
+
- Stopa učenja - - + Regularizacija svih slojeva + + {{ optionName }}
-
-
- Broj epoha - - -
-
- - Broj uzoraka po iteraciji - - - {{option}} + Stopa regularizacije svih slojeva + + + {{ optionName }} +
-
-
-
-
-
- -
{{testSetDistribution}}% : {{100-testSetDistribution}}%
-
Trening - - Test
- -
-
- Nasumični redosled podataka -
-
-
- - -
-
- -
-
- -
-
Broj Skrivenih Slojeva
- -
{{newModel.hiddenLayers}}
- - -
-
-
- - Aktivaciona funkcija svih slojeva - - - - {{ optionName }} - - - -
- -
- - Broj neurona svih slojeva - - -
-
-
- - Regularizacija svih slojeva - - - {{ optionName }} - - - -
- -
- - Stopa regularizacije svih slojeva - - - {{ optionName }} - - - -
- - -
- -
+ +
-
+
- - Aktivacija - - - - {{ optionName }} - - - - -
-
Broj čvorova
- -
{{newModel.layers[i].neurons}}
- -
+
- - Regularizacija - - - {{ optionName }} - - - - - - Stopa regularizacije - - - {{ optionName }} - - - -
-
+ + Regularizacija + + + {{ optionName }} + + + + + Stopa regularizacije + + + {{ optionName }} + + + +
+
+
\ No newline at end of file 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 d5c497aa..ef456547 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -13,13 +13,12 @@ import { MatSliderChange } from '@angular/material/slider'; }) export class FormModelComponent implements AfterViewInit { @ViewChild(GraphComponent) graph!: GraphComponent; - @Input() forExperiment?: Experiment; + @Input() forExperiment!: Experiment; @Output() selectedModelChangeEvent = new EventEmitter(); testSetDistribution: number = 70; constructor() { } - ngAfterViewInit(): void { - } + ngAfterViewInit(): void { } selectFormControl = new FormControl('', Validators.required); nameFormControl = new FormControl('', [Validators.required, Validators.email]); @@ -34,8 +33,7 @@ export class FormModelComponent implements AfterViewInit { selectRegularisationFormControl = new FormControl('', Validators.required); selectRRateFormControl = new FormControl('', Validators.required); - newModel: Model = new Model(); - myModels?: Model[]; + newModel!: Model; selectedModel?: Model; @@ -57,7 +55,9 @@ export class FormModelComponent implements AfterViewInit { selectedMetrics = []; lossFunction: any = LossFunction; - showMyModels: boolean = true; + loadModel(model: Model) { + this.newModel = model; + } updateGraph() { //console.log(this.newModel.layers); @@ -121,7 +121,6 @@ export class FormModelComponent implements AfterViewInit { } } changeAllRegularisationRate() { - for (let i = 0; i < this.newModel.layers.length; i++) { this.newModel.layers[i].regularisationRate = this.selectedRegularisationRate; } @@ -132,6 +131,7 @@ export class FormModelComponent implements AfterViewInit { this.updateGraph(); } } + updateTestSet(event: MatSliderChange) { this.testSetDistribution = event.value!; } diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts index 31814c2c..c7f8d964 100644 --- a/frontend/src/app/_elements/graph/graph.component.ts +++ b/frontend/src/app/_elements/graph/graph.component.ts @@ -28,7 +28,7 @@ export class GraphComponent implements AfterViewInit { @Input() outputNodeColor: string = '#dfd7d7'; private ctx!: CanvasRenderingContext2D; - @Input() inputColumns?: string[] = []; + @Input() inputColumns?: string[] = ['Nije odabran eksperiment']; constructor() { } @@ -43,6 +43,7 @@ export class GraphComponent implements AfterViewInit { window.addEventListener('resize', () => { this.resize() }); this.update(); this.resize(); + console.log(this.layers); } layers: Node[][] = []; diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 4b75c929..74c59fdf 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -37,7 +37,7 @@
- +
-- cgit v1.2.3