upgrade to rc5

.clang-format

@@ -1,3 +0,0 @@
-Language:        JavaScript
-BasedOnStyle:    Google
-ColumnLimit:     100

.editorconfig

@@ -1,4 +1,4 @@
-# http://editorconfig.org
+# Editor configuration, see http://editorconfig.org
 root = true
 
 [*]

.gitignore

@@ -10,6 +10,10 @@
 
 # IDEs and editors
 /.idea
+.project
+.classpath
+*.launch
+.settings/
 
 # misc
 /.sass-cache
@@ -25,4 +29,5 @@ testem.log
 /e2e/*.map
 
 #System Files
-.DS_Store
+.DS_Store
+Thumbs.db

angular-cli-build.js

@@ -1,24 +0,0 @@
-/* global require, module */
-
-var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
-
-module.exports = function(defaults) {
-  return new Angular2App(defaults, {
-    vendorNpmFiles: [
-      'socket.io-client/socket.io.js',
-      'smoothie/smoothie.js',
-      'chart.js/dist/Chart.bundle.js',
-      'ng2-charts/bundles/ng2-charts.js',
-      'chroma-js/chroma.js',
-      'plotly.js/dist/plotly.js',
-      'brainbrowser/build/brainbrowser-2.3.0/**/*.js',
-      'systemjs/dist/system-polyfills.js',
-      'systemjs/dist/system.src.js',
-      'zone.js/dist/*.js',
-      'es6-shim/es6-shim.js',
-      'reflect-metadata/*.js',
-      'rxjs/**/*.js',
-      '@angular/**/*.js'
-    ]
-  });
-};

angular-cli.json

@@ -1,25 +1,45 @@
 {
   "project": {
-    "version": "0.1.0",
-    "name": "clitest"
+    "version": "1.0.0-beta.11-webpack.8",
+    "name": "openbci-dashboard"
   },
   "apps": [
-    {"main": "src/main.ts", "tsconfig": "src/tsconfig.json"}
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": "assets",
+      "index": "index.html",
+      "main": "main.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.json",
+      "prefix": "app",
+      "mobile": false,
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environments": {
+        "source": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts",
+        "dev": "environments/environment.dev.ts"
+      }
+    }
   ],
   "addons": [],
   "packages": [],
   "e2e": {
     "protractor": {
-      "config": "config/protractor.conf.js"
+      "config": "./protractor.conf.js"
     }
   },
   "test": {
     "karma": {
-      "config": "config/karma.conf.js"
+      "config": "./karma.conf.js"
     }
   },
   "defaults": {
-    "prefix": "bci",
-    "sourceDir": "src"
+    "styleExt": "css",
+    "prefixInterfaces": false,
+    "lazyRoutePrefix": "+"
   }
 }

config/environment.js

@@ -1,10 +0,0 @@
-/* jshint node: true */
-
-module.exports = function(environment) {
-  return {
-    environment: environment,
-    baseURL: '/',
-    locationType: 'auto'
-  };
-};
-

config/karma.conf.js

