Merge pull request #7 from tensorflow/backendselector

[debugger] Add backend and version selector

Author: jinjingforever

toolings/tfjs-debugger/package.json

@@ -14,19 +14,23 @@
     "@angular/platform-browser": "~13.0.0",
     "@angular/platform-browser-dynamic": "~13.0.0",
     "@angular/router": "~13.0.0",
-    "@ngrx/store": "~12.5.1",
-    "@ngrx/router-store": "~12.5.1",
-    "@ngrx/store-devtools": "~12.5.1",
+    "@ngrx/effects": "~13.0.2",
+    "@ngrx/store": "~13.0.2",
+    "@ngrx/router-store": "~13.0.2",
+    "@ngrx/store-devtools": "~13.0.2",
+    "dateformat": "~5.0.2",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "peerDependencies": {},
   "devDependencies": {
     "@angular-devkit/build-angular": "~13.0.1",
+    "@angular/animation": "~4.0.0-beta.8",
     "@angular/cli": "~13.0.1",
     "@angular/compiler-cli": "~13.0.0",
     "@types/jasmine": "~3.8.0",
+    "@types/dateformat": "~5.0.0",
     "@types/node": "^12.11.1",
     "clang-format": "~1.5.0",
     "jasmine-core": "~3.8.0",

toolings/tfjs-debugger/src/app/app/app.component.html

@@ -29,4 +29,7 @@
     <!-- The info graph panel at the right -->
     <info-panel></info-panel>
   </div>
+
+  <!-- Error message panel -->
+  <error-panel></error-panel>
 </div>

toolings/tfjs-debugger/src/app/app/app.component.scss

@@ -15,7 +15,12 @@
  * =============================================================================
  */
 
+@use '../../variables.scss' as var;
+
+$error-msg-container-width: 400px;
+
 .container {
+  position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -26,4 +31,11 @@
     flex-grow: 1;
     overflow: hidden;
   }
+
+  error-panel {
+    position: absolute;
+    bottom: var.$spacing-6x;
+    left: calc(50% - $error-msg-container-width / 2);
+    width: $error-msg-container-width;
+  }
 }

toolings/tfjs-debugger/src/app/app/app.component.spec.ts

@@ -16,6 +16,9 @@
  */
 
 import {TestBed} from '@angular/core/testing';
+import {StoreModule} from '@ngrx/store';
+
+import {mainReducer} from '../store/reducers';
 
 import {AppComponent} from './app.component';
 
@@ -24,6 +27,11 @@ describe('AppComponent', () => {
     await TestBed
         .configureTestingModule({
           declarations: [AppComponent],
+          imports: [
+            StoreModule.forRoot({
+              main: mainReducer,
+            }),
+          ],
         })
         .compileComponents();
   });
@@ -33,10 +41,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it(`should have as title 'tfjs-debugger'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('tfjs-debugger');
-  });
 });

toolings/tfjs-debugger/src/app/app/app.component.ts

@@ -15,14 +15,25 @@
  * =============================================================================
  */
 
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {Store} from '@ngrx/store';
+
+import {fetchTfjsReleases} from '../store/actions';
+import {AppState} from '../store/state';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {
-  title = 'tfjs-debugger';
+export class AppComponent implements OnInit {
+  constructor(
+      private readonly store: Store<AppState>,
+  ) {}
+
+  ngOnInit() {
+    // Start fetching TFJS releases.
+    this.store.dispatch(fetchTfjsReleases());
+  }
 }

toolings/tfjs-debugger/src/app/app/app.module.ts

@@ -15,19 +15,23 @@
  * =============================================================================
  */
 
+import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';
+import {EffectsModule} from '@ngrx/effects';
 import {routerReducer, StoreRouterConnectingModule} from '@ngrx/router-store';
 import {StoreModule} from '@ngrx/store';
 import {StoreDevtoolsModule} from '@ngrx/store-devtools';
 
 import {AppBarModule} from '../components/app_bar/app_bar.module';
 import {ConfigsPanelModule} from '../components/configs_panel/configs_panel.module';
+import {ErrorPanelModule} from '../components/error_panel/error_panel.module';
 import {GraphPaneModule} from '../components/graph_panel/graph_panel.module';
 import {InfoPanelModule} from '../components/info_panel/info_panel.module';
-import {configsReducer} from '../store/reducers';
+import {GithubEffects} from '../store/effects';
+import {mainReducer} from '../store/reducers';
 
 import {AppComponent} from './app.component';
 
@@ -39,11 +43,14 @@ import {AppComponent} from './app.component';
     BrowserModule,
     BrowserAnimationsModule,
     ConfigsPanelModule,
+    EffectsModule.forRoot([GithubEffects]),
+    ErrorPanelModule,
+    HttpClientModule,
     InfoPanelModule,
     GraphPaneModule,
     StoreModule.forRoot({
       router: routerReducer,
-      configs: configsReducer,
+      main: mainReducer,
     }),
     RouterModule.forRoot([
       {path: '', component: AppComponent},

toolings/tfjs-debugger/src/app/common/types.ts

@@ -20,6 +20,8 @@ export enum UrlParamKey {
   SELECTED_MODEL_TYPE_ID = 'mid',
   TFJS_MODEL_URL = 'tfjsmu',
   SELECTED_INPUT_TYPE_ID = 'iid',
+  SELECTED_BACKEND_ID = 'bi',
+  SELECTED_BACKEND_VERSION = 'bv',
 }
 
 /** Valid config index. */

toolings/tfjs-debugger/src/app/components/backend_selector/backend_selector.component.html

@@ -0,0 +1,35 @@
+<!-- Copyright 2021 Google LLC. 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.
+==============================================================================
+-->
+
+<div class="container">
+  <!-- Drop down select -->
+  <mat-form-field appearance="outline" floatLabel="never">
+    <mat-select
+        [(value)]="selectedBackendId"
+        (selectionChange)="handleSelectionChange($event)">
+      <mat-option *ngFor="let option of backends"
+          [value]="option.id">
+        {{option.label}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <!-- Backend version selector -->
+  <div class="extra-components-container">
+    <div class="title">Version</div>
+    <backend-version-selector [configIndex]="configIndex"></backend-version-selector>
+  </div>
+</div>

toolings/tfjs-debugger/src/app/components/backend_selector/backend_selector.component.scss

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC. 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.
+ * =============================================================================
+ */
+
+@use '../../../variables' as var;
+
+.container {
+  mat-form-field {
+    width: 100%;
+  }
+
+  .title {
+    margin-top: var.$spacing-1x;
+    color: var.$grey-600;
+    font-size: var.$font-size-smaller;
+    line-height: 11px;
+  }
+}