ng: introduce ngrx and create basic usage (#2561)

This change introduces ngrx, a state management, to our angular shell.
The usage of ngrx is very limited. Soon, it will be expanded to make XHR
to fetch list of plugins and properly render the header.

Author: stephanwlee

package.json

@@ -45,11 +45,15 @@
     "typescript": "~3.4.5"
   },
   "dependencies": {
-    "@angular/animations": "^8.1.2",
+    "@angular/animations": "^8.2.2",
+    "@angular/cdk": "^8.1.3",
     "@angular/common": "^8.1.2",
     "@angular/core": "^8.1.2",
+    "@angular/forms": "^8.2.2",
+    "@angular/material": "^8.1.3",
     "@angular/platform-browser": "^8.1.3",
     "@angular/router": "^8.1.2",
+    "@ngrx/store": "^8.2.0",
     "rxjs": "^6.5.2",
     "zone.js": "^0.9.1"
   }

tensorboard/components/tf_ng_tensorboard/BUILD

@@ -2,9 +2,31 @@ package(default_visibility = ["//tensorboard:internal"])
 
 load("@npm_angular_bazel//:index.bzl", "ng_module")
 load("//tensorboard/defs:defs.bzl", "tf_js_binary")
+load("//tensorboard/defs:web.bzl", "tf_web_library")
 
 licenses(["notice"])  # Apache 2.0
 
