diff --git a/asterixdb/asterix-app/src/main/java/org/apache/asterix/api/http/server/QueryServiceServlet.java b/asterixdb/asterix-app/src/main/java/org/apache/asterix/api/http/server/QueryServiceServlet.java
index 714bb53..29da286 100644
--- a/asterixdb/asterix-app/src/main/java/org/apache/asterix/api/http/server/QueryServiceServlet.java
+++ b/asterixdb/asterix-app/src/main/java/org/apache/asterix/api/http/server/QueryServiceServlet.java
@@ -130,8 +130,9 @@
 
     @Override
     protected void options(IServletRequest request, IServletResponse response) throws Exception {
-        response.setHeader("Access-Control-Allow-Origin",
-                "http://" + hostName + ":" + appCtx.getExternalProperties().getQueryWebInterfacePort());
+        if (request.getHeader("Origin") != null) {
+            response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
+        }
         response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
         response.setStatus(HttpResponseStatus.OK);
     }
@@ -520,8 +521,9 @@
                 optionalParams = optionalParamProvider.apply(request);
             }
             // CORS
-            response.setHeader("Access-Control-Allow-Origin",
-                    "http://" + hostName + ":" + appCtx.getExternalProperties().getQueryWebInterfacePort());
+            if (request.getHeader("Origin") != null) {
+                response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
+            }
             response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
             response.setStatus(execution.getHttpStatus());
             executeStatement(statementsText, sessionOutput, resultProperties, stats, param, execution, optionalParams);
diff --git a/asterixdb/asterix-app/src/test/java/org/apache/asterix/test/common/TestExecutor.java b/asterixdb/asterix-app/src/test/java/org/apache/asterix/test/common/TestExecutor.java
index 80048bd..b7fa3bb 100644
--- a/asterixdb/asterix-app/src/test/java/org/apache/asterix/test/common/TestExecutor.java
+++ b/asterixdb/asterix-app/src/test/java/org/apache/asterix/test/common/TestExecutor.java
@@ -594,6 +594,7 @@
         HttpUriRequest method = jsonEncoded ? constructPostMethodJson(str, uri, "statement", newParams)
                 : constructPostMethodUrl(str, uri, "statement", newParams);
         // Set accepted output response type
+        method.setHeader("Origin", uri.getScheme() + uri.getAuthority());
         method.setHeader("Accept", OutputFormat.CLEAN_JSON.mimeType());
         HttpResponse response = executeHttpRequest(method);
         if (responseCodeValidator != null) {
diff --git a/asterixdb/asterix-dashboard/src/node/.angular-cli.json b/asterixdb/asterix-dashboard/src/node/.angular-cli.json
deleted file mode 100755
index 7e41979..0000000
--- a/asterixdb/asterix-dashboard/src/node/.angular-cli.json
+++ /dev/null
@@ -1,69 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "asterixdb-web-console"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "static",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "main.scss",
-        "../node_modules/codemirror/lib/codemirror.css",
-        "../node_modules/codemirror/theme/monokai.css",
-        "../node_modules/primeng/resources/themes/omega/theme.css",
-        "../node_modules/primeng/resources/primeng.min.css"
-      ],
-      "scripts": [
-        "../node_modules/codemirror/lib/codemirror.js"
-      ],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "css",
-    "class": {
-      "spec": false
-    },
-    "component": {}
-  }
-}
diff --git a/asterixdb/asterix-dashboard/src/node/angular.json b/asterixdb/asterix-dashboard/src/node/angular.json
new file mode 100644
index 0000000..5d9679a
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/angular.json
@@ -0,0 +1,141 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "asterixdb-web-console": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "static",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "node_modules/codemirror/lib/codemirror.css",
+              "src/main.scss"
+            ],
+            "scripts": [
+              "node_modules/codemirror/lib/codemirror.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "asterixdb-web-console:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "asterixdb-web-console:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "asterixdb-web-console:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [
+              "node_modules/codemirror/lib/codemirror.js"
+            ],
+            "styles": [
+              "node_modules/codemirror/lib/codemirror.css",
+              "src/main.scss"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "asterixdb-web-console-e2e": {
+      "root": "",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "asterixdb-web-console:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "asterixdb-web-console",
+  "schematics": {
+    "@schematics/angular:class": {
+      "spec": false
+    },
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/karma.conf.js b/asterixdb/asterix-dashboard/src/node/karma.conf.js
index c9da2c5..2812405 100755
--- a/asterixdb/asterix-dashboard/src/node/karma.conf.js
+++ b/asterixdb/asterix-dashboard/src/node/karma.conf.js
@@ -18,24 +18,22 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    angularCli: {
-      environment: 'dev'
-    },
+    
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
diff --git a/asterixdb/asterix-dashboard/src/node/package.json b/asterixdb/asterix-dashboard/src/node/package.json
index 051f182..d7a11ff 100755
--- a/asterixdb/asterix-dashboard/src/node/package.json
+++ b/asterixdb/asterix-dashboard/src/node/package.json
@@ -6,57 +6,57 @@
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.config.js --host 0.0.0.0",
     "build": "ng build --prod",
-    "mavenbuild": "node node_modules/.bin/ng build --prod -op static/ -d dashboard/",
+    "mavenbuild": "node node_modules/.bin/ng build --prod --output-path static/ --base-href /dashboard/",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/core": "^0.6.1",
-    "@angular/animations": "^5.0.3",
-    "@angular/cdk": "^5.0.0-rc.2",
-    "@angular/common": "^5.0.3",
-    "@angular/compiler": "^5.0.3",
-    "@angular/core": "^5.0.3",
-    "@angular/forms": "^5.0.3",
-    "@angular/http": "^5.0.3",
-    "@angular/material": "^5.0.0-rc.2",
-    "@angular/platform-browser": "^5.0.3",
-    "@angular/platform-browser-dynamic": "^5.0.3",
-    "@angular/router": "^5.0.3",
-    "@ngrx/db": "^2.0.2",
-    "@ngrx/effects": "^4.1.0",
-    "@ngrx/entity": "^4.1.0",
-    "@ngrx/store": "^4.1.0",
-    "@ngrx/store-devtools": "^4.0.0",
-    "codemirror": "^5.31.0",
-    "core-js": "^2.4.1",
-    "file-saver": "^1.3.3",
-    "hammerjs": "^2.0.8",
-    "primeng": "^4.3.0",
-    "rxjs": "^5.5.2",
-    "zone.js": "^0.8.18"
+    "@angular-devkit/core": "0.6.8",
+    "@angular/animations": "6.0.7",
+    "@angular/cdk": "6.3.3",
+    "@angular/common": "6.0.7",
+    "@angular/compiler": "6.0.7",
+    "@angular/core": "6.0.7",
+    "@angular/forms": "6.0.7",
+    "@angular/http": "6.0.7",
+    "@angular/material": "6.3.3",
+    "@angular/platform-browser": "6.0.7",
+    "@angular/platform-browser-dynamic": "6.0.7",
+    "@angular/router": "6.0.7",
+    "@ngrx/effects": "6.0.0",
+    "@ngrx/entity": "6.0.0",
+    "@ngrx/store": "6.0.0",
+    "@ngrx/store-devtools": "6.0.0",
+    "codemirror": "5.31.0",
+    "core-js": "2.4.1",
+    "file-saver": "1.3.3",
+    "hammerjs": "2.0.8",
+    "rxjs": "6.2.1",
+    "rxjs-compat": "6.2.1",
+    "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "1.5.4",
-    "@angular/compiler-cli": "^5.0.3",
-    "@angular/language-service": "^5.0.0",
-    "@types/file-saver": "^1.3.0",
-    "@types/jasmine": "~2.5.53",
-    "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~6.0.60",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
-    "karma-chrome-launcher": "~2.1.1",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
-    "ts-node": "^3.2.2",
-    "tslint": "^5.7.0",
-    "typescript": "^2.4.2"
+    "@angular/cli": "6.0.8",
+    "@angular/compiler-cli": "6.0.7",
+    "@angular/language-service": "6.0.7",
+    "@types/file-saver": "1.3.0",
+    "@types/jasmine": "2.5.53",
+    "@types/jasminewd2": "2.0.2",
+    "@types/node": "6.0.60",
+    "jasmine-core": "2.6.2",
+    "jasmine-spec-reporter": "4.1.0",
+    "karma": "1.7.0",
+    "karma-chrome-launcher": "2.1.1",
+    "karma-cli": "1.0.1",
+    "karma-coverage-istanbul-reporter": "1.2.1",
+    "karma-jasmine": "1.1.0",
+    "karma-jasmine-html-reporter": "0.2.2",
+    "protractor": "5.1.2",
+    "ts-node": "3.2.2",
+    "tslint": "5.7.0",
+    "typescript": "2.7.2",
+    "@angular-devkit/build-angular": "0.6.8"
   }
 }
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/app-config.service.ts b/asterixdb/asterix-dashboard/src/node/src/app/app-config.service.ts
index 87a0c2b..5227227 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/app-config.service.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/app-config.service.ts
@@ -1,3 +1,5 @@
+
+import {throwError as observableThrowError,  Observable } from 'rxjs';
 /*
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -12,64 +14,58 @@
 limitations under the License.
 */
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import {
-  Http,
-  Headers,
-  RequestOptions
-}                     from '@angular/http';
+import { Http, Headers, RequestOptions } from '@angular/http';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/catch';
 
 @Injectable()
 export class ConfigService {
 
-  private config: Object
-  private env: Object
+    private config: Object
+    private env: Object
 
-  constructor(private http: Http) {}
+    constructor(private http: Http) {}
+    /**
+     * Loads the environment config file first. Reads the environment variable from the file
+     * and based on that loads the appropriate configuration file - development or production
+     */
+    load() {
+        return new Promise((resolve, reject) => {
+            let headers = new Headers({ 'Accept': 'application/json', 'Content-Type': 'application/json', 'DataType': 'application/json' });
+            let options = new RequestOptions({ headers: headers });
+            this.http.get('/config/env.json')
+            .map(res => res.json())
+            .subscribe((env_data) => {
+                this.env = env_data;
 
-  /**
-   * Loads the environment config file first. Reads the environment variable from the file
-   * and based on that loads the appropriate configuration file - development or production
-   */
-  load() {
-    return new Promise((resolve, reject) => {
-      let headers = new Headers({ 'Accept': 'application/json', 'Content-Type': 'application/json', 'DataType': 'application/json' });
-      let options = new RequestOptions({ headers: headers });
+                this.http.get('/config/' + env_data.env + '.json')
+                    .map(res => res.json())
+                    .catch((error: any) => {
+                        return observableThrowError(error.json().error || 'Server error');
+                  })
+                  .subscribe((data) => {
+                      this.config = data;
+                      resolve(true);
+                  });
+            });
+        });
+    }
 
-      this.http.get('/config/env.json')
-      .map(res => res.json())
-      .subscribe((env_data) => {
-        this.env = env_data;
+    /**
+     * Returns environment variable based on given key
+     *
+     * @param key
+    */
+    getEnv(key: any) {
+        return this.env[key];
+    }
 
-        this.http.get('/config/' + env_data.env + '.json')
-          .map(res => res.json())
-          .catch((error: any) => {
-            return Observable.throw(error.json().error || 'Server error');
-          })
-          .subscribe((data) => {
-            this.config = data;
-            resolve(true);
-          });
-      });
-
-    });
-  }
-
-  /**
-   * Returns environment variable based on given key
-   *
-   * @param key
-   */
-  getEnv(key: any) {
-    return this.env[key];
-  }
-
-  /**
-   * Returns configuration value based on given key
-   *
-   * @param key
-   */
-  get(key: any) {
-    return this.config[key];
-  }
-}
+    /**
+     * Returns configuration value based on given key
+     *
+     * @param key
+    */
+    get(key: any) {
+        return this.config[key];
+    }
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/app.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/app.component.scss
index b01fcf5..7ce2d58 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/app.component.scss
+++ b/asterixdb/asterix-dashboard/src/node/src/app/app.component.scss
@@ -11,4 +11,4 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-// Place holder for future expansion
\ No newline at end of file
+// Place holder for future expansion
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/app.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/app.component.ts
index a913109..6cd84a9 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/app.component.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/app.component.ts
@@ -12,20 +12,19 @@
 limitations under the License.
 */
 import { Component } from '@angular/core';
-import { AppCoreService } from './shared/services/app-core.service'
 
 /*
  * Root component
  * Defines AsterixDB Dashboard application's layout
  */
 @Component({
-  selector: 'awc-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'awc-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-  title = 'Asterix DB Web Console';
 
-  constructor(private appCoreService: AppCoreService) {
-  }
-}
+export class AppComponent {
+    title = 'Asterix DB Web Console';
+
+    constructor() {}
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/app.module.ts b/asterixdb/asterix-dashboard/src/node/src/app/app.module.ts
index 11c8602..e49d8e2 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/app.module.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/app.module.ts
@@ -11,6 +11,9 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+import { AppEffects } from './shared/effects/app.effects';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
@@ -20,102 +23,54 @@
 import { DatatypeEffects } from './shared/effects/datatype.effects';
 import { IndexEffects } from './shared/effects/index.effects';
 import { SQLQueryEffects } from './shared/effects/query.effects';
-import { MetadataEffects } from './shared/effects/metadata.effects';
-import { AppComponent } from './app.component';
 import { AppBarComponent }  from './dashboard/appbar.component';
-import { DataverseCollection } from './dashboard/metadata/dataverses-collection/dataverses.component';
-import { DatasetCollection } from './dashboard/metadata/datasets-collection/datasets.component';
-import { DatatypeCollection } from './dashboard/metadata/datatypes-collection/datatypes.component';
-import { CodemirrorComponent } from './dashboard/query/codemirror.component';
-import { CodemirrorMetadataComponent } from './dashboard/metadata/codemirror-metadata.component';
-import { IndexCollection } from './dashboard/metadata/indexes-collection/indexes.component';
-import { MetadataContainerComponent }  from './dashboard/metadata/metadata-container.component';
-import { MetadataComponent }  from './dashboard/query/metadata.component';
+import { DialogMetadataInspector, MetadataComponent }  from './dashboard/query/metadata.component';
 import { QueryContainerComponent }  from './dashboard/query/query-container.component';
 import { InputQueryComponent }  from './dashboard/query/input.component';
-import { InputQueryMetadataComponent }  from './dashboard/metadata/input-metadata.component';
-import { QueryOutputComponent, SafeHtmlPipe }  from './dashboard/query/ouput.component';
+import { QueryOutputComponent }  from './dashboard/query/output.component';
 import { AppTabComponent }  from './dashboard/apptab.component';
-import { KeysPipe } from './shared/pipes/keys.pipe';
-import { ObjectTypePipe } from './shared/pipes/objectType.pipe';
-import { ObjectArrayTypePipe } from './shared/pipes/objectArrayType.pipe';
 import { reducers } from './shared/reducers';
 import { SQLService } from './shared/services/async-query.service'
-import { AppCoreService } from './shared/services/app-core.service'
-import { MetadataService } from './shared/services/async-metadata.service'
-import { DBModule } from '@ngrx/db';
 import { FormsModule } from '@angular/forms';
 import { MaterialModule } from './material.module';
-import { NgModule } from '@angular/core';
 import { StoreModule,  } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import { schema } from './db';
-import { DataTableModule, SharedModule } from 'primeng/primeng';
-import { TreeModule, TreeNode} from 'primeng/primeng';
-import { DialogCreateDataverse, DialogDropDataverse } from './dashboard/metadata/dataverses-collection/dataverses.component';
-import { DialogCreateDataset, DialogDropDataset } from './dashboard/metadata/datasets-collection/datasets.component';
-import { DialogCreateDatatype, DialogDropDatatype } from './dashboard/metadata/datatypes-collection/datatypes.component';
-import { DialogCreateIndex, DialogDropIndex } from './dashboard/metadata/indexes-collection/indexes.component';
-
-
+import { PlanViewComponent } from './dashboard/query/plan-view.component';
+import { PlanNodeSVGComponent } from './dashboard/query/plan-node-svg.component';
+import { TreeNodeComponent } from './dashboard/query/tree-node.component';
+import { TreeViewComponent } from './dashboard/query/tree-view.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    AppBarComponent,
-    InputQueryComponent,
-    InputQueryMetadataComponent,
-		QueryOutputComponent,
-    CodemirrorComponent,
-    CodemirrorMetadataComponent,
-		DataverseCollection,
-		DatasetCollection,
-		DatatypeCollection,
-		IndexCollection,
-    KeysPipe,
-		MetadataContainerComponent,
-    MetadataComponent,
-    QueryContainerComponent,
-		AppTabComponent,
-		ObjectTypePipe,
-    ObjectArrayTypePipe,
-    DialogCreateDataverse,
-    DialogDropDataverse,
-    DialogCreateDataset,
-    DialogDropDataset,
-    DialogCreateDatatype,
-    DialogDropDatatype,
-    DialogCreateIndex,
-    DialogDropIndex,
-    SafeHtmlPipe
-  ],
-  imports: [
-    TreeModule,
-    DataTableModule,
-    SharedModule,
-    FormsModule,
-    BrowserModule,
-		BrowserAnimationsModule,
-		DBModule.provideDB(schema),
-		EffectsModule.forRoot([MetadataEffects, DataverseEffects, DatasetEffects, DatatypeEffects, IndexEffects, SQLQueryEffects]),
-    HttpClientModule,
-    MaterialModule,
-		StoreModule.forRoot(reducers),
-		StoreDevtoolsModule.instrument({
-			maxAge: 10
-		})
-  ],
-  entryComponents: [
-    DialogCreateDataverse, 
-    DialogDropDataverse, 
-    DialogCreateDataset, 
-    DialogDropDataset , 
-    DialogCreateDatatype, 
-    DialogDropDatatype,
-    DialogCreateIndex, 
-    DialogDropIndex 
-  ],
-  providers: [AppCoreService, SQLService, MetadataService],
-  bootstrap: [AppComponent]
+    declarations: [
+        AppComponent,
+        AppBarComponent,
+        InputQueryComponent,
+        QueryOutputComponent,
+        MetadataComponent,
+        QueryContainerComponent,
+        AppTabComponent,
+        DialogMetadataInspector,
+        PlanNodeSVGComponent,
+        PlanViewComponent,
+        TreeNodeComponent,
+        TreeViewComponent,
+    ],
+    imports: [
+        FormsModule,
+        BrowserModule,
+        BrowserAnimationsModule,
+        EffectsModule.forRoot([AppEffects, DataverseEffects, DatasetEffects, DatatypeEffects, IndexEffects, SQLQueryEffects]),
+        HttpClientModule,
+        MaterialModule,
+        StoreModule.forRoot(reducers),
+        StoreDevtoolsModule.instrument({
+            maxAge: 10
+        })
+    ],
+    entryComponents: [
+        DialogMetadataInspector
+    ],
+    providers: [SQLService],
+    bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/appbar.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/appbar.component.html
index 3662c54..290fd55 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/appbar.component.html
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/appbar.component.html
@@ -12,34 +12,28 @@
 limitations under the License.
 */ -->
 <header class="awc-navbar">
+    <mat-divider [vertical]="true"></mat-divider>
+    <a routerLink="/" aria-label="AsterixDB Web Console">
+        <img class="awc-asterixDB-logo" src="./assets/asterixdb_tm.png" alt="AsterixDB">
+    </a>
+    <div class="flex-spacer"></div>
     <nav class="awc-navbar-header">
-      <a mat-button class="awc-button" routerLink="/" aria-label="AsterixDB Web Console">
-      <img class="awc-asterixDB-logo"
-            src="dashboard/assets/asterixdb_tm.png"
-            alt="AsterixDB">
-            <span>Administration Console</span>
-      </a>
-      <div class="flex-spacer"></div>
-      <a mat-button class="awc-button awc-navbar-hide-small" href="https://asterixDB.apache.org"
-         aria-label="WEBSITE">
-        WEBSITE
-      </a>
-      <a mat-button class="awc-button awc-navbar-hide-small" href="https://issues.apache.org/jira/browse/ASTERIXDB"
-         aria-label="FILE ISSUES">
-        FILE ISSUES
-      </a>
-      <a mat-button class="awc-button awc-navbar-hide-small" href="https://ci.apache.org/projects/asterixdb/index.html"
-         aria-label="DOCUMENTATION">
-        DOCUMENTATION
-      </a>
-      <a mat-button class="awc-button docs-navbar-hide-small" href="https://asterixdb.apache.org/community.html"
-         aria-label="CONTACT">
-        CONTACT
-      </a>
-
-      <a mat-button class="awc-button docs-navbar-hide-small" href="https://github.com/apache/asterixdb/"
-         aria-label="GITHUB">
-        GITHUB
-      </a>
+        <div class="menu">
+            <a mat-button class="menu awc-button awc-navbar-hide-small" href="https://asterixDB.apache.org" aria-label="WEBSITE">
+                WEBSITE
+            </a>
+            <a mat-button class="menu awc-button awc-navbar-hide-small" href="https://issues.apache.org/jira/browse/ASTERIXDB" aria-label="FILE ISSUES">
+                FILE ISSUES
+            </a>
+            <a mat-button class="menu awc-button awc-navbar-hide-small" href="https://ci.apache.org/projects/asterixdb/index.html" aria-label="DOCUMENTATION">
+                DOCUMENTATION
+            </a>
+            <a mat-button class="menu awc-button docs-navbar-hide-small" href="https://asterixdb.apache.org/community.html" aria-label="CONTACT">
+                CONTACT
+            </a>
+            <a mat-button class="menu awc-button docs-navbar-hide-small" href="https://github.com/apache/asterixdb/" aria-label="GITHUB">
+                GITHUB
+            </a>
+        </div>
     </nav>
 </header>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/appbar.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/appbar.component.scss
index 8a764e6..288bdb9 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/appbar.component.scss
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/appbar.component.scss
@@ -11,52 +11,64 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-.awc-navbar {
-  a {
-    //color: #f0f0f0;
-    text-decoration: none;
-  }
 
-  border-bottom: 1px solid  hsla(0,0%,0%,.10);
-  overflow: hidden;
+.awc-navbar {
+    a {
+        text-decoration: none;
+    }
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    border-bottom: 1px solid hsla(0, 0%, 0%, .10);
+    margin: 0px;
+    height: 50px;
+    width: 100%;
+    padding: 5px;
+    background-color : white;
+}
+
+.menu {
+    font-size: 13px;
 }
 
 .awc-navbar-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: 8px 16px;
-
-  > .mat-button {
-    &:last-child {
-      margin-left: auto;
-    }
-  }
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
 }
 
 .flex-spacer {
-  flex-grow: 1;
+    flex: 1 1 40%;
 }
 
 .awc-asterixDB-logo {
-  height: 26px;
-  margin: 0 4px 3px 0;
-  vertical-align: middle;
+    height: 26px;
+    margin: 0 4px 3px 0;
+    margin-left: 15px;
+    margin-top: 10px;
 }
 
 .awc-github-logo {
-  height: 21px;
-  margin: 0 7px 2px 0;
-  vertical-align: middle;
+    height: 21px;
+    margin: 0 7px 2px 0;
+    vertical-align: middle;
 }
 
 .awc-navbar-link {
-  text-decoration: inherit;
-  flex: 1;
+    text-decoration: inherit;
+    flex: 1;
 }
 
-/*
-* Rules for when the device is detected to be a small screen.
-* Moves content two rows instead of one.
-*/
-//@media (max-width: 720px) {}
+.menu {
+    /deep/ .mat-tab-label {
+        font-size: 0.80rem !important;
+        font-weight: 500 !important;
+    }
+}
+
+.menu-icon {
+    margin: 0;
+    margin-right: 15px;
+    margin-left: 5px;
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/appbar.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/appbar.component.ts
index 563ed11..7df060a 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/appbar.component.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/appbar.component.ts
@@ -14,12 +14,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-	moduleId: module.id,
-	selector: 'awc-bar',
-  templateUrl: 'appbar.component.html',
-	styleUrls: ['appbar.component.scss']
+    moduleId: module.id,
+    selector: 'awc-bar',
+    templateUrl: 'appbar.component.html',
+    styleUrls: ['appbar.component.scss']
 })
 
-export class AppBarComponent {
-	constructor() {}
-}
+export class AppBarComponent {}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/apptab.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/apptab.component.html
index bd5c963..4514ea2 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/apptab.component.html
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/apptab.component.html
@@ -11,13 +11,4 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */ -->
-<div class="content">
-  <mat-tab-group class="menu">
-    <mat-tab label=">_ QUERY">
-      <awc-query-container></awc-query-container>
-    </mat-tab>
-    <mat-tab label="METADATA">
-      <awc-metadata-container></awc-metadata-container>
-    </mat-tab>
-  </mat-tab-group>
-</div>
+<awc-query-container></awc-query-container>
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/apptab.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/apptab.component.scss
index 4d6fb7b..e827432 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/apptab.component.scss
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/apptab.component.scss
@@ -11,16 +11,28 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-.content {
-  width:95%;
-  margin: 0 auto;
+
+.query-tab {
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+    min-height: 900px;
+    margin: 0;
+    margin-bottom: 5px;
+    padding: 0;
+    background-color: gainsboro;
+    color: white;
 }
 
-.menu {    
-  /deep/ .mat-tab-label {
-      font-size: 0.80rem !important;
-      font-weight: 500  !important;
-  }
+.flex-spacer {
+    flex: 1 1 40%;
 }
 
-
+.menu {
+    /deep/ .mat-tab-label {
+        font-size: 0.80rem !important;
+        font-weight: 500 !important;
+        color: white;
+    }
+    background-color: blue;
+}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/apptab.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/apptab.component.ts
index b4db7f4..db53f55 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/apptab.component.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/apptab.component.ts
@@ -12,14 +12,13 @@
 limitations under the License.
 */
 import { Component } from '@angular/core';
-import { Store } from '@ngrx/store';
 
 @Component({
-  selector: 'awc-tab',
-  templateUrl: 'apptab.component.html',
-  styleUrls: ['apptab.component.scss']
+    selector: 'awc-tab',
+    templateUrl: 'apptab.component.html',
+    styleUrls: ['apptab.component.scss']
 })
 
 export class AppTabComponent {
-  constructor(private store: Store<any>) {};
-}
+    constructor() {};
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/codemirror-metadata.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/codemirror-metadata.component.scss
deleted file mode 100755
index 9812ecb..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/codemirror-metadata.component.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-.textarea-metadata {
-    background-color: red !important;
-    border: 1px solid black !important;
-    padding: 0;
-	margin: 0;
-}
-
-codemirror-metadata {
-    border: 1px solid #eee;
-    height: auto;
-    background-color: blue !important;
-    padding: 0;
-	margin: 0;
-}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/codemirror-metadata.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/codemirror-metadata.component.ts
deleted file mode 100755
index aed6ddf..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/codemirror-metadata.component.ts
+++ /dev/null
@@ -1,244 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-/**
- * Integrating codemirror (using ng2-codemirror) with our application
- *
- * component from "https://runkit.com/npm/ng2-codemirror"
- *                "https://www.npmjs.com/package/ng2-codemirror"
- * copy component from /src/codemirror.component.ts
- * and modified for custom mode (asterix aql, sql++ code hilighting)
- *
- * therefore, actually we don't need to "npm install ng2-codemirror"
- *
- * Because on the outside of this component,
- * It was hard to access the codemirror instance that 'ng-codemirror' use
- * So, we copied the component in our application and modified it
- *
- * 'codemirror.js(^5.23.0)' is included in the 'index.html'
- * And in this component(codemirror.component.ts)
- * add statement like "declare var CodeMirror: any;"
- *
- * I don't know whether this is right way
- *
- * ref 1) usage : https://embed.plnkr.co/8e9gxss9u10VeFrv29Zt/
- * ref 2) custom mode : http://jsfiddle.net/TcqAf/99/
- * ref 3) integrating : http://stackoverflow.com/questions/37092142/integrating-codemirror-with-angular2-typescript
- * ref 3) integrating :  https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.8ok74uvwg
- */
-import {
-    Component,
-    Input,
-    Output,
-    ElementRef,
-    ViewChild,
-    EventEmitter,
-    forwardRef,
-    AfterViewInit,
-    OnDestroy,
-    ChangeDetectionStrategy
-  } from '@angular/core';
-  import { NG_VALUE_ACCESSOR } from '@angular/forms';
-  import * as CodeMirrorMetadata from 'codemirror';
- 
- /**
-  * CodeMirror component
-  * Usage :
-  * <codemirror [(ngModel)]="data" [config]="{...}"></codemirror>
-  */
- @Component({
-   moduleId: module.id,
-   selector: 'codemirror-metadata',
-   providers: [
-     {
-       provide: NG_VALUE_ACCESSOR,
-       useExisting: forwardRef(() => CodemirrorMetadataComponent),
-       multi: true
-     }
-   ],
-   styleUrls: ['codemirror-metadata.component.scss'],
-   template: `<textarea class="textarea-metadata" #hostMetadata></textarea>`,//,
- })
- 
-export class CodemirrorMetadataComponent implements AfterViewInit, OnDestroy {
-  @Input() config;
-  @Output() change = new EventEmitter();
-  @Output() focus = new EventEmitter();
-  @Output() blur = new EventEmitter();
-  @Output() instance = null;
-  @ViewChild('hostMetadata') hostMetadata;
-  _value = '';
- 
-  /**
-  * Constructor
-  */
-  constructor(){
-      /**
-      * Custom mode for AsterixDB
-      */
-      CodeMirrorMetadata.defineMode("asterix", function(){
-        var KEYWORD_MATCH = [
-              // AQL
-              "drop", "dataverse", "dataset",
-              "if", "exists", "create",
-              "use", "type", "as", "closed",
-              "primary", "key",  "hints", "cardinality",
-              "index", "on", "btree", "rtree", "keyword",
-              "for", "in", "Metadata", "Dataset",
-              "return", "Index", "load", "using", "localfs", "path", "format",
-              // Query (not perfect)
-              "from", "in", "with", "group", "by", "select",
-              "let", "where", "order", "asc", "desc", "limit",
-              "keeping", "offset", "distinct", "or", "and",
-              // Built in functions (TODO)
-              // Built in functions (TODO)
-              // Built in functions (TODO)
-              // Asterix Data Model
-              // Primitive type
-              "boolean",
-              "tinyint", "smallint", "integer", "bigint",
-              "float", "double",
-              "string",
-              "binary", "hex", "base64",
-              "point", "line", "rectangle", "circle", "polygon",
-              "date", "time", "datetime", "duration", "interval", "uuid",
-              // Incomplete information type
-              "null", "missing",
-              // Derived type
-              // object {}, array [], multiset {{}}
-              // SQL++
-              "DROP", "DATAVERSE", "IF", "EXISTS", "CREATE", "USE", "TYPE", "AS", "DATASET", "PRIMARY", "KEY",
-              "INDEX", "SELECT", "VALUE", "INSERT", "INTO", "FROM", "WHERE", "AND", "SOME", "IN", "SATISFIES", "IS", "UNKNOWN", "NOT", "EVERY",
-              "GROUP", "BY", "ORDER", "DESC", "LIMIT", "OR", "SET", "DELETE", "LOAD", "USING",
-          ];
-
-          //"(", ")","{{", "}}", "[", "]",	"{", "}",  ";", ",", ":","?", "=",
-        var VAR_MATCH = /[$][a-zA-Z]+(\d*)/;
-        var DOT_MATCH = /[.](\S)*/;
-        var DOUBLE_QUOTE_MATCH = /["].*["]/;
-        var SINGLE_QUOTE_MATCH = /['].*[']/;
-        var BREAK_POINT = /(\s)/;
-
-        return {
-            startState: function() {return {inString: false};},
-            token: function(stream, state) {
-                if (state.newLine == undefined)state.newLine = true;
-
-                //match variable reference
-                if (stream.match(VAR_MATCH)) {
-                    return "variable";
-                }
-
-                if (stream.match(DOT_MATCH)) {
-                    return "dot-variable";
-                }
-
-                //string variable match
-                if (stream.match(DOUBLE_QUOTE_MATCH)) {
-                    return "string";
-                }
-                if (stream.match(SINGLE_QUOTE_MATCH)) {
-                    return "string";
-                }
-
-                //keyword match
-                for (var i in KEYWORD_MATCH){
-                    if (state.newLine && stream.match(KEYWORD_MATCH[i])){
-                            return "keyword";
-                    }
-                }
-
-                if (stream.peek() === " " || stream.peek() === null){
-                    state.newLine = true;
-                }else{
-                    state.newLine = false;
-                }
-                stream.next();
-                return null;
-            }
-        };
-      });
-   }
- 
-  get value() { return this._value; };
- 
-  @Input() set value(v) {
-    if (v !== this._value) {
-      this._value = v;
-      this.onChange(v);
-    }
-  }
-
-  /**
-  * On component destroy
-  */
-  ngOnDestroy() {}
- 
-   /**
-    * On component view init
-    */
-  ngAfterViewInit() {
-  this.config = this.config || {};
-  this.codemirrorInit(this.config); 
-  }
-
-  /**
-  * Initialize codemirror
-  */
-  codemirrorMetadataConfig = 	{ 	mode: "asterix",
-    //lineNumbers: true,
-    lineWrapping: true,
-    showCursorWhenSelecting: true,
-    autofocus: true
-  };
-
-  codemirrorInit(config){
-    this.instance = CodeMirrorMetadata.fromTextArea(this.hostMetadata.nativeElement, this.codemirrorMetadataConfig);
-    this.instance.setSize("100%" , "100px");
-    this.instance.on('change', () => {
-      this.updateValue(this.instance.getValue());
-    });
-
-    this.instance.on('focus', () => {
-      this.focus.emit();
-    });
-
-    this.instance.on('blur', () => {
-      this.blur.emit();
-    });
-  }
- 
-  /**
-  * Value update process
-  */
-  updateValue(value){
-    this.value = value;
-    this.onTouched();
-    this.change.emit(value);
-  }
- 
-  /**
-  * Implements ControlValueAccessor
-  */
-  writeValue(value){
-    this._value = value || '';
-    if (this.instance) {
-      this.instance.setValue(this._value);
-    }
-  }
- 
-  onChange(_) {}
-  onTouched() {}
-  registerOnChange(fn){this.onChange = fn;}
-  registerOnTouched(fn){this.onTouched = fn;}
-} 
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/dataset-create-dialog.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/dataset-create-dialog.component.scss
deleted file mode 100755
index c969489..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/dataset-create-dialog.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-.dataset-dialog {    
-    font-family: "Roboto Mono", monospace;
-    font-size: 0.80rem;
-    font-weight: 500;
-}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/dataset-drop-dialog.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/dataset-drop-dialog.component.html
deleted file mode 100755
index 517006c..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/dataset-drop-dialog.component.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/-->
-<div class="dataset-dialog">
-    <p mat-dialog-title>DROP DATASET</p>
-    <mat-dialog-content>
-        <p>PLEASE GIVE THE NAME OF THE DATASET TO DROP</p>
-    </mat-dialog-content>
-        <mat-form-field>
-            <input matInput tabindex="0" [(ngModel)]="data.datasetName">
-        </mat-form-field>
-    <mat-dialog-actions>
-        <button mat-button (click)="onClick()" tabindex="1">DROP</button>
-        <button mat-button (click)="onNoClick()" tabindex="2">CANCEL</button>
-    </mat-dialog-actions>
-</div>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/dataset-drop-dialog.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/dataset-drop-dialog.component.scss
deleted file mode 100755
index c969489..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/dataset-drop-dialog.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-.dataset-dialog {    
-    font-family: "Roboto Mono", monospace;
-    font-size: 0.80rem;
-    font-weight: 500;
-}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/datasets.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/datasets.component.html
deleted file mode 100755
index f556951..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/datasets.component.html
+++ /dev/null
@@ -1,112 +0,0 @@
-<!--/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/ -->
-<div class="container" (click)="onClick()">
-  <div class="master">
-      <mat-card class="datasets-card" *ngIf="loaded$ | async as ld">
-        <mat-toolbar color="primary" class="datasets-selector">
-            <mat-icon class="icon">menu</mat-icon>
-            <span>DATASETS - METADATA</span>
-            <span class="spacer"></span>
-        </mat-toolbar>
-        <mat-card-content class="datasets-content">
-            <mat-table #table [dataSource]="dataSource" class="datasets-table">
-                <!-- CompactionPolicy Column -->
-                <ng-container matColumnDef="CompactionPolicy">
-                  <mat-header-cell *matHeaderCellDef class="header-compactionpolicy-cell">Compaction Policy</mat-header-cell>
-                  <mat-cell *matCellDef="let element" class="dataset-compactionpolicy-cell"> {{element.CompactionPolicy}} </mat-cell>
-                </ng-container>
-    
-                <!-- DatasetId Column -->
-                <ng-container matColumnDef="DatasetId">
-                  <mat-header-cell *matHeaderCellDef class="header-datasetid-cell">Dataset Id</mat-header-cell>
-                  <mat-cell *matCellDef="let element" class="dataset-datasetid-cell"> {{element.DatasetId}} </mat-cell>
-                </ng-container>
-    
-                <!-- DatasetName Column -->
-                <ng-container matColumnDef="DatasetName">
-                  <mat-header-cell *matHeaderCellDef class="header-datasetname-cell">Dataset Name</mat-header-cell>
-                  <mat-cell *matCellDef="let element" class="dataset-datasetname-cell"> {{element.DatasetName}} </mat-cell>
-                </ng-container>
-    
-                <!-- DatasetType Column -->
-                <ng-container matColumnDef="DatasetType">
-                  <mat-header-cell *matHeaderCellDef class="header-datasettype-cell">Dataset Type</mat-header-cell>
-                  <mat-cell *matCellDef="let element" class="dataset-datasettype-cell"> {{element.DatasetType}} </mat-cell>
-                </ng-container>
-    
-                <!-- DatatypeDataverseName Column -->
-                <ng-container matColumnDef="DatatypeDataverseName">
-                  <mat-header-cell *matHeaderCellDef class="header-datatypedataversename-cell">Datatype Dataverse Name</mat-header-cell>
-                  <mat-cell *matCellDef="let element" class="dataset-datatypedataversename-cell"> {{element.DatatypeDataverseName}} </mat-cell>
-                </ng-container>
-    
-                <!-- DatatypeName Column -->
-                <ng-container matColumnDef="DatatypeName">
-                  <mat-header-cell *matHeaderCellDef class="header-datatypename-cell">Datatype Name</mat-header-cell>
-                  <mat-cell *matCellDef="let element" class="dataset-datatypename-cell"> {{element.DatatypeName}} </mat-cell>
-                </ng-container>
-    
-                <!-- DataverseName Column -->
-                <ng-container matColumnDef="DataverseName">
-                  <mat-header-cell *matHeaderCellDef class="header-dataversename-cell">Dataverse Name</mat-header-cell>
-                  <mat-cell *matCellDef="let element" class="dataset-dataversename-cell"> {{element.DataverseName}} </mat-cell>
-                </ng-container>
-    
-                <!-- GroupName Column -->
-                <ng-container matColumnDef="GroupName">
-                  <mat-header-cell *matHeaderCellDef class="header-groupname-cell">Group Name</mat-header-cell>
-                  <mat-cell *matCellDef="let element" class="dataset-groupname-cell"> {{element.GroupName}} </mat-cell>
-                </ng-container>
-    
-                <!-- PendingOp Column -->
-                <ng-container matColumnDef="PendingOp">
-                  <mat-header-cell *matHeaderCellDef class="header-pendingop-cell">Pending Op</mat-header-cell>
-                  <mat-cell *matCellDef="let element" class="dataset-pendingop-cell"> {{element.PendingOp}} </mat-cell>
-                </ng-container>
-    
-                <!-- DatasetType Column -->
-                <ng-container matColumnDef="Timestamp">
-                  <mat-header-cell *matHeaderCellDef class="header-timestamp-cell">Timestamp</mat-header-cell>
-                  <mat-cell *matCellDef="let element" class="dataset-timestamp-cell"> {{element.Timestamp}} </mat-cell>
-                </ng-container>
-    
-                <mat-header-row *matHeaderRowDef="['DatasetName', 'DataverseName', 'DatatypeName', 'Timestamp']"></mat-header-row>
-                <mat-row *matRowDef="let row; columns: ['DatasetName', 'DataverseName', 'DatatypeName', 'Timestamp'];"
-                  [ngClass]="{'highlight': selectedRowIndex == row.id}"
-                  (click)="highlight(row)">
-                </mat-row>
-            </mat-table>
-        </mat-card-content>
-        <mat-card-actions class="actions">
-            <button class="refresh-button" mat-button (click)="openDropDatasetDialog()">DROP</button>
-            <span class="error-message">{{errorMessage}}</span>
-            <span class="spacer"></span>
-            <button class="refresh-button" mat-button (click)="getDatasets()">REFRESH</button>
-        </mat-card-actions>
-      </mat-card>
-      <awc-query-metadata #querymetadata class="query"></awc-query-metadata>
-  </div>
-  <div class="detail">
-      <mat-card class="datasets-details-card">
-          <mat-toolbar color="primary" class="datasets-selector">
-              <mat-icon class="icon">menu</mat-icon>
-              <span>DATASET - METADATA - DETAILS</span>
-              <span class="spacer"></span>
-          </mat-toolbar>
-          <mat-card-content class="datasets-content output">
-            <span><pre>{{output}}</pre></span>
-          </mat-card-content>
-        </mat-card>
-  </div>
-</div>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/datasets.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/datasets.component.scss
deleted file mode 100755
index 38a8272..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/datasets.component.scss
+++ /dev/null
@@ -1,415 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-$datasets-spacing-unit: 8px;
-
-.container {
-  display: flex;
-	flex-flow: row;
-	padding: 0;
-  margin: 0;
-}
-
-.master {
-  width: 60%;
-  overflow: hidden;
-}
-
-.detail {
-  width: 40%;
-  overflow: hidden;
-}
-
-.datasets-card {
-	display: flex;
-	flex-flow: column;
-  padding: 0;
-  margin:0 auto;
-  margin-top: ($datasets-spacing-unit * 2);
-  min-height: 450px;
-  max-height: 450px;
-  //min-width: 98%; //(100vw / 2);
-  //max-width: 98%; // (100vw / 2);
-  width: 95%; // 98%;
-  overflow: hidden;
-}
-
-.datasets-details-card {
-	display: flex;
-	flex-flow: column;
-  padding: 0;
-  margin:0 auto;
-  margin: ($datasets-spacing-unit * 2);
-  min-height: 716px;
-  max-height: 716px;
-  //min-width: 95%; //(100vw / 2);
-  //max-width: 95%; // (100vw / 2);
-  overflow: hidden;
-}
-
-.icon {
-	padding: 0 14px 0 0;
-	margin: 0;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-.datasets-selector {
-	min-height: 42px;
-	max-height: 42px;
-	justify-content: center;
-	font-size: 0.80rem;
-  font-weight: 500;
-  background-color: white;
-	border: 1px solid rgba(54, 147, 209, 0.87);
-}
-
-.datasets-content {
-  position:relative;
-  top: 0;
-  left: 0;
-  margin: 0px;
-  padding: 0px;
-  overflow: auto;
-}
-
-.datasets-table {
-  margin: $datasets-spacing-unit !important;
-  height: 330px;
-  overflow: auto;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-.example-header {
-  min-height: 64px;
-  display: flex;
-  align-items: center;
-  padding-left: 24px;
-  font-size: 20px;
-}
-
-.mat-table {
-  overflow: auto;
-}
-
-.customWidthClass{
-   flex: 0 0 250px;
-}
-
-.mat-column-DataverseName {
-  text-align: left;
-}
-
-.mat-header-cell.mat-column-DataverseName {
-  text-align: left;
-}
-
-.mat-cell.mat-column-DataverseName {
-  text-align: left;
-}
-
-.header-compactionpolicy-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 250px;
-}
-
-.dataset-compactionpolicy-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 250px;
-}
-
-.header-datasetid-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 250px;
-}
-
-.dataset-datasetid-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 250px;
-}
-
-.header-datasetname-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 250px;
-}
-
-.dataset-datasetname-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 250px;
-}
-
-.header-datasettype-cell {
-  border: none;
-  font-size: 12px;
-  //letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 250px;
-}
-
-.dataset-datasettype-cell {
-  border: none;
-  font-size: 12px;
-  //letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 250px;
-}
-
-.header-datatypedataversename-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 250px;
-}
-
-.dataset-datatypedataversename-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 250px;
-}
-
-.header-datatypename-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 250px;
-}
-
-.dataset-datatypename-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 250px;
-}
-
-.header-dataversename-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 250px;
-}
-
-.dataset-dataversename-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 250px;
-}
-
-
-.header-groupname-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 250px;
-}
-
-.dataset-groupname-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 250px;
-}
-
-.header-timestamp-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 250px;
-}
-
-.dataset-timestamp-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datasets-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datasets-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 250px;
-}
-
-.example-header {
-  min-height: 56px;
-  max-height: 56px;
-  display: flex;
-  align-items: center;
-  padding: 8px 24px 0;
-  font-size: 20px;
-  justify-content: space-between;
-  border-bottom: 1px solid transparent;
-}
-
-.mat-form-field {
-  font-size: 14px;
-  flex-grow: 1;
-  margin-top: 8px;
-}
-
-.example-no-results {
-  display: flex;
-  justify-content: center;
-  padding: 24px;
-  font-size: 12px;
-  font-style: italic;
-}
-
-.actions {
-  display: flex;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  color: rgba(54, 147, 209, 0.87);
-  padding: $datasets-spacing-unit;
-  margin: 0;
-}
-
-.error-message {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  color: rgba(209, 54, 54, 0.87);
-  padding-top: 10px;  
-  padding-left: 20px;
-  text-overflow: ellipsis;
-}
-
-.output {
-  padding-left: ($datasets-spacing-unit * 2);
-}
-
-
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/datasets.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/datasets.component.ts
deleted file mode 100755
index 0fe8c74..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/datasets.component.ts
+++ /dev/null
@@ -1,231 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { Component, ElementRef, ViewChild, Inject, Input } from '@angular/core';
-import { Dataset } from '../../../shared/models/asterixDB.model'
-import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
-import * as datasetActions from '../../../shared/actions/dataset.actions'
-import {DataSource} from '@angular/cdk/collections';
-import {BehaviorSubject} from 'rxjs/BehaviorSubject';
-import { Subscription } from "rxjs/Rx";
-import { State } from '../../../shared/reducers/dataset.reducer';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/observable/fromEvent';
-import { MatPaginator } from '@angular/material';
-import { SelectionModel } from '@angular/cdk/collections';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
-
-/**
- * Root component
- * Defines our application's layout
- */
-@Component({
-  selector: 'awc-datasets',
-  templateUrl: 'datasets.component.html',
-  styleUrls: ['datasets.component.scss']
-})
-
-export class DatasetCollection {
-  displayedColumns = "['CompactionPolicy', 'DatasetId', 'DatasetName', 'DatasetType', 'DatatypeDataverseName', 'DatatypeName', 'DataverseName', 'GroupName', 'PendingOp', 'Timestamp']"
-
-/*
-  compactionPolicy: string;
-  compactionPolicyProperties: CompactionPolicyProperties[]; *
-  datasetId: string;
-  datasetName: string;
-  datasetType:string;
-  datatypeDataverseName: string;
-  datatypeName: string;
-  dataverseName: string;
-  groupName:string;
-  hints: string[]; *
-  internalDetails: InternalDetails; *
-  pendingOp: string;
-  timestamp: string; */
-  datasetName: string;  
-  dataSource: DatasetDataSource | null;
-  loaded$: Observable<any>
-  @Input('message') errorMessage: string = ""
-  dsName = "";
-
-  constructor(private store: Store<any>, public dialog: MatDialog) {
-    this.loaded$ = this.store.select('dataset');
-
-    // Watching the name of the latest create dataset
-    this.store.select(s => s.dataset.createDatasetName).subscribe((data: any) => {
-      this.dsName = data;
-    })
-
-    // Watching the name of the latest drop dataset
-    this.store.select(s => s.dataset.dropDatasetName).subscribe((data: any) => {
-      this.dsName = data;
-    })
-
-    // Watching for the if there is a change in the collection
-		this.store.select(s => s.dataset.createDatasetSuccess).subscribe((data: any) => {
-      if (data === true) {
-        this.getDatasets();
-        this.errorMessage = "SUCCEED: CREATE DATASET " + this.dsName;
-      }  
-    })
-
-    // Watching for the if there is a error in a create dataset operation 
-		this.store.select(s => s.dataset.createDatasetError).subscribe((data: any) => {
-      if (data.errors) {
-        this.errorMessage = "ERROR: " + data.errors[0].msg;
-      }  
-    })
-
-
-    // Watching for the success message in a drop dataset operation 
-    this.store.select(s => s.dataset.dropDatasetSuccess).subscribe((data: any) => {
-      if (data === true) {
-        this.getDatasets();
-        this.errorMessage = "SUCCEED: DROP DATASET " + this.dsName;
-      }  
-    })
-
-    // Watching for the if there is a error in a drop dataset operation 
-		this.store.select(s => s.dataset.dropDatasetError).subscribe((data: any) => {
-      if (data.errors) {
-        this.errorMessage = "ERROR: " + data.errors[0].msg;
-      }  
-    })
-  }
-
-  getDatasets() {
-    // Trigger the effect to refresh the dataset
-    this.store.dispatch(new datasetActions.SelectDatasets('-'));
-  }
-
-  ngOnInit() {
-    // Assign the datasource for the table 
-    this.dataSource = new DatasetDataSource(this.store);
-  }
-
-  /* 
-  * opens the create dataverse dialog
-  */
-  openCreateDatasetDialog(): void {
-    let dialogRef = this.dialog.open(DialogCreateDataset, {
-      width: '420px',
-      data: { name: this.datasetName }
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      this.datasetName = result;
-    });
-  }
-
-  /* 
-  * opens the drop dataverse dialog
-  */
-  openDropDatasetDialog(): void {
-    let dialogRef = this.dialog.open(DialogDropDataset, {
-      width: '420px',
-      data: { name: this.datasetName }
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      this.datasetName = result;
-    });
-  }
-
-  /* 
-  * Clean up the error message on the screen
-  */
-  onClick(): void {
-    this.errorMessage = "";
-  }
-
-  output: any;
-
-  highlight(row){
-    this.output = JSON.stringify(row, null, 2);
-  }
-
-  @ViewChild('querymetadata') inputQuery;
-  
-  /* Cleans up error message */
-  cleanUp() {
-    this.errorMessage = ""; 
-    // Cascading   
-    this.inputQuery.cleanUp(); 
-  }
-}
-
-@Component({
-  selector: 'dataset-create-dialog',
-  templateUrl: 'dataset-create-dialog.component.html',
-  styleUrls: ['dataset-create-dialog.component.scss']
-})
-
-export class DialogCreateDataset {
-  constructor(  private store: Store<any>,
-                public dialogCreateDsRef: MatDialogRef<DialogCreateDataset>,
-                @Inject(MAT_DIALOG_DATA) public data: any) { }
-
-  onClick(): void {
-    this.store.dispatch(new datasetActions.CreateDataset(this.data.datasetName));
-    this.dialogCreateDsRef.close();
-  }
-
-  onNoClick(): void {
-    this.dialogCreateDsRef.close();
-  }
-}
-
-@Component({
-  selector: 'dataset-drop-dialog',
-  templateUrl: 'dataset-drop-dialog.component.html',
-  styleUrls: ['dataset-drop-dialog.component.scss']
-})
-
-export class DialogDropDataset {
-  constructor(  private store: Store<any>,
-                public dialogDropDsRef: MatDialogRef<DialogDropDataset>,
-                @Inject(MAT_DIALOG_DATA) public data: any) { }
-
-  onClick(): void {
-    this.store.dispatch(new datasetActions.DropDataset(this.data.datasetName));
-    this.dialogDropDsRef.close();
-  }
-
-  onNoClick(): void {
-    this.dialogDropDsRef.close();
-  }
-}
-
-export class DatasetDataSource extends DataSource<any> {
-  private datasets$: Observable<any>
-  constructor(private store: Store<any>) {
-    super();
-    this.datasets$ = this.store.select(s => s.dataset.datasets.results);
-  }
-
-  /** Connect function called by the table to retrieve one stream containing the data to render. */
-  connect(): Observable<Dataset[]> {
-      const displayDataChanges = [
-        this.datasets$,
-      ];
-
-    return this.datasets$;
-  }
-
-  disconnect() {}
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatype-create-dialog.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatype-create-dialog.component.html
deleted file mode 100755
index aca06fd..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatype-create-dialog.component.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!--/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/-->
-<!-- Place holder for future expansion -->
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatype-create-dialog.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatype-create-dialog.component.scss
deleted file mode 100755
index 9502a7e..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatype-create-dialog.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-.datatype-dialog {    
-    font-family: "Roboto Mono", monospace;
-    font-size: 0.80rem;
-    font-weight: 500;
-}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatype-drop-dialog.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatype-drop-dialog.component.html
deleted file mode 100755
index 1157261..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatype-drop-dialog.component.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/-->
-<div class="datatype-dialog">
-    <p mat-dialog-title>DROP DATATYPE</p>
-    <mat-dialog-content>
-        <p>PLEASE GIVE THE NAME OF THE DATATYPE TO DROP</p>
-    </mat-dialog-content>
-        <mat-form-field>
-            <input matInput tabindex="0" [(ngModel)]="data.datatypeName">
-        </mat-form-field>
-    <mat-dialog-actions>
-        <button mat-button (click)="onClick()" tabindex="1">DROP</button>
-        <button mat-button (click)="onNoClick()" tabindex="2">CANCEL</button>
-    </mat-dialog-actions>
-</div>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatype-drop-dialog.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatype-drop-dialog.component.scss
deleted file mode 100755
index 9502a7e..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatype-drop-dialog.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-.datatype-dialog {    
-    font-family: "Roboto Mono", monospace;
-    font-size: 0.80rem;
-    font-weight: 500;
-}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatypes.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatypes.component.html
deleted file mode 100755
index e580a54..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatypes.component.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!--/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/ -->
-<div class="container" (click)="onClick()">
-  <div class="master">
-   <mat-card class="datatypes-card" *ngIf="loaded$ | async as ld">
-      <mat-toolbar color="primary" class="datatypes-selector">
-          <mat-icon class="icon">menu</mat-icon>
-          <span>DATATYPES - METADATA</span>
-          <span class="spacer"></span>
-      </mat-toolbar>
-      <mat-card-content class="datatypes-content">
-        <mat-table #table [dataSource]="dataSource" class="datatypes-table" role="treegrid">
-            <!-- Datatype Name -->
-            <ng-container matColumnDef="DatatypeName">
-              <mat-header-cell *matHeaderCellDef class="header-datatypename-cell">Datatype Name</mat-header-cell>
-              <mat-cell *matCellDef="let element" class="datatypes-datatypename-cell">{{element.DatatypeName}} </mat-cell>
-            </ng-container>
-
-            <!-- Data Type Dataverse Name -->
-            <ng-container matColumnDef="DataverseName">
-              <mat-header-cell *matHeaderCellDef class="header-dataversename-cell">Dataverse Name </mat-header-cell>
-              <mat-cell *matCellDef="let element" class="datatypes-dataversename-cell">{{element.DataverseName}} </mat-cell>
-            </ng-container>
-
-            <!-- Timestamp Column -->
-            <ng-container matColumnDef="Timestamp">
-              <mat-header-cell *matHeaderCellDef class="header-timestamp-cell">Timestamp</mat-header-cell>
-              <mat-cell *matCellDef="let element" class="datatypes-timestamp-cell">{{element.Timestamp}}</mat-cell>
-            </ng-container>
-
-            <mat-header-row *matHeaderRowDef="['DatatypeName', 'DataverseName', 'Timestamp']"></mat-header-row>
-            <mat-row *matRowDef="let row; columns: ['DatatypeName', 'DataverseName', 'Timestamp'];"
-                [ngClass]="{'highlight': selectedRowIndex == row.id}"
-                (click)="highlight(row)">
-            </mat-row>
-        </mat-table>
-      </mat-card-content>
-      <mat-card-actions class="actions">
-          <button class="refresh-button" mat-button (click)="openDropDatatypeDialog()">DROP</button>
-          <span class="error-message">{{errorMessage}}</span>
-          <span class="spacer"></span>
-          <button class="refresh-button" mat-button (click)="getDatatypes()">REFRESH</button>
-      </mat-card-actions>
-    </mat-card> 
-    <awc-query-metadata #querymetadata class="query"></awc-query-metadata>
-  </div>
-  <div class="detail">
-      <mat-card class="datatypes-details-card">
-          <mat-toolbar color="primary" class="datatypes-selector">
-              <mat-icon class="icon">menu</mat-icon>
-              <span>DATATYPE - METADATA - DETAILS</span>
-              <span class="spacer"></span>
-          </mat-toolbar>
-          <mat-card-content class="datatypes-content output">
-            <span><pre>{{output}}</pre></span>
-          </mat-card-content>
-        </mat-card>
-  </div>
-</div>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatypes.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatypes.component.scss
deleted file mode 100755
index d4aeffc..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatypes.component.scss
+++ /dev/null
@@ -1,267 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-$datatypes-spacing-unit: 8px;
-
-.container {
-  display: flex;
-	flex-flow: row;
-	padding: 0;
-  margin: 0;
-}
-
-.master {
-  width: 60%;
-  overflow: hidden;
-}
-
-.detail {
-  width: 40%;
-  overflow: hidden;
-}
-
-.datatypes-card {
-	display: flex;
-	flex-flow: column;
-  padding: 0;
-  margin:0 auto;
-  margin-top: ($datatypes-spacing-unit * 2);
-  min-height: 450px;
-  max-height: 450px;
-  //min-width: 98%; //(100vw / 2);
-  //max-width: 98%; // (100vw / 2);
-  width: 95%; // 98%;
-  overflow: hidden;
-}
-
-.datatypes-details-card {
-	display: flex;
-	flex-flow: column;
-  padding: 0;
-  margin:0 auto;
-  margin: ($datatypes-spacing-unit * 2);
-  min-height: 716px;
-  max-height: 716px;
-  //min-width: 95%; //(100vw / 2);
-  //max-width: 95%; // (100vw / 2);
-  overflow: hidden;
-}
-
-.icon {
-	padding: 0 14px 0 0;
-	margin: 0;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-.datatypes-selector {
-	min-height: 42px;
-	max-height: 42px;
-	justify-content: center;
-	//align-items: center;
-	font-size: 0.80rem;
-  font-weight: 500;
-  background-color: white;
-	border: 1px solid rgba(54, 147, 209, 0.87);
-}
-
-.datatypes-content {
-  position:relative;
-  top: 0;
-  left: 0;
-  margin: 0px;
-  padding: 0px;
-  overflow: auto;
-}
-
-.datatypes-table {
-  margin: $datatypes-spacing-unit !important;
-  height: 330px;
-  overflow: auto;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-.datatypes-toolbar {
-	display: block;
-  min-height: 56px;
-	height: 56px;
-//	width: 250px;
-  font-size: 12px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-	letter-spacing: 1px;
-	font-weight: 400;
-	background: rgba(0,0,1, .80);
-}
-
-.example-header {
-  min-height: 64px;
-  display: flex;
-  align-items: center;
-  padding-left: 24px;
-  font-size: 20px;
-}
-
-.mat-table {
-  overflow: auto;
-}
-
-.customWidthClass{
-   flex: 0 0 75px;
-}
-
-.mat-column-DataverseName {
-  text-align: left;
-}
-
-.mat-header-cell.mat-column-DataverseName {
-  text-align: left;
-}
-
-.mat-cell.mat-column-DataverseName {
-  text-align: left;
-}
-
-.header-datatypename-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datatypes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datatypes-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 400px;
-}
-
-.datatypes-datatypename-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datatypes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datatypes-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 400px;
-}
-
-.header-dataversename-cell {
-  display: flex;
-  justify-content: center;
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datatypes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datatypes-spacing-unit * 2);
-  text-align: center;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 250px;
-}
-
-.datatypes-dataversename-cell {
-  display: flex;
-  justify-content: center;
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datatypes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datatypes-spacing-unit * 2);
-  flex: 0 0 250px;
-}
-
-.header-timestamp-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datatypes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datatypes-spacing-unit * 2);
-  text-align: center;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 250px;
-}
-
-.datatypes-timestamp-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $datatypes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($datatypes-spacing-unit * 2);
-  text-align: center;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 250px;
-}
-
-.example-header {
-  min-height: 56px;
-  max-height: 56px;
-  display: flex;
-  align-items: center;
-  padding: 8px 24px 0;
-  font-size: 20px;
-  justify-content: space-between;
-  border-bottom: 1px solid transparent;
-}
-
-.mat-form-field {
-  font-size: 14px;
-  flex-grow: 1;
-  margin-top: 8px;
-}
-
-.example-no-results {
-  display: flex;
-  justify-content: center;
-  padding: 24px;
-  font-size: 12px;
-  font-style: italic;
-}
-
-.actions {
-  display: flex;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  color: rgba(54, 147, 209, 0.87);
-  padding: $datatypes-spacing-unit;
-  margin: 0;
-}
-
-.error-message {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  color: rgba(209, 54, 54, 0.87);
-  padding-top: 10px;  
-  padding-left: 20px;
-  text-overflow: ellipsis;
-}
-
-.output {
-  padding-left: ($datatypes-spacing-unit * 2);
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatypes.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatypes.component.ts
deleted file mode 100755
index 953a27e..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datatypes-collection/datatypes.component.ts
+++ /dev/null
@@ -1,220 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { Component, ChangeDetectionStrategy, Inject, Input } from '@angular/core';
-import { Datatype } from '../../../shared/models/asterixDB.model'
-import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
-import * as datatypeActions from '../../../shared/actions/datatype.actions'
-import { ElementRef, ViewChild} from '@angular/core';
-import {DataSource} from '@angular/cdk/collections';
-import {BehaviorSubject} from 'rxjs/BehaviorSubject';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/observable/fromEvent';
-import { Subscription } from "rxjs/Rx";
-import { State } from '../../../shared/reducers/datatype.reducer';
-import { MatPaginator } from '@angular/material';
-import { SelectionModel } from '@angular/cdk/collections';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
-
-@Component({
-  selector: 'awc-datatypes',
-  templateUrl: 'datatypes.component.html',
-  styleUrls: ['datatypes.component.scss']
-})
-
-export class DatatypeCollection {
-  displayedColumns = "['datatypeName', 'dataverseName', 'timeStamp']"
-  /*
-  datatypeName: string;
-  dataverseName: string;
-  derived: DatatypeDerived;
-  timeStamp: string;
-  */
-  datatypeName: string;
-  dataSource: DatatypeDataSource | null;
-  loaded$: Observable<any>;
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild('filter') filter: ElementRef;
-  selection = new SelectionModel<string>(true, []);
-  @Input('message') errorMessage: string = ""
-  dtName = "";
-  
-  constructor(private store: Store<any>, public dialog: MatDialog) {
-    this.loaded$ = this.store.select('datatype');
-    // Watching the name of the latest create datatype
-    this.store.select(s => s.datatype.createDatatypeName).subscribe((data: any) => {
-      this.dtName = data;
-    })
-
-    // Watching the name of the latest drop datatype
-    this.store.select(s => s.datatype.dropDatatypeName).subscribe((data: any) => {
-      this.dtName = data;
-    })
-
-    // Watching for the if there is a change in the collection
-		this.store.select(s => s.datatype.createDatatypeSuccess).subscribe((data: any) => {
-      if (data === true) {
-        this.getDatatypes();
-        this.errorMessage = "SUCCEED: CREATE DATATYPE " + this.dtName;
-      }  
-    })
-
-    // Watching for the if there is a error in a create datatype operation 
-		this.store.select(s => s.datatype.createDatatypeError).subscribe((data: any) => {
-      if (data.errors) {
-        this.errorMessage = "ERROR: " + data.errors[0].msg;
-      }  
-    })
-
-    // Watching for the success message in a drop datatype operation 
-    this.store.select(s => s.datatype.dropDatatypeSuccess).subscribe((data: any) => {
-      if (data === true) {
-        this.getDatatypes();
-        this.errorMessage = "SUCCEED: DROP DATATYPE " + this.dtName;
-      }  
-    })
-
-    // Watching for the if there is a error in a drop datatype operation 
-		this.store.select(s => s.datatype.dropDatatypeError).subscribe((data: any) => {
-      if (data.errors) {
-        this.errorMessage = "ERROR: " + data.errors[0].msg;
-      }  
-    })
-  }
-
-  getDatatypes() {
-    // Triggers the effect to refresg the datatypes
-    this.store.dispatch(new datatypeActions.SelectDatatypes('-'));
-  }
-
-  ngOnInit() {
-    // Assign the datasource for the table 
-    this.dataSource = new DatatypeDataSource(this.store);
-  }
-
-   /* 
-  * opens the create datatype dialog
-  */
-  openCreateDatatypeDialog(): void {
-    let dialogRef = this.dialog.open(DialogCreateDatatype, {
-      width: '420px',
-      data: { name: this.datatypeName }
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      this.datatypeName = result;
-    });
-  }
-
-  /* 
-  * opens the drop datatype dialog
-  */
-  openDropDatatypeDialog(): void {
-    let dialogRef = this.dialog.open(DialogDropDatatype, {
-      width: '420px',
-      data: { name: this.datatypeName }
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      this.datatypeName = result;
-    });
-  }
-
-  onClick(): void {
-    this.errorMessage = "";
-  }
-
-  /* Showing all the datatype metadata information */
-  output: any;
-  
-  highlight(row){
-    this.output = JSON.stringify(row, null, 2);
-  }
-
-  @ViewChild('querymetadata') inputQuery;
-
-  /* Cleans up error message */
-  cleanUp() {
-    this.errorMessage = ""; 
-    // Cascading   
-    this.inputQuery.cleanUp();    
-  }
-}
-
-@Component({
-  selector: 'datatype-create-dialog',
-  templateUrl: 'datatype-create-dialog.component.html',
-  styleUrls: ['datatype-create-dialog.component.scss']
-})
-
-export class DialogCreateDatatype {
-  constructor(  private store: Store<any>,
-                public dialogCreateDtRef: MatDialogRef<DialogCreateDatatype>,
-                @Inject(MAT_DIALOG_DATA) public data: any) { }
-
-  onClick(): void {
-    this.store.dispatch(new datatypeActions.CreateDatatype(this.data.datasetName));
-    this.dialogCreateDtRef.close();
-  }
-
-  onNoClick(): void {
-    this.dialogCreateDtRef.close();
-  }
-}
-
-@Component({
-  selector: 'datatypes-drop-dialog',
-  templateUrl: 'datatype-drop-dialog.component.html',
-  styleUrls: ['datatype-drop-dialog.component.scss']
-})
-
-export class DialogDropDatatype {
-  constructor(  private store: Store<any>,
-                public dialogDropDtRef: MatDialogRef<DialogDropDatatype>,
-                @Inject(MAT_DIALOG_DATA) public data: any) { }
-
-  onClick(): void {
-    this.store.dispatch(new datatypeActions.DropDatatype(this.data.datatypeName));
-    this.dialogDropDtRef.close();
-  }
-
-  onNoClick(): void {
-    this.dialogDropDtRef.close();
-  }
-}
-
-export class DatatypeDataSource extends DataSource<any> {
-    private datatypes$: Observable<any>
-
-    constructor(private store: Store<any>) {
-      super();
-      this.datatypes$ = this.store.select(s => s.datatype.datatypes.results);
-    }
-
-    /** Connect function called by the table to retrieve one stream containing the data to render. */
-    connect(): Observable<Datatype[]> {
-        const displayDataChanges = [
-          this.datatypes$,
-        //  this._filterChange,
-        ];
-
-      return this.datatypes$;
-    }
-
-    disconnect() {}
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses-create-dialog.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses-create-dialog.component.html
deleted file mode 100755
index 5159e38..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses-create-dialog.component.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!--/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/-->
-<div class="dataverse-dialog">
-    <p mat-dialog-title>CREATE DATAVERSE</p>
-    <mat-dialog-content>
-        <p>GIVE A NAME TO THE NEW DATAVERSE</p>
-    </mat-dialog-content>
-    <mat-form-field>
-        <input matInput tabindex="0" [(ngModel)]="data.dataverseName">
-    </mat-form-field>
-    </div>
-    <div mat-dialog-actions>
-    <button mat-button [mat-dialog-close]="data.dataverseName" (click)="onClick()" tabindex="1">CREATE</button>
-    <button mat-button (click)="onNoClick()" tabindex="2">CANCEL</button>
-</div>
-
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses-create-dialog.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses-create-dialog.component.scss
deleted file mode 100755
index 6371068..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses-create-dialog.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-.dataverse-dialog {    
-    font-family: "Roboto Mono", monospace;
-    font-size: 0.80rem;
-    font-weight: 500;
-}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses-drop-dialog.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses-drop-dialog.component.html
deleted file mode 100755
index b546a70..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses-drop-dialog.component.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/-->
-<div class="dataverse-dialog">
-    <p mat-dialog-title>DROP DATAVERSE</p>
-    <mat-dialog-content>
-        <p>PLEASE GIVE THE NAME OF THE DATAVERSE TO DROP</p>
-    </mat-dialog-content>
-        <mat-form-field>
-            <input matInput tabindex="0" [(ngModel)]="data.dataverseName">
-        </mat-form-field>
-    <mat-dialog-actions>
-        <button mat-button (click)="onClick()" tabindex="1">DROP</button>
-        <button mat-button (click)="onNoClick()" tabindex="2">CANCEL</button>
-    </mat-dialog-actions>
-</div>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses-drop-dialog.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses-drop-dialog.component.scss
deleted file mode 100755
index 6371068..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses-drop-dialog.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-.dataverse-dialog {    
-    font-family: "Roboto Mono", monospace;
-    font-size: 0.80rem;
-    font-weight: 500;
-}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses.component.html
deleted file mode 100755
index 4099704..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses.component.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/ -->
-<div class="container" (click)="onClick()">
-  <div class="master">
-    <mat-card class="dataverses-card">
-      <mat-toolbar color="primary" class="dataverses-selector">
-          <mat-icon class="icon">menu</mat-icon>
-          <span>DATAVERSES - METADATA</span>
-          <span class="spacer"></span>
-      </mat-toolbar>
-      <mat-card-content class="dataverses-content">
-        <mat-table #table [dataSource]="dataSource" class="dataverses-table" *ngIf="loaded$ | async as ld">
-            <!-- Dataverse Name Column -->
-            <ng-container matColumnDef="DataverseName">
-              <mat-header-cell *matHeaderCellDef class="header-name-cell">Dataverse Name</mat-header-cell>
-              <mat-cell *matCellDef="let element" class="dataverse-name-cell">{{element.DataverseName}}</mat-cell>
-            </ng-container>
-
-            <!-- Data Format Column -->
-            <ng-container matColumnDef="DataFormat">
-              <mat-header-cell *matHeaderCellDef class="header-dataformat-cell">Data Format</mat-header-cell>
-              <mat-cell *matCellDef="let element" class="dataverse-dataformat-cell">{{element.DataFormat}}</mat-cell>
-            </ng-container>
-
-            <!-- Pending Ops -->
-            <ng-container matColumnDef="PendingOp">
-              <mat-header-cell *matHeaderCellDef class="header-pendingop-cell">Pending Ops</mat-header-cell>
-              <mat-cell *matCellDef="let element" class="dataverse-pendingop-cell">{{element.PendingOp}}</mat-cell>
-            </ng-container>
-
-            <!-- Timestamp Column -->
-            <ng-container matColumnDef="Timestamp">
-              <mat-header-cell *matHeaderCellDef class="header-timestamp-cell">Timestamp</mat-header-cell>
-              <mat-cell *matCellDef="let element" class="dataverse-timestamp-cell">{{element.Timestamp}}</mat-cell>
-            </ng-container>
-
-            <mat-header-row *matHeaderRowDef="['DataverseName',  'DataFormat', 'Timestamp']"></mat-header-row>
-            <mat-row *matRowDef="let row; columns: ['DataverseName', 'DataFormat', 'Timestamp'];"
-              [ngClass]="{'highlight': selectedRowIndex == row.id}"
-              (click)="highlight(row)">
-            </mat-row>
-        </mat-table>
-      </mat-card-content>
-      <mat-card-actions class="actions">
-          <button class="refresh-button" mat-button (click)="openCreateDataverseDialog()">CREATE</button>
-          <button class="refresh-button" mat-button (click)="openDropDataverseDialog()">DROP</button>
-          <span class="error-message">{{errorMessage}}</span>
-          <span class="spacer"></span>
-          <button class="refresh-button" mat-button (click)="getDataverse()">REFRESH</button>
-      </mat-card-actions>
-    </mat-card>
-  <awc-query-metadata #querymetadata class="query"></awc-query-metadata>  
-  </div>
-  <div class="detail">
-      <mat-card class="dataverses-details-card">
-          <mat-toolbar color="primary" class="dataverses-selector">
-              <mat-icon class="icon">menu</mat-icon>
-              <span>DATAVERSE - METADATA - DETAILS</span>
-              <span class="spacer"></span>
-          </mat-toolbar>
-          <mat-card-content class="dataverses-content output">
-            <span><pre>{{output}}</pre></span>
-          </mat-card-content>
-        </mat-card>
-  </div>
-</div>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses.component.scss
deleted file mode 100755
index 2821766..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses.component.scss
+++ /dev/null
@@ -1,259 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-$dataverses-spacing-unit: 8px;
-
-.container {
-  display: flex;
-	flex-flow: row;
-	padding: 0;
-  margin: 0;
-}
-
-.master {
-  width: 60%;
-}
-
-.detail {
-  width: 40%;
-}
-
-.dataverses-card {
-  display: flex;
-	flex-flow: column;
-  padding: 0;
-  margin:0 auto;
-  margin-top: ($dataverses-spacing-unit * 2);
-  min-height: 450px;
-  max-height: 450px;
-  //min-width: 98%; //(100vw / 2);
-  //max-width: 98%; // (100vw / 2);
-  width: 95%; // 98%;
-  overflow: hidden;
-}
-
-.dataverses-details-card {
-	display: flex;
-	flex-flow: column;
-  padding: 0;
-  margin:0 auto;
-  margin: ($dataverses-spacing-unit * 2);
-  min-height: 716px;
-  max-height: 716px;
-  //min-width: 95%; //(100vw / 2);
-  //max-width: 95%; // (100vw / 2);
-  overflow: hidden;
-}
-
-.icon {
-	padding: 0 14px 0 0;
-	margin: 0;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-.dataverses-selector {
-	min-height: 42px;
-	max-height: 42px;
-	justify-content: center;
-	font-size: 0.80rem;
-  font-weight: 500;
-  background-color: white;
-	border: 1px solid rgba(54, 147, 209, 0.87);
-}
-
-//.metadata-content-area {
-//	padding: ($dataverses-spacing-unit * 2);
-//	margin: 0;
-//	overflow: auto;
-//}
-
-
-.dataverses-content {
-  position:relative;
-  top: 0;
-  left: 0;
-  margin: 0px;
-  padding: 0px;
-  overflow: auto;
-}
-
-.dataverses-table {
-  margin: $dataverses-spacing-unit !important;
-  height: 330px;
-  overflow: auto;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-.example-header {
-  min-height: 64px;
-  display: flex;
-  align-items: center;
-  padding-left: 24px;
-  font-size: 20px;
-}
-
-.mat-table {
-  overflow: auto;
-}
-
-.customWidthClass{
-   flex: 0 0 75px;
-}
-
-.mat-column-DataverseName {
-  text-align: left;
-}
-
-.mat-header-cell.mat-column-DataverseName {
-  text-align: left;
-}
-
-.mat-cell.mat-column-DataverseName {
-  text-align: left;
-}
-
-.header-name-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $dataverses-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($dataverses-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 150px;
-  text-transform: uppercase;
-}
-
-.header-dataformat-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $dataverses-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($dataverses-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 400px;
-  text-transform: uppercase;
-}
-
-.header-timestamp-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $dataverses-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($dataverses-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 250px;
-  text-transform: uppercase;
-}
-
-.dataverse-name-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $dataverses-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($dataverses-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 150px;
-}
-
-.dataverse-dataformat-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $dataverses-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($dataverses-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 400px;
-}
-
-.dataverse-timestamp-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $dataverses-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($dataverses-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 250px;
-}
-
-.example-header {
-  min-height: 56px;
-  max-height: 56px;
-  display: flex;
-  align-items: center;
-  padding: 8px 24px 0;
-  font-size: 20px;
-  justify-content: space-between;
-  border-bottom: 1px solid transparent;
-}
-
-.mat-form-field {
-  font-size: 14px;
-  flex-grow: 1;
-  margin-top: 8px;
-}
-
-.example-no-results {
-  display: flex;
-  justify-content: center;
-  padding: 24px;
-  font-size: 12px;
-  font-style: italic;
-}
-
-.actions {
-  display: flex;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  color: rgba(54, 147, 209, 0.87);
-  padding: $dataverses-spacing-unit;
-  margin: 0;
-}
-
-.error-message {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  color: rgba(209, 54, 54, 0.87);
-  padding-top: 10px;  
-  padding-left: 20px;
-  text-overflow: ellipsis;
-}
-
-.highlight{
-  background: #42A948; /* green */
-}
-
-.output {
-  padding-left: ($dataverses-spacing-unit * 2);
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses.component.ts
deleted file mode 100755
index 981f029..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/dataverses-collection/dataverses.component.ts
+++ /dev/null
@@ -1,234 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { Component, ChangeDetectionStrategy, Inject, OnInit, AfterViewChecked, AfterViewInit, Input} from '@angular/core';
-import { Dataverse } from '../../../shared/models/asterixDB.model'
-import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
-import * as dataverseActions from '../../../shared/actions/dataverse.actions'
-import { ElementRef, ViewChild} from '@angular/core';
-import { DataSource } from '@angular/cdk/collections';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/observable/fromEvent';
-import { Subscription } from "rxjs/Rx";
-import * as fromRoot from '../../../shared/reducers/dataverse.reducer';
-import { State } from '../../../shared/reducers/dataverse.reducer';
-import { MatPaginator } from '@angular/material';
-import { SelectionModel } from '@angular/cdk/collections';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
-
-@Component({
-  selector: 'awc-dataverses',
-  templateUrl: 'dataverses.component.html',
-  styleUrls: ['dataverses.component.scss'],
-})
-
-export class DataverseCollection implements OnInit, AfterViewChecked, AfterViewInit {
-  dataverseName: string;
-  displayedColumns = ['DataverseName', 'Dataformat', 'Timestamp', 'PendingOp'];
-  dataSource: DataversesDataSource | null;
-  loaded$: Observable<any>;
-  selection = new SelectionModel<string>(true, []);
-  @Input('message') errorMessage: string = ""
-  dvName = "";
-
-  constructor(private store: Store<any>, public dialog: MatDialog) {
-    this.loaded$ = this.store.select('dataverse');
-    
-    // Watching the name of the latest created dataset
-    this.store.select(s => s.dataverse.createDataverseName).subscribe((data: any) => {
-      this.dvName = data;
-    })
-
-    // Watching for the success message in a drop dataset operation 
-    this.store.select(s => s.dataverse.dropDataverseName).subscribe((data: any) => {
-      this.dvName = data;
-    })
-
-    // Watching for the if there is a change in the collection
-		this.store.select(s => s.dataverse.createDataverseSuccess).subscribe((data: any) => {
-      if (data === true) {
-        this.getDataverse();
-        this.errorMessage = "SUCCEED: CREATED DATAVERSE " + this.dvName + " ";
-      }  
-    })
-
-    // Watching for the if there is a error in a create dataverse operation 
-		this.store.select(s => s.dataverse.createDataverseError).subscribe((data: any) => {
-      if (data.errors) {
-        this.errorMessage = "ERROR: " + data.errors[0].msg;
-      }  
-    })
-
-    // Watching for the if there is a change in the collection
-		this.store.select(s => s.dataverse.dropDataverseSuccess).subscribe((data: any) => {
-      if (data === true) {
-        this.getDataverse();
-        this.errorMessage = "SUCCEED: DROP DATAVERSE " + this.dvName;
-      }  
-    })
-
-    // Watching for the if there is a error in a drop dataverse operation 
-		this.store.select(s => s.dataverse.dropDataverseError).subscribe((data: any) => {
-      if (data.errors) {
-        this.errorMessage = "ERROR: " + data.errors[0].msg;
-      }  
-    })
-  }
-
-  getDataverse() {
-    // Triggers the effect to refresg the dataverse
-    this.store.dispatch(new dataverseActions.SelectDataverses('-'));
-  }
-
-  ngOnInit() {
-    // Assign the datasource for the table 
-    this.dataSource = new DataversesDataSource(this.store);
-  }
-
-  ngAfterViewChecked() {}
-
-  ngAfterViewInit() {}
-
-
-  /* 
-  * opens the create dataverse dialog
-  */
-  openCreateDataverseDialog(): void {
-    let dialogRef = this.dialog.open(DialogCreateDataverse, {
-      width: '420px',
-      data: { name: this.dataverseName }
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      //reference code
-      //this.dvName = result;
-    });
-  }
-
-  /* 
-  * opens the drop dataverse dialog
-  */
-  openDropDataverseDialog(): void {
-    let dialogRef = this.dialog.open(DialogDropDataverse, {
-      width: '420px',
-      data: { name: this.dataverseName }
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      this.dataverseName = result;
-    });
-  }
-
-   /* 
-  * Clean up the error message on the screen
-  */
-  onClick(): void {
-    this.errorMessage = "";
-  }
-
-  selectedRowIndex: number = -1;
-
-  /* Showing all the datatype metadata information */
-  output: any;
-  
-  highlight(row){
-    this.output = JSON.stringify(row, null, 2);
-  }
-
-  @ViewChild('querymetadata') inputQuery;
-
-  /* Cleans up error message */
-  cleanUp() {
-    this.errorMessage = "";   
-    // Cascading   
-    this.inputQuery.cleanUp();  
-  }
-}
-
-@Component({
-  selector: 'dataverse-create-dialog',
-  templateUrl: 'dataverses-create-dialog.component.html',
-  styleUrls: ['dataverses-create-dialog.component.scss']
-})
-
-export class DialogCreateDataverse {
-  constructor(  private store: Store<any>,
-                public dialogCreateDvRef: MatDialogRef<DialogCreateDataverse>,
-                @Inject(MAT_DIALOG_DATA) public data: any) { }
-
-  onClick(): void {
-    this.store.dispatch(new dataverseActions.CreateDataverse(this.data.dataverseName));
-    this.dialogCreateDvRef.close(this.data.dataverseName);
-  }
-
-  onNoClick(): void {
-    this.dialogCreateDvRef.close();
-  }
-}
-
-@Component({
-  selector: 'dataverse-drop-dialog',
-  templateUrl: 'dataverses-drop-dialog.component.html',
-  styleUrls: ['dataverses-drop-dialog.component.scss']
-})
-
-export class DialogDropDataverse {
-  constructor(  private store: Store<any>,
-                public dialogDropDvRef: MatDialogRef<DialogDropDataverse>,
-                @Inject(MAT_DIALOG_DATA) public data: any) { }
-
-  onClick(): void {
-    this.store.dispatch(new dataverseActions.DropDataverse(this.data.dataverseName));
-    this.dialogDropDvRef.close(this.data.dataverseName);
-  }
-
-  onNoClick(): void {
-    this.dialogDropDvRef.close();
-  }
-}
-
-/**
- * Data source to provide what data should be rendered in the table. Note that the data source
- * can retrieve its data in any way. In this case, the data source is provided a reference
- * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
- * the underlying data. Instead, it only needs to take the data and send the table exactly what
- * should be rendered.
- */
- export class DataversesDataSource extends DataSource<any> {
-    dataverse$: Observable<any>
-    _filterChange = new BehaviorSubject('');
-    get filter(): string { return this._filterChange.value; }
-    set filter(filter: string) { this._filterChange.next(filter); }
-
-    constructor(private store: Store<any>) {
-      super();
-      this.dataverse$ = this.store.select(s => s.dataverse.dataverses.results);
-    }
-
-    /** Connect function called by the table to retrieve one stream containing the data to render. */
-    connect(): Observable<Dataverse[]> {
-        const displayDataChanges = [
-          this.dataverse$,
-        ];
-
-      return this.dataverse$;
-    }
-
-    disconnect() {}
-  }
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-create-dialog.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-create-dialog.component.html
deleted file mode 100755
index aca06fd..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-create-dialog.component.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!--/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/-->
-<!-- Place holder for future expansion -->
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-drop-dialog.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-drop-dialog.component.html
deleted file mode 100755
index 5e675d8..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-drop-dialog.component.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/-->
-<div class="index-dialog">
-    <p mat-dialog-title>DROP INDEX</p>
-    <mat-dialog-content>
-        <p>PLEASE GIVE THE DATAVERSENAME.INDEXNAME OF THE INDEX TO DROP</p>
-    </mat-dialog-content>
-        <mat-form-field>
-            <input matInput tabindex="0" [(ngModel)]="data.indexName">
-        </mat-form-field>
-    <mat-dialog-actions>
-        <button mat-button (click)="onClick()" tabindex="1">DROP</button>
-        <button mat-button (click)="onNoClick()" tabindex="2">CANCEL</button>
-    </mat-dialog-actions>
-</div>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-drop-dialog.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-drop-dialog.component.scss
deleted file mode 100755
index 039dcf1..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-drop-dialog.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-.index-dialog {    
-    font-family: "Roboto Mono", monospace;
-    font-size: 0.80rem;
-    font-weight: 500;
-}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/indexes.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/indexes.component.html
deleted file mode 100755
index c63b254..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/indexes.component.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!--/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/ -->
-<div class="container"  (click)="onClick()">
-  <div class="master">
-    <mat-card class="indexes-card" *ngIf="loaded$ | async as ld">
-      <mat-toolbar color="primary" class="indexes-selector">
-          <mat-icon class="icon">menu</mat-icon>
-          <span>INDEXES - METADATA</span>
-          <span class="spacer"></span>
-      </mat-toolbar>
-      <mat-card-content class="indexes-content">
-        <mat-table #table [dataSource]="dataSource" class="indexes-table">
-            <!-- Dataverse Name -->
-            <ng-container matColumnDef="DataverseName">
-              <mat-header-cell *matHeaderCellDef class="header-dataversename-cell"> Dataverse Name </mat-header-cell>
-              <mat-cell *matCellDef="let element" class="indexes-dataversename-cell"> {{element.DataverseName}} </mat-cell>
-            </ng-container>
-
-            <!-- Dataset Name -->
-            <ng-container matColumnDef="DatasetName">
-              <mat-header-cell *matHeaderCellDef class="header-datasetname-cell"> Dataset Name </mat-header-cell>
-              <mat-cell *matCellDef="let element" class="indexes-datasetname-cell"> {{element.DatasetName}} </mat-cell>
-            </ng-container>
-
-            <!-- Index Name -->
-            <ng-container matColumnDef="IndexName">
-              <mat-header-cell *matHeaderCellDef class="header-indexname-cell"> Index Name </mat-header-cell>
-              <mat-cell *matCellDef="let element" class="indexes-indexname-cell"> {{element.IndexName}} </mat-cell>
-            </ng-container>
-
-            <!-- Index Structure -->
-            <ng-container matColumnDef="IndexStructure">
-              <mat-header-cell *matHeaderCellDef class="header-indexestructure-cell"> Index Structure </mat-header-cell>
-              <mat-cell *matCellDef="let element" class="indexes-indexstructure-cell"> {{element.IndexStructure}} </mat-cell>
-            </ng-container>
-
-            <!-- IsPrimary  -->
-            <ng-container matColumnDef="IsPrimary">
-              <mat-header-cell *matHeaderCellDef class="header-isprimary-cell"> Is Primary </mat-header-cell>
-              <mat-cell *matCellDef="let element" class="indexes-isprimary-cell"> {{element.IsPrimary}} </mat-cell>
-            </ng-container>
-
-            <!-- Timestamp Column -->
-            <ng-container matColumnDef="Timestamp">
-              <mat-header-cell *matHeaderCellDef class="header-timestamp-cell"> Timestamp </mat-header-cell>
-              <mat-cell *matCellDef="let element" class="indexes-timestamp-cell"> {{element.Timestamp}} </mat-cell>
-            </ng-container>
-
-            <!-- Pending Op Column -->
-            <ng-container matColumnDef="PendingOp">
-              <mat-header-cell *matHeaderCellDef class="header-pendingop-cell"> PendingOp </mat-header-cell>
-              <mat-cell *matCellDef="let element" class="indexes-dataverse-cell"> {{element.PendingOp}} </mat-cell>
-            </ng-container>
-
-            <mat-header-row *matHeaderRowDef="['IndexName', 'DatasetName', 'DataverseName', 'IndexStructure', 'IsPrimary', 'Timestamp']"></mat-header-row>
-            <mat-row *matRowDef="let row; columns: ['IndexName', 'DatasetName', 'DataverseName', 'IndexStructure', 'IsPrimary', 'Timestamp'];"
-              [ngClass]="{'highlight': selectedRowIndex == row.id}"
-              (click)="highlight(row)">
-            </mat-row>
-        </mat-table>
-      </mat-card-content>
-      <mat-card-actions class="actions">
-          <button class="refresh-button" mat-button (click)="openDropIndexDialog()">DROP</button>
-          <span class="error-message">{{errorMessage}}</span>
-          <span class="spacer"></span>
-          <button class="refresh-button" mat-button (click)="getIndexes()">REFRESH</button>
-      </mat-card-actions>
-    </mat-card>
-    <awc-query-metadata #querymetadata class="query"></awc-query-metadata>  
-  </div>
-  <div class="detail">
-      <mat-card class="indexes-details-card">
-          <mat-toolbar color="primary" class="indexes-selector">
-              <mat-icon class="icon">menu</mat-icon>
-              <span>INDEX - METADATA - DETAILS</span>
-              <span class="spacer"></span>
-          </mat-toolbar>
-          <mat-card-content class="indexes-content output">
-            <span><pre>{{output}}</pre></span>
-          </mat-card-content>
-        </mat-card>
-  </div>
-</div>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/indexes.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/indexes.component.scss
deleted file mode 100755
index 15b364a..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/indexes.component.scss
+++ /dev/null
@@ -1,398 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-$indexes-spacing-unit: 8px;
-
-.container {
-  display: flex;
-	flex-flow: row;
-	padding: 0;
-  margin: 0;
-}
-
-.master {
-  width: 60%;
-}
-
-.detail {
-  width: 40%;
-}
-
-.indexes-card {
-	display: flex;
-	flex-flow: column;
-  padding: 0;
-  margin:0 auto;
-  margin-top: ($indexes-spacing-unit * 2);
-  min-height: 450px;
-  max-height: 450px;
-  //min-width: 98%; //(100vw / 2);
-  //max-width: 98%; // (100vw / 2);
-  width: 95%; // 98%;
-  overflow: hidden;
-}
-
-.indexes-details-card {
-	display: flex;
-	flex-flow: column;
-  padding: 0;
-  margin:0 auto;
-  margin: ($indexes-spacing-unit * 2);
-  min-height: 716px;
-  max-height: 716px;
-  //min-width: 95%; //(100vw / 2);
-  //max-width: 95%; // (100vw / 2);
-  overflow: hidden;
-}
-
-.icon {
-	padding: 0 14px 0 0;
-	margin: 0;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-.indexes-selector {
-	min-height: 42px;
-	max-height: 42px;
-	justify-content: center;
-	//align-items: center;
-	font-size: 0.80rem;
-  font-weight: 500;
-  background-color: white;
-	border: 1px solid rgba(54, 147, 209, 0.87);
-}
-
-.indexes-content {
-  position:relative;
-  top: 0;
-  left: 0;
-  margin: 0px;
-  padding: 0px;
-  overflow: auto;
-}
-
-.indexes-table {
-  margin: $indexes-spacing-unit !important;
-  height: 330px;
-  overflow: auto;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-//.indexes-toolbar {
-//	display: block;
-//  min-height: 56px;
-//	height: 56px;
-	//width: 250px;
-//  font-size: 12px;
-//  white-space: nowrap;
-//  overflow: hidden;
-//  text-overflow: ellipsis;
-//	letter-spacing: 1px;
-//	font-weight: 400;
-//	background: rgba(0,0,1, .80);
-//}
-
-.example-header {
-  min-height: 64px;
-  display: flex;
-  align-items: center;
-  padding-left: 24px;
-  font-size: 20px;
-}
-
-.mat-table {
-  overflow: auto;
-}
-
-.customWidthClass{
-   flex: 0 0 75px;
-}
-
-.mat-column-DataverseName {
-  text-align: left;
-}
-
-.mat-header-cell.mat-column-DataverseName {
-  text-align: left;
-}
-
-.mat-cell.mat-column-DataverseName {
-  text-align: left;
-}
-
-.header-dataversename-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 150px;
-}
-
-.indexes-dataversename-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 150px;
-}
-
-.header-datasetname-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 150px;
-}
-
-.indexes-datasetname-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 150px;
-}
-
-.header-indexname-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 150px;
-}
-
-.indexes-indexname-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 150px;
-}
-
-.header-indexestructure-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: center;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 150px;
-}
-
-.indexes-indexstructure-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: center;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 150px;
-}
-
-.header-isprimary-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: center;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 150px;
-}
-
-.indexes-isprimary-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: center;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 150px;
-}
-
-.header-timestamp-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 150px;
-}
-
-.indexes-timestamp-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 150px;
-}
-
-.header-groupname-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 150px;
-}
-
-.indexes-groupname-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 150px;
-}
-
-.header-timestamp-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  text-transform: uppercase;
-  flex: 0 0 250px;
-}
-
-.indexes-timestamp-cell {
-  border: none;
-  font-size: 12px;
-  letter-spacing: 1px;
-  line-height: $indexes-spacing-unit * 3;
-  font-weight: 400;
-  margin: 0;
-  padding: 0 ($indexes-spacing-unit * 2);
-  text-align: left;
-  color: hsla(0,0%,0%,.87);
-  flex: 0 0 250px;
-}
-
-.example-header {
-  min-height: 56px;
-  max-height: 56px;
-  display: flex;
-  align-items: center;
-  padding: 8px 24px 0;
-  font-size: 20px;
-  justify-content: space-between;
-  border-bottom: 1px solid transparent;
-}
-
-.mat-form-field {
-  font-size: 14px;
-  flex-grow: 1;
-  margin-top: 8px;
-}
-
-.example-no-results {
-  display: flex;
-  justify-content: center;
-  padding: 24px;
-  font-size: 12px;
-  font-style: italic;
-}
-
-.actions {
-  display: flex;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  color: rgba(54, 147, 209, 0.87);
-  padding: $indexes-spacing-unit;
-  margin: 0;
-}
-
-.error-message {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  color: rgba(209, 54, 54, 0.87);
-  padding-top: 10px;  
-  padding-left: 20px;
-  text-overflow: ellipsis;
-}
-
-.output {
-  padding-left: ($indexes-spacing-unit * 2);
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/indexes.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/indexes.component.ts
deleted file mode 100755
index 2913470..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/indexes.component.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { Component, Inject, Input } from '@angular/core';
-import { Index } from '../../../shared/models/asterixDB.model'
-import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
-import * as indexActions from '../../../shared/actions/index.actions'
-import { ElementRef, ViewChild} from '@angular/core';
-import {DataSource} from '@angular/cdk/collections';
-import {BehaviorSubject} from 'rxjs/BehaviorSubject';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/observable/fromEvent';
-import { Subscription } from "rxjs/Rx";
-import { State } from '../../../shared/reducers/index.reducer';
-import { MatPaginator } from '@angular/material';
-import { SelectionModel } from '@angular/cdk/collections';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
-
-/**
- * Root component
- * Defines our application's layout
- */
-@Component({
-  selector: 'awc-indexes',
-  templateUrl: 'indexes.component.html',
-  styleUrls: ['indexes.component.scss']
-})
-
-export class IndexCollection {
-  displayedColumns = "['dataverseName', 'datasetName', 'indexName', 'indexStructure', 'isPrimary', 'timestamp', 'pendingOp']"
-  /*
-  dataverseName: string;
-  datasetName: string;
-  indexName: string;
-  indexStructure: string;
-  searchKey: string[];
-  isPrimary: boolean;
-  timestamp: string;
-  pendingOp: string;
-  */
-  indexName: string;
-  dataSource: IndexDataSource | null;
-  loaded$: Observable<any>;
-  @Input('message') errorMessage: string = ""
-  
-  idxName = "";
-
-  constructor(private store: Store<any>, public dialog: MatDialog) {
-    this.loaded$ = this.store.select('index');
-    // Watching the name of the latest create index
-    this.store.select(s => s.index.createIndexName).subscribe((data: any) => {
-      this.idxName = data;
-    })
-
-    // Watching the name of the latest drop index
-    this.store.select(s => s.index.dropIndexName).subscribe((data: any) => {
-      this.idxName = data;
-    })
-
-    // Watching for the if there is a change in the collection
-		this.store.select(s => s.index.createIndexSuccess).subscribe((data: any) => {
-      if (data === true) {
-        this.getIndexes();
-        this.errorMessage = "SUCCEED: CREATE INDEX " + this.idxName;
-      }  
-    })
-
-    // Watching for the if there is a error in a create index operation 
-		this.store.select(s => s.index.createIndexError).subscribe((data: any) => {
-      if (data.errors) {
-        this.errorMessage = "ERROR: " + data.errors[0].msg;
-      }  
-    })
-
-    // Watching for the success message in a drop index operation 
-    this.store.select(s => s.index.dropIndexSuccess).subscribe((data: any) => {
-      if (data === true) {
-        this.getIndexes();
-        this.errorMessage = "SUCCEED: DROP INDEX " + this.idxName;
-      }  
-    })
-
-    // Watching for the if there is a error in a drop index operation 
-		this.store.select(s => s.index.dropIndexError).subscribe((data: any) => {
-      if (data.errors) {
-        this.errorMessage = "ERROR: " + data.errors[0].msg;
-      }  
-    })
-  }
-
-  getIndexes() {
-    // Triggers the effect to refresg the indexes
-    this.store.dispatch(new indexActions.SelectIndexes('-'));
-  }
-
-  ngOnInit() {
-    // Assign the datasource for the table 
-    this.dataSource = new IndexDataSource(this.store);
-  }  
-
-  /* 
-  * opens the create index dialog
-  */
-  openCreateIndexDialog(): void {
-    let dialogRef = this.dialog.open(DialogCreateIndex, {
-      width: '420px',
-      data: { name: this.indexName }
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      this.indexName = result;
-    });
-  }
-
-
-   /* 
-  * opens the drop index dialog
-  */
-  openDropIndexDialog(): void {
-    let dialogRef = this.dialog.open(DialogDropIndex, {
-      width: '420px',
-      data: { name: this.indexName }
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      this.indexName = result;
-    });
-  }
-
-  /* 
-  * Clean up the error message on the screen
-  */
-  onClick(): void {
-    this.errorMessage = "";
-  }
-
-   /* Showing all the index metadata information */
-   output: any;
-   
-   highlight(row){
-     this.output = JSON.stringify(row, null, 2);
-   }
-
-  @ViewChild('querymetadata') inputQuery;
-
-  /* Cleans up error message */
-  cleanUp() {
-    this.errorMessage = ""; 
-    // Cascading   
-    this.inputQuery.cleanUp(); 
-  }
-}
-
-@Component({
-  selector: 'index-create-dialog',
-  templateUrl: 'index-create-dialog.component.html',
-  styleUrls: ['index-create-dialog.component.scss']
-})
-
-export class DialogCreateIndex {
-  constructor(  private store: Store<any>,
-                public dialogCreateIdxRef: MatDialogRef<DialogCreateIndex>,
-                @Inject(MAT_DIALOG_DATA) public data: any) { }
-
-  onClick(): void {
-    this.store.dispatch(new indexActions.CreateIndex(this.data.indexName));
-    this.dialogCreateIdxRef.close();
-  }
-
-  onNoClick(): void {
-    this.dialogCreateIdxRef.close();
-  }
-}
-
-@Component({
-  selector: 'index-drop-dialog',
-  templateUrl: 'index-drop-dialog.component.html',
-  styleUrls: ['index-drop-dialog.component.scss']
-})
-
-export class DialogDropIndex {
-  constructor(  private store: Store<any>,
-                public dialogDropIdxRef: MatDialogRef<DialogDropIndex>,
-                @Inject(MAT_DIALOG_DATA) public data: any) { }
-
-  onClick(): void {
-    console.log(this.data.indexName)
-    this.store.dispatch(new indexActions.DropIndex(this.data.indexName));
-    this.dialogDropIdxRef.close();
-  }
-
-  onNoClick(): void {
-    this.dialogDropIdxRef.close();
-  }
-}
-
-export class IndexDataSource extends DataSource<any> {
-  private indexes$: Observable<any>
-
-  constructor(private store: Store<any>) {
-    super();
-    this.indexes$ = this.store.select(s => s.index.indexes.results);
-  }
-
-  /** Connect function called by the table to retrieve one stream containing the data to render. */
-  connect(): Observable<Index[]> {
-      const displayDataChanges = [
-        this.indexes$,
-      ];
-
-    return this.indexes$;
-  }
-
-  disconnect() {}
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/input-metadata.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/input-metadata.component.html
deleted file mode 100755
index 939ab06..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/input-metadata.component.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/ -->
-<mat-card class="input-card" (click)="onClick()">
-    <mat-toolbar color="primary" class="input-selector">
-            <mat-icon class="toolbar-icon">menu</mat-icon>
-            <span>INPUT: SQL++</span>	
-            <span class="spacer"></span>
-    </mat-toolbar>
-    <mat-card-content class="content-area">
-        <div class="codemirror-container">
-           <codemirror-metadata class="code" [(ngModel)]="queryMetadataString" [config]="codemirrorMetadataConfig">
-            </codemirror-metadata>  
-        </div>
-    </mat-card-content>
-    <mat-card-actions class="actions">
-        <button mat-button class="query-button" (click)="executeQuery()">RUN</button>
-        <span class="error-message">{{errorMessage}}</span>
-        <span class="spacer"></span>
-    </mat-card-actions>
-</mat-card>
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/input-metadata.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/input-metadata.component.scss
deleted file mode 100755
index b98080c..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/input-metadata.component.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-$query-spacing-unit: 8px;
-
-.input-card {
-	display: flex;
-	flex-flow: column;
-	padding: 0;
-	margin: 0 auto;
-	margin-top: $query-spacing-unit;
-	height: 250px;
-	width: 95%;
-	overflow: hidden;
-}
-  
-.toolbar-icon {
-	padding: 0 14px 0 0;	
-	margin: 0;
-}
-
-.spacer {
-	flex: 1 1 auto;
-}
-  
-.input-selector {
-	max-height: 42px;
-	min-height: 42px;
-	justify-content: center;
-	//align-items: center;
-	font-size: 0.80rem;
-	font-weight: 500;
-	background-color: white;
-	border: 1px solid rgba(54, 147, 209, 0.87);
-}
-
-.content-area {
-	position: relative;
-	color: hsla(0,0%,0%,.87);
-	height: 120px;
-	padding: 0;
-	margin: $query-spacing-unit * 2;
-	overflow: none;
-}
-
-.codemirror-container {
-	width: 100%;
-	height: 100%;
-	padding: 0;
-	margin: 0;
-	font-size: 14px;
-	line-height: 1.8;
-}
-
-.actions {
-	border-top: 1px solid rgba(0, 0, 0, 0.1);
-	color: rgba(54, 147, 209, 0.87);
-	padding: $query-spacing-unit;
-	margin: 0;
-}
-
-.error-message {
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-	color: rgba(209, 54, 54, 0.87);
-	padding-top: 10px;  
-	padding-left: 20px;
-	text-overflow: ellipsis;
-}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/input-metadata.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/input-metadata.component.ts
deleted file mode 100755
index 06b9375..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/input-metadata.component.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import { Store } from '@ngrx/store';
-import * as sqlQueryActions from '../../shared/actions/query.actions'
-import * as dataverseActions from '../../shared/actions/dataverse.actions'
-import * as datasetActions from '../../shared/actions/dataset.actions'
-import * as datatypeActions from '../../shared/actions/datatype.actions'
-import * as indexActions from '../../shared/actions/index.actions'
-
-
-import * as CodeMirror from 'codemirror';
-
-/*
- * Query metadata component
- * has editor (codemirror) for writing some query
- */
-@Component({
-	moduleId: module.id,
-	selector: 'awc-query-metadata',
-	templateUrl:'input-metadata.component.html',
-	styleUrls: ['input-metadata.component.scss'],
-})
-
-export class InputQueryMetadataComponent {
-	private dataverses$: Observable<any>;
-	private datatypes$: Observable<any>;
-	private datasets$: Observable<any>;
-	private indexes$: Observable<any>;
-	dataverses = [];
-	datatypes = [];
-	datasets = [];
-	indexes = [];
-	queryMetadataString: string = "";
-	loaded$: Observable<any>;
-	errorMessage: string = "";
-
-  /**
-  * Initialize codemirror
-  */
-  codemirrorMetadataConfig = 	{ 	mode: "asterix",
-    //lineNumbers: true,
-    lineWrapping: true,
-    showCursorWhenSelecting: true,
-    autofocus: true
-  };
-
-	constructor(private store: Store<any>, private changeDetector: ChangeDetectorRef) {
-		this.store.select("sqlMetadataQuery").subscribe((data: any) => {
-			if (data.success === false){
-				if (data.sqlQueryMetadataError.errors){
-					this.errorMessage = "ERROR: " + data.sqlQueryMetadataError.errors[0].msg
-					this.changeDetector.detectChanges();
-				}
-			} else {
-				this.errorMessage = "SUCCEED";
-
-				// Refresh the tables automatically
-				let stringQuery = data.sqlQueryMetadataString;
-				stringQuery = stringQuery.toUpperCase();
-
-				if (stringQuery.includes("CREATE DATAVERSE") || stringQuery.includes("DROP DATAVERSE") ){
-    				this.store.dispatch(new dataverseActions.SelectDataverses('-'));
-				}
-				else if (stringQuery.includes("CREATE DATASET") || stringQuery.includes("DROP DATASET")){
-    				this.store.dispatch(new datasetActions.SelectDatasets('-'));
-				}
-				else if (stringQuery.includes("CREATE TYPE") || stringQuery.includes("DROP TYPE")){
-    				this.store.dispatch(new datatypeActions.SelectDatatypes('-'));
-				}
-				else if (stringQuery.includes("CREATE INDEX") || stringQuery.includes("DROP INDEX")){
-    				this.store.dispatch(new indexActions.SelectIndexes('-'));
-				}
-
-				this.changeDetector.detectChanges();
-			}
-
-		})
-	}
-
-	getQueryResults(queryMetadataString: string) {
-    	this.store.dispatch(new sqlQueryActions.ExecuteMetadataQuery(queryMetadataString));
-	  }
-
-	executeQuery() {
-		this.getQueryResults(this.queryMetadataString.replace(/\n/g, " "));
-		// Component View Refresh
-
-	}
-
-	onClick() {
-		this.errorMessage = "";
-	}
-
-	/* Cleans up error message */
-	cleanUp() {
-		this.errorMessage = "";
-	}
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/metadata-container.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/metadata-container.component.html
deleted file mode 100755
index a2f3a73..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/metadata-container.component.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/ -->
-<mat-tab-group class="metadata-menu" (selectedTabChange)="tabChange()">
-    <mat-tab label="DATAVERSES" class="submenu">
-        <div class="dataverses">
-            <awc-dataverses #dataverses [message]="message" class="dataverses"></awc-dataverses>
-        </div>
-    </mat-tab>
-    <mat-tab label="DATASETS">
-        <div class="datasets">
-            <awc-datasets #datasets [message]="message" class="datasets"></awc-datasets>
-        </div>  
-    </mat-tab>
-    <mat-tab label="DATATYPES">
-        <div class="datatypes">
-            <awc-datatypes #datatypes [message]="message" class="datatypes"></awc-datatypes>
-        </div>
-    </mat-tab>
-    <mat-tab label="INDEXES" class="indexes">
-        <div class="indexes">
-            <awc-indexes #indexes [message]="message" class="indexes"></awc-indexes>
-        </div>
-    </mat-tab>
-</mat-tab-group>
-
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/metadata-container.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/metadata-container.component.scss
deleted file mode 100755
index 3857d74..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/metadata-container.component.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
- .dataverses {
-    margin: 0;
-    min-height: 750px;
-    max-height: 750px;
-    width: 100%;
-    overflow: hidden;
- }
-
-.datasets {
-    margin: 0;
-    min-height: 750px;
-    max-height: 750px;
-    width: 100%;
-    overflow: hidden;
-}
-
-.datatypes {
-    margin: 0;
-    min-height: 750px;
-    max-height: 750px;
-    width: 100%;
-    overflow: hidden;
-}
-
-.indexes {
-    margin: 0;
-    min-height: 750px;
-    max-height: 750px;
-    width: 100%;
-    overflow: hidden;
-}
-
-.metadata-menu {    
-    /deep/ .mat-tab-label {
-        font-size: 0.80rem !important;
-        font-weight: 500  !important;
-    }
-}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/metadata-container.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/metadata-container.component.ts
deleted file mode 100755
index c8382cf..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/metadata-container.component.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { Component, ViewChild } from '@angular/core';
-
-@Component({
-	moduleId: module.id,
-	selector: 'awc-metadata-container',
-	templateUrl: 'metadata-container.component.html',
-	styleUrls: ['metadata-container.component.scss']
-})
-
-export class MetadataContainerComponent {
-
-	@ViewChild('dataverses') dataverses ;
-	@ViewChild('datasets') datasets ;
-	@ViewChild('datatypes') datatypes ;
-	@ViewChild('indexes') indexes ;
-	message = "";
-
-	constructor() {}
-
-	tabChange() {
-		this.indexes.cleanUp();
-		this.datasets.cleanUp();
-		this.datatypes.cleanUp();
-		this.dataverses.cleanUp();
-	}
-
-	
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/codemirror.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/codemirror.component.scss
deleted file mode 100755
index ba795c2..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/codemirror.component.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-/* -- Place holder for future expansion --> */
-code {
-	width: 100%;
-	height: 100%;
-	padding: 10%;
-    margin: 0; 
-    overflow-wrap: break-word;
-    word-break: break-all;
-    background-color: pink;
-}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/codemirror.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/codemirror.component.ts
deleted file mode 100755
index 91b711d..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/codemirror.component.ts
+++ /dev/null
@@ -1,237 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-/**
- * Integrating codemirror (using ng2-codemirror) with our application
- *
- * component from "https://runkit.com/npm/ng2-codemirror"
- *                "https://www.npmjs.com/package/ng2-codemirror"
- * copy component from /src/codemirror.component.ts
- * and modified for custom mode (asterix aql, sql++ code hilighting)
- *
- * therefore, actually we don't need to "npm install ng2-codemirror"
- *
- * Because on the outside of this component,
- * It was hard to access the codemirror instance that 'ng-codemirror' use
- * So, we copied the component in our application and modified it
- *
- * 'codemirror.js(^5.23.0)' is included in the 'index.html'
- * And in this component(codemirror.component.ts)
- * add statement like "declare var CodeMirror: any;"
- *
- * I don't know whether this is right way
- *
- * ref 1) usage : https://embed.plnkr.co/8e9gxss9u10VeFrv29Zt/
- * ref 2) custom mode : http://jsfiddle.net/TcqAf/99/
- * ref 3) integrating : http://stackoverflow.com/questions/37092142/integrating-codemirror-with-angular2-typescript
- * ref 3) integrating :  https://medium.com/@s_eschweiler/using-external-libraries-with-angular-2-87e06db8e5d1#.8ok74uvwg
- */
- import {
-   Component,
-   Input,
-   Output,
-   ElementRef,
-   ViewChild,
-   EventEmitter,
-   forwardRef,
-   AfterViewInit,
-   OnDestroy
- } from '@angular/core';
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
- import * as CodeMirror from 'codemirror';
-
-/**
- * CodeMirror component
- * Usage :
- * <codemirror [(ngModel)]="data" [config]="{...}"></codemirror>
- */
-@Component({
-  moduleId: module.id,
-  selector: 'codemirror',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => CodemirrorComponent),
-      multi: true
-    }
-  ],
-  styleUrls: ['codemirror.component.scss'],
-  template: `<textarea class="code" #host></textarea>`,//,
-})
-
-export class CodemirrorComponent implements AfterViewInit, OnDestroy {
-  @Input() config;
-  @Output() change = new EventEmitter();
-  @Output() focus = new EventEmitter();
-  @Output() blur = new EventEmitter();
-  @Output() instance = null;
-  @ViewChild('host') host;
-  _value = '';
-
-  /**
-   * Constructor
-   */
-  constructor(){
-		/**
-		 * Custom mode for AsterixDB
-		 */
-		CodeMirror.defineMode("asterix", function(){
-		  var KEYWORD_MATCH = [
-				// AQL
-				"drop", "dataverse", "dataset",
-				"if", "exists", "create",
-				"use", "type", "as", "closed",
-				"primary", "key",  "hints", "cardinality",
-				"index", "on", "btree", "rtree", "keyword",
-				"for", "in", "Metadata", "Dataset",
-				"return", "Index", "load", "using", "localfs", "path", "format",
-				// Query (not perfect)
-				"from", "in", "with", "group", "by", "select",
-				"let", "where", "order", "asc", "desc", "limit",
-				"keeping", "offset", "distinct", "or", "and",
-				// Built in functions (TODO)
-				// Built in functions (TODO)
-				// Built in functions (TODO)
-				// Asterix Data Model
-				// Primitive type
-				"boolean",
-				"tinyint", "smallint", "integer", "bigint",
-				"float", "double",
-				"string",
-				"binary", "hex", "base64",
-				"point", "line", "rectangle", "circle", "polygon",
-				"date", "time", "datetime", "duration", "interval", "uuid",
-				// Incomplete information type
-				"null", "missing",
-				// Derived type
-				// object {}, array [], multiset {{}}
-				// SQL++
-				"DROP", "DATAVERSE", "IF", "EXISTS", "CREATE", "USE", "TYPE", "AS", "DATASET", "PRIMARY", "KEY",
-				"INDEX", "SELECT", "VALUE", "INSERT", "INTO", "FROM", "WHERE", "AND", "SOME", "IN", "SATISFIES", "IS", "UNKNOWN", "NOT", "EVERY",
-				"GROUP", "BY", "ORDER", "DESC", "LIMIT", "OR", "SET", "DELETE", "LOAD", "USING",
-			];
-
-			//"(", ")","{{", "}}", "[", "]",	"{", "}",  ";", ",", ":","?", "=",
-      var VAR_MATCH = /[$][a-zA-Z]+(\d*)/;
-			var DOT_MATCH = /[.](\S)*/;
-			var DOUBLE_QUOTE_MATCH = /["].*["]/;
-			var SINGLE_QUOTE_MATCH = /['].*[']/;
-			var BREAK_POINT = /(\s)/;
-
-			return {
-				startState: function() {return {inString: false};},
-				token: function(stream, state) {
-					if (state.newLine == undefined)state.newLine = true;
-
-					//match variable reference
-					if (stream.match(VAR_MATCH)) {
-						return "variable";
-					}
-
-					if (stream.match(DOT_MATCH)) {
-						return "dot-variable";
-					}
-
-					//string variable match
-					if (stream.match(DOUBLE_QUOTE_MATCH)) {
-						return "string";
-					}
-					if (stream.match(SINGLE_QUOTE_MATCH)) {
-						return "string";
-					}
-
-					//keyword match
-					for (var i in KEYWORD_MATCH){
-						if (state.newLine && stream.match(KEYWORD_MATCH[i])){
-								return "keyword";
-						 }
-					}
-
-					if (stream.peek() === " " || stream.peek() === null){
-						state.newLine = true;
-					}else{
-						state.newLine = false;
-					}
-					stream.next();
-					return null;
-				}
-			};
-		});
-	}
-
-  get value() { return this._value; };
-
-  @Input() set value(v) {
-    if (v !== this._value) {
-      this._value = v;
-      this.onChange(v);
-    }
-  }
-
-  /**
-   * On component destroy
-   */
-  ngOnDestroy() {}
-
-  /**
-   * On component view init
-   */
-  ngAfterViewInit() {
-    this.config = this.config || {};
-    this.codemirrorInit(this.config);
-  }
-
-  /**
-   * Initialize codemirror
-   */
-  codemirrorInit(config){
-    this.instance = CodeMirror.fromTextArea(this.host.nativeElement, config);
-    this.instance.setValue(this._value);
-    this.instance.setSize(null, 90);
-    this.instance.on('change', () => {
-      this.updateValue(this.instance.getValue());
-    });
-
-    this.instance.on('focus', () => {
-      this.focus.emit();
-    });
-
-    this.instance.on('blur', () => {
-      this.blur.emit();
-    });
-  }
-
-  /**
-   * Value update process
-   */
-  updateValue(value){
-    this.value = value;
-    this.onTouched();
-    this.change.emit(value);
-  }
-
-  /**
-   * Implements ControlValueAccessor
-   */
-  writeValue(value){
-    this._value = value || '';
-    if (this.instance) {
-      this.instance.setValue(this._value);
-    }
-  }
-
-  onChange(_) {}
-  onTouched() {}
-  registerOnChange(fn){this.onChange = fn;}
-  registerOnTouched(fn){this.onTouched = fn;}
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/input.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/input.component.html
index 2eec6b7..86e9927 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/input.component.html
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/input.component.html
@@ -10,19 +10,48 @@
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-*/ -->
-<mat-card class="input-card">
-	 <mat-toolbar color="primary" class="input-selector">
-			<mat-icon class="toolbar-icon">menu</mat-icon>
-			<span>INPUT: SQL++</span>	
-			<span class="spacer"></span>
-	</mat-toolbar>
-	<mat-card-content class="content-area">
-		<div class="codemirror-container">
-			<codemirror class="code" #host [(ngModel)]="queryString" [config]="codemirrorConfig"></codemirror>
-		</div>
-	</mat-card-content>
-	<mat-card-actions class="actions">
-		<button mat-button class="query-button" (click)="onClick()">RUN</button>
-	</mat-card-actions>
-</mat-card>
+*/-->
+<mat-expansion-panel class="card" hideToggle [expanded]="true">
+    <mat-expansion-panel-header class="header" >
+        <mat-panel-title>
+            <mat-panel-title>SQL++ INPUT ({{currentQuery+1}}/{{preparedQueryCount}})
+            </mat-panel-title>
+            <mat-panel-description></mat-panel-description>
+            <mat-spinner *ngIf="querySpinnerVisible" [color]="blue" [diameter]="15" class="spinner"></mat-spinner>
+        </mat-panel-title>
+    </mat-expansion-panel-header>
+    <mat-panel-description class="content-area">
+        <div class='dataverses'>
+            <div>SELECT DATAVERSE:</div>
+            <mat-form-field>
+                <mat-select [(ngModel)]="selected" (selectionChange)="dataverseSelected()">
+                <!-- <mat-option [value]='none'>None</mat-option> -->
+                <mat-option *ngFor="let dataverse of dataverses" [value]="dataverse.DataverseName">
+                    {{dataverse.DataverseName}}
+                </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+        <div class="codemirror-container">
+            <textarea class="code" #editor></textarea>
+        </div>
+        <div class="history">
+            <div>HISTORY ({{viewCurrentHistory}}/{{history.length}})</div>
+            <button mat-button class='input-button' (click)="onClickNextHistory()" matTooltip="History: Next"><mat-icon>keyboard_arrow_up</mat-icon></button>
+            <button mat-button class='input-button' (click)="onClickPrevHistory()" matTooltip="History: Prev"><mat-icon>keyboard_arrow_down</mat-icon></button>
+        </div>
+    </mat-panel-description>
+    <mat-action-row>
+        <div class="message">
+            <span *ngIf="querySuccess" class="metrics">{{metricsString}}</span>
+            <span *ngIf="queryError" class="queryErrorMessage">{{queryErrorMessageString}}</span>
+        </div>
+        <div class="space"></div>
+        <button mat-button class='input-button' (click)="onClickNew()" matTooltip="New Query Input">NEW INPUT</button>
+        <button mat-button class='input-button' (click)="onClickClear()" matTooltip="Clear Query Input">CLEAR</button>
+        <button mat-button class='input-button run' (click)="onClickRun()" matTooltip="Execute Query Input">RUN</button>
+        <button mat-button class='input-button' (click)="onClickPrevious()" [disabled]="checkPrevious()" matTooltip="Previous Query Input">PREVIOUS</button>
+        <button mat-button class='input-button' (click)="onClickNext()" [disabled]="checkNext()" matTooltip="Next Query Input">NEXT</button>
+        <button mat-button class='input-button' (click)="onClickMetadata()" [disabled]="" matTooltip="Next Query Input">METADATA</button>
+    </mat-action-row>
+</mat-expansion-panel>
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/input.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/input.component.scss
index 437ff58..04b4eb3 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/input.component.scss
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/input.component.scss
@@ -11,72 +11,91 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
 $query-spacing-unit: 5px;
 
-.input-card {
-	display: flex;
-	flex-flow: column;
-	padding: 0;
-	margin: ($query-spacing-unit * 2);
-	height: 200px;
-	width: 100%;
-	min-height: 150px; 
-
-	//background-color: orange;
-}
-  
-.toolbar-icon {
-	padding: 0 14px 0 0;	
-	margin: 0;
+.card {
+    display: block;
+    margin: 0 0px 0 0px;
+    padding: 0;
+    margin: ($query-spacing-unit);
+    border-radius: 4px;
 }
 
-.spacer {
-	flex: 1 1 auto;
+
+.spinner {
+    margin-left: 15px;
+    &::ng-deep circle {
+        stroke: blue;
+    }
 }
-  
-.input-selector {
-	max-height: 42px;
-	min-height: 42px;
-	justify-content: center;
-	//align-items: center;
-	font-size: 0.80rem;
-	font-weight: 500;
-	background-color: white;
-	border: 1px solid rgba(54, 147, 209, 0.87);
+
+.header {
+    max-height: 42px;
+    min-height: 42px;
+    font-size: 0.80rem;
+    font-weight: 500;
+    border-bottom: 1px solid gray;
 }
 
 .content-area {
-	//position: relative;
-	color: hsla(0,0%,0%,.87);
-	//height: 102px;
-	padding: 0;
-	margin: 0;
-	overflow: none;
-  }
-
-.codemirror-container {
-	width: 95%;
-	height: 98%;
-	padding: 0; // ($query-spacing-unit * 2);
-	margin: 0 auto;
-	font-size: 14px;
-	//letter-spacing: 3px;
-	line-height: 1.8;
-	background-color: red;
+    //min-height: 130px;
 }
 
-//.code {
-//	width: 100%;
-//	height: 100%;
-//	padding: 0;
-//	margin: 0; 
-//	overflow-wrap: break-word;
-//	word-break: break-all;
-//}
+.codemirror-container {
+    width: 100%;
+    min-height: 98%;
+    padding: 0;
+    margin: 0 auto;
+    margin-top: 15px;
+    line-height: 1.8;
+    border: 1px dashed gainsboro;
+}
 
-.actions {
-	border-top: 1px solid rgba(0, 0, 0, 0.1);
-	color: rgba(54, 147, 209, 0.87);
-	padding-left: $query-spacing-unit;
-	margin: 0;
+.input-button {
+    font-size: 12px !important;
+}
+
+.metrics {
+    color: blue;
+    font-size: 14px !important;
+    font-size: 1.0rem;
+    font-weight: 500;
+    margin: 0;
+    padding: 0;
+}
+
+.space {
+    flex: 1 1 20%
+}
+
+.queryErrorMessage {
+    color: rgba(209, 54, 54, 0.87);
+    word-break: break-all;
+    font-size: 1.0rem;
+    font-weight: 500;
+    margin: 0;
+    padding: 0;
+}
+
+.run {
+    color: blue;
+}
+
+.dataverses {
+    margin-top: 15px;
+    margin-right: 15px;
+    font-size: 0.80rem !important;
+    font-weight: 500 !important;
+}
+
+.history {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    width: 88px;
+    margin-top: 15px;
+    margin-left: 15px;
+    font-size: 0.80rem !important;
+    font-weight: 500 !important;
 }
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/input.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/input.component.ts
index 9be9bd9..d17c28a 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/input.component.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/input.component.ts
@@ -12,79 +12,361 @@
 limitations under the License.
 */
 import { Component, ViewChild } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
-import * as sqlQueryActions from '../../shared/actions/query.actions'
+import * as sqlQueryActions from '../../shared/actions/query.actions';
+import * as appActions from '../../shared/actions/app.actions'
+import * as dataverseActions from '../../shared/actions/dataverse.actions'
 import * as CodeMirror from 'codemirror';
-
 /*
- * query component
- * has editor (codemirror) for writing some query
+ * Query component
+ * has editor (codemirror)
  */
 @Component({
-	moduleId: module.id,
-	selector: 'awc-query',
-	templateUrl:'input.component.html',
-	styleUrls: ['input.component.scss']
+    moduleId: module.id,
+    selector: 'awc-query',
+    templateUrl: 'input.component.html',
+    styleUrls: ['input.component.scss']
 })
 
 export class InputQueryComponent {
-	private guideSelectedDataset$: Observable<any>;		
-	private dataverses$: Observable<any>;	
-	private datatypes$: Observable<any>;
-	private datasets$: Observable<any>;	
-	private indexes$: Observable<any>;	
-	dataverses = [];
-	datatypes = [];
-	datasets = [];
-	indexes = [];
-	datasetName = "";
-	dataverseName = "";
-	queryString: string = ""
-	
-	/* Codemirror configuration
-	*/
-	codemirrorConfig = 	{ 	mode: "asterix",
-							lineWrapping: true,
-							showCursorWhenSelecting: true,
-							autofocus: true
-						}	;
+    currentQuery = 0;
+    queryString: string = "";
+    metricsString: {};
+    queryErrorMessageString: string = "";
+    collapse = false;
+    input_expanded_icon = 'expand_less';
+    queryRequest: any;
+    queryPrepare: any;
+    queryMetrics$: Observable <any> ;
+    queryMetrics: {};
+    querySuccess$: Observable <any> ;
+    querySuccess: Boolean = false;
+    queryError$: Observable <any> ;
+    queryError: Boolean = false;
+    queryErrorMessage$: Observable <any> ;
+    queryErrorMessages: {};
+    queryPrepared$: Observable <any> ;
+    queryPrepared: {};
+    preparedQueryCount: number;
+    previousDisabled = true;
+    nextDisabled = true;
+    querySuccesResults: any;
+    querySpinnerVisible: boolean = false;
+    dataverses$: Observable<any>;
+    dataverses: any;
+    defaultDataverse = 'Default';
+    selected = 'Default';
+    history = [];
+    currentHistory = 0;
+    viewCurrentHistory = 0; // for the view
+    sideMenuVisible$: Observable<any>;
+    sideMenuVisible: any;
+    none = 'None';
+    /* Codemirror configuration */
+    codemirrorConfig = {
+    mode: "asterix",
+    lineWrapping: true,
+    showCursorWhenSelecting: true,
+    autofocus: true,
+    lineNumbers: true,
+    };
 
-	loaded$: Observable<any>
+    constructor(private store: Store < any > ) {
+        this.currentQuery = 0;
+        this.querySuccess$ = this.store.select(s => s.sqlQuery.successHash);
+        this.querySuccess$.subscribe((data: any) => {
+            this.querySuccesResults = data;
+            this.querySpinnerVisible = false;
+            if (data != undefined && data[this.currentQuery] === true) {
+                this.querySuccess = true;
+            } else {
+                this.querySuccess = false;
+            }
+        })
 
-	constructor(private store: Store<any>) {
-		// Watching for guide selected or clicked dataset
-		this.guideSelectedDataset$ = this.store.select(s => s.dataset.guideSelectsDataset);
-		this.guideSelectedDataset$.subscribe((data: any) => {
-			if (data) {
-				this.datasetName = data;
-				for (let i = 0; i < this.datasets.length; i++) {
-					if ( this.datasets[i]['DatasetName'] === this.datasetName ) {
-						this.dataverseName = this.datasets[i]['DataverseName'];
-					}
-				}
-				this.queryString = "USE " + this.dataverseName + "; SELECT * FROM " + this.datasetName;
-			}
-		});
+        /* Watching for SQL Input Errors in current Query */
+        this.queryError$ = this.store.select(s => s.sqlQuery.errorHash);
+        this.queryError$.subscribe((data: any) => {
+            this.querySpinnerVisible = false;
+            if (data != undefined && data[this.currentQuery] === true) {
+                this.queryError = true;
+                this.showErrors();
+            } else {
+                this.queryError = false;
+            }
+        })
 
-		// Watching for Datatypes
-		this.dataverses$ = this.store.select(s => s.dataverse.dataverses.results);
-		this.dataverses$.subscribe((data: any[]) => {
-			this.dataverses = data;
-		});
+        /* Watching for Queries that are in prepared state,
+        * those are SQL strings that still has not been executed
+        */
+        this.queryPrepared$ = this.store.select(s => s.sqlQuery.sqlQueryPrepared);
+        this.queryPrepared$.subscribe((data: any) => {
+            if (data) {
+                this.queryPrepared = data
+                this.preparedQueryCount = Object.keys(this.queryPrepared).length;
+                if (this.preparedQueryCount == 0) {
+                    // Initialize Query Editor, prepare the default query
+                    this.queryPrepare = {
+                        editorId: String(this.currentQuery),
+                        queryString: this.queryString
+                    };
+                    this.store.dispatch(new sqlQueryActions.PrepareQuery(this.queryPrepare));
+                } else {
+                    if (this.queryPrepared && this.queryPrepared[this.currentQuery]) {
+                        this.queryString = this.queryPrepared[this.currentQuery];
+                    }
+                }
+            } else {
+                this.queryPrepared = {};
+            }
+        })
 
-		// Watching for Datasets
-		this.datasets$ = this.store.select(s => s.dataset.datasets.results);
-		this.datasets$.subscribe((data: any[]) => {
-			this.datasets = data;
-		});
-	}
+        /* Watching for Metrics */
+        this.queryMetrics$ = this.store.select(s => s.sqlQuery.sqlQueryMetrics);
+        this.queryMetrics$.subscribe((data: any) => {
+            if (data != undefined) {
+                this.queryMetrics = Object.assign(data);
+                if (this.queryMetrics && this.queryMetrics[this.currentQuery]) {
+                    this.metricsString = "SUCCESS: ";
+                    this.metricsString += " Execution time: " + this.queryMetrics[this.currentQuery].executionTime;
+                    this.metricsString += " Elapsed time: " + this.queryMetrics[this.currentQuery].elapsedTime;
+                }
+            } else {
+                this.queryMetrics = {};
+            }
+        })
 
-	getQueryResults(queryString: string) {
-    	this.store.dispatch(new sqlQueryActions.ExecuteQuery(queryString));
-  	}
+        /* Watching for SQL Input Errors: Error Message stored in Query Cache */
+        this.queryErrorMessage$ = this.store.select(s => s.sqlQuery.sqlQueryErrorHash);
+        this.queryErrorMessage$.subscribe((data: any) => {
+            if (data) {
+                this.queryErrorMessages = data;
+                this.showErrors();
+            } else {
+                this.queryErrorMessages = {};
+            }
+        })
 
-	onClick() {
-		this.getQueryResults(this.queryString.replace(/\n/g, " "));
-	}
+        this.preparedQueryCount = 0;
+        // Initialize Query Editor, prepare the default query
+        this.queryPrepare = {
+            editorId: String(this.currentQuery),
+            queryString: this.queryString
+        };
+        this.store.dispatch(new sqlQueryActions.PrepareQuery(this.queryPrepare));
+        // lets inform other views what's the current SQL editor
+        this.store.dispatch(new appActions.setEditorIndex(String(this.currentQuery)));
+    }
+
+    ngOnInit() {
+        this.dataverses$ = this.store.select(s => s.dataverse.dataverses.results);
+        // Watching for Dataverses
+        this.dataverses$ = this.store.select(s => s.dataverse.dataverses.results);
+        this.dataverses$.subscribe((data: any[]) => {
+            this.dataverses = data;
+            this.defaultDataverse = 'KAMON'
+        });
+        this.store.dispatch(new dataverseActions.SelectDataverses('-'));
+    }
+
+    showMetrics() {
+        this.querySuccess = false;
+        if (this.queryMetrics && this.queryMetrics[this.currentQuery] && this.querySuccesResults[this.currentQuery]) {
+            this.metricsString = "SUCCESS: ";
+            this.metricsString += " Execution time: " + this.queryMetrics[this.currentQuery].executionTime;
+            this.metricsString += " Elapsed time: " + this.queryMetrics[this.currentQuery].elapsedTime;
+            this.querySuccess = true;
+        }
+    }
+
+    showErrors() {
+        this.queryError = false;
+        if (this.queryErrorMessages && this.queryErrorMessages[this.currentQuery]) {
+            let errorObject = this.queryErrorMessages[this.currentQuery];
+            if (errorObject.length != 0) {
+            this.queryErrorMessageString = "ERROR: Code: " + JSON.stringify(errorObject[0].code, null, 8);
+            this.queryErrorMessageString += " " + JSON.stringify(errorObject[0].msg, null, 8);
+            this.queryError = true;
+            }
+        }
+    }
+
+    getQueryResults(queryString: string) {
+        let QueryOrder = this.currentQuery;
+        this.queryRequest = {
+            requestId: String(QueryOrder),
+            queryString: queryString
+        };
+        this.store.dispatch(new sqlQueryActions.ExecuteQuery(this.queryRequest));
+        this.querySpinnerVisible = true;
+    }
+
+    onClickRun() {
+        this.getQueryResults(this.queryString); // .replace(/\n/g, " "));
+        this.history.push(this.queryString);
+        this.currentHistory = this.history.length - 1;
+        this.viewCurrentHistory = this.history.length;
+    }
+
+    onClickNew() {
+        // Saving first
+        this.queryPrepare = {
+            editorId: String(this.currentQuery),
+            queryString: this.queryString
+        };
+        this.store.dispatch(new sqlQueryActions.PrepareQuery(this.queryPrepare));
+        // Prepare a new Query String, cleanup screen messages
+        this.currentQuery = Object.keys(this.queryPrepared).length;
+        this.queryString = "";
+        this.editor.getDoc().setValue(this.queryString);
+        this.queryErrorMessageString = "";
+        this.metricsString = "";
+        this.querySuccess = false;
+        this.queryError = false;
+        this.queryPrepare = {
+            editorId: String(this.currentQuery),
+            queryString: ""
+        };
+        this.store.dispatch(new sqlQueryActions.PrepareQuery(this.queryPrepare));
+        // lets inform other views what's the current SQL editor
+        let currentQueryIndex = String(this.currentQuery);
+        this.store.dispatch(new appActions.setEditorIndex(currentQueryIndex));
+        this.dataverseSelected();
+        this.editor.focus();
+    }
+
+    onClickClear() {
+        let queryClear = {
+            editorId: String(this.currentQuery),
+            queryString: ""
+        };
+        this.store.dispatch(new sqlQueryActions.CleanQuery(queryClear));
+        this.queryErrorMessageString = "";
+        this.queryString = "";
+        this.metricsString = "";
+        this.editor.getDoc().setValue(this.queryString);
+        this.editor.focus();
+    }
+
+    onClickPrevious() {
+        if (this.currentQuery > 0) {
+            this.nextSQLEditor(-1);
+        }
+    }
+
+    onClickNext() {
+        if (this.currentQuery < this.preparedQueryCount - 1) {
+            this.nextSQLEditor(1);
+        }
+    }
+
+    checkNext() {
+        if (this.currentQuery == this.preparedQueryCount - 1) {
+          return true;
+        } else {
+          return false;
+        }
+    }
+
+    checkPrevious() {
+        if (this.currentQuery == 0) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    nextSQLEditor(next) {
+        // Saving First
+        this.queryPrepare = {
+            editorId: String(this.currentQuery),
+            queryString: this.queryString
+        };
+        this.store.dispatch(new sqlQueryActions.PrepareQuery(this.queryPrepare));
+
+        this.currentQuery = this.currentQuery + next;
+        this.queryErrorMessageString = "";
+        this.metricsString = "";
+
+        // Retrieve Metrics or Error Message if Query was executed
+        this.showMetrics();
+
+        // Retrieve Metrics or Error Message if Query was executed
+        this.showErrors();
+
+        // Retrieve the prepared SQL string
+        this.queryString = this.queryPrepared[this.currentQuery];
+        this.editor.getDoc().setValue(this.queryString);
+
+        // lets inform other views what's the current SQL editor
+        let currentQueryIndex = String(this.currentQuery);
+
+        // Inform the app we are now active in next editor
+        this.store.dispatch(new appActions.setEditorIndex(currentQueryIndex));
+    }
+
+    onClickInputCardCollapse() {
+        this.collapse = !this.collapse;
+        if (this.collapse) {
+            this.input_expanded_icon = 'expand_more';
+        } else {
+            this.input_expanded_icon = 'expand_less';
+        }
+    }
+
+    /**
+     * On component view init
+     */
+    @ViewChild('editor') editor: CodeMirror.Editor;
+    ngAfterViewInit() {
+        this.codemirrorInit(this.codemirrorConfig);
+    }
+
+    /**
+     * Initialize codemirror
+     */
+    codemirrorInit(config) {
+        this.editor = CodeMirror.fromTextArea(this.editor.nativeElement, config);
+        this.editor.setSize(null, 'auto');
+        this.editor.getDoc().setValue(this.queryString);
+        this.editor.on('changes', () => {
+            this.queryString = this.editor.getValue();
+        });
+    }
+
+    dataverseSelected() {
+        if (this.selected == undefined) {
+            this.queryString = '';
+        } else {
+            this.queryString = 'Use ' + this.selected + '; ';
+        }
+        this.editor.getDoc().setValue(this.queryString);
+        this.editor.focus();
+    }
+
+    onClickNextHistory() {
+        if (this.currentHistory < this.history.length - 1) {
+          this.currentHistory++;
+          this.viewCurrentHistory++;
+          this.queryString = this.history[this.currentHistory];
+          this.editor.getDoc().setValue(this.queryString);
+          this.editor.focus();
+        }
+    }
+
+    onClickPrevHistory() {
+        if (this.currentHistory > 0) {
+            this.currentHistory--;
+            this.viewCurrentHistory--;
+            this.queryString = this.history[this.currentHistory];
+            this.editor.getDoc().setValue(this.queryString);
+            this.editor.focus();
+        }
+    }
+
+    onClickMetadata() {
+        this.sideMenuVisible = !this.sideMenuVisible;
+        this.store.dispatch(new appActions.setSideMenuVisible(this.sideMenuVisible));
+    }
 }
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/dataset-create-dialog.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata-inspector.component.html
old mode 100755
new mode 100644
similarity index 61%
rename from asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/dataset-create-dialog.component.html
rename to asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata-inspector.component.html
index ef88719..cd38636
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/datasets-collection/dataset-create-dialog.component.html
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata-inspector.component.html
@@ -11,4 +11,12 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */-->
-<!-- Place holder for future expansion -->
+<div class="inspector-dialog">
+    <p mat-dialog-title class="header">METADATA INSPECTOR</p>
+    <mat-dialog-content>
+        <pre class="content">{{data}}</pre>
+    </mat-dialog-content>
+    <mat-action-row>
+        <button mat-button class='input-button' (click)="onClickClose()">CLOSE</button>
+    </mat-action-row>
+</div>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-create-dialog.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata-inspector.component.scss
old mode 100755
new mode 100644
similarity index 71%
rename from asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-create-dialog.component.scss
rename to asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata-inspector.component.scss
index 039dcf1..fd6f01d
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-create-dialog.component.scss
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata-inspector.component.scss
@@ -11,8 +11,20 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-.index-dialog {    
-    font-family: "Roboto Mono", monospace;
+
+.inspector-dialog {
     font-size: 0.80rem;
     font-weight: 500;
-}
\ No newline at end of file
+}
+
+.header {
+    font-size: 1.0rem;
+    font-weight: 500;
+    color: blue;
+    border-bottom: 1px solid rgb(145, 152, 158);
+}
+
+.content {
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata.component.html
index 4641426..056ff44 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata.component.html
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata.component.html
@@ -11,34 +11,53 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */ -->
-<mat-card class="metadata-card">
-  <mat-toolbar color="primary" class="metadata-selector">
-    <mat-icon class="example-icon">menu</mat-icon>
-    <span>METADATA GUIDE</span>
-    <span class="spacer"></span>
-  </mat-toolbar>
-    <div class="metadata-content-area">
-    <div class="metadata-tree">
-      <div class="metadata-all">
-          <p-tree [style]="{'width':'100%', 'border': 'none', 'font-family': 'Roboto Mono', 'font-size': '0.80rem',
-          'font-weight': '500'}" selectionMode="single" [value]="nodesAll" (onNodeSelect)="nodeSelectAll($event)"></p-tree>
-      </div>
-      <div class="metadata-datasets">
-          <p-tree [style]="{'width':'100%', 'border': 'none', 'font-family': 'Roboto Mono', 'font-size': '0.80rem',
-          'font-weight': '500'}" selectionMode="single" [value]="nodesDatasets" (onNodeSelect)="nodeSelectDataset($event)"></p-tree>
-      </div>
-      <div class="metadata-datatypes">
-          <p-tree [style]="{'width':'100%', 'border': 'none', 'font-family': 'Roboto Mono', 'font-size': '0.80rem',
-          'font-weight': '500'}" selectionMode="single" [value]="nodesDatatypes"></p-tree>
-      </div>
-      <div class="metadata-index">
-          <p-tree [style]="{'width':'100%', 'border': 'none', 'font-family': 'Roboto Mono', 'font-size': '0.80rem',
-          'font-weight': '500'}" selectionMode="single" [value]="nodesIndexes"></p-tree>
-      </div>
-
-    </div>
-  </div>
-  <!--<mat-card-actions class="actions">
-     <button mat-button class="refresh-button" (click)="menuRefresh()">COLLAPSE</button>
-  </mat-card-actions> -->
-</mat-card>
+<div class="wrapper">
+    <mat-expansion-panel hideToggle [expanded]="true">
+        <mat-expansion-panel-header class="header-dataverse">
+        <mat-icon>developer_board</mat-icon>
+        <mat-panel-title>DATAVERSES</mat-panel-title>
+        <mat-panel-description></mat-panel-description>
+        </mat-expansion-panel-header>
+        <section class="section">
+        <li *ngFor="let dataverse of dataverses; index as i">
+            <mat-checkbox [labelPosition]="before" class="margin" (change)="generateFilter(dataverse.DataverseName, $event, value, i)" [(ngModel)]="dataverse.active">{{dataverse.DataverseName}}</mat-checkbox>
+        </li>
+        <div class="refresh">
+            <button mat-button class="refresh-button" (click)="refreshMetadata()" matTooltip="Click to refresh changes in AsterixDB"><mat-icon class="list-icon">cached</mat-icon>REFRESH</button>
+        </div>
+        </section>
+    </mat-expansion-panel>
+    <mat-expansion-panel hideToggle [expanded]="panelOpenState">
+        <mat-expansion-panel-header #datasetsPanel class="header">
+            <mat-icon>developer_board</mat-icon>
+            <mat-panel-title class="title">DATASETS</mat-panel-title>
+            <mat-panel-description></mat-panel-description>
+        </mat-expansion-panel-header>
+        <section class="section">
+        <li *ngFor="let dataset of datasetsFiltered" (click)="openMetadataInspectorDialog(dataset)">
+            {{dataset.DatasetName}}</li>
+        </section>
+    </mat-expansion-panel>
+    <mat-expansion-panel hideToggle [expanded]="panelOpenState">
+        <mat-expansion-panel-header class="header">
+            <mat-icon>developer_board</mat-icon>
+            <mat-panel-title class="title">DATATYPES</mat-panel-title>
+            <mat-panel-description></mat-panel-description>
+        </mat-expansion-panel-header>
+        <section class="section">
+        <li *ngFor="let datatype of datatypesFiltered" (click)="openMetadataInspectorDialog(datatype)">
+            {{datatype.DatatypeName}}</li>
+        </section>
+    </mat-expansion-panel>
+    <mat-expansion-panel hideToggle [expanded]="panelOpenState">
+        <mat-expansion-panel-header class="header">
+            <mat-icon>developer_board</mat-icon>
+            <mat-panel-title class="title">INDEX</mat-panel-title>
+            <mat-panel-description></mat-panel-description>
+        </mat-expansion-panel-header>
+        <section class="section">
+        <li *ngFor="let index of indexesFiltered" (click)="openMetadataInspectorDialog(index)">
+            {{index.IndexName}}</li>
+        </section>
+    </mat-expansion-panel>
+</div>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata.component.scss
index 4ee2339..6cd5966 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata.component.scss
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata.component.scss
@@ -11,87 +11,80 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-$metadata-spacing-unit: 5px;
 
-.metadata-card {
-	display: flex;
-	flex-flow: column;
-	padding: 0;
-	margin: 0 auto; //($metadata-spacing-unit * 2);
-	margin-top: ($metadata-spacing-unit * 2);
-	margin-bottom: ($metadata-spacing-unit * 2);
-	min-height: 150px;
-	box-shadow: none !important;
-	width: 92%;
-	overflow: hidden;
+mat-checkbox .mat-icon {
+    transform: scale(1);
 }
 
-.example-icon {
-	padding: 0 14px 0 0;
-	margin: 0;
+.section {
+    font-size: 0.80rem;
+    font-weight: 500;
+    li {
+        list-style-type: none;
+        color: #3E3E30;
+        cursor: pointer;
+        &:hover {
+            color: blue;
+        }
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        word-break: break-all;
+        white-space: nowrap;
+    }
 }
 
-.spacer {
-  flex: 1 1 auto;
+.wrapper {
+    width: 300px;
+    font-size: 0.80rem;
+    font-weight: 500;
+    text-align: left;
+    padding-left: 5px;
+    padding-right: 10px;
+    padding-bottom: 5px;
+    padding-top: 5px;
+    //background-color: gainsboro;
+    background-color: black;
+    margin-bottom: 50px;
+    mat-expansion-panel {
+        border: none !important;
+    }
 }
 
-.metadata-selector {
-	min-height: 42px;
-	max-height: 42px;
-	justify-content: center;
-	//align-items: center;
-	font-size: 0.80rem;
-	font-weight: 500;
-	background-color: white;
-	border: 1px solid rgba(54, 147, 209, 0.87);
+.header {
+    font-size: 0.80rem;
+    font-weight: 500; // color:rgb(145, 152, 158);
+    border-top: 1px solid rgb(145, 152, 158);
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    max-height: 42px;
+    min-height: 42px;
+    color: blue;
 }
 
-.metadata-content-area {
-	padding: ($metadata-spacing-unit * 2);
-	margin: 0;
+.header-dataverse {
+    font-size: 0.80rem;
+    font-weight: 500;
+    max-height: 42px;
+    min-height: 42px;
+    color: blue;
 }
 
-.metadata-tree {
-	min-height: 30px;
-	font-size: 0.80rem;
-	font-weight: 500;
+.title {
+    color:blue;
 }
 
-.metadata-datasets {
-	margin-top: ($metadata-spacing-unit * 2);
-	margin-bottom: ($metadata-spacing-unit * 2);
-}
-
-.metadata-datatypes {
-	margin-top: ($metadata-spacing-unit * 2);
-	margin-bottom: ($metadata-spacing-unit * 2);
-}
-
-.metadata-dataindexes {
-	margin-top: ($metadata-spacing-unit * 2);
-	margin-bottom: ($metadata-spacing-unit * 2);
-}
-
-
-.metadata-tree.ui-tree {
-	//width: 260px !important;
-	font-size: 0.80rem;
-	font-weight: 500;
-	border: none !important;
-	background-color: red;
+.list-icon {
+    font-size: 18px;
 }
 
 .refresh-button {
-	float: left;
-	margin-top: $metadata-spacing-unit;
+    font-size: 12px !important;
 }
 
-.actions {
-	border-top: 1px solid rgba(0, 0, 0, 0.1);
-	color: rgba(54, 147, 209, 0.87);
-	padding: $metadata-spacing-unit;
-	margin: 0;
+.refresh {
+    margin-top: 15px;
+    display: flex;
+    flex-flow: row;
+    align-items: center;
 }
-
-
-
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata.component.ts
index e60c9de..2271dda 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata.component.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/metadata.component.ts
@@ -11,199 +11,156 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
-import { Router } from '@angular/router';
-import { Dataverse } from '../../shared/models/asterixDB.model';
+import { Component, Inject } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import * as dataverseActions from '../../shared/actions/dataverse.actions';
 import * as datasetActions from '../../shared/actions/dataset.actions';
 import * as datatypesActions from '../../shared/actions/datatype.actions';
 import * as indexesActions from '../../shared/actions/index.actions';
-import * as metadataActions from '../../shared/actions/metadata.actions';
-import * as datasetsActions from '../../shared/actions/dataset.actions';
-import { ElementRef, ViewChild} from '@angular/core';
-import {DataSource} from '@angular/cdk/collections';
-import {BehaviorSubject} from 'rxjs/BehaviorSubject';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/observable/fromEvent';
-import { Subscription } from 'rxjs/Rx';
-import * as fromRoot from '../../shared/reducers/dataverse.reducer';
-import { State } from '../../shared/reducers/dataverse.reducer';
-import { TreeModule, TreeNode} from 'primeng/primeng';
+import { ViewChild} from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 
-
-/**
- * query component
- * has editor (codemirror) for writing some query
- */
 @Component({
-	moduleId: module.id,
-	selector: 'awc-metadata',
-	templateUrl: 'metadata.component.html',
-	styleUrls: ['metadata.component.scss']
+    moduleId: module.id,
+    selector: 'awc-metadata',
+    templateUrl: 'metadata.component.html',
+    styleUrls: ['metadata.component.scss']
 })
 
-export class MetadataComponent implements OnInit {
-	nodesAll = [];
-	nodesDatasets = [];
-	nodesDatatypes = [];
-	nodesIndexes = [];
+export class MetadataComponent {
+    dataverses$: Observable<any>;
+    dataverses: any;
+    datasetsFiltered: any;
+    datasets$: Observable<any>;
+    datasets: any;
+    datatypesFiltered :any;
+    datatypes$: Observable<any>;
+    datatypes: any;
+    indexesFiltered: any;
+    indexes$: Observable<any>;
+    indexes: any;
 
-	constructor(private store: Store<any>, private changeDetector: ChangeDetectorRef) {}
+    constructor(private store: Store<any>, public dialog: MatDialog) {
+        this.refreshMetadata();
+    }
 
-	ngOnInit(): void {
+    ngOnInit() {
+        this.dataverses$ = this.store.select(s => s.dataverse.dataverses.results);
 
-		// Watching for the metadata tree
-		this.store.select(s => s.metadata.tree).subscribe((data: any[]) => {
-			
-			this.nodesAll = [];
-			this.nodesDatasets = [];
-			this.nodesDatatypes = [];
-			this.nodesIndexes = [];
-			const indexesMenu = [];
-			const datatypesMenu = [];
-			const datasetsMenu = [];
-			const dataversesRoot = { label: '', children: []};
-			dataversesRoot.label = 'DATAVERSES';
-			dataversesRoot.children = [];
+         // Watching for Dataverses
+         this.dataverses$ = this.store.select(s => s.dataverse.dataverses.results);
+         this.dataverses$.subscribe((data: any[]) => {
+             this.dataverses = data;
+         });
 
-			for (let i = 0; i < data.length; i++) {
+         // Watching for Datasets
+         this.datasets$ = this.store.select(s => s.dataset.datasets.results);
+         this.datasets$.subscribe((data: any[]) => {
+                this.datasets = data;
+                this.datasetsFiltered = this.filter(this.datasets);
+         });
 
-				// Don't want to show metadata system datasets, datatypes or indexes
-			// if (data[i]['DataverseName'] && data[i]['DataverseName'] !== "Metadata" )
-			//	{
-					// Counting dataverses to align the menu identifiers
-			    	const dataverse = { label: '', children: [] }; 
-					dataverse.label = data[i]['DataverseName'];
-					dataversesRoot.children.push(dataverse);
+         // Watching for Datatypes
+         this.datatypes$ = this.store.select(s => s.datatype.datatypes.results);
+         this.datatypes$.subscribe((data: any[]) => {
+            this.datatypes = data;
+            this.datatypesFiltered = this.filter(this.datatypes);
+         });
 
-					// Adding the datasets to correspondent dataverse
-					if (data[i]['Datasets'].length) {
-						const datasetRoot = { label: '', children: [] }; 
-						datasetRoot.label = 'DATASETS';
-						dataverse.children.push(datasetRoot);
-						for (let j = 0; j < data[i]['Datasets'].length; j++) {
-							const dataset = { label: '', children: [] }; 
-							dataset.label = data[i]['Datasets'][j]['DatasetName'];
+         // Watching for indexes
+         this.indexes$ = this.store.select(s => s.index.indexes.results);
+         this.indexes$.subscribe((data: any[]) => {
+            this.indexes = data;
+            this.indexesFiltered = this.filter(this.indexes);
+         });
+    }
 
-							//
-							// Adding the datatype to correspondent dataset
-							//
-							if (data[i]['Datasets'][j]['Datatype']) {
-								const datatypeRoot = { label: '', children: [] };
-								datatypeRoot.label = 'Datatype: ' + data[i]['Datasets'][j]['Datatype']['DatatypeName'];
-								//
-								// Looking for the datatype fields
-								//
-								if (data[i]['Datasets'][j]['Datatype']['Derived']) {
-									if (data[i]['Datasets'][j]['Datatype']['Derived']['Record']) { 
-										const datatypeFieldsRoot = { label: '', leaf: true, expanded: true, children: [] };
-										datatypeFieldsRoot.label = 'FIELDS';
-										for (let k = 0; k < data[i]['Datasets'][j]['Datatype']['Derived']['Record']['Fields'].length; k++) {
-											const datatypeField = { label: '', children: [] }; 
-											datatypeField.label = data[i]['Datasets'][j]['Datatype']['Derived']['Record']['Fields'][k]['FieldName'] + ": " + data[i]['Datasets'][j]['Datatype']['Derived']['Record']['Fields'][k]['FieldType'];
-											datatypeFieldsRoot.children.push(datatypeField);
-										}
-										datatypeRoot.children.push(datatypeFieldsRoot);
+    refreshMetadata() {
+        this.store.dispatch(new dataverseActions.SelectDataverses('-'));
+        this.store.dispatch(new datasetActions.SelectDatasets('-'));
+        this.store.dispatch(new datatypesActions.SelectDatatypes('-'));
+        this.store.dispatch(new indexesActions.SelectIndexes('-'));
+    }
 
-									}
-								}
-								dataset.children.push(datatypeRoot);
+    dataverseFilter = {}
+    dataverseFilterMap = new Map();
 
-								datatypeRoot.label = data[i]['Datasets'][j]['Datatype']['DatatypeName'];
-								datatypesMenu.push(datatypeRoot);
-							}
+    filter(data){
+        let results = [];
 
-							//
-							// Adding the indexes to correspondent dataset
-							//
-							if (data[i]['Datasets'][j]['Indexes'].length) {
-								const indexRoot = { label: '', children: [] }; 
-								indexRoot.label = 'INDEXES';
-								
-								for (let k = 0; k < data[i]['Datasets'][j]['Indexes'].length; k++) {
-									const indexChild = { label: '', children: [] }; 
-									indexChild.label = data[i]['Datasets'][j]['Indexes'][k]['IndexName'];
+        if (data) {
+            for (let i=0; i< data.length; i++){
+                let keyCompare = data[i].DataverseName
+                this.dataverseFilterMap.forEach((value: boolean, key: string) => {
+                    if (keyCompare === key) {
+                        results.push(data[i]);
+                    }
+                });
+            }
+        }
+        return results;
+    }
 
-									// is Primary
-									const indexIsPrimaryRoot = { label: '', children: [] };
-									indexIsPrimaryRoot.label = 'isPrimary' + ': ' + data[i]['Datasets'][j]['Indexes'][k]['IsPrimary'];
-									indexChild.children.push(indexIsPrimaryRoot);
-								
-									// SearchKey
-									if (data[i]['Datasets'][j]['Indexes'][k]['SearchKey']) {
-										const indexSearchKeyRoot = { label: '', children: [] };
-										indexSearchKeyRoot.label = 'SEARCH KEY';
-										for (let l = 0; l < data[i]['Datasets'][j]['Indexes'][k]['SearchKey'].length; l++) {
-											const indexsearchKeyField = { label: '', children: [] };
-											indexsearchKeyField.label = data[i]['Datasets'][j]['Indexes'][k]['SearchKey'][l]
-											indexSearchKeyRoot.children.push(indexsearchKeyField);
-										}
+    @ViewChild('datasetsPanel') datasetsPanel;
+    panelOpenState: boolean = false;
 
-										indexChild.children.push(indexSearchKeyRoot);
-										indexesMenu.push(indexChild);
-									}
+    checkStatus = [];
+    generateFilter(dataverse, event, i) {
 
-									indexRoot.children.push(indexChild);
-								}
+        if (this.checkStatus[i] == undefined) {
+            this.checkStatus.push(event.checked);
+        } else {
+            this.checkStatus[i] = event.checked;
+        }
 
-								dataset.children.push(indexRoot);
-								datasetRoot.children.push(dataset);
-								datasetsMenu.push(dataset);
-							}
-						}
-					}
-			//	}
-			}
-			
-			this.nodesAll.push(dataversesRoot);
+        if (event.checked === true) {
+            this.dataverseFilter[dataverse] = event.checked;
+            this.dataverseFilterMap.set(dataverse, event.checked);
+        } else {
+            delete this.dataverseFilter[dataverse];
+            this.dataverseFilterMap.delete(dataverse);
+        }
 
-			/*
-			* Making the rest of the stand alone submenus
-			*/
+        this.datasetsFiltered = this.filter(this.datasets);
+        this.datatypesFiltered = this.filter(this.datatypes);
+        this.indexesFiltered = this.filter(this.indexes);
 
-			// Adding the DATASET stand alone submenu
-			const datasetMenuRoot = { label: '', children: [] };
-			datasetMenuRoot.label = 'DATASETS';
-			datasetMenuRoot.children = datasetsMenu;
-			this.nodesDatasets.push(datasetMenuRoot);
+        /* Open the dataset expansion panel if there is anything to show */
+        if (this.datasetsFiltered.length > 0) {
+            this.panelOpenState = true;
+        } else {
+            this.panelOpenState = false;
+        }
+    }
 
-			// Adding the DATATYPES stand alone submenu
-			const datatypeMenuRoot = { label: '', children: [] };
-			datatypeMenuRoot.label = 'DATATYPES';
-			datatypeMenuRoot.children = datatypesMenu;
-			this.nodesDatatypes.push(datatypeMenuRoot);
+    /*
+    * opens the metadata inspector
+    */
+    openMetadataInspectorDialog(data): void {
+        let metadata = JSON.stringify(data, null, 8);
+        metadata = metadata.replace(/^{/, '');
+        metadata = metadata.replace(/^\n/, '');
+        metadata = metadata.replace(/}$/, '');
+        let dialogRef = this.dialog.open(DialogMetadataInspector, {
+            width: '500px',
+            data: metadata,
+            hasBackdrop: false
+        });
+    }
+}
 
-			// Adding the DATATYPE stand alone submenu
-			const indexesMenuRoot = { label: '', children: [] };
-			indexesMenuRoot.label = 'INDEXES';
-			indexesMenuRoot.children = indexesMenu;
-			this.nodesIndexes.push(indexesMenuRoot);
+@Component({
+    selector: 'dataset-create-dialog',
+    templateUrl: 'metadata-inspector.component.html',
+    styleUrls: ['metadata-inspector.component.scss']
+})
 
-			// Component View Refresh
-			this.changeDetector.detectChanges();
-		});
-	}
+export class DialogMetadataInspector {
+    constructor(  public dialogCreateDsRef: MatDialogRef<DialogMetadataInspector>,
+                  @Inject(MAT_DIALOG_DATA) public data: any) { }
 
-	/*
-	* UI helpers to select dataverses from the guide menu
-	*/
-	nodeSelectAll(event) {
-		if (event.node.parent && event.node.parent.label === 'DATASETS') {
-			const datasetName = event.node.label.replace(/-;-/g);
-			this.store.dispatch(new datasetsActions.GuideSelectDatasets(datasetName));
-		}
-	}
-	
-	nodeSelectDataset(event) {
-		if (event.node.parent && event.node.parent.label === 'DATASETS') {
-			const datasetName = event.node.label.replace(/-;-/g);
-			this.store.dispatch(new datasetsActions.GuideSelectDatasets(datasetName));
-		}
-	}
+    onClickClose() {
+        this.dialogCreateDsRef.close();
+    }
 }
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/ouput.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/ouput.component.ts
deleted file mode 100755
index fcfc235..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/ouput.component.ts
+++ /dev/null
@@ -1,278 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { Component, OnInit, ViewChild,  AfterViewInit, ChangeDetectorRef, Pipe, PipeTransform } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import { Store } from '@ngrx/store';
-import * as sqlQueryActions from '../../shared/actions/query.actions'
-import { saveAs } from 'file-saver';
-import { DomSanitizer } from '@angular/platform-browser';
-import {TreeModule,TreeNode} from 'primeng/primeng';
-
-/**
- * query component
- * has editor (codemirror) for writing some query
- */
-
-@Pipe({ name: 'safeHtml'})
-export class SafeHtmlPipe implements PipeTransform  {
-  constructor(private sanitized: DomSanitizer) {}
-  transform(value) {
-    return this.sanitized.bypassSecurityTrustHtml(value);
-  }
-}
-
-@Component({
-	moduleId: module.id,
-	selector: 'awc-results',
-	templateUrl:'output.component.html',
-	styleUrls: ['output.component.scss']
-})
-
-
-export class QueryOutputComponent implements OnInit {
-	queryMessage: string;
-	treeData = [];
-	flattenData = [];
-	dataColumns = [];
-	query_message: string;
-	execution_time: number;
-	loaded$: Observable<any>
-	data: any[];
-	loading: Boolean;
-	jsonOutput = "";
-	selectedOutputView = "NONE";
-	outputQueryString = "";
-	toogleExpand = "EXPAND TREE"
-	
-	/* Codemirror configuration */
-	codemirrorConfig = 	{ 	mode: "asterix",
-		lineWrapping: true,
-		showCursorWhenSelecting: true
-	};
-
-	generateTreeMenu(node, rootMenu): any {
-
-		// Check in case the root object is not defined properly
-		if (rootMenu === undefined) {
-			rootMenu = { label: '', children: []};
-		}
-
-		let nodeArray = [];
-		
-		// Going through all the keys in a node looking for objects or array of key values
-		// and create a sub menu if is an object.
-		Object.keys(node).map((k) => {		
-
-			if (typeof node[k] === 'object') {
-				let nodeObject = { label: '', children: []};
-				nodeObject = { label: '', children: []};
-				nodeObject.label = k;
-				// if this is an object then a new node is created and
-				// recursive call to find and fill with the nested elements
-				let newNodeObject = this.generateTreeMenu(node[k], nodeObject);
-
-				// if this is the first node, then will become the root.
-				if (rootMenu.children) {
-					rootMenu.children.push(newNodeObject)
-				} else {
-					rootMenu = newNodeObject
-				}
-			}
-			else {
-				// Array of key values converted into a unique string with a : separator 
-				let nodeKeyValue = { label: '', children: []};
-				nodeKeyValue.label = k + " : " + node[k]
-				nodeArray.push(nodeKeyValue);
-			}
-		})
-
-		// The array will be added as value to a parent key.
-		if (nodeArray.length > 0) {
-			rootMenu.children = nodeArray.concat(rootMenu.children)
-		}
-		
-		return rootMenu 
-	}
-
-	constructor(private store: Store<any>, private changeDetector: ChangeDetectorRef) {
-		this.loaded$ = this.store.select(s => s.sqlQuery.loaded);
-		this.store.select("sqlQuery").subscribe((data: any) => {
-			// Set the output toolbar query string and default view settings
-			if (data.loaded) {
-				this.selectedOutputView = "TABLE";
-				this.loading = true;
-				this.data = data.sqlQueryResult.results;
-				this.treeData = [];
-				let stringQuery = data.sqlQueryString;
-	
-				// Preparing the toolbar 
-				if (stringQuery.length > 150) {
-					this.outputQueryString = ": " + stringQuery.slice(0, 150) + " (..)"
-				} else {
-					this.outputQueryString = ": " + stringQuery;
-				}
-
-				// Processing the results 
-				if (data.sqlQueryResult.results && data.sqlQueryResult.results.length > 0 && this.data[0]) {
-
-					/* Removing the root object, disabled for the time being 
-					var resultKeyList = Object.keys(this.data[0]);
-					var resultKey: string = resultKeyList[0]; 
-					*/
-
-					for (let i = 0; i < this.data.length; i++) {
-
-						/* Removing the root object, disabled for the time being 
-						if (this.data[i][resultKey] instanceof Object) {	
-							this.data[i] = this.data[i][resultKey];
-						}*/	
-
-						let nodeContent = { label:"[" + i + "]" , children: []};
-						this.treeData.push(this.generateTreeMenu(this.data[i], nodeContent))
-					}
-
-					this.loading = false;
-				} 
-	
-				// JSON OUTPUT
-				// Making into a JSON String for JSON String Output
-				this.jsonOutput = JSON.stringify(data.sqlQueryResult.results, null, 2)
-				
-				// TABLE OUTPUT
-				if (this.data && this.data.length > 0) {
-
-					this.collapseAll();
-					// Normalize the data ( removing the first key if is an object )
-					// TODO: Move it into a recursive function.
-					this.dataColumns = [];
-
-					var resultKeyList = Object.keys(this.data[0]);
-					var resultKey: string = resultKeyList[0]; 
-					if (this.data[0][resultKey] instanceof Object) {	
-						// is a SQL++ Query Results 
-						var nestedKeyList = Object.keys(this.data[0][resultKey]);
-						for (let i = 0; i < nestedKeyList.length; i++) {
-							if (typeof this.data[0][resultKey][nestedKeyList[i]] === 'object') {
-								// Creating a key to display a nested type
-								this.dataColumns.push({field: 'nestedString' + i, header: nestedKeyList[i]})
-								 				
-							} else {
-								this.dataColumns.push({field: nestedKeyList[i], header: nestedKeyList[i] })
-							}
-							
-						}
-					}
-					else { // is a SQL++ Metadata Results and there is an Array
-						for (let i = 0; i < resultKeyList.length; i++) {
-							this.dataColumns.push({field: resultKeyList[i], header: resultKeyList[i] })
-						}
-					}
-
-					// Now prepare the data ( SQL++ Query, Metatada Queries no need to change anything ).
-					// TODO: Move it into a recursive function.
-					if (this.data[0][resultKey] instanceof Object) {	
-						// is a SQL++ Query Results 
-						for (let i = 0; i < this.data.length; i++) {
-
-							// // is a SQL++ Query Results 
-							var nestedKeyList = Object.keys(this.data[i][resultKey]);
-							for (let k = 0; k < nestedKeyList.length; k++) {
-								if ( typeof this.data[i][resultKey][nestedKeyList[k]] === 'object' ){
-										// Creating a display value to for a nested type JSON.stringify(jsObj, 
-										var nestedObjectStr = JSON.stringify(this.data[i][resultKey][nestedKeyList[k]], null, '\n');
-										var nestedKey = 'nestedString' + k;
-										this.data[i][resultKey][nestedKey] = nestedObjectStr; 				
-								} 
-							}
-
-							this.data[i] = this.data[i][resultKey];
-						}	
-					}
-				}
-			}
-      	});
-	}
-
-	/* 
-	* Subscribing to store values
-	*/
-	ngOnInit(): void {
-		this.loaded$ = this.store.select('sqlQuery');
-		this.store.select("sqlQuery").subscribe((data: any) => {
-			if (data.sqlQueryError.errors){
-				this.queryMessage = data.sqlQueryError.errors[0].msg
-			}else{
-				this.queryMessage = ""
-			}
-		})
-	}
-
-	/* 
-	* Changes view mode [ TABLE, TREE, JSON VIEW ]
-	*/
-	onSelect(value: any) {
-		this.selectedOutputView = value;		
-	}
-
-	/* 
-	* Export to CSV 
-	*/
-    exportToCSV(){
-		var blob = new Blob([this.jsonOutput], {type: "text/csv;charset=utf-8"});
-		saveAs(blob, "Asterix-results.csv");
-	}
-	
-	/*
-	*  Export to plain text
-	*/
-    exportToText(){
-		var exportOutput = this.jsonOutput;
-		var blob = new Blob([exportOutput], {type: "text/plain;charset=utf-8"});
-		saveAs(blob, "Asterix-results.txt");
-	}
-	
-	/*
-	*  Expand/Collapse Tree
-	*/
-    expandTree(){
-		if (this.toogleExpand === "EXPAND TREE"){
-			this.expandAll();
-		} else {
-			this.collapseAll();
-		}
-	}
-	
-	expandAll(){
-		this.toogleExpand = "TREE COLLAPSE";
-        this.treeData.forEach( node => {
-            this.expandRecursive(node, true);
-        } );
-    }
-
-    collapseAll(){
-		this.toogleExpand = "EXPAND TREE";
-        this.treeData.forEach( node => {
-            this.expandRecursive(node, false);
-        } );
-    }
-    
-    private expandRecursive(node:TreeNode, isExpand:boolean){
-        node.expanded = isExpand;
-        if(node.children){
-            node.children.forEach( childNode => {
-                this.expandRecursive(childNode, isExpand);
-            } );
-        }
-    }
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/output.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/output.component.html
index f7c4b43..01a4a0a 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/output.component.html
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/output.component.html
@@ -12,57 +12,17 @@
 limitations under the License.
 */ -->
 <mat-card class="sql-results-card">
-	<mat-toolbar color="primary" class="results-selector">
-		<mat-icon class="toolbar-icon">menu</mat-icon>
-	    <span class="output-query-string">OUTPUT{{outputQueryString}}</span>
-		<span class="spacer"></span>
-	</mat-toolbar>
-  	<mat-card-content class="content-area">
-		<div *ngIf="loaded$ | async as ld">
-			<div *ngIf="selectedOutputView=='TABLE'">				
-				<p-dataTable [style]="{'width':'100%', 'overflow':'hidden'}" id='review-table' [responsive]="true" [hidden]="loading" [value]="data" [rows]="20" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20, 30, 40, 50]" >
-					<p-column [style]="{'text-align':'left',
-					'text-overflow': 'ellipsis', 'word-wrap': 'break-word', 'word-break': 'break-all'}"
-					
-					[footerStyle]="{'color':'blue'}" [headerStyleClass]="datatable-header" *ngFor="let node of dataColumns;" [field]="node.field" 
-					[header]="node.header" [sortable]="true">
-					</p-column>
-				</p-dataTable>
-			</div>
-		</div>
-		<div *ngIf="loaded$ | async as ld">	
-			<div *ngIf="ld.sqlQueryError.metrics" class="queryErrorMessage">
-				<span>ERROR:</span>
-				<span>{{queryMessage}}</span>
-			</div>	
-			 <div [hidden]="selectedOutputView!='TREE'" class="data-viewer-container">
-				<button mat-button class="button-expand" (click)="expandTree()">{{toogleExpand}}</button>
-				<p-tree [style]="{'width':'100%', 'border': 'none', 'font-family': 'Roboto Mono', 'font-size': '0.80rem',
-					'font-weight': '500'}" [value]="treeData"></p-tree>
-			</div>
-			<div *ngIf="loaded$ | async as ld">	
-				<div *ngIf="selectedOutputView=='JSON'" class="data-viewer-container">
-					<button mat-button class="button-export" (click)="exportToText()">EXPORT</button>
-					<pre class="json-output">{{jsonOutput}}</pre>
-				</div>
-			</div>
-		</div>
-	</mat-card-content>
-	<mat-card-actions class="actions">
-		<div *ngIf="loaded$ | async as ld">
-			<span *ngIf="ld.sqlQueryResult.metrics" class="metrics">
-				<span class="span-results">SUCCESS:</span>
-				<span class="span-results">Count: {{ld.sqlQueryResult.metrics.resultCount}}</span>
-				<span class="span-results">Size: {{ld.sqlQueryResult.metrics.resultSize}}</span>
-				<span class="span-results">Elapsed time: {{ld.sqlQueryResult.metrics.elapsedTime}}</span>
-				<span class="span-results">Execution time: {{ld.sqlQueryResult.metrics.executionTime}}</span>
-				<span class="spacer"></span>
-				<mat-button-toggle-group #group="matButtonToggleGroup" class="output-group" value={{selectedOutput}} (change)="onSelect(group.value)">
-					<mat-button-toggle mat-button  value="TABLE">TABLE</mat-button-toggle>
-					<mat-button-toggle mat-button  value="TREE">TREE</mat-button-toggle>
-					<mat-button-toggle mat-button  value="JSON">JSON</mat-button-toggle>
-				</mat-button-toggle-group>
-			</span>
-		</div>
-	</mat-card-actions>
+    <mat-card-content class="content-area">
+        <div class="divider">
+        <div *ngIf='data.length != 0'>
+            <tree-view [data]="data" [queryId]="queryId"></tree-view>
+        </div>
+        <div *ngIf='queryOptimizedLogicalPlan != ""'>
+            <plan-view [jsonPlan]="queryOptimizedLogicalPlan" [plan]="optimalLogicalPlan" [planName]="'OPTIMIZED PLAN'"></plan-view>
+        </div>
+        <div *ngIf='queryLogicalPlan != ""'>
+            <plan-view [jsonPlan]="queryLogicalPlan" [plan]="logicalPlan" [planName]="'LOGICAL PLAN'"></plan-view>
+        </div>
+        </div>
+    </mat-card-content>
 </mat-card>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/output.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/output.component.scss
index 099ca87..e55a5a5 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/output.component.scss
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/output.component.scss
@@ -11,159 +11,24 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
 $results-spacing-unit: 5px;
-
 .sql-results-card {
-  display: flex;
-	flex-flow: column;
-  padding: 0;
-  height: 600px;
-  width: 100%; // 1350px;
-	margin: ($results-spacing-unit * 2);
-	min-height: 150px; 
-}
-
-.toolbar-icon {
-  padding: 0 14px 0 0;
-  margin: 0;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-.results-selector {
-	max-height: 42px;
-  min-height: 42px;
-  justify-content: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  font-size: 0.80rem;
-  font-weight: 500;
-  background-color: white;
-  border: 1px solid rgba(54, 147, 209, 0.87);
-  overflow-wrap: break-word;
-	word-break: break-all;
+    margin: ($results-spacing-unit);
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+    padding: 0px;
+    border: none !important;
 }
 
 .content-area {
-  position: relative;
-  color: hsla(0,0%,0%,.87);
-  height: 500px;
-  padding: 0;
-  margin: 0;
-  overflow: auto;
-  font-size: 0.80rem;
-  font-weight: 500;
-  font-family: "Roboto", monospace;
+    overflow: auto;
+    font-size: 0.80rem;
+    font-weight: 500;
+    font-family: Consolas, monospace;
 }
 
-.root-closed {
-  list-style-type:none;
+.divider {
+    width: 100%;
 }
-
-.root-open {
-  list-style-type:none;
-}
-
-.leaf-list-open {
-  list-style-type:none;
-  // padding-top: ($results-spacing-unit) * 2;
-  padding-left: 25px;
-  color: red;
-}
-
-.leaf-list-open.div
-//.leaf-list-open.ul
-.leaf-list-open.li {
-  margin-left: ($results-spacing-unit * 10) !important;
-  color: green;
-}
-
-.leaf {
-  color: blue;
-}
-
-.leaf-list-closed {
-  list-style-type:none;
-  display: none;
-}
-
-ul > .root-closed::before {
-  content:'+'
-}
-
-ul > .root-open::before {
-  content:'-'
-}
-
-.queryErrorMessage {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  color: rgba(209, 54, 54, 0.87);
-  padding: $results-spacing-unit;
-  padding-left: ($results-spacing-unit * 2);
-}
-
-.metrics {
-  display: flex;
-  color: rgba(54, 147, 209, 0.87);
-  font-size: 0.80rem;
-  font-weight: 500;
-}
-
-.span-results {
-  padding-top: ($results-spacing-unit * 2);
-  padding-left: ($results-spacing-unit * 2);
-}
-
-.actions {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  color: rgba(54, 147, 209, 0.87);
-  margin: 0;
-}
-
-//someID\:review-table
-th {
-  text-align: left !important;
-}
-
-.datatable-header {
-  color: red !important;
-  background-color: blue;
-}
-
-.data-viewer-container {
-  padding: ($results-spacing-unit * 4);
-  padding-bottom: ($results-spacing-unit * 8);
-  height: 100%;
-  overflow: hidden;
-}
-
-.output-group {
-  margin-right: ($results-spacing-unit * 4);
-}
-
-.menu-export {
-  font-size: 0.80rem !important;
-  font-weight: 500 !important;
-}
-
-.button-export {
-  margin-right: ($results-spacing-unit * 4);
-  color: rgba(54, 147, 209, 0.87);
-}
-
-.button-expand {
-  margin-right: ($results-spacing-unit * 4);
-  color: rgba(54, 147, 209, 0.87);
-}
-
-.ui-datatable-data> tr> td {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 150px;
-  color: red;
-}
-
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/output.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/output.component.ts
new file mode 100755
index 0000000..196fbda
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/output.component.ts
@@ -0,0 +1,91 @@
+/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Store } from '@ngrx/store';
+
+@Component({
+    moduleId: module.id,
+    selector: 'awc-results',
+    templateUrl: 'output.component.html',
+    styleUrls: ['output.component.scss']
+})
+
+
+export class QueryOutputComponent {
+    data: any[];
+    currentQueryActive$: Observable < any > ;
+    currentQueryActive: string;
+    queryLogicalPlan = "";
+    queryOptimizedLogicalPlan = "";
+    logicalPlan: any;
+    optimalLogicalPlan: any;
+    results$: Observable < any > ;
+    SQLresults: any;
+    queryId: any = "";
+
+    constructor(private store: Store <any>) {
+        let key = '1';
+        this.currentQueryActive$ = this.store.select(s => s.app.currentQueryIndex);
+        /* this when the editor changes */
+        this.currentQueryActive$.subscribe((data: any) => {
+            if (data) {
+                this.currentQueryActive = data;
+                if (this.SQLresults) {
+                  this.currentQueryActive = data;
+                  this.resultsProccess(this.SQLresults, this.currentQueryActive);
+                }
+            } else {
+                this.currentQueryActive = "0";
+            }
+        })
+        /* this is the output when the quey runs for the first time */
+        this.results$ = this.store.select(s => s.sqlQuery.sqlQueryResultHash);
+        this.results$.subscribe((data: any) => {
+            if (Object.keys(data).length !== 0 && data[this.currentQueryActive]) {
+                this.resultsProccess(data, this.currentQueryActive);
+            } else if (Object.keys(data).length === 0) {
+                this.resultsProccess([], this.currentQueryActive);
+            }
+        })
+    }
+
+    resultsProccess(data: any, queryId) {
+        this.SQLresults = data;
+        this.queryLogicalPlan = "";
+        this.queryOptimizedLogicalPlan = "";
+        if (this.SQLresults[queryId]) {
+            // Extract the logical plan
+            if (this.SQLresults[queryId]['plans']) {
+                if (this.SQLresults[queryId]['plans']['logicalPlan']) {
+                    this.queryLogicalPlan = JSON.stringify(this.SQLresults[queryId]['plans']['logicalPlan'], null, 8);
+                    this.logicalPlan = this.SQLresults[queryId]['plans']['logicalPlan'];
+                }
+                if (this.SQLresults[queryId]['plans']['optimizedLogicalPlan']) {
+                    this.queryOptimizedLogicalPlan = JSON.stringify(this.SQLresults[queryId]['plans']['optimizedLogicalPlan'], null, 8);
+                    this.optimalLogicalPlan = this.SQLresults[queryId]['plans']['optimizedLogicalPlan'];
+                }
+            }
+
+            if (this.SQLresults[queryId]['results'] && this.SQLresults[queryId]['results'].length > 0) {
+                this.data = this.SQLresults[queryId];
+                this.queryId = queryId;
+            } else {
+                this.data = [];
+            }
+        } else {
+              this.data = [];
+        }
+    }
+}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-node-svg.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-node-svg.component.html
new file mode 100644
index 0000000..1ef741b
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-node-svg.component.html
@@ -0,0 +1,81 @@
+<!--/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/-->
+<svg id='node{{level}}{{item}}{{subplan}}{{planName}}' xmlns="http://www.w3.org/2000/svg" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="200px" height="160px" class="plan-node" (click)="seeDetails(viewParams_)">
+  <title>{{details}}</title>
+  <style>
+    @keyframes cycle {
+      33.3% {
+        visibility: visible;
+      }
+      100% {
+        visibility: hidden
+      }
+    }
+
+    .lit {
+      animation: cycle 9s step-start infinite;
+    }
+
+    .red .lit {
+      animation-delay: -3s;
+    }
+
+    .yellow .lit {
+      animation-delay: -6s;
+    }
+
+    .green .lit {
+      animation-delay: 0;
+    }
+
+    .operation-text {
+      font-size: 12px;
+      font-family: Roboto, "Helvetica Neue", monospace;
+      fill: black;
+    }
+
+    .operation-see-more {
+      font-size: 12px;
+      font-family: Roboto, "Helvetica Neue", monospace;
+      fill: black;
+      cursor: pointer;
+    }
+
+    .card {
+      cursor: pointer;
+    }
+
+    .card:hover {
+      stroke: blue;
+    }
+
+    .operation-details {
+      visibility: none;
+      transition: opacity 1s ease-in-out;
+      opacity: 0;
+    }
+
+  </style>
+  <text class="operation-text" x="50%" y="50%" text-anchor="middle">{{getNodeOperatorId()}} : {{getNodeName()}}</text>
+</svg>
+
+<div class="branch" *ngIf="node.inputs">
+  <li *ngIf="checkSubPlan()" class="li sub">
+    <plan-node-svg class="sub" [planName]="planName" [node]="node.inputs[item].subplan[0]" [level]="0" [item]="0" [subplan]="level+item+subplan+1"></plan-node-svg>
+  </li>
+  <li class="li" *ngFor="let subNode of node.inputs; let i = index">
+    <plan-node-svg class="" [planName]="planName" [node]="subNode" [level]="level+1" [item]="i" [subplan]="subplan" [viewParams]="viewParams"></plan-node-svg>
+  </li>
+</div>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-node-svg.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-node-svg.component.scss
new file mode 100644
index 0000000..f1af051
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-node-svg.component.scss
@@ -0,0 +1,230 @@
+/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+//vars
+$page-width: 1000px;
+$padding-base: 12px;
+$padding-sm: 5px;
+$padding-lg: 15px;
+$padding-xl: 25px;
+$font-size-base: 12px;
+$font-size-xs: round($font-size-base * 0.7);
+$font-size-sm: round($font-size-base * 0.9);
+$font-size-lg: round($font-size-base * 1.3);
+$font-size-xl: round($font-size-base * 1.7);
+$font-family-sans-serif: 'noto';
+$font-family-mono: 'source code';
+$line-height-base: 1.3;
+$gray-lightest: #f7f7f7;
+$gray-light: darken($gray-lightest, 10%);
+$gray: darken(#f7f7f7, 30%);
+$gray-dark: darken(#f7f7f7, 50%);
+$gray-darkest: darken($gray-lightest, 70%);
+$blue: #00B5E2;
+$dark-blue: #008CAF;
+$light-blue: #65DDFB;
+$red: #AF2F11;
+$dark-red: #7C210C;
+$light-red: #FB8165;
+$green: #279404;
+$yellow: #F8E400;
+$bg-color: $gray-lightest;
+$text-color: #4d525a;
+$text-color-light: lighten($text-color, 30%);
+$line-color: $gray-light;
+$line-color-light: lighten($gray-light, 10%);
+$link-color: $blue;
+$border-radius-base: 3px;
+$border-radius-lg: 6px;
+$main-color: $blue;
+$main-color-dark: $blue;
+$highlight-color: $blue;
+$highlight-color-dark: $dark-blue;
+$alert-color: #FB4418;
+$connector-height: 20px;
+$connector-line-small: 1px solid darken($line-color, 10%);
+$connector-line-big: 2px solid darken($line-color, 10%);
+.plan-nodea {
+    display: table;
+    position: relative;
+    float: left;
+}
+
+.view-icon {
+    font-size: 14px;
+}
+
+.flex-spacer {
+    flex: 1 1 10%;
+}
+
+.dot {
+    display: flex;
+    flex-flow: column;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0;
+}
+
+.plan-node {
+    display: flex;
+    flex-flow: column;
+    justify-content: flex-start;
+    color: $text-color;
+    transition: hidden 0.8s;
+    padding: 0px;
+    font-size: 10px;
+    border: 1px solid $line-color;
+    margin: 0px;
+    border-radius: $border-radius-base;
+    width: 200px;
+    height: 60px;
+    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.1);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: auto;
+    padding-right: auto;
+    transition: height 0.3s ease-in-out;
+    &:hover {
+        border-color: $highlight-color;
+    }
+}
+
+.plan {
+    list-style: none !important;
+    padding-bottom: $padding-lg * 3;
+    margin-top: 0;
+    padding-top: 0;
+    padding-left: 0;
+
+    .merge {
+        display: flex;
+        flex-flow: column;
+        margin-top: 0 !important;
+        list-style: none;
+        padding-left: 0;
+        color: #00B5E2 !important;
+        border: 1px dashed #00B5E2;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .branch {
+        display: flex;
+        flex-flow: row;
+        margin-top: 0;
+        list-style: none;
+        padding-top: $connector-height;
+        position: relative;
+        transition: all 1s;
+        padding-left: 0;
+        color: black;
+        margin-left: auto;
+        margin-right: auto; // vertical
+        &:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            border-left: $connector-line-small;
+            height: $connector-height;
+            width: 0;
+            color: black;
+            margin-top: 0;
+        }
+        &:first-child {
+            margin-top: 0;
+            &:before {
+                border: none;
+            }
+        }
+        .branch {
+            display: flex;
+            flex-flow: row;
+            margin-top: 0 !important;
+            list-style: none;
+            padding-left: 0;
+        }
+
+        li {
+            display: inline;
+            list-style-type: none;
+            position: relative;
+            padding: $connector-height $padding-sm 0 $padding-sm;
+            transition: all 1s;
+            margin-left: auto;
+            margin-right: auto; // connectors
+            &:before,
+            &:after {
+                content: '';
+                position: absolute;
+                top: 0;
+                right: 50%;
+                border-top: $connector-line-small;
+                width: 50%;
+                height: $connector-height;
+            }
+            &:after {
+                right: auto;
+                left: 50%;
+                border-left: $connector-line-small;
+            }
+            &:only-child {
+                padding-top: 0;
+                &:after,
+                &:before {
+                display: none;
+                }
+            }
+            &:first-child::before,
+            &:last-child::after {
+                border: 0 none;
+            }
+            &:last-child::before {
+                border-right: $connector-line-small;
+                border-radius: 0 $border-radius-lg 0 0;
+            }
+            &:first-child::after {
+                border-radius: $border-radius-lg 0 0 0;
+            }
+        }
+    }
+}
+
+.sub {
+    .plan-node {
+        background-color: rgb(230, 230, 230);
+    }
+}
+
+.viewMe {
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+}
+
+.node-summary {
+    display: block;
+    margin: 10px 0 10px 0;
+    text-align: left;
+}
+
+.node-details {
+    display: block;
+    text-align: left;
+}
+
+.node-subplan {
+    float: right;
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-node-svg.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-node-svg.component.ts
new file mode 100644
index 0000000..a8d1987
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-node-svg.component.ts
@@ -0,0 +1,196 @@
+/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Renderer2, ViewEncapsulation, Component, Input } from '@angular/core';
+
+export interface ViewParams {
+    viewMode: string,
+    width: string,
+    height: string,
+    visible: string,
+    display: string,
+    opacity: number,
+    border: string
+}
+
+export const FULL:ViewParams = {
+    viewMode: 'FULL',
+    width: '350px',
+    height: '180px',
+    visible: 'visible',
+    display: 'block',
+    opacity: 1,
+    border: "2px solid #0000FF"
+};
+
+export const NORMAL:ViewParams = {
+    viewMode: 'NORMAL',
+    width: '200px',
+    height: '60px',
+    visible: 'hidden',
+    display: 'none',
+    opacity: 0,
+    border: "none"
+};
+
+@Component({
+    moduleId: module.id,
+    selector: 'plan-node-svg',
+    templateUrl: 'plan-node-svg.component.html',
+    styleUrls: ['plan-node-svg.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+})
+
+export class PlanNodeSVGComponent {
+    @Input() node: any;
+    @Input() level;
+    @Input() item = 0;
+    @Input() subplan = 0;
+    @Input() planName = "";
+    @Input() viewParams;
+
+    details: any;
+    viewParams_: any;
+
+    constructor(private renderer: Renderer2) {}
+
+    numberOfInputs: 0;
+    selected = false;
+
+    ngOnInit() {
+
+        this.viewParams_ = NORMAL;
+
+        /* Some preprocessing to show explanation details */
+        if (this.node.inputs){
+            this.numberOfInputs = this.node.inputs.length;
+        } else {
+            this.numberOfInputs = 0;
+        }
+
+        if (this.node) {
+            let node_=  JSON.parse(JSON.stringify(this.node));
+
+            if (node_.inputs) {
+                delete node_['inputs'];
+            }
+
+            if (node_.subplan) {
+                delete node_['subplan'];
+            }
+
+            if (node_.visible != undefined ) {
+                delete node_['visible'];
+            }
+
+            if (node_.viewDetails != undefined) {
+                delete node_['viewDetails'];
+            }
+
+            if (node_.operator) {
+                delete node_['operator'];
+            }
+
+            if (node_.operatorId) {
+                delete node_['operatorId'];
+            }
+
+            this.details = JSON.stringify(node_, null, 8);
+
+            this.details = this.details.replace(/^{/, '');
+            this.details = this.details.replace(/^\n/, '');
+            this.details = this.details.replace(/}$/, '');
+        }
+    }
+
+    getNodeName() {
+        if(this.node) {
+            if (this.node.operator) {
+                return (this.node.operator).toUpperCase();
+            } else {
+                return "NA";
+            }
+        }
+    }
+
+    getNodeOperatorId() {
+        if(this.node) {
+            if (this.node.operatorId) {
+                return (this.node.operatorId).toUpperCase();
+            } else {
+                return "NA";
+            }
+        }
+    }
+
+    getNodeSubPlan() {
+        if(this.node) {
+            if (this.node['inputs']) {
+                if (this.node['inputs'][this.item]) {
+                    if (this.node['inputs'][this.item]['subplan']) {
+                        return "Subplan";
+                    } else {
+                        return "";
+                    }
+                } else {
+                    return "";
+                }
+            }
+        }
+    }
+
+    seeDetails(me) {
+        // Future Implementation
+    }
+
+    checkSubPlan() {
+        if(this.node) {
+            if (this.node['inputs']) {
+                if (this.node['inputs'][this.item]) {
+                    if (this.node['inputs'][this.item]['subplan']) {
+                        return true;
+                    } else {
+                        return false;
+                    }
+                } else {
+                    return false;
+                }
+            } else {
+                return false;
+            }
+        }
+    }
+
+    checkMerge() {
+        if(this.node) {
+            if (this.node['mergeWith']) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.html
new file mode 100644
index 0000000..cda6cf5
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.html
@@ -0,0 +1,37 @@
+<!--/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/ -->
+<div *ngIf="plan_" class="plan-graph" id={{planName}}>
+    <mat-expansion-panel hideToggle>
+        <mat-expansion-panel-header class="plan-header header-centered-v">
+        <mat-icon>assessment</mat-icon>
+        <mat-panel-title>{{planName}}</mat-panel-title>
+        <mat-panel-description></mat-panel-description>
+        </mat-expansion-panel-header>
+        <mat-panel-description class='content'>
+        <div class='panel'>
+            <button mat-button class='button' (click)="showJSON()" matTooltip="Toggle JSON or Graphic View">JSON</button>
+        </div>
+        <div class="divider">
+            <div *ngIf="!jsonVisible" class="plan">
+            <plan-node-svg [planName]="planName" [node]="plan_" [level]="0" [item]="0" [subplan]="0"></plan-node-svg>
+            </div>
+            <div *ngIf="jsonVisible" class="json">
+            <div class='center'>
+                <pre class="json-content">{{jsonPlan}}</pre>
+            </div>
+            </div>
+        </div>
+        </mat-panel-description>
+    </mat-expansion-panel>
+</div>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.scss
new file mode 100644
index 0000000..916620c
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.scss
@@ -0,0 +1,98 @@
+/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.plan-graph {
+    display: block;
+    margin: 0 0px 0 0px;
+    padding: 0;
+    mat-expansion-panel {
+        border: none !important;
+    }
+}
+
+.panel {
+    display: flex;
+    flex-flow: row;
+    justify-content: flex-start;
+    border-bottom: 1px dashed gray;
+    margin-bottom: 15px;
+}
+
+.plan-header {
+    max-height: 42px;
+    min-height: 42px;
+    font-size: 0.80rem;
+    font-weight: 500;
+    border-bottom: 1px solid gray;
+}
+
+.divider {
+    display: flex;
+    flex-flow: row;
+    align-items: flex-start;
+}
+
+.plan {
+    margin: 0px;
+    padding: 20px;
+    padding-left: 50px;
+    padding-right: 50px;
+    margin-right: auto;
+    margin-left: auto;
+    padding-left: 50px;
+    overflow: visible;
+}
+
+.plan1 {
+    display: flow;
+    flex-flow: row;
+}
+
+.content {
+    margin-top: 20px;
+    display: block;
+    font-size: 0.80rem;
+    font-weight: 500;
+}
+
+.json {
+    //padding: 20px;
+    //padding-right: 50px;
+    //margin-right: 25px;
+    min-width: 100%;
+    max-width: 100%;
+}
+
+.json-content {
+    //border-left: 1px solid gray;
+    padding-left: 25px; //display: inline-block;
+    //margin: auto;
+}
+
+.button {
+    font-size: 12px !important;
+    float: right;
+    color: blue !important;
+    margin-bottom: 15px;
+}
+
+#wrapper {
+    position: relative;
+}
+
+.center {
+    margin-left: auto;
+    margin-right: auto;
+    width: 50%;
+}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.ts
new file mode 100644
index 0000000..e66ac5f
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/plan-view.component.ts
@@ -0,0 +1,113 @@
+import { Component, Input, SimpleChange } from '@angular/core';
+
+export  interface planCount {
+    nodesCnt: number,
+    levelsCnt: number
+}
+
+@Component({
+    selector: 'plan-view',
+    templateUrl: 'plan-view.component.html',
+    styleUrls: ['plan-view.component.scss'],
+})
+
+export class PlanViewComponent {
+
+    @Input() plan: any;
+    @Input() planName: any;
+    @Input() jsonPlan: any;
+
+    plan_: any;
+    numberOfLevels: number = 0;
+    numberOfNodes: number = 0;
+    jsonVisible = false;
+
+    constructor() {}
+
+    ngOnInit() {
+        this.plan_ = this.plan;
+        /* find the number of nodes in the tree */
+        let summary : planCount = {nodesCnt:0, levelsCnt:0}
+        summary = this.analyzePlan(this.plan_, summary);
+        this.numberOfLevels = summary.levelsCnt;
+        this.numberOfNodes = summary.nodesCnt;
+    }
+
+    ngOnChanges(changes: SimpleChange) {
+        this.plan_ = this.plan;
+        /* find the number of nodes in the tree */
+        let summary : planCount = {nodesCnt:0, levelsCnt:0}
+        summary = this.analyzePlan(this.plan_, summary);
+        this.numberOfLevels = summary.levelsCnt;
+        this.numberOfNodes = summary.nodesCnt;
+	}
+
+    /*
+    * See the JSON contents inside of each node
+    */
+    showJSON() {
+        this.jsonVisible = !this.jsonVisible;
+    }
+
+    /*
+    * Check the merge paths, from operation ID
+    */
+    operation = [];
+    checkOperationId(operationId, levelsCnt){
+        console.log('LEVEL:' + levelsCnt + 'OP' + operationId)
+       // console.log(this.operation)
+        if (this.operation.length > 0) {
+            for (let i = 0; i < this.operation.length; i++) {
+                if (this.operation[i] === operationId) {
+                    console.log('found')
+                    console.log('BREAK')
+                    this.operation = [];
+                    return true;
+                }
+            }
+        }
+        this.operation.push(operationId);
+        console.log('not found')
+        return false;
+    }
+
+    /*
+    * Counts the number of nodes/operations in the tree
+    */
+    analyzePlan(plan, planCounter) {
+        planCounter.nodesCnt += 1;
+        planCounter.levelsCnt += 1;
+        let nodes = {}
+        nodes = plan;
+        // augment
+        if (nodes) {
+            nodes['visible'] = true;
+            nodes['viewDetails'] = false;
+            if (nodes['inputs']) {
+                for (let i = 0; i< nodes['inputs'].length; i++)
+                {
+                    planCounter = this.analyzePlan(nodes['inputs'][i], planCounter);
+                }
+            }
+        }
+        return planCounter;
+    }
+
+    /*
+    * See the JSON contents inside of each node, with pre-format
+    * Not used in this version
+    */
+    toggleViewDetails(plan) {
+        let nodes = {}
+        nodes = plan;
+        // augment
+        nodes['visible'] = true;
+        nodes['viewDetails'] = !nodes['viewDetails'];
+        if (nodes['inputs']) {
+            for (let i = 0; i< nodes['inputs'].length; i++)
+            {
+                this.toggleViewDetails(nodes['inputs'][i]);
+            }
+        }
+    }
+}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.html
index 6dd3ef3..4aeaab5 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.html
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.html
@@ -11,14 +11,12 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */ -->
-
 <div class="query-container">
-  <div class="metadata">   
-    <awc-metadata class="metadata-card"></awc-metadata>
-  </div>
-  <div class="vertical">
-    <awc-query class="query-card"></awc-query>
-    <awc-results class="output-card"></awc-results>
-  </div>
-</div> 
-
+    <div class="content">
+        <awc-query class="input-card"></awc-query>
+        <awc-results class="output-card"></awc-results>
+    </div>
+    <div *ngIf="visible" class="drawer">
+        <awc-metadata></awc-metadata>
+    </div>
+</div>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.scss
index d6b530b..95e70e7 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.scss
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.scss
@@ -16,67 +16,40 @@
  * specific language governing permissions and limitations
  * under the License.
  */
- .query-container {
-    display: flex;
-    flex-direction: row;
-    //background-color: red;
-    width: 100%; 
-    margin:0;
-    padding:0;
-    overflow: hidden;
- }
 
-.metadata {
+.query-container {
     display: flex;
-    flex-direction: row;
-    width: 20%;
-   // background-color: rgb(0, 255, 42);
-    margin:0;
-    padding: 0;
-   // padding-right: 10px;
-    border-right: 1px solid hsla(0,0%,0%,.20);
-}
-
-.vertical {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 80%;
-    overflow: hidden;
-    margin:0;
-    padding: 1px0;
-   // background-color: rgb(38, 0, 255);
-}
-
-.metadata-card {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;     
+    flex-flow: row;
+    background-color: gainsboro;
     width: 100%;
-    overflow: hidden;
-    margin:0;
+    //min-height: 200px;
+    margin: 0;
     padding: 0;
-   // background-color: green;
+}
+
+.drawer {
+    transition-property: display;
+    width: 320px;
+}
+
+.content {
+    width: 100%;
 }
 
 .query-card {
     display: flex;
     flex-direction: row;
-    justify-content: center;     
+    justify-content: center;
     width: 100%;
-    overflow: hidden;
-    margin:0;
+    margin: 0;
     padding: 0;
-    //background-color: green;
 }
 
 .output-card {
     display: flex;
     flex-direction: row;
-    justify-content: center;     
+    justify-content: center;
     width: 100%;
-    overflow: hidden;
-    margin:0;
+    margin: 0;
     padding: 0;
-    //background-color: yellow;
-}
\ No newline at end of file
+}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.ts
index 776e184..aff5e50 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/query-container.component.ts
@@ -11,64 +11,35 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { Dataverse } from '../../shared/models/asterixDB.model'
+import { Component, AfterViewInit} from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
-import * as dataverseActions from '../../shared/actions/dataverse.actions'
-import * as datasetActions from '../../shared/actions/dataset.actions'
-import * as datatypesActions from '../../shared/actions/datatype.actions'
-import * as indexesActions from '../../shared/actions/index.actions'
-import * as metadataActions from '../../shared/actions/metadata.actions'
-import { ElementRef, ViewChild} from '@angular/core';
-import {DataSource} from '@angular/cdk/collections';
-import {BehaviorSubject} from 'rxjs/BehaviorSubject';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/observable/fromEvent';
-import { Subscription } from "rxjs/Rx";
-import * as fromRoot from '../../shared/reducers/dataverse.reducer';
-import { State } from '../../shared/reducers/dataverse.reducer';
-import * as sqlQueryActions from '../../shared/actions/query.actions'
+import { Observable } from 'rxjs';
+
 /*
  * query component
  * has editor (codemirror) for writing some query
  */
 @Component({
-	moduleId: module.id,
-	selector: 'awc-query-container',
-	templateUrl:'query-container.component.html',
-	styleUrls: ['query-container.component.scss']
+    moduleId: module.id,
+    selector: 'awc-query-container',
+    templateUrl:'query-container.component.html',
+    styleUrls: ['query-container.component.scss']
 })
 
-export class QueryContainerComponent {
-	nodes = []
-	constructor(private store: Store<any>) {
+export class QueryContainerComponent implements AfterViewInit {
+    sideMenuVisible$: Observable<any>;
+    visible = false;
 
-		this.store.select(s => s.metadata.tree).subscribe((data: any[]) => {
-			this.nodes = []
-			for (let i = 0; i < data.length; i++) {
-				if (data[i]['DataverseName']) {
-				    let node = { id: 0, name:"", children:[] };
-				    node.id = i;
-				    node.name = data[i]['DataverseName'];
-						for (let j = 0; j < data[i]['Datasets'].length; j++) {
-							let children = { id: 0, name:"", children:[] };
-							children.id = j
-							children.name = data[i]['Datasets'][j]['DatasetName'];
-							node.children.push(children)
-						}
-						this.nodes.push(node)
-				}
-			}
-		});
-	}
+    constructor(private store: Store<any>) {}
 
-	treeCalc() {
-		this.store.dispatch(new metadataActions.UpdateMetadataTree());
-	}
-}
+    ngAfterViewInit() {
+        this.sideMenuVisible$ = this.store.select(s => s.app.sideMenuVisible);
+        this.sideMenuVisible$.subscribe((data: any) => {
+            if (data === true) {
+                this.visible = true;
+            } else {
+                this.visible = false;
+            }
+        })
+    }
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.html
new file mode 100644
index 0000000..29487be
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.html
@@ -0,0 +1,40 @@
+<!--/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.S
+See the License for the specific language governing permissions and
+limitations under the License.
+*/-->
+<ul class="node">
+  <li class='node-children' *ngFor="let node of node_ let i = index" >
+    <div id="item{{node.item}}{{node.key}}{{node.value}}{{i}}" [ngSwitch]="nodeCheckType(node)">
+        <div *ngSwitchCase="'ROOT'" class="node-details" (click)="toggle(node)" (mouseover)="jsonPathSelect(node, i)" (mouseleave)="jsonPathDeselect(node, i)">
+            <i class='pre-item-icon' *ngIf="!checkRoot(node)">
+              <img src="/assets/tree.svg">
+            </i>
+            {{(node.label)}} [{{node.item}}] {{actionIcon(node)}} </div>
+        <div *ngSwitchCase="'ARRAY'" class="node-details" (click)="toggle(node)" (mouseover)="jsonPathSelect(node, i)" (mouseleave)="jsonPathDeselect(node, i)">
+              <i class='pre-item-icon' *ngIf="!checkRoot(node)">
+                <img src="./assets/tree.svg">
+              </i>
+              <span class='node-content'>{{node.label}}: [ {{childrenCount(node.children)}} ] {{actionIcon(node)}}</span></div>
+        <div *ngSwitchCase="'OBJECT'" class="node-details" (click)="toggle(node)" (mouseover)="jsonPathSelect(node, i)" (mouseleave)="jsonPathDeselect(node, i)">
+            <i class='pre-item-icon' *ngIf="!checkRoot(node)">
+                <img src="./assets/tree.svg">
+            </i>
+            <span class='node-content'>{{(node.label)}}: {{actionIcon(node)}}</span></div>
+        <div *ngSwitchCase="'KEYVALUE'" class="node-details" (click)="toggle(node)" (mouseover)="jsonPathSelect(node, i)" (mouseleave)="jsonPathDeselect(node, i)">
+            <i class='pre-item-icon' *ngIf="!checkRoot(node)">
+              <img src="./assets/tree.svg">
+            </i>
+            <span class='node-content'>{{(node.key)}}: <span class='value'>{{(node.value)}}</span></span>
+        </div>
+    </div>
+    <tree-node class='tree-node' (jsonPath)='changeJsonPathValue($event)' [node]="node.children" *ngIf="checkVisible(node)"></tree-node>
+</ul>
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.scss
new file mode 100644
index 0000000..3349a8e
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.scss
@@ -0,0 +1,63 @@
+/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.tree-node {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.node {
+    color: black;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    font-size: 14px;
+}
+
+.node-content{
+    padding-top: 5px;
+    border: 1px dashed gainsboro;
+}
+
+.node-details {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    list-style-type: none;
+    .node-content{
+        padding: 10px;
+        border: 1px dashed gainsboro;
+    }
+}
+
+.node-children {
+    &:hover {
+        cursor: pointer;
+    }
+    margin-left: 20px;
+    margin-bottom: 30px;
+}
+
+ul {
+    list-style-type: none;
+}
+
+.pre-item-icon {
+    opacity: 0.5;
+    padding-bottom: 6px;
+}
+
+.value {
+    color: blue;
+    padding: 5px;
+    border: 1px dashed gainsboro;
+}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.ts
new file mode 100644
index 0000000..405d6ef
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-node.component.ts
@@ -0,0 +1,104 @@
+/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Component, Input, Output, OnInit, OnChanges, EventEmitter } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'tree-node',
+    templateUrl: 'tree-node.component.html',
+    styleUrls: ['tree-node.component.scss'],
+})
+
+export class TreeNodeComponent {
+
+    @Input() node: any;
+    @Output() jsonPath = new EventEmitter();
+
+    node_: any;
+    final = true;
+    visible = true;
+    nestedVisible = false;
+    nodeContentKeys: any;
+    nodeChildren: any;
+    jsonPathChild_: any;
+
+    constructor() { this.final = true; }
+
+    initData() {
+        this.node_ = this.node;
+    }
+
+    changeJsonPathValue(event) {
+        this.jsonPathChild_ = event.link;
+        this.jsonPath.emit(event);
+    }
+
+    ngOnChanges() {
+       this.initData();
+    }
+
+    ngOnInit() {
+       this.initData();
+    }
+
+    toggle(node){
+        node.visible = !node.visible;
+    }
+
+    toggleNested(item){
+        item.visible = !item.visible;
+    }
+
+    checkVisible(item) {
+        return (item.visible);
+    }
+
+    nodeCheckType(node) {
+        return node.type;
+    }
+
+    childrenCount(children) {
+        return children.length;
+    }
+
+    jsonPathSelect(item, index){
+        var el = document.getElementById('item'+ item.item + item.key + item.value + index);
+        el.style.color = 'blue';
+        var itemLink = ' [ ' + item.item + ' ] ' + ': ' + item.link;
+        this.jsonPath.emit({ link: itemLink });
+    }
+
+    jsonPathDeselect(item, index) {
+        var el = document.getElementById('item'+ item.item + item.key + item.value + index);
+        el.style.color = "black";
+    }
+
+    actionIcon(item) {
+        if(item.visible === true) {
+            return '-';
+        }
+        else {
+            return '+';
+        }
+    }
+
+    checkRoot(item) {
+        if(item.level === 0) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.html b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.html
new file mode 100644
index 0000000..2488c3e
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.html
@@ -0,0 +1,62 @@
+<!--/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/ -->
+<div id='top' *ngIf='treeData' class='tree-card'>
+    <mat-expansion-panel hideToggle [expanded]="true">
+        <mat-expansion-panel-header class='header header-centered-v'>
+            <mat-panel-title>OUTPUT DATA</mat-panel-title>
+            <mat-icon>format_list_numbered_rtl</mat-icon>
+        </mat-expansion-panel-header>
+        <mat-panel-description class='content'>
+            <div class='panel'>
+                <span class='summary' >Items: {{metrics.resultCount}} Size: {{metrics.resultSizeKb}} Kb</span>
+                <mat-paginator [showFirstLastButtons]="true" [length]='metrics.resultCount' [pageSize]='pagedefaults.pageSize' [pageSizeOptions]='pageSizeOptions' (page)='showResults($event, false)'>
+                    </mat-paginator>
+                <span class='options'>
+                    <button mat-button class='button' (click)='dataExpand()' matTooltip="Expand Data"><mat-icon>add_circle</mat-icon></button>
+                    <button mat-button class='button' (click)='dataCollapse()' matTooltip="Collapse Data"><mat-icon>remove_circle_outline</mat-icon></button>
+                    <button mat-button class='button button-json' (click)='showTable()' matTooltip="Show Table View">TABLE</button>
+                    <button mat-button class='button button-json' (click)='showTree()' matTooltip="Show Tree View">TREE</button>
+                    <button mat-button class='button button-json' (click)='showJSON()' matTooltip="Show JSON View">JSON</button>
+                    <button id='export' mat-button class='button' (click)='exportToText()' matTooltip="Export JSON file to Computer">EXPORT</button>
+                </span>
+            </div>
+            <div *ngIf='treeVisible' class='navi-data' class='navi-data'>
+                <mat-icon class='navi-path'>link</mat-icon>
+                <span class='navi-path'>{{jsonPath_}}</span>
+            </div>
+            <div class='divider'>
+                <div *ngIf='tableVisible'>
+                    <table mat-table [dataSource]="dataSource" class='items-table'>
+                        <ng-container matColumnDef="{{col}}" *ngFor="let col of displayedColumns">
+                            <th mat-header-cell *matHeaderCellDef class='cell'>{{col}}</th>
+                            <td mat-cell *matCellDef="let element"class='cell' >{{element[col]}}</td>
+                        </ng-container>
+                        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                    </table>
+                </div>
+                <div *ngIf='treeVisible'>
+                    <tree-node (jsonPath)='changeJsonPathValue($event)' [node]='treeData_'></tree-node>
+                </div>
+                <div *ngIf='jsonVisible' class='json'>
+                    <pre>{{jsonData}}</pre>
+                </div>
+                <div id='bottom'></div>
+            </div>
+            <button *ngIf='showGoTop' mat-fab color='warn' class='button back-button' (click)='gotoTop()'>
+                <mat-icon>keyboard_arrow_up</mat-icon>
+            </button>
+        </mat-panel-description>
+    </mat-expansion-panel>
+</div>
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.scss
new file mode 100644
index 0000000..effa0ad
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.scss
@@ -0,0 +1,141 @@
+/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.tree-card {
+    display: block;
+    margin: 0 0px 0 0px;
+    padding: 0;
+    background-color: seashell;
+}
+
+.panel {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    font-size: 12px;
+    padding-top: 15px;
+    border-bottom: 1px dashed gray;
+    padding-bottom: 15px;
+}
+
+.navi-buttons {
+    display: flex;
+    flex-flow: row;
+    justify-content: flex-start;
+}
+
+.header {
+    max-height: 42px;
+    min-height: 42px;
+    display: flex;
+    flex-flow: row;
+    font-size: 0.80rem;
+    font-weight: 500;
+    border-bottom: 1px solid blue;
+}
+
+.divider {
+    display: flex;
+    flex-flow: row;
+    align-items: flex-start;
+    font-size: 14px;
+    border: 1px dashed gainsboro;
+    padding-top: 20px;
+    padding-bottom: 20px
+}
+
+.content {
+    display: flex;
+    flex-flow: column;
+    font-size: 0.80rem;
+    font-weight: 500;
+    padding-bottom: 20px;
+    margin-right: 0px;
+}
+
+.json {
+    padding: 20px;
+    padding-right: 50px;
+    margin-right: 25px;
+    min-width: 50%;
+    max-width: 50%;
+}
+
+.button {
+    font-size: 12px !important;
+    float: left;
+    color: black;
+}
+
+.button-json {
+    color: blue !important;
+}
+
+.navi-data {
+    display: flex;
+    flex-flow: row;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    padding-bottom: 15px;
+    font-size: 14px;
+    border-bottom: 1px dashed gray;
+}
+
+.navi-path {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    font-size: 14px;
+    color: blue;
+    border-radius: 4px;
+    height: 40px;
+}
+
+.back-button {
+    cursor: pointer;
+    position: fixed;
+    bottom: 50px;
+    right: 100px;
+    font-size: 14px;
+}
+
+.summary {
+    float: left;
+    margin-right: 15px;
+    padding-top: 8px;
+    padding-bottom: 10px;
+    padding-left: 15px;
+    padding-right: 15px;
+    font-size: 14px;
+    background-color: gainsboro;
+    border-radius: 4px;
+    color: #30332E;
+    display: inline-flex;
+}
+
+table {
+    width: 100%;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+    background: #f5f5f5;
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+    background: #efefef;
+}
+
+.cell {
+    padding-left: 15px;
+}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.ts b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.ts
new file mode 100644
index 0000000..823d994
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/app/dashboard/query/tree-view.component.ts
@@ -0,0 +1,332 @@
+/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Component, Input, NgZone, SimpleChange, ViewChild } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { saveAs } from 'file-saver';
+
+@Component({
+    selector: 'tree-view',
+    templateUrl: 'tree-view.component.html',
+    styleUrls: ['tree-view.component.scss']
+})
+
+export class TreeViewComponent {
+    @Input() data: any;
+    @Input() queryId: any;
+
+    jsonVisible: any = false;
+    tableVisible: any = true;
+    treeVisible: any = false;
+    jsonData: any;
+    jsonPath_: any = ': < JSON PATH >';
+    rawData: any;
+    treeData: any;
+    treeData_: any;
+    metrics: any;
+    currentIndex: any = 0;
+    currentRange: any;
+    /* see 10 records as initial set */
+    pagedefaults: any = { pageIndex: 0, pageSize:10, lenght: 0};
+    pageSizeOptions = [5, 10, 25, 100, 200];
+    viewMode = 'JSON';
+    showGoTop = false;
+    showGoBottom = false;
+    EXPANDED = true;
+    COLLAPSED = false;
+
+    flattenData = [];
+    dataSource = new MatTableDataSource<any>();
+
+
+    private eventOptions: boolean|{capture?: boolean, passive?: boolean};
+
+    constructor( private ngZone: NgZone) {}
+
+    ngOnInit() {
+        this.ngZone.runOutsideAngular(() => {
+            window.addEventListener('scroll', this.scroll, <any>this.eventOptions);
+        });
+    }
+
+    ngOnChanges(changes: SimpleChange) {
+        this.rawData = this.data['results'];
+        if (this.rawData) {
+            this.showResults(this.pagedefaults, this.EXPANDED);
+        }
+    }
+
+    /*
+    * Filters the resulst array of JSON Objects
+    */
+    filter(element, index, array) {
+        var params = Object.create(this) ;
+        var startRange = (params.pageSize * params.pageIndex)
+        return index >= startRange && index < startRange + params.pageSize;
+    }
+
+    showResults(range, expanded) {
+        this.currentRange = range;
+        this.currentIndex = this.currentRange.pageIndex;
+        this.treeData = this.rawData.filter(this.filter, this.currentRange);
+        // Build the dynamic table column names
+        this.buildTableColums(this.treeData[0]);
+        // Flat the results to display in a table
+        this.flatDataforTable(this.treeData);
+
+        if (this.treeData.length > 0) {
+            this.metrics = this.data['metrics'];
+            this.metrics['resultSizeKb'] = (this.metrics.resultSize/1024).toFixed(2);
+            var myData_ = [];
+            for (let i = 0; i < this.treeData.length; i++) {
+                let  nodeContent= {};
+                // mat-paginator start counting from 1, thats why the i+1 trick
+                myData_.push(this.generateTree(this.treeData[i], '/', nodeContent, (this.currentRange.pageSize * this.currentRange.pageIndex) + (i + 1), 0, expanded));
+            }
+
+            this.treeData_ = myData_;
+            /* Prepare the JSON view */
+            this.jsonData = JSON.stringify(this.treeData, null, 8)
+        } else {
+            console.log('no data')
+            this.treeData = [];
+        }
+    }
+
+    /*
+    * Shows JSON View
+    */
+    showJSON() {
+        this.jsonVisible = true;
+        this.treeVisible = false;
+        this.tableVisible = false;
+    }
+
+    /*
+    * Shows Table View
+    */
+    showTable() {
+        this.jsonVisible = false;
+        this.treeVisible = false;
+        this.tableVisible = true;
+        this.viewMode = 'TABLE';
+    }
+
+    /*
+    * Shows Tree Mode
+    */
+    showTree() {
+        this.jsonVisible = false;
+        this.treeVisible = true;
+        this.tableVisible = false;
+        this.viewMode = 'TREE';
+    }
+
+    /*
+    * Export to CSV
+    */
+    exportToCSV(){
+        var exportOutput = JSON.stringify(this.rawData, null, 4);
+        var blob = new Blob([this.jsonData], {type: "text/csv;charset=utf-8"});
+        saveAs(blob, "Asterix-results.csv");
+    }
+
+    /*
+    *  Export to plain text
+    */
+    exportToText(){
+        var exportOutput = JSON.stringify(this.rawData, null, 4);
+        var blob = new Blob([exportOutput], {type: "text/json;charset=utf-8"});
+        saveAs(blob, "Asterix-results.json");
+    }
+
+    /*
+    * This function converts the json object into a node/array graph structure ready to be display as a tree
+    * it will also augment the nodes with a link containing the path that the elements occupies in the json graph
+    */
+    generateTree(node, nodeLink, rootMenu, index, level, expanded): any {
+        // Check in case the root object is not defined properly
+        if (rootMenu === {}) {
+            console.log(expanded)
+            rootMenu = { item: '', label: 'K', key: '', value: '', link: '/', visible: expanded, children: [], level: 0};
+        }
+
+        let nodeArray = [];
+
+        // Going through all the keys in a node looking for objects or array of key values
+        // and create a sub menu if is an object.
+        Object.keys(node).map((k) => {
+
+            if (typeof node[k] === 'object') {
+                if(Array.isArray(node[k]) ){
+                    let nodeObject = { nested: true, item: '', label: '', key: '', value: '', type: 'ARRAY', link: '/', visible: expanded, children: [], level: level };
+                    nodeObject.item = index;
+                    nodeObject.label = k;
+                    nodeObject.key = k;
+                    nodeObject.value = node[k];
+                    nodeObject.link = nodeLink + '/' + k;
+                    nodeObject.level = level;
+                    level = level + 1;
+                    // if this is an object then a new node is created and
+                    // recursive call to find and fill with the nested elements
+                    let newNodeObject = this.generateTree(node[k], nodeObject.link, nodeObject, index, level, expanded);
+                    // if this is the first node, then will become the root.
+                    if (rootMenu.children) {
+                        rootMenu.children.push(newNodeObject)
+                    } else {
+                        rootMenu = newNodeObject;
+                        newNodeObject.type = 'ROOT';
+                    }
+                } else {
+                    let nodeObject = { nested: true, item: '', label: '', key: '', value: '', type: 'OBJECT', link: '/', visible: expanded, children: [], level: level };
+                    nodeObject.item = index;
+                    nodeObject.label = k;
+                    nodeObject.key = k;
+                    nodeObject.value = node[k];
+                    nodeObject.link = nodeLink + '/' + k;
+                    nodeObject.level = level;
+                    level = level + 1;
+                    // if this is an object then a new node is created and
+                    // recursive call to find and fill with the nested elements
+                    let newNodeObject = this.generateTree(node[k], nodeObject.link, nodeObject, index, level, expanded);
+                    // if this is the first node, then will become the root.
+                    if (rootMenu.children) {
+                        rootMenu.children.push(newNodeObject)
+                    } else {
+                        nodeObject.nested = false;
+                        newNodeObject.visible = expanded;
+                        newNodeObject.type = 'ROOT';
+                        rootMenu = newNodeObject
+                    }
+                }
+            }
+            else {
+                // Array of key values converted into a unique string with a : separator
+                let nodeKeyValue = { nested: false, item: '', label: '', key: '', value: '', type: 'KEYVALUE', link: '/', visible: expanded, children: [], level: level};
+                nodeKeyValue.item = index;
+                nodeKeyValue.label = k + " : " + node[k];
+                nodeKeyValue.key = k;
+                nodeKeyValue.value = node[k];
+                nodeKeyValue.link = nodeLink + '/' + k + '/' + node[k];
+                nodeKeyValue.level = level;
+                nodeArray.push(nodeKeyValue);
+            }
+        })
+        // The array will be added as value to a parent key.
+        if (nodeArray.length > 0) {
+            rootMenu.children = nodeArray.concat(rootMenu.children)
+        }
+
+        return rootMenu
+    }
+
+    gotoTop() {
+        window.document.getElementById('top').scrollIntoView();
+    }
+
+    ngOnDestroy() {
+        window.removeEventListener('scroll', this.scroll, <any>this.eventOptions);
+    }
+
+    scroll = ($event): void => {
+        this.ngZone.run(() => {
+            this.showGoTop = false;
+            this.showGoBottom = true;
+            var element = document.getElementById('top');
+            if (element) {
+                var bodyRect = document.body.getBoundingClientRect(),
+                elemRect = element.getBoundingClientRect(),
+                offset   = elemRect.top - bodyRect.top;
+                var elementOptimizedPlan = document.getElementById('OPTIMIZED PLAN');
+                var elementPlan = document.getElementById('PLAN');
+
+                // this is calculated just manually
+                var elementOptimizedPlanOffset = 0;
+                if (elementOptimizedPlan) {
+                    elementOptimizedPlanOffset = elementOptimizedPlan.clientHeight;
+                }
+
+                var elementPlanOffset = 0;
+                if (elementPlan) {
+                    elementPlanOffset = elementPlan.clientHeight;
+                }
+
+                if (window.pageYOffset > 600 + elementPlanOffset + elementOptimizedPlanOffset) {
+                    this.showGoTop = true;
+                } else {
+                    this.showGoBottom = false;
+                }
+            }
+        })
+    }
+
+    changeJsonPathValue(event) {
+        this.jsonPath_ = event.link;
+    }
+
+    dataExpand() {
+        this.showResults(this.currentRange, this.EXPANDED);
+    }
+
+    dataCollapse() {
+        this.showResults(this.currentRange, this.COLLAPSED);
+    }
+
+    /*
+    * Build the table column names from result data
+    */
+    displayedColumns: string[] = [];
+    buildTableColums(item) {
+        var resultKeyList = Object.keys(item);
+        var resultKey: string = resultKeyList[0];
+        if (item[resultKey] instanceof Object) {
+            // is a SQL++ Query Results
+            var nestedKeyList = Object.keys(item[resultKey]);
+            this.displayedColumns = nestedKeyList;
+        }
+        else { // is a SQL++ Metadata Results and there is an Array
+            this.displayedColumns = resultKeyList;
+        }
+    }
+
+    /*
+    * Flat the result data for Table display
+    */
+    flatDataforTable(data) {
+        var resultKeyList = Object.keys(data[0]);
+        var resultKey: string = resultKeyList[0];
+        this.flattenData = [];
+        if (data[0][resultKey] instanceof Object) {
+            for (let i = 0; i < data.length; i++) {
+                var nestedKeyList = Object.keys(data[i][resultKey]);
+                for (let k = 0; k < nestedKeyList.length; k++) {
+                    if ( typeof data[i][resultKey][nestedKeyList[k]] === 'object' ){
+                        var nestedObjectStr = JSON.stringify(data[i][resultKey][nestedKeyList[k]], null, '\n');
+                        // Not Implemented Yet
+                    } else {
+                        this.flattenData[i] = data[i][resultKey];
+                    }
+                }
+            }
+        }
+        else {
+            this.flattenData = data;
+        }
+
+        this.dataSource.data = this.flattenData;
+    }
+
+    jsonTransform(item) {
+        return JSON.stringify(item, null, 4);
+    }
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/db.ts b/asterixdb/asterix-dashboard/src/node/src/app/db.ts
deleted file mode 100755
index 8f51b00..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/db.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { DBSchema } from '@ngrx/db';
-
-/*
-* Persistent storage capability to the dashboard in case is needed.
-*/
-export const schema: DBSchema = {
-  version: 1,
-  name: 'asterixDB_app',
-  stores: {},
-};
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/material.module.ts b/asterixdb/asterix-dashboard/src/node/src/app/material.module.ts
index 3bb67d9..d172bf8 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/material.module.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/material.module.ts
@@ -13,36 +13,36 @@
 */
 import {NgModule} from '@angular/core';
 import {
-  MatAutocompleteModule,
-  MatButtonModule,
-  MatButtonToggleModule,
-  MatCardModule,
-  MatCheckboxModule,
-  MatChipsModule,
-  MatDatepickerModule,
-  MatDialogModule,
-  MatExpansionModule,
-  MatFormFieldModule,
-  MatGridListModule,
-  MatIconModule,
-  MatInputModule,
-  MatListModule,
-  MatMenuModule,
-  MatPaginatorModule,
-  MatProgressBarModule,
-  MatProgressSpinnerModule,
-  MatRadioModule,
-  MatSelectModule,
-  MatSidenavModule,
-  MatSliderModule,
-  MatSlideToggleModule,
-  MatSnackBarModule,
-  MatSortModule,
-  MatTableModule,
-  MatTabsModule,
-  MatToolbarModule,
-  MatTooltipModule,
-  MatStepperModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatStepperModule,
 } from '@angular/material';
 import {MatNativeDateModule, MatRippleModule} from '@angular/material';
 import {CdkTableModule} from '@angular/cdk/table';
@@ -59,47 +59,48 @@
 * serve AsterixDB Dashboard
 */
 @NgModule({
-  exports: [
-    MatAutocompleteModule,
-    MatButtonModule,
-    MatButtonToggleModule,
-    MatCardModule,
-    MatCheckboxModule,
-    MatChipsModule,
-    MatTableModule,
-    MatDatepickerModule,
-    MatDialogModule,
-    MatExpansionModule,
-    MatFormFieldModule,
-    MatGridListModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatMenuModule,
-    MatPaginatorModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
-    MatRadioModule,
-    MatRippleModule,
-    MatSelectModule,
-    MatSidenavModule,
-    MatSlideToggleModule,
-    MatSliderModule,
-    MatSnackBarModule,
-    MatSortModule,
-    MatStepperModule,
-    MatTabsModule,
-    MatToolbarModule,
-    MatTooltipModule,
-    MatNativeDateModule,
-    CdkTableModule,
-    A11yModule,
-    BidiModule,
-  //  CdkAccordionModule,
-    ObserversModule,
-    OverlayModule,
-    PlatformModule,
-    PortalModule,
-  ]
+    exports: [
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatTableModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatExpansionModule,
+        MatFormFieldModule,
+        MatGridListModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatProgressSpinnerModule,
+        MatRadioModule,
+        MatRippleModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatSlideToggleModule,
+        MatSliderModule,
+        MatSnackBarModule,
+        MatSortModule,
+        MatStepperModule,
+        MatTabsModule,
+        MatTableModule,
+        MatToolbarModule,
+        MatTooltipModule,
+        MatNativeDateModule,
+        CdkTableModule,
+        A11yModule,
+        BidiModule,
+      //  CdkAccordionModule,
+        ObserversModule,
+        OverlayModule,
+        PlatformModule,
+        PortalModule,
+    ]
 })
-export class MaterialModule {}
+export class MaterialModule {}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/app.actions.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/app.actions.ts
index 29da05f..186a082 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/app.actions.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/app.actions.ts
@@ -12,22 +12,36 @@
 limitations under the License.
 */
 import { Action } from '@ngrx/store';
-import { AsterixDBQueryMessage, Dataset } from '../models/asterixDB.model';
 
 /*
 * Definition of App Actions
 */
 export const APP_MODE_CHANGE = '[App State] App Mode Change';
+export const APP_SIDE_MENU = '[App State] App Side Menu Mode Change';
+export const APP_QUERY_INPUT_INDEX = '[App State] App Query Input Index';
+export const APP_ACTIVE_DATAVERSE = '[App State] App Active Dataverse';
 
 /*
 * Guide Select Datasets for UI Helpers
 */
 export class ChangeMode implements Action {
-  readonly type = APP_MODE_CHANGE;
-  constructor(public payload: string) {}
+    readonly type = APP_MODE_CHANGE;
+    constructor(public payload: string) {}
+}
+
+export class setEditorIndex implements Action {
+    readonly type = APP_QUERY_INPUT_INDEX;
+    constructor(public payload: string) {}
+}
+
+export class setSideMenuVisible implements Action {
+    readonly type = APP_SIDE_MENU;
+    constructor(public payload: boolean) {}
 }
 
 /*
 * Exports of datasets actions
 */
-export type All = ChangeMode;
+export type All = ChangeMode |
+    setEditorIndex |
+    setSideMenuVisible;
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataset.actions.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataset.actions.ts
index a49e07c..61259bb 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataset.actions.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataset.actions.ts
@@ -12,7 +12,6 @@
 limitations under the License.
 */
 import { Action } from '@ngrx/store';
-import { AsterixDBQueryMessage, Dataset } from '../models/asterixDB.model';
 
 /*
 * Definition of Datasets Actions
@@ -36,95 +35,95 @@
 * Guide Select Datasets for UI Helpers
 */
 export class GuideSelectDatasets implements Action {
-  readonly type = GUIDE_SELECT_DATASET;
-  constructor(public payload: string) {}
+    readonly type = GUIDE_SELECT_DATASET;
+    constructor(public payload: string) {}
 }
 
 /*
 * Select Datasets
 */
 export class SelectDatasets implements Action {
-  readonly type = SELECT_DATASETS;
-  constructor(public payload: string) {}
+    readonly type = SELECT_DATASETS;
+    constructor(public payload: string) {}
 }
 
 export class SelectDatasetsSuccess implements Action {
-  readonly type = SELECT_DATASETS_SUCCESS;
-  constructor(public payload: AsterixDBQueryMessage[]) {}
+    readonly type = SELECT_DATASETS_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class SelectDatasetsFail implements Action {
-  readonly type = SELECT_DATASETS_FAIL;
-  constructor(public payload: AsterixDBQueryMessage[]) {}
+    readonly type = SELECT_DATASETS_FAIL;
+    constructor(public payload: any[]) {}
 }
 
 /*
 * Create Dataset
 */
 export class CreateDataset implements Action {
-  readonly type = CREATE_DATASET;
-  constructor(public payload: string) {}
+    readonly type = CREATE_DATASET;
+    constructor(public payload: string) {}
 }
 
 export class CreateDatasetSuccess implements Action {
-  readonly type = CREATE_DATASET_SUCCESS;
-  constructor(public payload: Dataset[]) {}
+    readonly type = CREATE_DATASET_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class CreateDatasetFail implements Action {
-  readonly type = CREATE_DATASET_FAIL;
-  constructor(public payload: Dataset) {}
+    readonly type = CREATE_DATASET_FAIL;
+    constructor(public payload: any) {}
 }
 
 /*
 * Update Dataset
 */
 export class UpdateDataset implements Action {
-  readonly type = UPDATE_DATASET;
-  constructor(public payload: Dataset) {}
+    readonly type = UPDATE_DATASET;
+    constructor(public payload: any) {}
 }
 
 export class UpdateDatasetSuccess implements Action {
-  readonly type = UPDATE_DATASET_SUCCESS;
-  constructor(public payload: Dataset[]) {}
+    readonly type = UPDATE_DATASET_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class UpdateDatasetFail implements Action {
-  readonly type = UPDATE_DATASET_FAIL;
-  constructor(public payload: Dataset) {}
+    readonly type = UPDATE_DATASET_FAIL;
+    constructor(public payload: any) {}
 }
 
 /*
 * Drop Dataset
 */
 export class DropDataset implements Action {
-  readonly type = DROP_DATASET;
-  constructor(public payload: string) {}
+    readonly type = DROP_DATASET;
+    constructor(public payload: string) {}
 }
 
 export class DropDatasetSuccess implements Action {
-  readonly type = DROP_DATASET_SUCCESS;
-  constructor(public payload: Dataset[]) {}
+    readonly type = DROP_DATASET_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class DropDatasetFail implements Action {
-  readonly type = DROP_DATASET_FAIL;
-  constructor(public payload: Dataset) {}
+    readonly type = DROP_DATASET_FAIL;
+    constructor(public payload: any) {}
 }
 
 /*
 * Exports of datasets actions
 */
 export type All = SelectDatasets |
-  SelectDatasetsSuccess |
-  SelectDatasetsFail |
-  CreateDataset |
-  CreateDatasetSuccess |
-  CreateDatasetFail |
-  UpdateDataset |
-  UpdateDatasetSuccess |
-  UpdateDatasetFail |
-  DropDataset |
-  DropDatasetSuccess |
-  DropDatasetFail | 
-  GuideSelectDatasets;
+    SelectDatasetsSuccess |
+    SelectDatasetsFail |
+    CreateDataset |
+    CreateDatasetSuccess |
+    CreateDatasetFail |
+    UpdateDataset |
+    UpdateDatasetSuccess |
+    UpdateDatasetFail |
+    DropDataset |
+    DropDatasetSuccess |
+    DropDatasetFail |
+    GuideSelectDatasets;
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/datatype.actions.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/datatype.actions.ts
index 5543a7a..2e6acba 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/datatype.actions.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/datatype.actions.ts
@@ -12,7 +12,6 @@
 limitations under the License.
 */
 import { Action } from '@ngrx/store';
-import { AsterixDBQueryMessage, Datatype } from '../models/asterixDB.model';
 
 /*
 * Definition of Datatypes Actions
@@ -34,89 +33,89 @@
 * Select Datatypes
 */
 export class SelectDatatypes implements Action {
-  readonly type = SELECT_DATATYPES;
-  constructor(public payload: string) {}
+    readonly type = SELECT_DATATYPES;
+    constructor(public payload: string) {}
 }
 
 export class SelectDatatypesSuccess implements Action {
-  readonly type = SELECT_DATATYPES_SUCCESS;
-  constructor(public payload: AsterixDBQueryMessage[]) {}
+    readonly type = SELECT_DATATYPES_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class SelectDatatypesFail implements Action {
-  readonly type = SELECT_DATATYPES_FAIL;
-  constructor(public payload: AsterixDBQueryMessage[]) {}
+    readonly type = SELECT_DATATYPES_FAIL;
+    constructor(public payload: any[]) {}
 }
 
 /*
 * Create Datatype
 */
 export class CreateDatatype implements Action {
-  readonly type = CREATE_DATATYPE;
-  constructor(public payload: string) {}
+    readonly type = CREATE_DATATYPE;
+    constructor(public payload: string) {}
 }
 
 export class CreateDatatypeSuccess implements Action {
-  readonly type = CREATE_DATATYPE_SUCCESS;
-  constructor(public payload: Datatype[]) {}
+    readonly type = CREATE_DATATYPE_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class CreateDatatypeFail implements Action {
-  readonly type = CREATE_DATATYPE_FAIL;
-  constructor(public payload: Datatype) {}
+    readonly type = CREATE_DATATYPE_FAIL;
+    constructor(public payload: any) {}
 }
 
 /*
 * Update Datatype
 */
 export class UpdateDatatype implements Action {
-  readonly type = UPDATE_DATATYPE;
-  constructor(public payload: Datatype) {}
+    readonly type = UPDATE_DATATYPE;
+    constructor(public payload: any) {}
 }
 
 export class UpdateDatatypeSuccess implements Action {
-  readonly type = UPDATE_DATATYPE_SUCCESS;
-  constructor(public payload: Datatype[]) {}
+    readonly type = UPDATE_DATATYPE_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class UpdateDatatypeFail implements Action {
-  readonly type = UPDATE_DATATYPE_FAIL;
-  constructor(public payload: Datatype) {}
+    readonly type = UPDATE_DATATYPE_FAIL;
+    constructor(public payload: any) {}
 }
 
 /*
 * Drop Datatype
 */
 export class DropDatatype implements Action {
-  readonly type = DROP_DATATYPE;
+    readonly type = DROP_DATATYPE;
 
-  constructor(public payload: string) {}
+    constructor(public payload: string) {}
 }
 
 export class DropDatatypeSuccess implements Action {
-  readonly type = DROP_DATATYPE_SUCCESS;
+    readonly type = DROP_DATATYPE_SUCCESS;
 
-  constructor(public payload: Datatype[]) {}
+    constructor(public payload: any[]) {}
 }
 
 export class DropDatatypeFail implements Action {
-  readonly type = DROP_DATATYPE_FAIL;
+    readonly type = DROP_DATATYPE_FAIL;
 
-  constructor(public payload: Datatype) {}
+    constructor(public payload: any) {}
 }
 
 /*
 * Exports of datastypes actions
 */
 export type All = SelectDatatypes |
-  SelectDatatypesSuccess |
-  SelectDatatypesFail |
-  CreateDatatype |
-  CreateDatatypeSuccess |
-  CreateDatatypeFail |
-  UpdateDatatype |
-  UpdateDatatypeSuccess |
-  UpdateDatatypeFail |
-  DropDatatype |
-  DropDatatypeSuccess |
-  DropDatatypeFail;
+    SelectDatatypesSuccess |
+    SelectDatatypesFail |
+    CreateDatatype |
+    CreateDatatypeSuccess |
+    CreateDatatypeFail |
+    UpdateDatatype |
+    UpdateDatatypeSuccess |
+    UpdateDatatypeFail |
+    DropDatatype |
+    DropDatatypeSuccess |
+    DropDatatypeFail;
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataverse.actions.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataverse.actions.ts
index dc33c0a..ed0eb8f 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataverse.actions.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/dataverse.actions.ts
@@ -12,7 +12,6 @@
 limitations under the License.
 */
 import { Action } from '@ngrx/store';
-import { AsterixDBQueryMessage, Dataverse } from '../models/asterixDB.model';
 
 /*
 * Definition of Dataverses Actions
@@ -29,91 +28,99 @@
 export const DROP_DATAVERSE             = '[Dataverse Collection] Drop Dataverses';
 export const DROP_DATAVERSE_SUCCESS     = '[Dataverse Collection] Drop Dataverses Success';
 export const DROP_DATAVERSE_FAIL        = '[Dataverse Collection] Drop Dataverses Fail';
+export const SET_DEFAULT_DATAVERSE      = '[Dataverse Collection] Set Default Dataverse';
 
 /*
 * Select Dataverses
 */
 export class SelectDataverses implements Action {
-  readonly type = SELECT_DATAVERSES;
-  constructor(public payload: string) {}
+    readonly type = SELECT_DATAVERSES;
+    constructor(public payload: string) {}
 }
 
 export class SelectDataversesSuccess implements Action {
-  readonly type = SELECT_DATAVERSES_SUCCESS;
-  constructor(public payload: AsterixDBQueryMessage[]) {}
+    readonly type = SELECT_DATAVERSES_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class SelectDataversesFail implements Action {
-  readonly type = SELECT_DATAVERSES_FAIL;
-  constructor(public payload: AsterixDBQueryMessage[]) {}
+    readonly type = SELECT_DATAVERSES_FAIL;
+    constructor(public payload: any[]) {}
 }
 
 /*
 * Create Dataverse
 */
 export class CreateDataverse implements Action {
-  readonly type = CREATE_DATAVERSE;
-  constructor(public payload: string) {}
+    readonly type = CREATE_DATAVERSE;
+    constructor(public payload: string) {}
 }
 
 export class CreateDataverseSuccess implements Action {
-  readonly type = CREATE_DATAVERSE_SUCCESS;
-  constructor(public payload: Dataverse[]) {}
+    readonly type = CREATE_DATAVERSE_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class CreateDataverseFail implements Action {
-  readonly type = CREATE_DATAVERSE_FAIL;
-  constructor(public payload: Dataverse) {}
+    readonly type = CREATE_DATAVERSE_FAIL;
+    constructor(public payload: any) {}
 }
 
 /*
 * Update Dataverse
 */
 export class UpdateDataverse implements Action {
-  readonly type = UPDATE_DATAVERSE;
-  constructor(public payload: Dataverse) {}
+    readonly type = UPDATE_DATAVERSE;
+    constructor(public payload: any) {}
 }
 
 export class UpdateDataverseSuccess implements Action {
-  readonly type = UPDATE_DATAVERSE_SUCCESS;
-  constructor(public payload: Dataverse[]) {}
+    readonly type = UPDATE_DATAVERSE_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class UpdateDataverseFail implements Action {
-  readonly type = UPDATE_DATAVERSE_FAIL;
-  constructor(public payload: Dataverse) {}
+    readonly type = UPDATE_DATAVERSE_FAIL;
+    constructor(public payload: any) {}
 }
 
 /*
 * Drop Dataverse
 */
 export class DropDataverse implements Action {
-  readonly type = DROP_DATAVERSE;
-  constructor(public payload: string) {}
+    readonly type = DROP_DATAVERSE;
+    constructor(public payload: string) {}
 }
 
 export class DropDataverseSuccess implements Action {
-  readonly type = DROP_DATAVERSE_SUCCESS;
-  constructor(public payload: Dataverse[]) {}
+    readonly type = DROP_DATAVERSE_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class DropDataverseFail implements Action {
-  readonly type = DROP_DATAVERSE_FAIL;
-  constructor(public payload: Dataverse) {}
+    readonly type = DROP_DATAVERSE_FAIL;
+    constructor(public payload: any) {}
 }
 
+export class SetDefaultDataverse implements Action {
+  readonly type = SET_DEFAULT_DATAVERSE;
+  constructor(public payload: any) {}
+}
+
+
 /*
 * Exports of datasverses actions
 */
 export type All = SelectDataverses |
-  SelectDataversesSuccess |
-  SelectDataversesFail |
-  CreateDataverse |
-  CreateDataverseSuccess |
-  CreateDataverseFail |
-  UpdateDataverse |
-  UpdateDataverseSuccess |
-  UpdateDataverseFail |
-  DropDataverse |
-  DropDataverseSuccess |
-  DropDataverseFail;
+    SelectDataversesSuccess |
+    SelectDataversesFail |
+    CreateDataverse |
+    CreateDataverseSuccess |
+    CreateDataverseFail |
+    UpdateDataverse |
+    UpdateDataverseSuccess |
+    UpdateDataverseFail |
+    DropDataverse |
+    DropDataverseSuccess |
+    DropDataverseFail |
+    SetDefaultDataverse;
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/index.actions.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/index.actions.ts
index 1304644..2a794fb 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/index.actions.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/index.actions.ts
@@ -12,7 +12,6 @@
 limitations under the License.
 */
 import { Action } from '@ngrx/store';
-import { Index } from '../models/asterixDB.model';
 
 /*
 * Definition of Index Actions
@@ -34,86 +33,86 @@
 * Select Indexes
 */
 export class SelectIndexes implements Action {
-  readonly type = SELECT_INDEXES;
-  constructor(public payload: string) {}
+    readonly type = SELECT_INDEXES;
+    constructor(public payload: string) {}
 }
 
 export class SelectIndexesSuccess implements Action {
-  readonly type = SELECT_INDEXES_SUCCESS;
-  constructor(public payload: Index[]) {}
+    readonly type = SELECT_INDEXES_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class SelectIndexesFail implements Action {
-  readonly type = SELECT_INDEXES_FAIL;
-  constructor(public payload: Index[]) {}
+    readonly type = SELECT_INDEXES_FAIL;
+    constructor(public payload: any[]) {}
 }
 
 /*
 * Create Index
 */
 export class CreateIndex implements Action {
-  readonly type = CREATE_INDEX;
-  constructor(public payload: string) {}
+    readonly type = CREATE_INDEX;
+    constructor(public payload: string) {}
 }
 
 export class CreateIndexSuccess implements Action {
-  readonly type = CREATE_INDEX_SUCCESS;
-  constructor(public payload: Index[]) {}
+    readonly type = CREATE_INDEX_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class CreateIndexFail implements Action {
-  readonly type = CREATE_INDEX_FAIL;
-  constructor(public payload: Index) {}
+    readonly type = CREATE_INDEX_FAIL;
+    constructor(public payload: any) {}
 }
 
 /*
 * Update Index
 */
 export class UpdateIndex implements Action {
-  readonly type = UPDATE_INDEX;
-  constructor(public payload: Index) {}
+    readonly type = UPDATE_INDEX;
+    constructor(public payload: any) {}
 }
 
 export class UpdateIndexSuccess implements Action {
-  readonly type = UPDATE_INDEX_SUCCESS;
-  constructor(public payload: Index[]) {}
+    readonly type = UPDATE_INDEX_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class UpdateIndexFail implements Action {
-  readonly type = UPDATE_INDEX_FAIL;
-  constructor(public payload: Index) {}
+    readonly type = UPDATE_INDEX_FAIL;
+    constructor(public payload: any) {}
 }
 
 /*
 * Remove Index
 */
 export class DropIndex implements Action {
-  readonly type = DROP_INDEX;
-  constructor(public payload: string) {}
+    readonly type = DROP_INDEX;
+    constructor(public payload: string) {}
 }
 
 export class DropIndexSuccess implements Action {
-  readonly type = DROP_INDEX_SUCCESS;
-  constructor(public payload: Index[]) {}
+    readonly type = DROP_INDEX_SUCCESS;
+    constructor(public payload: any[]) {}
 }
 
 export class DropIndexFail implements Action {
-  readonly type = DROP_INDEX_FAIL;
-  constructor(public payload: Index) {}
+    readonly type = DROP_INDEX_FAIL;
+    constructor(public payload: any) {}
 }
 
 /*
 * Exports of indexes actions
 */
 export type All = SelectIndexes |
-  SelectIndexesSuccess |
-  SelectIndexesFail |
-  CreateIndex |
-  CreateIndexSuccess |
-  CreateIndexFail |
-  UpdateIndex |
-  UpdateIndexSuccess |
-  UpdateIndexFail |
-  DropIndex |
-  DropIndexSuccess |
-  DropIndexFail;
+    SelectIndexesSuccess |
+    SelectIndexesFail |
+    CreateIndex |
+    CreateIndexSuccess |
+    CreateIndexFail |
+    UpdateIndex |
+    UpdateIndexSuccess |
+    UpdateIndexFail |
+    DropIndex |
+    DropIndexSuccess |
+    DropIndexFail;
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/metadata.actions.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/metadata.actions.ts
deleted file mode 100755
index 4a3c125..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/metadata.actions.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { Action } from '@ngrx/store';
-
-/*
-* Definition of Metadata Tree Actions
-*/
-export const UPDATE_METADATA_TREE         = '[Metadata Tree Query] UPDATE Metadata tree';
-export const UPDATE_METADATA_TREE_SUCCESS = '[Metadata Tree Query] UPDATE Metadata tree Success';
-export const UPDATE_METADATA_TREE_FAIL    = '[Metadata Tree Query] UPDATE Metadata tree Fail';
-
-/*
-* Construct Metadata Tree Actions
-*/
-export class UpdateMetadataTree implements Action {
-  readonly type = UPDATE_METADATA_TREE
-  constructor() {}
-}
-
-export class UpdateMetadataTreeSuccess implements Action {
-  readonly type = UPDATE_METADATA_TREE_SUCCESS;
-  constructor(public payload: any) {}
-}
-
-export class UpdateMetadataTreeFail implements Action {
-  readonly type = UPDATE_METADATA_TREE_FAIL;
-  constructor(public payload: any) {}
-}
-
-/*
-* Exports of Metatada Tree actions
-*/
-export type All = UpdateMetadataTree |
-    UpdateMetadataTreeSuccess |
-    UpdateMetadataTreeFail;
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/query.actions.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/query.actions.ts
index 866b3e9..e18a89e 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/query.actions.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/actions/query.actions.ts
@@ -12,60 +12,79 @@
 limitations under the License.
 */
 import { Action } from '@ngrx/store';
-import { AsterixDBQueryMessage } from '../models/asterixDB.model';
 
 /*
 * Definition of SQL++ Actions
 */
-export const EXECUTE_QUERY                  = '[Query] Execute SQL++ Query';
-export const EXECUTE_QUERY_SUCCESS          = '[Query] Execute SQL++ Query Success';
-export const EXECUTE_QUERY_FAIL             = '[Query] Execute SQL++ Query Fail';
-export const EXECUTE_METADATA_QUERY         = '[Query] Execute Metadata SQL++ Query';
-export const EXECUTE_METADATA_QUERY_SUCCESS = '[Query] Execute Metadata SQL++ Query Success';
-export const EXECUTE_METADATA_QUERY_FAIL     = '[Query] Execute Metadata SQL++ Query Fail';
+export const PREPARE_QUERY                      = '[Query] Prepare SQL++ Query';
+export const CLEAN_QUERY                        = '[Query] Clean SQL++ Query';
+export const EXECUTE_QUERY                      = '[Query] Execute SQL++ Query';
+export const EXECUTE_QUERY_SUCCESS              = '[Query] Execute SQL++ Query Success';
+export const EXECUTE_QUERY_FAIL                 = '[Query] Execute SQL++ Query Fail';
+export const EXECUTE_METADATA_QUERY             = '[Query] Execute Metadata SQL++ Query';
+export const EXECUTE_METADATA_QUERY_SUCCESS     = '[Query] Execute Metadata SQL++ Query Success';
+export const EXECUTE_METADATA_QUERY_FAIL        = '[Query] Execute Metadata SQL++ Query Fail';
+
+/*
+* Prepare Query, stores the current editing query string
+*/
+export class PrepareQuery implements Action {
+    readonly type = PREPARE_QUERY;
+    constructor(public payload: any) {} // string the AsterixDB Query String
+}
+
+/*
+* Prepare Query, stores the current editing query string
+*/
+export class CleanQuery implements Action {
+    readonly type = CLEAN_QUERY;
+    constructor(public payload: any) {} // string the AsterixDB Query String
+}
 
 /*
 * Execute SQL++ Query
 */
 export class ExecuteQuery implements Action {
-  readonly type = EXECUTE_QUERY;
-  constructor(public payload: string) {} // the AsterixDB Query String
+    readonly type = EXECUTE_QUERY;
+    constructor(public payload: any) {} // string the AsterixDB Query String
 }
 
 export class ExecuteQuerySuccess implements Action {
-  readonly type = EXECUTE_QUERY_SUCCESS;
-  constructor(public payload: AsterixDBQueryMessage[]) {}
+    readonly type = EXECUTE_QUERY_SUCCESS;
+    constructor(public payload: any) {}
 }
 
 export class ExecuteQueryFail implements Action {
-  readonly type = EXECUTE_QUERY_FAIL;
-  constructor(public payload: AsterixDBQueryMessage[]) {}
+    readonly type = EXECUTE_QUERY_FAIL;
+    constructor(public payload: any) {}
 }
 
 /*
 * Execute Metadata SQL++ Query
 */
 export class ExecuteMetadataQuery implements Action {
-  readonly type = EXECUTE_METADATA_QUERY;
-  constructor(public payload: string) {} // the AsterixDB Query String
+    readonly type = EXECUTE_METADATA_QUERY;
+    constructor(public payload: string) {} // the AsterixDB Query String
 }
 
 export class ExecuteMetadataQuerySuccess implements Action {
-  readonly type = EXECUTE_METADATA_QUERY_SUCCESS;
-  constructor(public payload: AsterixDBQueryMessage[]) {}
+    readonly type = EXECUTE_METADATA_QUERY_SUCCESS;
+    constructor(public payload: any) {}
 }
 
 export class ExecuteMetadataQueryFail implements Action {
-  readonly type = EXECUTE_METADATA_QUERY_FAIL;
-  constructor(public payload: AsterixDBQueryMessage[]) {}
+    readonly type = EXECUTE_METADATA_QUERY_FAIL;
+    constructor(public payload: any) {}
 }
 
 /*
 * Exports of SQL++ actions
 */
-export type All = ExecuteQuery |
-  ExecuteQuerySuccess |
-  ExecuteQueryFail |
-  ExecuteMetadataQuery |
-  ExecuteMetadataQuerySuccess |
-  ExecuteMetadataQueryFail;
\ No newline at end of file
+export type All = PrepareQuery |
+    CleanQuery |
+    ExecuteQuery |
+    ExecuteQuerySuccess |
+    ExecuteQueryFail |
+    ExecuteMetadataQuery |
+    ExecuteMetadataQuerySuccess |
+    ExecuteMetadataQueryFail;
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-create-dialog.component.scss b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/app.effects.ts
old mode 100755
new mode 100644
similarity index 63%
copy from asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-create-dialog.component.scss
copy to asterixdb/asterix-dashboard/src/node/src/app/shared/effects/app.effects.ts
index 039dcf1..891191b
--- a/asterixdb/asterix-dashboard/src/node/src/app/dashboard/metadata/indexes-collection/index-create-dialog.component.scss
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/app.effects.ts
@@ -11,8 +11,14 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-.index-dialog {    
-    font-family: "Roboto Mono", monospace;
-    font-size: 0.80rem;
-    font-weight: 500;
+import { Injectable } from '@angular/core';
+import { Action } from '@ngrx/store';
+import { Actions } from '@ngrx/effects';
+import * as appActions from '../actions/app.actions';
+
+export type Action = appActions.All
+
+@Injectable()
+export class AppEffects {
+    constructor(private actions: Actions) {}
 }
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/dataset.effects.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/dataset.effects.ts
index b5624a4..3ca0da4 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/dataset.effects.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/dataset.effects.ts
@@ -14,13 +14,10 @@
 import { Injectable } from '@angular/core';
 import { Action } from '@ngrx/store';
 import { Effect, Actions } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
+import { Observable ,  of } from 'rxjs';
 import * as datasetActions from '../actions/dataset.actions';
 import { SQLService } from '../services/async-query.service';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/switchMap'
 
 export type Action = datasetActions.All
 
@@ -36,8 +33,8 @@
         .ofType(datasetActions.SELECT_DATASETS)
         .switchMap(query => {
             return this.sqlService.selectDatasets()
-            .map(dataset => new datasetActions.SelectDatasetsSuccess(dataset))
-            .catch(err => of(new datasetActions.SelectDatasetsFail(err)));
+                .map(dataset => new datasetActions.SelectDatasetsSuccess(dataset))
+                .catch(err => of(new datasetActions.SelectDatasetsFail(err)));
     });
 
     /* Effect to create a Datasets from AsterixDB
@@ -47,8 +44,8 @@
         .ofType(datasetActions.CREATE_DATASET)
         .switchMap(dataset => {
             return this.sqlService.createDataset((dataset as any).payload)
-            .map(dataset => new datasetActions.CreateDatasetSuccess(dataset))
-            .catch(err => of(new datasetActions.CreateDatasetFail(err)));
+                .map(dataset => new datasetActions.CreateDatasetSuccess(dataset))
+                .catch(err => of(new datasetActions.CreateDatasetFail(err)));
     });
 
     /* Effect to drop a Datasets from AsterixDB
@@ -57,9 +54,8 @@
     dropDatasets$: Observable<Action> = this.actions
         .ofType(datasetActions.DROP_DATASET)
         .switchMap(dataset => {
-            console.log((dataset as any).payload)
             return this.sqlService.dropDataset((dataset as any).payload)
-            .map(dataset => new datasetActions.DropDatasetSuccess(dataset))
-            .catch(err => of(new datasetActions.DropDatasetFail(err)));
+                .map(dataset => new datasetActions.DropDatasetSuccess(dataset))
+                .catch(err => of(new datasetActions.DropDatasetFail(err)));
     });
-}
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/datatype.effects.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/datatype.effects.ts
index 4fa187f..5e06f89 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/datatype.effects.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/datatype.effects.ts
@@ -13,51 +13,46 @@
 */
 import { Injectable } from '@angular/core';
 import { Effect, Actions } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
+import { Observable ,  of } from 'rxjs';
 import * as datatypeActions from '../actions/datatype.actions';
 import { SQLService } from '../services/async-query.service';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/operator/catch';
 
 export type Action = datatypeActions.All
 
 @Injectable()
 export class DatatypeEffects {
   constructor(private actions: Actions,
-      private sqlService: SQLService) {}
+        private sqlService: SQLService) {}
 
-  /* Effect to load a collection of all Datatypes from AsterixDB
-  */
-  @Effect()
-  selectDatatypes$: Observable<Action> = this.actions
-    .ofType(datatypeActions.SELECT_DATATYPES)
-    .switchMap(query => {
-        return this.sqlService.selectDatatypes()
-           .map(datatype => new datatypeActions.SelectDatatypesSuccess(datatype))
-           .catch(err => of(new datatypeActions.SelectDatatypesFail(err)));
-  });
+    /* Effect to load a collection of all Datatypes from AsterixDB */
+    @Effect()
+    selectDatatypes$: Observable<Action> = this.actions
+        .ofType(datatypeActions.SELECT_DATATYPES)
+        .switchMap(query => {
+            return this.sqlService.selectDatatypes()
+                .map(datatype => new datatypeActions.SelectDatatypesSuccess(datatype))
+                .catch(err => of(new datatypeActions.SelectDatatypesFail(err)));
+    });
 
-  /* Effect to create a Datatype from AsterixDB
-  */
-  @Effect()
-  createDatatypes$: Observable<Action> = this.actions
-    .ofType(datatypeActions.CREATE_DATATYPE)
-    .switchMap(datatype => {
-        return this.sqlService.createDatatype((datatype as any).payload)
-           .map(datatype => new datatypeActions.CreateDatatypeSuccess(datatype))
-           .catch(err => of(new datatypeActions.CreateDatatypeFail(err)));
-  });
+    /* Effect to create a Datatype from AsterixDB
+    */
+    @Effect()
+    createDatatypes$: Observable<Action> = this.actions
+        .ofType(datatypeActions.CREATE_DATATYPE)
+        .switchMap(datatype => {
+            return this.sqlService.createDatatype((datatype as any).payload)
+                .map(datatype => new datatypeActions.CreateDatatypeSuccess(datatype))
+                .catch(err => of(new datatypeActions.CreateDatatypeFail(err)));
+    });
 
-  /* Effect to drop a Datatype from AsterixDB
-  */
-  @Effect()
-  dropDatatypes$: Observable<Action> = this.actions
-    .ofType(datatypeActions.DROP_DATATYPE)
-    .switchMap(datatype => {
-        return this.sqlService.dropDatatype((datatype as any).payload)
-           .map(datatype => new datatypeActions.DropDatatypeSuccess(datatype))
-           .catch(err => of(new datatypeActions.DropDatatypeFail(err)));
-  });
-}
+    /* Effect to drop a Datatype from AsterixDB
+    */
+    @Effect()
+    dropDatatypes$: Observable<Action> = this.actions
+        .ofType(datatypeActions.DROP_DATATYPE)
+        .switchMap(datatype => {
+            return this.sqlService.dropDatatype((datatype as any).payload)
+                .map(datatype => new datatypeActions.DropDatatypeSuccess(datatype))
+                .catch(err => of(new datatypeActions.DropDatatypeFail(err)));
+    });
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/dataverse.effects.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/dataverse.effects.ts
index d917420..e8e86af 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/dataverse.effects.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/dataverse.effects.ts
@@ -13,30 +13,32 @@
 */
 import { Injectable } from '@angular/core';
 import { Effect, Actions } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
+import { Observable ,  of } from 'rxjs';
 import * as dataverseActions from '../actions/dataverse.actions';
 import { SQLService } from '../services/async-query.service';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/operator/catch';
 
 export type Action = dataverseActions.All
 
 @Injectable()
 export class DataverseEffects {
-  constructor(private actions: Actions,
-      private sqlService: SQLService) {}
+  constructor(private actions: Actions, private sqlService: SQLService) {}
 
-  /* Effect to load a collection of all Dataverses from AsterixDB
-  */
-  @Effect()
+    /* Effect to set the default Dataverse */
+    @Effect()
+    setDefaultDataverse$: Observable<Action> = this.actions
+        .ofType(dataverseActions.SET_DEFAULT_DATAVERSE)
+        .switchMap(query => {
+            return new Observable().map(dataverse => new dataverseActions.SetDefaultDataverse('Default'))
+    });
+
+    /* Effect to load a collection of all Dataverses from AsterixDB */
+    @Effect()
     selectDataverses$: Observable<Action> = this.actions
         .ofType(dataverseActions.SELECT_DATAVERSES)
         .switchMap(query => {
             return this.sqlService.selectDataverses()
-            .map(dataverse => new dataverseActions.SelectDataversesSuccess(dataverse))
-            .catch(err => of(new dataverseActions.SelectDataversesFail(err)));
+                .map(dataverse => new dataverseActions.SelectDataversesSuccess(dataverse))
+                .catch(err => of(new dataverseActions.SelectDataversesFail(err)));
     });
 
     /* Effect to create Dataverse from AsterixDB
@@ -46,8 +48,8 @@
         .ofType(dataverseActions.CREATE_DATAVERSE)
         .switchMap(dataverseName => {
             return this.sqlService.createDataverse((dataverseName as any).payload)
-            .map(dataverse => new dataverseActions.CreateDataverseSuccess(dataverse))
-            .catch(err => of(new dataverseActions.CreateDataverseFail(err)));
+                .map(dataverse => new dataverseActions.CreateDataverseSuccess(dataverse))
+                .catch(err => of(new dataverseActions.CreateDataverseFail(err)));
     });
 
     /* Effect to drop a Dataverse from AsterixDB
@@ -57,7 +59,7 @@
         .ofType(dataverseActions.DROP_DATAVERSE)
         .switchMap(dataverseName => {
             return this.sqlService.dropDataverse((dataverseName as any).payload)
-            .map(dataverse => new dataverseActions.DropDataverseSuccess(dataverse))
-            .catch(err => of(new dataverseActions.DropDataverseFail(err)));
+                .map(dataverse => new dataverseActions.DropDataverseSuccess(dataverse))
+                .catch(err => of(new dataverseActions.DropDataverseFail(err)));
     });
 }
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/index.effects.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/index.effects.ts
index 8491392..a1c0b07 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/index.effects.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/index.effects.ts
@@ -13,51 +13,46 @@
 */
 import { Injectable } from '@angular/core';
 import { Effect, Actions } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
+import { Observable ,  of } from 'rxjs';
 import * as indexActions from '../actions/index.actions';
 import { SQLService } from '../services/async-query.service';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/operator/catch';
 
 export type Action = indexActions.All
 
 @Injectable()
 export class IndexEffects {
   constructor(private actions: Actions,
-      private sqlService: SQLService) {}
+        private sqlService: SQLService) {}
 
-  /* Effect to load a collection of all Index from AsterixDB
-  */
-  @Effect()
-  selectIndexes$: Observable<Action> = this.actions
-    .ofType(indexActions.SELECT_INDEXES)
-    .switchMap(query => {
-        return this.sqlService.selectIndexes()
-           .map(index => new indexActions.SelectIndexesSuccess(index))
-           .catch(err => of(new indexActions.SelectIndexesFail(err)));
-  });
+    /* Effect to load a collection of all Index from AsterixDB */
+    @Effect()
+    selectIndexes$: Observable<Action> = this.actions
+        .ofType(indexActions.SELECT_INDEXES)
+        .switchMap(query => {
+            return this.sqlService.selectIndexes()
+                .map(index => new indexActions.SelectIndexesSuccess(index))
+                .catch(err => of(new indexActions.SelectIndexesFail(err)));
+    });
 
-  /* Effect to create a Index
-  */
-  @Effect()
-  createIndexes$: Observable<Action> = this.actions
-    .ofType(indexActions.CREATE_INDEX)
-    .switchMap(index => {
-        return this.sqlService.createIndex((index as any).payload)
-           .map(index => new indexActions.CreateIndexSuccess(index))
-           .catch(err => of(new indexActions.CreateIndexFail(err)));
-  });
+    /* Effect to create a Index
+    */
+    @Effect()
+    createIndexes$: Observable<Action> = this.actions
+        .ofType(indexActions.CREATE_INDEX)
+        .switchMap(index => {
+            return this.sqlService.createIndex((index as any).payload)
+                .map(index => new indexActions.CreateIndexSuccess(index))
+                .catch(err => of(new indexActions.CreateIndexFail(err)));
+    });
 
-  /* Effect to drop a Index
-  */
-  @Effect()
-  dropIndexes$: Observable<Action> = this.actions
-    .ofType(indexActions.DROP_INDEX)
-    .switchMap(index => {
-        return this.sqlService.dropIndex((index as any).payload)
-           .map(index => new indexActions.DropIndexSuccess(index))
-           .catch(err => of(new indexActions.DropIndexFail(err)));
-  });
+    /* Effect to drop a Index
+    */
+    @Effect()
+    dropIndexes$: Observable<Action> = this.actions
+        .ofType(indexActions.DROP_INDEX)
+        .switchMap(index => {
+            return this.sqlService.dropIndex((index as any).payload)
+                .map(index => new indexActions.DropIndexSuccess(index))
+                .catch(err => of(new indexActions.DropIndexFail(err)));
+    });
 }
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/metadata.effects.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/metadata.effects.ts
deleted file mode 100755
index ddcdb27..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/metadata.effects.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { Injectable } from '@angular/core';
-import { Action } from '@ngrx/store';
-import { Effect, Actions } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
-import { MetadataService } from '../services/async-metadata.service';
-import * as metadataActions from '../actions/metadata.actions';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/operator/catch';
-
-export type Action = metadataActions.All
-
-@Injectable()
-export class MetadataEffects {
-  constructor(private actions: Actions,
-      private metadataService: MetadataService) {}
-
-  /* Effect to update and retrieve the Metadata Tree
-  */
-  @Effect()
-  calculateDBTree$: Observable<Action> = this.actions
-    .ofType(metadataActions.UPDATE_METADATA_TREE)
-    .switchMap(() => {
-        return this.metadataService.getMetadataTree()
-          .map(tree => new metadataActions.UpdateMetadataTreeSuccess(tree))
-    });
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/query.effects.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/query.effects.ts
index cb78255..0d209cd1 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/query.effects.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/effects/query.effects.ts
@@ -13,41 +13,36 @@
 */
 import { Injectable } from '@angular/core';
 import { Action } from '@ngrx/store';
-import { Effect, Actions } from '@ngrx/effects';
-import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
+import { Actions, Effect, ofType } from '@ngrx/effects';
+import { Observable ,  of } from 'rxjs';
 import { SQLService } from '../services/async-query.service';
 import * as sqlQueryActions from '../actions/query.actions';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/operator/catch';
 
 export type Action = sqlQueryActions.All
 
 @Injectable()
 export class SQLQueryEffects {
   constructor(private actions: Actions,
-      private sqlService: SQLService) {}
+        private sqlService: SQLService) {}
 
-  /* Effect to Execute an SQL++ Query against the AsterixDB
-  */
-  @Effect()
-  executeQuery$: Observable<Action> = this.actions
-    .ofType(sqlQueryActions.EXECUTE_QUERY)
-    .switchMap(query => {
-        return this.sqlService.executeSQLQuery((query as any).payload)
-           .map(sqlQueryResult => new sqlQueryActions.ExecuteQuerySuccess(sqlQueryResult))
-           .catch(sqlQueryError => of(new sqlQueryActions.ExecuteQueryFail(sqlQueryError)));
-  });
+    /* Effect to Execute an SQL++ Query against the AsterixDB */
+    @Effect()
+    executeQuery$: Observable<Action> = this.actions
+        .ofType(sqlQueryActions.EXECUTE_QUERY)
+        .switchMap(query => {
+            return this.sqlService.executeSQLQuery((query as any).payload.queryString)
+                .map(sqlQueryResult => new sqlQueryActions.ExecuteQuerySuccess(sqlQueryResult))
+                .catch(sqlQueryError => of(new sqlQueryActions.ExecuteQueryFail(sqlQueryError)));
+    });
 
-  /* Effect to Execute an SQL++ Metadata Query against the AsterixDB
-  */
-  @Effect()
-  executeMetadataQuery$: Observable<Action> = this.actions
-    .ofType(sqlQueryActions.EXECUTE_METADATA_QUERY)
-    .switchMap(query => {
-        return this.sqlService.executeSQLQuery((query as any).payload)
-           .map(sqlMetadataQueryResult => new sqlQueryActions.ExecuteMetadataQuerySuccess(sqlMetadataQueryResult))
-           .catch(sqlMetadataQueryError => of(new sqlQueryActions.ExecuteMetadataQueryFail(sqlMetadataQueryError)));
-  });
-}
+    /* Effect to Execute an SQL++ Metadata Query against the AsterixDB
+    */
+    @Effect()
+    executeMetadataQuery$: Observable<Action> = this.actions
+        .ofType(sqlQueryActions.EXECUTE_METADATA_QUERY)
+        .switchMap(query => {
+            return this.sqlService.executeSQLQuery((query as any).payload)
+                .map(sqlMetadataQueryResult => new sqlQueryActions.ExecuteMetadataQuerySuccess(sqlMetadataQueryResult))
+                .catch(sqlMetadataQueryError => of(new sqlQueryActions.ExecuteMetadataQueryFail(sqlMetadataQueryError)));
+    });
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/models/asterixDB.model.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/models/asterixDB.model.ts
deleted file mode 100755
index bbdabe2..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/models/asterixDB.model.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-/*
-* Interfaces representing AsterixDB data model structures.
-*/
-
-export interface Dataverse {
-  dataFormat: string;
-  dataverseName: string;
-  pendingOp: string;
-  timeStamp: string;
-};
-
-export interface ResultsM {
-  dataFormat: string;
-  dataverseName: string;
-  pendingOp: string;
-  timeStamp: string;
-};
-
-export interface Dataset {
-  compactionPolicy: string;
-  compactionPolicyProperties: CompactionPolicyProperties[];
-  datasetId: string;
-  datasetName: string;
-  datasetType:string;
-  datatypeDataverseName: string;
-  datatypeName: string;
-  dataverseName: string;
-  groupName:string;
-  hints: string[];
-  internalDetails: InternalDetails;
-  pendingOp: string;
-  timestamp: string;
-};
-
-export interface CompactionPolicyProperties {
-  name: string;
-  value: string;
-};
-
-export interface InternalDetails {
-  autogenerated: string;
-  fileStructure: string;
-  partitioningKey: string;
-  partitioningStrategy: string;
-  primaryKey: string[];
-};
-
-// Message format coming back from AsterixDB REST API
-export interface AsterixDBQueryMessage {
-  metrics: Metrics;
-  requestId: string;
-  results: any[];
-  signature: string;
-  status: string;
-};
-
-export interface Metrics {
-  elapsedTime: string;
-  executionTime: string;
-  resultCount: string;
-  resultSize: string;
-};
-
-// Datatype Data Model comming from AsterixDB REST API
-export interface Datatype {
-  datatypeName: string;
-  dataverseName: string;
-  derived: DatatypeDerived;
-  timeStamp: string;
-};
-
-export interface DatatypeDerived {
-  isAnonymous: boolean;
-  record: DatatypeDerivedRecord;
-  tag: string;
-};
-
-export interface DatatypeDerivedRecord {
-  Fields: DatatypeDerivedRecordField[];
-  isOpen: boolean;
-};
-
-export interface DatatypeDerivedRecordField {
-  fieldName: string;
-  fieldType: "string";
-  isNullable: boolean;
-}
-
-// Index Data Model comming from AsterixDB REST API
-export interface Index {
-  dataverseName: string;
-  datasetName: string;
-  indexName: string;
-  indexStructure: string;
-  searchKey: string[];
-  isPrimary: boolean;
-  timestamp: string;
-  pendingOp: string;
-};
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/pipes/keys.pipe.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/pipes/keys.pipe.ts
deleted file mode 100755
index 77cac5a..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/pipes/keys.pipe.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { PipeTransform, Pipe } from '@angular/core';
-
-@Pipe({name: 'keys'})
-export class KeysPipe implements PipeTransform {
-  transform(value, args:string[]) : any {
-    let keys = [];
-    for (let key in value) {
-      keys.push(key);
-    }
-    return keys;
-  }
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/pipes/objectArrayType.pipe.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/pipes/objectArrayType.pipe.ts
deleted file mode 100755
index 220b53c..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/pipes/objectArrayType.pipe.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-// Detecting if an object is an array
-import { PipeTransform, Pipe } from '@angular/core';
-
-@Pipe({name: 'isObjectArray'})
-export class ObjectArrayTypePipe implements PipeTransform {
-  transform(value, args:string[]) : any {
-		return value && (value.constructor.toString().indexOf("Array") != -1)
-					&& value[0] && (value[0].constructor.toString().indexOf("Object") != -1);
-  }
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/pipes/objectType.pipe.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/pipes/objectType.pipe.ts
deleted file mode 100755
index 5b8f795..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/pipes/objectType.pipe.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { PipeTransform, Pipe } from '@angular/core';
-
-@Pipe({name: 'isObject'})
-export class ObjectTypePipe implements PipeTransform {
-  transform(value, args:string[]) : any {
-		return value && (value.constructor.toString().indexOf("Object") != -1);
-  }
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/app.reducer.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/app.reducer.ts
index 01c65ac..c656ef8 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/app.reducer.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/app.reducer.ts
@@ -11,7 +11,6 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { AsterixDBQueryMessage } from '../models/asterixDB.model';
 import * as appActions from '../actions/app.actions';
 
 export type Action = appActions.All;
@@ -20,54 +19,48 @@
 ** Interfaces for app state in store/state
 */
 export interface State {
-  loading: boolean,
-  loaded: boolean,
-  success: boolean,
-  sqlQueryString: string,
-  sqlQueryResult: AsterixDBQueryMessage[],
-  sqlQueryError: AsterixDBQueryMessage[],
-  sqlMetadataQueryString: string,
-  sqlMetadataQueryResult: AsterixDBQueryMessage[],
-  sqlMetadataQueryError: AsterixDBQueryMessage[]
+    currentQueryIndex: Number;
+    sideMenuVisible: boolean;
 };
 
 const initialState: State = {
-  loading: false,
-  loaded: false,
-  success: false,
-  sqlQueryString: "",
-  sqlQueryResult: [],
-  sqlQueryError: [],
-  sqlMetadataQueryString: "",
-  sqlMetadataQueryResult: [],
-  sqlMetadataQueryError: [],
+    currentQueryIndex: 0,
+    sideMenuVisible: false,
 };
 
 /*
 ** Reducer function for app state in store/state
 */
 export function appReducer(state = initialState, action: Action) {
-  switch (action.type) {
+    switch (action.type) {
+        /*
+        * Global side navigator open/close controller
+        */
+        case appActions.APP_SIDE_MENU: {
+            return Object.assign({}, state, {
+                sideMenuVisible: action.payload
+            });
+        }
 
-    /*
-    * Change the load state to true, and clear previous results
-    * to signaling that a EXECUTE a SQL++ Query is ongoing
-    */
-    case appActions.APP_MODE_CHANGE: {
-      return Object.assign({}, state, {
-        loading: false,
-        loaded: true,
-        success: false,
-        sqlQueryString: action.payload,
-        sqlQueryResult: [],
-        sqlQueryError: []
-      });
-    }
-    
-    /*
-    * Just returns the current store/state object
-    */
-    default:
-      return state;
-  }
-}
+        /*
+        * Change the load state to true, and clear previous results
+        * to signaling that a EXECUTE a SQL++ Query is ongoing
+        */
+        case appActions.APP_MODE_CHANGE: {
+            return Object.assign({}, state, {
+            });
+        }
+
+        /*
+        * store the query currently in codemirror editor
+        */
+        case appActions.APP_QUERY_INPUT_INDEX: {
+            return Object.assign({}, state, {
+                    currentQueryIndex: action.payload
+                });
+            }
+
+        default:
+                return state;
+        }
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/dataset.reducer.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/dataset.reducer.ts
index 25d09b9..deaceb3 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/dataset.reducer.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/dataset.reducer.ts
@@ -11,7 +11,6 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { Dataset } from '../models/asterixDB.model';
 import * as DatasetAction from '../actions/dataset.actions';
 
 export type Action = DatasetAction.All;
@@ -20,158 +19,158 @@
 ** Interfaces for datasets in store/state
 */
 export interface State {
-  loaded: boolean,
-  loading: boolean,
-  datasets: any[],
-  createDataset: any[],
-  createDatasetError: any[],
-  createDatasetSuccess: boolean,
-  createDatasetFailed: boolean,
-  dropDataset: any[],
-  dropDatasetError: any[],
-  dropDatasetSuccess: boolean,
-  dropDatasetFailed: boolean,
-  guideSelectsDataset: string,
+    loaded: boolean,
+    loading: boolean,
+    datasets: any[],
+    createDataset: any[],
+    createDatasetError: any[],
+    createDatasetSuccess: boolean,
+    createDatasetFailed: boolean,
+    dropDataset: any[],
+    dropDatasetError: any[],
+    dropDatasetSuccess: boolean,
+    dropDatasetFailed: boolean,
+    guideSelectsDataset: string
 };
 
 const initialState: State = {
-  loaded: false,
-  loading: false,
-  datasets: [],
-  createDataset: [],
-  createDatasetError: [],
-  createDatasetSuccess: false,
-  createDatasetFailed: false,
-  dropDataset: [],
-  dropDatasetError: [],
-  dropDatasetSuccess: false,
-  dropDatasetFailed: false,
-  guideSelectsDataset: ""
+    loaded: false,
+    loading: false,
+    datasets: [],
+    createDataset: [],
+    createDatasetError: [],
+    createDatasetSuccess: false,
+    createDatasetFailed: false,
+    dropDataset: [],
+    dropDatasetError: [],
+    dropDatasetSuccess: false,
+    dropDatasetFailed: false,
+    guideSelectsDataset: ""
 };
 
 /*
 ** Reducer function for datasets in store/state
 */
 export function datasetReducer(state = initialState, action: Action) {
-  switch (action.type) {
+    switch (action.type) {
 
-    /*
-    * Change the selected dataset state to true to signaling
-    * UI from metadata guide 
-    */
-    case DatasetAction.GUIDE_SELECT_DATASET: {
-      return Object.assign({}, state, { guideSelectsDataset: action.payload });
+      /*
+      * Change the selected dataset state to true to signaling
+      * UI from metadata guide
+      */
+      case DatasetAction.GUIDE_SELECT_DATASET: {
+          return Object.assign({}, state, { guideSelectsDataset: action.payload });
+      }
+
+      /*
+      * Change the load state to true to signaling
+      * that a SELECT Query is ongoing
+      */
+      case DatasetAction.SELECT_DATASETS: {
+          return Object.assign({}, state, { loading: true });
+      }
+
+      /*
+      * Change the load state to false, and loaded to true to signaling
+      * that a SELECT Query is success and there is datasets available in the
+      * store
+      */
+      case DatasetAction.SELECT_DATASETS_SUCCESS: {
+          return Object.assign({}, state, {
+              loaded: true,
+              loading: false,
+              datasets: action.payload
+          })
+      }
+
+      /*
+      * Change the load state to true to signaling
+      * that a CREATE a Dataset Query is ongoing
+      */
+      case DatasetAction.CREATE_DATASET: {
+          return Object.assign({}, state, {
+              createDataset: [],
+              createDatasetError: [],
+              createDatasetSuccess: false,
+              createDatasetFailed: false
+          });
+      }
+
+      /*
+      * Change the load state to false, and loaded to true to signaling
+      * that a CREATE a Dataset Query is success and there is datasets available in the
+      * store
+      */
+      case DatasetAction.CREATE_DATASET_SUCCESS: {
+          return Object.assign({}, state, {
+              createDataset: action.payload,
+              createDatasetName: action.payload,
+              createDatasetError: [],
+              createDatasetSuccess: true,
+              createDatasetFailed: false
+          })
+      }
+
+      /*
+      * Change the load state to false, and loaded to true to signaling
+      * that a CREATE a Dataset Query is failed and there is an error message available in the
+      * store
+      */
+      case DatasetAction.CREATE_DATASET_FAIL: {
+          return Object.assign({}, state, {
+              createDataset: [],
+              createDatasetError: action.payload,
+              createDatasetSuccess: false,
+              createDatasetFailed: true
+          })
+      }
+
+      /*
+      * Change the load state to true to signaling
+      * that a DROP a Dataset Query is ongoing
+      */
+      case DatasetAction.DROP_DATASET: {
+          return Object.assign({}, state, {
+              dropDataset: [],
+              dropDatasetError: [],
+              dropDatasetName: action.payload,
+              dropDatasetSuccess: false,
+              dropDatasetFailed: false
+          });
+      }
+
+      /*
+      * Change the load state to false, and loaded to true to signaling
+      * that a DROP a Dataset Query is success and there is datasets available in the
+      * store
+      */
+      case DatasetAction.DROP_DATASET_SUCCESS: {
+          return Object.assign({}, state, {
+              dropDataset: action.payload,
+              dropDatasetError: [],
+              dropDatasetSuccess: true,
+              dropDatasetFailed: false
+          })
+      }
+
+      /*
+      * Change the load state to false, and loaded to true to signaling
+      * that a DROP a Dataset Query is failed and there is an error message available in the
+      * store
+      */
+      case DatasetAction.DROP_DATASET_FAIL: {
+          return Object.assign({}, state, {
+              dropDataset: [],
+              dropDatasetError: action.payload,
+              dropDatasetSuccess: false,
+              dropDatasetFailed: true
+          })
+      }
+
+      /*
+      * Just returns the current store/state object
+      */
+      default:
+          return state;
     }
-
-    /*
-    * Change the load state to true to signaling
-    * that a SELECT Query is ongoing
-    */
-    case DatasetAction.SELECT_DATASETS: {
-        return Object.assign({}, state, { loading: true });
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a SELECT Query is success and there is datasets available in the
-    * store
-    */
-    case DatasetAction.SELECT_DATASETS_SUCCESS: {
-      return Object.assign({}, state, {
-        loaded: true,
-        loading: false,
-        datasets: action.payload
-      })
-    }
-
-    /*
-    * Change the load state to true to signaling
-    * that a CREATE a Dataset Query is ongoing
-    */
-    case DatasetAction.CREATE_DATASET: {
-      return Object.assign({}, state, { 
-        createDataset: [],
-        createDatasetError: [],
-        createDatasetSuccess: false,
-        createDatasetFailed: false,
-      });
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a CREATE a Dataset Query is success and there is datasets available in the
-    * store
-    */
-    case DatasetAction.CREATE_DATASET_SUCCESS: {
-      return Object.assign({}, state, {
-        createDataset: action.payload,
-        createDatasetName: action.payload,        
-        createDatasetError: [],
-        createDatasetSuccess: true,
-        createDatasetFailed: false
-      })
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a CREATE a Dataset Query is failed and there is an error message available in the
-    * store
-    */
-    case DatasetAction.CREATE_DATASET_FAIL: {
-      return Object.assign({}, state, {
-        createDataset: [],
-        createDatasetError: action.payload,
-        createDatasetSuccess: false,
-        createDatasetFailed: true
-      })
-    }
-
-    /*
-    * Change the load state to true to signaling
-    * that a DROP a Dataset Query is ongoing
-    */
-    case DatasetAction.DROP_DATASET: {
-      return Object.assign({}, state, { 
-        dropDataset: [],
-        dropDatasetError: [],
-        dropDatasetName: action.payload,
-        dropDatasetSuccess: false,
-        dropDatasetFailed: false
-       });
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a DROP a Dataset Query is success and there is datasets available in the
-    * store
-    */
-    case DatasetAction.DROP_DATASET_SUCCESS: {
-      return Object.assign({}, state, {
-        dropDataset: action.payload,
-        dropDatasetError: [],
-        dropDatasetSuccess: true,
-        dropDatasetFailed: false
-      })
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a DROP a Dataset Query is failed and there is an error message available in the
-    * store
-    */
-    case DatasetAction.DROP_DATASET_FAIL: {
-      return Object.assign({}, state, {
-        dropDataset: [],
-        dropDatasetError: action.payload,
-        dropDatasetSuccess: false,
-        dropDatasetFailed: true
-      })
-    }
-
-    /*
-    * Just returns the current store/state object
-    */
-    default:
-      return state;
-  }
-}
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/datatype.reducer.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/datatype.reducer.ts
index 1036fdb..289b889 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/datatype.reducer.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/datatype.reducer.ts
@@ -11,7 +11,6 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { Datatype } from '../models/asterixDB.model';
 import * as DatatypeAction from '../actions/datatype.actions';
 
 export type Action = DatatypeAction.All;
@@ -20,148 +19,148 @@
 ** Interfaces for datatype in store/state
 */
 export interface State {
-  loaded: boolean,
-  loading: boolean,
-  datatypes: Datatype[],
-  createDatatype: any[],
-  createDatatypeError: any[],
-  createDatatypeSuccess: boolean,
-  createDatatypeFailed: boolean,
-  dropDatatype: any[],
-  dropDatatypeError: any[],
-  dropDatatypeSuccess: boolean,
-  dropDatatypeFailed: boolean
+    loaded: boolean,
+    loading: boolean,
+    datatypes: any[],
+    createDatatype: any[],
+    createDatatypeError: any[],
+    createDatatypeSuccess: boolean,
+    createDatatypeFailed: boolean,
+    dropDatatype: any[],
+    dropDatatypeError: any[],
+    dropDatatypeSuccess: boolean,
+    dropDatatypeFailed: boolean
 };
 
 const initialState: State = {
-  loaded: false,
-  loading: false,
-  datatypes: [],
-  createDatatype: [],
-  createDatatypeError: [],
-  createDatatypeSuccess: false,
-  createDatatypeFailed: false,
-  dropDatatype: [],
-  dropDatatypeError: [],
-  dropDatatypeSuccess: false,
-  dropDatatypeFailed: false
+    loaded: false,
+    loading: false,
+    datatypes: [],
+    createDatatype: [],
+    createDatatypeError: [],
+    createDatatypeSuccess: false,
+    createDatatypeFailed: false,
+    dropDatatype: [],
+    dropDatatypeError: [],
+    dropDatatypeSuccess: false,
+    dropDatatypeFailed: false
 };
 
 /*
 ** Reducer function for datatypes in store/state
 */
 export function datatypeReducer(state = initialState, action: Action) {
-  switch (action.type) {
+    switch (action.type) {
 
-    /*
-    * Change the load state to true to signaling
-    * that a SELECT Query is ongoing
-    */
-    case DatatypeAction.SELECT_DATATYPES: {
-        return Object.assign({}, state, { loading: true });
+        /*
+        * Change the load state to true to signaling
+        * that a SELECT Query is ongoing
+        */
+        case DatatypeAction.SELECT_DATATYPES: {
+            return Object.assign({}, state, { loading: true });
+        }
+
+        /*
+        * Change the load state to false, and loaded to true to signaling
+        * that a SELECT Query is success and there is datatypes available in the
+        * store
+        */
+        case DatatypeAction.SELECT_DATATYPES_SUCCESS: {
+            return Object.assign({}, state, {
+              loaded: true,
+              loading: false,
+              datatypes: action.payload
+            })
+        }
+
+        /*
+        * Change the load state to true to signaling
+        * that a CREATE a Datatype Query is ongoing
+        */
+        case DatatypeAction.CREATE_DATATYPE: {
+            return Object.assign({}, state, {
+              createDatatype: [],
+              createDatatypeName: action.payload,
+              createDatatypeError: [],
+              createDatatypeSuccess: false,
+              createDatatypeFailed: false,
+            });
+        }
+
+        /*
+        * Change the load state to false, and loaded to true to signaling
+        * that a CREATE a Datatype Query is success and there is datasets available in the
+        * store
+        */
+        case DatatypeAction.CREATE_DATATYPE_SUCCESS: {
+            return Object.assign({}, state, {
+              createDatatype: action.payload,
+              createDatatypeError: [],
+              createDatatypeSuccess: true,
+              createDatatypeFailed: false
+            })
+        }
+
+        /*
+        * Change the load state to false, and loaded to true to signaling
+        * that a CREATE a Datatype Query is failed and there is an error message available in the
+        * store
+        */
+        case DatatypeAction.CREATE_DATATYPE_FAIL: {
+            return Object.assign({}, state, {
+              createDatatype: [],
+              createDatatypeError: action.payload,
+              createDatatypeSuccess: false,
+              createDatatypeFailed: true
+            })
+        }
+
+        /*
+        * Change the load state to true to signaling
+        * that a DROP a Datatype Query is ongoing
+        */
+        case DatatypeAction.DROP_DATATYPE: {
+            return Object.assign({}, state, {
+              dropDatatype: [],
+              dropDatatypeName: action.payload,
+              dropDatatypeError: [],
+              dropDatatypeSuccess: false,
+              dropDatatypeFailed: false
+              });
+        }
+
+        /*
+        * Change the load state to false, and loaded to true to signaling
+        * that a DROP a Datatype Query is success and there is datasets available in the
+        * store
+        */
+        case DatatypeAction.DROP_DATATYPE_SUCCESS: {
+            return Object.assign({}, state, {
+                dropDatatype: action.payload,
+                dropDatatypeError: [],
+                dropDatatypeSuccess: true,
+                dropDatatypeFailed: false
+            })
+        }
+
+        /*
+        * Change the load state to false, and loaded to true to signaling
+        * that a DROP a Datatype Query is failed and there is an error message available in the
+        * store
+        */
+        case DatatypeAction.DROP_DATATYPE_FAIL: {
+            return Object.assign({}, state, {
+                dropDatatype: [],
+                dropDatatypeError: action.payload,
+                dropDatatypeSuccess: false,
+                dropDatatypeFailed: true
+            })
+        }
+
+        /*
+        * Just returns the current store/state object
+        */
+        default:
+            return state;
     }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a SELECT Query is success and there is datatypes available in the
-    * store
-    */
-    case DatatypeAction.SELECT_DATATYPES_SUCCESS: {
-      return Object.assign({}, state, {
-        loaded: true,
-        loading: false,
-        datatypes: action.payload
-      })
-    }
-
-    /*
-    * Change the load state to true to signaling
-    * that a CREATE a Datatype Query is ongoing
-    */
-    case DatatypeAction.CREATE_DATATYPE: {
-      return Object.assign({}, state, { 
-        createDatatype: [],
-        createDatatypeName: action.payload,        
-        createDatatypeError: [],
-        createDatatypeSuccess: false,
-        createDatatypeFailed: false,
-      });
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a CREATE a Datatype Query is success and there is datasets available in the
-    * store
-    */
-    case DatatypeAction.CREATE_DATATYPE_SUCCESS: {
-      return Object.assign({}, state, {
-        createDatatype: action.payload,
-        createDatatypeError: [],
-        createDatatypeSuccess: true,
-        createDatatypeFailed: false
-      })
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a CREATE a Datatype Query is failed and there is an error message available in the
-    * store
-    */
-    case DatatypeAction.CREATE_DATATYPE_FAIL: {
-      return Object.assign({}, state, {
-        createDatatype: [],
-        createDatatypeError: action.payload,
-        createDatatypeSuccess: false,
-        createDatatypeFailed: true
-      })
-    }
-
-    /*
-    * Change the load state to true to signaling
-    * that a DROP a Datatype Query is ongoing
-    */
-    case DatatypeAction.DROP_DATATYPE: {
-      return Object.assign({}, state, { 
-        dropDatatype: [],
-        dropDatatypeName: action.payload,       
-        dropDatatypeError: [],
-        dropDatatypeSuccess: false,
-        dropDatatypeFailed: false
-        });
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a DROP a Datatype Query is success and there is datasets available in the
-    * store
-    */
-    case DatatypeAction.DROP_DATATYPE_SUCCESS: {
-      return Object.assign({}, state, {
-        dropDatatype: action.payload,
-        dropDatatypeError: [],
-        dropDatatypeSuccess: true,
-        dropDatatypeFailed: false
-      })
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a DROP a Datatype Query is failed and there is an error message available in the
-    * store
-    */
-    case DatatypeAction.DROP_DATATYPE_FAIL: {
-      return Object.assign({}, state, {
-        dropDatatype: [],
-        dropDatatypeError: action.payload,
-        dropDatatypeSuccess: false,
-        dropDatatypeFailed: true
-      })
-    }
-
-    /*
-    * Just returns the current store/state object
-    */
-    default:
-      return state;
-  }
-}
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/dataverse.reducer.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/dataverse.reducer.ts
index 7ac78ea..28f6a58 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/dataverse.reducer.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/dataverse.reducer.ts
@@ -11,7 +11,6 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { Dataverse } from '../models/asterixDB.model';
 import * as DataverseAction from '../actions/dataverse.actions';
 
 export type Action = DataverseAction.All;
@@ -20,152 +19,161 @@
 ** Interfaces for dataverses in store/state
 */
 export interface State {
-  loaded: boolean,
-  loading: boolean,
-  dataverses: any[],
-  createDataverse: any[],
-  createDataverseName: string,
-  createDataverseError: any[],
-  createDataverseSuccess: boolean,
-  createDataverseFailed: boolean
-  dropDataverse: any[],
-  dropDataverseName: string;
-  dropDataverseError: any[],
-  dropDataverseSuccess: boolean,
-  dropDataverseFailed: boolean
+    loaded: boolean,
+    loading: boolean,
+    dataverses: any[],
+    createDataverse: any[],
+    createDataverseName: string,
+    createDataverseError: any[],
+    createDataverseSuccess: boolean,
+    createDataverseFailed: boolean
+    dropDataverse: any[],
+    dropDataverseName: string;
+    dropDataverseError: any[],
+    dropDataverseSuccess: boolean,
+    dropDataverseFailed: boolean,
+    defaultDataverseName: any
 };
 
 const initialState: State = {
-  loaded: false,
-  loading: false,
-  dataverses: [],
-  createDataverse: [],
-  createDataverseName: "",
-  createDataverseError: [],
-  createDataverseSuccess: false,
-  createDataverseFailed: false,
-  dropDataverse: [],
-  dropDataverseName: "",
-  dropDataverseError: [],
-  dropDataverseSuccess: false,
-  dropDataverseFailed: false
+    loaded: false,
+    loading: false,
+    dataverses: [],
+    createDataverse: [],
+    createDataverseName: "",
+    createDataverseError: [],
+    createDataverseSuccess: false,
+    createDataverseFailed: false,
+    dropDataverse: [],
+    dropDataverseName: "",
+    dropDataverseError: [],
+    dropDataverseSuccess: false,
+    dropDataverseFailed: false,
+    defaultDataverseName: 'Default'
 };
 
 /*
 ** Reducer function for dataverses in store/state
 */
 export function dataverseReducer(state = initialState, action: Action) {
-  switch (action.type) {
+    switch (action.type) {
 
-    /*
-    * Change the load state to true to signaling
-    * that a SELECT Query is ongoing
-    */
-    case DataverseAction.SELECT_DATAVERSES: {
-        return Object.assign({}, state, { loading: true });
+      /*
+      * Set the default Dataverse Name
+      */
+     case DataverseAction.SET_DEFAULT_DATAVERSE: {
+        return Object.assign({}, state, { defaultDataverseName: action.payload });
+      }
+
+      /*
+      * Change the load state to true to signaling
+      * that a SELECT Query is ongoing
+      */
+      case DataverseAction.SELECT_DATAVERSES: {
+          return Object.assign({}, state, { loading: true });
+      }
+
+      /*
+      * Change the load state to false, and loaded to true to signaling
+      * that a SELECT Query is success and there is dataverses available in the
+      * store
+      */
+      case DataverseAction.SELECT_DATAVERSES_SUCCESS: {
+          return Object.assign({}, state, {
+              loaded: true,
+              loading: false,
+              dataverses: action.payload //  _.sortBy(_.values(action.payload), 'dataverseName')
+          })
+      }
+
+      /*
+      * Change the load state to true to signaling
+      * that a CREATE a Dataset Query is ongoing
+      */
+      case DataverseAction.CREATE_DATAVERSE: {
+          return Object.assign({}, state, {
+              createDataverse: [],
+              createDataverseName: action.payload,
+              createDataverseError: [],
+              createDataverseSuccess: false,
+              createDataverseFailed: false
+          });
+      }
+
+      /*
+      * Change the load state to false, and loaded to true to signaling
+      * that a CREATE a Dataverse Query is success and there is a success message available in the
+      * store
+      */
+      case DataverseAction.CREATE_DATAVERSE_SUCCESS: {
+          return Object.assign({}, state, {
+              createDataverse: action.payload,
+              createDataverseError: [],
+              createDataverseSuccess: true,
+              createDataverseFailed: false
+          })
+      }
+
+      /*
+      * Change the load state to false, and loaded to true to signaling
+      * that a CREATE a Dataverse Query is failed and there is an error message available in the
+      * store
+      */
+      case DataverseAction.CREATE_DATAVERSE_FAIL: {
+          return Object.assign({}, state, {
+              createDataverse: [],
+              createDataverseError: action.payload,
+              createDataverseSuccess: false,
+              createDataverseFailed: true
+          })
+      }
+
+      /*
+      * Change the load state to true to signaling
+      * that a DROP a Dataverse Query is ongoing
+      */
+      case DataverseAction.DROP_DATAVERSE: {
+          return Object.assign({}, state, {
+              dropDataverse: [],
+              dropDataverseName: action.payload,
+              dropDataverseError: [],
+              dropDataverseSuccess: false,
+              dropDataverseFailed: false
+          });
+      }
+
+      /*
+      * Change the load state to false, and loaded to true to signaling
+      * that a DROP a Dataverse Query is success and there is success message available in the
+      * store
+      */
+      case DataverseAction.DROP_DATAVERSE_SUCCESS: {
+          return Object.assign({}, state, {
+              dropDataverse: action.payload,
+              dropDataverseError: [],
+              dropDataverseSuccess: true,
+              dropDataverseFailed: false
+          })
+      }
+
+      /*
+      * Change the load state to false, and loaded to true to signaling
+      * that a DROP a Dataverse Query is failed and there is an error message available in the
+      * store
+      */
+      case DataverseAction.DROP_DATAVERSE_FAIL: {
+          return Object.assign({}, state, {
+              dropDataverse: [],
+              dropDataverseError: action.payload,
+              dropDataverseSuccess: false,
+              dropDataverseFailed: true
+          })
+      }
+
+      /*
+      * Just returns the current store/state object
+      */
+      default:
+          return state;
     }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a SELECT Query is success and there is dataverses available in the
-    * store
-    */
-    case DataverseAction.SELECT_DATAVERSES_SUCCESS: {
-      return Object.assign({}, state, {
-        loaded: true,
-        loading: false,
-        dataverses: action.payload //  _.sortBy(_.values(action.payload), 'dataverseName')
-      })
-    }
-
-    /*
-    * Change the load state to true to signaling
-    * that a CREATE a Dataset Query is ongoing
-    */
-    case DataverseAction.CREATE_DATAVERSE: {
-      return Object.assign({}, state, { 
-        createDataverse: [],
-        createDataverseName: action.payload,
-        createDataverseError: [],
-        createDataverseSuccess: false,
-        createDataverseFailed: false
-      });
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a CREATE a Dataverse Query is success and there is a success message available in the
-    * store
-    */
-    case DataverseAction.CREATE_DATAVERSE_SUCCESS: {
-      return Object.assign({}, state, {
-        createDataverse: action.payload,
-        createDataverseError: [],        
-        createDataverseSuccess: true,
-        createDataverseFailed: false
-      })
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a CREATE a Dataverse Query is failed and there is an error message available in the
-    * store
-    */
-    case DataverseAction.CREATE_DATAVERSE_FAIL: {
-      return Object.assign({}, state, {
-        createDataverse: [],
-        createDataverseError: action.payload,
-        createDataverseSuccess: false,
-        createDataverseFailed: true
-      })
-    }
-
-    /*
-    * Change the load state to true to signaling
-    * that a DROP a Dataverse Query is ongoing
-    */
-    case DataverseAction.DROP_DATAVERSE: {
-      return Object.assign({}, state, { 
-        dropDataverse: [],
-        dropDataverseName: action.payload,
-        dropDataverseError: [],
-        dropDataverseSuccess: false,
-        dropDataverseFailed: false
-      });
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a DROP a Dataverse Query is success and there is success message available in the
-    * store
-    */
-    case DataverseAction.DROP_DATAVERSE_SUCCESS: {
-      return Object.assign({}, state, {
-        dropDataverse: action.payload,
-        dropDataverseError: [],
-        dropDataverseSuccess: true,
-        dropDataverseFailed: false
-      })
-    }
-
-     /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a DROP a Dataverse Query is failed and there is an error message available in the
-    * store
-    */
-    case DataverseAction.DROP_DATAVERSE_FAIL: {
-      return Object.assign({}, state, {
-        dropDataverse: [],
-        dropDataverseError: action.payload,
-        dropDataverseSuccess: false,
-        dropDataverseFailed: true
-      })
-    }
-
-    /*
-    * Just returns the current store/state object
-    */
-    default:
-      return state;
-  }
 }
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/index.reducer.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/index.reducer.ts
index 792abc7..7d8dd33 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/index.reducer.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/index.reducer.ts
@@ -11,7 +11,6 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { Index } from '../models/asterixDB.model';
 import * as IndexAction from '../actions/index.actions';
 
 export type Action = IndexAction.All;
@@ -20,148 +19,147 @@
 ** Interfaces for indexes in store/state
 */
 export interface State {
-  loaded: boolean,
-  loading: boolean,
-  indexes: Index[],
-  createIndex: any[],
-  createIndexError: any[],
-  createIndexSuccess: boolean,
-  createIndexFailed: boolean,
-  dropIndex: any[],
-  dropIndexError: any[],
-  dropIndexSuccess: boolean,
-  dropIndexFailed: boolean
+    loaded: boolean,
+    loading: boolean,
+    indexes: any[],
+    createIndex: any[],
+    createIndexError: any[],
+    createIndexSuccess: boolean,
+    createIndexFailed: boolean,
+    dropIndex: any[],
+    dropIndexError: any[],
+    dropIndexSuccess: boolean,
+    dropIndexFailed: boolean
 };
 
 const initialState: State = {
-  loaded: false,
-  loading: false,
-  indexes: [],
-  createIndex: [],
-  createIndexError: [],
-  createIndexSuccess: false,
-  createIndexFailed: false,
-  dropIndex: [],
-  dropIndexError: [],
-  dropIndexSuccess: false,
-  dropIndexFailed: false
+    loaded: false,
+    loading: false,
+    indexes: [],
+    createIndex: [],
+    createIndexError: [],
+    createIndexSuccess: false,
+    createIndexFailed: false,
+    dropIndex: [],
+    dropIndexError: [],
+    dropIndexSuccess: false,
+    dropIndexFailed: false
 };
 
 /*
 ** Reducer function for indexes in store/state
 */
 export function indexReducer(state = initialState, action: Action) {
-  switch (action.type) {
+    switch (action.type) {
+        /*
+        * Change the load state to true to signaling
+        * that a SELECT Query is ongoing
+        */
+        case IndexAction.SELECT_INDEXES: {
+            return Object.assign({}, state, { loading: true });
+        }
 
-    /*
-    * Change the load state to true to signaling
-    * that a SELECT Query is ongoing
-    */
-    case IndexAction.SELECT_INDEXES: {
-      return Object.assign({}, state, { loading: true });
+        /*
+        * Change the load state to false, and loaded to true to signaling
+        * that a SELECT Query is success and there is indexes available in the
+        * store
+        */
+        case IndexAction.SELECT_INDEXES_SUCCESS: {
+            return Object.assign({}, state, {
+              loaded: true,
+              loading: false,
+              indexes: action.payload
+            })
+        }
+
+        /*
+        * Change the load state to true to signaling
+        * that a CREATE a Index Query is ongoing
+        */
+        case IndexAction.CREATE_INDEX: {
+            return Object.assign({}, state, {
+              createIndex: [],
+              createIndexName: action.payload,
+              createIndexError: [],
+              createIndexSuccess: false,
+              createIndexFailed: false
+            });
+        }
+
+        /*
+        * Change the load state to false, and loaded to true to signaling
+        * that a CREATE a Index Query is success and there is datasets available in the
+        * store
+        */
+        case IndexAction.CREATE_INDEX_SUCCESS: {
+            return Object.assign({}, state, {
+                createIndex: [],
+                createIndexError: [],
+                createIndexSuccess: true,
+                createIndexFailed: false
+            })
+        }
+
+        /*
+        * Change the load state to false, and loaded to true to signaling
+        * that a CREATE a Index Query is success and there is datasets available in the
+        * store
+        */
+        case IndexAction.CREATE_INDEX_SUCCESS: {
+            return Object.assign({}, state, {
+                createIndex: action.payload,
+                createIndexError: [],
+                createIndexSuccess: false,
+                createIndexFailed: true
+            })
+        }
+
+        /*
+        * Change the load state to true to signaling
+        * that a DROP a Index Query is ongoing
+        */
+        case IndexAction.DROP_INDEX: {
+            return Object.assign({}, state, {
+              dropIndex: [],
+              dropIndexError: [],
+              dropIndexName: action.payload,
+              dropIndexSuccess: false,
+              dropIndexFailed: false
+            });
+        }
+
+        /*
+        * Change the load state to false, and loaded to true to signaling
+        * that a DROP a Index Query is success and there is datasets available in the
+        * store
+        */
+        case IndexAction.DROP_INDEX_SUCCESS: {
+            return Object.assign({}, state, {
+                dropIndex: action.payload,
+                dropIndexError: [],
+                dropIndexSuccess: true,
+                dropIndexFailed: false
+            })
+        }
+
+        /*
+        * Change the load state to false, and loaded to true to signaling
+        * that a DROP a Index Query is failed and there is an error message available in the
+        * store
+        */
+        case IndexAction.DROP_INDEX_FAIL: {
+            return Object.assign({}, state, {
+                dropIndex: [],
+                dropIndexError: action.payload,
+                dropIndexSuccess: false,
+                dropIndexFailed: true
+            })
+        }
+
+        /*
+        * Just returns the current store/state object
+        */
+        default:
+            return state;
     }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a SELECT Query is success and there is indexes available in the
-    * store
-    */
-    case IndexAction.SELECT_INDEXES_SUCCESS: {
-      return Object.assign({}, state, {
-        loaded: true,
-        loading: false,
-        indexes: action.payload
-      })
-    }
-
-    /*
-    * Change the load state to true to signaling
-    * that a CREATE a Index Query is ongoing
-    */
-    case IndexAction.CREATE_INDEX: {
-      return Object.assign({}, state, { 
-        createIndex: [],
-        createIndexName: action.payload,       
-        createIndexError: [],
-        createIndexSuccess: false,
-        createIndexFailed: false
-      });
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a CREATE a Index Query is success and there is datasets available in the
-    * store
-    */
-    case IndexAction.CREATE_INDEX_SUCCESS: {
-      return Object.assign({}, state, {
-        createIndex: [],
-        createIndexError: [],
-        createIndexSuccess: true,
-        createIndexFailed: false
-      })
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a CREATE a Index Query is success and there is datasets available in the
-    * store
-    */
-    case IndexAction.CREATE_INDEX_SUCCESS: {
-      return Object.assign({}, state, {
-        createIndex: action.payload,
-        createIndexError: [],
-        createIndexSuccess: false,
-        createIndexFailed: true
-      })
-    }
-
-    /*
-    * Change the load state to true to signaling
-    * that a DROP a Index Query is ongoing
-    */
-    case IndexAction.DROP_INDEX: {
-      return Object.assign({}, state, { 
-        dropIndex: [],
-        dropIndexError: [],
-        dropIndexName: action.payload,               
-        dropIndexSuccess: false,
-        dropIndexFailed: false 
-      });
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a DROP a Index Query is success and there is datasets available in the
-    * store
-    */
-    case IndexAction.DROP_INDEX_SUCCESS: {
-      return Object.assign({}, state, {
-        dropIndex: action.payload,
-        dropIndexError: [],
-        dropIndexSuccess: true,
-        dropIndexFailed: false 
-      })
-    }
-
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a DROP a Index Query is failed and there is an error message available in the
-    * store
-    */
-    case IndexAction.DROP_INDEX_FAIL: {
-      return Object.assign({}, state, {
-        dropIndex: [],
-        dropIndexError: action.payload,
-        dropIndexSuccess: false,
-        dropIndexFailed: true 
-      })
-    }
-
-    /*
-    * Just returns the current store/state object
-    */
-    default:
-      return state;
-  }
 }
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/index.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/index.ts
index 1965d8c..77b678c 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/index.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/index.ts
@@ -11,39 +11,36 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { ActionReducer } from '@ngrx/store';
 import * as fromDataverse from './dataverse.reducer';
 import * as fromDataset from './dataset.reducer';
 import * as fromDatatype from './datatype.reducer';
 import * as fromIndex from './index.reducer';
 import * as fromQuery from './query.reducer';
 import * as fromQueryMetadata from './query-metadata.reducer';
-import * as fromMetadata from './metadata.reducer';
 import * as fromAppState from './app.reducer';
 
 /*
 ** Global Interfaces store/state
 */
 export interface ModelState {
-  dataverse: fromDataverse.State,
-  dataset: fromDataset.State,
-  datatype: fromDatatype.State,
-  index: fromIndex.State,
-  sqlQuery: fromQuery.State,
-  sqlMetadataQuery: fromQueryMetadata.State,
-  metadata: fromMetadata.State,
-  appState: fromAppState.State,
+    dataverse: fromDataverse.State,
+    dataset: fromDataset.State,
+    datatype: fromDatatype.State,
+    index: fromIndex.State,
+    sqlQuery: fromQuery.State,
+    sqlMetadataQuery: fromQueryMetadata.State,
+    appState: fromAppState.State,
 }
 
 /*
 ** Global Reducers configuration
 */
 export const reducers = {
-  dataverse: fromDataverse.dataverseReducer,
-  dataset: fromDataset.datasetReducer,
-  datatype: fromDatatype.datatypeReducer,
-  index: fromIndex.indexReducer,
-  sqlQuery: fromQuery.sqlReducer,
-  sqlMetadataQuery: fromQueryMetadata.sqlMetadataReducer,
-  metadata: fromMetadata.metadataTreeReducer
-};
+    dataverse: fromDataverse.dataverseReducer,
+    dataset: fromDataset.datasetReducer,
+    datatype: fromDatatype.datatypeReducer,
+    index: fromIndex.indexReducer,
+    sqlQuery: fromQuery.sqlReducer,
+    sqlMetadataQuery: fromQueryMetadata.sqlMetadataReducer,
+    app: fromAppState.appReducer
+};
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/metadata.reducer.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/metadata.reducer.ts
deleted file mode 100755
index 52b88f2..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/metadata.reducer.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import * as metadataTreeActions from '../actions/metadata.actions';
-
-export type Action = metadataTreeActions.All;
-
-/*
-** Interfaces for the metadata tree in store/state
-*/
-export interface State {
-  tree: any[],
-  loading: boolean,
-  loaded: boolean,
-};
-
-const initialState: State = {
-  tree: [],
-  loading: false,
-  loaded: false
-};
-
-export function metadataTreeReducer(state = initialState, action: Action) {
-  switch (action.type) {
-    case metadataTreeActions.UPDATE_METADATA_TREE: {
-      return Object.assign({}, state, {
-        tree: [],
-        loading: true,
-        loaded: false
-      });
-    }
-
-    case metadataTreeActions.UPDATE_METADATA_TREE_SUCCESS: {
-      return Object.assign({}, state, {
-        tree: [...state.tree, action.payload],
-        loading: false,
-        loaded: true
-      });
-    }
-    /*
-    * Just returns the current store/state object
-    */
-    default:
-      return state;
-  }
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/query-metadata.reducer.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/query-metadata.reducer.ts
index e360e95..b8af934 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/query-metadata.reducer.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/query-metadata.reducer.ts
@@ -11,7 +11,6 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { AsterixDBQueryMessage } from '../models/asterixDB.model';
 import * as sqlQueryActions from '../actions/query.actions';
 
 export type Action = sqlQueryActions.All;
@@ -20,77 +19,77 @@
 ** Interfaces for sql++ queries in store/state
 */
 export interface State {
-  loading: boolean,
-  loaded: boolean,
-  success: boolean,
-  sqlQueryMetadataString: string,
-  sqlQueryMetadataResult: AsterixDBQueryMessage[],
-  sqlQueryMetadataError: AsterixDBQueryMessage[]
+    loading: boolean,
+    loaded: boolean,
+    success: boolean,
+    sqlQueryMetadataString: string,
+    sqlQueryMetadataResult: any[],
+    sqlQueryMetadataError: any[]
 };
 
 const initialState: State = {
-  loading: false,
-  loaded: false,
-  success: false,
-  sqlQueryMetadataString: "",
-  sqlQueryMetadataResult: [],
-  sqlQueryMetadataError: [],
+    loading: false,
+    loaded: false,
+    success: false,
+    sqlQueryMetadataString: "",
+    sqlQueryMetadataResult: [],
+    sqlQueryMetadataError: [],
 };
 
 /*
 ** Reducer function for sql++ queries in store/state
 */
 export function sqlMetadataReducer(state = initialState, action: Action) {
-  switch (action.type) {
-    /*
-    * Change the load state to true, and clear previous results
-    * to signaling that a METADATA EXECUTE a SQL++ Query is ongoing
-    */
-    case sqlQueryActions.EXECUTE_METADATA_QUERY: {
-      return Object.assign({}, state, {
-        loading: false,
-        loaded: true,
-        success: false,
-        sqlQueryMetadataString: action.payload,
-        sqlQueryMetadataResult: [],
-        sqlQueryMetadataError: []
-      });
-    }
+    switch (action.type) {
+        /*
+        * Change the load state to true, and clear previous results
+        * to signaling that a METADATA EXECUTE a SQL++ Query is ongoing
+        */
+        case sqlQueryActions.EXECUTE_METADATA_QUERY: {
+            return Object.assign({}, state, {
+                loading: false,
+                loaded: true,
+                success: false,
+                sqlQueryMetadataString: action.payload,
+                sqlQueryMetadataResult: [],
+                sqlQueryMetadataError: []
+            });
+        }
 
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a  METADATA EXECUTE Query is success and there is data available in the
-    * store
-    */
-    case sqlQueryActions.EXECUTE_METADATA_QUERY_SUCCESS: {
-      return Object.assign({}, state, {
-        loading: false,
-        loaded: true,
-        success: true,
-        sqlQueryMetadataResult: action.payload,
-        sqlQueryMetadataError: []
-      })
-    }
+        /*
+        * Change the load state to false, and loaded to true to signaling
+        * that a  METADATA EXECUTE Query is success and there is data available in the
+        * store
+        */
+        case sqlQueryActions.EXECUTE_METADATA_QUERY_SUCCESS: {
+            return Object.assign({}, state, {
+                loading: false,
+                loaded: true,
+                success: true,
+                sqlQueryMetadataResult: action.payload,
+                sqlQueryMetadataError: []
+            })
+        }
 
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a  METADATA EXECUTE Query is failed and there is error data available in the
-    * store
-    */
-    case sqlQueryActions.EXECUTE_METADATA_QUERY_FAIL: {
-      return Object.assign({}, state, {
-        loading: false,
-        loaded: true,
-        success: false,
-        sqlQueryMetadataResult: [],
-        sqlQueryMetadataError: action.payload
-      })
-    }
+        /*
+        * Change the load state to false, and loaded to true to signaling
+        * that a  METADATA EXECUTE Query is failed and there is error data available in the
+        * store
+        */
+        case sqlQueryActions.EXECUTE_METADATA_QUERY_FAIL: {
+            return Object.assign({}, state, {
+                loading: false,
+                loaded: true,
+                success: false,
+                sqlQueryMetadataResult: [],
+                sqlQueryMetadataError: action.payload
+            })
+        }
 
-    /*
-    * Just returns the current store/state object
-    */
-    default:
-      return state;
-  }
+        /*
+        * Just returns the current store/state object
+        */
+        default:
+            return state;
+    }
 }
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/query.reducer.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/query.reducer.ts
index 5c8ad08..8dc67a0 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/query.reducer.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/reducers/query.reducer.ts
@@ -11,7 +11,6 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { AsterixDBQueryMessage } from '../models/asterixDB.model';
 import * as sqlQueryActions from '../actions/query.actions';
 
 export type Action = sqlQueryActions.All;
@@ -20,78 +19,127 @@
 ** Interfaces for sql++ queries in store/state
 */
 export interface State {
-  loading: boolean,
-  loaded: boolean,
-  success: boolean,
-  sqlQueryString: string,
-  sqlQueryResult: AsterixDBQueryMessage[],
-  sqlQueryError: AsterixDBQueryMessage[]
+    currentRequestId: string,
+    loadingHash: {},
+    loadedHash: {},
+    successHash:{},
+    errorHash: {},
+    sqlQueryString: string,
+    sqlQueryStringHash: {},
+    sqlQueryResultHash: {},
+    sqlQueryErrorHash: {},
+    sqlQueryPrepared: {},
+    sqlQueryMetrics: {}
 };
 
 const initialState: State = {
-  loading: false,
-  loaded: false,
-  success: false,
-  sqlQueryString: "",
-  sqlQueryResult: [],
-  sqlQueryError: []
+    currentRequestId: '',
+    loadingHash: {},
+    loadedHash: {},
+    successHash:{},
+    errorHash: {},
+    sqlQueryString: "",
+    sqlQueryStringHash: {},
+    sqlQueryResultHash: {},
+    sqlQueryErrorHash: {},
+    sqlQueryPrepared: {},
+    sqlQueryMetrics: {}
 };
 
 /*
 ** Reducer function for sql++ queries in store/state
 */
 export function sqlReducer(state = initialState, action: Action) {
-  switch (action.type) {
 
-    /*
-    * Change the load state to true, and clear previous results
-    * to signaling that a EXECUTE a SQL++ Query is ongoing
-    */
-    case sqlQueryActions.EXECUTE_QUERY: {
-      return Object.assign({}, state, {
-        loading: false,
-        loaded: true,
-        success: false,
-        sqlQueryString: action.payload,
-        sqlQueryResult: [],
-        sqlQueryError: []
-      });
-    }
+    switch (action.type) {
+        case sqlQueryActions.PREPARE_QUERY: {
+            return Object.assign({}, state, {
+                sqlQueryPrepared: { ...state.sqlQueryPrepared, [action.payload.editorId]: action.payload.queryString },
+                loadingHash: state.loadingHash,
+                errorHash: state.errorHash,
+                sqlQueryErrorHash: state.sqlQueryErrorHash,
+                sqlQueryResultHash: state.sqlQueryResultHash,
+                sqlQueryStringHash: state.sqlQueryStringHash,
+                sqlQueryMetrics: state.sqlQueryMetrics,
+                currentRequestId: state.currentRequestId
+            });
+        }
 
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a EXECUTE Query is success and there is data available in the
-    * store
-    */
-    case sqlQueryActions.EXECUTE_QUERY_SUCCESS: {
-      return Object.assign({}, state, {
-        loading: false,
-        loaded: true,
-        success: true,
-        sqlQueryResult: action.payload,
-        sqlQueryError: []
-      })
-    }
+        case sqlQueryActions.CLEAN_QUERY: {
+            return Object.assign({}, state, {
+                sqlQueryPrepared: { ...state.sqlQueryPrepared, [action.payload.editorId]: action.payload.queryString },
+                loadingHash: { ...state.loadingHash, [action.payload.editorId]: false },
+                loadedHash: { ...state.loadedHash, [action.payload.editorId]: false },
+                successHash: { ...state.successHash, [action.payload.editorId]: false },
+                errorHash: { ...state.errorHash, [action.payload.editorId]: false },
+                sqlQueryStringHash: { ...state.sqlQueryStringHash, [action.payload.editorId]: {} },
+                sqlQueryResultHash: { ...state.sqlQueryResultHash, [action.payload.editorId]: {} },
+                sqlQueryErrorHash: { ...state.sqlQueryErrorHash, [action.payload.editorId]: [] },
+                sqlQueryMetrics: { ...state.sqlQueryMetrics, [action.payload.editorId]: {} },
+                currentRequestId: action.payload.editorId
+            });
+        }
 
-    /*
-    * Change the load state to false, and loaded to true to signaling
-    * that a EXECUTE Query is failed and there is error data available in the
-    * store
-    */
-    case sqlQueryActions.EXECUTE_QUERY_FAIL: {
-      return Object.assign({}, state, {
-        loading: false,
-        loaded: true,
-        success: false,
-        sqlQueryResult: [],
-        sqlQueryError: action.payload
-      })
+        /*
+        * Change the load state to true, and clear previous results
+        * to signaling that a EXECUTE a SQL++ Query is ongoing
+        */
+        case sqlQueryActions.EXECUTE_QUERY: {
+            return Object.assign({}, state, {
+                currentRequestId: action.payload.requestId,
+                loadingHash: { ...state.loadingHash, [action.payload.requestId]: true },
+                loadedHash: { ...state.loadedHash, [action.payload.requestId]: false },
+                successHash: { ...state.successHash, [action.payload.requestId]: false },
+                errorHash: { ...state.errorHash, [action.payload.requestId]: false },
+                sqlQueryString: action.payload.queryString,
+                sqlQueryStringHash: { ...state.sqlQueryStringHash, [action.payload.requestId]: action.payload.queryString },
+                sqlQueryResultHash: { ...state.sqlQueryResultHash, [action.payload.requestId]: [] },
+                sqlQueryErrorHash: { ...state.sqlQueryErrorHash, [action.payload.requestId]: [] },
+                sqlQueryMetrics: { ...state.sqlQueryMetrics, [action.payload.requestId]: [] },
+               });
+        }
+
+        /*
+        * Change the load state to false, and loaded to true to signaling
+        * that a EXECUTE Query is success and there is data available in the
+        * store
+        */
+        case sqlQueryActions.EXECUTE_QUERY_SUCCESS: {
+            return Object.assign({}, state, {
+                loadingHash: { ...state.loadingHash, [state.currentRequestId]: false },
+                loadedHash: { ...state.loadedHash, [state.currentRequestId]: true },
+                successHash: { ...state.successHash, [state.currentRequestId]: true },
+                errorHash: { ...state.errorHash, [state.currentRequestId]: false },
+                sqlQueryStringHash: { ...state.sqlQueryStringHash, [state.currentRequestId]: state.sqlQueryString },
+                sqlQueryResultHash: { ...state.sqlQueryResultHash, [state.currentRequestId]: action.payload },
+                sqlQueryErrorHash: { ...state.sqlQueryErrorHash, [state.currentRequestId]: [] },
+                sqlQueryMetrics: { ...state.sqlQueryMetrics, [state.currentRequestId]: action.payload.metrics }
+            })
+        }
+
+        /*
+        * Change the load state to false, and loaded to true to signaling
+        * that a EXECUTE Query is failed and there is error data available in the
+        * store
+        */
+        case sqlQueryActions.EXECUTE_QUERY_FAIL: {
+            return Object.assign({}, state, {
+                loadingHash: { ...state.loadingHash, [state.currentRequestId]: false },
+                loadedHash: { ...state.loadedHash, [state.currentRequestId]: true },
+                successHash: { ...state.successHash, [state.currentRequestId]: false },
+                errorHash: { ...state.errorHash, [state.currentRequestId]: true },
+                sqlQueryStringHash: { ...state.sqlQueryStringHash, [state.currentRequestId]: state.sqlQueryString },
+                sqlQueryResultHash: { ...state.sqlQueryResultHash, [state.currentRequestId]: [] },
+                sqlQueryErrorHash: { ...state.sqlQueryErrorHash, [state.currentRequestId]: action.payload.errors },
+                sqlQueryMetrics: { ...state.sqlQueryMetrics, [state.currentRequestId]: [] },
+            })
+        }
+
+        /*
+        * Just returns the current store/state object
+        */
+        default: {
+            return state;
+        }
     }
-    
-    /*
-    * Just returns the current store/state object
-    */
-    default:
-      return state;
-  }
 }
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/services/app-core.service.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/services/app-core.service.ts
deleted file mode 100755
index ed38c26..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/services/app-core.service.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { Injectable } from '@angular/core';
-import { Store } from '@ngrx/store';
-import * as dataverseActions from '../../shared/actions/dataverse.actions'
-import * as datasetActions from '../../shared/actions/dataset.actions'
-import * as datatypesActions from '../../shared/actions/datatype.actions'
-import * as indexesActions from '../../shared/actions/index.actions'
-import * as metadataActions from '../../shared/actions/metadata.actions'
-
-/*
-* Main application service to initialize,
-* load, set App status and initial data, and synchronize app level functionality
-*/
-@Injectable()
-export class AppCoreService {
-	/*
-  	* Initialize and load metadata store structures
-	*/
-	constructor(private store: Store<any>) {
-		console.log('AsterixDB Web Console Core Service')
-		this.store.dispatch(new dataverseActions.SelectDataverses('-'));
-		this.store.dispatch(new datasetActions.SelectDatasets('-'));
-		this.store.dispatch(new datatypesActions.SelectDatatypes('-'));
-		this.store.dispatch(new indexesActions.SelectIndexes('-'));
-	}
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/services/async-metadata.service.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/services/async-metadata.service.ts
deleted file mode 100755
index 8492a54..0000000
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/services/async-metadata.service.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-/*
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-import { Injectable, ApplicationRef  } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { Observable } from "rxjs/Observable";
-import 'rxjs/add/operator/map';
-import 'rxjs/add/observable/from';
-import * as dataverseActions from '../../shared/actions/dataverse.actions'
-import * as datasetActions from '../../shared/actions/dataset.actions'
-import * as datatypesActions from '../../shared/actions/datatype.actions'
-import * as indexesActions from '../../shared/actions/index.actions'
-import * as metadataActions from '../../shared/actions/metadata.actions'
-
-/*
-	Metadata service watch any changes in Dataverses, Datasets, Datatypes, indexes
-	state in store and builds a tree state structure with datasets->dataverse->datatype->index relationship
-*/
-@Injectable()
-export class MetadataService {
-
-	/* Arrays to expose updated dataverses, datasets, datatypes,
-	indexes collections*/
-	dv = [];
-	ds = [];
-	dt = [];
-	idx = [];
-
-	/*
-	* contructor will initialize the store state watchers
-	*/
-	constructor(private store: Store<any>, private ref: ApplicationRef ) {
-
-		/* Watching changes in dataverse collection */
-		this.store.select(s => s.dataverse.dataverses).subscribe((data: any) => {
-			if (data.results) {
-				this.dv = []
-				for (let i = 0; i < data.results.length; i++) {
-						let node = { id: 0, DataverseName: "", Datasets:[] }
-						node.id = i
-						node.DataverseName = data.results[i]['DataverseName']
-						this.dv.push(node)
-				}
-				this.updateMetadataTree();
-			}
-		})
-
-		/* Watching changes in datasets collections */
-		this.store.select(s => s.dataset.datasets).subscribe((data: any) => {
-			if (data.results) {
-				this.ds = data.results;
-				this.updateMetadataTree();
-			}
-		})
-
-		/* Watching changes in datatypes collections */
-		this.store.select(s => s.datatype.datatypes).subscribe((data: any) => {
-			if (data.results) {
-				this.dt = data.results;
-				this.updateMetadataTree();
-			}
-		})
-
-		/* Watching changes in index collections */
-		this.store.select(s => s.index.indexes).subscribe((data: any) => {
-			if (data.results) {
-				this.idx = data.results;
-				this.updateMetadataTree();
-			}
-		})
-	}
-
-	/*
-	*	convenience function to update and return the metadata tree.
-	*/
-  	getMetadataTree(): Observable<any[]> {
-		return Observable.from(this.dv);
-	}
-	  
-  	updateMetadataTree() {
-	for (let i = 0; i < this.dv.length; i++) {
-		// Filling datasets
-		this.dv[i]['Datasets'] = [];
-		for (let j = 0; j < this.ds.length; j++) {
-			if (this.ds[j]['DataverseName'] === this.dv[i]['DataverseName']){
-
-				// Filling datatypes, there is one datatype per dataset
-				this.ds[j]['Datatype'] = [];
-				for (let k = 0; k < this.dt.length; k++) {
-					if (this.dt[k]['DatatypeName'] === this.ds[j]['DatatypeName']){
-						this.ds[j]['Datatype'] = this.dt[k]; // push(this.dt[k])
-					}
-				}
-
-				// Filling indexes
-				this.ds[j]['Indexes'] = [];
-				for (let l = 0; l < this.idx.length; l++) {
-					if (this.idx[l]['DatasetName'] === this.ds[j]['DatasetName']){
-						this.ds[j]['Indexes'].push(this.idx[l])
-					}
-				}
-
-				this.dv[i]['Datasets'].push(this.ds[j])
-			}
-		}
-	}
-
-	this.store.dispatch(new metadataActions.UpdateMetadataTree());
-	}	
-}
diff --git a/asterixdb/asterix-dashboard/src/node/src/app/shared/services/async-query.service.ts b/asterixdb/asterix-dashboard/src/node/src/app/shared/services/async-query.service.ts
index e37872e..30463b5 100755
--- a/asterixdb/asterix-dashboard/src/node/src/app/shared/services/async-query.service.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/app/shared/services/async-query.service.ts
@@ -12,179 +12,194 @@
 limitations under the License.
 */
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Store } from '@ngrx/store';
-import { Observable } from "rxjs/Observable";
-import 'rxjs/add/operator/map';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import 'rxjs/add/operator/map'
+import 'rxjs/add/operator/catch'
+import { environment } from '../../../environments/environment';
 
-var AsterixRestApiUrl = 'http://localhost:19002/query/service'; 
-//var AsterixRestApiUrl = '/query-service'; 
+/*
+* location.host gives the origin hostname
+* since we have to connect to the query-service api in the origin host
+*/
+/* Using local proxy if webpack and development */
+var AsterixRestApiUrl = '/query-service';
+
+if (environment.production) {
+    var locationHost =  self.location.host.split(':')
+    var AsterixRestApiUrl = 'http://' + locationHost[0] + ':19002/query/service';
+}
 
 /*
 * SQL query service using AsterixDB REST API /query/service
 */
 @Injectable()
 export class SQLService {
+    /*
+    * SQLQueryService constructor using
+    * HttpClient from Angular 5
+    */
+    constructor(private http: HttpClient) {}
 
-	/*
-	* SQLQueryService constructor using
-	* HttpClient from Angular 4
-	*/
-	constructor(private http: HttpClient) {}
+     /*
+     * sends a select sql++ q100px return all the dataverses
+    * from AsterixDB Metadata100px
+     */
+    selectDataverses() : Observable<any> {
+         let query = "SELECT VALUE dv FROM Metadata.`Dataverse` dv"
+         return this.executeSQLQuery(query);
+    }
 
- 	/*
- 	* sends a select sql++ query to return all the dataverses
-	* from AsterixDB Metadata
- 	*/
-	selectDataverses() : Observable<any[]> {
-		 let query = "SELECT VALUE dv FROM Metadata.`Dataverse` dv"
-		 return this.executeSQLQuery(query);
-  	}
+    /*
+    * sends a select sql++ query to return all the datasets
+    * from AsterixDB Metadata
+    */
+    selectDatasets() : Observable<any> {
+        let query = "SELECT VALUE ds FROM Metadata.`Dataset` ds"
+        return this.executeSQLQuery(query);
+    }
 
-	/*
-	* sends a select sql++ query to return all the datasets
-	* from AsterixDB Metadata
-	*/
-  	selectDatasets() : Observable<any[]> {
-		let query = "SELECT VALUE ds FROM Metadata.`Dataset` ds"
-		return this.executeSQLQuery(query);
-  	}
+    /*
+    * sends a select sql++ query to return all the datatypes
+    * from AsterixDB Metadata
+    */
+    selectDatatypes() : Observable<any> {
+        let query = "SELECT VALUE dt FROM Metadata.`Datatype` dt"
+        return this.executeSQLQuery(query);
+    }
 
-	/*
-	* sends a select sql++ query to return all the datatypes
-	* from AsterixDB Metadata
-	*/
-  	selectDatatypes() : Observable<any[]> {
-    	let query = "SELECT VALUE dt FROM Metadata.`Datatype` dt"
-		return this.executeSQLQuery(query);
-  	}
+    /*
+    * sends a select sql++ query to return all the indexes
+    * from AsterixDB Metadata
+    */
+    selectIndexes() : Observable<any> {
+        let query = "SELECT VALUE ix FROM Metadata.`Index` ix"
+        return this.executeSQLQuery(query);
+    }
 
-	/*
-	* sends a select sql++ query to return all the indexes
-	* from AsterixDB Metadata
-	*/
-  	selectIndexes() : Observable<any[]> {
-    	let query = "SELECT VALUE ix FROM Metadata.`Index` ix"
-		return this.executeSQLQuery(query);
-	}
+    /*
+    * creates a sql++ ddl query to create a Dataverse
+    * from AsterixDB Metadata
+    */
+    createDataverse(dataverse: string) : Observable<any[]> {
+        let ddlQuery = "CREATE DATAVERSE " + dataverse + ";";
+        return this.executeDDLSQLQuery(ddlQuery);
+    }
 
-	/*
-	* creates a sql++ ddl query to create a Dataverse
-	* from AsterixDB Metadata
-	*/
-	createDataverse(dataverse: string) : Observable<any[]> {
-    	let ddlQuery = "CREATE DATAVERSE " + dataverse + ";";
-		return this.executeDDLSQLQuery(ddlQuery);
-	}
+    /*
+    * creates a sql++ ddl query to drop a Dataverse
+    * from AsterixDB Metadata
+    */
+    dropDataverse(dataverse: string) : Observable<any[]> {
+        let ddlQuery = "DROP DATAVERSE " + dataverse; // " IF EXISTS;";
+        return this.executeDDLSQLQuery(ddlQuery);
+    }
 
-	/*
-	* creates a sql++ ddl query to drop a Dataverse
-	* from AsterixDB Metadata
-	*/
-	dropDataverse(dataverse: string) : Observable<any[]> {
-		let ddlQuery = "DROP DATAVERSE " + dataverse; // " IF EXISTS;";
-		return this.executeDDLSQLQuery(ddlQuery);
-	  }
+    /*
+    * creates a sql++ ddl query to create a Dataset
+    * from AsterixDB Metadata
+    */
+    createDataset(dataset: string) : Observable<any[]> {
+        let ddlQuery = "CREATE DATASET " + dataset + ";";
+        return this.executeDDLSQLQuery(ddlQuery);
+    }
 
-	/*
-	* creates a sql++ ddl query to create a Dataset
-	* from AsterixDB Metadata
-	*/
-	createDataset(dataset: string) : Observable<any[]> {
-		let ddlQuery = "CREATE DATASET " + dataset + ";";
-		return this.executeDDLSQLQuery(ddlQuery);
-	}
+    /*
+    * creates a sql++ ddl query to drop a Dataset
+    * from AsterixDB Metadata
+    */
+    dropDataset(dataset: string) : Observable<any[]> {
+        let ddlQuery = "DROP DATASET " + dataset; //" IF EXISTS;";
+        return this.executeDDLSQLQuery(ddlQuery);
+    }
 
-	/*
-	* creates a sql++ ddl query to drop a Dataset
-	* from AsterixDB Metadata
-	*/
-	dropDataset(dataset: string) : Observable<any[]> {
-		let ddlQuery = "DROP DATASET " + dataset; //" IF EXISTS;";
-		return this.executeDDLSQLQuery(ddlQuery);
-	}
+    /*
+    * creates a sql++ ddl query to create a Datatype
+    * from AsterixDB Metadata
+    */
+    createDatatype(datatype: string) : Observable<any[]> {
+        let ddlQuery = "CREATE DATATYPE " + datatype + ";";
+        return this.executeDDLSQLQuery(ddlQuery);
+    }
 
-	/*
-	* creates a sql++ ddl query to create a Datatype
-	* from AsterixDB Metadata
-	*/
-	createDatatype(datatype: string) : Observable<any[]> {
-    	let ddlQuery = "CREATE DATATYPE " + datatype + ";";
-		return this.executeDDLSQLQuery(ddlQuery);
-	}
+    /*
+    * creates a sql++ ddl query to drop a Datatype
+    * from AsterixDB Metadata
+    */
+    dropDatatype(datatype: string) : Observable<any[]> {
+        let ddlQuery = "DROP TYPE " + datatype; //" IF EXISTS;";
+        return this.executeDDLSQLQuery(ddlQuery);
+    }
 
-	/*
-	* creates a sql++ ddl query to drop a Datatype
-	* from AsterixDB Metadata
-	*/
-	dropDatatype(datatype: string) : Observable<any[]> {
-		let ddlQuery = "DROP TYPE " + datatype; //" IF EXISTS;";
-		return this.executeDDLSQLQuery(ddlQuery);
-	}
+    /*
+    * creates a sql++ ddl query to create a Index
+    * from AsterixDB Metadata
+    */
+    createIndex(index: string) : Observable<any[]> {
+        let ddlQuery = "CREATE INDEX " + index + ";";
+        return this.executeDDLSQLQuery(ddlQuery);
+    }
 
-	/*
-	* creates a sql++ ddl query to create a Index
-	* from AsterixDB Metadata
-	*/
-	createIndex(index: string) : Observable<any[]> {
-		let ddlQuery = "CREATE INDEX " + index + ";";
-		return this.executeDDLSQLQuery(ddlQuery);
-	}
+    /*
+    * creates a sql++ ddl query to drop a Index
+    * from AsterixDB Metadata
+    */
+    dropIndex(index: string) : Observable<any[]> {
+        let ddlQuery = "DROP INDEX " + index; // + " IF EXISTS;";
+        return this.executeDDLSQLQuery(ddlQuery);
+    }
 
-	/*
-	* creates a sql++ ddl query to drop a Index
-	* from AsterixDB Metadata
-	*/
-	dropIndex(index: string) : Observable<any[]> {
-		let ddlQuery = "DROP INDEX " + index; // + " IF EXISTS;";
-		return this.executeDDLSQLQuery(ddlQuery);
-	}
-
-	/*
-	* Executes a sql++ ddl query against AsterixDB
-	* response is a JSON object with following structure:
-		  metrics: Metrics;
-		  requestId: string;
-		  results: any[];
-		  signature: string;
-		  status: string;
-	*/
-	executeDDLSQLQuery(ddlQuery: string): Observable<any[]> {
+    /*
+    * Executes a sql++ ddl query against AsterixDB
+    * response is a JSON object with following structure:
+          metrics: Metrics;
+          requestId: string;
+          results: any[];
+          signature: string;
+          status: string;
+    */
+    executeDDLSQLQuery(ddlQuery: string): Observable<any> {
     const apiUrl = AsterixRestApiUrl;
-		return this.http.post(apiUrl, {statement: ddlQuery})
-			.map((response: Response) => { return response })
-			.catch((error: any) => this.handleExecuteQueryError(error));
-	}
+        return this.http.post(apiUrl, {statement: ddlQuery})
+          .catch((error: any) => this.handleExecuteQueryError(error));
+    }
 
-	/*
-	* Executes a sql++ query against AsterixDB
-	* response is a JSON object with following structure:
-		  metrics: Metrics;
-		  requestId: string;
-		  results: any[];
-		  signature: string;
-		  status: string;
-	*/
-	executeSQLQuery(query: string): Observable<any[]> {
-    const apiUrl = AsterixRestApiUrl;
-		return this.http.post(apiUrl, {statement: query})
-			.map((response: Response) => { return response })
-			.catch((error: any) => this.handleExecuteQueryError(error));
-	}
+    /*
+    * Executes a sql++ query against AsterixDB
+    * response is a JSON object with following structure:
+          metrics: Metrics;
+          requestId: string;
+          results: any[];
+          signature: string;
+          status: string;
+          login(username: string, password: string): Observable<boolean>
+    */
+    executeSQLQuery(query: string): Observable<any> {
+        const apiUrl = AsterixRestApiUrl;
+        const headers = new HttpHeaders();
+        headers.append('Content-Type', 'application/json');
+        let options = ({ headers: headers });
 
-	/*
-	* AsterixDB query-service API raises HTTP errors if the sql++ query has some
-	* syntax error, or some elements in the query are not found
-	* this function extract the error JSON object with the relevant information
-		response is a JSON object with following structure:
-		  metrics: Metrics;
-		  requestId: string;
-		  errors: any[];
-		  signature: string;
-		  status: string;
-	*/
-	private handleExecuteQueryError(error: any): Promise<any> {
-		console.log(error)
-		return Promise.reject(error.error || error);
-	}
-}
+        return this.http.post(apiUrl, {statement: query,
+            'logical-plan': true,
+            'optimized-logical-plan': true }, options)
+                .map((response: Response) => { return response; })
+                .catch((error: any) => this.handleExecuteQueryError(error))
+    }
+    /*
+    * AsterixDB query-service API raises HTTP errors if the sql++ query has some
+    * syntax error, or some elements in the query are not found
+    * this function extract the error JSON object with the relevant information
+        response is a JSON object with following structure:
+          metrics: Metrics;
+          requestId: string;
+          errors: any[];
+          signature: string;
+          status: string;
+    */
+    private handleExecuteQueryError(error: any): Promise<any> {
+        console.log('executeQueryError:')
+        console.log(error);
+        return Promise.reject(error.error || error);
+    }
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/assets/feather.png b/asterixdb/asterix-dashboard/src/node/src/assets/feather.png
new file mode 100644
index 0000000..744b8d7
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/assets/feather.png
Binary files differ
diff --git a/asterixdb/asterix-dashboard/src/node/src/assets/tree.svg b/asterixdb/asterix-dashboard/src/node/src/assets/tree.svg
new file mode 100644
index 0000000..85b15f3
--- /dev/null
+++ b/asterixdb/asterix-dashboard/src/node/src/assets/tree.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--/*
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="-1.0028682170542123 -1.0037209302325536 24.000000000000007 24" width="20" height="20"><defs><path d="M0 0L20 0L20 20L0 20L0 0Z" id="gyXi6gBBT"></path><path d="M20 18L0 18" id="a3dxwHGaC"></path><path d="M0 0L0 18" id="b1vHLhKOaI"></path></defs><g><g></g><g><use xlink:href="#a3dxwHGaC" opacity="0.5" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#a3dxwHGaC" opacity="0.5" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="1"></use></g></g><g><use xlink:href="#b1vHLhKOaI" opacity="0.5" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#b1vHLhKOaI" opacity="0.5" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="1"></use></g></g></g></svg>
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/environments/environment.prod.ts b/asterixdb/asterix-dashboard/src/node/src/environments/environment.prod.ts
index ca15503..4c2d359 100755
--- a/asterixdb/asterix-dashboard/src/node/src/environments/environment.prod.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/environments/environment.prod.ts
@@ -13,4 +13,4 @@
 */
 export const environment = {
   production: true
-};
+};
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/environments/environment.ts b/asterixdb/asterix-dashboard/src/node/src/environments/environment.ts
index 2750f0a..31d77e1 100755
--- a/asterixdb/asterix-dashboard/src/node/src/environments/environment.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/environments/environment.ts
@@ -18,4 +18,4 @@
 
 export const environment = {
   production: false
-};
+};
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/index.html b/asterixdb/asterix-dashboard/src/node/src/index.html
index 8dab418..881db4a 100755
--- a/asterixdb/asterix-dashboard/src/node/src/index.html
+++ b/asterixdb/asterix-dashboard/src/node/src/index.html
@@ -13,9 +13,11 @@
 */-->
 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="viewport">
+    <!-- content="width=device-width, initial-scale=1, shrink-to-fit=no"> -->
     <title>AsterixDb Administration Console</title>
     <base href="/">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
@@ -23,8 +25,10 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-  </head>
-  <body>
+</head>
+
+<body>
     <awc-root></awc-root>
-  </body>
+</body>
+
 </html>
diff --git a/asterixdb/asterix-dashboard/src/node/src/main.scss b/asterixdb/asterix-dashboard/src/node/src/main.scss
index cc02584..1149d3a 100755
--- a/asterixdb/asterix-dashboard/src/node/src/main.scss
+++ b/asterixdb/asterix-dashboard/src/node/src/main.scss
@@ -11,19 +11,13 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-@import './styles/general';
 
+@import './styles/general';
 // Include material core styles.
 @import '~@angular/material/theming';
 @include mat-core();
-
 // Define the light theme.
 $primary: mat-palette($mat-grey);
-$accent:  mat-palette($mat-orange, A200, A100, A400);
-
+$accent : mat-palette($mat-orange, A200, A100, A400);
 $theme: mat-light-theme($primary, $accent);
 @include angular-material-theme($theme);
-
-* {
-    font-family: Roboto, "Helvetica Neue", sans-serif;
-  }
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/main.ts b/asterixdb/asterix-dashboard/src/node/src/main.ts
index 446a9dc..ac7552b 100755
--- a/asterixdb/asterix-dashboard/src/node/src/main.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/main.ts
@@ -19,8 +19,8 @@
 import { environment } from './environments/environment';
 
 if (environment.production) {
-  enableProdMode();
+    enableProdMode();
 }
 
 platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.log(err));
+    .catch(err => console.log(err));
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/polyfills.ts b/asterixdb/asterix-dashboard/src/node/src/polyfills.ts
index 20d4075..b7ac983 100755
--- a/asterixdb/asterix-dashboard/src/node/src/polyfills.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/polyfills.ts
@@ -73,4 +73,4 @@
 /**
  * Need to import at least one locale-data with intl.
  */
-// import 'intl/locale-data/jsonp/en';
+// import 'intl/locale-data/jsonp/en';
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/styles/_constants.scss b/asterixdb/asterix-dashboard/src/node/src/styles/_constants.scss
index b3a5d07..f551ae8 100755
--- a/asterixdb/asterix-dashboard/src/node/src/styles/_constants.scss
+++ b/asterixdb/asterix-dashboard/src/node/src/styles/_constants.scss
@@ -11,11 +11,11 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
 @import '../../node_modules/@angular/material/theming';
-
 $small-breakpoint-width: 720px;
-
 /* For desktop, the content should be aligned with the page title. */
+
 $content-padding-side: 70px;
 $content-padding-side-xs: 15px;
 $awc-spacing-unit: 8px;
diff --git a/asterixdb/asterix-dashboard/src/node/src/styles/_general.scss b/asterixdb/asterix-dashboard/src/node/src/styles/_general.scss
index 9691cf8..4493367 100755
--- a/asterixdb/asterix-dashboard/src/node/src/styles/_general.scss
+++ b/asterixdb/asterix-dashboard/src/node/src/styles/_general.scss
@@ -11,22 +11,87 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
 html {
   box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
 }
 
 body {
-  font-family: "Roboto Mono", monospace;
-  font-size: 0.80rem;
-	font-weight: 500;
+  width: 100%;
+  height: 100%;
+  background-color: gainsboro;
+  overflow-y: scroll;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
 }
 
-// Tree and table styling
-
-.ui-datatable{
-  //overflow : auto
+* {
+  font-family: Roboto, "Helvetica Neue", monospace; //font-family: Consolas, Courier, monospace;
+  //font-size: 12px;
+  box-sizing: border-box;
 }
 
-.ui-datatable .ui-sortable-column div.ui-dt-c {
-  padding-right: 15px !important;
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+textarea {
+  font-size: 14px;
+  color: red;
+}
+
+:root {
+  --footer-color: #2cba92;
+  --palatte-padding-left: 0px;
+}
+
+.footer {
+  margin-top: 20px;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  height: 50px
+}
+
+.apache {
+  display: absolute;
+  bottom: 0;
+  margin: 15px;
+  font-size: 10px;
+  vertical-align: middle;
+  color: black;
+}
+
+.mat-checkbox-inner-container {
+  height: 15px !important;
+  width: 15px !important;
+}
+
+.cdk-global-scrollblock {
+  top: 0 !important;
+}
+
+.CodeMirror {
+  font-family: Arial, monospace;
+  font-size: 14px !important;
+  color: black;
+}
+
+.header-centered-v > .mat-content {
+  align-items: center;
+}
+
+.mat-expansion-panel-header-description {
+  margin-right: 0px !important;
 }
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/test.ts b/asterixdb/asterix-dashboard/src/node/src/test.ts
index 6edcb85..06c7693 100755
--- a/asterixdb/asterix-dashboard/src/node/src/test.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/test.ts
@@ -35,12 +35,12 @@
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting()
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.
 context.keys().map(context);
 // Finally, start Karma to run the tests.
-__karma__.start();
+__karma__.start();
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/tsconfig.app.json b/asterixdb/asterix-dashboard/src/node/src/tsconfig.app.json
index 54434df..693c7a7 100755
--- a/asterixdb/asterix-dashboard/src/node/src/tsconfig.app.json
+++ b/asterixdb/asterix-dashboard/src/node/src/tsconfig.app.json
@@ -12,15 +12,15 @@
 limitations under the License.
 */
 {
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "baseUrl": "./",
-    "module": "es2015",
-    "types": []
-  },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts"
-  ]
-}
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/app",
+        "baseUrl": "./",
+        "module": "es2015",
+        "types": []
+    },
+    "exclude": [
+        "test.ts",
+        "**/*.spec.ts"
+    ]
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/tsconfig.spec.json b/asterixdb/asterix-dashboard/src/node/src/tsconfig.spec.json
index 15bcf37..09cf042 100755
--- a/asterixdb/asterix-dashboard/src/node/src/tsconfig.spec.json
+++ b/asterixdb/asterix-dashboard/src/node/src/tsconfig.spec.json
@@ -12,22 +12,23 @@
 limitations under the License.
 */
 {
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/spec",
-    "baseUrl": "./",
-    "module": "commonjs",
-    "target": "es5",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  },
-  "files": [
-    "test.ts"
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/spec",
+        "baseUrl": "./",
+        "module": "commonjs",
+        "target": "es5",
+        "types": [
+        "jasmine",
+        "node"
+        ]
+    },
+    "files": [
+        "test.ts",
+      "polyfills.ts"
   ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}
+    "include": [
+        "**/*.spec.ts",
+        "**/*.d.ts"
+    ]
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/src/typings.d.ts b/asterixdb/asterix-dashboard/src/node/src/typings.d.ts
index ef5c7bd..8975c36 100755
--- a/asterixdb/asterix-dashboard/src/node/src/typings.d.ts
+++ b/asterixdb/asterix-dashboard/src/node/src/typings.d.ts
@@ -1,5 +1,5 @@
 /* SystemJS module definition */
 declare var module: NodeModule;
 interface NodeModule {
-  id: string;
-}
+    id: string;
+}
\ No newline at end of file
diff --git a/asterixdb/asterix-dashboard/src/node/tslint.json b/asterixdb/asterix-dashboard/src/node/tslint.json
index 1d02629..171c1df 100755
--- a/asterixdb/asterix-dashboard/src/node/tslint.json
+++ b/asterixdb/asterix-dashboard/src/node/tslint.json
@@ -28,7 +28,6 @@
     "forin": true,
     "import-blacklist": [
       true,
-      "rxjs",
       "rxjs/Rx"
     ],
     "import-spacing": true,
diff --git a/asterixdb/src/main/licenses/templates/3rdpartylicenses.txt b/asterixdb/src/main/licenses/templates/3rdpartylicenses.txt
index 2c3d11d..8c67061 100644
--- a/asterixdb/src/main/licenses/templates/3rdpartylicenses.txt
+++ b/asterixdb/src/main/licenses/templates/3rdpartylicenses.txt
@@ -1,4 +1,28 @@
-core-js@2.5.6
+codemirror@5.39.0
+MIT
+MIT License
+
+Copyright (C) 2017 by Marijn Haverbeke <marijnh@gmail.com> and others
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+core-js@2.5.7
 MIT
 Copyright (c) 2014-2018 Denis Pushkarev
 
@@ -20,89 +44,6 @@
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
-primeng@4.3.0
-MIT
-The MIT License (MIT)
-
-Copyright (c) 2016-2017 PrimeTek
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
-@angular/forms@5.2.10
-MIT
-MIT
-
-@ngrx/store@4.1.1
-MIT
-The MIT License (MIT)
-
-Copyright (c) 2017 Brandon Roberts, Mike Ryan, Victor Savkin, Rob Wormald
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-@angular/core@5.2.10
-MIT
-MIT
-
-webpack@3.8.1
-MIT
-Copyright JS Foundation and other contributors
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-'Software'), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
-CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-@angular/platform-browser@5.2.10
-MIT
-MIT
-
 zone.js@0.8.26
 MIT
 The MIT License
@@ -127,223 +68,6 @@
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
-@angular/router@5.2.10
-MIT
-MIT
-
-@angular/common@5.2.10
-MIT
-MIT
-
-file-saver@1.3.8
-MIT
-The MIT License
-
-Copyright © 2016 [Eli Grey][1].
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-  [1]: http://eligrey.com
-
-@types/file-saver@1.3.0
-MIT
-MIT License
-
-    Copyright (c) Microsoft Corporation. All rights reserved.
-
-    Permission is hereby granted, free of charge, to any person obtaining a copy
-    of this software and associated documentation files (the "Software"), to deal
-    in the Software without restriction, including without limitation the rights
-    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-    copies of the Software, and to permit persons to whom the Software is
-    furnished to do so, subject to the following conditions:
-
-    The above copyright notice and this permission notice shall be included in all
-    copies or substantial portions of the Software.
-
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-    SOFTWARE
-
-css-loader@0.28.11
-MIT
-Copyright JS Foundation and other contributors
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-'Software'), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
-CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-@angular/cdk@5.2.5
-MIT
-The MIT License
-
-Copyright (c) 2018 Google LLC.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
-@angular/material@5.2.5
-MIT
-The MIT License
-
-Copyright (c) 2018 Google LLC.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
-@ngrx/effects@4.1.1
-MIT
-The MIT License (MIT)
-
-Copyright (c) 2017 Brandon Roberts, Mike Ryan, Victor Savkin, Rob Wormald
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-@ngrx/db@2.1.0
-MIT
-The MIT License (MIT)
-
-Copyright (c) 2015 ngrx
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-@ngrx/store-devtools@4.1.1
-MIT
-The MIT License (MIT)
-
-Copyright (c) 2017 Brandon Roberts, Mike Ryan, Victor Savkin, Rob Wormald
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-codemirror@5.37.0
-MIT
-MIT License
-
-Copyright (C) 2017 by Marijn Haverbeke <marijnh@gmail.com> and others
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
-@angular/animations@5.2.10
-MIT
-MIT
-
 hammerjs@2.0.8
 MIT
 The MIT License (MIT)
@@ -368,6 +92,313 @@
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
-@angular/platform-browser-dynamic@5.2.10
+@angular/core@6.0.7
+MIT
+MIT
+
+tslib@1.9.3
+Apache-2.0
+Apache License
+
+Version 2.0, January 2004
+
+http://www.apache.org/licenses/ 
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+
+"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+
+You must give any other recipients of the Work or Derivative Works a copy of this License; and
+
+You must cause any modified files to carry prominent notices stating that You changed the files; and
+
+You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
+
+If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+rxjs@6.2.1
+Apache-2.0
+Apache License
+                         Version 2.0, January 2004
+                      http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+    "License" shall mean the terms and conditions for use, reproduction,
+    and distribution as defined by Sections 1 through 9 of this document.
+
+    "Licensor" shall mean the copyright owner or entity authorized by
+    the copyright owner that is granting the License.
+
+    "Legal Entity" shall mean the union of the acting entity and all
+    other entities that control, are controlled by, or are under common
+    control with that entity. For the purposes of this definition,
+    "control" means (i) the power, direct or indirect, to cause the
+    direction or management of such entity, whether by contract or
+    otherwise, or (ii) ownership of fifty percent (50%) or more of the
+    outstanding shares, or (iii) beneficial ownership of such entity.
+
+    "You" (or "Your") shall mean an individual or Legal Entity
+    exercising permissions granted by this License.
+
+    "Source" form shall mean the preferred form for making modifications,
+    including but not limited to software source code, documentation
+    source, and configuration files.
+
+    "Object" form shall mean any form resulting from mechanical
+    transformation or translation of a Source form, including but
+    not limited to compiled object code, generated documentation,
+    and conversions to other media types.
+
+    "Work" shall mean the work of authorship, whether in Source or
+    Object form, made available under the License, as indicated by a
+    copyright notice that is included in or attached to the work
+    (an example is provided in the Appendix below).
+
+    "Derivative Works" shall mean any work, whether in Source or Object
+    form, that is based on (or derived from) the Work and for which the
+    editorial revisions, annotations, elaborations, or other modifications
+    represent, as a whole, an original work of authorship. For the purposes
+    of this License, Derivative Works shall not include works that remain
+    separable from, or merely link (or bind by name) to the interfaces of,
+    the Work and Derivative Works thereof.
+
+    "Contribution" shall mean any work of authorship, including
+    the original version of the Work and any modifications or additions
+    to that Work or Derivative Works thereof, that is intentionally
+    submitted to Licensor for inclusion in the Work by the copyright owner
+    or by an individual or Legal Entity authorized to submit on behalf of
+    the copyright owner. For the purposes of this definition, "submitted"
+    means any form of electronic, verbal, or written communication sent
+    to the Licensor or its representatives, including but not limited to
+    communication on electronic mailing lists, source code control systems,
+    and issue tracking systems that are managed by, or on behalf of, the
+    Licensor for the purpose of discussing and improving the Work, but
+    excluding communication that is conspicuously marked or otherwise
+    designated in writing by the copyright owner as "Not a Contribution."
+
+    "Contributor" shall mean Licensor and any individual or Legal Entity
+    on behalf of whom a Contribution has been received by Licensor and
+    subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    copyright license to reproduce, prepare Derivative Works of,
+    publicly display, publicly perform, sublicense, and distribute the
+    Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    (except as stated in this section) patent license to make, have made,
+    use, offer to sell, sell, import, and otherwise transfer the Work,
+    where such license applies only to those patent claims licensable
+    by such Contributor that are necessarily infringed by their
+    Contribution(s) alone or by combination of their Contribution(s)
+    with the Work to which such Contribution(s) was submitted. If You
+    institute patent litigation against any entity (including a
+    cross-claim or counterclaim in a lawsuit) alleging that the Work
+    or a Contribution incorporated within the Work constitutes direct
+    or contributory patent infringement, then any patent licenses
+    granted to You under this License for that Work shall terminate
+    as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+    Work or Derivative Works thereof in any medium, with or without
+    modifications, and in Source or Object form, provided that You
+    meet the following conditions:
+
+    (a) You must give any other recipients of the Work or
+        Derivative Works a copy of this License; and
+
+    (b) You must cause any modified files to carry prominent notices
+        stating that You changed the files; and
+
+    (c) You must retain, in the Source form of any Derivative Works
+        that You distribute, all copyright, patent, trademark, and
+        attribution notices from the Source form of the Work,
+        excluding those notices that do not pertain to any part of
+        the Derivative Works; and
+
+    (d) If the Work includes a "NOTICE" text file as part of its
+        distribution, then any Derivative Works that You distribute must
+        include a readable copy of the attribution notices contained
+        within such NOTICE file, excluding those notices that do not
+        pertain to any part of the Derivative Works, in at least one
+        of the following places: within a NOTICE text file distributed
+        as part of the Derivative Works; within the Source form or
+        documentation, if provided along with the Derivative Works; or,
+        within a display generated by the Derivative Works, if and
+        wherever such third-party notices normally appear. The contents
+        of the NOTICE file are for informational purposes only and
+        do not modify the License. You may add Your own attribution
+        notices within Derivative Works that You distribute, alongside
+        or as an addendum to the NOTICE text from the Work, provided
+        that such additional attribution notices cannot be construed
+        as modifying the License.
+
+    You may add Your own copyright statement to Your modifications and
+    may provide additional or different license terms and conditions
+    for use, reproduction, or distribution of Your modifications, or
+    for any such Derivative Works as a whole, provided Your use,
+    reproduction, and distribution of the Work otherwise complies with
+    the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+    any Contribution intentionally submitted for inclusion in the Work
+    by You to the Licensor shall be under the terms and conditions of
+    this License, without any additional terms or conditions.
+    Notwithstanding the above, nothing herein shall supersede or modify
+    the terms of any separate license agreement you may have executed
+    with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+    names, trademarks, service marks, or product names of the Licensor,
+    except as required for reasonable and customary use in describing the
+    origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+    agreed to in writing, Licensor provides the Work (and each
+    Contributor provides its Contributions) on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+    implied, including, without limitation, any warranties or conditions
+    of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+    PARTICULAR PURPOSE. You are solely responsible for determining the
+    appropriateness of using or redistributing the Work and assume any
+    risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+    whether in tort (including negligence), contract, or otherwise,
+    unless required by applicable law (such as deliberate and grossly
+    negligent acts) or agreed to in writing, shall any Contributor be
+    liable to You for damages, including any direct, indirect, special,
+    incidental, or consequential damages of any character arising as a
+    result of this License or out of the use or inability to use the
+    Work (including but not limited to damages for loss of goodwill,
+    work stoppage, computer failure or malfunction, or any and all
+    other commercial damages or losses), even if such Contributor
+    has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+    the Work or Derivative Works thereof, You may choose to offer,
+    and charge a fee for, acceptance of support, warranty, indemnity,
+    or other liability obligations and/or rights consistent with this
+    License. However, in accepting such obligations, You may act only
+    on Your own behalf and on Your sole responsibility, not on behalf
+    of any other Contributor, and only if You agree to indemnify,
+    defend, and hold each Contributor harmless for any liability
+    incurred by, or claims asserted against, such Contributor by reason
+    of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+    To apply the Apache License to your work, attach the following
+    boilerplate notice, with the fields enclosed by brackets "[]"
+    replaced with your own identifying information. (Don't include
+    the brackets!)  The text should be enclosed in the appropriate
+    comment syntax for the file format. We also recommend that a
+    file or class name and description of purpose be included on the
+    same "printed page" as the copyright notice for easier
+    identification within third-party archives.
+
+ Copyright (c) 2015-2018 Google, Inc., Netflix, Inc., Microsoft Corp. and contributors
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+@ngrx/store-devtools@6.0.1
+MIT
+MIT
+
+file-saver@1.3.8
+MIT
+The MIT License
+
+Copyright © 2016 [Eli Grey][1].
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+  [1]: http://eligrey.com
+
+webpack@4.8.3
+MIT
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+@ngrx/store@6.0.1
 MIT
 MIT
\ No newline at end of file