chore: upgrade dependencies (tensorflow#5238)

This change upgrades most of our JavaScript dependencies except for:
- d3 (the same version as internal one)
- tfjs (their NPM package is incompatible with ours)
- `@angular/material`: sass library setup is borked.

Some type declaration had to be changed due to an upgraded TypeScript
version.

.github/workflows/ci.yml

@@ -287,6 +287,9 @@ jobs:
     steps:
       - uses: actions/checkout@50fbc622fc4ef5163becd7fab6573eac35f8462e
       - uses: actions/setup-node@56899e050abffc08c2b3b61f3ec6a79a9dc3223d
+        with:
+          # default on setup-node@1 is v10.24.1.
+          version: '12.21.0'
       - run: yarn install --ignore-engines
         # You can run `yarn fix-lint` to fix all Prettier complaints.
       - run: yarn lint

WORKSPACE

@@ -73,11 +73,6 @@ http_archive(
     ],
 )
 
-# Load @bazel/protractor dependencies
-load("@npm//@bazel/protractor:package.bzl", "npm_bazel_protractor_dependencies")
-
-npm_bazel_protractor_dependencies()
-
 http_archive(
     name = "org_tensorflow",
     patches = [

package.json

@@ -28,53 +28,53 @@
   },
   "homepage": "https://github.com/tensorflow/tensorboard#readme",
   "devDependencies": {
-    "@angular/bazel": "11.2.9",
-    "@angular/cli": "^11.2.8",
-    "@angular/compiler": "^11.2.9",
-    "@angular/compiler-cli": "^11.2.9",
-    "@bazel/concatjs": "^3.4.0",
+    "@angular/bazel": "12.2.0",
+    "@angular/cli": "^12.2.0",
+    "@angular/compiler": "^12.2.0",
+    "@angular/compiler-cli": "^12.2.0",
+    "@bazel/concatjs": "^3.7.0",
     "@bazel/ibazel": "^0.15.9",
-    "@bazel/jasmine": "^3.4.0",
-    "@bazel/protractor": "^3.4.0",
-    "@bazel/rollup": "^3.4.0",
-    "@bazel/terser": "^3.4.0",
-    "@bazel/typescript": "^3.4.0",
-    "@rollup/plugin-commonjs": "^16.0.0",
-    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@bazel/jasmine": "^3.7.0",
+    "@bazel/rollup": "^3.7.0",
+    "@bazel/terser": "^3.7.0",
+    "@bazel/typescript": "^3.7.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
     "@types/d3": "5.7.2",
-    "@types/jasmine": "^3.5.10",
-    "@types/lodash": "^4.14.158",
-    "@types/marked": "^1.2.2",
-    "@types/node": "^13.13.1",
-    "@types/requirejs": "^2.1.31",
-    "@types/resize-observer-browser": "^0.1.3",
-    "jasmine-core": "^3.5.0",
-    "karma": "^6.3.2",
+    "@types/jasmine": "^3.8.2",
+    "@types/lodash": "^4.14.172",
+    "@types/marked": "^2.0.4",
+    "@types/node": "^16.4.13",
+    "@types/requirejs": "^2.1.33",
+    "@types/resize-observer-browser": "^0.1.6",
+    "@types/three": "^0.131.0",
+    "jasmine-core": "^3.8.0",
+    "karma": "^6.3.4",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-firefox-launcher": "^2.1.0",
+    "karma-firefox-launcher": "^2.1.1",
     "karma-jasmine": "^4.0.1",
     "karma-requirejs": "^1.1.0",
     "karma-sourcemap-loader": "^0.3.8",
     "prettier": "2.1.1",
     "requirejs": "^2.3.6",
-    "rollup": "^2.33.1",
-    "terser": "^5.3.8",
-    "tslib": "^2.0.1",
-    "typescript": "4.0.5"
+    "rollup": "^2.56.2",
+    "terser": "^5.7.1",
+    "tslib": "^2.3.0",
+    "typescript": "4.3.5"
   },
   "dependencies": {
-    "@angular/animations": "^11.2.9",
-    "@angular/cdk": "^11.2.8",
-    "@angular/common": "^11.2.9",
-    "@angular/core": "^11.2.9",
-    "@angular/forms": "^11.2.9",
-    "@angular/localize": "^11.2.9",
+    "@angular/animations": "^12.2.0",
+    "@angular/cdk": "^12.2.0",
+    "@angular/common": "^12.2.0",
+    "@angular/core": "^12.2.0",
+    "@angular/forms": "^12.2.0",
+    "@angular/localize": "^12.2.0",
     "@angular/material": "^11.2.8",
-    "@angular/platform-browser": "^11.2.9",
-    "@angular/platform-browser-dynamic": "^11.2.9",
-    "@angular/router": "^11.2.9",
-    "@ngrx/effects": "^9.2.0",
-    "@ngrx/store": "^9.2.0",
+    "@angular/platform-browser": "^12.2.0",
+    "@angular/platform-browser-dynamic": "^12.2.0",
+    "@angular/router": "^12.2.0",
+    "@ngrx/effects": "^12.3.0",
+    "@ngrx/store": "^12.3.0",
     "@polymer/decorators": "^3.0.0",
     "@polymer/iron-behaviors": "^3.0.1",
     "@polymer/iron-collapse": "^3.0.1",
@@ -110,24 +110,24 @@
     "@polymer/paper-toolbar": "^3.0.1",
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "^3.4.1",
-    "@tensorflow/tfjs": "^2.3.0",
-    "@tensorflow/tfjs-backend-cpu": "^3.4.0",
-    "@tensorflow/tfjs-backend-webgl": "^3.4.0",
-    "@tensorflow/tfjs-core": "^3.4.0",
-    "@vaadin/vaadin-grid": "^5.6.6",
+    "@tensorflow/tfjs": "3.4.0",
+    "@tensorflow/tfjs-backend-cpu": "3.4.0",
+    "@tensorflow/tfjs-backend-webgl": "3.4.0",
+    "@tensorflow/tfjs-core": "3.4.0",
+    "@vaadin/vaadin-grid": "^20.0.2",
     "d3": "5.7.0",
     "dagre": "^0.8.5",
     "lodash": "^4.17.19",
-    "marked": "^2.0.0",
-    "monaco-editor-core": "^0.20.0",
-    "monaco-languages": "^1.10.0",
-    "ngx-color-picker": "^10.1.0",
+    "marked": "^2.1.3",
+    "monaco-editor-core": "^0.26.0",
+    "monaco-languages": "^2.6.0",
+    "ngx-color-picker": "^11.0.0",
     "numeric": "^1.2.6",
     "plottable": "^3.9.0",
-    "rxjs": "7.0.0-beta.0",
-    "three": "~0.125.0",
+    "rxjs": "^7.3.0",
+    "three": "~0.131.3",
     "umap-js": "^1.3.2",
     "web-animations-js": "^2.3.2",
-    "zone.js": "^0.10.2"
+    "zone.js": "^0.11.4"
   }
 }