@@ -1,42 +0,0 @@
-module.exports = function (config) {
-  config.set({
-    basePath: '..',
-    frameworks: ['jasmine'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher')
-    ],
-    customLaunchers: {
-      // chrome setup for travis CI using chromium
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
-    files: [
-      { pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: false },
-      { pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false },
-      { pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false },
-      { pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false },
-      { pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false },
-      { pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false },
-
-      { pattern: 'config/karma-test-shim.js', included: true, watched: true },
-
-      // Distribution folder.
-      { pattern: 'dist/**/*', included: false, watched: true }
-    ],
-    exclude: [
-      // Vendor packages might include spec files. We don't want to use those.
-      'dist/vendor/**/*.spec.js'
-    ],
-    preprocessors: {},
-    reporters: ['progress'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
-  });
-};

e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { OpenbciDashboardPage } from './app.po';
+
+describe('openbci-dashboard App', function() {
+  let page: OpenbciDashboardPage;
+
+  beforeEach(() => {
+    page = new OpenbciDashboardPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});

e2e/app.po.ts

@@ -1,9 +1,11 @@
-export class ClitestPage {
+import { browser, element, by } from 'protractor/globals';
+
+export class OpenbciDashboardPage {
   navigateTo() {
     return browser.get('/');
   }
 
   getParagraphText() {
-    return element(by.css('clitest-app h1')).getText();
+    return element(by.css('app-root h1')).getText();
   }
 }

e2e/tsconfig.json

@@ -4,14 +4,13 @@
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "mapRoot": "",
     "module": "commonjs",
     "moduleResolution": "node",
-    "noEmitOnError": true,
-    "noImplicitAny": false,
-    "rootDir": ".",
+    "outDir": "../dist/out-tsc-e2e",
     "sourceMap": true,
-    "sourceRoot": "/",
-    "target": "es5"
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
   }
 }

karma.conf.js

@@ -0,0 +1,35 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: './',
+    frameworks: ['jasmine', 'angular-cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-remap-istanbul'),
+      require('angular-cli/plugins/karma')
+    ],
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['angular-cli']
+    },
+    remapIstanbulReporter: {
+      reports: {
+        html: 'coverage',
+        lcovonly: './coverage/coverage.lcov'
+      }
+    },
+    angularCliConfig: './angular-cli.json',
+    reporters: ['progress', 'karma-remap-istanbul'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

package.json

@@ -1,45 +1,25 @@
 {
   "name": "openbci-dashboard",
-  "description": "A fullstack javascript app for capturing and visualizing OpenBCI EEG data",
-  "main": "visualizer.js",
-  "version": "0.1.0",
-  "author": "Alex Castillo <alex@castillo.io>",
+  "version": "0.0.0",
   "license": "MIT",
-  "private": false,
   "angular-cli": {},
-  "engines": {
-    "node": ">= 6.2.0 < 7"
-  },
   "scripts": {
-    "start": "ng server",
-    "postinstall": "typings install",
+    "start": "ng serve",
     "lint": "tslint \"src/**/*.ts\"",
-    "format": "clang-format -i -style=file --glob=src/**/*.ts",
-    "visualize": "concurrently \"ng serve\" \"node src/server/app\" ",
-    "simulate": "concurrently \"ng serve\" \"node src/server/app simulate\" ",
+    "test": "ng test",
     "pree2e": "webdriver-manager update",
     "e2e": "protractor"
   },
-  "keywords": [
-    "openbci",
-    "eeg",
-    "neurojs",
-    "dashboard"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:NeuroJS/openbci-dashboard.git"
-  },
-  "bugs": {
-    "url": "https://github.com/NeuroJS/openbci-dashboard/issues"
-  },
+  "private": true,
   "dependencies": {
-    "@angular/common": "2.0.0-rc.1",
-    "@angular/compiler": "2.0.0-rc.1",
-    "@angular/core": "2.0.0-rc.1",
-    "@angular/platform-browser": "2.0.0-rc.1",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
-    "@angular/router": "2.0.0-rc.1",
+    "@angular/common": "2.0.0-rc.5",
+    "@angular/compiler": "2.0.0-rc.5",
+    "@angular/core": "2.0.0-rc.5",
+    "@angular/forms": "0.3.0",
+    "@angular/http": "2.0.0-rc.5",
+    "@angular/platform-browser": "2.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
+    "@angular/router": "3.0.0-rc.1",
     "brainbrowser": "^2.3.0",
     "chart.js": "^2.1.4",
     "chroma-js": "^1.1.1",
@@ -52,30 +32,31 @@
     "nodemon": "^1.9.1",
     "openbci-sdk": "^0.3.4",
     "plotly.js": "^1.10.2",
-    "reflect-metadata": "0.1.3",
-    "rxjs": "5.0.0-beta.6",
+    "reflect-metadata": "^0.1.3",
     "smoothie": "^1.27.0",
     "socket.io": "^1.4.6",
     "socket.io-client": "^1.4.6",
-    "systemjs": "0.19.26",
+    "systemjs": "0.19.27",
     "topogrid": "^1.0.6",
     "yargs": "^4.3.2",
-    "zone.js": "^0.6.12"
+    "core-js": "^2.4.1",
+    "zone.js": "^0.6.17"
   },
   "devDependencies": {
-    "angular-cli": "0.0.*",
-    "clang-format": "^1.0.35",
-    "codelyzer": "0.0.14",
-    "ember-cli-inject-live-reload": "^1.4.0",
-    "jasmine-core": "^2.4.1",
-    "jasmine-spec-reporter": "^2.4.0",
-    "karma": "^0.13.15",
-    "karma-chrome-launcher": "^0.2.3",
-    "karma-jasmine": "^0.3.8",
-    "protractor": "^3.3.0",
-    "ts-node": "^0.5.5",
-    "tslint": "^3.6.0",
-    "typescript": "^1.8.10",
-    "typings": "^0.8.1"
+    "@types/jasmine": "^2.2.30",
+    "@types/smoothie": "^1.25.27",
+    "@types/socket.io-client": "^1.4.26",
+    "angular-cli": "1.0.0-beta.11-webpack.8",
+    "codelyzer": "~0.0.26",
+    "jasmine-core": "2.4.1",
+    "jasmine-spec-reporter": "2.5.0",
+    "karma": "0.13.22",
+    "karma-chrome-launcher": "0.2.3",
+    "karma-jasmine": "0.3.8",
+    "karma-remap-istanbul": "^0.2.1",
+    "protractor": "4.0.3",
+    "ts-node": "1.2.1",
+    "tslint": "3.13.0",
+    "typescript": "^2.0.0"
   }
 }

protractor.conf.js

@@ -0,0 +1,32 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/docs/referenceConf.js
+
+/*global jasmine */
+var SpecReporter = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  useAllAngular2AppRoots: true,
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e'
+    });
+  },
+  onPrepare: function() {
+    jasmine.getEnv().addReporter(new SpecReporter());
+  }
+};

