@@ -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();
diff -r b22e52a128a8 -r d7c947909ab8 src/app/query-app.module.ts
--- 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 { }
diff -r b22e52a128a8 -r d7c947909ab8 src/app/query-result-table.component.ts
--- 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: `
-
+
Cypher query:
{{queryState.getQueryText()}}
Query result
@@ -47,7 +47,10 @@
- `,
+
+
No results found
+
+ `,
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() {
diff -r b22e52a128a8 -r d7c947909ab8 src/app/query-select.component.ts
--- 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
;
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;
}
}
diff -r b22e52a128a8 -r d7c947909ab8 src/app/query-state.ts
--- 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() {
diff -r b22e52a128a8 -r d7c947909ab8 src/main.ts
--- 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);