Mercurial > hg > ng2-query-ismi

changeset 7:6cd6c09032aa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
object type query with results!
author Robert Casties <casties@mpiwg-berlin.mpg.de>
date Fri, 15 Jan 2016 20:00:47 +0100
parents 9f5473536a98
children fa646ee46c19
files app/app.component.ts app/boot.ts app/query-app.component.ts app/query-result-row.component.ts app/query-result.component.ts app/query-select.component.ts app/query-state.ts app/query-step.ts app/query.service.ts index.html
diffstat 10 files changed, 117 insertions(+), 43 deletions(-) [+]
line wrap: on
line diff
--- a/app/app.component.ts	Thu Jan 14 17:19:35 2016 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,27 +0,0 @@
-import {Component} from 'angular2/core';
-import {HTTP_PROVIDERS} from 'angular2/http';
-
-import {QueryService} from './query.service';
-import {QuerySelectComponent} from './query-select.component';
-import {QueryResultComponent} from './query-result.component';
-
-@Component({
-    selector: 'my-text',
-    template: `
-        <h1>My Angular 2 Text: {{title}}</h1>
-        <p>Selected option: {{selectedOption}}</p>
-        <query-select></query-select>
-        <query-result></query-result>
-        `,
-    directives: [QuerySelectComponent, QueryResultComponent],
-    providers: [QueryService, HTTP_PROVIDERS]
-})
-    
-export class AppComponent { 
-    public title = 'huhu!';
-    public selectedOption = 'unknown';
-        
-    constructor() {
-    }
-    
-}
--- a/app/boot.ts	Thu Jan 14 17:19:35 2016 +0100
+++ b/app/boot.ts	Fri Jan 15 20:00:47 2016 +0100
@@ -1,4 +1,4 @@
 import {bootstrap}    from 'angular2/platform/browser'
-import {AppComponent} from './app.component'
+import {QueryAppComponent} from './query-app.component'
 
-bootstrap(AppComponent);
+bootstrap(QueryAppComponent);
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/query-app.component.ts	Fri Jan 15 20:00:47 2016 +0100
@@ -0,0 +1,34 @@
+import {Component} from 'angular2/core';
+import {HTTP_PROVIDERS} from 'angular2/http';
+
+import {QueryService} from './query.service';
+import {QueryState} from './query-state';
+import {QuerySelectComponent} from './query-select.component';
+import {QueryResultComponent} from './query-result.component';
+
+@Component({
+    selector: 'query-app',
+    template: `
+        <h1>My Angular 2 Text: {{title}}</h1>
+        <p>Selected query: {{selectedQuery}}</p>
+        <query-select (queryChanged)="onQueryChanged($event)"></query-select>
+        <query-result [queryState]="queryState"></query-result>
+        `,
+    directives: [QuerySelectComponent, QueryResultComponent],
+    providers: [QueryService, HTTP_PROVIDERS]
+})
+    
+export class QueryAppComponent { 
+    public title = 'huhu!';
+    public selectedQuery: string;
+    public queryState: QueryState;
+        
+    constructor(private _queryService: QueryService) {
+    }
+    
+    onQueryChanged(event: any) {
+        console.debug("app.onquerychanged! event=", event);
+        this._queryService.updateQuery();
+        this.queryState = this._queryService.getState();
+    }
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/query-result-row.component.ts	Fri Jan 15 20:00:47 2016 +0100
@@ -0,0 +1,17 @@
+import {Component} from 'angular2/core';
+
+@Component({
+    selector: 'query-result-row',
+    template: `
+        <span *ngIf="rowType=='node'">{{rowData.data.label}}</span>
+        <span *ngIf="rowType=='text'">{{rowData}}</span>
+        `,
+    inputs: ['rowData', 'rowType']
+})
+   
+export class QueryResultRowComponent { 
+    
+    public rowData: any;
+    public rowType: string;
+    
+}
--- a/app/query-result.component.ts	Thu Jan 14 17:19:35 2016 +0100
+++ b/app/query-result.component.ts	Fri Jan 15 20:00:47 2016 +0100
@@ -2,13 +2,22 @@
 
 import {QueryState} from './query-state';
 
+import {QueryResultRowComponent} from './query-result-row.component';
+
 @Component({
     selector: 'query-result',
     template: `
         <div *ngIf="queryState">
+          <p>Cypher: {{queryState.cypherQuery}}</p>
           <p>Query results ({{queryState.numResults}}):</p>
+          <ul>
+            <li *ngFor="#row of queryState.results">
+              <query-result-row [rowData]="row" [rowType]="queryState.resultTypes"></query-result-row> 
+            </li>
+          </ul>
         </div>
         `,
+    directives: [QueryResultRowComponent],
     inputs: ['queryState']
 })
    
@@ -16,11 +25,16 @@
     
     public queryState: QueryState;
     
+    ngOnChanges() {
+        console.debug("result changed!");
+    }
+    
     ngOnInit() {
         this.setup();
     }
     
     setup() {
+        console.debug("result init!");
     }
     
 }
--- a/app/query-select.component.ts	Thu Jan 14 17:19:35 2016 +0100
+++ b/app/query-select.component.ts	Fri Jan 15 20:00:47 2016 +0100
@@ -1,8 +1,9 @@
-import {Component, OnInit} from 'angular2/core';
+import {Component, Output, EventEmitter, OnInit} from 'angular2/core';
 
 import {QueryService} from './query.service';
 import {QueryMode} from './query-mode';
 import {QueryStep} from './query-step';