src/app/dashboard.component.spec.ts

@@ -1,22 +0,0 @@
-import {
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject
-} from '@angular/core/testing';
-import { DashboardComponent } from '../app/dashboard.component';
-
-beforeEachProviders(() => [DashboardComponent]);
-
-describe('App: DashboardComponent', () => {
-  it('should create the app',
-      inject([DashboardComponent], (app: DashboardComponent) => {
-    expect(app).toBeTruthy();
-  }));
-
-  it('should have as title \'clitest works!\'',
-      inject([DashboardComponent], (app: DashboardComponent) => {
-    expect(app.title).toEqual('clitest works!');
-  }));
-});

src/app/dashboard.component.ts

@@ -1,35 +1,15 @@
 import { Component, OnInit } from '@angular/core';
-import { FiltersComponent } from './filters';
-import { TimeSeriesComponent } from './time-series';
-import { FrequencyComponent } from './frequency';
-import { FrequencyBandsComponent } from './frequency-bands';
-import { TopoComponent } from './topo';
-import { MotionComponent } from './motion';
-import { Routes, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES } from '@angular/router';
 
 @Component({
-  moduleId: module.id,
   selector: 'bci-dashboard',
   templateUrl: 'dashboard.component.html',
   styleUrls: ['dashboard.component.css'],
-  directives: [ROUTER_DIRECTIVES, FiltersComponent],
-  providers: [ROUTER_PROVIDERS]
 })
 
-@Routes([
-  { path: '/', component: TimeSeriesComponent },
-  { path: '/time-series', component: TimeSeriesComponent },
-  { path: '/frequency/line', component: FrequencyComponent },
-  { path: '/frequency/radar', component: FrequencyComponent },
-  { path: '/frequency/bands', component: FrequencyBandsComponent },
-  { path: '/motion', component: MotionComponent },
-  { path: '/topo', component: TopoComponent }
-])
-
 export class DashboardComponent implements OnInit {
   title = 'BCI Dashboard';
   
-  constructor (private router: Router) {
+  constructor () {
   }
   
   ngOnInit () {

src/app/dashboard.module.ts

@@ -0,0 +1,38 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { routing, appRoutingProviders } from './dashboard.routing';
+
+import { DashboardComponent } from './dashboard.component';
+import { FiltersComponent } from './filters';
+import { TimeSeriesComponent } from './time-series';
+import { FrequencyComponent } from './frequency';
+import { FrequencyBandsComponent } from './frequency-bands';
+import { TopoComponent } from './topo';
+import { MotionComponent } from './motion';
+
+import { CHART_DIRECTIVES } from './shared/ng2-charts';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    routing
+  ],
+  declarations: [
+    DashboardComponent,
+    FiltersComponent,
+    TimeSeriesComponent,
+    FrequencyComponent,
+    FrequencyBandsComponent,
+    TopoComponent,
+    MotionComponent,
+    CHART_DIRECTIVES
+  ],
+  providers: [
+    appRoutingProviders
+  ],
+  bootstrap: [
+    DashboardComponent
+  ]
+})
+export class DashboardModule { }

src/app/dashboard.routing.ts

@@ -0,0 +1,23 @@
+import { Routes, RouterModule }   from '@angular/router';
+
+import { TimeSeriesComponent } from './time-series';
+import { FrequencyComponent } from './frequency';
+import { FrequencyBandsComponent } from './frequency-bands';
+import { TopoComponent } from './topo';
+import { MotionComponent } from './motion';
+
+const dashboardRoutes: Routes = [
+  { path: '', redirectTo: '/time-series', pathMatch: 'full' },
+  { path: 'time-series', component: TimeSeriesComponent },
+  { path: 'frequency/line', component: FrequencyComponent },
+  { path: 'frequency/radar', component: FrequencyComponent },
+  { path: 'frequency/bands', component: FrequencyBandsComponent },
+  { path: 'motion', component: MotionComponent },
+  { path: 'topo', component: TopoComponent }
+];
+
+export const appRoutingProviders: any[] = [
+
+];
+
+export const routing = RouterModule.forRoot(dashboardRoutes);

src/app/filters/filters.component.spec.ts

