Recreate the Experiments Parallel Coordinates Graph (#1974)

* UI: Import echarts and ngx-echarts (#1879)

* Import echarts module and ngx-echarts directive for Echarts.

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

* UI: Remove trials graph component (#1879)

* Remove trials graph component.

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

* UI: Introduce graph's component (#1879)

* Create a new component that uses Echarts Parallel Graph.

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

* 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]>

* UI: Parallel Graph unit test (#1879)

* Create unit test for Parallel Graph.

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

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

Author: elenzio9

pkg/new-ui/v1beta1/frontend/angular.json

@@ -26,7 +26,6 @@
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss", "src/assets/css/d3.parcoords.css"],
             "scripts": [
-              "node_modules/d3/d3.js",
               "node_modules/ace-builds/src-min/ace.js",
               "node_modules/ace-builds/src-min/mode-yaml.js",
               "node_modules/ace-builds/src-min/theme-xcode.js"

pkg/new-ui/v1beta1/frontend/package-lock.json

@@ -32,13 +32,14 @@
     "@fortawesome/free-brands-svg-icons": "^5.12.0",
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
     "@swimlane/ngx-charts": "^19.0.1",
-    "d3": "^3.5.17",
-    "d3-shape": "^2.0.0",
     "date-fns": "1.29.0",
+    "echarts": "^5.3.2",
+    "echarts-stat": "^1.2.0",
     "js-yaml": "^4.0.0",
     "lodash-es": "4.17.11",
     "material-icons": "^0.3.1",
     "ng2-ace-editor": "^0.3.9",
+    "ngx-echarts": "^8.0.1",
     "ngx-json-viewer": "^2.4.0",
     "rxjs": "~6.6.7",
     "tslib": "^2.0.0",
@@ -50,7 +51,6 @@
     "@angular/compiler-cli": "~12.2.7",
     "@angular/language-service": "~12.2.7",
     "@kubernetes/client-node": "^0.12.2",
-    "@types/d3-shape": "^2.0.0",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",

pkg/new-ui/v1beta1/frontend/package.json

@@ -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.html

@@ -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.showGraphFn(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.showGraphFn(trials);
           });
       }),
     );
@@ -253,4 +253,10 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
       return StatusEnum.CREATED;
     }
   }
+
+  private showGraphFn(response: string): boolean {
+    if (!response.includes(',,') && response.includes('\n')) {
+      return true;
+    }
+  }
 }

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

@@ -14,8 +14,8 @@ import { ExperimentDetailsComponent } from './experiment-details.component';
 import { TrialsTableModule } from './trials-table/trials-table.module';
 import { ExperimentOverviewModule } from './overview/experiment-overview.module';
 import { ExperimentDetailsTabModule } from './details/experiment-details-tab.module';
-import { TrialsGraphModule } from './trials-graph/trials-graph.module';
 import { ExperimentYamlModule } from './yaml/experiment-yaml.module';
+import { TrialsGraphEchartsModule } from './trials-graph-echarts/trials-graph-echarts.module';
 
 @NgModule({
   declarations: [ExperimentDetailsComponent],
@@ -29,10 +29,10 @@ import { ExperimentYamlModule } from './yaml/experiment-yaml.module';
     PanelModule,
     ExperimentOverviewModule,
     ExperimentDetailsTabModule,
-    TrialsGraphModule,
     MatProgressSpinnerModule,
     ExperimentYamlModule,
     TitleActionsToolbarModule,
+    TrialsGraphEchartsModule
   ],
   exports: [ExperimentDetailsComponent],
 })

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

@@ -0,0 +1,3 @@
+<div class="graph-wrapper">
+  <div echarts [initOpts]="initOpts" [options]="options" [merge]="options" class="graph"></div>
+</div>

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

@@ -1,43 +1,33 @@
-:host {
-  display: block;
-}
-
-.graph-wrapper {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.d3-graph {
-  width: 400px;
-
-  @media (min-width: 768px) {
-    width: 700px;
-  }
-
-  @media (min-width: 1024px) {
-    width: 1000px;
-  }
-
-  @media (min-width: 1400px) {
-    width: 1300px;
-  }
-
-  @media (min-width: 1650px) {
-    width: 1600px;
-  }
-
-  @media (min-width: 2000px) {
-    width: 1900px;
-  }
-
-  height: 600px;
-}
-
-.spinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+.graph-wrapper {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.graph {
+  width: 400px;
+
+  @media (min-width: 768px) {
+    width: 700px;
+  }
+
+  @media (min-width: 1024px) {
+    width: 1000px;
+  }
+
+  @media (min-width: 1400px) {
+    width: 1300px;
+  }
+
+  @media (min-width: 1650px) {
+    width: 1600px;
+  }
+
+  @media (min-width: 2000px) {
+    width: 1900px;
+  }
+
+  height: 600px;
+}