[DebuggerV2] Add basic store support and component for graph execution

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/BUILD

@@ -26,6 +26,7 @@ ng_module(
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store",
         "//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/graph_executions",
         "//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",
@@ -54,6 +55,7 @@ tf_ts_library(
         "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/testing",
         "//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/graph_executions",
         "//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",
@@ -76,6 +78,7 @@ 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/graph_executions:graph_executions_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/actions/debugger_actions.ts

@@ -89,14 +89,14 @@ export const alertTypeFocusToggled = createAction(
 );
 
 /**
- * Actions for the Timeline Component.
+ * Actions related to top-level (eager) execution
  */
 export const numExecutionsRequested = createAction(
-  '[Debugger] Number of Executions Requested'
+  '[Debugger] Number of Top-Level Executions Requested'
 );
 
 export const numExecutionsLoaded = createAction(
-  '[Debugger] Number of Executions Loaded',
+  '[Debugger] Number of Top-Level Executions Loaded',
   props<{numExecutions: number}>()
 );
 
@@ -132,6 +132,18 @@ export const executionDataLoaded = createAction(
   props<ExecutionDataResponse>()
 );
 
+/**
+ * Actions related to intra-graph execution
+ */
+export const numGraphExecutionsRequested = createAction(
+  '[Debugger] Number of Intra-Graph Executions Requested'
+);
+
+export const numGraphExecutionsLoaded = createAction(
+  '[Debugger] Number of Intra-Graph Executions Loaded',
+  props<{numGraphExecutions: number}>()
+);
+
 export const sourceFileListRequested = createAction(
   '[Debugger] Source File List Requested.'
 );

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/data_source/tfdbg2_data_source.ts

@@ -19,6 +19,8 @@ import {
   DebuggerRunListing,
   Execution,
   ExecutionDigest,
+  GraphExecution,
+  GraphExecutionDigest,
   SourceFileSpec,
   StackFrame,
 } from '../store/debugger_types';
@@ -39,6 +41,10 @@ export interface StackFramesResponse {
   stack_frames: StackFrame[];
 }
 
+/**
+ * Response types related to top-level (eager) execution.
+ */
+
 export interface ExecutionDigestsResponse {
   begin: number;
 
@@ -57,6 +63,32 @@ export interface ExecutionDataResponse {
   executions: Execution[];
 }
 
+/**
+ * Response types related to intra-graph execution.
+ */
+
+export interface GraphExecutionDigestsResponse {
+  begin: number;
+
+  end: number;
+
+  num_digests: number;
+
+  graph_execution_digests: GraphExecutionDigest[];
+}
+
+export interface GraphExecutionDataResponse {
+  begin: number;
+
+  end: number;
+
+  graph_executions: GraphExecution[];
+}
+
+/**
+ * Response types related to alerts.
+ */
+
 export interface AlertsResponse {
   begin: number;
 
@@ -76,18 +108,44 @@ export interface AlertsResponse {
 export abstract class Tfdbg2DataSource {
   abstract fetchRuns(): Observable<DebuggerRunListing>;
 
+  /**
+   * Fetch the digest objects for top-level executions.
+   */
   abstract fetchExecutionDigests(
     run: string,
     begin: number,
     end: number
   ): Observable<ExecutionDigestsResponse>;
 
+  /**
+   * Fetch the detailed data objects for top-level executions.
+   */
   abstract fetchExecutionData(
     run: string,
     begin: number,
     end: number
   ): Observable<ExecutionDataResponse>;
 
+  /**
+   * Fetch the digest objects for intra-graph executions.
+   */
+  abstract fetchGraphExecutionDigests(
+    run: string,
+    begin: number,
+    end: number,
+    trace_id?: string
+  ): Observable<GraphExecutionDigestsResponse>;
+
+  /**
+   * Fetch the detailed data objects for top-level executions.
+   */
+  abstract fetchGraphExecutionData(
+    run: string,
+    begin: number,
+    end: number,
+    trace_id?: string
+  ): Observable<GraphExecutionDataResponse>;
+
   /**
    * Fetch the list of source-code files that the debugged program involves.
    *
@@ -171,6 +229,52 @@ export class Tfdbg2HttpServerDataSource implements Tfdbg2DataSource {
     );
   }
 
+  fetchGraphExecutionDigests(
+    run: string,
+    begin: number,
+    end: number,
+    trace_id?: string
+  ) {
+    if (trace_id !== undefined) {
+      throw new Error(
+        'trace_id is not implemented for fetchGraphExecutionDigests() yet'
+      );
+    }
+    return this.http.get<GraphExecutionDigestsResponse>(
+      this.httpPathPrefix + '/graph_execution/digests',
+      {
+        params: {
+          run,
+          begin: String(begin),
+          end: String(end),
+        },
+      }
+    );
+  }
+
+  fetchGraphExecutionData(
+    run: string,
+    begin: number,
+    end: number,
+    trace_id?: string
+  ) {
+    if (trace_id !== undefined) {
+      throw new Error(
+        'trace_id is not implemented for fetchGraphExecutionData() yet'
+      );
+    }
+    return this.http.get<GraphExecutionDataResponse>(
+      this.httpPathPrefix + '/graph_execution/data',
+      {
+        params: {
+          run,
+          begin: String(begin),
+          end: String(end),
+        },
+      }
+    );
+  }
+
   fetchSourceFileList(run: string): Observable<SourceFileListResponse> {
     return this.http.get<SourceFileListResponse>(
       this.httpPathPrefix + '/source_files/list',

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_component.css

@@ -21,14 +21,23 @@ limitations under the License.
 }
 
 .top-section {
+  height: 360px;
+  padding: 6px 0;
   width: 100%;
 }
 
 tf-debugger-v2-alerts {
   display: inline-block;
-  height: 360px;
+  height: 100%;
   vertical-align: top;
-  width: 200px;
+  width: 15%;
+}
+
+tf-debugger-v2-graph-executions {
+  display: inline-block;
+  height: 100%;
+  vertical-align: top;
+  width: 30%;
 }
 
 tf-debugger-v2-source-files {
@@ -45,7 +54,7 @@ tf-debugger-v2-stack-trace {
 
 tf-debugger-v2-timeline {
   display: inline-block;
-  height: 360px;
+  height: 100%;
   vertical-align: top;
-  width: 800px;
+  width: 55%;
 }

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

@@ -23,12 +23,13 @@
     <div class="top-section">
       <tf-debugger-v2-alerts></tf-debugger-v2-alerts>
       <tf-debugger-v2-timeline></tf-debugger-v2-timeline>
+      <tf-debugger-v2-graph-executions></tf-debugger-v2-graph-executions>
     </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.-->
+    <!-- TODO(cais): Add more elements, such as graph structure etc.-->
   </ng-template>
 </div>

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_container_test.ts

@@ -49,6 +49,7 @@ import {
 import {AlertsModule} from './views/alerts/alerts_module';
 import {ExecutionDataContainer} from './views/execution_data/execution_data_container';
 import {ExecutionDataModule} from './views/execution_data/execution_data_module';
+import {GraphExecutionsModule} from './views/graph_executions/graph_executions_module';
 import {InactiveModule} from './views/inactive/inactive_module';
 import {TimelineContainer} from './views/timeline/timeline_container';
 import {SourceFilesModule} from './views/source_files/source_files_module';
@@ -69,6 +70,7 @@ describe('Debugger Container', () => {
         AlertsModule,
         CommonModule,
         ExecutionDataModule,
+        GraphExecutionsModule,
         InactiveModule,
         SourceFilesModule,
         StackTraceModule,

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/debugger_module.ts

@@ -25,6 +25,7 @@ import {DebuggerEffects} from './effects';
 import {reducers} from './store/debugger_reducers';
 import {DEBUGGER_FEATURE_KEY} from './store/debugger_types';
 import {AlertsModule} from './views/alerts/alerts_module';
+import {GraphExecutionsModule} from './views/graph_executions/graph_executions_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';
@@ -36,6 +37,7 @@ import {PluginRegistryModule} from '../../../webapp/plugins/plugin_registry_modu
   imports: [
     AlertsModule,
     CommonModule,
+    GraphExecutionsModule,
     InactiveModule,
     SourceFilesModule,
     StackTraceModule,