prepare sending of plot requests

- values for query and date range were not
  propagated to the model

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

@@ -2,16 +2,16 @@
   type="text"
   id="query-autocomplete-input"
   placeholder="Query" 
-  [formControl]="query"
-  [matAutocomplete]="auto" 
+  [formControl]="queryField"
+  [matAutocomplete]="auto"
   (keyup)="onKey($event)"
-  (focus)="onKey($event)"/>
+  (mouseup)="onKey($event)"/>
 <mat-autocomplete 
   #auto="matAutocomplete" 
   [displayWith]="displaySuggestion"
   >
-    <mat-option *ngFor="let suggestion of filteredSuggestions | async" 
-      [value]="suggestion">
-      {{suggestion.value}}
-    </mat-option>
-  </mat-autocomplete>
+  <mat-option *ngFor="let suggestion of filteredSuggestions | async" 
+    [value]="suggestion">
+    {{suggestion.value}}
+  </mat-option>
+</mat-autocomplete>

pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {startWith, map} from 'rxjs/operators';
+import {MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { PlotService, PlotType, AutocompleteResult, Suggestion } from '../plot.service';
 
 @Component({
@@ -11,38 +12,65 @@ import { PlotService, PlotType, AutocompleteResult, Suggestion } from '../plot.s
 })
 export class QueryAutocompleteComponent implements OnInit {
 
-  @Input() query = new FormControl('');
+  queryField = new FormControl('');
 
   suggestions = new FormControl();
     
-  filteredSuggestions: Observable<Suggestion[]>; 
+  filteredSuggestions: Observable<Suggestion[]>;
+  
+  query : string; 
+  
+  @ViewChild(MatAutocompleteTrigger, {static: false})
+  autocomplete: MatAutocompleteTrigger;
+  
   
   constructor(private plotService: PlotService) {}
 
   ngOnInit() {
+    const that = this;
+    this.query = "";
+    this.queryField.valueChanges.subscribe(function(value){
+      if (typeof value == "string") {
+        that.query = value;
+      }else{
+        that.query = value.newQuery;
+        
+        var el : HTMLInputElement = <HTMLInputElement>document.getElementById('query-autocomplete-input');
+        el.selectionStart=value.newCaretPosition;
+        el.selectionEnd=value.newCaretPosition;
+        
+        that.fetchSuggestions(value.newCaretPosition);
+      }
+    });
     this.filteredSuggestions = this.suggestions.valueChanges.pipe(
       map(value => value)
     );
   }
-  
-  onKey(event: any) {
-    const that = this;
     
-    console.log(event);
+  onKey(event: any) {    
+    //console.log(event);
     if (event.key == "ArrowDown" || event.key == "ArrowUp"){
       return;
     }
-    const query = typeof this.query.value == "string" 
-      ? this.query.value
-      : this.query.value.newQuery; 
     const caretIndex = event.srcElement.selectionStart +1;
     
+    this.fetchSuggestions(caretIndex);
+  }
+  
+  fetchSuggestions(caretIndex: number){
+    const that = this;
+    const query = typeof this.queryField.value == "string" 
+      ? this.queryField.value
+      : this.queryField.value.newQuery;
+    
     this.plotService
       .autocomplete(query, caretIndex)
       .subscribe(
         (data: AutocompleteResult) => {// success path
-          console.log(JSON.stringify(data.proposals));
+          //console.log(JSON.stringify(data.proposals));
           that.suggestions.setValue(data.proposals);
+          
+          that.autocomplete.openPanel();
         }, 
         error => console.log(error)
       );