Mercurial > hg > ng2-query-ismi

changeset 57:d7c947909ab8 ng2-table

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
renamed query-app.module to app.module. loading query from url fragment works now.
author casties
date Wed, 29 Mar 2017 17:16:10 +0200
parents b22e52a128a8
children 3b4046e0cc02
files src/app/app.module.ts src/app/query-app.component.ts src/app/query-app.module.ts src/app/query-result-table.component.ts src/app/query-select.component.ts src/app/query-state.ts src/main.ts
diffstat 7 files changed, 180 insertions(+), 63 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/app.module.ts	Wed Mar 29 17:16:10 2017 +0200
@@ -0,0 +1,27 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { Ng2TableModule } from 'ng2-table/ng2-table';
+import { PaginationModule } from 'ng2-bootstrap';
+
+import { QueryAppComponent }  from './query-app.component';
+import { QuerySelectComponent }  from './query-select.component';
+//import { QueryResultComponent }  from './query-result.component';
+//import { QueryResultRowComponent }  from './query-result-row.component';
+import { QueryResultTableComponent }  from './query-result-table.component';
+import { QueryService } from './query.service';
+import { NormalizationService } from './normalization.service';
+
+
+@NgModule({
+  imports:      [ BrowserModule, FormsModule, HttpModule,
+                  Ng2TableModule, PaginationModule.forRoot() ],
+  declarations: [ QueryAppComponent, QuerySelectComponent, 
+//                  QueryResultComponent, QueryResultRowComponent 
+                  QueryResultTableComponent ],
+  providers:    [ QueryService, NormalizationService ],
+  bootstrap:    [ QueryAppComponent ]
+})
+export class AppModule { }
--- a/src/app/query-app.component.ts	Tue Mar 28 20:03:36 2017 +0200
+++ b/src/app/query-app.component.ts	Wed Mar 29 17:16:10 2017 +0200
@@ -20,6 +20,8 @@
         <div>
           <button (click)="addQueryStep()">add step</button>
           <button (click)="removeQueryStep()">remove step</button>
+          <button (click)="resetQuery()">reset query</button>
+          <button (click)="showQueryUrl()">get query url</button>
         </div>
     </div>
     <div class="container">
@@ -37,9 +39,11 @@
         
     constructor(private _queryService: QueryService) {
         console.debug("QueryAppComponent constructor!");
-        let newState = this.getStateStringFromFragment();
+        let newState = this.getStateStringFromUrlFragment();
+        // initialize query service using external state
         this._queryService.setup(newState);
         this.queryStepList = [];
+        // set state in queryStepList
         if (this._queryService.state.getNumSteps() > 0) {
             // use state from URL
             this._queryService.state.steps
@@ -50,17 +54,32 @@
         }
     }
     
-    getStateStringFromFragment(): string {
+    getStateStringFromUrlFragment(): string {
         let hash: string = window.location.hash;
         if (hash) {
-            let frag: string = hash.substr(1);
-            frag = decodeURIComponent(frag);
+            let fragb: string = hash.substr(1);
             // base64 decode
+            let fragu = window.atob(fragb);
+            // url decode
+            let frag = decodeURIComponent(fragu);
+            // reset hash
+            window.location.hash = '';
             return frag;
         }
         return null;
     }
     
+    getUrlFragmentFromState() {
+        let stateStr = this._queryService.state.getStateAsString();
+        let frag = '#';
+        if (stateStr.length > 0) {
+            let fragu = encodeURIComponent(stateStr);
+            let fragb = window.btoa(fragu);
+            frag += fragb;
+        }
+        return frag;
+    }
+    
     addQueryStep() {
         this.queryStepList.push('step');
     }
@@ -70,6 +89,17 @@
         this._queryService.state.steps.pop();
     }
     
