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.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)
       );