+tf_web_library(
+    name = "tf_ng_tensorboard",
+    srcs = [
+        ":tf_ng_tensorboard_binary.js",
+        "@npm//:node_modules/zone.js/dist/zone.js",
+    ],
+    path = "/tf-ng-tensorboard",
+    deps = [
+        ":tf_ng_tensorboard_binary",
+    ],
+)
+
+# TODO(stephanwlee): move this to root level
+tf_web_library(
+    name = "material_theme",
+    srcs = [
+        "@npm//:node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+    ],
+    path = "/@angular",
+    strip_prefix = "node_modules/@angular/material/prebuilt-themes",
+)
 
 tf_js_binary(
     name = "tf_ng_tensorboard_binary",
@@ -14,8 +36,9 @@ tf_js_binary(
         ":ng_main",
         "@npm//@angular/common",
         "@npm//@angular/core",
+        "@npm//@angular/material",
         "@npm//@angular/platform-browser",
-        "@npm//@angular/router",
+        "@npm//@ngrx/store",
         "@npm//rxjs",
         "@npm//zone.js",
     ],
@@ -40,15 +63,17 @@ ng_module(
     srcs = [
         "app.component.ts",
         "app.module.ts",
-        "app-routing.module.ts",
+        "reducers.ts",
     ],
     assets = [
         "app.component.css",
         "app.component.html",
     ],
     deps = [
+        "//tensorboard/components/tf_ng_tensorboard/core",
+        "//tensorboard/components/tf_ng_tensorboard/header",
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
-        "@npm//@angular/router",
+        "@npm//@ngrx/store",
     ],
 )

tensorboard/components/tf_ng_tensorboard/app.component.html

@@ -15,5 +15,5 @@
 limitations under the License.
 -->
 <div>
-  Angular TensorBoard
+  <app-header></app-header>
 </div>

tensorboard/components/tf_ng_tensorboard/app.component.ts

@@ -13,10 +13,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {Component} from '@angular/core';
+import {Store, select} from '@ngrx/store';
+import {State, getActivePlugin} from './core/core.reducers';
+import {changePlugin} from './core/core.actions';
+import {PluginId} from './types/api';
 
 @Component({
   selector: 'tf-ng-tensorboard',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {}
+export class AppComponent {
+  constructor(private store: Store<State>) {}
+
+  ngOnInit() {
+    // TODO(stephanwlee): Instead of hardcoding it, consider reading it off of the
+    // tf_dashboard.registry. It is current infeasible unless Angular source is also
+    // compiled with JSCompiler.
+    this.store.dispatch(changePlugin({plugin: 'Core'}));
+  }
+}

tensorboard/components/tf_ng_tensorboard/app.module.ts

@@ -13,14 +13,33 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {NgModule} from '@angular/core';
+import {StoreModule} from '@ngrx/store';
 
-import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
+import {CoreModule} from './core/core.module';
+import {ROOT_REDUCERS, metaReducers} from './reducers';
+
+import {HeaderModule} from './header/header.module';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    CoreModule,
+    HeaderModule,
+    StoreModule.forRoot(ROOT_REDUCERS, {
+      metaReducers,
+      runtimeChecks: {
+        strictStateImmutability: true,
+        strictActionImmutability: true,
+        strictStateSerializability: true,
+        strictActionSerializability: true,
+      },
+    }),
+  ],
   providers: [],
   bootstrap: [AppComponent],
 })

tensorboard/components/tf_ng_tensorboard/core/BUILD

@@ -0,0 +1,37 @@
+package(default_visibility = ["//tensorboard:internal"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+load("@npm_bazel_jasmine//:index.bzl", "jasmine_node_test")
+
+ng_module(
+    name = "core",
+    srcs = [
+        "core.actions.ts",
+        "core.module.ts",
+        "core.reducers.ts",
+    ],
+    deps = [
+        "//tensorboard/components/tf_ng_tensorboard/types",
+        "@npm//@ngrx/store",
+    ],
+)
+
+ng_module(
+    name = "core_test_lib",
+    testonly = True,
+    srcs = [
+        "core.reducers.test.ts",
+    ],
+    deps = [
+        ":core",
+        "@npm//@types/jasmine",
+        "@npm//chai",
+    ],
+)
+
+jasmine_node_test(
+    name = "core_jasmine_test",
+    deps = [
+        ":core_test_lib",
+    ],
+)

tensorboard/components/tf_ng_tensorboard/core/core.actions.ts

@@ -0,0 +1,25 @@
+/* Copyright 2019 The TensorFlow Authors. All Rights Reserved.
+
+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 {createAction, props} from '@ngrx/store';
+import {PluginId} from '../types/api';
+
+// HACK: Below import is for type inference.
+// https://github.com/bazelbuild/rules_nodejs/issues/1013
+import * as _typeHackModels from '@ngrx/store/src/models';
+
+export const changePlugin = createAction(
+  'CHANGE_PLUGIN',
+  props<{plugin: PluginId}>()
+);

tensorboard/components/tf_ng_tensorboard/app-routing.module.ts renamed to tensorboard/components/tf_ng_tensorboard/core/core.module.ts

@@ -13,12 +13,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {NgModule} from '@angular/core';
-import {Routes, RouterModule} from '@angular/router';
+import {StoreModule} from '@ngrx/store';
 
-const routes: Routes = [];
+import {CORE_FEATURE_KEY, reducers} from './core.reducers';
 
 @NgModule({
-  imports: [RouterModule],
-  exports: [RouterModule],
+  imports: [StoreModule.forFeature(CORE_FEATURE_KEY, reducers)],
 })
-export class AppRoutingModule {}
+export class CoreModule {}

tensorboard/components/tf_ng_tensorboard/core/core.reducers.test.ts

@@ -0,0 +1,29 @@
+/* Copyright 2019 The TensorFlow Authors. All Rights Reserved.
+
+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 {expect} from 'chai';
+
+import * as actions from './core.actions';
+import {reducers} from './core.reducers';
+
+describe('core reducer', () => {
+  describe('#changePlugin', () => {
+    it('sets activePlugin to the one in action payload', () => {
+      const state = {activePlugin: 'foo'};
+      const nextState = reducers(state, actions.changePlugin({plugin: 'bar'}));
+
+      expect(nextState).to.have.property('activePlugin', 'bar');
+    });
+  });
+});

tensorboard/components/tf_ng_tensorboard/core/core.reducers.ts

@@ -0,0 +1,64 @@
+/* Copyright 2019 The TensorFlow Authors. All Rights Reserved.
+
+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,
+  createSelector,
+  createReducer,
+  on,
+  createFeatureSelector,
+} from '@ngrx/store';
+import {PluginId} from '../types/api';
+import * as actions from './core.actions';
+
+// HACK: These imports are for type inference.
+// https://github.com/bazelbuild/rules_nodejs/issues/1013
+import * as _typeHackSelector from '@ngrx/store/src/selector';
+import * as _typeHackStore from '@ngrx/store/store';
+
+export const CORE_FEATURE_KEY = 'core';
+
+export interface CoreState {
+  activePlugin: PluginId;
+}
+
+export interface State {
+  [CORE_FEATURE_KEY]: CoreState;
+}
+
+const initialState = {};
+
+const reducer = createReducer(
+  initialState,
+  on(actions.changePlugin, (state: CoreState, {plugin}) => {
+    return {
+      activePlugin: plugin,
+    };
+  })
+);
+
+export function reducers(state: CoreState, action: Action) {
+  return reducer(state, action);
+}
+
+const selectCoreState = createFeatureSelector<State, CoreState>(
+  CORE_FEATURE_KEY
+);
+
+export const getActivePlugin = createSelector(
+  selectCoreState,
+  (state: CoreState): PluginId => {
+    return state.activePlugin;
+  }
+);