initial version of the query autocompletion

Missing features at this point:
1. No suggestions when the input gets the focus.
2. Suggestions are not shown after selecting a suggestion.

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

@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule, enableProdMode } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -12,8 +12,10 @@ import { UploadPageComponent } from './upload-page/upload-page.component';
 import { VisualizationPageComponent } from './visualization-page/visualization-page.component';
  
 import {MatSelectModule} from '@angular/material/select';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatFormFieldModule, MatInputModule} from '@angular/material';
 import { YAxisRangeComponent } from './y-axis-range/y-axis-range.component';
+import { QueryAutocompleteComponent } from './query-autocomplete/query-autocomplete.component';
 
 @NgModule({
   declarations: [
@@ -23,12 +25,15 @@ import { YAxisRangeComponent } from './y-axis-range/y-axis-range.component';
     UploadPageComponent,
     VisualizationPageComponent,
     YAxisRangeComponent,
+    QueryAutocompleteComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
+    FormsModule,
     ReactiveFormsModule,
     MatSelectModule,MatFormFieldModule, MatInputModule,
+    MatAutocompleteModule,
     BrowserAnimationsModule,
     HttpClientModule
   ],

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

@@ -1,5 +1,5 @@
 import { Injectable, OnInit } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 
 
@@ -11,7 +11,7 @@ export class PlotService {
   plotTypes: Array<PlotType>;
   
   tagFields: Array<TagField>;
-
+  
   constructor(private http: HttpClient) {
     this.plotTypes = new Array<PlotType>();
     this.plotTypes.push(new PlotType(
@@ -55,6 +55,16 @@ export class PlotService {
     });
     return this.tagFields;
   }
+  
+  autocomplete(query: string, caretIndex: number): Observable<AutocompleteResult>
+  {
+    const options = { 
+      params: new HttpParams()
+        .set('caretIndex', ""+caretIndex)
+        .set('query', query) 
+    };
+    return this.http.get<AutocompleteResult>('//'+window.location.hostname+':8080/autocomplete', options);
+  }
 }
 
 
@@ -111,3 +121,17 @@ export enum DataType {
     Other
 }
 
+export class Suggestion {
+  value: string;
+  newQuery: string;
+  newCaretPosition: number;
+}
+
+
+export class AutocompleteResult{
+  proposals: Array<Suggestion>;
+}
+
+
+
+

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

@@ -0,0 +1,16 @@
+<input matInput 
+  type="text"
+  id="query-autocomplete-input"
+  placeholder="Query" 
+  [formControl]="query"
+  [matAutocomplete]="auto" 
+  (keyup)="onKey($event)"/>
+<mat-autocomplete 
+  #auto="matAutocomplete" 
+  [displayWith]="displaySuggestion"
+  >
+    <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.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QueryAutocompleteComponent } from './query-autocomplete.component';
+
+describe('QueryAutocompleteComponent', () => {
+  let component: QueryAutocompleteComponent;
+  let fixture: ComponentFixture<QueryAutocompleteComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ QueryAutocompleteComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QueryAutocompleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,55 @@
+import { Component, OnInit, Input } from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {Observable} from 'rxjs';
+import {startWith, map} from 'rxjs/operators';
+import { PlotService, PlotType, AutocompleteResult, Suggestion } from '../plot.service';
+
+@Component({
+  selector: 'pdb-query-autocomplete',
+  templateUrl: './query-autocomplete.component.html',
+  styleUrls: ['./query-autocomplete.component.scss']
+})
+export class QueryAutocompleteComponent implements OnInit {
+
+  @Input() query = new FormControl();
+
+  suggestions = new FormControl();
+    
+  filteredSuggestions: Observable<Suggestion[]>; 
+  
+  constructor(private plotService: PlotService) {}
+
+  ngOnInit() {
+    this.filteredSuggestions = this.suggestions.valueChanges.pipe(
+      map(value => value)
+    );
+  }
+  
+  onKey(event: any) {
+    const that = this;
+    
+    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.plotService
+      .autocomplete(query, caretIndex)
+      .subscribe(
+        (data: AutocompleteResult) => {// success path
+          console.log(JSON.stringify(data.proposals));
+          that.suggestions.setValue(data.proposals);
+        }, 
+        error => console.log(error)
+      );
+  }
+  
+  displaySuggestion(suggestion?: Suggestion): string | undefined {
+    //console.log("suggestion: "+JSON.stringify(suggestion));
+    return suggestion ? suggestion.newQuery : undefined;
+  }
+}

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

@@ -5,8 +5,8 @@
 
 <div id="visualization">
   <div id="query-box">
-      <input matInput placeholder="Query" value="{{query}}" />
+  <!-- [query]="query"-->
-      <pdb-query-autocomplete></pdb-query-autocomplete>
+      <pdb-query-autocomplete ></pdb-query-autocomplete>
   </div>
   <div id="filters">
     <mat-form-field class="mat-field-full-width">

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

@@ -39,7 +39,7 @@
 
 #filters {
   grid-area: filters;
-  background-color: #eee;
+  background-color: #fafafa;
   padding: 1em;
 }
 

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

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { PlotService, PlotType } from '../plot.service';
-import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import { FormControl } from '@angular/forms';
 
@@ -30,7 +29,7 @@ export class VisualizationPageComponent implements OnInit {
   
   query: string;
 
-  constructor(private plotService: PlotService, private http: HttpClient) {
+  constructor(private plotService: PlotService) {
   }
 
   ngOnInit() {