edit plots

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

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input, ViewChild } from '@angular/core';
-import {UntypedFormControl} from '@angular/forms';
+import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core';
+import {FormControl, UntypedFormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {startWith, map} from 'rxjs/operators';
 import {MatAutocompleteTrigger } from '@angular/material/autocomplete';
@@ -12,41 +12,48 @@ import { PlotService, PlotType, AutocompleteResult, Suggestion, ResultMode } fro
 })
 export class QueryAutocompleteComponent implements OnInit {
 
-  queryField = new UntypedFormControl('');
+  queryField = new FormControl<Suggestion>(new Suggestion("","",0));
 
   suggestions = new UntypedFormControl();
     
   filteredSuggestions!: Observable<Suggestion[]>;
   
   query : string = ""; 
+
+  suggestionFetcherEnabled = true;
   
   @ViewChild(MatAutocompleteTrigger)
   autocomplete!: MatAutocompleteTrigger;
   
   
-  constructor(private plotService: PlotService) {}
+  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;
+    this.queryField.valueChanges.subscribe((value) =>{
+      if (value != null) {
+        if (typeof value == "string") {
+          this.query = value;
+        }else{
+          this.query = value.newQuery;
+          
+          const el : HTMLInputElement = <HTMLInputElement>document.getElementById('query-autocomplete-input');
+          el.selectionStart=value.newCaretPosition;
+          el.selectionEnd=value.newCaretPosition;
+        }
         
-        var el : HTMLInputElement = <HTMLInputElement>document.getElementById('query-autocomplete-input');
-        el.selectionStart=value.newCaretPosition;
-        el.selectionEnd=value.newCaretPosition;
         
-        that.fetchSuggestions(value.newCaretPosition);
+        if (this.suggestionFetcherEnabled) {
+          this.fetchSuggestions(value.newCaretPosition);
+        }
       }
     });
     this.filteredSuggestions = this.suggestions.valueChanges.pipe(
       map(value => value)
     );
   }
-    
+  
   onKey(event: any) {    
     //console.log(event);
     if (event.key == "ArrowDown" || event.key == "ArrowUp"){
@@ -61,23 +68,21 @@ export class QueryAutocompleteComponent implements OnInit {
     const that = this;
     const query = typeof this.queryField.value == "string" 
       ? this.queryField.value
-      : this.queryField.value.newQuery;
+      : this.queryField.value!.newQuery;
     
     this.plotService
       .autocomplete(query, caretIndex, ResultMode.CUT_AT_DOT)
-      .subscribe(
-        (data: AutocompleteResult) => {// success path
-          //console.log(JSON.stringify(data.proposals));
+      .subscribe({
+        next: (data: AutocompleteResult) => {
           that.suggestions.setValue(data.proposals);
-          
           that.autocomplete.openPanel();
         }, 
-        (error:any) => console.log(error)
+        error: (error:any) => console.log(error)
+      }
       );
   }
   
   displaySuggestion(suggestion?: Suggestion): string {
-    //console.log("suggestion: "+JSON.stringify(suggestion));
     return suggestion ? suggestion.newQuery : '';
   }
 }