UI: Modify graph's wrapper component (#1879)

* Make the wrapper component use the new graph.
* Show the graph when at least one trial is completed.

Signed-off-by: Elena Zioga <[email protected]>

Author: elenzio9

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.html

@@ -13,22 +13,21 @@
     <ng-container *ngIf="pageLoading; else content">
       <lib-loading-spinner></lib-loading-spinner>
     </ng-container>
-
     <!--the tabs-->
   </div>
 </div>
 
 <ng-template #content>
-  <app-trials-graph
+  <app-trials-graph-echarts
     *ngIf="showGraph; else emptyGraph"
     [experimentTrialsCsv]="experimentTrialsCsv"
-    [hoveredTrial]="hoveredTrial"
+    [experiment]="experimentDetails"
     class="graph"
-  ></app-trials-graph>
+  ></app-trials-graph-echarts>
 
   <ng-template #emptyGraph>
     <lib-panel icon="info" color="primary" class="panel">
-      Couldn't find information for the underlying Trials.
+      Couldn't find any successful Trial.
     </lib-panel>
   </ng-template>
 

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.ts

@@ -110,7 +110,7 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
         const data = transformStringResponses(response);
         this.columns = data.types;
         this.details = this.parseTrialsDetails(data.details);
-        this.showGraph = true;
+        this.showGraph = this.showGraphF(response);
       });
     this.backendService
       .getExperiment(this.name, this.namespace)
@@ -184,7 +184,7 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
             const data = transformStringResponses(trials);
             this.columns = data.types;
             this.details = this.parseTrialsDetails(data.details);
-            this.showGraph = trials.split(/\r\n|\r|\n/).length > 1;
+            this.showGraph = this.showGraphF(trials);
           });
       }),
     );
@@ -253,4 +253,10 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
       return StatusEnum.CREATED;
     }
   }
+
+  private showGraphF(response: string): boolean {
+    if (!response.includes(',,') && response.includes('\n')) {
+      return true;
+    }
+  }
 }

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.module.ts

@@ -15,6 +15,7 @@ import { TrialsTableModule } from './trials-table/trials-table.module';
 import { ExperimentOverviewModule } from './overview/experiment-overview.module';
 import { ExperimentDetailsTabModule } from './details/experiment-details-tab.module';
 import { ExperimentYamlModule } from './yaml/experiment-yaml.module';
+import { TrialsGraphEchartsModule } from './trials-graph-echarts/trials-graph-echarts.module';
 
 @NgModule({
   declarations: [ExperimentDetailsComponent],
@@ -31,6 +32,7 @@ import { ExperimentYamlModule } from './yaml/experiment-yaml.module';
     MatProgressSpinnerModule,
     ExperimentYamlModule,
     TitleActionsToolbarModule,
+    TrialsGraphEchartsModule
   ],
   exports: [ExperimentDetailsComponent],
 })