create icons for plot types

pdb-js/src/app/app.component.html

@@ -11,7 +11,7 @@
 
 <div id="main-toolbar">
   <a href="/" title="open main page"><img src="assets/img/home.svg" class="icon-small" aria-hidden="false" aria-label="go to main page" /></a> 
-  <a href="/vis" title="open visualization page"><img src="assets/img/area-chart.svg" class="icon-small" aria-hidden="false" aria-label="go to visualization page" /></a>
+  <a href="/vis" title="open visualization page"><img src="assets/img/scatter-chart.svg" class="icon-small" aria-hidden="false" aria-label="go to visualization page" /></a>
   <a href="/upload" title="upload data"><img src="assets/img/upload.svg" class="icon-small" aria-hidden="false" aria-label="upload data" /></a>
   <a href="/help" title="open help page" class="right"><img src="assets/img/question-mark-round.svg" class="icon-small" aria-hidden="false" aria-label="help" /></a>
 </div>

pdb-js/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule } from '@angular/core';
+import { NgModule, enableProdMode } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -32,3 +32,5 @@ import {MatFormFieldModule, MatInputModule} from '@angular/material';
   bootstrap: [AppComponent]
 })
 export class AppModule { }
+
+enableProdMode()

pdb-js/src/app/main-page/main-page.component.html

@@ -12,7 +12,7 @@
 </style>
 
 <div id="main-page-links">
-<a href="/vis" class="button-large" title="open visualization page"><img src="assets/img/area-chart.svg" class="icon-large" aria-hidden="false" aria-label="go to visualization page" /></a>
+<a href="/vis" class="button-large" title="open visualization page"><img src="assets/img/scatter-chart.svg" class="icon-large" aria-hidden="false" aria-label="go to visualization page" /></a>
 
 <a href="/upload" class="button-large" title="upload data"><img src="assets/img/upload.svg" class="icon-large" aria-hidden="false" aria-label="upload data" /></a>
 </div>

pdb-js/src/app/plot.service.ts

@@ -10,14 +10,19 @@ export class PlotService {
 
   plotTypes: Array<PlotType>;
   
-  tagFields: Observable<TagField>;
+  tagFields: Array<TagField>;
 
   constructor(private http: HttpClient) {
     this.plotTypes = new Array<PlotType>();
-    this.plotTypes.push(new PlotType("Scatter"));
-    this.plotTypes.push(new PlotType("Cumulative Distribution"));
-    this.plotTypes.push(new PlotType("Parallel Requests"));
-    this.plotTypes.push(new PlotType("Parallel Requests"));
+    this.plotTypes.push(new PlotType("Scatter", "scatter-chart"));
+    this.plotTypes.push(new PlotType("Heatmap", "heatmap"));
+    this.plotTypes.push(new PlotType("Cumulative Distribution", "cumulative-distribution-chart"));
+    this.plotTypes.push(new PlotType("Quantile-Quantile", "quantile-quantile"));
+    this.plotTypes.push(new PlotType("Parallel Requests", "parallel-requests-chart"));
+    this.plotTypes.push(new PlotType("Violin", "violin-chart"));
+    this.plotTypes.push(new PlotType("Strip", "strip-chart"));
+    this.plotTypes.push(new PlotType("Pie", "pie-chart"));
+    this.plotTypes.push(new PlotType("Bar", "bar-chart"));
     
     this.tagFields = new Array<TagField>();
     
@@ -32,12 +37,14 @@ export class PlotService {
     return this.plotTypes;
   }
   
-  getTagFields(): Observable<TagField> {
+  getTagFields(): Array<TagField> {
     const that = this;
-    this.http.get('//localhost:8080/fields').subscribe(data => {
-      data.forEach(function(name) {
-        that.tagFields.push(new TagField(name));
-      });
+    this.http.get('//'+window.location.hostname+':8080/fields').subscribe(data => {
+      if (data instanceof Array){
+        data.forEach(function(name) {
+          that.tagFields.push(new TagField(name));
+        });
+      }
     });
     return this.tagFields;
   }
@@ -46,9 +53,11 @@ export class PlotService {
 
 export class PlotType {
   name: string;
+  icon: string
   
-  constructor(name: string) {
+  constructor(name: string, icon: string) {
     this.name = name;
+    this.icon = icon;
   }
 }
 

pdb-js/src/app/visualization-page/visualization-page.component.html

@@ -9,7 +9,7 @@
     <mat-label>Type:</mat-label>
     <mat-select [(value)]="selectedPlotType">
       <mat-option *ngFor="let plotType of plotTypes" [value]="plotType.name">
-        {{plotType.name}}
+        <img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
       </mat-option>
     </mat-select>
   </mat-form-field>
@@ -19,7 +19,7 @@
     <mat-select [(value)]="selectedCombinePlotType">
       <mat-option>-</mat-option>
       <mat-option *ngFor="let plotType of combinePlotTypes" [value]="plotType.name">
-        {{plotType.name}}
+        <img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
       </mat-option>
     </mat-select>
   </mat-form-field>