@@ -1,46 +0,0 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
-import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
-import { Component } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { FiltersComponent } from './filters.component';
-
-describe('Component: Filters', () => {
-  let builder: TestComponentBuilder;
-
-  beforeEachProviders(() => [FiltersComponent]);
-  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
-    builder = tcb;
-  }));
-
-  it('should inject the component', inject([FiltersComponent],
-      (component: FiltersComponent) => {
-    expect(component).toBeTruthy();
-  }));
-
-  it('should create the component', inject([], () => {
-    return builder.createAsync(FiltersComponentTestController)
-      .then((fixture: ComponentFixture<any>) => {
-        let query = fixture.debugElement.query(By.directive(FiltersComponent));
-        expect(query).toBeTruthy();
-        expect(query.componentInstance).toBeTruthy();
-      });
-  }));
-});
-
-@Component({
-  selector: 'test',
-  template: `
-    <bci-filters></bci-filters>
-  `,
-  directives: [FiltersComponent]
-})
-class FiltersComponentTestController {
-}
-

src/app/filters/filters.component.ts

@@ -3,7 +3,6 @@ import * as io from 'socket.io-client';
 import { Constants } from '../shared/constants';
 
 @Component({
-  moduleId: module.id,
   selector: 'bci-filters',
   templateUrl: 'filters.component.html',
   styleUrls: ['filters.component.css'],

src/app/frequency-band/frequency-band.component.spec.ts

@@ -1,46 +0,0 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
-import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
-import { Component } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { FrequencyBandComponent } from './frequency-band.component';
-
-describe('Component: FrequencyBand', () => {
-  let builder: TestComponentBuilder;
-
-  beforeEachProviders(() => [FrequencyBandComponent]);
-  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
-    builder = tcb;
-  }));
-
-  it('should inject the component', inject([FrequencyBandComponent],
-      (component: FrequencyBandComponent) => {
-    expect(component).toBeTruthy();
-  }));
-
-  it('should create the component', inject([], () => {
-    return builder.createAsync(FrequencyBandComponentTestController)
-      .then((fixture: ComponentFixture<any>) => {
-        let query = fixture.debugElement.query(By.directive(FrequencyBandComponent));
-        expect(query).toBeTruthy();
-        expect(query.componentInstance).toBeTruthy();
-      });
-  }));
-});
-
-@Component({
-  selector: 'test',
-  template: `
-    <bci-frequency-band></bci-frequency-band>
-  `,
-  directives: [FrequencyBandComponent]
-})
-class FrequencyBandComponentTestController {
-}
-

src/app/frequency-band/frequency-band.component.ts

@@ -5,11 +5,9 @@ import { CHART_DIRECTIVES } from '../shared/ng2-charts';
 import { Constants } from '../shared/constants';
 
 @Component({
-  moduleId: module.id,
   selector: 'bci-frequency-band',
   templateUrl: 'frequency-band.component.html',
   styleUrls: ['frequency-band.component.css'],
-  directives: [CHART_DIRECTIVES],
   providers: [ChartService, Constants]
 })
 

src/app/frequency-bands/frequency-bands.component.html

@@ -1,9 +1,11 @@
-<section>
-  <bci-frequency-band type="bar" band="delta" [color]="1"></bci-frequency-band>
-  <bci-frequency-band type="bar" band="theta" [color]="2"></bci-frequency-band>
-</section>
-<section>
-  <bci-frequency-band type="bar" band="alpha" [color]="3"></bci-frequency-band>
-  <bci-frequency-band type="bar" band="beta" [color]="4"></bci-frequency-band>
-  <bci-frequency-band type="bar" band="gamma" [color]="5"></bci-frequency-band>
-</section>
+<div>
+  <!--<section>
+    <bci-frequency-band type="bar" band="delta" [color]="1"></bci-frequency-band>
+    <bci-frequency-band type="bar" band="theta" [color]="2"></bci-frequency-band>
+  </section>
+  <section>
+    <bci-frequency-band type="bar" band="alpha" [color]="3"></bci-frequency-band>
+    <bci-frequency-band type="bar" band="beta" [color]="4"></bci-frequency-band>
+    <bci-frequency-band type="bar" band="gamma" [color]="5"></bci-frequency-band>
+  </section>-->
+</div>

src/app/frequency-bands/frequency-bands.component.spec.ts

