2 files changed, 10 insertions, 4 deletions
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 17a6539d..b11729a7 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -67,7 +67,12 @@
         </div>
         <div #steps id="step_4" class="step-content" *ngIf="step3">
             <div class="step-content-inside">
-                <app-metric-view #metricView></app-metric-view>
+                <app-line-chart [experiment]="experiment"></app-line-chart>
+            </div>
+        </div>
+        <div #steps id="step_5" class="step-content" *ngIf="step4">
+            <div class="step-content-inside">
+                <app-form-predictor></app-form-predictor>
             </div>
         </div>
     </div>
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index ec4275fa..ff17500a 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -15,6 +15,7 @@ import { MetricViewComponent } from 'src/app/_elements/metric-view/metric-view.c
 import { ActivatedRoute, Router } from '@angular/router';
 import { DatasetsService } from 'src/app/_services/datasets.service';
 import { PredictorsService } from 'src/app/_services/predictors.service';
+import { LineChartComponent } from 'src/app/_elements/_charts/line-chart/line-chart.component';
 
 @Component({
   selector: 'app-experiment',
@@ -33,7 +34,7 @@ export class ExperimentComponent implements AfterViewInit {
   @ViewChild("folderDataset") folderDataset!: FolderComponent;
   @ViewChild(ColumnTableComponent) columnTable!: ColumnTableComponent;
   @ViewChild("folderModel") folderModel!: FolderComponent;
-  @ViewChild("metricView") metricView!: MetricViewComponent;
+  @ViewChild(LineChartComponent) linechartComponent!: LineChartComponent;
 
   step1: boolean = false;
   step2: boolean = false;
@@ -89,7 +90,7 @@ export class ExperimentComponent implements AfterViewInit {
         if (this.modelToTrain?._id == mId) {
           stat = stat.replace(/'/g, '"');
           this.history.push(JSON.parse(stat));
-          this.metricView.update(this.history,this.modelToTrain.epochs);
+          this.linechartComponent.updateAll(this.history,this.modelToTrain.epochs);
         }
       });
 
@@ -115,7 +116,7 @@ export class ExperimentComponent implements AfterViewInit {
                 this.step3 = true;
                 let numOfEpochsArray = Array.from({length: model.epochs}, (_, i) => i + 1);
                 setTimeout(() => {
-                  this.metricView.linechartComponent.update(numOfEpochsArray, predictor.metricsAcc, predictor.metricsLoss, predictor.metricsMae, predictor.metricsMse, predictor.metricsValAcc, predictor.metricsValLoss, predictor.metricsValMae, predictor.metricsValMse);
+                  this.linechartComponent.update(numOfEpochsArray, predictor.metricsAcc, predictor.metricsLoss, predictor.metricsMae, predictor.metricsMse, predictor.metricsValAcc, predictor.metricsValLoss, predictor.metricsValMae, predictor.metricsValMse);
                 })
               });
             });