[DebuggerV2] Add components to show source code

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/BUILD

@@ -27,6 +27,7 @@ ng_module(
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store:types",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/inactive",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline",
         "//tensorboard/webapp/plugins:plugin_registry",
@@ -54,6 +55,7 @@ tf_ts_library(
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/inactive",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
@@ -74,7 +76,9 @@ tf_ng_web_test_suite(
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/effects:debugger_effects_test_lib",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store:debugger_store_test_lib",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts:alerts_container_test_lib",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_code:source_code_container_test_lib",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_code:source_code_test_lib",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files:source_files_container_test_lib",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline:timeline_test",
     ],
 )

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_component.css

@@ -14,6 +14,9 @@ limitations under the License.
 ==============================================================================*/
 
 .bottom-section {
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  height: 353px;
+  padding-top: 6px;
   width: 100%;
 }
 
@@ -28,10 +31,16 @@ tf-debugger-v2-alerts {
   width: 200px;
 }
 
+tf-debugger-v2-source-files {
+  display: inline-block;
+  height: 100%;
+  vertical-align: top;
+  width: 70%;
+}
+
 tf-debugger-v2-stack-trace {
-  /* TODO(cais): Once code-editor component is added to the left,
-     replace the `float` with a linear layout. */
-  float: right;
+  display: inline-block;
+  width: 30%;
 }
 
 tf-debugger-v2-timeline {

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_component.ng.html

@@ -26,6 +26,7 @@
     </div>
 
     <div class="bottom-section">
+      <tf-debugger-v2-source-files></tf-debugger-v2-source-files>
       <tf-debugger-v2-stack-trace></tf-debugger-v2-stack-trace>
     </div>
     <!-- TODO(cais): Add more elements, such as graph, source code, etc.-->

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_container_test.ts

@@ -27,6 +27,7 @@ import {
   executionScrollLeft,
   executionScrollRight,
   executionScrollToIndex,
+  sourceLineFocused,
 } from './actions';
 import {DebuggerComponent} from './debugger_component';
 import {DebuggerContainer} from './debugger_container';
@@ -50,6 +51,7 @@ import {ExecutionDataContainer} from './views/execution_data/execution_data_cont
 import {ExecutionDataModule} from './views/execution_data/execution_data_module';
 import {InactiveModule} from './views/inactive/inactive_module';
 import {TimelineContainer} from './views/timeline/timeline_container';
+import {SourceFilesModule} from './views/source_files/source_files_module';
 import {StackTraceContainer} from './views/stack_trace/stack_trace_container';
 import {StackTraceModule} from './views/stack_trace/stack_trace_module';
 import {TimelineModule} from './views/timeline/timeline_module';
@@ -68,6 +70,7 @@ describe('Debugger Container', () => {
         CommonModule,
         ExecutionDataModule,
         InactiveModule,
+        SourceFilesModule,
         StackTraceModule,
         TimelineModule,
       ],
@@ -958,13 +961,13 @@ describe('Debugger Container', () => {
       );
       expect(linenoElements.length).toEqual(3);
       expect(linenoElements[0].nativeElement.innerText).toEqual(
-        `Line ${stackFrame0[2]}:`
+        `Line ${stackFrame0[2]}`
       );
       expect(linenoElements[1].nativeElement.innerText).toEqual(
-        `Line ${stackFrame1[2]}:`
+        `Line ${stackFrame1[2]}`
       );
       expect(linenoElements[2].nativeElement.innerText).toEqual(
-        `Line ${stackFrame2[2]}:`
+        `Line ${stackFrame2[2]}`
       );
 
       const functionElements = fixture.debugElement.queryAll(
@@ -1022,5 +1025,63 @@ describe('Debugger Container', () => {
       );
       expect(stackFrameContainers.length).toEqual(0);
     });
+
+    it('Emits sourceLineFocused when line number is clicked', () => {
+      const fixture = TestBed.createComponent(StackTraceContainer);
+      fixture.detectChanges();
+
+      const stackFrame0 = createTestStackFrame();
+      const stackFrame1 = createTestStackFrame();
+      const stackFrame2 = createTestStackFrame();
+      store.setState(
+        createState(
+          createDebuggerState({
+            executions: {
+              numExecutionsLoaded: {
+                state: DataLoadState.LOADED,
+                lastLoadedTimeInMs: 111,
+              },
+              executionDigestsLoaded: {
+                state: DataLoadState.LOADED,
+                lastLoadedTimeInMs: 222,
+                pageLoadedSizes: {0: 100},
+                numExecutions: 1000,
+              },
+              executionDigests: {},
+              pageSize: 100,
+              displayCount: 50,
+              scrollBeginIndex: 90,
+              focusIndex: 98,
+              executionData: {
+                98: createTestExecutionData({
+                  stack_frame_ids: ['a0', 'a1', 'a2'],
+                }),
+              },
+            },
+            stackFrames: {
+              a0: stackFrame0,
+              a1: stackFrame1,
+              a2: stackFrame2,
+            },
+          })
+        )
+      );
+      fixture.detectChanges();
+
+      const linenoElements = fixture.debugElement.queryAll(
+        By.css('.stack-frame-lineno')
+      );
+      linenoElements[1].nativeElement.click();
+      fixture.detectChanges();
+      expect(dispatchSpy).toHaveBeenCalledWith(
+        sourceLineFocused({
+          sourceLineSpec: {
+            host_name: stackFrame1[0],
+            file_path: stackFrame1[1],
+            lineno: stackFrame1[2],
+          },
+        })
+      );
+    });
   });
 });

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_module.ts