@@ -1,46 +0,0 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
-import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
-import { Component } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { FrequencyBandsComponent } from './frequency-bands.component';
-
-describe('Component: FrequencyBands', () => {
-  let builder: TestComponentBuilder;
-
-  beforeEachProviders(() => [FrequencyBandsComponent]);
-  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
-    builder = tcb;
-  }));
-
-  it('should inject the component', inject([FrequencyBandsComponent],
-      (component: FrequencyBandsComponent) => {
-    expect(component).toBeTruthy();
-  }));
-
-  it('should create the component', inject([], () => {
-    return builder.createAsync(FrequencyBandsComponentTestController)
-      .then((fixture: ComponentFixture<any>) => {
-        let query = fixture.debugElement.query(By.directive(FrequencyBandsComponent));
-        expect(query).toBeTruthy();
-        expect(query.componentInstance).toBeTruthy();
-      });
-  }));
-});
-
-@Component({
-  selector: 'test',
-  template: `
-    <bci-frequency-bands></bci-frequency-bands>
-  `,
-  directives: [FrequencyBandsComponent]
-})
-class FrequencyBandsComponentTestController {
-}
-

src/app/frequency-bands/frequency-bands.component.ts

@@ -1,12 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { FrequencyBandComponent } from '../frequency-band';
 
 @Component({
-  moduleId: module.id,
   selector: 'bci-frequency-bands',
   templateUrl: 'frequency-bands.component.html',
-  styleUrls: ['frequency-bands.component.css'],
-  directives: [FrequencyBandComponent]
+  styleUrls: ['frequency-bands.component.css']
 })
 
 export class FrequencyBandsComponent implements OnInit {

src/app/frequency/frequency.component.spec.ts

@@ -1,46 +0,0 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
-import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
-import { Component } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { FrequencyComponent } from './frequency.component';
-
-describe('Component: Frequency', () => {
-  let builder: TestComponentBuilder;
-
-  beforeEachProviders(() => [FrequencyComponent]);
-  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
-    builder = tcb;
-  }));
-
-  it('should inject the component', inject([FrequencyComponent],
-      (component: FrequencyComponent) => {
-    expect(component).toBeTruthy();
-  }));
-
-  it('should create the component', inject([], () => {
-    return builder.createAsync(FrequencyComponentTestController)
-      .then((fixture: ComponentFixture<any>) => {
-        let query = fixture.debugElement.query(By.directive(FrequencyComponent));
-        expect(query).toBeTruthy();
-        expect(query.componentInstance).toBeTruthy();
-      });
-  }));
-});
-
-@Component({
-  selector: 'test',
-  template: `
-    <bci-frequency></bci-frequency>
-  `,
-  directives: [FrequencyComponent]
-})
-class FrequencyComponentTestController {
-}
-

src/app/frequency/frequency.component.ts

@@ -1,27 +1,24 @@
 import { Component, ElementRef, OnInit, OnDestroy, Input } from '@angular/core';
-import { RouteSegment, ROUTER_PROVIDERS } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import * as io from 'socket.io-client';
 import { ChartService } from '../shared';
-import { CHART_DIRECTIVES } from '../shared/ng2-charts';
 import { Constants } from '../shared/constants';
 
 @Component({
-  moduleId: module.id,
   selector: 'bci-frequency',
   templateUrl: 'frequency.component.html',
   styleUrls: ['frequency.component.css'],
-  directives: [CHART_DIRECTIVES],
-  providers: [ChartService, Constants, ROUTER_PROVIDERS]
+  providers: [ChartService, Constants]
 })
 
 export class FrequencyComponent implements OnInit {
 
   socket: any;
   constructor(private chartService: ChartService,
-              private segment: RouteSegment,
+              private route: ActivatedRoute,
               private constants: Constants) {
     this.socket = io(constants.socket.url);
-    this.type = segment.getParam('type') || 'line';
+    this.type = this.route.snapshot.params['type'] || 'line';
     
     this.setOptions(this.type);
   }

src/app/index.ts

@@ -1,2 +1,2 @@
-export {environment} from './environment';
-export {DashboardComponent} from './dashboard.component';
+export * from './app.component';
+export * from './app.module';

src/app/motion/motion.component.spec.ts

@@ -1,46 +0,0 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
-import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
-import { Component } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { MotionComponent } from './motion.component';
-
-describe('Component: Motion', () => {
-  let builder: TestComponentBuilder;
-
-  beforeEachProviders(() => [MotionComponent]);
-  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
-    builder = tcb;
-  }));
-
-  it('should inject the component', inject([MotionComponent],
-      (component: MotionComponent) => {
-    expect(component).toBeTruthy();
-  }));
-
-  it('should create the component', inject([], () => {
-    return builder.createAsync(MotionComponentTestController)
-      .then((fixture: ComponentFixture<any>) => {
-        let query = fixture.debugElement.query(By.directive(MotionComponent));
-        expect(query).toBeTruthy();
-        expect(query.componentInstance).toBeTruthy();
-      });
-  }));
-});
-
-@Component({
-  selector: 'test',
-  template: `
-    <bci-motion></bci-motion>
-  `,
-  directives: [MotionComponent]
-})
-class MotionComponentTestController {
-}
-

src/app/motion/motion.component.ts