+    resetQuery() {
+        // reset everything by reloading
+        window.location.reload();
+    }
+    
+    showQueryUrl() {
+        let url = window.location.href 
+        url = url.replace(/#.*/, '') + this.getUrlFragmentFromState();
+        window.prompt("URL to current query state", url);
+    }
+    
     onQueryChanged(event: any) {
         console.debug("app.onquerychanged! event=", event);
         this._queryService.runQuery();
--- a/src/app/query-app.module.ts	Tue Mar 28 20:03:36 2017 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,27 +0,0 @@
-import { NgModule }      from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
-
-import { Ng2TableModule } from 'ng2-table/ng2-table';
-import { PaginationModule } from 'ng2-bootstrap';
-
-import { QueryAppComponent }  from './query-app.component';
-import { QuerySelectComponent }  from './query-select.component';
-//import { QueryResultComponent }  from './query-result.component';
-//import { QueryResultRowComponent }  from './query-result-row.component';
-import { QueryResultTableComponent }  from './query-result-table.component';
-import { QueryService } from './query.service';
-import { NormalizationService } from './normalization.service';
-
-
-@NgModule({
-  imports:      [ BrowserModule, FormsModule, HttpModule,
-                  Ng2TableModule, PaginationModule.forRoot() ],
-  declarations: [ QueryAppComponent, QuerySelectComponent, 
-//                  QueryResultComponent, QueryResultRowComponent 
-                  QueryResultTableComponent ],
-  providers:    [ QueryService, NormalizationService ],
-  bootstrap:    [ QueryAppComponent ]
-})
-export class AppModule { }
--- a/src/app/query-result-table.component.ts	Tue Mar 28 20:03:36 2017 +0200
+++ b/src/app/query-result-table.component.ts	Wed Mar 29 17:16:10 2017 +0200
@@ -5,7 +5,7 @@
 @Component({
     selector: 'query-result',
     template: `
-    <div *ngIf="queryState?.results">
+    <div *ngIf="queryState?.numResults > 0">
         <span>Cypher query:</span>
         <pre>{{queryState.getQueryText()}}</pre>
         <h2>Query result</h2>
@@ -47,7 +47,10 @@
             </ng-table>
         </div>
     </div>
-        `,
+    <div *ngIf="!(queryState?.numResults > 0)">
+        <h2>No results found</h2>
+    </div>
+       `,
     inputs: ['queryState', 'resultInfo']
 })
 
@@ -78,12 +81,14 @@
     ngOnChanges(changes: any) {
         console.debug("result table changed! changes=", changes);
         this.data = this.queryState.results;
-        this.allColumns = this.queryState.resultColumns;
-        this.columns = this.allColumns.filter(c => c.show);
-        this.config.sorting = this.columns;
-        this.config.paging = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage};
-        this.showTable = (this.data.length < 1000);
-        this.onChangeTable(this.config);
+        if (this.data.length > 0) {
+            this.allColumns = this.queryState.resultColumns;
+            this.columns = this.allColumns.filter(c => c.show);
+            this.config.sorting = this.columns;
+            this.config.paging = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage};
+            this.showTable = (this.data.length < 1000);
+            this.onChangeTable(this.config);
+        }
     }
     
     ngOnInit() {
--- a/src/app/query-select.component.ts	Tue Mar 28 20:03:36 2017 +0200
+++ b/src/app/query-select.component.ts	Wed Mar 29 17:16:10 2017 +0200
@@ -81,9 +81,9 @@
     public queryStep: string;
     public index: number;
     public resultInfo: string;
-    public queryModes: QueryMode[];
+    public queryModes: Array<QueryMode>;
     public selectedMode: QueryMode;
-    public queryOptions: string[];
+    public queryOptions: any[];
     public selectedOption: string;
     public queryInput: string;
     public queryInput2: string;
@@ -101,11 +101,7 @@
         console.log("query-select setup step=", this.queryStep);
         var step = this._queryService.state.steps[this.index]; // i-1?
         if (step != null) {
-            this.selectedMode = step.mode;
-            if (step.mode.id === 'id_is') {
-                this.queryInput = step.params.value;
-            }
-            this.resultInfo = step.resultInfo;
+            this.setQueryStep(step);
         }
     }
     
@@ -129,8 +125,26 @@
     
     onSubmit() {
         console.debug("Submit! selectedMode=", this.selectedMode, " selectedOption=", this.selectedOption, " queryInput=", this.queryInput);
-        var step: QueryStep;
-        if (this.selectedMode.id == 'type_is') {
+    
+        let step = this.getQueryStep();
+
+        /*
+         * set step and submit change event
+         */
+        if (step != null) {
+            this._queryService.setQueryStep(this.index, step);
+            this.queryChanged.emit(this._queryService.getState());
+        }
+        return false;
+    }
+    
+    /**
+     * Returns QueryStep from current form state.
+     */
+    getQueryStep(): QueryStep {
+        let step: QueryStep = null;
+
+        if (this.selectedMode.id === 'type_is') {
             /*
              * type_is
              */
@@ -138,7 +152,7 @@
             if (opt) {
                 step = new QueryStep(this.selectedMode, {'objectType': opt});
             }
-        } else if (this.selectedMode.id == 'relation_is') {
+        } else if (this.selectedMode.id === 'relation_is') {
             /*
              * relation_is
              */
@@ -147,7 +161,7 @@
                 let rel = getRelationByName(opt);
                 step = new QueryStep(this.selectedMode, {'relationType': rel});
             }
-        } else if (this.selectedMode.id == 'id_is') {
+        } else if (this.selectedMode.id === 'id_is') {
             /*
              * id is
              */
@@ -155,7 +169,7 @@
             if (val) {
                 step = new QueryStep(this.selectedMode, {'value': val});
             }
-        } else if (this.selectedMode.id == 'att_contains') {
+        } else if (this.selectedMode.id === 'att_contains') {
             /*
              * att_contains
              */
@@ -164,7 +178,7 @@
             if (att && val) {
                 step = new QueryStep(this.selectedMode, {'attribute': att, 'value': val});
             }
-        } else if (this.selectedMode.id == 'att_num_range') {
+        } else if (this.selectedMode.id === 'att_num_range') {
             /*
              * att_num_range
              */
@@ -174,7 +188,7 @@
             if (att && nlo && nhi) {
                 step = new QueryStep(this.selectedMode, {'attribute': att, 'numLo': nlo, 'numHi': nhi});
             }
-        } else if (this.selectedMode.id == 'att_contains_norm') {
+        } else if (this.selectedMode.id === 'att_contains_norm') {
             /*
              * att_contains_norm
              * 
@@ -196,17 +210,71 @@
                     err => console.error("openmind norm error=", err),
                     () => console.debug("openmind norm query Complete")
                 );
-                // query has not been set yet
-                return;
+                // query has not been set yet (gets set in callback)
+                return null;
            }
         }
-
-        /*
-         * set step and submit change event
+        return step;
+    }
+    
+    /**
+     * Sets form state from given QueryStep.
+     */
+    setQueryStep(step: QueryStep) {
+        let mode = step.mode;
+        this.selectedMode = mode;
+        if (mode.id === 'id_is') {
+            /*
+         * id_is
          */
-        if (step != null) {
-            this._queryService.setQueryStep(this.index, step);
-            this.queryChanged.emit(this._queryService.getState());
+            this.queryInput = step.params.value;
+            
+        } else if (mode.id === 'type_is') {
+            /*
+             * type_is
+             */
+            let name = step.params.objectType;
+            this.queryOptions = [name];
+            this.selectedOption = name;
+            
+        } else if (this.selectedMode.id === 'relation_is') {
+            /*
+             * relation_is
+             */
+            let name = step.params.relationType.name
+            let rel = getRelationByName(name);
+            this.queryOptions = [rel];
+            this.selectedOption = name;
+            
+        } else if (this.selectedMode.id === 'att_contains') {
+            /*
+             * att_contains
+             */
+            let name = step.params.attribute
+            this.queryOptions = [name];
+            this.selectedOption = name;
+            this.queryInput = step.params.value;
+            
+        } else if (this.selectedMode.id === 'att_num_range') {
+            /*
+             * att_num_range
+             */
+            let name = step.params.attribute
+            this.queryOptions = [name];
+            this.selectedOption = name;
+            this.queryInput = step.params.numLo;
+            this.queryInput2 = step.params.numHi;
+            
+        } else if (this.selectedMode.id === 'att_contains_norm') {
+            /*
+             * att_contains_norm
+             */
+            let name = step.params.attribute
+            this.queryOptions = [name];
+            this.selectedOption = name;
+            this.queryInput = step.params.value;
         }
+        // TODO: implement other modes
+        this.resultInfo = step.resultInfo;
     }
 }
--- a/src/app/query-state.ts	Tue Mar 28 20:03:36 2017 +0200
+++ b/src/app/query-state.ts	Wed Mar 29 17:16:10 2017 +0200
@@ -21,6 +21,9 @@
     public resultColumns: any[];
     
 
+    /**
+     * Sets the query state from a string.
+     */
     setStateFromString(newStateString: string) {
         try {
             // state string is json
@@ -32,15 +35,17 @@
                 // step is an array [mode, params]
                 if (!Array.isArray(elem)) return;
                 let mode = elem[0];
+                // get QueryMode object
                 let qm: QueryMode = getQueryModeById(mode);
                 let params = elem[1];
                 if (qm != null && params != null) {
+                    // construct QueryStep
                     let qs = new QueryStep(qm, params);
                     newSteps.push(qs);
                 }
             });
             if (newSteps.length > 0) {
-                // set state
+                // set new state
                 this.steps = newSteps;
             }
         } catch (e) {
@@ -53,6 +58,15 @@
     }
     
     /**
+     * Returns the current query state as a string.
+     */
+    getStateAsString(): string {
+        let stateList = this.steps.map((qs) => [qs.mode.id, qs.params]);
+        let stateStr = JSON.stringify(stateList);
+        return stateStr;
+    }
+
+    /**
      * Returns the cypher query as text for display.
      */
     getQueryText() {
--- a/src/main.ts	Tue Mar 28 20:03:36 2017 +0200
+++ b/src/main.ts	Wed Mar 29 17:16:10 2017 +0200
@@ -1,5 +1,5 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/query-app.module';
+import { AppModule } from './app/app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);