Skip to content

Commit f7f1bea

Browse files
pyu10055pyu10055
authored
Merge pull request #4 from tensorflow/debugger-app-structure
[debugger] Add basic UI structure and partially implement model type selector
2 parents bf8843f + 230a73a commit f7f1bea

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1474
-87
lines changed

‎.github/workflows/deploy-debugger-prod.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ name: Deploy TFJS Debugger Site to Live
33
on:
44
push:
55
branches:
6-
- master
6+
- main
77
paths:
88
- 'toolings/tfjs-debugger/**'
99

‎toolings/tfjs-debugger/.stylelintrc.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
],
1313
"ignoreFiles": ["src/theme.scss", "node_modules/**/*.*"],
1414
"rules": {
15-
"string-quotes": "single"
15+
"string-quotes": "single",
16+
"selector-pseudo-element-no-unknown": [true, {
17+
"ignorePseudoElements": ["ng-deep"]
18+
}]
1619
}
1720
}

‎toolings/tfjs-debugger/package.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,5 +56,13 @@
5656
"test-ci": "ng test --karma-config karma-ci.conf.js",
5757
"deploy-firebase": "./scripts/deploy-to-firebase.sh",
5858
"deploy-firebase-dev": "./scripts/deploy-to-firebase.sh --dev"
59+
},
60+
"resolutions": {
61+
"set-value": "^4.0.1",
62+
"trim-newlines": "^3.0.1",
63+
"glob-parent": "^5.1.2",
64+
"trim": "^0.0.3",
65+
"yargs-parser": "^13.1.2",
66+
"ansi-regex": "^5.0.1"
5967
}
6068
}

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,18 @@
1515
-->
1616

1717
<div class="container">
18-
This is {{title}}
18+
<!-- The app bar at the top -->
19+
<app-bar></app-bar>
20+
21+
<!-- Content under app bar -->
22+
<div class="content">
23+
<!-- The config panel at the left -->
24+
<configs-panel></configs-panel>
25+
26+
<!-- The model graph panel at the center -->
27+
<graph-panel></graph-panel>
28+
29+
<!-- The info graph panel at the right -->
30+
<info-panel></info-panel>
31+
</div>
1932
</div>

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,13 @@
1717

