fix component interaction with sub-components

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

@@ -1,4 +1,4 @@
-<mat-form-field id="limitBy">
+<mat-form-field class="pdb-form-mid">
   <mat-label>Limit By:</mat-label>
   <mat-select [(value)]="limitBy">
     <mat-option value="NO_LIMIT">no limit</mat-option>
@@ -9,14 +9,13 @@
   </mat-select>
 </mat-form-field>
 
-<mat-form-field id="limit"
+<mat-form-field class="pdb-form-number"
   *ngIf="limitBy !== 'NO_LIMIT'">
   <input 
     matInput 
     type="number" 
     placeholder="Limit" 
     min="1" 
-    value="{{limit}}"
-    
+    [(ngModel)]="limit"
     >
 </mat-form-field>

pdb-js/src/app/limit-by/limit-by.component.scss

@@ -1,9 +0,0 @@
-#limitBy {
-  width: 10em;
-  margin-right: 1ex;
-}
-
-#limit {
-  width: 5em;
-  margin-right: 0ex;
-}

pdb-js/src/app/limit-by/limit-by.component.ts

@@ -1,18 +1,18 @@
-import { Component, OnInit, Input} from '@angular/core';
+import { Component,  Input} from '@angular/core';
+import {FormControl} from '@angular/forms';
 
 @Component({
   selector: 'pdb-limit-by',
   templateUrl: './limit-by.component.html',
   styleUrls: ['./limit-by.component.scss']
 })