@@ -5,7 +5,6 @@ import { Constants } from '../shared/constants';
 declare var BrainBrowser;
 
 @Component({
-  moduleId: module.id,
   selector: 'bci-motion',
   templateUrl: 'motion.component.html',
   styleUrls: ['motion.component.css'],

src/app/shared/chart.service.spec.ts

@@ -1,17 +0,0 @@
-import {
-  beforeEachProviders,
-  it,
-  describe,
-  expect,
-  inject
-} from '@angular/core/testing';
-import { ChartService } from './chart.service';
-
-describe('Chart Service', () => {
-  beforeEachProviders(() => [ChartService]);
-
-  it('should ...',
-      inject([ChartService], (service: ChartService) => {
-    expect(service).toBeTruthy();
-  }));
-});

src/app/shared/index.ts

@@ -1,2 +1,2 @@
 export * from './chart.service';
-export * from './ng2-charts';
+export * from './ng2-charts';

src/app/shared/ng2-charts.ts

@@ -2,14 +2,12 @@ import {
   Component, OnDestroy, OnInit, OnChanges, EventEmitter, ElementRef, Input,
   Output
 } from '@angular/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
 
 declare var Chart:any;
 
 @Component({
   selector: 'base-chart',
   template: `<canvas style="width: 100%; height: 100%;"></canvas>`,
-  directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass]
 })
 export class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
   public static defaultColors:Array<number[]> = [
@@ -34,6 +32,7 @@ export class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
   @Input() public chartType:string;
   @Input() public colors:Array<any>;
   @Input() public legend:boolean;
+  @Input() public series:any;
 
   @Output() public chartClick:EventEmitter<any> = new EventEmitter();
   @Output() public chartHover:EventEmitter<any> = new EventEmitter();

src/app/time-series/time-series.component.spec.ts

@@ -1,46 +0,0 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
-import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
-import { Component } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { TimeSeriesComponent } from './time-series.component';
-
-describe('Component: TimeSeries', () => {
-  let builder: TestComponentBuilder;
-
-  beforeEachProviders(() => [TimeSeriesComponent]);
-  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
-    builder = tcb;
-  }));
-
-  it('should inject the component', inject([TimeSeriesComponent],
-      (component: TimeSeriesComponent) => {
-    expect(component).toBeTruthy();
-  }));
-
-  it('should create the component', inject([], () => {
-    return builder.createAsync(TimeSeriesComponentTestController)
-      .then((fixture: ComponentFixture<any>) => {
-        let query = fixture.debugElement.query(By.directive(TimeSeriesComponent));
-        expect(query).toBeTruthy();
-        expect(query.componentInstance).toBeTruthy();
-      });
-  }));
-});
-
-@Component({
-  selector: 'test',
-  template: `
-    <bci-time-series></bci-time-series>
-  `,
-  directives: [TimeSeriesComponent]
-})
-class TimeSeriesComponentTestController {
-}
-

src/app/time-series/time-series.component.ts

@@ -1,11 +1,11 @@
 import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';
 import { SmoothieChart, TimeSeries } from 'smoothie';
-import { ChartService } from '../shared';
 import * as io from 'socket.io-client';
+import { ChartService } from '../shared';
+
 import { Constants } from '../shared/constants';
 
 @Component({
-  moduleId: module.id,
   selector: 'bci-time-series',
   templateUrl: 'time-series.component.html',
   styleUrls: ['time-series.component.css'],

src/app/topo/topo.component.spec.ts

@@ -1,46 +0,0 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
-import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
-import { Component } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { TopoComponent } from './topo.component';
-
-describe('Component: Topo', () => {
-  let builder: TestComponentBuilder;
-
-  beforeEachProviders(() => [TopoComponent]);
-  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
-    builder = tcb;
-  }));
-
-  it('should inject the component', inject([TopoComponent],
-      (component: TopoComponent) => {
-    expect(component).toBeTruthy();
-  }));
-
-  it('should create the component', inject([], () => {
-    return builder.createAsync(TopoComponentTestController)
-      .then((fixture: ComponentFixture<any>) => {
-        let query = fixture.debugElement.query(By.directive(TopoComponent));
-        expect(query).toBeTruthy();
-        expect(query.componentInstance).toBeTruthy();
-      });
-  }));
-});
-
-@Component({
-  selector: 'test',
-  template: `
-    <bci-topo></bci-topo>
-  `,
-  directives: [TopoComponent]
-})
-class TopoComponentTestController {
-}
-

src/app/topo/topo.component.ts