1818
.container {
1919
display: flex;
20-
align-items: center;
21-
justify-content: center;
20+
flex-direction: column;
2221
height: 100%;
22+
overflow: hidden;
23+
24+
.content {
25+
display: flex;
26+
flex-grow: 1;
27+
overflow: hidden;
28+
}
2329
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,16 @@
1717

1818
import {NgModule} from '@angular/core';
1919
import {BrowserModule} from '@angular/platform-browser';
20+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
2021
import {RouterModule} from '@angular/router';
2122
import {routerReducer, StoreRouterConnectingModule} from '@ngrx/router-store';
2223
import {StoreModule} from '@ngrx/store';
2324
import {StoreDevtoolsModule} from '@ngrx/store-devtools';
2425

26+
import {AppBarModule} from '../components/app_bar/app_bar.module';
27+
import {ConfigsPanelModule} from '../components/configs_panel/configs_panel.module';
28+
import {GraphPaneModule} from '../components/graph_panel/graph_panel.module';
29+
import {InfoPanelModule} from '../components/info_panel/info_panel.module';
2530
import {configsReducer} from '../store/reducers';
2631

2732
import {AppComponent} from './app.component';
@@ -30,7 +35,12 @@ import {AppComponent} from './app.component';
3035
@NgModule({
3136
declarations: [AppComponent],
3237
imports: [
38+
AppBarModule,
3339
BrowserModule,
40+
BrowserAnimationsModule,
41+
ConfigsPanelModule,
42+
InfoPanelModule,
43+
GraphPaneModule,
3444
StoreModule.forRoot({
3545
router: routerReducer,
3646
configs: configsReducer,

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* @license
3+
* Copyright 2021 Google LLC. All Rights Reserved.
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
* =============================================================================
16+
*/
17+
18+
/** URL parameter keys. */
19+
export enum UrlParamKey {
20+
SELECTED_MODEL_TYPE_ID = 'mid',
21+
TFJS_MODEL_URL = 'tfjsmu',
22+
}
23+
24+
/** Valid config index. */
25+
export type ConfigIndex = 0|1;

‎toolings/tfjs-debugger/src/app/common/utils.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* @license
3+
* Copyright 2021 Google LLC. All Rights Reserved.
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
* =============================================================================
16+
*/
17+
18+
import {UrlParamKey} from './types';
19+
20+
const CONFIG_INDEX_SEP = '__';
21+
22+
/**
23+
* A helper function to append config index (0 or 1) to the given url parameter
24+
* key.
25+
*/
26+
export function appendConfigIndexToKey(paramKey: UrlParamKey, index: number) {
27+
return `${paramKey}${CONFIG_INDEX_SEP}${index}`;
28+
}

‎toolings/tfjs-debugger/src/app/components/app_bar/app_bar.component.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!-- Copyright 2021 Google LLC. All Rights Reserved.
2+
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
7+
http://www.apache.org/licenses/LICENSE-2.0
8+
9+
Unless required by applicable law or agreed to in writing, software
10+
distributed under the License is distributed on an "AS IS" BASIS,
11+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
See the License for the specific language governing permissions and
13+
limitations under the License.
14+
==============================================================================
15+
-->
16+
17+
<div class="container">
18+
<!-- App icon and title -->
19+
<div class="app-title-container">
20+
<img class="icon" src="../../../favicon.svg">
21+
<div class="title">TFJS Debugger</div>
22+
</div>
23+
24+
<!-- Action buttons -->
25+
<div class="btns-container">
26+
<button mat-flat-button color="primary">Run</button>
27+
</div>
28+
</div>

‎toolings/tfjs-debugger/src/app/components/app_bar/app_bar.component.scss

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* @license
3+
* Copyright 2021 Google LLC. All Rights Reserved.
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
* =============================================================================
16+
*/
17+
18+
@use '../../../variables' as var;
19+
20+
.container {
21+
display: flex;
22+
align-items: center;
23+
justify-content: space-between;
24+
height: 64px;
25+
padding: 0 var.$spacing-3x;
26+
overflow: hidden;
27+
border-bottom: 1px solid var.$grey-200;
28+
29+
.app-title-container {
30+
display: flex;
31+
align-items: center;
32+
height: 100%;
33+
34+
.icon {
35+
width: 24px;
36+
margin-right: var.$spacing-3x;
37+
}
38+
39+
.title {
40+
color: var.$grey-800;
41+
font-weight: 700;
42+
font-size: var.$font-size-large;
43+
text-transform: uppercase;
44+
}
45+
}
46+
}

‎toolings/tfjs-debugger/src/app/components/app_bar/app_bar.component.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* @license
3+
* Copyright 2021 Google LLC. All Rights Reserved.
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
* =============================================================================
16+
*/
17+
18+
import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
19+
20+
/**
21+
* The app bar located at the top of the screen that shows the app title and a
22+
* set of action buttons.
23+
*/
24+
@Component({
25+
selector: 'app-bar',
26+
templateUrl: './app_bar.component.html',
27+
styleUrls: ['./app_bar.component.scss'],
28+
changeDetection: ChangeDetectionStrategy.OnPush,
29+
})
30+
export class AppBar implements OnInit {
31+
constructor() {}
32+
33+
ngOnInit() {}
34+
}

‎toolings/tfjs-debugger/src/app/components/app_bar/app_bar.module.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* @license
3+
* Copyright 2021 Google LLC. All Rights Reserved.
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
* =============================================================================
16+
*/
17+
18+
import {CommonModule} from '@angular/common';
19+
import {NgModule} from '@angular/core';
20+
import {MatButtonModule} from '@angular/material/button';
21+
22+
import {AppBar} from './app_bar.component';
23+
24+
@NgModule({
25+
declarations: [
26+
AppBar,
27+
],
28+
imports: [
29+
CommonModule,
30+
MatButtonModule,
31+
],
32+
exports: [
33+
AppBar,
34+
],
35+
})
36+
export class AppBarModule {
37+
}

‎toolings/tfjs-debugger/src/app/components/config_section/config_section.component.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!-- Copyright 2021 Google LLC. All Rights Reserved.
2+
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
7+
http://www.apache.org/licenses/LICENSE-2.0
8+
9+
Unless required by applicable law or agreed to in writing, software
10+
distributed under the License is distributed on an "AS IS" BASIS,
11+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
See the License for the specific language governing permissions and
13+
limitations under the License.
14+
==============================================================================
15+
-->
16+
17+
<div class="container">
18+
<!-- Model selector -->
19+
<div class="section">
20+
<div class="title">Model</div>
21+
<model-selector [configIndex]="configIndex"></model-selector>
22+
</div>
23+
</div>

‎toolings/tfjs-debugger/src/app/components/config_section/config_section.component.scss

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* @license
3+
* Copyright 2021 Google LLC. All Rights Reserved.
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
* =============================================================================
16+
*/
17+
18+
@use '../../../variables' as var;
19+
20+
.container {
21+
box-sizing: border-box;
22+
min-height: calc(50% - var.$config-header-height);
23+
padding: var.$spacing-3x var.$spacing-3x;
24+
25+
.section {
26+
.title {
27+
font-weight: 500;
28+
}
29+
}
30+
}

‎toolings/tfjs-debugger/src/app/components/config_section/config_section.component.ts

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/**
2+
* @license
3+
* Copyright 2021 Google LLC. All Rights Reserved.
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
* =============================================================================
16+
*/
17+
18+
import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
19+
import {ConfigIndex} from 'src/app/common/types';
20+
21+
/** A single configuration in the configs panel. */
22+
@Component({
23+
selector: 'config-section',
24+
templateUrl: './config_section.component.html',
25+
styleUrls: ['./config_section.component.scss'],
26+
changeDetection: ChangeDetectionStrategy.OnPush,
27+
})
28+
export class ConfigSection implements OnInit {
29+
@Input() configIndex!: ConfigIndex;
30+
31+
constructor() {}
32+
33+
ngOnInit() {
34+
if (this.configIndex == null) {
35+
throw new Error('configIndex not set');
36+
}
37+
}
38+
}

0 commit comments

Comments
 (0)