-export class LimitByComponent implements OnInit {
+export class LimitByComponent {
 
-  @Input() limit: number;
+  limitBy: string = "NO_LIMIT";
+  
+  limit = 10;
 
-  @Input() limitBy: string;
-
-  constructor() { }
-
-  ngOnInit() {
+  constructor() {
+    
   }
 }

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

@@ -35,10 +35,7 @@
         </mat-select>
       </mat-form-field>
       
-      <pdb-limit-by
-        [(limitBy)]="limitBy"
-        [limit]="limit"
-      ></pdb-limit-by>
+      <pdb-limit-by #limitbycomponent></pdb-limit-by>
       
       <mat-form-field>
         <mat-label>Y-Axis:</mat-label>
@@ -48,11 +45,7 @@
         </mat-select>
       </mat-form-field>
       
-     <pdb-y-axis-range 
-      [(yAxisUnit)]="yAxisUnit"
-      [(minYValue)]="minYValue"
-      [(maxYValue)]="maxYValue"
-     ></pdb-y-axis-range>
+     <pdb-y-axis-range #yAxisRangeComponent></pdb-y-axis-range>
      
      
      <mat-checkbox [(ngModel)]="enableGallery">Gallery</mat-checkbox>
@@ -82,7 +75,7 @@
           mat-button
           matTooltip="Create Gallery"
           (click)="plot()"
-          [disabled]="this.splitBy == null">
+          [disabled]="this.splitBy.value == null">
           <img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
           Gallery
         </button>

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

@@ -1,7 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { PlotService, PlotType } from '../plot.service';
 import { Observable } from 'rxjs/Observable';
 import { FormControl, Validators } from '@angular/forms';
+import { LimitByComponent } from '../limit-by/limit-by.component';
+import { YAxisRangeComponent } from '../y-axis-range/y-axis-range.component';
 
 
 @Component({
@@ -24,18 +26,19 @@ export class VisualizationPageComponent implements OnInit {
   tagFields: Array<any>;
   
   groupBy: Array<any> = [];
-  limitBy: string = "NO_LIMIT";
-  limit = 10;
   
+  @ViewChild(LimitByComponent, {static: false})
+  private limitbycomponent : LimitByComponent;
+    
   yAxis: string;
-  yAxisUnit: string;
-  minYValue: number;
-  maxYValue: number;
+  
+  @ViewChild(YAxisRangeComponent, {static: false})
+  private yAxisRangeComponent : YAxisRangeComponent;
   
   query: string;
   
     
-  enableGallery = true;
+  enableGallery = false;
   splitBy = new FormControl(null, [
     Validators.required
   ]);
@@ -55,14 +58,15 @@ export class VisualizationPageComponent implements OnInit {
     
     this.tagFields = this.plotService.getTagFields();
     this.yAxis = "log";
-    this.yAxisUnit = "MINUTES";
-    this.minYValue = 0;
-    this.maxYValue = 120;
+    
+    
+    
         
     this.selectedPlotType.valueChanges.subscribe(function(selectedMainPlotType){
       that.combinePlotTypes = that.getCombinablePlotTypes(selectedMainPlotType);
     });
   }
+    
   
   getCombinablePlotTypes(selectedMainPlotType) : Array<any>{
       const mainPlotType = this.availablePlotTypes[selectedMainPlotType];
@@ -78,16 +82,16 @@ export class VisualizationPageComponent implements OnInit {
     request['height'] = document.getElementById("results").offsetHeight;
     request['width'] = document.getElementById("results").offsetWidth;
     request['groupBy'] = this.groupBy.map(o => o.name);
-    request['limitBy'] = this.limitBy;
-    request['limit'] = this.limit;
+    request['limitBy'] = this.limitbycomponent.limitBy;
+    request['limit'] = this.limitbycomponent.limit;
     request['dateRange'] = this.dateRange.value;
     request['axisScale'] = this.yAxis;
     request['aggregate'] = this.selectedCombinePlotType.value;
     request['keyOutside'] = false;
     request['generateThumbnail'] = this.enableGallery;
-    request['yRangeMin'] = this.minYValue;
-    request['yRangeMax'] = this.maxYValue;
-    request['yRangeUnit'] = this.yAxisUnit;
+    request['yRangeMin'] = this.yAxisRangeComponent.minYValue;
+    request['yRangeMax'] = this.yAxisRangeComponent.maxYValue;
+    request['yRangeUnit'] = this.yAxisRangeComponent.yAxisUnit;
     
     console.log("plot clicked: "+  JSON.stringify(request));
   }

pdb-js/src/app/y-axis-range/y-axis-range.component.html

@@ -1,11 +1,5 @@
 <div>
-  <mat-form-field>
-    <input matInput type="number" placeholder="Min Y-Value" min="0" value="{{minYValue}}">
-  </mat-form-field>
-  <mat-form-field>
-    <input matInput type="number" placeholder="Max Y-Value" min="0" value="{{maxYValue}}">
-  </mat-form-field>
-   <mat-form-field class="yAxisUnit">
+   <mat-form-field class="pdb-form-mid">
     <mat-label>Unit:</mat-label>
     <mat-select [(value)]="yAxisUnit">
       <mat-option value="AUTOMATIC">automatic</mat-option>
@@ -16,4 +10,10 @@
       <mat-option value="DAYS">days</mat-option>
     </mat-select>
   </mat-form-field>
+  <mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC'" class="pdb-form-number">
+    <input matInput type="number" placeholder="Min Y-Value" min="0" [(ngModel)]="minYValue">
+  </mat-form-field>
+  <mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC'" class="pdb-form-number">
+    <input matInput type="number" placeholder="Max Y-Value" min="0" [(ngModel)]="maxYValue">
+  </mat-form-field>
 </div>

pdb-js/src/app/y-axis-range/y-axis-range.component.scss

@@ -1,9 +0,0 @@
-mat-form-field {
-  width: 5em;
-  margin-right: 1ex;
-}
-
-.yAxisUnit{
-  width: 8em;
-  margin-right: 0;
-}

pdb-js/src/app/y-axis-range/y-axis-range.component.ts

@@ -7,13 +7,10 @@ import { Component,  Input } from '@angular/core';
 })
 export class YAxisRangeComponent {
 
-  @Input() yAxisUnit: string;
-  @Input() minYValue: number;
-  @Input() maxYValue: number;
+  yAxisUnit: string = "AUTOMATIC";
+  minYValue: number = 1;
+  maxYValue: number = 60;
 
   constructor() {
-    this.yAxisUnit = "AUTOMATIC";
-    this.minYValue = 1;
-    this.maxYValue = 123;
   }
 }

pdb-js/src/styles.scss

@@ -23,7 +23,7 @@ $background-color: #CBD7F4;
 
 @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 
-body {
+*, body {
   font-family: Arial, sans-serif;
   font-size: 14px;
   margin: 0;
@@ -78,12 +78,18 @@ body .mat-select-panel {
   max-height: 500px;
 }
 
-.mat-form-field {
-  font-family: Arial, sans-serif;
-}
-
 mat-form-field {
   width: 100%;
+  margin-right: 1em;
+}
+mat-form-field:last-child {
+  margin-right: 0ex;
+}
+mat-form-field.pdb-form-number {
+  width: 5em;
+}
+mat-form-field.pdb-form-mid {
+  width: 9em;
 }