@@ -26,6 +26,7 @@ import {reducers} from './store/debugger_reducers';
 import {DEBUGGER_FEATURE_KEY} from './store/debugger_types';
 import {AlertsModule} from './views/alerts/alerts_module';
 import {InactiveModule} from './views/inactive/inactive_module';
+import {SourceFilesModule} from './views/source_files/source_files_module';
 import {StackTraceModule} from './views/stack_trace/stack_trace_module';
 import {TimelineModule} from './views/timeline/timeline_module';
 import {PluginRegistryModule} from '../../../webapp/plugins/plugin_registry_module';
@@ -36,6 +37,7 @@ import {PluginRegistryModule} from '../../../webapp/plugins/plugin_registry_modu
     AlertsModule,
     CommonModule,
     InactiveModule,
+    SourceFilesModule,
     StackTraceModule,
     Tfdbg2ServerDataSourceModule,
     TimelineModule,

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store/debugger_selectors.ts

@@ -28,6 +28,7 @@ import {
   LoadState,
   SourceFileContent,
   SourceFileSpec,
+  SourceLineSpec,
   StackFrame,
   StackFramesById,
   State,
@@ -331,3 +332,10 @@ export const getFocusedSourceFileContent = createSelector(
     return state.sourceCode.fileContents[fileIndex] || null;
   }
 );
+
+export const getFocusedSourceLineSpec = createSelector(
+  selectDebuggerState,
+  (state: DebuggerState): SourceLineSpec | null => {
+    return state.sourceCode.focusLineSpec;
+  }
+);

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts/BUILD

@@ -42,6 +42,7 @@ tf_ts_library(
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/testing",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/inactive",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_files",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/stack_trace",
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline",
         "//tensorboard/webapp/angular:expect_angular_core_testing",

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/alerts/alerts_container_test.ts

@@ -35,6 +35,7 @@ import {AlertsContainer} from './alerts_container';
 import {AlertsModule} from './alerts_module';
 import {ExecutionDataModule} from '../execution_data/execution_data_module';
 import {InactiveModule} from '../inactive/inactive_module';
+import {SourceFilesModule} from '../source_files/source_files_module';
 import {StackTraceModule} from '../stack_trace/stack_trace_module';
 import {TimelineModule} from '../timeline/timeline_module';
 
@@ -52,6 +53,7 @@ describe('Alerts Container', () => {
         CommonModule,
         ExecutionDataModule,
         InactiveModule,
+        SourceFilesModule,
         StackTraceModule,
         TimelineModule,
       ],

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_code/BUILD

@@ -1,9 +1,29 @@
 package(default_visibility = ["//tensorboard:internal"])
 
+load("@npm_angular_bazel//:index.bzl", "ng_module")
 load("//tensorboard/defs:defs.bzl", "tf_ts_library")
 
 licenses(["notice"])  # Apache 2.0
 
+ng_module(
+    name = "source_code",
+    srcs = [
+        "source_code_component.ts",
+        "source_code_container.ts",
+        "source_code_module.ts",
+    ],
+    assets = [
+        "source_code_component.css",
+        "source_code_component.ng.html",
+    ],
+    deps = [
+        ":load_monaco",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//rxjs",
+    ],
+)
+
 tf_ts_library(
     name = "load_monaco",
     srcs = [
@@ -27,3 +47,34 @@ tf_ts_library(
         "@npm//@types/requirejs",
     ],
 )
+
+tf_ts_library(
+    name = "testing",
+    srcs = [
+        "testing.ts",
+    ],
+    deps = [
+        ":load_monaco",
+        "@npm//@types/jasmine",
+    ],
+)
+
+tf_ts_library(
+    name = "source_code_container_test_lib",
+    testonly = True,
+    srcs = [
+        "source_code_container_test.ts",
+    ],
+    tsconfig = "//:tsconfig-test",
+    deps = [
+        ":load_monaco",
+        ":source_code",
+        ":testing",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin:debugger_v2",
+        "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/testing",
+        "//tensorboard/webapp/angular:expect_angular_core_testing",
+        "@npm//@angular/compiler",
+        "@npm//@angular/core",
+        "@npm//@types/jasmine",
+    ],
+)

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_code/source_code_component.css

@@ -0,0 +1,27 @@
+/* Copyright 2020 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.
+==============================================================================*/
+
+.code-viewer-container {
+  height: 100%;
+}
+
+:host ::ng-deep .highlight-gutter {
+  background: rgba(255, 111, 0, 0.7);
+  width: 5px !important;
+}
+
+:host ::ng-deep .highlight-line {
+  background: rgba(255, 111, 0, 0.3);
+}

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/source_code/source_code_component.ng.html

@@ -0,0 +1,18 @@
+<!--
+@license
+Copyright 2020 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.
+-->
+
+<div #codeViewerContainer class="code-viewer-container"></div>