+import {QueryState} from './query-state';
 
 
 @Component({
@@ -10,6 +11,7 @@
     template: `
         <p>Selected option: {{selectedQuery}}</p>
         <select (change)="onSelectMode($event)">
+            <option></option>
             <option *ngFor="#mode of queryModes" [value]="mode.id">
                 {{mode.label}}
             </option>
@@ -20,6 +22,7 @@
             </option>
         </select>
         `
+    //outputs: ['queryChanged']
 })
    
 export class QuerySelectComponent implements OnInit { 
@@ -28,6 +31,8 @@
     public selectedQuery = 'unknown';
     public query2Options;
     
+    @Output('queryChanged') queryChanged = new EventEmitter<QueryState>();
+    
     constructor(private _queryService: QueryService) {}
     
     ngOnInit() {
@@ -37,7 +42,7 @@
     setup() {
         this._queryService.setupIsmiObjectTypes();
         this.queryModes = this._queryService.getQueryModes();
-        // select first mode
+        // select first mode (too early?)
         this.selectedMode = this.queryModes[0];
         this.query2Options = this._queryService.getQueryOptions(this.selectedMode);
     }
@@ -52,7 +57,8 @@
         var selected = event.target.value;
         this.selectedQuery = selected;
         console.debug("selected option:", selected);
-        var query = {'mode': this.selectedMode, 'objectType': selected};
-        this._queryService.setQueryStep(0, query);    
+        var query: QueryStep = {'mode': this.selectedMode, 'objectType': selected};
+        this._queryService.setQueryStep(0, query);
+        this.queryChanged.emit(this._queryService.getState());
     }
 }
--- a/app/query-state.ts	Thu Jan 14 17:19:35 2016 +0100
+++ b/app/query-state.ts	Fri Jan 15 20:00:47 2016 +0100
@@ -1,7 +1,10 @@
+import {QueryStep} from './query-step';
+
 export interface QueryState {
     steps: QueryStep[];
     cypherQuery: string;
     cypherParams: any;
+    resultTypes: string;
     results: any[];
     numResults: number;
 }
\ No newline at end of file
--- a/app/query-step.ts	Thu Jan 14 17:19:35 2016 +0100
+++ b/app/query-step.ts	Fri Jan 15 20:00:47 2016 +0100
@@ -1,4 +1,6 @@
+import {QueryMode} from './query-mode';
+
 export interface QueryStep {
-    mode: string;
+    mode: QueryMode;
     objectType?: string;
 }
\ No newline at end of file
--- a/app/query.service.ts	Thu Jan 14 17:19:35 2016 +0100
+++ b/app/query.service.ts	Fri Jan 15 20:00:47 2016 +0100
@@ -10,7 +10,7 @@
 @Injectable()
 export class QueryService {
         
-    public queryState: QueryState;
+    public state: QueryState;
     
     public ismiObjectTypes;
     
@@ -19,12 +19,18 @@
         {id: 'att_contains', label: 'Attribute contains'}];
         
     constructor(private _http: Http) {
-        this.queryState = {
+        this.state = {
             'steps': [],
             'cypherQuery': '',
-            'cyperParams': {}, 
-            'results': [], 
-            numResults: 0};
+            'cypherParams': {}, 
+            'results': [],
+            'resultTypes': '',
+            'numResults': 0
+        };
+    }
+    
+    getState() {
+        return this.state;
     }
     
     getQueryModes(): QueryMode[] {
@@ -60,18 +66,37 @@
     }
     
     setQueryStep(index: number, step: QueryStep) {
-        this.queryState.steps[index] = step;
+        this.state.steps[index] = step;
         this.createCypherQuery();
     }
     
     createCypherQuery() {
         var cypher = '';
-        var step = this.queryState.steps[0];
+        var returnType = '';
+        var step = this.state.steps[0];
         if (step.mode.id === 'type_is') {
             cypher = `MATCH (e:${step.objectType}) return e`;
+            returnType = 'node';
         }
         
-        this.queryState.cypherQuery = cypher;
+        this.state.cypherQuery = cypher;
+        this.state.resultTypes = returnType;
+    }
+    
+    updateQuery() {
+        this.createCypherQuery();
+        var query = this.state.cypherQuery;
+        var params = this.state.cypherParams;
+        var res = this.fetchCypherResult(query, params);
+        res.subscribe(
+            data => {
+                console.debug("neo4j data=", data);
+                this.state.results = data.data.map(elem => elem[0]);
+                this.state.numResults = this.state.results.length;
+            },
+            err => console.error("neo4j error=", err),
+            () => console.debug('neo4j query Complete')
+        );
     }
     
     fetchCypherResult(query: string, params = {}) {
--- a/index.html	Thu Jan 14 17:19:35 2016 +0100
+++ b/index.html	Fri Jan 15 20:00:47 2016 +0100
@@ -28,7 +28,7 @@
 
   <!-- 3. Display the application -->
   <body>
-    <my-text>Loading...</my-text>
+    <query-app>Loading...</query-app>
   </body>
 
 </html>