Mercurial > hg > ng2-query-ismi
changeset 7:6cd6c09032aa
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 = {}) {