--- a/app/query-select.component.ts	Wed Jan 20 17:02:00 2016 +0100
+++ b/app/query-select.component.ts	Wed Jan 20 19:49:10 2016 +0100
@@ -9,8 +9,8 @@
 @Component({
     selector: 'query-select',
     template: `
-        <div>
-        <form (ngSubmit)="onSubmit()">
+<div>
+    <form (ngSubmit)="onSubmit()">
         <select (change)="onSelectMode($event)">
             <option></option>
             <option *ngFor="#mode of queryModes" [value]="mode.id">
@@ -18,26 +18,28 @@
             </option>
         </select>
 
-        <select *ngIf="selectedMode.id=='type_is' && queryOptions" (change)="onSelectOption($event)">
-            <option></option>
-            <option *ngFor="#option of queryOptions" [value]="option">
-                {{option}}
-            </option>
-        </select>
+        <span *ngIf="selectedMode.id=='type_is' || selectedMode.id=='relation_is'">
+            <select *ngIf="queryOptions" [(ngModel)]="selectedOption" (change)="onSelectOption($event)">
+                <option></option>
+                <option *ngFor="#option of queryOptions" [value]="option">
+                    {{option}}
+                </option>
+            </select>
+        </span>
 
-        <span *ngIf="selectedMode.id=='att_contains'">
-        <select [(ngModel)]="selectedOption">
-            <option></option>
-            <option *ngFor="#option of queryOptions" [value]="option">
-                {{option}}
-            </option>
-        </select>
-        <span>contains</span>
-        <input type="text" [(ngModel)]="queryInput"/>
+        <span *ngIf="selectedMode.id=='att_contains' || selectedMode.id=='att_contains_norm'">
+            <select [(ngModel)]="selectedOption">
+                <option></option>
+                <option *ngFor="#option of queryOptions" [value]="option">
+                    {{option}}
+                </option>
+            </select>
+            <span>contains</span>
+            <input type="text" [(ngModel)]="queryInput"/>
         </span>
         <button type="submit">Submit</button>
-        </form>
-        </div>
+    </form>
+</div>
         `,
     inputs: ['index']
     //outputs: ['queryChanged'] // this should work but doesn't
@@ -77,21 +79,34 @@
     onSelectOption(event: any) {
         var selected = event.target.value;
         console.debug("selected option:", selected);
-        var step = {'mode': this.selectedMode, 'objectType': selected};
-        this._queryService.setQueryStep(this.index, step);
-        this.queryChanged.emit(this._queryService.getState());
+        this.selectedOption = selected;
+        this.onSubmit();
     }
     
     onSubmit() {
         console.debug("Submit! selectedMode=", this.selectedMode, " selectedOption=", this.selectedOption, " queryInput=", this.queryInput);
-        if (this.selectedMode.id == 'att_contains') {
+        var step: QueryStep;
+        if (this.selectedMode.id == 'type_is') {
+            var opt = this.selectedOption;
+            if (opt) {
+                step = {'mode': this.selectedMode, 'objectType': opt};
+           }
+        } else if (this.selectedMode.id == 'relation_is') {
+            var opt = this.selectedOption;
+            if (opt) {
+                step = {'mode': this.selectedMode, 'relationType': opt};
+           }
+        } else if (this.selectedMode.id == 'att_contains' || this.selectedMode.id == 'att_contains_norm') {
             var att = this.selectedOption;
             var val = this.queryInput;
             if (att && val) {
-                var step = {'mode': this.selectedMode, 'attribute': att, 'value': val};
-                this._queryService.setQueryStep(this.index, step);
-                this.queryChanged.emit(this._queryService.getState());
+                step = {'mode': this.selectedMode, 'attribute': att, 'value': val};
            }
         }
+
+        if (step != null) {
+            this._queryService.setQueryStep(this.index, step);
+            this.queryChanged.emit(this._queryService.getState());
+        }
     }
 }