--- a/src/app/query-app.component.ts	Mon Mar 20 18:50:31 2017 +0100
+++ b/src/app/query-app.component.ts	Wed Mar 29 17:19:12 2017 +0200
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-//import {HTTP_PROVIDERS} from '@angular/http';
 
 import {QueryState} from './query-state';
 import {QueryStep} from './query-step';
@@ -7,10 +6,6 @@
 import {QueryService} from './query.service';
 import {NormalizationService} from './normalization.service';
 
-import {QuerySelectComponent} from './query-select.component';
-import {QueryResultComponent} from './query-result.component';
-//import {QueryResultTableComponent} from './query-result-table.component';
-
 @Component({
     selector: 'query-app',
     template: `
@@ -25,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">
@@ -34,8 +31,6 @@
         </query-result>
     </div>
         `,
-    //directives: [QuerySelectComponent, QueryResultTableComponent],
-    //providers: [QueryService, NormalizationService, HTTP_PROVIDERS]
 })
     
 export class QueryAppComponent { 
@@ -43,9 +38,46 @@
     public queryStepList: string[];
         
     constructor(private _queryService: QueryService) {
-        this._queryService.setup();
+        console.debug("QueryAppComponent constructor!");
+        let newState = this.getStateStringFromUrlFragment();
+        // initialize query service using external state
+        this._queryService.setup(newState);
         this.queryStepList = [];
-        this.addQueryStep();
+        // set state in queryStepList
+        if (this._queryService.state.getNumSteps() > 0) {
+            // use state from URL
+            this._queryService.state.steps
+                .forEach((elem) => this.queryStepList.push('param'));
+        } else {
+            // new empty state
+            this.addQueryStep();
+        }
+    }
+    
+    getStateStringFromUrlFragment(): string {
+        let hash: string = window.location.hash;
+        if (hash) {
+            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() {
@@ -57,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();