@@ -7,7 +7,6 @@ declare var chroma: any;
 declare var Plotly: any;
 
 @Component({
-  moduleId: module.id,
   selector: 'bci-topo',
   templateUrl: 'topo.component.html',
   styleUrls: ['topo.component.css'],

src/environments/environment.dev.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: false
+};

src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

src/environments/environment.ts

@@ -0,0 +1,8 @@
+// The file for the current environment will overwrite this one during build.
+// Different environments can be found in ./environment.{dev|prod}.ts, and
+// you can create your own and use it with the --env flag.
+// The build system defaults to the dev environment.
+
+export const environment = {
+  production: false
+};

src/index.html

@@ -4,9 +4,9 @@
   <meta charset="utf-8">
   <title>BCI Dashboard</title>
   <base href="/">
-  {{content-for 'head'}}
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
   <style>
     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);
     body {
@@ -17,35 +17,9 @@
       margin: 0; 
     }
   </style>
-
-  <!-- Service worker support is disabled by default.
-       Install the worker script and uncomment to enable.
-       Only enable service workers in production.
-  <script type="text/javascript">
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('/worker.js').catch(function(err) {
-        console.log('Error installing service worker: ', err);
-      });
-    }
-  </script>
-  -->
+  
 </head>
 <body>
   <bci-dashboard>Loading...</bci-dashboard>
-
-  <script src="vendor/chart.js/dist/Chart.bundle.js"></script>
-  <script src="vendor/chroma-js/chroma.js"></script>
-  <script src="vendor/plotly.js/dist/plotly.js"></script>
-  <script src="vendor/brainbrowser/build/brainbrowser-2.3.0/brainbrowser.surface-viewer.min.js"></script>
-  <script src="vendor/es6-shim/es6-shim.js"></script>
-  <script src="vendor/reflect-metadata/Reflect.js"></script>
-  <script src="vendor/systemjs/dist/system.src.js"></script>
-  <script src="vendor/zone.js/dist/zone.js"></script>
-
-  <script>
-    System.import('system-config.js').then(function () {
-      System.import('main');
-    }).catch(console.error.bind(console));
-  </script>
 </body>
 </html>

src/main.ts

@@ -1,9 +1,16 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import './polyfills.ts';
+import 'chart.js';
+import 'chroma-js';
+import 'plotly.js';
+import 'brainbrowser/build/brainbrowser-2.3.0/brainbrowser.surface-viewer.min';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { enableProdMode } from '@angular/core';
-import { DashboardComponent, environment } from './app/';
+import { environment } from './environments/environment';
+import { DashboardModule } from './app/dashboard.module';
 
 if (environment.production) {
   enableProdMode();
 }
 
-bootstrap(DashboardComponent);
+platformBrowserDynamic().bootstrapModule(DashboardModule);

src/polyfills.ts

@@ -0,0 +1,19 @@
+// This file includes polyfills needed by Angular 2 and is loaded before
+// the app. You can add your own extra polyfills to this file.
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/reflect';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';

src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

src/system-config.ts

@@ -1,70 +0,0 @@
-/***********************************************************************************************
- * User Configuration.
- **********************************************************************************************/
-/** Map relative paths to URLs. */
-const map: any = {
-  'smoothie': 'vendor/smoothie/smoothie.js',
-  'chartjs': 'vendor/chart.js/dist/Chart.bundle.js',
-  'ng2-charts': 'vendor/ng2-charts/bundles/ng2-charts.js',
-  'socket.io-client': 'vendor/socket.io-client/socket.io.js',
-  'chroma-js': 'vendor/chroma-js/chroma.js',
-  'plotly': 'vendor/plotly.js/dist/plotly.js',
-  'brainbrowser': 'vendor/brainbrowser/build/brainbrowser-2.3.0/brainbrowser.surface-viewer.min.js'
-};  
-
-/** User packages configuration. */
-const packages: any = {
- 
-};
-
-////////////////////////////////////////////////////////////////////////////////////////////////
-/***********************************************************************************************
- * Everything underneath this line is managed by the CLI.
- **********************************************************************************************/
-const barrels: string[] = [
-  // Angular specific barrels.
-  '@angular/core',
-  '@angular/common',
-  '@angular/compiler',
-  '@angular/http',
-  '@angular/router',
-  '@angular/platform-browser',
-  '@angular/platform-browser-dynamic',
-
-  // Thirdparty barrels.
-  'rxjs',
-
-  // App specific barrels.
-  'app',
-  'app/shared',
-  'app/frequency',
-  'app/time-series',
-  'app/nav',
-  'app/frequency-bands',
-  'app/frequency-band',
-  'app/topo',
-  'app/filters',
-  'app/motion',
-  /** @cli-barrel */
-];
-
-const cliSystemConfigPackages: any = {};
-barrels.forEach((barrelName: string) => {
-  cliSystemConfigPackages[barrelName] = { main: 'index' };
-});
-
-/** Type declaration for ambient System. */
-declare var System: any;
-
-// Apply the CLI SystemJS configuration.
-System.config({
-  map: {
-    '@angular': 'vendor/@angular',
-    'rxjs': 'vendor/rxjs',
-    'main': 'main.js'
-  },
-  packages: cliSystemConfigPackages
-});
-
-// Apply the user's configuration.
-System.config({ map, packages });