tensorboard/components/polymer/legacy_class.ts

@@ -13,4 +13,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-export * from '@polymer/polymer/lib/legacy/class';
+import {mixinBehaviors as mixinBehaviorsLib} from '@polymer/polymer/lib/legacy/class';
+
+// Improve typing of the mixinBehavior which otherwise throws type error
+// violently.
+// The main difference is the return type:
+//   `any` -> `new () => T`.
+export function mixinBehaviors<T>(
+  behaviors: object | object[],
+  klass: {new (): T}
+): new () => T {
+  return mixinBehaviorsLib(behaviors, klass);
+}

tensorboard/plugins/mesh/tf_mesh_dashboard/BUILD

@@ -27,6 +27,7 @@ tf_ts_library(
         "@npm//@polymer/polymer",
         "@npm//@types/d3",
         "@npm//@types/lodash",
+        "@npm//@types/three",
         "@npm//d3",
         "@npm//lodash",
         "@npm//three",

tensorboard/webapp/alert/views/alert_snackbar_container.ts

@@ -37,7 +37,7 @@ import {AlertInfo} from '../types';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AlertSnackbarContainer implements OnInit, OnDestroy {
-  private readonly ngUnsubscribe = new Subject();
+  private readonly ngUnsubscribe = new Subject<void>();
 
   constructor(
     private readonly store: Store<State>,

tensorboard/webapp/app_routing/route_contexted_reducer_helper.ts

@@ -104,63 +104,71 @@ export function createRouteContextedState<
   type FullState = RouteContextedState<RoutefulState, NonRoutefulState>;
   const keys = Object.keys(routefulInitialState) as Array<keyof RoutefulState>;
 
-  const initialState = {
+  const initialState: FullState = {
     ...routefulInitialState,
     ...nonRoutefulInitialState,
     privateRouteContextedState: {},
-  } as FullState;
-
-  const reducers = createReducer<FullState>(
-    initialState,
-    on(navigated, (state, {before, after}) => {
-      const afterRouteId = getRouteId(after.routeKind, after.params);
-      const beforeRouteId = before
-        ? getRouteId(before.routeKind, before.params)
-        : null;
-
-      // When the routeIds are the same, do not modify the state.
-      if (beforeRouteId === afterRouteId) {
-        return state;
-      }
+  };
 
-      let nextContextedStateCache = {...state.privateRouteContextedState};
+  // Although we are supposed to type S as `FullState`, it throws type error
+  // when specifying a reducer that takes ActionReducer<FullState, Action>.
+  // We workaround it with `any`.
+  const reducers = createReducer<any>(
+    initialState as any,
+    on(
+      navigated,
+      (state: FullState, {before, after}): FullState => {
+        const afterRouteId = getRouteId(after.routeKind, after.params);
+        const beforeRouteId = before
+          ? getRouteId(before.routeKind, before.params)
+          : null;
 
-      if (beforeRouteId) {
-        const currRoutefulState = {} as RoutefulState;
-        for (const key of keys) {
-          currRoutefulState[key] = state[key];
+        // When the routeIds are the same, do not modify the state.
+        if (beforeRouteId === afterRouteId) {
+          return state;
         }
-        nextContextedStateCache = {
-          ...nextContextedStateCache,
-          [beforeRouteId]: currRoutefulState,
-        };
-      }
 
-      let nextRoutefulState =
-        state.privateRouteContextedState &&
-        state.privateRouteContextedState[afterRouteId]
-          ? state.privateRouteContextedState[afterRouteId]
-          : null;
+        let nextContextedStateCache: {
+          [routeId: string]: RoutefulState;
+        } = {...state.privateRouteContextedState};
+
+        if (beforeRouteId) {
+          const currRoutefulState = {} as RoutefulState;
+          for (const key of keys) {
+            currRoutefulState[key] = (state as RoutefulState)[key];
+          }
+          nextContextedStateCache = {
+            ...nextContextedStateCache,
+            [beforeRouteId]: currRoutefulState,
+          };
+        }
 
-      // Set `nextRoutefulState` to the initialState when `before`
-      // is non-empty. On the initial load when `before` is null, the
-      // `state` can already have values from bootstraping deeplinks and it
-      // should not overwrite the values.
-      if (beforeRouteId && nextRoutefulState === null) {
-        nextRoutefulState = routefulInitialState;
-      }
+        let nextRoutefulState =
+          state.privateRouteContextedState &&
+          state.privateRouteContextedState[afterRouteId]
+            ? state.privateRouteContextedState[afterRouteId]
+            : null;
+
+        // Set `nextRoutefulState` to the initialState when `before`
+        // is non-empty. On the initial load when `before` is null, the
+        // `state` can already have values from bootstraping deeplinks and it
+        // should not overwrite the values.
+        if (beforeRouteId && nextRoutefulState === null) {
+          nextRoutefulState = routefulInitialState;
+        }
 
-      let nextFullState = {
-        ...state,
-        ...nextRoutefulState,
-        privateRouteContextedState: nextContextedStateCache,
-      };
+        const nextFullState: FullState = {
+          ...state,
+          ...nextRoutefulState,
+          privateRouteContextedState: nextContextedStateCache,
+        };
 
-      if (onRouteIdChanged) {
-        return onRouteIdChanged(nextFullState, after);
+        if (onRouteIdChanged) {
+          return onRouteIdChanged(nextFullState, after);
+        }
+        return nextFullState;
       }
-      return nextFullState;
-    })
+    )
   );
 
   return {

tensorboard/webapp/core/core_module.ts

@@ -31,8 +31,6 @@ import {
 } from './store/core_initial_state_provider';
 import {CORE_FEATURE_KEY} from './store/core_types';
 
-/** @typehack */ import * as _typeHackNgrxStore from '@ngrx/store';
-
 export function getSideBarWidthSetting() {
   return createSelector<State, number, PersistableSettings>(
     getSideBarWidthInPercent,

tensorboard/webapp/core/effects/core_effects_test.ts

@@ -15,7 +15,6 @@ limitations under the License.
 import {
   discardPeriodicTasks,
   fakeAsync,
-  flush,
   TestBed,
   tick,
 } from '@angular/core/testing';
@@ -462,6 +461,8 @@ describe('core_effects', () => {
         polymerRunsFetchRequested(),
         polymerRunsFetchRequested(),
       ]);
+
+      discardPeriodicTasks();
     }));
 
     it(

tensorboard/webapp/feature_flag/effects/feature_flag_effects.ts

@@ -26,7 +26,6 @@ import {State} from '../store/feature_flag_types';
 /** @typehack */ import * as _typeHackRxjs from 'rxjs';
 /** @typehack */ import * as _typeHackNgrx from '@ngrx/store/src/models';
 /** @typehack */ import * as _typeHackNgrxEffects from '@ngrx/effects';
-/** @typehack */ import * as _typeHackNgrxStore from '@ngrx/store';
 
 const effectsInitialized = createAction('[FEATURE FLAG] Effects Init');
 

tensorboard/webapp/feature_flag/store/feature_flag_selectors.ts

@@ -22,8 +22,6 @@ import {
   State,
 } from './feature_flag_types';
 
-/** @typehack */ import * as _typeHackNgrxStore from '@ngrx/store';
-
 const selectFeatureFlagState = createFeatureSelector<State, FeatureFlagState>(
   FEATURE_FLAG_FEATURE_KEY
 );

tensorboard/webapp/hparams/_redux/hparams_selectors.ts

@@ -23,8 +23,6 @@ import {
   getIdFromExperimentIds,
 } from './utils';
 
-/** @typehack */ import * as _typeHackNgrxStoreStore from '@ngrx/store/store';
-
 const getHparamsState = createFeatureSelector<State, HparamsState>(
   HPARAMS_FEATURE_KEY
 );

tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_container.ts

@@ -67,7 +67,7 @@ export class DataDownloadDialogContainer {
       store.select(getCardMetadata, data.cardId),
       this.selectedRunId$,
     ]).pipe(
-      map(([metadata, selectedRunId]) => {
+      map(([metadata, selectedRunId]): string | null => {
         if (!metadata || !selectedRunId) return null;
         return dataSource.downloadUrl(
           metadata.plugin,
@@ -76,13 +76,13 @@ export class DataDownloadDialogContainer {
           'csv'
         );
       }),
-      startWith(null)
+      startWith<string | null>(null)
     );
     this.downloadUrlJson$ = combineLatest([
       store.select(getCardMetadata, data.cardId),
       this.selectedRunId$,
     ]).pipe(
-      map(([metadata, selectedRunId]) => {
+      map(([metadata, selectedRunId]): string | null => {
         if (!metadata || !selectedRunId) return null;
         return dataSource.downloadUrl(
           metadata.plugin,
@@ -91,7 +91,7 @@ export class DataDownloadDialogContainer {
           'json'
         );
       }),
-      startWith(null)
+      startWith<string | null>(null)
     );
 
     this.runs$ = combineLatest([

tensorboard/webapp/metrics/views/card_renderer/image_card_container.ts

@@ -126,7 +126,7 @@ export class ImageCardContainer implements CardRenderer, OnInit, OnDestroy {
   private readonly actualSizeUiToggleSubject = new BehaviorSubject(
     this.actualSizeUiToggled
   );
-  private readonly ngUnsubscribe = new Subject();
+  private readonly ngUnsubscribe = new Subject<void>();
 
   private isImageCardMetadata(
     cardMetadata: CardMetadata