src/test.ts

@@ -0,0 +1,32 @@
+import './polyfills.ts';
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import 'zone.js/dist/sync-test';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+
+Promise.all([
+  System.import('@angular/core/testing'),
+  System.import('@angular/platform-browser-dynamic/testing')
+])
+  // First, initialize the Angular testing environment.
+  .then(([testing, testingBrowser]) => {
+    testing.getTestBed().initTestEnvironment(
+      testingBrowser.BrowserDynamicTestingModule,
+      testingBrowser.platformBrowserDynamicTesting()
+    );
+  })
+  // Then we find all the tests.
+  .then(() => require.context('./', true, /\.spec\.ts/))
+  // And load the modules.
+  .then(context => context.keys().map(context))
+  // Finally, start Karma to run the tests.
+  .then(__karma__.start, __karma__.error);

src/tsconfig.json

@@ -1,23 +1,17 @@
 {
-  "compileOnSave": false,
   "compilerOptions": {
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "mapRoot": "",
-    "module": "commonjs",
+    "lib": ["es6", "dom"],
+    "mapRoot": "./",
+    "module": "es6",
     "moduleResolution": "node",
-    "noEmitOnError": true,
-    "noImplicitAny": false,
-    "outDir": "../dist/",
-    "rootDir": ".",
+    "outDir": "../dist/out-tsc",
     "sourceMap": true,
     "target": "es5",
-    "inlineSources": true
-  },
-
-  "files": [
-    "main.ts",
-    "typings.d.ts"
-  ]
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
 }

src/typings.d.ts

@@ -1,3 +1,5 @@
-/// <reference path="../typings/browser.d.ts" />
+// Typings reference file, see links for more information
+// https://github.com/typings/typings
+// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
 
-declare var module: { id: string };
+declare var System: any;

tslint.json

@@ -1,40 +1,78 @@
 {
-  "rulesDirectory": ["node_modules/codelyzer"],
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
   "rules": {
-    "max-line-length": [true, 100],
-    "no-inferrable-types": true,
     "class-name": true,
     "comment-format": [
       true,
       "check-space"
     ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
     "indent": [
       true,
       "spaces"
     ],
-    "eofline": true,
-    "no-duplicate-variable": true,
-    "no-eval": true,
+    "label-position": true,
+    "label-undefined": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
     "no-arg": true,
-    "no-internal-module": true,
-    "no-trailing-whitespace": true,
     "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-key": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-eval": true,
+    "no-inferrable-types": true,
     "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
     "no-unused-expression": true,
     "no-unused-variable": true,
+    "no-unreachable": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
     "one-line": [
       true,
+      "check-open-brace",
       "check-catch",
       "check-else",
-      "check-open-brace",
       "check-whitespace"
     ],
     "quotemark": [
       true,
-      "single",
-      "avoid-escape"
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
     ],
-    "semicolon": [true, "always"],
     "typedef-whitespace": [
       true,
       {
@@ -45,13 +83,7 @@
         "variable-declaration": "nospace"
       }
     ],
-    "curly": true,
-    "variable-name": [
-      true,
-      "ban-keywords",
-      "check-format",
-      "allow-trailing-underscore"
-    ],
+    "variable-name": false,
     "whitespace": [
       true,
       "check-branch",
@@ -60,13 +92,21 @@
       "check-separator",
       "check-type"
     ],
+
+    "directive-selector-prefix": [true, "app"],
+    "component-selector-prefix": [true, "app"],
+    "directive-selector-name": [true, "camelCase"],
     "component-selector-name": [true, "kebab-case"],
+    "directive-selector-type": [true, "attribute"],
     "component-selector-type": [true, "element"],
-    "host-parameter-decorator": true,
-    "input-parameter-decorator": true,
-    "output-parameter-decorator": true,
-    "attribute-parameter-decorator": true,
-    "input-property-directive": true,
-    "output-property-directive": true
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true
   }
 }

typings.json

@@ -1,14 +0,0 @@
-{
-  "ambientDevDependencies": {
-    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
-    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
-    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
-  },
-  "ambientDependencies": {
-    "chart": "registry:dt/chart#0.0.0+20160316155526",
-    "chroma-js": "registry:dt/chroma-js#0.5.6+20160317120654",
-    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
-    "smoothie": "registry:dt/smoothie#1.25.0+20160316155526",
-    "socket.io-client": "registry:dt/socket.io-client#1.4.4+20160317120654"
-  }
-}