├── .bazelrc ├── .bazelversion ├── .gitignore ├── BUILD ├── LICENSE ├── README.md ├── WORKSPACE ├── config.bzl ├── defs ├── BUILD ├── backend_defs.bzl └── defs.bzl ├── demo └── plugins │ └── profile │ └── tpu-training │ └── gke-tpu-b309f56b-rq5s.xplane.pb ├── docs ├── XProf_Explore.ipynb ├── _toc.yaml ├── dcn_collective_stats.md ├── framework_op_stats.md ├── gpu_kernel_stats.md ├── graph_viewer.md ├── hlo_op_profile.md ├── hlo_op_stats.md ├── images │ └── dcn_collective_stats │ │ ├── com-timeline-observed-duration.png │ │ ├── com-timeline-slack-time.png │ │ └── com-timeline-stall-duration.png ├── memory_profile.md ├── memory_viewer.md ├── overview_page.md ├── roofline_analysis.md └── trace_viewer.md ├── frontend ├── BUILD ├── app │ ├── BUILD │ ├── app.ng.html │ ├── app.scss │ ├── app.ts │ ├── app_module.ts │ ├── common │ │ ├── angular │ │ │ └── BUILD │ │ ├── classes │ │ │ ├── BUILD │ │ │ ├── BUILD.b │ │ │ └── throbber.ts │ │ ├── constants │ │ │ ├── BUILD │ │ │ ├── colors.ts │ │ │ ├── constants.ts │ │ │ ├── enums.ts │ │ │ ├── roofline_model_constants.ts │ │ │ └── testing.ts │ │ ├── interfaces │ │ │ ├── BUILD │ │ │ ├── buffer_allocation_info.ts │ │ │ ├── capture_profile.ts │ │ │ ├── chart.ts │ │ │ ├── data_table.ts │ │ │ ├── diagnostics.ts │ │ │ ├── graph_viewer.ts │ │ │ ├── heap_object.ts │ │ │ ├── hlo.jsonpb_decls.d.ts.gz │ │ │ ├── hosts.ts │ │ │ ├── memory_profile.jsonpb_decls.d.ts.gz │ │ │ ├── memory_viewer_preprocess.jsonpb_decls.d.ts │ │ │ ├── navigation_event.ts │ │ │ ├── op_metrics.jsonpb_decls.d.ts │ │ │ ├── op_profile.jsonpb_decls.d.ts │ │ │ ├── roofline_model.ts │ │ │ ├── source_info.jsonpb_decls.d.ts │ │ │ ├── summary_info.ts │ │ │ ├── tool.ts │ │ │ ├── window.ts │ │ │ └── xla_data.jsonpb_decls.d.ts.gz │ │ └── utils │ │ │ ├── BUILD │ │ │ ├── testing.ts │ │ │ └── utils.ts │ ├── components │ │ ├── capture_profile │ │ │ ├── BUILD │ │ │ ├── capture_profile.ng.html │ │ │ ├── capture_profile.scss │ │ │ ├── capture_profile.ts │ │ │ ├── capture_profile_dialog │ │ │ │ ├── BUILD │ │ │ │ ├── capture_profile_dialog.ng.html │ │ │ │ ├── capture_profile_dialog.scss │ │ │ │ ├── capture_profile_dialog.ts │ │ │ │ └── capture_profile_dialog_module.ts │ │ │ └── capture_profile_module.ts │ │ ├── chart │ │ │ ├── BUILD │ │ │ ├── category_diff_table_data_processor.ts │ │ │ ├── category_table_data_processor.ts │ │ │ ├── chart.ts │ │ │ ├── chart_options.ts │ │ │ ├── dashboard │ │ │ │ ├── BUILD │ │ │ │ └── dashboard.ts │ │ │ ├── default_data_provider.ts │ │ │ ├── filter_data_processor.ts │ │ │ ├── org_chart │ │ │ │ ├── BUILD │ │ │ │ ├── org_chart.ng.html │ │ │ │ ├── org_chart.scss │ │ │ │ ├── org_chart.ts │ │ │ │ └── org_chart_module.ts │ │ │ ├── table │ │ │ │ ├── BUILD │ │ │ │ ├── table.ng.html │ │ │ │ ├── table.scss │ │ │ │ ├── table.ts │ │ │ │ └── table_module.ts │ │ │ ├── table_utils.ts │ │ │ └── xy_table_data_processor.ts │ │ ├── controls │ │ │ ├── category_filter │ │ │ │ ├── BUILD │ │ │ │ ├── category_filter.ng.html │ │ │ │ ├── category_filter.scss │ │ │ │ ├── category_filter.ts │ │ │ │ └── category_filter_module.ts │ │ │ ├── download_hlo │ │ │ │ ├── BUILD │ │ │ │ ├── blob_downloader.ts │ │ │ │ ├── download_hlo.ng.html │ │ │ │ ├── download_hlo.scss │ │ │ │ ├── download_hlo.ts │ │ │ │ └── download_hlo_module.ts │ │ │ ├── export_as_csv │ │ │ │ ├── BUILD │ │ │ │ ├── export_as_csv.ng.html │ │ │ │ ├── export_as_csv.scss │ │ │ │ ├── export_as_csv.ts │ │ │ │ └── export_as_csv_module.ts │ │ │ └── string_filter │ │ │ │ ├── BUILD │ │ │ │ ├── string_filter.ng.html │ │ │ │ ├── string_filter.scss │ │ │ │ ├── string_filter.ts │ │ │ │ └── string_filter_module.ts │ │ ├── diagnostics_view │ │ │ ├── BUILD │ │ │ ├── diagnostics_view.ng.html │ │ │ ├── diagnostics_view.scss │ │ │ ├── diagnostics_view.ts │ │ │ └── diagnostics_view_module.ts │ │ ├── empty_page │ │ │ ├── BUILD │ │ │ ├── empty_page.ng.html │ │ │ ├── empty_page.scss │ │ │ ├── empty_page.ts │ │ │ └── empty_page_module.ts │ │ ├── framework_op_stats │ │ │ ├── BUILD │ │ │ ├── flop_rate_chart │ │ │ │ ├── BUILD │ │ │ │ ├── flop_rate_chart.ng.html │ │ │ │ ├── flop_rate_chart.scss │ │ │ │ ├── flop_rate_chart.ts │ │ │ │ └── flop_rate_chart_module.ts │ │ │ ├── framework_op_stats.ng.html │ │ │ ├── framework_op_stats.scss │ │ │ ├── framework_op_stats.ts │ │ │ ├── framework_op_stats_adapter.ts │ │ │ ├── framework_op_stats_module.ts │ │ │ ├── model_properties │ │ │ │ ├── BUILD │ │ │ │ ├── model_properties.ng.html │ │ │ │ ├── model_properties.scss │ │ │ │ ├── model_properties.ts │ │ │ │ └── model_properties_module.ts │ │ │ ├── operations_table │ │ │ │ ├── BUILD │ │ │ │ ├── operations_table.ng.html │ │ │ │ ├── operations_table.scss │ │ │ │ ├── operations_table.ts │ │ │ │ ├── operations_table_data_provider.ts │ │ │ │ └── operations_table_module.ts │ │ │ └── stats_table │ │ │ │ ├── BUILD │ │ │ │ ├── stats_table.ng.html │ │ │ │ ├── stats_table.scss │ │ │ │ ├── stats_table.ts │ │ │ │ ├── stats_table_data_provider.ts │ │ │ │ └── stats_table_module.ts │ │ ├── graph_viewer │ │ │ ├── BUILD │ │ │ ├── graph_config │ │ │ │ ├── BUILD │ │ │ │ ├── graph_config.ng.html │ │ │ │ ├── graph_config.scss │ │ │ │ ├── graph_config.ts │ │ │ │ └── graph_config_module.ts │ │ │ ├── graph_viewer.ng.html │ │ │ ├── graph_viewer.scss │ │ │ ├── graph_viewer.ts │ │ │ ├── graph_viewer_module.ts │ │ │ └── hlo_text_view │ │ │ │ ├── BUILD │ │ │ │ ├── hlo_text_view.ng.html │ │ │ │ ├── hlo_text_view.scss │ │ │ │ ├── hlo_text_view.ts │ │ │ │ └── hlo_text_view_module.ts │ │ ├── hlo_stats │ │ │ ├── BUILD │ │ │ ├── hlo_stats.ng.html │ │ │ ├── hlo_stats.scss │ │ │ ├── hlo_stats.ts │ │ │ └── hlo_stats_module.ts │ │ ├── inference_profile │ │ │ ├── BUILD │ │ │ ├── inference_profile.ng.html │ │ │ ├── inference_profile.scss │ │ │ ├── inference_profile.ts │ │ │ └── inference_profile_module.ts │ │ ├── input_pipeline │ │ │ ├── BUILD │ │ │ ├── analysis_summary │ │ │ │ ├── BUILD │ │ │ │ ├── analysis_summary.ng.html │ │ │ │ ├── analysis_summary.scss │ │ │ │ ├── analysis_summary.ts │ │ │ │ └── analysis_summary_module.ts │ │ │ ├── device_side_analysis_detail │ │ │ │ ├── BUILD │ │ │ │ ├── device_side_analysis_detail.ng.html │ │ │ │ ├── device_side_analysis_detail.scss │ │ │ │ ├── device_side_analysis_detail.ts │ │ │ │ ├── device_side_analysis_detail_data_provider.ts │ │ │ │ └── device_side_analysis_detail_module.ts │ │ │ ├── host_op │ │ │ │ ├── BUILD │ │ │ │ ├── host_op.ng.html │ │ │ │ ├── host_op.scss │ │ │ │ ├── host_op.ts │ │ │ │ └── host_op_module.ts │ │ │ ├── host_side_analysis_detail │ │ │ │ ├── BUILD │ │ │ │ ├── host_side_analysis_detail.ng.html │ │ │ │ ├── host_side_analysis_detail.scss │ │ │ │ ├── host_side_analysis_detail.ts │ │ │ │ ├── host_side_analysis_detail_module.ts │ │ │ │ └── host_side_analysis_detail_table_data_provider.ts │ │ │ ├── input_pipeline.ng.html │ │ │ ├── input_pipeline.scss │ │ │ ├── input_pipeline.ts │ │ │ ├── input_pipeline_common.ts │ │ │ ├── input_pipeline_module.ts │ │ │ └── max_infeed_detail │ │ │ │ ├── BUILD │ │ │ │ ├── max_infeed_detail.ng.html │ │ │ │ ├── max_infeed_detail.scss │ │ │ │ ├── max_infeed_detail.ts │ │ │ │ └── max_infeed_detail_module.ts │ │ ├── kernel_stats │ │ │ ├── BUILD │ │ │ ├── kernel_stats.ng.html │ │ │ ├── kernel_stats.scss │ │ │ ├── kernel_stats.ts │ │ │ ├── kernel_stats_adapter.ts │ │ │ ├── kernel_stats_module.ts │ │ │ └── kernel_stats_table │ │ │ │ ├── BUILD │ │ │ │ ├── kernel_stats_table.ng.html │ │ │ │ ├── kernel_stats_table.scss │ │ │ │ ├── kernel_stats_table.ts │ │ │ │ └── kernel_stats_table_module.ts │ │ ├── main_page │ │ │ ├── BUILD │ │ │ ├── main_page.ng.html │ │ │ ├── main_page.scss │ │ │ ├── main_page.ts │ │ │ └── main_page_module.ts │ │ ├── megascale_stats │ │ │ ├── BUILD │ │ │ ├── megascale_stats.ng.html │ │ │ ├── megascale_stats.scss │ │ │ ├── megascale_stats.ts │ │ │ └── megascale_stats_module.ts │ │ ├── memory_profile │ │ │ ├── BUILD │ │ │ ├── memory_breakdown_table │ │ │ │ ├── BUILD │ │ │ │ ├── memory_breakdown_table.ng.html │ │ │ │ ├── memory_breakdown_table.scss │ │ │ │ ├── memory_breakdown_table.ts │ │ │ │ └── memory_breakdown_table_module.ts │ │ │ ├── memory_profile.ng.html │ │ │ ├── memory_profile.scss │ │ │ ├── memory_profile.ts │ │ │ ├── memory_profile_base.ts │ │ │ ├── memory_profile_common.scss │ │ │ ├── memory_profile_module.ts │ │ │ ├── memory_profile_summary │ │ │ │ ├── BUILD │ │ │ │ ├── memory_profile_summary.ng.html │ │ │ │ ├── memory_profile_summary.scss │ │ │ │ ├── memory_profile_summary.ts │ │ │ │ └── memory_profile_summary_module.ts │ │ │ └── memory_timeline_graph │ │ │ │ ├── BUILD │ │ │ │ ├── memory_timeline_graph.ng.html │ │ │ │ ├── memory_timeline_graph.scss │ │ │ │ ├── memory_timeline_graph.ts │ │ │ │ └── memory_timeline_graph_module.ts │ │ ├── memory_viewer │ │ │ ├── BUILD │ │ │ ├── buffer_details │ │ │ │ ├── BUILD │ │ │ │ ├── buffer_details.ng.html │ │ │ │ ├── buffer_details.scss │ │ │ │ ├── buffer_details.ts │ │ │ │ └── buffer_details_module.ts │ │ │ ├── max_heap_chart │ │ │ │ ├── BUILD │ │ │ │ ├── max_heap_chart.ng.html │ │ │ │ ├── max_heap_chart.scss │ │ │ │ ├── max_heap_chart.ts │ │ │ │ └── max_heap_chart_module.ts │ │ │ ├── memory_usage │ │ │ │ ├── BUILD │ │ │ │ └── memory_usage.ts │ │ │ ├── memory_viewer.ng.html │ │ │ ├── memory_viewer.scss │ │ │ ├── memory_viewer.ts │ │ │ ├── memory_viewer_control │ │ │ │ ├── BUILD │ │ │ │ ├── memory_viewer_control.ng.html │ │ │ │ ├── memory_viewer_control.scss │ │ │ │ ├── memory_viewer_control.ts │ │ │ │ └── memory_viewer_control_module.ts │ │ │ ├── memory_viewer_main │ │ │ │ ├── BUILD │ │ │ │ ├── memory_viewer_main.ng.html │ │ │ │ ├── memory_viewer_main.scss │ │ │ │ ├── memory_viewer_main.ts │ │ │ │ └── memory_viewer_main_module.ts │ │ │ ├── memory_viewer_module.ts │ │ │ └── program_order_chart │ │ │ │ ├── BUILD │ │ │ │ ├── program_order_chart.ng.html │ │ │ │ ├── program_order_chart.scss │ │ │ │ ├── program_order_chart.ts │ │ │ │ └── program_order_chart_module.ts │ │ ├── op_profile │ │ │ ├── BUILD │ │ │ ├── op_details │ │ │ │ ├── BUILD │ │ │ │ ├── op_details.ng.html │ │ │ │ ├── op_details.scss │ │ │ │ ├── op_details.ts │ │ │ │ └── op_details_module.ts │ │ │ ├── op_profile.ng.html │ │ │ ├── op_profile.ts │ │ │ ├── op_profile_base.ng.html │ │ │ ├── op_profile_base.ts │ │ │ ├── op_profile_base_module.ts │ │ │ ├── op_profile_common.scss │ │ │ ├── op_profile_data.ts │ │ │ ├── op_profile_module.ts │ │ │ ├── op_table │ │ │ │ ├── BUILD │ │ │ │ ├── op_table.ng.html │ │ │ │ ├── op_table.scss │ │ │ │ ├── op_table.ts │ │ │ │ └── op_table_module.ts │ │ │ └── op_table_entry │ │ │ │ ├── BUILD │ │ │ │ ├── op_table_entry.ng.html │ │ │ │ ├── op_table_entry.scss │ │ │ │ ├── op_table_entry.ts │ │ │ │ └── op_table_entry_module.ts │ │ ├── overview_page │ │ │ ├── BUILD │ │ │ ├── inference_latency_chart │ │ │ │ ├── BUILD │ │ │ │ ├── inference_latency_chart.ng.html │ │ │ │ ├── inference_latency_chart.scss │ │ │ │ ├── inference_latency_chart.ts │ │ │ │ └── inference_latency_chart_module.ts │ │ │ ├── normalized_accelerator_performance_view │ │ │ │ ├── BUILD │ │ │ │ ├── normalized_accelerator_performance_view.ng.html │ │ │ │ ├── normalized_accelerator_performance_view.scss │ │ │ │ ├── normalized_accelerator_performance_view.ts │ │ │ │ └── normalized_accelerator_performance_view_module.ts │ │ │ ├── overview_page.ng.html │ │ │ ├── overview_page.scss │ │ │ ├── overview_page.ts │ │ │ ├── overview_page_base.ng.html │ │ │ ├── overview_page_base_module.ts │ │ │ ├── overview_page_common.ts │ │ │ ├── overview_page_module.ts │ │ │ ├── performance_summary │ │ │ │ ├── BUILD │ │ │ │ ├── performance_summary.ng.html │ │ │ │ ├── performance_summary.scss │ │ │ │ ├── performance_summary.ts │ │ │ │ └── performance_summary_module.ts │ │ │ ├── run_environment_view │ │ │ │ ├── BUILD │ │ │ │ ├── run_environment_view.ng.html │ │ │ │ ├── run_environment_view.scss │ │ │ │ ├── run_environment_view.ts │ │ │ │ └── run_environment_view_module.ts │ │ │ └── step_time_graph │ │ │ │ ├── BUILD │ │ │ │ ├── step_time_graph.ng.html │ │ │ │ ├── step_time_graph.scss │ │ │ │ ├── step_time_graph.ts │ │ │ │ └── step_time_graph_module.ts │ │ ├── pod_viewer │ │ │ ├── BUILD │ │ │ ├── pod_viewer.ng.html │ │ │ ├── pod_viewer.scss │ │ │ ├── pod_viewer.ts │ │ │ ├── pod_viewer_common.ts │ │ │ ├── pod_viewer_details │ │ │ │ ├── BUILD │ │ │ │ ├── pod_viewer_details.ng.html │ │ │ │ ├── pod_viewer_details.scss │ │ │ │ ├── pod_viewer_details.ts │ │ │ │ └── pod_viewer_details_module.ts │ │ │ ├── pod_viewer_module.ts │ │ │ ├── stack_bar_chart │ │ │ │ ├── BUILD │ │ │ │ ├── stack_bar_chart.ng.html │ │ │ │ ├── stack_bar_chart.scss │ │ │ │ ├── stack_bar_chart.ts │ │ │ │ └── stack_bar_chart_module.ts │ │ │ └── topology_graph │ │ │ │ ├── BUILD │ │ │ │ ├── topology_graph.ng.html │ │ │ │ ├── topology_graph.scss │ │ │ │ ├── topology_graph.ts │ │ │ │ └── topology_graph_module.ts │ │ ├── roofline_model │ │ │ ├── BUILD │ │ │ ├── operation_level_analysis │ │ │ │ ├── BUILD │ │ │ │ ├── operation_level_analysis.ng.html │ │ │ │ ├── operation_level_analysis.scss │ │ │ │ ├── operation_level_analysis.ts │ │ │ │ └── operation_level_analysis_module.ts │ │ │ ├── program_level_analysis │ │ │ │ ├── BUILD │ │ │ │ ├── program_level_analysis.ng.html │ │ │ │ ├── program_level_analysis.scss │ │ │ │ ├── program_level_analysis.ts │ │ │ │ └── program_level_analysis_module.ts │ │ │ ├── roofline_model.ng.html │ │ │ ├── roofline_model.scss │ │ │ ├── roofline_model.ts │ │ │ └── roofline_model_module.ts │ │ ├── sidenav │ │ │ ├── BUILD │ │ │ ├── sidenav.ng.html │ │ │ ├── sidenav.scss │ │ │ ├── sidenav.ts │ │ │ └── sidenav_module.ts │ │ └── trace_viewer │ │ │ ├── BUILD │ │ │ ├── trace_viewer.ng.html │ │ │ ├── trace_viewer.scss │ │ │ ├── trace_viewer.ts │ │ │ └── trace_viewer_module.ts │ ├── pipes │ │ ├── BUILD │ │ ├── pipes_module.ts │ │ └── safe_pipe.ts │ ├── services │ │ ├── communication_service │ │ │ ├── BUILD │ │ │ └── communication_service.ts │ │ ├── data_dispatcher │ │ │ ├── BUILD │ │ │ ├── data_dispatcher.ts │ │ │ ├── data_dispatcher_base.ts │ │ │ └── data_request_queue.ts │ │ ├── data_service │ │ │ ├── BUILD │ │ │ ├── data_service.ts │ │ │ └── mock_data.ts │ │ └── data_service_v2 │ │ │ ├── BUILD │ │ │ ├── data_service_v2.ts │ │ │ └── data_service_v2_interface.ts │ ├── store │ │ ├── BUILD │ │ ├── actions.ts │ │ ├── common_data_store │ │ │ ├── BUILD │ │ │ ├── actions.ts │ │ │ ├── reducers.ts │ │ │ ├── selectors.ts │ │ │ └── state.ts │ │ ├── framework_op_stats │ │ │ ├── BUILD │ │ │ ├── actions.ts │ │ │ ├── reducers.ts │ │ │ ├── selectors.ts │ │ │ └── state.ts │ │ ├── reducers.ts │ │ ├── selectors.ts │ │ ├── state.ts │ │ ├── store_module.ts │ │ └── types.ts │ └── styles │ │ ├── BUILD │ │ └── common.scss ├── index.html ├── main.ts ├── server.py └── styles.scss ├── install_and_run.py ├── package.json ├── plugin ├── BUILD ├── build_pip_package.sh ├── setup.py ├── tensorboard_plugin_profile │ ├── BUILD │ ├── __init__.py │ ├── build_utils │ │ ├── BUILD │ │ ├── profiler_test.bzl │ │ ├── pytype.default.bzl │ │ └── strict.default.bzl │ ├── convert │ │ ├── BUILD │ │ ├── __init__.py │ │ ├── csv_writer.py │ │ ├── csv_writer_test.py │ │ ├── dcn_collective_stats_proto_to_gviz.py │ │ ├── dcn_collective_stats_proto_to_gviz_test.py │ │ ├── diagnostics.py │ │ ├── diagnostics_test.py │ │ ├── inference_stats_proto_to_gviz.py │ │ ├── input_pipeline_proto_to_gviz.py │ │ ├── input_pipeline_proto_to_gviz_test.py │ │ ├── overview_page_proto_to_gviz.py │ │ ├── overview_page_proto_to_gviz_test.py │ │ ├── raw_to_tool_data.py │ │ ├── raw_to_tool_data_test.py │ │ ├── tf_data_stats_proto_to_gviz.py │ │ ├── tf_data_stats_proto_to_gviz_test.py │ │ ├── trace_events_json.py │ │ └── trace_events_json_test.py │ ├── demo │ │ ├── BUILD │ │ ├── __init__.py │ │ ├── data │ │ │ ├── profile_demo.input_pipeline.json │ │ │ ├── profile_demo.input_pipeline.pb │ │ │ ├── profile_demo.memory_viewer.json │ │ │ ├── profile_demo.op_profile.json │ │ │ ├── profile_demo.overview_page.json │ │ │ ├── profile_demo.overview_page.pb │ │ │ ├── profile_demo.pod_viewer.json │ │ │ └── profile_demo.tensorflow_stats.pb │ │ ├── profile_demo.py │ │ └── profile_demo_data.py │ ├── integration_tests │ │ ├── BUILD │ │ ├── __init__.py │ │ ├── tf_mnist.py │ │ ├── tf_profiler_session.py │ │ └── tpu │ │ │ └── tensorflow │ │ │ ├── BUILD │ │ │ ├── __init__.py │ │ │ └── tpu_tf2_keras_test.py │ ├── profile_plugin.py │ ├── profile_plugin_loader.py │ ├── profile_plugin_test.py │ ├── profile_plugin_test_utils.py │ ├── protobuf │ │ ├── BUILD │ │ ├── __init__.py │ │ ├── dcn_collective_info.proto │ │ ├── dcn_slack_analysis.proto │ │ ├── diagnostics.proto │ │ ├── hardware_types.proto │ │ ├── hlo_stats.proto │ │ ├── inference_stats.proto │ │ ├── input_pipeline.proto │ │ ├── kernel_stats.proto │ │ ├── memory_profile.proto │ │ ├── memory_viewer_preprocess.proto │ │ ├── op_metrics.proto │ │ ├── op_profile.proto │ │ ├── op_stats.proto │ │ ├── overview_page.proto │ │ ├── pod_stats.proto │ │ ├── pod_viewer.proto │ │ ├── power_metrics.proto │ │ ├── roofline_model.proto │ │ ├── source_info.proto │ │ ├── steps_db.proto │ │ ├── task.proto │ │ ├── tensorflow_datatypes.proto │ │ ├── tf_data_stats.proto │ │ ├── tf_function.proto │ │ ├── tf_stats.proto │ │ ├── tfstreamz.proto │ │ ├── topology.proto │ │ ├── tpu_input_pipeline.proto │ │ ├── trace_events.proto │ │ ├── trace_events_old.proto │ │ └── trace_events_raw.proto │ ├── server.py │ ├── standalone │ │ ├── BUILD │ │ ├── __init__.py │ │ ├── base_plugin.py │ │ ├── context.py │ │ ├── data_provider.py │ │ ├── plugin_asset_util.py │ │ ├── plugin_event_multiplexer.py │ │ └── tensorboard_shim.py │ ├── static │ │ ├── index.html │ │ ├── index.js │ │ └── materialicons.woff2 │ └── version.py ├── third_party │ ├── tracing │ │ ├── BUILD │ │ └── trace_viewer_full.html.gz │ └── webcomponentsjs │ │ ├── BUILD │ │ └── webcomponents.js └── trace_viewer │ ├── BUILD │ ├── tf_trace_viewer │ ├── BUILD │ ├── data │ │ ├── BUILD │ │ └── trace.json │ ├── demo.html │ ├── tf-trace-viewer-helper.js │ └── tf-trace-viewer.html │ ├── trace_viewer.html │ └── webcomponentsjs_polyfill │ ├── BUILD │ └── webcomponentsjs_polyfill.html ├── requirements.in ├── requirements_lock_3_10.txt ├── requirements_lock_3_11.txt ├── requirements_lock_3_12.txt ├── requirements_lock_3_9.txt ├── rollup.config.js ├── third_party ├── BUILD ├── tensorboard.patch ├── xla.patch └── xla_add_grpc_cares_darwin_arm64_support.patch ├── tsconfig.json ├── xprof ├── BUILD ├── __init__.py ├── convert │ ├── BUILD │ ├── compute_inference_latency.cc │ ├── compute_inference_latency.h │ ├── compute_inference_latency_test.cc │ ├── data_table_utils.h │ ├── data_table_utils_test.cc │ ├── dcn_analysis.cc │ ├── dcn_analysis.h │ ├── dcn_analysis_test.cc │ ├── dcn_slack_analysis_combiner.cc │ ├── dcn_slack_analysis_combiner.h │ ├── dcn_utils.cc │ ├── dcn_utils.h │ ├── dcn_utils_test.cc │ ├── duty_cycle_combiner.h │ ├── duty_cycle_combiner_test.cc │ ├── duty_cycle_tracker.cc │ ├── duty_cycle_tracker.h │ ├── duty_cycle_tracker_test.cc │ ├── executor.h │ ├── hlo_proto_to_graph_view.cc │ ├── hlo_proto_to_graph_view.h │ ├── hlo_proto_to_graph_view_test.cc │ ├── hlo_proto_to_memory_visualization_utils.cc │ ├── hlo_proto_to_memory_visualization_utils.h │ ├── hlo_proto_to_memory_visualization_utils_test.cc │ ├── hlo_to_tools_data.cc │ ├── hlo_to_tools_data.h │ ├── inference_stats.cc │ ├── inference_stats.h │ ├── inference_stats_combiner.cc │ ├── inference_stats_combiner.h │ ├── inference_stats_grouping.cc │ ├── inference_stats_grouping.h │ ├── inference_stats_grouping_test.cc │ ├── inference_stats_sampler.cc │ ├── inference_stats_sampler.h │ ├── inference_stats_sampler_test.cc │ ├── model_tracker.cc │ ├── model_tracker.h │ ├── multi_xplanes_to_op_stats.cc │ ├── multi_xplanes_to_op_stats.h │ ├── multi_xspace_to_inference_stats.cc │ ├── multi_xspace_to_inference_stats.h │ ├── op_metrics_db_combiner.cc │ ├── op_metrics_db_combiner.h │ ├── op_metrics_to_record.cc │ ├── op_metrics_to_record.h │ ├── op_profile_builder.cc │ ├── op_profile_builder.h │ ├── op_stack.h │ ├── op_stats_combiner.cc │ ├── op_stats_combiner.h │ ├── op_stats_combiner_test.cc │ ├── op_stats_to_hlo_stats.cc │ ├── op_stats_to_hlo_stats.h │ ├── op_stats_to_input_pipeline_analysis.cc │ ├── op_stats_to_input_pipeline_analysis.h │ ├── op_stats_to_input_pipeline_analysis_test.cc │ ├── op_stats_to_op_profile.cc │ ├── op_stats_to_op_profile.h │ ├── op_stats_to_overview_page.cc │ ├── op_stats_to_overview_page.h │ ├── op_stats_to_pod_stats.cc │ ├── op_stats_to_pod_stats.h │ ├── op_stats_to_pod_stats_test.cc │ ├── op_stats_to_pod_viewer.cc │ ├── op_stats_to_pod_viewer.h │ ├── op_stats_to_pod_viewer_test.cc │ ├── op_stats_to_roofline_model.cc │ ├── op_stats_to_roofline_model.h │ ├── op_stats_to_tf_stats.cc │ ├── op_stats_to_tf_stats.h │ ├── op_stats_to_tf_stats_test.cc │ ├── oss │ │ ├── BUILD │ │ └── tpu_input_pipeline_analysis_constants.cc │ ├── preprocess_single_host_xplane.cc │ ├── preprocess_single_host_xplane.h │ ├── process_megascale_dcn.cc │ ├── process_megascale_dcn.h │ ├── profile_time_breakdown.cc │ ├── profile_time_breakdown.h │ ├── repository.cc │ ├── repository.h │ ├── repository_test.cc │ ├── step_events_to_steps_db.cc │ ├── step_events_to_steps_db.h │ ├── tool_options.h │ ├── tpu_input_pipeline_analysis_constants.h │ ├── trace_viewer │ │ ├── BUILD │ │ ├── trace_event_arguments_builder.h │ │ ├── trace_events.cc │ │ ├── trace_events.h │ │ ├── trace_events_filter_interface.h │ │ ├── trace_events_to_json.cc │ │ ├── trace_events_to_json.h │ │ ├── trace_events_util.cc │ │ ├── trace_events_util.h │ │ ├── trace_events_util_test.cc │ │ ├── trace_viewer_color.cc │ │ ├── trace_viewer_color.h │ │ ├── trace_viewer_visibility.cc │ │ ├── trace_viewer_visibility.h │ │ └── trace_viewer_visibility_test.cc │ ├── xplane_to_dcn_collective_stats.cc │ ├── xplane_to_dcn_collective_stats.h │ ├── xplane_to_dcn_collective_stats_test.cc │ ├── xplane_to_hlo.cc │ ├── xplane_to_hlo.h │ ├── xplane_to_kernel_stats_db.cc │ ├── xplane_to_kernel_stats_db.h │ ├── xplane_to_kernel_stats_db_test.cc │ ├── xplane_to_memory_profile.cc │ ├── xplane_to_memory_profile.h │ ├── xplane_to_memory_profile_test.cc │ ├── xplane_to_op_metrics_db.cc │ ├── xplane_to_op_metrics_db.h │ ├── xplane_to_op_metrics_db_test.cc │ ├── xplane_to_op_stats.cc │ ├── xplane_to_op_stats.h │ ├── xplane_to_op_stats_test.cc │ ├── xplane_to_step_events.cc │ ├── xplane_to_step_events.h │ ├── xplane_to_step_events_test.cc │ ├── xplane_to_tf_data_stats.cc │ ├── xplane_to_tf_data_stats.h │ ├── xplane_to_tf_data_stats_test.cc │ ├── xplane_to_tf_functions.cc │ ├── xplane_to_tf_functions.h │ ├── xplane_to_tf_functions_test.cc │ ├── xplane_to_tool_names.cc │ ├── xplane_to_tool_names.h │ ├── xplane_to_tool_names_test.cc │ ├── xplane_to_tools_data.cc │ ├── xplane_to_tools_data.h │ ├── xplane_to_trace_container.cc │ ├── xplane_to_trace_container.h │ ├── xplane_to_trace_container_test.cc │ ├── xprof_thread_pool_executor.cc │ ├── xprof_thread_pool_executor.h │ ├── xspace_to_dcn_slack_analysis.cc │ └── xspace_to_dcn_slack_analysis.h ├── pywrap │ ├── BUILD │ ├── __init__.py │ ├── _pywrap_profiler_plugin.pyi │ ├── profiler_plugin_impl.cc │ ├── profiler_plugin_impl.h │ ├── profiler_wrapper_test.py │ └── pywrap_profiler_plugin.cc └── utils │ ├── BUILD │ ├── cost_utils.h │ ├── derived_timeline.cc │ ├── derived_timeline.h │ ├── derived_timeline_test.cc │ ├── device_caps_utils.cc │ ├── device_caps_utils.h │ ├── diagnostics.cc │ ├── diagnostics.h │ ├── event_span.cc │ ├── event_span.h │ ├── function_registry.h │ ├── function_registry_test.cc │ ├── gpu_event_stats.cc │ ├── gpu_event_stats.h │ ├── hardware_type_utils.cc │ ├── hardware_type_utils.h │ ├── hardware_type_utils_test.cc │ ├── hlo_cost_analysis_wrapper.cc │ ├── hlo_cost_analysis_wrapper.h │ ├── hlo_cost_analysis_wrapper_test.cc │ ├── hlo_module_map.cc │ ├── hlo_module_map.h │ ├── hlo_module_utils.h │ ├── hlo_module_utils_test.cc │ ├── hlo_proto_map.cc │ ├── hlo_proto_map.h │ ├── hlo_proto_to_module.cc │ ├── hlo_proto_to_module.h │ ├── host_offload_utils.cc │ ├── host_offload_utils.h │ ├── html_utils.h │ ├── kernel_stats_utils.cc │ ├── kernel_stats_utils.h │ ├── kernel_stats_utils_test.cc │ ├── op_metrics_db_utils.cc │ ├── op_metrics_db_utils.h │ ├── op_metrics_db_utils_test.cc │ ├── op_utils.cc │ ├── op_utils.h │ ├── performance_info_wrapper.cc │ ├── performance_info_wrapper.h │ ├── performance_info_wrapper_test.cc │ ├── roofline_model_utils.cc │ ├── roofline_model_utils.h │ ├── roofline_model_utils_test.cc │ ├── step_intersection.cc │ ├── step_intersection.h │ ├── step_intersection_test.cc │ ├── tensorflow_utils.cc │ ├── tensorflow_utils.h │ ├── tfstreamz_utils.cc │ ├── tfstreamz_utils.h │ ├── tpu_step_breakdown_utils.h │ ├── tpu_step_details_utils.h │ ├── xprof_gpu_cost_analysis.cc │ ├── xprof_gpu_cost_analysis.h │ ├── xprof_gpu_cost_analysis_registration.cc │ ├── xprof_gpu_cost_analysis_registration_test.cc │ ├── xprof_gpu_cost_analysis_test.cc │ └── xprof_gpu_cost_analysis_types.h ├── xprof_pypi_package ├── setup.py └── xprof │ └── __init__.py └── yarn.lock /.bazelversion: -------------------------------------------------------------------------------- 1 | 7.4.1 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Bazel 2 | ## Ignore all bazel-* symlinks. There is no full list since this can change 3 | ## based on the name of the directory bazel is cloned into. 4 | /bazel-* 5 | MODULE.bazel 6 | MODULE.bazel.lock 7 | 8 | *.pyc 9 | *.so 10 | *.egg-info 11 | *.whl 12 | *_pb2.py 13 | 14 | .ipynb_checkpoints 15 | .DS_Store 16 | .mypy_cache/ 17 | .pytype/ 18 | 19 | .idea 20 | .vscode 21 | .envrc 22 | .bazelrc.user 23 | 24 | # virtualenv/venv directories 25 | /venv/ 26 | /bin/ 27 | /include/ 28 | /lib/ 29 | /share/ 30 | 31 | -------------------------------------------------------------------------------- /BUILD: -------------------------------------------------------------------------------- 1 | load("@python//:defs.bzl", "compile_pip_requirements") 2 | load("@python_deps//:requirements.bzl", "requirement") 3 | load("@repository_configuration//:repository_config.bzl", "PROFILER_REQUIREMENTS_FILE") 4 | 5 | # Description 6 | # XProf, ML Performance Toolbox (for TPU, GPU, CPU). 7 | 8 | licenses(["notice"]) 9 | 10 | exports_files(["LICENSE"]) # Needed for internal repo. 11 | 12 | exports_files(["README.md"]) # Needed for pip package description 13 | 14 | exports_files([ 15 | "tsconfig.json", 16 | "rollup.config.js", 17 | ]) 18 | 19 | py_library( 20 | name = "expect_tensorflow_installed", 21 | # This is a dummy rule used as a tensorflow dependency in open-source. 22 | # We expect tensorflow to already be installed on the system, e.g. via 23 | # `pip install tensorflow` 24 | visibility = ["//visibility:public"], 25 | ) 26 | 27 | compile_pip_requirements( 28 | name = "requirements", 29 | extra_args = [ 30 | "--allow-unsafe", 31 | "--build-isolation", 32 | "--rebuild", 33 | ], 34 | generate_hashes = True, 35 | requirements_in = "requirements.in", 36 | requirements_txt = PROFILER_REQUIREMENTS_FILE, 37 | ) 38 | -------------------------------------------------------------------------------- /config.bzl: -------------------------------------------------------------------------------- 1 | """Configuration for the xprof repository.""" 2 | 3 | def _repository_configuration(repository_ctx): 4 | python_version = repository_ctx.os.environ.get("PROFILER_PYTHON_VERSION", "3.11") 5 | repository_ctx.file("BUILD") 6 | requirements_file = "//:requirements_lock_{version}.txt".format(version = python_version.replace(".", "_")) 7 | repository_ctx.file("repository_config.bzl", content = """ 8 | PROFILER_PYTHON_VERSION={python_version} 9 | PROFILER_REQUIREMENTS_FILE={requirements_file} 10 | """.format(python_version = repr(python_version), requirements_file = repr(requirements_file))) 11 | 12 | repository_configuration = repository_rule( 13 | implementation = _repository_configuration, 14 | environ = ["PROFILER_PYTHON_VERSION"], 15 | ) 16 | -------------------------------------------------------------------------------- /defs/BUILD: -------------------------------------------------------------------------------- 1 | load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary") 2 | 3 | # In OSS-only, the `xprof_ng_module` rule depends on a 4 | # tsc_wrapped_with_angular nodejs_binary target. 5 | nodejs_binary( 6 | name = "tsc_wrapped_with_angular", 7 | data = [ 8 | "@npm//@angular/compiler-cli", 9 | "@npm//@bazel/concatjs", 10 | "@npm//@bazel/typescript", 11 | ], 12 | entry_point = "@npm//:node_modules/@bazel/concatjs/internal/tsc_wrapped/tsc_wrapped.js", 13 | visibility = ["//:__subpackages__"], 14 | ) 15 | -------------------------------------------------------------------------------- /defs/backend_defs.bzl: -------------------------------------------------------------------------------- 1 | # Copyright 2025 The XProf Authors. 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 | """External XProf utility functions for Bazel rules.""" 16 | 17 | def if_oss(oss_value, google_value = []): 18 | """Returns one of the arguments based on the non-configurable build env. 19 | 20 | Specifically, it does not return a `select`, and can be used to e.g. 21 | compute elements of list attributes. 22 | """ 23 | _ = (google_value, oss_value) # buildifier: disable=unused-variable 24 | return oss_value # copybara:comment_replace return oss_value 25 | 26 | def tf_profiler_alias(target_dir, name): 27 | return target_dir + "oss:" + name 28 | -------------------------------------------------------------------------------- /demo/plugins/profile/tpu-training/gke-tpu-b309f56b-rq5s.xplane.pb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/demo/plugins/profile/tpu-training/gke-tpu-b309f56b-rq5s.xplane.pb -------------------------------------------------------------------------------- /docs/images/dcn_collective_stats/com-timeline-observed-duration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/docs/images/dcn_collective_stats/com-timeline-observed-duration.png -------------------------------------------------------------------------------- /docs/images/dcn_collective_stats/com-timeline-slack-time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/docs/images/dcn_collective_stats/com-timeline-slack-time.png -------------------------------------------------------------------------------- /docs/images/dcn_collective_stats/com-timeline-stall-duration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/docs/images/dcn_collective_stats/com-timeline-stall-duration.png -------------------------------------------------------------------------------- /frontend/app/app.ng.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
Initializing runs and tools...
14 | 15 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /frontend/app/app.scss: -------------------------------------------------------------------------------- 1 | /** CSS for the root component. */ 2 | 3 | mat-progress-bar { 4 | width: 300px; 5 | margin: 0 auto; 6 | } 7 | 8 | .progress-container { 9 | padding: 50px; 10 | } 11 | 12 | .loading-message { 13 | width: fit-content; 14 | margin: 0 auto; 15 | } 16 | -------------------------------------------------------------------------------- /frontend/app/common/classes/BUILD: -------------------------------------------------------------------------------- 1 | load("@npm//@bazel/concatjs:index.bzl", "ts_library") 2 | 3 | package(default_visibility = [ 4 | "//perftools/accelerators/xprof/contrib:__subpackages__", 5 | "//perftools/accelerators/xprof/frontend:__subpackages__", 6 | "@org_xprof//contrib:__subpackages__", 7 | "@org_xprof//frontend:__subpackages__", 8 | ]) 9 | 10 | ts_library( 11 | name = "classes", 12 | srcs = [ 13 | "throbber.ts", 14 | ], 15 | deps = [ 16 | "@org_xprof//frontend/app/common/interfaces", 17 | ], 18 | ) 19 | -------------------------------------------------------------------------------- /frontend/app/common/classes/BUILD.b: -------------------------------------------------------------------------------- 1 | load("//javascript/typescript:build_defs.bzl", "ts_library") 2 | 3 | package(default_visibility = [ 4 | "//third_party/xprof/contrib:__subpackages__", 5 | "//third_party/xprof/frontend:__subpackages__", 6 | ]) 7 | 8 | ts_library( 9 | name = "classes", 10 | srcs = [ 11 | "throbber.ts", 12 | ], 13 | ) 14 | -------------------------------------------------------------------------------- /frontend/app/common/classes/throbber.ts: -------------------------------------------------------------------------------- 1 | import 'org_xprof/frontend/app/common/interfaces/window'; 2 | 3 | /** 4 | * A class for measuring page initial loading latency. 5 | * Each tool page may have its own definition of initial loading complete. 6 | */ 7 | export class Throbber { 8 | private active = false; 9 | private startLoadTime = 0; 10 | 11 | constructor(private readonly toolname: string) { 12 | this.setActive(false); 13 | } 14 | start() { 15 | if (this.active) return; 16 | this.startLoadTime = performance.now(); 17 | this.setActive(true); 18 | } 19 | stop() { 20 | if (!this.active) return; 21 | this.setActive(false); 22 | } 23 | setActive(active: boolean) { 24 | this.active = active; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /frontend/app/common/constants/BUILD: -------------------------------------------------------------------------------- 1 | load("@npm//@bazel/concatjs:index.bzl", "ts_library") 2 | 3 | package(default_visibility = ["//frontend:internal"]) 4 | 5 | ts_library( 6 | name = "colors", 7 | srcs = ["colors.ts"], 8 | ) 9 | 10 | ts_library( 11 | name = "constants", 12 | srcs = [ 13 | "constants.ts", 14 | "enums.ts", 15 | ], 16 | ) 17 | 18 | ts_library( 19 | name = "roofline_model_constants", 20 | srcs = [ 21 | "roofline_model_constants.ts", 22 | ], 23 | deps = [ 24 | "@npm//@types/google.visualization", 25 | ], 26 | ) 27 | 28 | ts_library( 29 | name = "testing", 30 | srcs = [ 31 | "testing.ts", 32 | ], 33 | deps = [ 34 | "@org_xprof//frontend/app/common/interfaces", 35 | ], 36 | ) 37 | -------------------------------------------------------------------------------- /frontend/app/common/constants/colors.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Color palette for graph viewer op nodes. 3 | * in format of [background color, border color, text color] 4 | * ref: hlo_graph_dumper.cc 5 | */ 6 | export const GRAPH_OP_COLORS: {[key: string]: string[]} = { 7 | 'kBlue': ['#bbdefb', '#8aacc8', 'black'], 8 | 'kBrown': ['#bcaaa4', '#8c7b75', 'black'], 9 | 'kDarkBlue': ['#1565c0', '#003c8f', 'white'], 10 | 'kDarkGreen': ['#2e7d32', '#005005', 'white'], 11 | 'kGray': ['#cfd8dc', '#9ea7aa', 'black'], 12 | 'kGreen': ['#c8e6c9', '#97b498', 'black'], 13 | 'kOrange': ['#ffe0b2', '#cbae82', 'black'], 14 | 'kPurple': ['#e1bee7', '#af8eb5', 'black'], 15 | 'kYellow': ['#fff9c4', '#cbc693', 'black'], 16 | }; 17 | 18 | /** 19 | * Color for graph viewer center node. 20 | */ 21 | export const GRAPH_CENTER_NODE_COLOR = [ 22 | 'rgb(255, 205, 210)', 23 | 'rgb(183, 28, 28)', 24 | 'black', 25 | ]; 26 | -------------------------------------------------------------------------------- /frontend/app/common/constants/enums.ts: -------------------------------------------------------------------------------- 1 | // tslint:disable:enforce-comments-on-exported-symbols global enums 2 | export enum IdleOption { 3 | YES = 'Yes', 4 | NO = 'No', 5 | } 6 | 7 | export enum OpExecutor { 8 | NONE = '', 9 | DEVICE = 'Device', 10 | HOST = 'Host' 11 | } 12 | 13 | export enum OpKind { 14 | NONE = '', 15 | NAME = 'Name', 16 | TYPE = 'Type' 17 | } 18 | 19 | export enum OpType { 20 | NONE = '', 21 | TENSORFLOW = 'TensorFlow', 22 | XLA_HLO = 'HLO', 23 | } 24 | 25 | export enum DataRequestType { 26 | UNKNOWN = 0, 27 | DATA_REQUEST_BEGIN, 28 | KERNEL_STATS, 29 | TENSORFLOW_STATS, 30 | DATA_REQUEST_END, 31 | DIFF_DATA_REQUEST_BEGIN, 32 | TENSORFLOW_STATS_DIFF, 33 | DIFF_DATA_REQUEST_END, 34 | } 35 | 36 | export enum FileExtensionType { 37 | UNKNOWN = '', 38 | PROTO_BINARY = 'pb', 39 | PROTO_TEXT = 'pbtxt', 40 | JSON = 'json', 41 | SHORT_TEXT = 'short_txt', 42 | LONG_TEXT = 'long_txt', 43 | } 44 | // tslint:enable:enforce-comments-on-exported-symbols 45 | -------------------------------------------------------------------------------- /frontend/app/common/interfaces/buffer_allocation_info.ts: -------------------------------------------------------------------------------- 1 | /** The base interface for a buffer allocation information. */ 2 | export interface BufferAllocationInfo { 3 | size: number; 4 | alloc: number; 5 | free: number; 6 | color?: string; 7 | } 8 | -------------------------------------------------------------------------------- /frontend/app/common/interfaces/capture_profile.ts: -------------------------------------------------------------------------------- 1 | /** The base interface for a response of capture profile api. */ 2 | export interface CaptureProfileResponse { 3 | error?: string; 4 | result?: string; 5 | } 6 | 7 | /** The base interface for a options of capture profile api. */ 8 | export interface CaptureProfileOptions { 9 | serviceAddr: string; 10 | isTpuName: boolean; 11 | duration: number; 12 | numRetry: number; 13 | workerList: string; 14 | hostTracerLevel: number; 15 | deviceTracerLevel: number; 16 | pythonTracerLevel: number; 17 | delay: number; 18 | } 19 | -------------------------------------------------------------------------------- /frontend/app/common/interfaces/diagnostics.ts: -------------------------------------------------------------------------------- 1 | /** The base interface for diagnosing profiling issues. */ 2 | export interface Diagnostics { 3 | info: string[]; 4 | errors: string[]; 5 | warnings: string[]; 6 | } 7 | -------------------------------------------------------------------------------- /frontend/app/common/interfaces/graph_viewer.ts: -------------------------------------------------------------------------------- 1 | /** The interface for user input when generating a hlo graph */ 2 | export declare interface GraphConfigInput { 3 | selectedModule: string; 4 | opName: string; 5 | graphWidth: number; 6 | showMetadata: boolean; 7 | mergeFusion: boolean; 8 | programId?: string; 9 | graphType?: string; 10 | symbolId?: string; 11 | symbolType?: string; 12 | } 13 | 14 | /** The query parameter object for route navigation and xhr */ 15 | export declare interface GraphViewerQueryParams { 16 | node_name: string; 17 | module_name: string; 18 | graph_width: number; 19 | show_metadata: boolean; 20 | merge_fusion: boolean; 21 | program_id?: string; 22 | graph_type?: string; 23 | symbol_id?: string; 24 | symbol_type?: string; 25 | show_me_graph?: boolean; 26 | } 27 | 28 | /** The interface for graph type object for selection */ 29 | export declare interface GraphTypeObject { 30 | value: string; 31 | label: string; 32 | } 33 | -------------------------------------------------------------------------------- /frontend/app/common/interfaces/heap_object.ts: -------------------------------------------------------------------------------- 1 | 2 | import {SourceInfo} from './source_info.jsonpb_decls.d'; 3 | 4 | /** The base interface for a heap object. */ 5 | export interface HeapObject { 6 | instructionName?: string; 7 | logicalBufferId?: number; 8 | unpaddedSizeMiB?: number; 9 | tfOpName?: string; 10 | opcode?: string; 11 | sizeMiB?: number; 12 | color?: number; 13 | shape?: string; 14 | groupName?: string; 15 | sourceInfo?: SourceInfo; 16 | } 17 | -------------------------------------------------------------------------------- /frontend/app/common/interfaces/hlo.jsonpb_decls.d.ts.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/frontend/app/common/interfaces/hlo.jsonpb_decls.d.ts.gz -------------------------------------------------------------------------------- /frontend/app/common/interfaces/hosts.ts: -------------------------------------------------------------------------------- 1 | /** Metadata associated with a host. */ 2 | export declare interface HostMetadata { 3 | hostname: string; 4 | hasDeviceTrace: boolean; 5 | } 6 | -------------------------------------------------------------------------------- /frontend/app/common/interfaces/memory_profile.jsonpb_decls.d.ts.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/frontend/app/common/interfaces/memory_profile.jsonpb_decls.d.ts.gz -------------------------------------------------------------------------------- /frontend/app/common/interfaces/navigation_event.ts: -------------------------------------------------------------------------------- 1 | /** The base interface for a navigation event. */ 2 | export declare interface NavigationEvent { 3 | // TODO(jonahweaver): Replace run and tag, with sessionId and tool 4 | // respectively. 5 | run?: string; 6 | tag?: string; 7 | host?: string; 8 | // Graph Viewer crosslink params 9 | opName?: string; 10 | moduleName?: string; 11 | programId?: string; 12 | graphType?: string; 13 | // Memory viewer params 14 | memorySpaceColor?: string; 15 | // Navigation controlling params 16 | firstLoad?: boolean; 17 | } 18 | -------------------------------------------------------------------------------- /frontend/app/common/interfaces/roofline_model.ts: -------------------------------------------------------------------------------- 1 | import {SimpleDataTable,} from 'org_xprof/frontend/app/common/interfaces/data_table'; 2 | 3 | /** The base interfact for roofline model property. */ 4 | declare interface RooflineModelProperty { 5 | device_type?: string; 6 | megacore?: string; 7 | has_cmem?: string; 8 | has_merged_vmem?: string; 9 | peak_flop_rate?: string; 10 | peak_hbm_bw?: string; 11 | peak_cmem_read_bw?: string; 12 | peak_cmem_write_bw?: string; 13 | peak_vmem_read_bw?: string; 14 | peak_vmem_write_bw?: string; 15 | hbm_ridge_point?: string; 16 | cmem_read_ridge_point?: string; 17 | cmem_write_ridge_point?: string; 18 | vmem_read_ridge_point?: string; 19 | vmem_write_ridge_point?: string; 20 | } 21 | 22 | /** The base interfact for roofline model. */ 23 | export declare interface RooflineModelData extends SimpleDataTable { 24 | p: RooflineModelProperty; 25 | } 26 | -------------------------------------------------------------------------------- /frontend/app/common/interfaces/source_info.jsonpb_decls.d.ts: -------------------------------------------------------------------------------- 1 | 2 | /** The base interface for a source information. */ 3 | export interface SourceInfo { 4 | fileName?: string; 5 | lineNumber?: /* int32 */ number; 6 | stackFrame?: string; 7 | } 8 | -------------------------------------------------------------------------------- /frontend/app/common/interfaces/tool.ts: -------------------------------------------------------------------------------- 1 | /** The base interface for tool item. */ 2 | export interface Tool { 3 | name: string; 4 | activeTools: string[]; 5 | } 6 | 7 | /** The base interface for run tools map. */ 8 | export interface RunToolsMap { 9 | [key: string]: string[]; 10 | } 11 | -------------------------------------------------------------------------------- /frontend/app/common/interfaces/window.ts: -------------------------------------------------------------------------------- 1 | declare global { 2 | /** The interface for a TensorBoard Enviroments. */ 3 | interface TensorBoardEnv { 4 | IN_COLAB?: boolean; 5 | } 6 | 7 | /** The interface for the browser's window. */ 8 | interface Window { 9 | TENSORBOARD_ENV?: TensorBoardEnv; 10 | google?: any; 11 | gtag: Function; 12 | hljs?: {configure: Function; highlightAll: Function;}; 13 | } 14 | } 15 | 16 | export {}; 17 | -------------------------------------------------------------------------------- /frontend/app/common/interfaces/xla_data.jsonpb_decls.d.ts.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/frontend/app/common/interfaces/xla_data.jsonpb_decls.d.ts.gz -------------------------------------------------------------------------------- /frontend/app/common/utils/BUILD: -------------------------------------------------------------------------------- 1 | load("@npm//@bazel/concatjs:index.bzl", "ts_library") 2 | 3 | package(default_visibility = ["//frontend:internal"]) 4 | 5 | ts_library( 6 | name = "testing", 7 | srcs = [ 8 | "testing.ts", 9 | ], 10 | deps = [ 11 | "@org_xprof//frontend/app/common/constants:testing", 12 | ], 13 | ) 14 | 15 | ts_library( 16 | name = "utils", 17 | srcs = [ 18 | "utils.ts", 19 | ], 20 | deps = [ 21 | "@npm//@ngrx/store", 22 | "@org_xprof//frontend/app/common/interfaces", 23 | "@org_xprof//frontend/app/common/interfaces:chart", 24 | "@org_xprof//frontend/app/common/interfaces:op_profile_proto_defs", 25 | "@org_xprof//frontend/app/store", 26 | ], 27 | ) 28 | -------------------------------------------------------------------------------- /frontend/app/common/utils/testing.ts: -------------------------------------------------------------------------------- 1 | import {GVIZ_FOR_TESTING} from 'org_xprof/frontend/app/common/constants/testing'; 2 | 3 | /** Interface for injecting mock libraries into the window built-in object. */ 4 | declare interface WindowForTesting { 5 | google?: typeof GVIZ_FOR_TESTING; 6 | gtag?: Function; 7 | } 8 | 9 | /** Injects GVIZ_FOR_TESTING into the global window. */ 10 | export function injectMockGviz() { 11 | // Need to cast through unknown because the types do not overlap. 12 | const windowForTesting = window as unknown as WindowForTesting; 13 | windowForTesting.google = GVIZ_FOR_TESTING; 14 | } 15 | 16 | /** Injects GA tag into the global window. */ 17 | export function injectGtag() { 18 | // Need to cast through unknown because the types do not overlap. 19 | const windowForTesting = window as unknown as WindowForTesting; 20 | windowForTesting.gtag = () => {}; 21 | } 22 | -------------------------------------------------------------------------------- /frontend/app/components/capture_profile/capture_profile.ng.html: -------------------------------------------------------------------------------- 1 |
2 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /frontend/app/components/capture_profile/capture_profile.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a capture profile view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | mat-spinner { 6 | position: absolute; 7 | top: calc(50% - 10px); 8 | left: calc(50% - 10px); 9 | } 10 | 11 | .mat-mdc-raised-button { 12 | @include box-shadow-none; 13 | @include border-black; 14 | } 15 | -------------------------------------------------------------------------------- /frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a capture profile dialog component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | mat-expansion-panel { 6 | width: 400px; 7 | } 8 | 9 | .mat-expansion-panel-header { 10 | padding: 0 5px 0 0; 11 | } 12 | 13 | mat-form-field { 14 | width: 400px; 15 | } 16 | 17 | mat-radio-button { 18 | margin-left: 20px; 19 | } 20 | 21 | mat-dialog-actions { 22 | justify-content: flex-end; 23 | } 24 | 25 | .mat-mdc-raised-button { 26 | @include box-shadow-none; 27 | @include border-black; 28 | } 29 | -------------------------------------------------------------------------------- /frontend/app/components/capture_profile/capture_profile_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatButtonModule} from '@angular/material/button'; 4 | import {MatDialogModule} from '@angular/material/dialog'; 5 | import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; 6 | import {MatSnackBarModule} from '@angular/material/snack-bar'; 7 | 8 | import {CaptureProfile} from './capture_profile'; 9 | import {CaptureProfileDialogModule} from './capture_profile_dialog/capture_profile_dialog_module'; 10 | 11 | /** A capture profile view module. */ 12 | @NgModule({ 13 | declarations: [CaptureProfile], 14 | imports: [ 15 | CommonModule, 16 | MatButtonModule, 17 | MatDialogModule, 18 | MatProgressSpinnerModule, 19 | CaptureProfileDialogModule, 20 | MatSnackBarModule, 21 | ], 22 | exports: [CaptureProfile] 23 | }) 24 | export class CaptureProfileModule { 25 | } 26 | -------------------------------------------------------------------------------- /frontend/app/components/chart/category_table_data_processor.ts: -------------------------------------------------------------------------------- 1 | import {ChartDataProvider, CustomChartDataProcessor, DataTableOrDataView} from 'org_xprof/frontend/app/common/interfaces/chart'; 2 | 3 | import {computeGroupView} from './table_utils'; 4 | 5 | /** A category table data processor. */ 6 | export class CategoryTableDataProcessor implements CustomChartDataProcessor { 7 | constructor( 8 | private readonly filters: google.visualization.DataTableCellFilter[], 9 | private readonly gColumn: number, private readonly vColumn: number, 10 | private readonly showSingleCategory: boolean = true) {} 11 | 12 | process(dataProvider: ChartDataProvider): DataTableOrDataView|null { 13 | if (!dataProvider) { 14 | return null; 15 | } 16 | 17 | const dataTable = dataProvider.getDataTable(); 18 | if (!dataTable) { 19 | return null; 20 | } 21 | 22 | return computeGroupView( 23 | dataTable, this.filters, this.gColumn, this.vColumn, 24 | this.showSingleCategory); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /frontend/app/components/chart/dashboard/BUILD: -------------------------------------------------------------------------------- 1 | load("@npm//@bazel/concatjs:index.bzl", "ts_library") 2 | 3 | package(default_visibility = ["//frontend:internal"]) 4 | 5 | ts_library( 6 | name = "dashboard", 7 | srcs = [ 8 | "dashboard.ts", 9 | ], 10 | deps = [ 11 | "@npm//@types/google.visualization", 12 | "@org_xprof//frontend/app/common/interfaces", 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /frontend/app/components/chart/org_chart/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "org_chart", 8 | srcs = [ 9 | "org_chart.ts", 10 | "org_chart_module.ts", 11 | ], 12 | assets = [ 13 | ":org_chart_css", 14 | "org_chart.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@npm//@types/google.visualization", 19 | ], 20 | ) 21 | 22 | sass_binary( 23 | name = "org_chart_css", 24 | src = "org_chart.scss", 25 | # stack = False, 26 | sourcemap = False, 27 | ) 28 | -------------------------------------------------------------------------------- /frontend/app/components/chart/org_chart/org_chart.ng.html: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /frontend/app/components/chart/org_chart/org_chart.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a google-charts table component. */ 2 | 3 | :host { 4 | display: block; 5 | margin: 0 16px; 6 | } 7 | -------------------------------------------------------------------------------- /frontend/app/components/chart/org_chart/org_chart_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | 3 | import {OrgChart} from './org_chart'; 4 | 5 | /** An organization chart view module. */ 6 | @NgModule({ 7 | declarations: [OrgChart], 8 | imports: [], 9 | exports: [OrgChart], 10 | }) 11 | export class OrgChartModule { 12 | } 13 | -------------------------------------------------------------------------------- /frontend/app/components/chart/table/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "table", 8 | srcs = [ 9 | "table.ts", 10 | "table_module.ts", 11 | ], 12 | assets = [ 13 | ":table_css", 14 | "table.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@npm//@types/google.visualization", 19 | "@org_xprof//frontend/app/common/angular:angular_material_core", 20 | "@org_xprof//frontend/app/common/angular:angular_material_form_field", 21 | "@org_xprof//frontend/app/common/angular:angular_material_select", 22 | ], 23 | ) 24 | 25 | sass_binary( 26 | name = "table_css", 27 | src = "table.scss", 28 | # stack = False, 29 | sourcemap = False, 30 | ) 31 | -------------------------------------------------------------------------------- /frontend/app/components/chart/table/table.ng.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | Rows per Page: 4 | 5 | {{option}} 6 | 7 | 8 |
9 |
10 | -------------------------------------------------------------------------------- /frontend/app/components/chart/table/table.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a google-charts table component. */ 2 | 3 | :host { 4 | display: block; 5 | margin: 0 16px; 6 | } 7 | -------------------------------------------------------------------------------- /frontend/app/components/chart/table/table_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatOptionModule} from '@angular/material/core'; 4 | import {MatFormFieldModule} from '@angular/material/form-field'; 5 | import {MatSelectModule} from '@angular/material/select'; 6 | 7 | import {Table} from './table'; 8 | 9 | /** A table view module. */ 10 | @NgModule({ 11 | declarations: [Table], 12 | imports: [ 13 | CommonModule, 14 | MatOptionModule, 15 | MatSelectModule, 16 | MatFormFieldModule, 17 | ], 18 | exports: [Table], 19 | }) 20 | export class TableModule { 21 | } 22 | -------------------------------------------------------------------------------- /frontend/app/components/controls/category_filter/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "category_filter", 8 | srcs = [ 9 | "category_filter.ts", 10 | "category_filter_module.ts", 11 | ], 12 | assets = [ 13 | "category_filter.ng.html", 14 | ":category_filter_css", 15 | ], 16 | deps = [ 17 | "@npm//@angular/common", 18 | "@npm//@angular/core", 19 | "@npm//@types/google.visualization", 20 | "@org_xprof//frontend/app/common/angular:angular_material_core", 21 | "@org_xprof//frontend/app/common/angular:angular_material_form_field", 22 | "@org_xprof//frontend/app/common/angular:angular_material_select", 23 | ], 24 | ) 25 | 26 | sass_binary( 27 | name = "category_filter_css", 28 | src = "category_filter.scss", 29 | # stack = False, 30 | sourcemap = False, 31 | ) 32 | -------------------------------------------------------------------------------- /frontend/app/components/controls/category_filter/category_filter.ng.html: -------------------------------------------------------------------------------- 1 | 2 | {{columnLabel}} 3 | 4 | {{option}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /frontend/app/components/controls/category_filter/category_filter.scss: -------------------------------------------------------------------------------- 1 | /** CSS for category filter component. */ 2 | 3 | .control { 4 | width: 120px; 5 | margin-right: 8px; 6 | } 7 | -------------------------------------------------------------------------------- /frontend/app/components/controls/category_filter/category_filter_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatOptionModule} from '@angular/material/core'; 4 | import {MatFormFieldModule} from '@angular/material/form-field'; 5 | import {MatSelectModule} from '@angular/material/select'; 6 | 7 | import {CategoryFilter} from './category_filter'; 8 | 9 | /** A category filter module. */ 10 | @NgModule({ 11 | declarations: [CategoryFilter], 12 | imports: [ 13 | CommonModule, 14 | MatOptionModule, 15 | MatFormFieldModule, 16 | MatSelectModule, 17 | ], 18 | exports: [CategoryFilter], 19 | }) 20 | export class CategoryFilterModule { 21 | } 22 | -------------------------------------------------------------------------------- /frontend/app/components/controls/download_hlo/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "download_hlo", 8 | srcs = [ 9 | "blob_downloader.ts", 10 | "download_hlo.ts", 11 | "download_hlo_module.ts", 12 | ], 13 | assets = [ 14 | ":download_hlo_css", 15 | "download_hlo.ng.html", 16 | ], 17 | deps = [ 18 | "@npm//@angular/common", 19 | "@npm//@angular/core", 20 | "@npm//@angular/router", 21 | "@npm//rxjs", 22 | "@npm//safevalues", 23 | "@org_xprof//frontend/app/common/angular:angular_material_icon", 24 | "@org_xprof//frontend/app/common/angular:angular_material_menu", 25 | "@org_xprof//frontend/app/common/angular:angular_material_tooltip", 26 | "@org_xprof//frontend/app/common/constants", 27 | "@org_xprof//frontend/app/services/data_service_v2:data_service_v2_interface", 28 | ], 29 | ) 30 | 31 | sass_binary( 32 | name = "download_hlo_css", 33 | src = "download_hlo.scss", 34 | # stack = True, 35 | sourcemap = False, 36 | deps = [ 37 | "@org_xprof//frontend/app/styles:common", 38 | ], 39 | ) 40 | -------------------------------------------------------------------------------- /frontend/app/components/controls/download_hlo/download_hlo.ng.html: -------------------------------------------------------------------------------- 1 |
2 | save_alt 4 |
5 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /frontend/app/components/controls/download_hlo/download_hlo.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a download hlo component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | .save-button { 6 | text-align: center; 7 | } 8 | 9 | .save-button:hover { 10 | color: $button-focus-color; 11 | cursor: pointer; 12 | } 13 | -------------------------------------------------------------------------------- /frontend/app/components/controls/download_hlo/download_hlo_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatIconModule} from '@angular/material/icon'; 4 | import {MatMenuModule} from '@angular/material/menu'; 5 | import {MatTooltipModule} from '@angular/material/tooltip'; 6 | 7 | import {DownloadHlo} from './download_hlo'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | MatMenuModule, 13 | MatIconModule, 14 | MatTooltipModule, 15 | ], 16 | declarations: [DownloadHlo], 17 | exports: [DownloadHlo], 18 | }) 19 | export class DownloadHloModule { 20 | } 21 | -------------------------------------------------------------------------------- /frontend/app/components/controls/export_as_csv/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "export_as_csv", 8 | srcs = [ 9 | "export_as_csv.ts", 10 | "export_as_csv_module.ts", 11 | ], 12 | assets = [ 13 | "export_as_csv.ng.html", 14 | ":export_as_csv_css", 15 | ], 16 | deps = [ 17 | "@npm//@angular/common", 18 | "@npm//@angular/core", 19 | "@org_xprof//frontend/app/common/angular:angular_material_icon", 20 | "@org_xprof//frontend/app/services/data_service_v2:data_service_v2_interface", 21 | ], 22 | ) 23 | 24 | sass_binary( 25 | name = "export_as_csv_css", 26 | src = "export_as_csv.scss", 27 | # stack = True, 28 | sourcemap = False, 29 | deps = [ 30 | "@org_xprof//frontend/app/styles:common", 31 | ], 32 | ) 33 | -------------------------------------------------------------------------------- /frontend/app/components/controls/export_as_csv/export_as_csv.ng.html: -------------------------------------------------------------------------------- 1 |
2 | save_alt 3 |
Export as CSV
4 |
5 | -------------------------------------------------------------------------------- /frontend/app/components/controls/export_as_csv/export_as_csv.scss: -------------------------------------------------------------------------------- 1 | /** CSS for export-as-CSV component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | .save-button { 6 | padding-top: 8px; 7 | text-align: center; 8 | width: 130px; 9 | } 10 | 11 | .save-button:hover { 12 | color: $button-focus-color; 13 | cursor: pointer; 14 | } 15 | -------------------------------------------------------------------------------- /frontend/app/components/controls/export_as_csv/export_as_csv.ts: -------------------------------------------------------------------------------- 1 | import {Component, inject, Input} from '@angular/core'; 2 | import {DATA_SERVICE_INTERFACE_TOKEN, DataServiceV2Interface} from 'org_xprof/frontend/app/services/data_service_v2/data_service_v2_interface'; 3 | 4 | /** 5 | * A 'Export as CSV' button component. 6 | */ 7 | @Component({ 8 | standalone: false, 9 | selector: 'export-as-csv', 10 | templateUrl: './export_as_csv.ng.html', 11 | styleUrls: ['./export_as_csv.scss'], 12 | }) 13 | export class ExportAsCsv { 14 | @Input() tool = ''; 15 | @Input() sessionId = ''; 16 | @Input() host = ''; 17 | 18 | dataService: DataServiceV2Interface = inject(DATA_SERVICE_INTERFACE_TOKEN); 19 | 20 | exportDataAsCSV() { 21 | this.dataService.exportDataAsCSV(this.sessionId, this.tool, this.host); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /frontend/app/components/controls/export_as_csv/export_as_csv_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatIconModule} from '@angular/material/icon'; 4 | 5 | import {ExportAsCsv} from './export_as_csv'; 6 | 7 | /** A export-to-csv button module. */ 8 | @NgModule({ 9 | declarations: [ExportAsCsv], 10 | imports: [ 11 | CommonModule, 12 | MatIconModule, 13 | ], 14 | exports: [ExportAsCsv], 15 | }) 16 | export class ExportAsCsvModule { 17 | } 18 | -------------------------------------------------------------------------------- /frontend/app/components/controls/string_filter/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "string_filter", 8 | srcs = [ 9 | "string_filter.ts", 10 | "string_filter_module.ts", 11 | ], 12 | assets = [ 13 | "string_filter.ng.html", 14 | "string_filter_css", 15 | ], 16 | # strict_templates = False, 17 | deps = [ 18 | "@npm//@angular/common", 19 | "@npm//@angular/core", 20 | "@npm//@types/google.visualization", 21 | "@org_xprof//frontend/app/common/angular:angular_material_form_field", 22 | "@org_xprof//frontend/app/common/angular:angular_material_icon", 23 | "@org_xprof//frontend/app/common/angular:angular_material_input", 24 | ], 25 | ) 26 | 27 | sass_binary( 28 | name = "string_filter_css", 29 | src = "string_filter.scss", 30 | # stack = False, 31 | sourcemap = False, 32 | deps = [ 33 | "@org_xprof//frontend/app/styles:common", 34 | ], 35 | ) 36 | -------------------------------------------------------------------------------- /frontend/app/components/controls/string_filter/string_filter.ng.html: -------------------------------------------------------------------------------- 1 | 2 | {{columnLabel}} 3 | 8 | search 9 | 10 | -------------------------------------------------------------------------------- /frontend/app/components/controls/string_filter/string_filter.scss: -------------------------------------------------------------------------------- 1 | /** CSS for string filter component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | mat-icon { 6 | color: $button-focus-color; 7 | vertical-align: bottom; 8 | } 9 | 10 | // This control class never works for unknown reason 11 | // added inline style instead 12 | .control { 13 | width: 240px; 14 | margin-right: 8px; 15 | } 16 | -------------------------------------------------------------------------------- /frontend/app/components/controls/string_filter/string_filter_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatIconModule} from '@angular/material/icon'; 4 | import {MatFormFieldModule} from '@angular/material/form-field'; 5 | import {MatInputModule} from '@angular/material/input'; 6 | 7 | import {StringFilter} from './string_filter'; 8 | 9 | /** A string filter module. */ 10 | @NgModule({ 11 | declarations: [StringFilter], 12 | imports: [ 13 | CommonModule, 14 | MatFormFieldModule, 15 | MatIconModule, 16 | MatInputModule, 17 | ], 18 | exports: [StringFilter], 19 | }) 20 | export class StringFilterModule { 21 | } 22 | -------------------------------------------------------------------------------- /frontend/app/components/diagnostics_view/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "diagnostics_view", 8 | srcs = [ 9 | "diagnostics_view.ts", 10 | "diagnostics_view_module.ts", 11 | ], 12 | assets = [ 13 | ":diagnostics_view_css", 14 | "diagnostics_view.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@org_xprof//frontend/app/common/interfaces", 19 | ], 20 | ) 21 | 22 | sass_binary( 23 | name = "diagnostics_view_css", 24 | src = "diagnostics_view.scss", 25 | # stack = False, 26 | sourcemap = False, 27 | deps = [ 28 | "@org_xprof//frontend/app/styles:common", 29 | ], 30 | ) 31 | -------------------------------------------------------------------------------- /frontend/app/components/diagnostics_view/diagnostics_view.ng.html: -------------------------------------------------------------------------------- 1 |
2 |
Errors
3 |
  • 4 |
    • 5 |
    6 |
    7 |
    Warnings
    8 |
  • 9 |
    • 10 |
    11 |
    12 |
    Info
    13 |
  • 14 |
    • 15 |
    16 | -------------------------------------------------------------------------------- /frontend/app/components/diagnostics_view/diagnostics_view.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a diagnostics view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | .callout { 6 | padding: 0; 7 | border-left: none !important; 8 | border-radius: 4px; 9 | } 10 | 11 | .callout header { 12 | color: #fff; 13 | line-height: 24px; 14 | font-weight: 500; 15 | padding: 8px 16px; 16 | margin: 0; 17 | text-transform: uppercase; 18 | border-radius: 4px 4px 0 0; 19 | } 20 | 21 | .callout p { 22 | padding: 16px; 23 | margin: 0; 24 | font-size: 14px; 25 | } 26 | 27 | .callout > :not(:first-child) { 28 | padding: 12px 24px; 29 | } 30 | 31 | .callout.is-critical { 32 | border-color: #dd0031; 33 | background: rgba(221, 0, 49, 0.05); 34 | } 35 | 36 | .callout.is-critical header { 37 | background: #dd0031; 38 | } 39 | 40 | .callout.is-important { 41 | border-color: #ff9800; 42 | background: rgba(255, 152, 0, 0.05); 43 | } 44 | 45 | .callout.is-important header { 46 | background: #ffa000; 47 | } 48 | 49 | .callout.is-helpful { 50 | border-color: #1976d2; 51 | background: rgba(25, 118, 210, 0.05); 52 | } 53 | 54 | .callout.is-helpful header { 55 | background: #1976d2; 56 | } 57 | -------------------------------------------------------------------------------- /frontend/app/components/diagnostics_view/diagnostics_view.ts: -------------------------------------------------------------------------------- 1 | import {Component, Input} from '@angular/core'; 2 | import {type Diagnostics} from 'org_xprof/frontend/app/common/interfaces/diagnostics'; 3 | 4 | /** An diagnostics view component. */ 5 | @Component({ 6 | standalone: false, 7 | selector: 'diagnostics-view', 8 | templateUrl: './diagnostics_view.ng.html', 9 | styleUrls: ['./diagnostics_view.scss'] 10 | }) 11 | export class DiagnosticsView { 12 | /** Error and warning messages for diagnosing profiling issues */ 13 | @Input() diagnostics: Diagnostics = {info: [], warnings: [], errors: []}; 14 | } 15 | -------------------------------------------------------------------------------- /frontend/app/components/diagnostics_view/diagnostics_view_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {DiagnosticsView} from './diagnostics_view'; 4 | 5 | @NgModule({ 6 | declarations: [DiagnosticsView], 7 | imports: [CommonModule], 8 | exports: [DiagnosticsView] 9 | }) 10 | export class DiagnosticsViewModule { 11 | } 12 | -------------------------------------------------------------------------------- /frontend/app/components/empty_page/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "empty_page", 8 | srcs = [ 9 | "empty_page.ts", 10 | "empty_page_module.ts", 11 | ], 12 | assets = [ 13 | ":empty_page_css", 14 | "empty_page.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@org_xprof//frontend/app/common/interfaces", 19 | "@org_xprof//frontend/app/components/capture_profile", 20 | ], 21 | ) 22 | 23 | sass_binary( 24 | name = "empty_page_css", 25 | src = "empty_page.scss", 26 | # stack = False, 27 | sourcemap = False, 28 | deps = [ 29 | "@org_xprof//frontend/app/styles:common", 30 | ], 31 | ) 32 | -------------------------------------------------------------------------------- /frontend/app/components/empty_page/empty_page.scss: -------------------------------------------------------------------------------- 1 | /** CSS for an empty page component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | } 8 | 9 | .container { 10 | max-width: 540px; 11 | margin: 80px auto 0 auto; 12 | } 13 | -------------------------------------------------------------------------------- /frontend/app/components/empty_page/empty_page.ts: -------------------------------------------------------------------------------- 1 | import 'org_xprof/frontend/app/common/interfaces/window'; 2 | import {Component} from '@angular/core'; 3 | 4 | /** An empty page component. */ 5 | @Component({ 6 | standalone: false, 7 | selector: 'empty-page', 8 | templateUrl: './empty_page.ng.html', 9 | styleUrls: ['./empty_page.css'] 10 | }) 11 | export class EmptyPage { 12 | inColab = !!(window.parent.TENSORBOARD_ENV || {}).IN_COLAB; 13 | } 14 | -------------------------------------------------------------------------------- /frontend/app/components/empty_page/empty_page_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | 4 | import {CaptureProfileModule} from 'org_xprof/frontend/app/components/capture_profile/capture_profile_module'; 5 | 6 | import {EmptyPage} from './empty_page'; 7 | 8 | /** An empty page module. */ 9 | @NgModule({ 10 | declarations: [EmptyPage], 11 | imports: [ 12 | CommonModule, 13 | CaptureProfileModule, 14 | ], 15 | exports: [EmptyPage] 16 | }) 17 | export class EmptyPageModule { 18 | } 19 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/flop_rate_chart/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "flop_rate_chart", 8 | srcs = [ 9 | "flop_rate_chart.ts", 10 | "flop_rate_chart_module.ts", 11 | ], 12 | assets = [ 13 | ":flop_rate_chart_css", 14 | "flop_rate_chart.ng.html", 15 | ], 16 | # strict_templates = False, 17 | deps = [ 18 | "@npm//@angular/core", 19 | "@org_xprof//frontend/app/common/interfaces", 20 | "@org_xprof//frontend/app/common/interfaces:chart", 21 | "@org_xprof//frontend/app/components/chart", 22 | "@org_xprof//frontend/app/components/chart:chart_options", 23 | "@org_xprof//frontend/app/components/chart:data_processor", 24 | "@org_xprof//frontend/app/components/chart:default_data_provider", 25 | ], 26 | ) 27 | 28 | sass_binary( 29 | name = "flop_rate_chart_css", 30 | src = "flop_rate_chart.scss", 31 | # stack = False, 32 | sourcemap = False, 33 | ) 34 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/flop_rate_chart/flop_rate_chart.ng.html: -------------------------------------------------------------------------------- 1 |
    MEASURED GFLOPS/SEC OF {{opType}} OPERATIONS ON DEVICE
    2 | 3 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/flop_rate_chart/flop_rate_chart.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a flop rate chart view component. */ 2 | 3 | :host { 4 | display: block; 5 | width: 550px; 6 | height: fit-content; 7 | margin: 8px 8px 8px 0; 8 | } 9 | 10 | .chart { 11 | margin-top: -16px; 12 | } 13 | 14 | .mat-title { 15 | text-transform: uppercase; 16 | } 17 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/flop_rate_chart/flop_rate_chart_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart'; 3 | 4 | import {FlopRateChart} from './flop_rate_chart'; 5 | 6 | @NgModule({ 7 | declarations: [FlopRateChart], 8 | imports: [ChartModule], 9 | exports: [FlopRateChart], 10 | }) 11 | export class FlopRateChartModule { 12 | } 13 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/framework_op_stats.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a tensorflow stats component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | } 8 | 9 | .section-container { 10 | padding: 20px; 11 | } 12 | 13 | .header-content { 14 | font-style: italic; 15 | margin-top: -16px; 16 | } 17 | 18 | .row { 19 | display: flex; 20 | } 21 | 22 | .flex-space { 23 | flex: 1; 24 | } 25 | 26 | .mat-mdc-raised-button { 27 | @include box-shadow-none; 28 | @include border-black; 29 | border-radius: 0; 30 | color: $button-focus-color; 31 | } 32 | 33 | .idle-button-container { 34 | margin-top: -16px; 35 | } 36 | 37 | model-properties { 38 | min-width: 550px; 39 | } 40 | 41 | .pie-chart { 42 | width: 450px; 43 | height: fit-content; 44 | margin: 8px 8px 8px 0; 45 | } 46 | 47 | .pie-chart .description { 48 | margin-top: -16px; 49 | } 50 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/model_properties/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "model_properties", 8 | srcs = [ 9 | "model_properties.ts", 10 | "model_properties_module.ts", 11 | ], 12 | assets = [ 13 | ":model_properties_css", 14 | "model_properties.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@npm//@types/google.visualization", 19 | ], 20 | ) 21 | 22 | sass_binary( 23 | name = "model_properties_css", 24 | src = "model_properties.scss", 25 | # stack = False, 26 | sourcemap = False, 27 | ) 28 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/model_properties/model_properties.ng.html: -------------------------------------------------------------------------------- 1 |
    2 |
    Model Properties
    3 |

    Task: {{task}}

    4 |

    Architecture: {{architecture}}

    5 |

    NOTE: These are heuristic-based results. Please file a bug if incorrect.

    6 |
    7 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/model_properties/model_properties.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a model properties view component. */ 2 | 3 | :host { 4 | display: block; 5 | width: 350px; 6 | height: fit-content; 7 | margin: 8px 8px 8px 0; 8 | } 9 | 10 | p { 11 | font-size: 14px; 12 | } 13 | 14 | b { 15 | font-weight: 500; 16 | } 17 | 18 | .note { 19 | font-style: italic; 20 | } 21 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/model_properties/model_properties.ts: -------------------------------------------------------------------------------- 1 | import {Component, Input} from '@angular/core'; 2 | 3 | /** A model properties view component. */ 4 | @Component({ 5 | standalone: false, 6 | selector: 'model-properties', 7 | templateUrl: './model_properties.ng.html', 8 | styleUrls: ['./model_properties.scss'] 9 | }) 10 | export class ModelProperties { 11 | /** The architecture of a model. */ 12 | @Input() architecture: string = ''; 13 | 14 | /** The task of a model. */ 15 | @Input() task: string = ''; 16 | } 17 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/model_properties/model_properties_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | 3 | import {ModelProperties} from './model_properties'; 4 | 5 | @NgModule({ 6 | declarations: [ModelProperties], 7 | imports: [], 8 | exports: [ModelProperties], 9 | }) 10 | export class ModelPropertiesModule { 11 | } 12 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/operations_table/operations_table.ng.html: -------------------------------------------------------------------------------- 1 |
    {{title}}
    2 | 3 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/operations_table/operations_table.scss: -------------------------------------------------------------------------------- 1 | /** CSS for an operations table component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | padding: 20px; 8 | } 9 | 10 | .table { 11 | border: 1px solid $border-color; 12 | width: fit-content; 13 | } 14 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/operations_table/operations_table_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart'; 3 | 4 | import {OperationsTable} from './operations_table'; 5 | 6 | @NgModule({ 7 | declarations: [OperationsTable], 8 | imports: [ChartModule], 9 | exports: [OperationsTable], 10 | }) 11 | export class OperationsTableModule { 12 | } 13 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/stats_table/stats_table.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a stats table component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | padding: 20px; 8 | } 9 | 10 | mat-form-field { 11 | margin: 0 8px; 12 | } 13 | 14 | mat-icon { 15 | color: $button-focus-color; 16 | vertical-align: bottom; 17 | } 18 | 19 | .table { 20 | border: 1px solid $border-color; 21 | } 22 | -------------------------------------------------------------------------------- /frontend/app/components/framework_op_stats/stats_table/stats_table_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatIconModule} from '@angular/material/icon'; 4 | import {MatFormFieldModule} from '@angular/material/form-field'; 5 | import {MatInputModule} from '@angular/material/input'; 6 | import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart'; 7 | 8 | import {StatsTable} from './stats_table'; 9 | 10 | @NgModule({ 11 | declarations: [StatsTable], 12 | imports: [ 13 | CommonModule, 14 | MatFormFieldModule, 15 | MatIconModule, 16 | MatInputModule, 17 | ChartModule, 18 | ], 19 | exports: [StatsTable], 20 | }) 21 | export class StatsTableModule { 22 | } 23 | -------------------------------------------------------------------------------- /frontend/app/components/graph_viewer/graph_config/graph_config.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a graph config form component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | .mat-subheading-2 { 6 | margin-bottom: 0; 7 | } 8 | 9 | mat-checkbox { 10 | padding: 5 0; 11 | } 12 | 13 | .row { 14 | display: flex; 15 | } 16 | 17 | .actions { 18 | padding: 20px 0; 19 | } 20 | 21 | .search-button { 22 | // Override the MDC button style (not using palette contrast color somehow) 23 | // Seems fixed in higher angular versions 24 | // TODO(yinzz) remove this override once it's fixed 25 | color: white; 26 | } 27 | -------------------------------------------------------------------------------- /frontend/app/components/graph_viewer/graph_config/graph_config_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {FormsModule} from '@angular/forms'; 4 | import {MatIconModule} from '@angular/material/icon'; 5 | import {MatButtonModule} from '@angular/material/button'; 6 | import {MatCheckboxModule} from '@angular/material/checkbox'; 7 | import {MatOptionModule} from '@angular/material/core'; 8 | import {MatFormFieldModule} from '@angular/material/form-field'; 9 | import {MatInputModule} from '@angular/material/input'; 10 | import {MatSelectModule} from '@angular/material/select'; 11 | import {MatTooltipModule} from '@angular/material/tooltip'; 12 | import {MatSidenavModule} from '@angular/material/sidenav'; 13 | 14 | import {GraphConfig} from './graph_config'; 15 | 16 | @NgModule({ 17 | imports: [ 18 | CommonModule, 19 | FormsModule, 20 | MatButtonModule, 21 | MatCheckboxModule, 22 | MatFormFieldModule, 23 | MatIconModule, 24 | MatInputModule, 25 | MatOptionModule, 26 | MatSelectModule, 27 | MatSidenavModule, 28 | MatTooltipModule, 29 | ], 30 | declarations: [GraphConfig], 31 | exports: [GraphConfig] 32 | }) 33 | export class GraphConfigModule { 34 | } 35 | -------------------------------------------------------------------------------- /frontend/app/components/graph_viewer/hlo_text_view/hlo_text_view.ng.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Check HLO Full Text 4 | 5 |
    6 | 15 |
    16 |
    17 |
    18 |
    {{loadingMessage}}
    19 | 20 | 21 |
    22 |
    {{ getDownloadStatusMessage() }}
    23 | 24 |
    25 |     26 | -------------------------------------------------------------------------------- /frontend/app/components/graph_viewer/hlo_text_view/hlo_text_view.scss: -------------------------------------------------------------------------------- 1 | /** CSS for an hlo-text-view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | .hlo-text-area { 6 | position: relative; 7 | height: 40vh; /* Viewport-relative units */ 8 | width: 100%; 9 | } 10 | 11 | .hlo-text-view-panel { 12 | box-shadow: none; 13 | border-bottom: 0.5px solid silver; 14 | border-radius: 0; 15 | } 16 | 17 | .hlo-text-load-button-container { 18 | margin-bottom: 10px; 19 | } 20 | 21 | .hlo-text-load-button { 22 | margin-right: 10px; 23 | } 24 | 25 | mat-progress-bar { 26 | width: 300px; 27 | margin: 0 auto; 28 | } 29 | 30 | .loading-message { 31 | width: fit-content; 32 | margin: 0 auto; 33 | } 34 | 35 | .progress-container { 36 | position: absolute; 37 | width: 100%; 38 | margin: 300 0; 39 | z-index: 1; 40 | } 41 | 42 | .hlo-text-load-status { 43 | padding: 10px; 44 | } 45 | -------------------------------------------------------------------------------- /frontend/app/components/graph_viewer/hlo_text_view/hlo_text_view_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatButtonModule} from '@angular/material/button'; 4 | import {MatExpansionModule} from '@angular/material/expansion'; 5 | import {MatFormFieldModule} from '@angular/material/form-field'; 6 | import {MatProgressBarModule} from '@angular/material/progress-bar'; 7 | import {MatTooltipModule} from '@angular/material/tooltip'; 8 | 9 | import {HloTextView} from './hlo_text_view'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | MatExpansionModule, 15 | MatTooltipModule, 16 | MatButtonModule, 17 | MatProgressBarModule, 18 | MatFormFieldModule, 19 | ], 20 | declarations: [HloTextView], 21 | exports: [HloTextView], 22 | }) 23 | export class HloTextViewModule {} 24 | -------------------------------------------------------------------------------- /frontend/app/components/hlo_stats/hlo_stats.scss: -------------------------------------------------------------------------------- 1 | /** CSS for an hlo stats component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | } 8 | 9 | .section-container { 10 | padding: 20px; 11 | } 12 | 13 | .header-content { 14 | font-style: italic; 15 | margin-top: -16px; 16 | } 17 | 18 | .row { 19 | display: flex; 20 | align-content: center; 21 | } 22 | 23 | .flex-space { 24 | flex: 1; 25 | } 26 | 27 | .pie-chart { 28 | height: fit-content; 29 | margin: 8px 8px 8px 0; 30 | width: 450px; 31 | } 32 | 33 | .table { 34 | border: 1px solid $border-color; 35 | margin: 0 16px; 36 | } 37 | 38 | .table-columns-control { 39 | width: fit-content; 40 | margin-right: 8px; 41 | } 42 | -------------------------------------------------------------------------------- /frontend/app/components/inference_profile/inference_profile.scss: -------------------------------------------------------------------------------- 1 | @import 'frontend/app/styles/common'; 2 | 3 | :host { 4 | padding: 20px; 5 | } 6 | 7 | .section-container { 8 | margin: 20px; 9 | } 10 | 11 | .model-selector { 12 | width: 50%; 13 | min-width: 300px; 14 | } 15 | 16 | .row { 17 | margin-top: 10px; 18 | } 19 | 20 | .session_text { 21 | width: 100%; 22 | } 23 | 24 | mat-progress-bar { 25 | width: 300px; 26 | margin: 0 auto; 27 | } 28 | -------------------------------------------------------------------------------- /frontend/app/components/inference_profile/inference_profile_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatOptionModule} from '@angular/material/core'; 4 | import {MatProgressBarModule} from '@angular/material/progress-bar'; 5 | import {MatSelectModule} from '@angular/material/select'; 6 | import {MatSidenavModule} from '@angular/material/sidenav'; 7 | import {TableModule} from 'org_xprof/frontend/app/components/chart/table/table_module'; 8 | 9 | import {InferenceProfile} from './inference_profile'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | TableModule, 15 | MatOptionModule, 16 | MatSelectModule, 17 | MatSidenavModule, 18 | MatProgressBarModule, 19 | ], 20 | declarations: [InferenceProfile], 21 | exports: [InferenceProfile], 22 | }) 23 | export class InferenceProfileModule { 24 | } 25 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/analysis_summary/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "analysis_summary", 8 | srcs = [ 9 | "analysis_summary.ts", 10 | "analysis_summary_module.ts", 11 | ], 12 | assets = [ 13 | ":analysis_summary_css", 14 | "analysis_summary.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@org_xprof//frontend/app/common/interfaces", 19 | ], 20 | ) 21 | 22 | sass_binary( 23 | name = "analysis_summary_css", 24 | src = "analysis_summary.scss", 25 | # stack = False, 26 | sourcemap = False, 27 | deps = [ 28 | "@org_xprof//frontend/app/styles:common", 29 | ], 30 | ) 31 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/analysis_summary/analysis_summary.ng.html: -------------------------------------------------------------------------------- 1 |
    Summary of input-pipeline analysis
    2 |
    {{inputConclusion}}
    3 |
    4 |
    Recommendation for next step:
    5 |
    6 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/analysis_summary/analysis_summary.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a summary of input pipeline analysis component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | padding: 20px; 8 | } 9 | 10 | .summary-conclusion { 11 | font-style: italic; 12 | margin-top: -16px; 13 | } 14 | 15 | .summary-nextstep { 16 | margin-top: -16px; 17 | } 18 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/analysis_summary/analysis_summary_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | 3 | import {AnalysisSummary} from './analysis_summary'; 4 | 5 | @NgModule( 6 | {declarations: [AnalysisSummary], imports: [], exports: [AnalysisSummary]}) 7 | export class AnalysisSummaryModule { 8 | } 9 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/device_side_analysis_detail/device_side_analysis_detail.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a device-side analysis detail view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | padding: 20px; 8 | } 9 | 10 | .content-container { 11 | margin-left: 32px; 12 | margin-top: -16px; 13 | } 14 | 15 | .content-container .mat-title { 16 | margin-bottom: 0; 17 | } 18 | 19 | .sub-section-title { 20 | font-size: 22px; 21 | margin-left: 8px; 22 | } 23 | 24 | .description { 25 | margin-bottom: 4px; 26 | } 27 | 28 | .chart { 29 | margin-left: -52px; 30 | } 31 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/device_side_analysis_detail/device_side_analysis_detail_data_provider.ts: -------------------------------------------------------------------------------- 1 | import {SimpleDataTable} from 'org_xprof/frontend/app/common/interfaces/data_table'; 2 | import {DefaultDataProvider} from 'org_xprof/frontend/app/components/chart/default_data_provider'; 3 | 4 | /** A device side analysis detail data provider. */ 5 | export class DeviceSideAnalysisDetailDataProvider extends DefaultDataProvider { 6 | columnIds: string[] = []; 7 | 8 | setColumnIds(columnIds: string[]) { 9 | this.columnIds = columnIds; 10 | } 11 | 12 | override parseData(data: SimpleDataTable|Array>|null) { 13 | if (!data) return; 14 | const dataTable = new google.visualization.DataTable(data); 15 | 16 | let i = 0; 17 | while (i < dataTable.getNumberOfColumns()) { 18 | if (!this.columnIds.includes(dataTable.getColumnId(i))) { 19 | dataTable.removeColumn(i); 20 | continue; 21 | } 22 | i++; 23 | } 24 | 25 | this.dataTable = dataTable; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/device_side_analysis_detail/device_side_analysis_detail_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart'; 3 | 4 | import {DeviceSideAnalysisDetail} from './device_side_analysis_detail'; 5 | 6 | @NgModule({ 7 | declarations: [DeviceSideAnalysisDetail], 8 | imports: [ChartModule], 9 | exports: [DeviceSideAnalysisDetail], 10 | }) 11 | export class DeviceSideAnalysisDetailModule { 12 | } 13 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/host_op/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "host_op", 8 | srcs = [ 9 | "host_op.ts", 10 | "host_op_module.ts", 11 | ], 12 | assets = [ 13 | ":host_op_css", 14 | "host_op.ng.html", 15 | ], 16 | # strict_templates = False, 17 | deps = [ 18 | "@npm//@angular/core", 19 | "@org_xprof//frontend/app/common/angular:angular_material_core", 20 | "@org_xprof//frontend/app/common/angular:angular_material_divider", 21 | "@org_xprof//frontend/app/common/angular:angular_material_select", 22 | "@org_xprof//frontend/app/common/interfaces", 23 | "@org_xprof//frontend/app/common/interfaces:chart", 24 | "@org_xprof//frontend/app/components/chart", 25 | "@org_xprof//frontend/app/components/chart:default_data_provider", 26 | ], 27 | ) 28 | 29 | sass_binary( 30 | name = "host_op_css", 31 | src = "host_op.scss", 32 | # stack = True, 33 | sourcemap = False, 34 | deps = [ 35 | "@org_xprof//frontend/app/styles:common", 36 | ], 37 | ) 38 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/host_op/host_op.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a host-op section view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/host_op/host_op_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatOptionModule} from '@angular/material/core'; 4 | import {MatDividerModule} from '@angular/material/divider'; 5 | import {MatSelectModule} from '@angular/material/select'; 6 | import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart'; 7 | 8 | import {HostOp} from './host_op'; 9 | 10 | @NgModule({ 11 | declarations: [HostOp], 12 | imports: [ 13 | CommonModule, 14 | MatDividerModule, 15 | MatSelectModule, 16 | MatOptionModule, 17 | ChartModule, 18 | ], 19 | exports: [HostOp], 20 | }) 21 | export class HostOpModule {} 22 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/host_side_analysis_detail/host_side_analysis_detail.ng.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    Host-side analysis details
    4 |
    5 |
    Breakdown of input processing time on the host
    6 | 9 | 10 |
    What can be done to reduce above components of the host input time:
    11 |
    12 |
    13 |
    14 |
    15 |
    16 | 17 | 18 | 19 | Input Op statistics 20 | 21 | 22 | 23 |
    24 |
    25 | 26 |
    27 |
    Host-side analysis details
    28 |

    Host side analysis can not be done without instrumentation.

    29 |
    30 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/host_side_analysis_detail/host_side_analysis_detail.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a host-side analysis detail view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | mat-expansion-panel { 6 | @include overview-card; 7 | margin: 0; 8 | } 9 | 10 | mat-expansion-panel-header { 11 | margin: 8px 8px 0 8px; 12 | } 13 | 14 | mat-panel-title { 15 | @include overview-card-title; 16 | background-color: transparent; 17 | } 18 | 19 | mat-expansion-panel-header.cdk-keyboard-focused, 20 | mat-expansion-panel:not(.mat-expanded) mat-expansion-panel-header:hover { 21 | background-color: $card-title-focus-background-color !important; 22 | } 23 | 24 | .mat-expanded mat-expansion-panel-header { 25 | border-bottom-left-radius: 0; 26 | border-bottom-right-radius: 0; 27 | } 28 | 29 | .section-container { 30 | @include border-bottom-gray; 31 | padding: 20px; 32 | } 33 | 34 | .content-container { 35 | margin-left: 32px; 36 | } 37 | 38 | .column-chart, .recommendations { 39 | color: $content-primary-color; 40 | margin-top: -16px; 41 | } 42 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/host_side_analysis_detail/host_side_analysis_detail_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatExpansionModule} from '@angular/material/expansion'; 4 | import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart'; 5 | 6 | import {HostSideAnalysisDetail} from './host_side_analysis_detail'; 7 | 8 | @NgModule({ 9 | declarations: [HostSideAnalysisDetail], 10 | imports: [ 11 | CommonModule, 12 | MatExpansionModule, 13 | ChartModule, 14 | ], 15 | exports: [HostSideAnalysisDetail] 16 | }) 17 | export class HostSideAnalysisDetailModule { 18 | } 19 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/input_pipeline.ng.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 | 5 |
    6 | 10 | 11 | 12 |
    13 | 14 | 15 | 16 |
    17 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/input_pipeline.scss: -------------------------------------------------------------------------------- 1 | /** CSS for an input pipeline component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | } 8 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/max_infeed_detail/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "max_infeed_detail", 8 | srcs = [ 9 | "max_infeed_detail.ts", 10 | "max_infeed_detail_module.ts", 11 | ], 12 | assets = [ 13 | ":max_infeed_detail_css", 14 | "max_infeed_detail.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@npm//@types/google.visualization", 19 | "@org_xprof//frontend/app/common/angular:angular_material_divider", 20 | "@org_xprof//frontend/app/common/interfaces", 21 | ], 22 | ) 23 | 24 | sass_binary( 25 | name = "max_infeed_detail_css", 26 | src = "max_infeed_detail.scss", 27 | # stack = True, 28 | sourcemap = False, 29 | deps = [ 30 | "@org_xprof//frontend/app/styles:common", 31 | ], 32 | ) 33 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/max_infeed_detail/max_infeed_detail.ng.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | The TPU core that has the maximum infeed time at each step (Core name in the form of "hostname:core-id"): 4 |
    5 |
    6 | 7 |
    8 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/max_infeed_detail/max_infeed_detail.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a max-infeed-detail view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | .sub-section-title { 6 | font-size: 22px; 7 | margin-left: 8px; 8 | } 9 | -------------------------------------------------------------------------------- /frontend/app/components/input_pipeline/max_infeed_detail/max_infeed_detail_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {MatDividerModule} from '@angular/material/divider'; 3 | import {MaxInfeedDetail} from './max_infeed_detail'; 4 | 5 | @NgModule({ 6 | declarations: [MaxInfeedDetail], 7 | imports: [MatDividerModule], 8 | exports: [MaxInfeedDetail], 9 | }) 10 | export class MaxInfeedDetailModule {} 11 | -------------------------------------------------------------------------------- /frontend/app/components/kernel_stats/kernel_stats.ng.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |
    GPU Kernel Stats
    5 |
    6 |
    7 | 8 |
    9 |
    10 | 11 |
    12 | 13 | 14 | 15 |
    16 | 17 |
    18 | There is no GPU data to display because there were no kernels in the capture duration. 19 |
    20 | -------------------------------------------------------------------------------- /frontend/app/components/kernel_stats/kernel_stats.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a kernel stats component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | } 8 | 9 | .section-container { 10 | padding: 20px; 11 | } 12 | 13 | .row { 14 | display: flex; 15 | } 16 | 17 | .flex-space { 18 | flex: 1; 19 | } 20 | -------------------------------------------------------------------------------- /frontend/app/components/kernel_stats/kernel_stats.ts: -------------------------------------------------------------------------------- 1 | import {Component, Input} from '@angular/core'; 2 | import {Store} from '@ngrx/store'; 3 | import {SimpleDataTable} from 'org_xprof/frontend/app/common/interfaces/data_table'; 4 | import {getKernelStatsDataState} from 'org_xprof/frontend/app/store/common_data_store/selectors'; 5 | 6 | /** A Kernel Stats component. */ 7 | @Component({ 8 | standalone: false, 9 | selector: 'kernel-stats', 10 | templateUrl: './kernel_stats.ng.html', 11 | styleUrls: ['./kernel_stats.css'] 12 | }) 13 | export class KernelStats { 14 | data: SimpleDataTable|null = null; 15 | hasDataRow = false; 16 | @Input() sessionId = ''; 17 | @Input() tool = ''; 18 | @Input() host = ''; 19 | 20 | constructor(store: Store<{}>) { 21 | store.select(getKernelStatsDataState) 22 | .subscribe((data: SimpleDataTable|null) => { 23 | this.update(data); 24 | }); 25 | } 26 | 27 | update(data: SimpleDataTable|null) { 28 | this.data = data; 29 | this.hasDataRow = !!(data) && !!(data.rows) && data.rows.length > 0; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /frontend/app/components/kernel_stats/kernel_stats_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {MatDividerModule} from '@angular/material/divider'; 3 | import {ExportAsCsvModule} from 'org_xprof/frontend/app/components/controls/export_as_csv/export_as_csv_module'; 4 | import {KernelStatsTableModule} from 'org_xprof/frontend/app/components/kernel_stats/kernel_stats_table/kernel_stats_table_module'; 5 | 6 | import {KernelStats} from './kernel_stats'; 7 | 8 | /** A kernel stats module. */ 9 | @NgModule({ 10 | declarations: [KernelStats], 11 | imports: [ 12 | MatDividerModule, 13 | ExportAsCsvModule, 14 | KernelStatsTableModule, 15 | ], 16 | exports: [KernelStats] 17 | }) 18 | export class KernelStatsModule { 19 | } 20 | -------------------------------------------------------------------------------- /frontend/app/components/kernel_stats/kernel_stats_table/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "kernel_stats_table", 8 | srcs = [ 9 | "kernel_stats_table.ts", 10 | "kernel_stats_table_module.ts", 11 | ], 12 | assets = [ 13 | ":kernel_stats_table_css", 14 | "kernel_stats_table.ng.html", 15 | ], 16 | # strict_templates = False, 17 | deps = [ 18 | "@npm//@angular/core", 19 | "@npm//@types/google.visualization", 20 | "@org_xprof//frontend/app/common/angular:angular_material_form_field", 21 | "@org_xprof//frontend/app/common/angular:angular_material_icon", 22 | "@org_xprof//frontend/app/common/angular:angular_material_input", 23 | "@org_xprof//frontend/app/common/interfaces", 24 | ], 25 | ) 26 | 27 | sass_binary( 28 | name = "kernel_stats_table_css", 29 | src = "kernel_stats_table.scss", 30 | # stack = False, 31 | sourcemap = False, 32 | deps = [ 33 | "@org_xprof//frontend/app/styles:common", 34 | ], 35 | ) 36 | -------------------------------------------------------------------------------- /frontend/app/components/kernel_stats/kernel_stats_table/kernel_stats_table.ng.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 8 | search 9 | 10 | 11 | 16 | search 17 | 18 |
    19 |
    20 |
    21 |
    22 |
    23 | -------------------------------------------------------------------------------- /frontend/app/components/kernel_stats/kernel_stats_table/kernel_stats_table.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a kernel stats table component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | padding: 20px; 8 | } 9 | 10 | mat-form-field { 11 | margin: 0 8px; 12 | } 13 | 14 | mat-icon { 15 | color: $button-focus-color; 16 | vertical-align: bottom; 17 | } 18 | 19 | .table { 20 | border: 1px solid $border-color; 21 | } 22 | -------------------------------------------------------------------------------- /frontend/app/components/kernel_stats/kernel_stats_table/kernel_stats_table_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {MatIconModule} from '@angular/material/icon'; 3 | import {MatFormFieldModule} from '@angular/material/form-field'; 4 | import {MatInputModule} from '@angular/material/input'; 5 | 6 | import {KernelStatsTable} from './kernel_stats_table'; 7 | 8 | @NgModule({ 9 | declarations: [KernelStatsTable], 10 | imports: [ 11 | MatFormFieldModule, 12 | MatIconModule, 13 | MatInputModule, 14 | ], 15 | exports: [KernelStatsTable] 16 | }) 17 | export class KernelStatsTableModule { 18 | } 19 | -------------------------------------------------------------------------------- /frontend/app/components/main_page/main_page.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a main page component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | mat-sidenav-container { 6 | background-color: #fff; 7 | } 8 | 9 | mat-sidenav { 10 | background: transparent; 11 | width: 340px; 12 | @include border-right-gray 13 | } 14 | 15 | mat-progress-bar { 16 | width: 300px; 17 | margin: 0 auto; 18 | } 19 | 20 | .progress-container { 21 | padding: 50px; 22 | } 23 | 24 | .loading-message { 25 | width: fit-content; 26 | margin: 0 auto; 27 | } 28 | 29 | .profiler-toolbar { 30 | background-color: transparent; 31 | border-bottom: solid 1px #eee; 32 | } 33 | 34 | .toolbar-spacer { 35 | flex: 1 1 auto; 36 | } 37 | 38 | .sidenav-toggle-button { 39 | cursor: pointer; 40 | border: none; 41 | background: transparent; 42 | } 43 | -------------------------------------------------------------------------------- /frontend/app/components/megascale_stats/megascale_stats.scss: -------------------------------------------------------------------------------- 1 | /** CSS for megascale_stats component. */ 2 | @import 'frontend/app/styles/common'; 3 | 4 | .section-container { 5 | padding: 20px; 6 | } 7 | 8 | chart { 9 | margin: 0 16px; 10 | } 11 | -------------------------------------------------------------------------------- /frontend/app/components/megascale_stats/megascale_stats_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart'; 3 | 4 | import {MegascaleStats} from './megascale_stats'; 5 | 6 | /** A Megascale Stats module. */ 7 | @NgModule({ 8 | declarations: [MegascaleStats], 9 | imports: [ 10 | ChartModule, 11 | ], 12 | exports: [MegascaleStats], 13 | }) 14 | export class MegascaleStatsModule { 15 | } 16 | -------------------------------------------------------------------------------- /frontend/app/components/memory_profile/memory_breakdown_table/memory_breakdown_table.ng.html: -------------------------------------------------------------------------------- 1 |
    2 |
    Memory Breakdown Table
    3 | 4 | 10 | search 11 | 12 |
    13 |
    14 | Note: Showing active memory allocations at peak usage within the profiling window. To avoid 15 | sluggishness, only the allocations with size over 1MiB are shown in the table below. 16 |
    17 |
    18 |
    19 |
    20 |
    21 | -------------------------------------------------------------------------------- /frontend/app/components/memory_profile/memory_breakdown_table/memory_breakdown_table.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a memory breakdown table component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | padding: 20px; 8 | } 9 | 10 | mat-form-field { 11 | margin: 0 8px; 12 | } 13 | 14 | mat-icon { 15 | color: $button-focus-color; 16 | vertical-align: bottom; 17 | } 18 | 19 | .table { 20 | margin: 0 -20px; 21 | } 22 | -------------------------------------------------------------------------------- /frontend/app/components/memory_profile/memory_breakdown_table/memory_breakdown_table_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {MatIconModule} from '@angular/material/icon'; 3 | import {MatFormFieldModule} from '@angular/material/form-field'; 4 | import {MatInputModule} from '@angular/material/input'; 5 | 6 | import {MemoryBreakdownTable} from './memory_breakdown_table'; 7 | 8 | @NgModule({ 9 | declarations: [MemoryBreakdownTable], 10 | imports: [ 11 | MatFormFieldModule, 12 | MatIconModule, 13 | MatInputModule, 14 | ], 15 | exports: [MemoryBreakdownTable] 16 | }) 17 | export class MemoryBreakdownTableModule { 18 | } 19 | -------------------------------------------------------------------------------- /frontend/app/components/memory_profile/memory_profile.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a memory profile component. */ 2 | 3 | @import 'frontend/app/components/memory_profile/memory_profile_common'; 4 | -------------------------------------------------------------------------------- /frontend/app/components/memory_profile/memory_profile_base.ts: -------------------------------------------------------------------------------- 1 | import {MemoryProfileProto} from 'org_xprof/frontend/app/common/interfaces/data_table'; 2 | 3 | /** Base class of Memory Profile component. */ 4 | export class MemoryProfileBase { 5 | data: MemoryProfileProto|null = null; 6 | hasMemoryData = false; 7 | memoryIds: string[] = []; 8 | selectedMemoryId = ''; 9 | 10 | parseData(data: MemoryProfileProto|null) { 11 | this.data = data; 12 | if (data && data.memoryIds && data.numHosts) { 13 | if (data.numHosts > 0 && data.memoryIds.length > 0) { 14 | this.hasMemoryData = true; 15 | this.memoryIds = data.memoryIds; 16 | if (this.selectedMemoryId === '') { 17 | this.selectedMemoryId = data.memoryIds[0]; 18 | } 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /frontend/app/components/memory_profile/memory_profile_common.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a memory profile component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | } 8 | 9 | mat-form-field { 10 | width: 80px; 11 | margin-left: -10px; 12 | } 13 | 14 | .error-message { 15 | color: red; 16 | font-size: 0.5cm; 17 | font-weight: bolder; 18 | margin-top: 0.5cm; 19 | margin-bottom: 0.5cm; 20 | text-align: center; 21 | } 22 | 23 | .container { 24 | display: flex; 25 | flex-wrap: wrap; 26 | width: 100%; 27 | } 28 | 29 | .left-column { 30 | display: flex; 31 | flex-direction: column; 32 | width: 33.333%; 33 | } 34 | 35 | .right-column { 36 | display: flex; 37 | flex-direction: column; 38 | width: 66.667%; 39 | } 40 | 41 | .full-column { 42 | @include border-right-gray; 43 | width: 100%; 44 | } 45 | 46 | @media screen and (max-width: 860px) { 47 | :host { 48 | width: fit-content; 49 | } 50 | } 51 | 52 | @media screen and (max-width: 1140px) { 53 | .left-column, 54 | .right-column { 55 | width: 100%; 56 | } 57 | } 58 | 59 | .mat-subheading-2 { 60 | padding-left: 10px; 61 | margin-top: 10px; 62 | margin-bottom: 0; 63 | } 64 | 65 | .mat-mdc-form-field { 66 | padding-left: 10px; 67 | } 68 | -------------------------------------------------------------------------------- /frontend/app/components/memory_profile/memory_profile_summary/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "memory_profile_summary", 8 | srcs = [ 9 | "memory_profile_summary.ts", 10 | "memory_profile_summary_module.ts", 11 | ], 12 | assets = [ 13 | ":memory_profile_summary_css", 14 | "memory_profile_summary.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@org_xprof//frontend/app/common/angular:angular_material_card", 19 | "@org_xprof//frontend/app/common/angular:angular_material_icon", 20 | "@org_xprof//frontend/app/common/angular:angular_material_tooltip", 21 | "@org_xprof//frontend/app/common/interfaces", 22 | "@org_xprof//frontend/app/common/utils", 23 | ], 24 | ) 25 | 26 | sass_binary( 27 | name = "memory_profile_summary_css", 28 | src = "memory_profile_summary.scss", 29 | # stack = False, 30 | sourcemap = False, 31 | deps = [ 32 | "@org_xprof//frontend/app/styles:common", 33 | ], 34 | ) 35 | -------------------------------------------------------------------------------- /frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a memory profile summary view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | @include border-bottom-gray; 7 | @include border-right-gray; 8 | flex-grow: 1; 9 | } 10 | 11 | mat-card { 12 | @include overview-card; 13 | @include overview-card-height; 14 | } 15 | 16 | mat-card-title { 17 | @include overview-card-title; 18 | margin-bottom: 25px; 19 | } 20 | 21 | :host ::ng-deep b { 22 | font-weight: 500; 23 | } 24 | 25 | ul { 26 | @include ul-flat; 27 | } 28 | 29 | :host ::ng-deep .item-container { 30 | margin-bottom: 16px; 31 | } 32 | 33 | :host ::ng-deep .item-container > table { 34 | border-spacing: 0; 35 | width: 100%; 36 | } 37 | 38 | :host ::ng-deep .item-container > td { 39 | padding: 0; 40 | } 41 | 42 | :host ::ng-deep .item-value { 43 | padding-left: 0px; 44 | min-width: 100px; 45 | width: 20%; 46 | font-size: 18px; 47 | font-weight: 500; 48 | } 49 | 50 | .flops-utilization-tooltip-target { 51 | color: #e8710a; 52 | border-bottom: 1px dotted #e8710a; 53 | } 54 | 55 | .tooltip-icon-container { 56 | position: relative; 57 | } 58 | 59 | .tooltip-icon { 60 | color: #e8710a; 61 | font-size: 20px; 62 | vertical-align: bottom; 63 | cursor: pointer; 64 | } 65 | 66 | -------------------------------------------------------------------------------- /frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatCardModule} from '@angular/material/card'; 4 | import {MatIconModule} from '@angular/material/icon'; 5 | import {MatTooltipModule} from '@angular/material/tooltip'; 6 | 7 | import {MemoryProfileSummary} from './memory_profile_summary'; 8 | 9 | @NgModule({ 10 | declarations: [MemoryProfileSummary], 11 | imports: [CommonModule, MatCardModule, MatTooltipModule, MatIconModule], 12 | exports: [MemoryProfileSummary] 13 | }) 14 | export class MemoryProfileSummaryModule { 15 | } 16 | -------------------------------------------------------------------------------- /frontend/app/components/memory_profile/memory_timeline_graph/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "memory_timeline_graph", 8 | srcs = [ 9 | "memory_timeline_graph.ts", 10 | "memory_timeline_graph_module.ts", 11 | ], 12 | assets = [ 13 | ":memory_timeline_graph_css", 14 | "memory_timeline_graph.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@npm//@types/google.visualization", 19 | "@org_xprof//frontend/app/common/angular:angular_material_card", 20 | "@org_xprof//frontend/app/common/interfaces", 21 | "@org_xprof//frontend/app/common/utils", 22 | ], 23 | ) 24 | 25 | sass_binary( 26 | name = "memory_timeline_graph_css", 27 | src = "memory_timeline_graph.scss", 28 | # stack = False, 29 | sourcemap = False, 30 | deps = [ 31 | "@org_xprof//frontend/app/styles:common", 32 | ], 33 | ) 34 | -------------------------------------------------------------------------------- /frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph.ng.html: -------------------------------------------------------------------------------- 1 | 2 | {{ title }} 3 | 4 |
    5 | Tips: Zoom in: left click and drag; Zoom out: right click; Metadata: click on heap data point. 6 |
    7 |
    8 |     9 |     10 | -------------------------------------------------------------------------------- /frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a memory timeline graph view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | @include border-bottom-gray; 7 | @include border-right-gray; 8 | flex-grow: 1; 9 | } 10 | 11 | mat-card { 12 | @include overview-card; 13 | @include overview-card-height; 14 | } 15 | 16 | mat-card-title { 17 | @include overview-card-title; 18 | } 19 | 20 | .chart { 21 | margin: 0 auto; 22 | max-width: 1500px; 23 | } 24 | -------------------------------------------------------------------------------- /frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {MatCardModule} from '@angular/material/card'; 3 | 4 | import {MemoryTimelineGraph} from './memory_timeline_graph'; 5 | 6 | @NgModule({ 7 | declarations: [MemoryTimelineGraph], 8 | imports: [MatCardModule], 9 | exports: [MemoryTimelineGraph] 10 | }) 11 | export class MemoryTimelineGraphModule { 12 | } 13 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "memory_viewer", 8 | srcs = [ 9 | "memory_viewer.ts", 10 | "memory_viewer_module.ts", 11 | ], 12 | assets = [ 13 | ":memory_viewer_css", 14 | "memory_viewer.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@npm//@angular/router", 19 | "@npm//@ngrx/store", 20 | "@npm//rxjs", 21 | "@org_xprof//frontend/app/common/interfaces", 22 | "@org_xprof//frontend/app/components/memory_viewer/memory_usage", 23 | "@org_xprof//frontend/app/components/memory_viewer/memory_viewer_control", 24 | "@org_xprof//frontend/app/components/memory_viewer/memory_viewer_main", 25 | "@org_xprof//frontend/app/services/data_service", 26 | "@org_xprof//frontend/app/store", 27 | ], 28 | ) 29 | 30 | sass_binary( 31 | name = "memory_viewer_css", 32 | src = "memory_viewer.scss", 33 | # stack = False, 34 | sourcemap = False, 35 | # strict_deps = False, 36 | deps = [ 37 | "@org_xprof//frontend/app/styles:common", 38 | ], 39 | ) 40 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/buffer_details/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "buffer_details", 8 | srcs = [ 9 | "buffer_details.ts", 10 | "buffer_details_module.ts", 11 | ], 12 | assets = [ 13 | ":buffer_details_css", 14 | "buffer_details.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@npm//@ngrx/store", 19 | "@npm//rxjs", 20 | "@org_xprof//frontend/app/common/angular:angular_material_button", 21 | "@org_xprof//frontend/app/common/angular:angular_material_card", 22 | "@org_xprof//frontend/app/common/interfaces", 23 | "@org_xprof//frontend/app/common/utils", 24 | "@org_xprof//frontend/app/store", 25 | ], 26 | ) 27 | 28 | sass_binary( 29 | name = "buffer_details_css", 30 | src = "buffer_details.scss", 31 | # stack = False, 32 | sourcemap = False, 33 | deps = [ 34 | "@org_xprof//frontend/app/styles:common", 35 | ], 36 | ) 37 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/buffer_details/buffer_details.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a buffer details view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | margin-top: 20px; 8 | } 9 | 10 | mat-card { 11 | @include detail-card; 12 | } 13 | 14 | .info-header { 15 | padding: 16px; 16 | display: flex; 17 | } 18 | 19 | .info-header-circle { 20 | display: inline-block; 21 | width: 40px; 22 | height: 40px; 23 | border-radius: 20px; 24 | margin: 5px 10px 5px 0; 25 | } 26 | 27 | .info-header-content-container { 28 | display: inline-block; 29 | width: 260px; 30 | height: 50px; 31 | position: relative; 32 | } 33 | 34 | .info-header-content { 35 | position: absolute; 36 | top: 50%; 37 | transform: translateY(-50%); 38 | } 39 | 40 | .info-header-title { 41 | font-size: 20px; 42 | font-weight: 500; 43 | } 44 | 45 | .info-header-subheader { 46 | color: $content-primary-color; 47 | font-style: italic; 48 | } 49 | 50 | .info-content { 51 | color: $content-primary-color; 52 | font-size: 16px; 53 | padding: 16px; 54 | word-break: break-word; 55 | } 56 | 57 | .info { 58 | margin-bottom: 16px; 59 | } 60 | 61 | .title { 62 | font-weight: 500; 63 | margin-bottom: 4px; 64 | } 65 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/buffer_details/buffer_details_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {MatButtonModule} from '@angular/material/button'; 3 | import {MatCardModule} from '@angular/material/card'; 4 | 5 | import {BufferDetails} from './buffer_details'; 6 | 7 | /** A buffer details view module. */ 8 | @NgModule({ 9 | declarations: [BufferDetails], 10 | imports: [ 11 | MatCardModule, 12 | MatButtonModule, 13 | ], 14 | exports: [BufferDetails] 15 | }) 16 | export class BufferDetailsModule { 17 | } 18 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/max_heap_chart/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "max_heap_chart", 8 | srcs = [ 9 | "max_heap_chart.ts", 10 | "max_heap_chart_module.ts", 11 | ], 12 | allow_warnings = True, 13 | assets = [ 14 | ":max_heap_chart_css", 15 | "max_heap_chart.ng.html", 16 | ], 17 | deps = [ 18 | "@npm//@angular/core", 19 | "@npm//@types/google.visualization", 20 | "@org_xprof//frontend/app/common/interfaces", 21 | "@org_xprof//frontend/app/common/utils", 22 | ], 23 | ) 24 | 25 | sass_binary( 26 | name = "max_heap_chart_css", 27 | src = "max_heap_chart.scss", 28 | # stack = False, 29 | sourcemap = False, 30 | deps = [ 31 | "@org_xprof//frontend/app/styles:common", 32 | ], 33 | ) 34 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/max_heap_chart/max_heap_chart.ng.html: -------------------------------------------------------------------------------- 1 |
    2 |
    {{title}} ({{maxHeap?.length}})
    3 |
    Hover over a bar for buffer details to appear on the left.
    4 |
    5 |
    6 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/max_heap_chart/max_heap_chart.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a max heap chart view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | margin: 20px; 8 | } 9 | 10 | .description { 11 | margin-top: -16px; 12 | } 13 | 14 | .chart { 15 | margin-top: 24px; 16 | width: 1200px; 17 | height: 100px; 18 | } 19 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/max_heap_chart/max_heap_chart_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | 3 | import {MaxHeapChart} from './max_heap_chart'; 4 | 5 | @NgModule({declarations: [MaxHeapChart], exports: [MaxHeapChart]}) 6 | export class MaxHeapChartModule { 7 | } 8 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/memory_usage/BUILD: -------------------------------------------------------------------------------- 1 | load("@npm//@bazel/concatjs:index.bzl", "ts_library") 2 | 3 | package(default_visibility = ["//frontend:internal"]) 4 | 5 | ts_library( 6 | name = "memory_usage", 7 | srcs = [ 8 | "memory_usage.ts", 9 | ], 10 | deps = [ 11 | "@org_xprof//frontend/app/common/interfaces", 12 | "@org_xprof//frontend/app/common/utils", 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/memory_viewer.ng.html: -------------------------------------------------------------------------------- 1 | 5 | 11 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/memory_viewer.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a memory viewer component. */ 2 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/memory_viewer_control/memory_viewer_control.ng.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
    Memory Types (7)
    4 | 5 | 10 | HBM 11 | CMEM 12 | Sflag 13 | VMEM 14 | SMEM 15 | Host 16 | SparseCore 17 | 18 | 19 |
    20 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/memory_viewer_control/memory_viewer_control.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a side control component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | .item-container { 6 | padding: 20px 20px 0; 7 | } 8 | 9 | .mat-subheading-2 { 10 | margin-bottom: 0; 11 | } 12 | 13 | .flex-space { 14 | flex: 1; 15 | } 16 | 17 | .row { 18 | display: flex; 19 | } 20 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/memory_viewer_control/memory_viewer_control_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatOptionModule} from '@angular/material/core'; 4 | import {MatFormFieldModule} from '@angular/material/form-field'; 5 | import {MatSelectModule} from '@angular/material/select'; 6 | 7 | import {MemoryViewerControl} from './memory_viewer_control'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | MatFormFieldModule, 13 | MatSelectModule, 14 | MatOptionModule, 15 | ], 16 | declarations: [MemoryViewerControl], 17 | exports: [MemoryViewerControl], 18 | }) 19 | export class MemoryViewerControlModule { 20 | } 21 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/memory_viewer_main/memory_viewer_main.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a memory viewer main component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | } 8 | 9 | .section-container { 10 | padding: 20px; 11 | } 12 | 13 | .sub-title { 14 | font-weight: 500; 15 | } 16 | 17 | .control-title { 18 | color: $content-secondary-color; 19 | margin-bottom: 5px; 20 | } 21 | 22 | .row { 23 | display: flex; 24 | } 25 | 26 | .flex-space { 27 | flex: 1; 28 | } 29 | 30 | .control { 31 | padding: 20; 32 | } 33 | 34 | .heap-chart-header { 35 | margin: 20px; 36 | } 37 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/memory_viewer_main/memory_viewer_main_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {FormsModule} from '@angular/forms'; 3 | import {MatCheckboxModule} from '@angular/material/checkbox'; 4 | import {MatDividerModule} from '@angular/material/divider'; 5 | import {MatIconModule} from '@angular/material/icon'; 6 | import {DiagnosticsViewModule} from 'org_xprof/frontend/app/components/diagnostics_view/diagnostics_view_module'; 7 | import {MaxHeapChartModule} from 'org_xprof/frontend/app/components/memory_viewer/max_heap_chart/max_heap_chart_module'; 8 | import {ProgramOrderChartModule} from 'org_xprof/frontend/app/components/memory_viewer/program_order_chart/program_order_chart_module'; 9 | 10 | import {MemoryViewerMain} from './memory_viewer_main'; 11 | 12 | /** A memory viewer module. */ 13 | @NgModule({ 14 | declarations: [MemoryViewerMain], 15 | imports: [ 16 | DiagnosticsViewModule, 17 | FormsModule, 18 | MatDividerModule, 19 | MaxHeapChartModule, 20 | MatCheckboxModule, 21 | MatIconModule, 22 | ProgramOrderChartModule, 23 | ], 24 | exports: [MemoryViewerMain] 25 | }) 26 | export class MemoryViewerMainModule { 27 | } 28 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/memory_viewer_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {MemoryViewerControlModule} from 'org_xprof/frontend/app/components/memory_viewer/memory_viewer_control/memory_viewer_control_module'; 3 | import {MemoryViewerMainModule} from 'org_xprof/frontend/app/components/memory_viewer/memory_viewer_main/memory_viewer_main_module'; 4 | 5 | import {MemoryViewer} from './memory_viewer'; 6 | 7 | /** A memory viewer module. */ 8 | @NgModule({ 9 | declarations: [MemoryViewer], 10 | imports: [ 11 | MemoryViewerMainModule, 12 | MemoryViewerControlModule, 13 | ], 14 | exports: [MemoryViewer] 15 | }) 16 | export class MemoryViewerModule { 17 | } 18 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/program_order_chart/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "program_order_chart", 8 | srcs = [ 9 | "program_order_chart.ts", 10 | "program_order_chart_module.ts", 11 | ], 12 | assets = [ 13 | ":program_order_chart_css", 14 | "program_order_chart.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@npm//@types/google.visualization", 19 | "@org_xprof//frontend/app/common/interfaces", 20 | "@org_xprof//frontend/app/common/interfaces:chart", 21 | "@org_xprof//frontend/app/components/chart", 22 | "@org_xprof//frontend/app/components/chart:default_data_provider", 23 | ], 24 | ) 25 | 26 | sass_binary( 27 | name = "program_order_chart_css", 28 | src = "program_order_chart.scss", 29 | # stack = False, 30 | sourcemap = False, 31 | deps = [ 32 | "@org_xprof//frontend/app/styles:common", 33 | ], 34 | ) 35 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/program_order_chart/program_order_chart.ng.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |

    Memory Allocation Size (MiB) vs Program Order (HLO Sequence)

    4 |
    timeline
    5 |
    6 |
    7 | 8 | 9 | 10 |
    11 |
    12 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/program_order_chart/program_order_chart.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a program order chart view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | margin: 20px; 8 | } 9 | 10 | .chart-container { 11 | position: relative; 12 | width: 1200px; 13 | height: 380px; 14 | } 15 | 16 | .chart-title-container { 17 | display: flex; 18 | align-items: center; 19 | } 20 | 21 | .timeline-link { 22 | padding: 10px; 23 | cursor: pointer; 24 | } 25 | 26 | .chart { 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | width: 1200px; 31 | height: 380px; 32 | } 33 | -------------------------------------------------------------------------------- /frontend/app/components/memory_viewer/program_order_chart/program_order_chart_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart'; 3 | 4 | import {ProgramOrderChart} from './program_order_chart'; 5 | 6 | @NgModule({ 7 | declarations: [ProgramOrderChart], 8 | imports: [ 9 | ChartModule, 10 | ], 11 | exports: [ProgramOrderChart] 12 | }) 13 | export class ProgramOrderChartModule { 14 | } 15 | -------------------------------------------------------------------------------- /frontend/app/components/op_profile/op_details/op_details_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatButtonModule} from '@angular/material/button'; 4 | import {MatCardModule} from '@angular/material/card'; 5 | import {MatIconModule} from '@angular/material/icon'; 6 | import {MatTooltipModule} from '@angular/material/tooltip'; 7 | 8 | import {OpDetails} from './op_details'; 9 | 10 | /** An op details view module. */ 11 | @NgModule({ 12 | declarations: [OpDetails], 13 | imports: [ 14 | CommonModule, 15 | MatCardModule, 16 | MatIconModule, 17 | MatButtonModule, 18 | MatTooltipModule, 19 | ], 20 | exports: [OpDetails] 21 | }) 22 | export class OpDetailsModule { 23 | } 24 | -------------------------------------------------------------------------------- /frontend/app/components/op_profile/op_profile.ng.html: -------------------------------------------------------------------------------- 1 | 2 | 5 |
    6 |
    7 |     8 |     9 | -------------------------------------------------------------------------------- /frontend/app/components/op_profile/op_profile_base_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatFormFieldModule} from '@angular/material/form-field'; 4 | import {MatIconModule} from '@angular/material/icon'; 5 | import {MatInputModule} from '@angular/material/input'; 6 | import {MatSidenavModule} from '@angular/material/sidenav'; 7 | import {MatSlideToggleModule} from '@angular/material/slide-toggle'; 8 | import {MatTooltipModule} from '@angular/material/tooltip'; 9 | 10 | import {OpProfileBase} from './op_profile_base'; 11 | import {OpTableModule} from './op_table/op_table_module'; 12 | 13 | /** An op profile module. */ 14 | @NgModule({ 15 | declarations: [OpProfileBase], 16 | imports: [ 17 | MatFormFieldModule, 18 | MatInputModule, 19 | MatSlideToggleModule, 20 | OpTableModule, 21 | MatIconModule, 22 | MatTooltipModule, 23 | MatSidenavModule, 24 | CommonModule, 25 | ], 26 | exports: [OpProfileBase] 27 | }) 28 | export class OpProfileBaseModule { 29 | } 30 | -------------------------------------------------------------------------------- /frontend/app/components/op_profile/op_table/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "op_table", 8 | srcs = [ 9 | "op_table.ts", 10 | "op_table_module.ts", 11 | ], 12 | assets = [ 13 | ":op_table_css", 14 | "op_table.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/common", 18 | "@npm//@angular/core", 19 | "@npm//@ngrx/store", 20 | "@org_xprof//frontend/app/common/angular:angular_material_tooltip", 21 | "@org_xprof//frontend/app/common/interfaces:op_profile_proto_defs", 22 | "@org_xprof//frontend/app/components/op_profile/op_table_entry", 23 | "@org_xprof//frontend/app/store", 24 | ], 25 | ) 26 | 27 | sass_binary( 28 | name = "op_table_css", 29 | src = "op_table.scss", 30 | # stack = False, 31 | sourcemap = False, 32 | deps = [ 33 | "@org_xprof//frontend/app/components/op_profile:op_profile_common", 34 | ], 35 | ) 36 | -------------------------------------------------------------------------------- /frontend/app/components/op_profile/op_table/op_table.scss: -------------------------------------------------------------------------------- 1 | /** CSS for an op talbe view component. */ 2 | 3 | @import 'frontend/app/components/op_profile/op_profile_common'; 4 | 5 | .header { 6 | display: flex; 7 | align-items: center; 8 | font-size: smaller; 9 | font-weight: bold; 10 | color: #666; 11 | padding-bottom: .25em; 12 | text-transform: uppercase; 13 | white-space: nowrap; 14 | } 15 | 16 | .header > * { 17 | padding: .5em .5em 0; 18 | overflow: hidden; 19 | flex-shrink: 0; 20 | box-sizing: border-box; 21 | } 22 | -------------------------------------------------------------------------------- /frontend/app/components/op_profile/op_table/op_table_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {OpTableEntryModule} from 'org_xprof/frontend/app/components/op_profile/op_table_entry/op_table_entry_module'; 3 | import {MatTooltipModule} from '@angular/material/tooltip'; 4 | 5 | import {OpTable} from './op_table'; 6 | 7 | /** An op table view module. */ 8 | @NgModule({ 9 | declarations: [OpTable], 10 | imports: [OpTableEntryModule, MatTooltipModule], 11 | exports: [OpTable] 12 | }) 13 | export class OpTableModule { 14 | } 15 | -------------------------------------------------------------------------------- /frontend/app/components/op_profile/op_table_entry/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "op_table_entry", 8 | srcs = [ 9 | "op_table_entry.ts", 10 | "op_table_entry_module.ts", 11 | ], 12 | assets = [ 13 | ":op_table_entry_css", 14 | "op_table_entry.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/common", 18 | "@npm//@angular/core", 19 | "@npm//@ngrx/store", 20 | "@org_xprof//frontend/app/common/interfaces:op_profile_proto_defs", 21 | "@org_xprof//frontend/app/common/utils", 22 | "@org_xprof//frontend/app/store", 23 | ], 24 | ) 25 | 26 | sass_binary( 27 | name = "op_table_entry_css", 28 | src = "op_table_entry.scss", 29 | # stack = False, 30 | sourcemap = False, 31 | deps = [ 32 | "@org_xprof//frontend/app/components/op_profile:op_profile_common", 33 | ], 34 | ) 35 | -------------------------------------------------------------------------------- /frontend/app/components/op_profile/op_table_entry/op_table_entry.scss: -------------------------------------------------------------------------------- 1 | /** CSS for an op talbe entry view component. */ 2 | 3 | @import 'frontend/app/components/op_profile/op_profile_common'; 4 | 5 | :host { 6 | color: $content-primary-color; 7 | } 8 | 9 | .row { 10 | display: flex; 11 | align-self: center; 12 | position: relative; 13 | border-top: 1px solid #eee; 14 | z-index: 0; 15 | } 16 | 17 | .row.expanded { 18 | background-color: rgba(0, 0, 0, 0.04); 19 | font-weight: bold; 20 | } 21 | 22 | .row:hover { 23 | background-color: rgba(0, 0, 0, 0.05); 24 | } 25 | 26 | .row > * { 27 | padding: 0.5em; 28 | overflow: hidden; 29 | flex-shrink: 0; 30 | box-sizing: border-box; 31 | } 32 | 33 | .bar { 34 | position: absolute; 35 | top: 0; 36 | left: 0; 37 | bottom: 0; 38 | z-index: -2; 39 | background-color: #cde; 40 | padding: 0 !important; 41 | } 42 | 43 | .row-focus { 44 | position: absolute; 45 | top: 0; 46 | left: 0; 47 | bottom: 0; 48 | z-index: -1; 49 | width: 8px; 50 | background-color: #e8710a; 51 | padding: 0 !important; 52 | } 53 | 54 | .leftout { 55 | padding-left: 175px; 56 | font-style: italic; 57 | } 58 | -------------------------------------------------------------------------------- /frontend/app/components/op_profile/op_table_entry/op_table_entry_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | 4 | import {OpTableEntry} from './op_table_entry'; 5 | 6 | /** An op table entry view module. */ 7 | @NgModule({ 8 | declarations: [OpTableEntry], 9 | imports: [CommonModule], 10 | exports: [OpTableEntry] 11 | }) 12 | export class OpTableEntryModule { 13 | } 14 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/inference_latency_chart/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "inference_latency_chart", 8 | srcs = [ 9 | "inference_latency_chart.ts", 10 | "inference_latency_chart_module.ts", 11 | ], 12 | assets = [ 13 | ":inference_latency_chart_css", 14 | "inference_latency_chart.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@npm//@types/google.visualization", 19 | "@org_xprof//frontend/app/common/angular:angular_material_card", 20 | "@org_xprof//frontend/app/common/interfaces", 21 | ], 22 | ) 23 | 24 | sass_binary( 25 | name = "inference_latency_chart_css", 26 | src = "inference_latency_chart.scss", 27 | # stack = True, 28 | sourcemap = False, 29 | deps = [ 30 | "@org_xprof//frontend/app/styles:common", 31 | ], 32 | ) 33 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/inference_latency_chart/inference_latency_chart.ng.html: -------------------------------------------------------------------------------- 1 | 2 | {{title}} 3 | 4 |
    5 |     6 |     7 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/inference_latency_chart/inference_latency_chart.scss: -------------------------------------------------------------------------------- 1 | /** CSS for an inference latency chart view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | @include border-bottom-gray; 7 | @include border-right-gray; 8 | } 9 | 10 | :host:not(.dark-theme) { 11 | mat-card { 12 | @include overview-card; 13 | } 14 | } 15 | 16 | mat-card { 17 | @include overview-card-height; 18 | } 19 | 20 | mat-card-title { 21 | @include overview-card-title; 22 | } 23 | 24 | .chart { 25 | margin: 0 auto; 26 | max-width: 800px; 27 | } 28 | 29 | :host.dark-theme { 30 | border: none; 31 | 32 | mat-card { 33 | @include overview-card-dark-theme; 34 | } 35 | 36 | mat-card-title { 37 | background-color: $dark-theme-card-title-background-color; 38 | color: $dark-theme-card-title-color; 39 | padding: 16px; 40 | margin: -16px -16px 16px; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/inference_latency_chart/inference_latency_chart_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {MatCardModule} from '@angular/material/card'; 3 | 4 | import {InferenceLatencyChart} from './inference_latency_chart'; 5 | 6 | @NgModule({ 7 | declarations: [InferenceLatencyChart], 8 | imports: [MatCardModule], 9 | exports: [InferenceLatencyChart], 10 | }) 11 | export class InferenceLatencyChartModule {} 12 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/normalized_accelerator_performance_view/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "normalized_accelerator_performance_view", 8 | srcs = [ 9 | "normalized_accelerator_performance_view.ts", 10 | "normalized_accelerator_performance_view_module.ts", 11 | ], 12 | assets = [ 13 | ":normalized_accelerator_performance_view_css", 14 | "normalized_accelerator_performance_view.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/common", 18 | "@npm//@angular/core", 19 | "@org_xprof//frontend/app/common/angular:angular_material_expansion", 20 | "@org_xprof//frontend/app/common/interfaces", 21 | ], 22 | ) 23 | 24 | sass_binary( 25 | name = "normalized_accelerator_performance_view_css", 26 | src = "normalized_accelerator_performance_view.scss", 27 | # stack = False, 28 | sourcemap = False, 29 | deps = [ 30 | "@org_xprof//frontend/app/styles:common", 31 | ], 32 | ) 33 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/normalized_accelerator_performance_view/normalized_accelerator_performance_view.ng.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{title}} 4 | 5 |
    6 |

    7 | Background: 8 |

    9 |
      10 |
    • 11 |
    12 |
    13 |

    14 | Total NAPs/GCUs of the accelerator system profiled:
    15 | = {{info}}
     16 |

    17 |

    18 | Compute Cost (lower is better):
    19 | = {{info}}
     20 |

    21 |

    22 | Compute Productivity (higher is better):
    23 | = {{info}}
     24 |

    25 |     26 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/normalized_accelerator_performance_view/normalized_accelerator_performance_view_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatExpansionModule} from '@angular/material/expansion'; 4 | 5 | import {NormalizedAcceleratorPerformanceView} from './normalized_accelerator_performance_view'; 6 | 7 | /** A normalized accelerator performance view module. */ 8 | @NgModule({ 9 | declarations: [NormalizedAcceleratorPerformanceView], 10 | imports: [ 11 | CommonModule, 12 | MatExpansionModule, 13 | ], 14 | exports: [NormalizedAcceleratorPerformanceView] 15 | }) 16 | export class NormalizedAcceleratorPerformanceViewModule { 17 | } 18 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/overview_page.ng.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/overview_page.scss: -------------------------------------------------------------------------------- 1 | /** CSS for an overview page component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | padding-top: 10px; 8 | } 9 | 10 | .container { 11 | display: flex; 12 | flex-wrap: wrap; 13 | align-items: start; 14 | width: 100%; 15 | } 16 | 17 | .left-column { 18 | display: flex; 19 | flex-direction: column; 20 | width: 33.333%; 21 | } 22 | 23 | .right-column { 24 | display: flex; 25 | flex-direction: column; 26 | width: 66.667%; 27 | } 28 | 29 | .full-column { 30 | @include border-right-gray; 31 | width: 100%; 32 | } 33 | 34 | @media screen and (max-width: 860px) { 35 | :host { 36 | width: fit-content; 37 | } 38 | } 39 | 40 | @media screen and (max-width: 1140px) { 41 | .left-column, 42 | .right-column { 43 | width: 100%; 44 | } 45 | } 46 | 47 | .key-label { 48 | font-weight: 500; 49 | } 50 | 51 | .value-label { 52 | word-break: break-all; 53 | } 54 | 55 | .job-information-level1 { 56 | padding-left: 20px; 57 | } 58 | 59 | .job-information-level2 { 60 | padding-left: 40px; 61 | } 62 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/overview_page_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {OverviewPageBaseModule} from 'org_xprof/frontend/app/components/overview_page/overview_page_base_module'; 4 | 5 | import {OverviewPage} from './overview_page'; 6 | 7 | /** An overview page module. */ 8 | @NgModule({ 9 | declarations: [OverviewPage], 10 | imports: [ 11 | CommonModule, 12 | OverviewPageBaseModule, 13 | ], 14 | exports: [OverviewPage] 15 | }) 16 | export class OverviewPageModule { 17 | } 18 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/performance_summary/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "performance_summary", 8 | srcs = [ 9 | "performance_summary.ts", 10 | "performance_summary_module.ts", 11 | ], 12 | assets = [ 13 | ":performance_summary_css", 14 | "performance_summary.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/common", 18 | "@npm//@angular/core", 19 | "@org_xprof//frontend/app/common/angular:angular_material_card", 20 | "@org_xprof//frontend/app/common/angular:angular_material_icon", 21 | "@org_xprof//frontend/app/common/angular:angular_material_tooltip", 22 | "@org_xprof//frontend/app/common/interfaces", 23 | ], 24 | ) 25 | 26 | sass_binary( 27 | name = "performance_summary_css", 28 | src = "performance_summary.scss", 29 | # stack = False, 30 | sourcemap = False, 31 | deps = [ 32 | "@org_xprof//frontend/app/styles:common", 33 | ], 34 | ) 35 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/performance_summary/performance_summary_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatIconModule} from '@angular/material/icon'; 4 | import {MatCardModule} from '@angular/material/card'; 5 | import {MatTooltipModule} from '@angular/material/tooltip'; 6 | 7 | import {PerformanceSummary} from './performance_summary'; 8 | 9 | @NgModule({ 10 | declarations: [PerformanceSummary], 11 | imports: [ 12 | CommonModule, 13 | MatCardModule, 14 | MatIconModule, 15 | MatTooltipModule, 16 | ], 17 | exports: [PerformanceSummary] 18 | }) 19 | export class PerformanceSummaryModule { 20 | } 21 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/run_environment_view/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "run_environment_view", 8 | srcs = [ 9 | "run_environment_view.ts", 10 | "run_environment_view_module.ts", 11 | ], 12 | assets = [ 13 | ":run_environment_view_css", 14 | "run_environment_view.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/common", 18 | "@npm//@angular/core", 19 | "@org_xprof//frontend/app/common/angular:angular_material_card", 20 | "@org_xprof//frontend/app/common/interfaces", 21 | ], 22 | ) 23 | 24 | sass_binary( 25 | name = "run_environment_view_css", 26 | src = "run_environment_view.scss", 27 | # stack = False, 28 | sourcemap = False, 29 | deps = [ 30 | "@org_xprof//frontend/app/styles:common", 31 | ], 32 | ) 33 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/run_environment_view/run_environment_view.ng.html: -------------------------------------------------------------------------------- 1 | 2 | {{title}} 3 | 4 |

    5 | Is training job: 6 | {{isTraining}} 7 |

    8 |

    9 | Profile start time (local): 10 | {{profileStartTime}} 11 |

    12 |

    13 | Profile duration (ms): 14 | {{profileDurationMs}} 15 |

    16 |

    17 | Number of Hosts used: {{hostCount}} 18 |

    19 | 20 |

    21 | Device type: {{deviceType}} 22 |

    23 |

    24 | Number of device cores: {{deviceCoreCount}} 25 |

    26 | 27 |

    28 |     29 |     30 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/run_environment_view/run_environment_view.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a run environment view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | @include border-bottom-gray; 7 | @include border-right-gray; 8 | flex-grow: 1; 9 | } 10 | 11 | :host:not(.dark-theme) { 12 | mat-card { 13 | @include overview-card; 14 | } 15 | } 16 | 17 | mat-card { 18 | @include overview-card-height; 19 | } 20 | 21 | mat-card-title { 22 | @include overview-card-title; 23 | } 24 | 25 | b { 26 | font-weight: 500; 27 | } 28 | 29 | :host.dark-theme { 30 | border: none; 31 | 32 | mat-card { 33 | @include overview-card-dark-theme; 34 | } 35 | 36 | mat-card-title { 37 | background-color: $dark-theme-card-title-background-color; 38 | color: $dark-theme-card-title-color; 39 | padding: 16px; 40 | margin: -16px -16px 16px; 41 | } 42 | 43 | .key-label { 44 | font-weight: 500; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/run_environment_view/run_environment_view_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatCardModule} from '@angular/material/card'; 4 | 5 | import {RunEnvironmentView} from './run_environment_view'; 6 | 7 | @NgModule({ 8 | declarations: [RunEnvironmentView], 9 | imports: [MatCardModule, CommonModule], 10 | exports: [RunEnvironmentView] 11 | }) 12 | export class RunEnvironmentViewModule { 13 | } 14 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/step_time_graph/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "step_time_graph", 8 | srcs = [ 9 | "step_time_graph.ts", 10 | "step_time_graph_module.ts", 11 | ], 12 | assets = [ 13 | ":step_time_graph_css", 14 | "step_time_graph.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@npm//@types/google.visualization", 19 | "@org_xprof//frontend/app/common/angular:angular_material_card", 20 | "@org_xprof//frontend/app/common/constants", 21 | "@org_xprof//frontend/app/common/interfaces", 22 | ], 23 | ) 24 | 25 | sass_binary( 26 | name = "step_time_graph_css", 27 | src = "step_time_graph.scss", 28 | # stack = False, 29 | sourcemap = False, 30 | deps = [ 31 | "@org_xprof//frontend/app/styles:common", 32 | ], 33 | ) 34 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/step_time_graph/step_time_graph.ng.html: -------------------------------------------------------------------------------- 1 | 2 | {{title}} 3 | 4 |
    5 |     6 |     7 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/step_time_graph/step_time_graph.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a step-time graph view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | @include border-bottom-gray; 7 | @include border-right-gray; 8 | } 9 | 10 | :host:not(.dark-theme) { 11 | mat-card { 12 | @include overview-card; 13 | } 14 | } 15 | 16 | mat-card { 17 | @include overview-card-height; 18 | } 19 | 20 | mat-card-title { 21 | @include overview-card-title; 22 | } 23 | 24 | .chart { 25 | margin: 0 auto; 26 | max-width: 800px; 27 | } 28 | 29 | :host.dark-theme { 30 | border: none; 31 | 32 | mat-card { 33 | @include overview-card-dark-theme; 34 | } 35 | 36 | mat-card-title { 37 | background-color: $dark-theme-card-title-background-color; 38 | color: $dark-theme-card-title-color; 39 | padding: 16px; 40 | margin: -16px -16px 16px; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /frontend/app/components/overview_page/step_time_graph/step_time_graph_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {MatCardModule} from '@angular/material/card'; 3 | 4 | import {StepTimeGraph} from './step_time_graph'; 5 | 6 | @NgModule({ 7 | declarations: [StepTimeGraph], 8 | imports: [MatCardModule], 9 | exports: [StepTimeGraph] 10 | }) 11 | export class StepTimeGraphModule { 12 | } 13 | -------------------------------------------------------------------------------- /frontend/app/components/pod_viewer/pod_viewer.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a pod viewer component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | } 8 | 9 | .section-container { 10 | padding: 20px; 11 | } 12 | 13 | mat-slider { 14 | width: 200px; 15 | } 16 | 17 | .chart-title { 18 | font-size: 24px; 19 | padding-bottom: 8px; 20 | } 21 | 22 | .control { 23 | color: $content-secondary-color; 24 | } 25 | -------------------------------------------------------------------------------- /frontend/app/components/pod_viewer/pod_viewer_details/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "pod_viewer_details", 8 | srcs = [ 9 | "pod_viewer_details.ts", 10 | "pod_viewer_details_module.ts", 11 | ], 12 | assets = [ 13 | ":pod_viewer_details_css", 14 | "pod_viewer_details.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/common", 18 | "@npm//@angular/core", 19 | "@npm//@ngrx/store", 20 | "@npm//rxjs", 21 | "@org_xprof//frontend/app/common/angular:angular_material_card", 22 | "@org_xprof//frontend/app/common/constants", 23 | "@org_xprof//frontend/app/common/interfaces", 24 | "@org_xprof//frontend/app/common/utils", 25 | "@org_xprof//frontend/app/store", 26 | ], 27 | ) 28 | 29 | sass_binary( 30 | name = "pod_viewer_details_css", 31 | src = "pod_viewer_details.scss", 32 | # stack = False, 33 | sourcemap = False, 34 | deps = [ 35 | "@org_xprof//frontend/app/styles:common", 36 | ], 37 | ) 38 | -------------------------------------------------------------------------------- /frontend/app/components/pod_viewer/pod_viewer_details/pod_viewer_details.ng.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 |
    {{name}}
    5 |
    6 |
    7 |
    {{detail.title}}:
    8 |
    {{detail.value}}
    9 |
    10 |
    11 |
    Hlo Names
    12 | {{hloNames}} 13 |
    14 |
    15 |
    Replica Groups
    16 | {{replicaGroups}} 17 |
    18 |
    19 |
    Description
    20 | {{description}} 21 |
    22 |
    23 |     24 |     25 |
    26 | -------------------------------------------------------------------------------- /frontend/app/components/pod_viewer/pod_viewer_details/pod_viewer_details.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a pod viewer detail view component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | :host { 6 | display: block; 7 | margin-top: 20px; 8 | } 9 | 10 | mat-card { 11 | @include detail-card; 12 | } 13 | 14 | .info-header { 15 | padding: 16px; 16 | font-size: 20px; 17 | font-weight: 500; 18 | } 19 | 20 | .info-content { 21 | color: $content-primary-color; 22 | padding: 16px; 23 | } 24 | 25 | .info { 26 | margin-bottom: 16px; 27 | } 28 | 29 | .title { 30 | font-weight: 500; 31 | margin-bottom: 4px; 32 | } 33 | 34 | .scroll-x-auto { 35 | overflow-x: auto; 36 | } 37 | 38 | code { 39 | font-weight: normal; 40 | } 41 | -------------------------------------------------------------------------------- /frontend/app/components/pod_viewer/pod_viewer_details/pod_viewer_details_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatCardModule} from '@angular/material/card'; 4 | 5 | import {PodViewerDetails} from './pod_viewer_details'; 6 | 7 | /** A pod viewer details view module. */ 8 | @NgModule({ 9 | declarations: [PodViewerDetails], 10 | imports: [ 11 | CommonModule, 12 | MatCardModule, 13 | ], 14 | exports: [PodViewerDetails] 15 | }) 16 | export class PodViewerDetailsModule { 17 | } 18 | -------------------------------------------------------------------------------- /frontend/app/components/pod_viewer/pod_viewer_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatDividerModule} from '@angular/material/divider'; 4 | import {MatSliderModule} from '@angular/material/slider'; 5 | import {DiagnosticsViewModule} from 'org_xprof/frontend/app/components/diagnostics_view/diagnostics_view_module'; 6 | 7 | import {PodViewer} from './pod_viewer'; 8 | import {StackBarChartModule} from './stack_bar_chart/stack_bar_chart_module'; 9 | import {TopologyGraphModule} from './topology_graph/topology_graph_module'; 10 | 11 | /** A pod viewer module. */ 12 | @NgModule({ 13 | declarations: [PodViewer], 14 | imports: [ 15 | CommonModule, 16 | DiagnosticsViewModule, 17 | MatDividerModule, 18 | MatSliderModule, 19 | StackBarChartModule, 20 | TopologyGraphModule, 21 | ], 22 | exports: [PodViewer] 23 | }) 24 | export class PodViewerModule { 25 | } 26 | -------------------------------------------------------------------------------- /frontend/app/components/pod_viewer/stack_bar_chart/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "stack_bar_chart", 8 | srcs = [ 9 | "stack_bar_chart.ts", 10 | "stack_bar_chart_module.ts", 11 | ], 12 | assets = [ 13 | ":stack_bar_chart_css", 14 | "stack_bar_chart.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/core", 18 | "@npm//@types/google.visualization", 19 | "@org_xprof//frontend/app/common/constants", 20 | "@org_xprof//frontend/app/common/interfaces", 21 | ], 22 | ) 23 | 24 | sass_binary( 25 | name = "stack_bar_chart_css", 26 | src = "stack_bar_chart.scss", 27 | # stack = False, 28 | sourcemap = False, 29 | ) 30 | -------------------------------------------------------------------------------- /frontend/app/components/pod_viewer/stack_bar_chart/stack_bar_chart.ng.html: -------------------------------------------------------------------------------- 1 |
    2 |
    6 |
    7 |
    8 | -------------------------------------------------------------------------------- /frontend/app/components/pod_viewer/stack_bar_chart/stack_bar_chart.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a stack bar chart view component. */ 2 | 3 | :host { 4 | display: block; 5 | margin: 20px 0; 6 | } 7 | 8 | .container { 9 | width: 100%; 10 | overflow-x: auto; 11 | overflow-y: hidden; 12 | } 13 | 14 | .chart { 15 | height: 300px; 16 | } 17 | -------------------------------------------------------------------------------- /frontend/app/components/pod_viewer/stack_bar_chart/stack_bar_chart_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | 3 | import {StackBarChart} from './stack_bar_chart'; 4 | 5 | /** A stack bar chart view module. */ 6 | @NgModule({ 7 | declarations: [StackBarChart], 8 | exports: [StackBarChart], 9 | }) 10 | export class StackBarChartModule { 11 | } 12 | -------------------------------------------------------------------------------- /frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatIconModule} from '@angular/material/icon'; 4 | import {MatButtonModule} from '@angular/material/button'; 5 | import {MatFormFieldModule} from '@angular/material/form-field'; 6 | import {MatInputModule} from '@angular/material/input'; 7 | import {MatMenuModule} from '@angular/material/menu'; 8 | import {MatSliderModule} from '@angular/material/slider'; 9 | 10 | import {TopologyGraph} from './topology_graph'; 11 | 12 | /** A topology graph view module. */ 13 | @NgModule({ 14 | declarations: [TopologyGraph], 15 | imports: [ 16 | CommonModule, 17 | MatButtonModule, 18 | MatFormFieldModule, 19 | MatIconModule, 20 | MatInputModule, 21 | MatMenuModule, 22 | MatSliderModule, 23 | ], 24 | exports: [TopologyGraph] 25 | }) 26 | export class TopologyGraphModule { 27 | } 28 | -------------------------------------------------------------------------------- /frontend/app/components/roofline_model/operation_level_analysis/operation_level_analysis.ng.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 | 5 | 6 |
    7 |
    8 | 9 |
    10 | 11 |
    12 |
    13 | -------------------------------------------------------------------------------- /frontend/app/components/roofline_model/operation_level_analysis/operation_level_analysis.scss: -------------------------------------------------------------------------------- 1 | .row { 2 | display: flex; 3 | } 4 | 5 | .flex-space { 6 | flex: 0; 7 | } 8 | -------------------------------------------------------------------------------- /frontend/app/components/roofline_model/operation_level_analysis/operation_level_analysis_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart'; 3 | import {TableModule} from 'org_xprof/frontend/app/components/chart/table/table_module'; 4 | import {CategoryFilterModule} from 'org_xprof/frontend/app/components/controls/category_filter/category_filter_module'; 5 | import {StringFilterModule} from 'org_xprof/frontend/app/components/controls/string_filter/string_filter_module'; 6 | 7 | import {OperationLevelAnalysis} from './operation_level_analysis'; 8 | 9 | @NgModule({ 10 | declarations: [OperationLevelAnalysis], 11 | imports: [CategoryFilterModule, TableModule, StringFilterModule, ChartModule], 12 | exports: [OperationLevelAnalysis], 13 | }) 14 | export class OperationLevelAnalysisModule {} 15 | -------------------------------------------------------------------------------- /frontend/app/components/roofline_model/program_level_analysis/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "program_level_analysis", 8 | srcs = [ 9 | "program_level_analysis.ts", 10 | "program_level_analysis_module.ts", 11 | ], 12 | assets = [ 13 | ":program_level_analysis_css", 14 | "program_level_analysis.ng.html", 15 | ], 16 | # strict_templates = False, 17 | deps = [ 18 | "@npm//@angular/core", 19 | "@org_xprof//frontend/app/common/interfaces", 20 | "@org_xprof//frontend/app/common/interfaces:chart", 21 | "@org_xprof//frontend/app/components/chart", 22 | "@org_xprof//frontend/app/components/chart:chart_options", 23 | "@org_xprof//frontend/app/components/chart:default_data_provider", 24 | "@org_xprof//frontend/app/components/chart/dashboard", 25 | "@org_xprof//frontend/app/components/chart/table", 26 | "@org_xprof//frontend/app/components/controls/category_filter", 27 | ], 28 | ) 29 | 30 | sass_binary( 31 | name = "program_level_analysis_css", 32 | src = "program_level_analysis.scss", 33 | # stack = True, 34 | sourcemap = False, 35 | ) 36 | -------------------------------------------------------------------------------- /frontend/app/components/roofline_model/program_level_analysis/program_level_analysis.ng.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 | 5 |
    6 | -------------------------------------------------------------------------------- /frontend/app/components/roofline_model/program_level_analysis/program_level_analysis.scss: -------------------------------------------------------------------------------- 1 | .row { 2 | display: flex; 3 | } 4 | -------------------------------------------------------------------------------- /frontend/app/components/roofline_model/program_level_analysis/program_level_analysis_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart'; 3 | import {TableModule} from 'org_xprof/frontend/app/components/chart/table/table_module'; 4 | import {CategoryFilterModule} from 'org_xprof/frontend/app/components/controls/category_filter/category_filter_module'; 5 | 6 | import {ProgramLevelAnalysis} from './program_level_analysis'; 7 | 8 | @NgModule({ 9 | declarations: [ProgramLevelAnalysis], 10 | imports: [CategoryFilterModule, TableModule, ChartModule], 11 | exports: [ProgramLevelAnalysis], 12 | }) 13 | export class ProgramLevelAnalysisModule {} 14 | -------------------------------------------------------------------------------- /frontend/app/components/roofline_model/roofline_model.scss: -------------------------------------------------------------------------------- 1 | .section-container { 2 | margin: 20px 20px 0px; 3 | } 4 | 5 | .block-content { 6 | padding: 5px; 7 | } 8 | 9 | .row { 10 | display: flex; 11 | } 12 | 13 | .flex-space { 14 | flex: 1; 15 | } 16 | 17 | .description { 18 | font-size: 14px; 19 | } 20 | 21 | .tableHeaderCell { 22 | word-wrap: break-word; 23 | background-color: azure; //!to hide the scrolled-up text. 24 | } 25 | 26 | .tableTableCell { 27 | word-break: break-all; 28 | } 29 | 30 | .opColumnClass { 31 | max-height: 200px; 32 | overflow-y: auto; 33 | } 34 | 35 | .errorMessage { 36 | border: 2px solid; 37 | background-color: #ffcccb; 38 | color: red; 39 | } 40 | -------------------------------------------------------------------------------- /frontend/app/components/sidenav/sidenav.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a side navigation component. */ 2 | 3 | @import 'frontend/app/styles/common'; 4 | 5 | .button-container { 6 | padding: 20px; 7 | } 8 | 9 | .item-container { 10 | padding: 20px 20px 0 20px; 11 | } 12 | 13 | .mat-subheading-2 { 14 | margin-bottom: 0; 15 | } 16 | -------------------------------------------------------------------------------- /frontend/app/components/sidenav/sidenav_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {MatOptionModule} from '@angular/material/core'; 4 | import {MatFormFieldModule} from '@angular/material/form-field'; 5 | import {MatSelectModule} from '@angular/material/select'; 6 | import {CaptureProfileModule} from 'org_xprof/frontend/app/components/capture_profile/capture_profile_module'; 7 | import {BufferDetailsModule} from 'org_xprof/frontend/app/components/memory_viewer/buffer_details/buffer_details_module'; 8 | import {OpDetailsModule} from 'org_xprof/frontend/app/components/op_profile/op_details/op_details_module'; 9 | import {PodViewerDetailsModule} from 'org_xprof/frontend/app/components/pod_viewer/pod_viewer_details/pod_viewer_details_module'; 10 | 11 | import {SideNav} from './sidenav'; 12 | 13 | /** A side navigation module. */ 14 | @NgModule({ 15 | declarations: [SideNav], 16 | imports: [ 17 | CommonModule, 18 | MatFormFieldModule, 19 | MatSelectModule, 20 | MatOptionModule, 21 | BufferDetailsModule, 22 | CaptureProfileModule, 23 | OpDetailsModule, 24 | PodViewerDetailsModule, 25 | ], 26 | exports: [SideNav] 27 | }) 28 | export class SideNavModule { 29 | } 30 | -------------------------------------------------------------------------------- /frontend/app/components/trace_viewer/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "trace_viewer", 8 | srcs = [ 9 | "trace_viewer.ts", 10 | "trace_viewer_module.ts", 11 | ], 12 | assets = [ 13 | ":trace_viewer_css", 14 | "trace_viewer.ng.html", 15 | ], 16 | deps = [ 17 | "@npm//@angular/common", 18 | "@npm//@angular/core", 19 | "@npm//@angular/router", 20 | "@npm//rxjs", 21 | "@org_xprof//frontend/app/common/angular:angular_common_http", 22 | "@org_xprof//frontend/app/common/constants", 23 | "@org_xprof//frontend/app/common/interfaces", 24 | "@org_xprof//frontend/app/pipes", 25 | "@org_xprof//frontend/app/services/communication_service", 26 | ], 27 | ) 28 | 29 | sass_binary( 30 | name = "trace_viewer_css", 31 | src = "trace_viewer.scss", 32 | # stack = False, 33 | sourcemap = False, 34 | ) 35 | -------------------------------------------------------------------------------- /frontend/app/components/trace_viewer/trace_viewer.ng.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /frontend/app/components/trace_viewer/trace_viewer.scss: -------------------------------------------------------------------------------- 1 | /** CSS for a trace viewer component. */ 2 | 3 | iframe { 4 | position: absolute; 5 | width: 100%; 6 | height: 100%; 7 | box-sizing: border-box; 8 | border-style: unset; 9 | } 10 | -------------------------------------------------------------------------------- /frontend/app/components/trace_viewer/trace_viewer_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {PipesModule} from 'org_xprof/frontend/app/pipes/pipes_module'; 3 | 4 | import {TraceViewer} from './trace_viewer'; 5 | 6 | /** A trace viewer module. */ 7 | @NgModule({ 8 | declarations: [TraceViewer], 9 | imports: [PipesModule], 10 | exports: [TraceViewer] 11 | }) 12 | export class TraceViewerModule { 13 | } 14 | -------------------------------------------------------------------------------- /frontend/app/pipes/BUILD: -------------------------------------------------------------------------------- 1 | load("//defs:defs.bzl", "xprof_ng_module") 2 | 3 | package(default_visibility = ["//frontend:internal"]) 4 | 5 | xprof_ng_module( 6 | name = "pipes", 7 | srcs = [ 8 | "pipes_module.ts", 9 | "safe_pipe.ts", 10 | ], 11 | deps = [ 12 | "@npm//@angular/common", 13 | "@npm//@angular/core", 14 | "@npm//@angular/platform-browser", 15 | ], 16 | ) 17 | -------------------------------------------------------------------------------- /frontend/app/pipes/pipes_module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common' 2 | import {NgModule} from '@angular/core'; 3 | import {SafePipe} from './safe_pipe'; 4 | 5 | @NgModule( 6 | {imports: [CommonModule], declarations: [SafePipe], exports: [SafePipe]}) 7 | export class PipesModule { 8 | } 9 | -------------------------------------------------------------------------------- /frontend/app/pipes/safe_pipe.ts: -------------------------------------------------------------------------------- 1 | import {Pipe, PipeTransform} from '@angular/core'; 2 | import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser'; 3 | 4 | @Pipe({name: 'safe'}) 5 | export class SafePipe implements PipeTransform { 6 | constructor(private readonly sanitizer: DomSanitizer) {} 7 | 8 | transform(url: any): SafeResourceUrl { 9 | return this.sanitizer.bypassSecurityTrustResourceUrl(url); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /frontend/app/services/communication_service/BUILD: -------------------------------------------------------------------------------- 1 | load("//defs:defs.bzl", "xprof_ng_module") 2 | 3 | package(default_visibility = ["//frontend:internal"]) 4 | 5 | xprof_ng_module( 6 | name = "communication_service", 7 | srcs = [ 8 | "communication_service.ts", 9 | ], 10 | deps = [ 11 | "@npm//@angular/core", 12 | "@org_xprof//frontend/app/common/interfaces", 13 | ], 14 | ) 15 | -------------------------------------------------------------------------------- /frontend/app/services/communication_service/communication_service.ts: -------------------------------------------------------------------------------- 1 | import {EventEmitter, Injectable, Output} from '@angular/core'; 2 | import {NavigationEvent} from 'org_xprof/frontend/app/common/interfaces/navigation_event'; 3 | 4 | /** 5 | * The query parameter object for route navigation excluding run, tag, host 6 | * for example, opName for Graph Viewer 7 | */ 8 | export type ToolQueryParams = NavigationEvent; 9 | 10 | /** 11 | * (OSS) The communication service class that emits events across components 12 | * Provide the service dependency at the application root level for angular to 13 | * create a shared instance of this service - Needed for unit tests to run 14 | */ 15 | @Injectable({providedIn: 'root'}) 16 | export class CommunicationService { 17 | @Output() readonly navigationReady = new EventEmitter(); 18 | @Output() readonly toolQueryParamsChange = new EventEmitter(); 19 | 20 | // Show a navigating status when populating navigation chains 21 | // eg. tools for selected run 22 | onNavigateReady(navigationEvent: NavigationEvent) { 23 | this.navigationReady.emit(navigationEvent); 24 | } 25 | 26 | onToolQueryParamsChange(queryParams: ToolQueryParams) { 27 | this.toolQueryParamsChange.emit(queryParams); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /frontend/app/services/data_service/BUILD: -------------------------------------------------------------------------------- 1 | load("@npm//@bazel/concatjs:index.bzl", "ts_library") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "data_service", 8 | srcs = [ 9 | "data_service.ts", 10 | ], 11 | deps = [ 12 | ":mock_data", 13 | "@npm//@angular/common", 14 | "@npm//@angular/core", 15 | "@npm//@ngrx/store", 16 | "@npm//rxjs", 17 | "@org_xprof//frontend/app/common/angular:angular_common_http", 18 | "@org_xprof//frontend/app/common/constants", 19 | "@org_xprof//frontend/app/common/interfaces", 20 | "@org_xprof//frontend/app/store", 21 | ], 22 | ) 23 | 24 | ts_library( 25 | name = "mock_data", 26 | srcs = [ 27 | "mock_data.ts", 28 | ], 29 | ) 30 | -------------------------------------------------------------------------------- /frontend/app/store/BUILD: -------------------------------------------------------------------------------- 1 | load("@npm//@bazel/concatjs:index.bzl", "ts_library") 2 | load("//defs:defs.bzl", "xprof_ng_module") 3 | 4 | package(default_visibility = ["//frontend:internal"]) 5 | 6 | xprof_ng_module( 7 | name = "store", 8 | srcs = [ 9 | "actions.ts", 10 | "reducers.ts", 11 | "selectors.ts", 12 | "state.ts", 13 | "store_module.ts", 14 | ], 15 | deps = [ 16 | ":types", 17 | "@npm//@angular/core", 18 | "@npm//@ngrx/store", 19 | "@npm//rxjs", 20 | "@org_xprof//frontend/app/common/constants", 21 | "@org_xprof//frontend/app/common/interfaces", 22 | "@org_xprof//frontend/app/common/interfaces:op_profile_proto_defs", 23 | "@org_xprof//frontend/app/store/common_data_store", 24 | "@org_xprof//frontend/app/store/framework_op_stats", 25 | ], 26 | ) 27 | 28 | ts_library( 29 | name = "types", 30 | srcs = [ 31 | "types.ts", 32 | ], 33 | deps = [ 34 | "@npm//@ngrx/store", 35 | ], 36 | ) 37 | -------------------------------------------------------------------------------- /frontend/app/store/common_data_store/BUILD: -------------------------------------------------------------------------------- 1 | load("//defs:defs.bzl", "xprof_ng_module") 2 | 3 | package(default_visibility = ["//frontend:internal"]) 4 | 5 | xprof_ng_module( 6 | name = "common_data_store", 7 | srcs = [ 8 | "actions.ts", 9 | "reducers.ts", 10 | "selectors.ts", 11 | "state.ts", 12 | ], 13 | deps = [ 14 | "@npm//@angular/core", 15 | "@npm//@ngrx/store", 16 | "@npm//rxjs", 17 | "@org_xprof//frontend/app/common/interfaces", 18 | "@org_xprof//frontend/app/store:types", 19 | ], 20 | ) 21 | -------------------------------------------------------------------------------- /frontend/app/store/common_data_store/actions.ts: -------------------------------------------------------------------------------- 1 | import {createAction, props} from '@ngrx/store'; 2 | import {SimpleDataTable} from 'org_xprof/frontend/app/common/interfaces/data_table'; 3 | import {ActionCreatorAny} from 'org_xprof/frontend/app/store/types'; 4 | 5 | /** Action to set kernel stats data property */ 6 | export const setKernelStatsDataAction: ActionCreatorAny = createAction( 7 | '[Kernel Stats] Set data property', 8 | props<{kernelStatsData: SimpleDataTable | null}>(), 9 | ); 10 | -------------------------------------------------------------------------------- /frontend/app/store/common_data_store/reducers.ts: -------------------------------------------------------------------------------- 1 | import {Action, ActionReducer, createReducer, on} from '@ngrx/store'; 2 | import {ActionCreatorAny} from 'org_xprof/frontend/app/store/types'; 3 | 4 | import * as actions from './actions'; 5 | import {CommonDataStoreState, INIT_COMMON_DATA_STORE_STATE} from './state'; 6 | 7 | /** Reduce functions of common data store. */ 8 | export const reducer: ActionReducer = 9 | createReducer( 10 | INIT_COMMON_DATA_STORE_STATE, 11 | on( 12 | actions.setKernelStatsDataAction, 13 | (state: CommonDataStoreState, action: ActionCreatorAny) => { 14 | return { 15 | ...state, 16 | kernelStatsData: action.kernelStatsData, 17 | }; 18 | }, 19 | ), 20 | ); 21 | 22 | /** Common Data Store reducer */ 23 | export function commonDataStoreReducer( 24 | state: CommonDataStoreState|undefined, action: Action) { 25 | return reducer(state, action); 26 | } 27 | -------------------------------------------------------------------------------- /frontend/app/store/common_data_store/selectors.ts: -------------------------------------------------------------------------------- 1 | import {createFeatureSelector, createSelector} from '@ngrx/store'; 2 | import {MemoizedSelectorAny} from 'org_xprof/frontend/app/store/types'; 3 | 4 | import {COMMON_DATA_STORE_KEY, CommonDataStoreState} from './state'; 5 | 6 | const commonDataStoreState = 7 | createFeatureSelector(COMMON_DATA_STORE_KEY); 8 | 9 | /** Selector for kernel stats data property */ 10 | export const getKernelStatsDataState: MemoizedSelectorAny = createSelector( 11 | commonDataStoreState, 12 | (commonDataStoreState: CommonDataStoreState) => 13 | commonDataStoreState.kernelStatsData); 14 | -------------------------------------------------------------------------------- /frontend/app/store/common_data_store/state.ts: -------------------------------------------------------------------------------- 1 | import {SimpleDataTable} from 'org_xprof/frontend/app/common/interfaces/data_table'; 2 | 3 | /** State of common data store */ 4 | export interface CommonDataStoreState { 5 | kernelStatsData: SimpleDataTable|null; 6 | } 7 | 8 | /** Initial state object */ 9 | export const INIT_COMMON_DATA_STORE_STATE: CommonDataStoreState = { 10 | kernelStatsData: null, 11 | }; 12 | 13 | /** Feature key for store */ 14 | export const COMMON_DATA_STORE_KEY = 'common_data_store'; 15 | -------------------------------------------------------------------------------- /frontend/app/store/framework_op_stats/BUILD: -------------------------------------------------------------------------------- 1 | load("//defs:defs.bzl", "xprof_ng_module") 2 | 3 | package(default_visibility = ["//frontend:internal"]) 4 | 5 | xprof_ng_module( 6 | name = "framework_op_stats", 7 | srcs = [ 8 | "actions.ts", 9 | "reducers.ts", 10 | "selectors.ts", 11 | "state.ts", 12 | ], 13 | deps = [ 14 | "@npm//@angular/core", 15 | "@npm//@ngrx/store", 16 | "@npm//rxjs", 17 | "@org_xprof//frontend/app/common/interfaces", 18 | "@org_xprof//frontend/app/store:types", 19 | ], 20 | ) 21 | -------------------------------------------------------------------------------- /frontend/app/store/framework_op_stats/state.ts: -------------------------------------------------------------------------------- 1 | import {FrameworkOpStatsData} from 'org_xprof/frontend/app/common/interfaces/data_table'; 2 | 3 | /** State of tensorflow stats */ 4 | export interface FrameworkOpStatsState { 5 | data: FrameworkOpStatsData[]; 6 | diffData: FrameworkOpStatsData[]; 7 | hasDiff: boolean; 8 | showPprofLink: boolean; 9 | showFlopRateChart: boolean; 10 | showModelProperties: boolean; 11 | title: string; 12 | } 13 | 14 | /** Initial state object */ 15 | export const INIT_FRAMEWORK_OP_STATS_STATE: FrameworkOpStatsState = { 16 | data: [], 17 | diffData: [], 18 | hasDiff: false, 19 | showPprofLink: false, 20 | showFlopRateChart: false, 21 | showModelProperties: false, 22 | title: '', 23 | }; 24 | 25 | /** Feature key for store */ 26 | export const FRAMEWORK_OP_STATS_STORE_KEY = 'framework_op_stats'; 27 | -------------------------------------------------------------------------------- /frontend/app/store/store_module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {StoreModule} from '@ngrx/store'; 3 | import {commonDataStoreReducer} from 'org_xprof/frontend/app/store/common_data_store/reducers'; 4 | import {COMMON_DATA_STORE_KEY} from 'org_xprof/frontend/app/store/common_data_store/state'; 5 | import {frameworkOpStatsReducer} from 'org_xprof/frontend/app/store/framework_op_stats/reducers'; 6 | import {FRAMEWORK_OP_STATS_STORE_KEY} from 'org_xprof/frontend/app/store/framework_op_stats/state'; 7 | 8 | import {rootReducer} from './reducers'; 9 | import {STORE_KEY} from './state'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | StoreModule.forFeature(STORE_KEY, rootReducer), 14 | StoreModule.forFeature(COMMON_DATA_STORE_KEY, commonDataStoreReducer), 15 | StoreModule.forFeature( 16 | FRAMEWORK_OP_STATS_STORE_KEY, frameworkOpStatsReducer), 17 | StoreModule.forRoot({}), 18 | ], 19 | }) 20 | export class RootStoreModule { 21 | } 22 | -------------------------------------------------------------------------------- /frontend/app/store/types.ts: -------------------------------------------------------------------------------- 1 | import {ActionCreator, MemoizedSelector} from '@ngrx/store'; 2 | 3 | /** Action type. */ 4 | // tslint:disable-next-line:no-any 5 | export type ActionCreatorAny = ActionCreator; 6 | 7 | /** Selector type. */ 8 | // tslint:disable-next-line:no-any 9 | export type MemoizedSelectorAny = MemoizedSelector; 10 | -------------------------------------------------------------------------------- /frontend/app/styles/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_sass//:defs.bzl", "sass_library") 2 | 3 | package(default_visibility = ["//frontend:internal"]) 4 | 5 | sass_library( 6 | name = "common", 7 | srcs = ["common.scss"], 8 | ) 9 | -------------------------------------------------------------------------------- /frontend/main.ts: -------------------------------------------------------------------------------- 1 | // Angular 9+ using Ivy apps that potentially do i18n, even transitively, must 2 | // import this module, which adds a global symbol at runtime. 3 | // https://angular.io/guide/migration-localize 4 | import '@angular/localize/init'; 5 | import {enableProdMode} from '@angular/core'; 6 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 7 | 8 | import {AppModule} from './app/app_module'; 9 | 10 | enableProdMode(); 11 | 12 | platformBrowserDynamic().bootstrapModule(AppModule) 13 | .catch(err => console.error(err)); 14 | -------------------------------------------------------------------------------- /frontend/server.py: -------------------------------------------------------------------------------- 1 | """SimpleHTTPServer with IPv6 suport to run on TAP which will be IPV6 only. 2 | 3 | Also provides /healthz support so that test can wait for the server to start. 4 | """ 5 | 6 | from __future__ import print_function 7 | 8 | import http.server 9 | import os 10 | import socketserver 11 | 12 | PORT = 4200 13 | 14 | Handler = http.server.SimpleHTTPRequestHandler 15 | 16 | with socketserver.TCPServer(("", PORT), Handler) as httpd: 17 | os.chdir(os.getcwd() + "/frontend") 18 | print("Listening on port %s" % PORT) 19 | httpd.serve_forever() 20 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/__init__.py: -------------------------------------------------------------------------------- 1 | # Copyright 2019 The TensorFlow Authors. 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 | """Entry point for the TensorBoard plugin package for performance profiling. 16 | 17 | Public submodules: 18 | summary: Summary-writing ops. 19 | Private submodules: 20 | metadata: Global constants and the like. 21 | plugin: TensorBoard backend plugin. 22 | """ 23 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/build_utils/BUILD: -------------------------------------------------------------------------------- 1 | load("//tools/build_defs/testing:bzl_library.bzl", "bzl_library") 2 | 3 | visibility = ["//plugin:internal"] 4 | 5 | package( 6 | default_visibility = visibility, 7 | licenses = ["notice"], # Apache 2.0 8 | ) 9 | 10 | bzl_library( 11 | name = "strict_default_bzl", 12 | srcs = ["strict.default.bzl"], 13 | parse_tests = False, 14 | visibility = ["//visibility:private"], 15 | ) 16 | 17 | bzl_library( 18 | name = "pytype_default_bzl", 19 | srcs = ["pytype.default.bzl"], 20 | parse_tests = False, 21 | visibility = ["//visibility:private"], 22 | ) 23 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/build_utils/profiler_test.bzl: -------------------------------------------------------------------------------- 1 | """Module defining test target to run on multiple platforms""" 2 | 3 | def profiler_test(name, **kwargs): 4 | kwargs.pop("platforms") 5 | native.py_test(name = name, **kwargs) 6 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/build_utils/pytype.default.bzl: -------------------------------------------------------------------------------- 1 | """Default (OSS) build versions of Python pytype rules.""" 2 | 3 | # Placeholder to use until bazel supports pytype_library. 4 | def pytype_library(name, **kwargs): 5 | native.py_library(name = name, **kwargs) 6 | 7 | # Placeholder to use until bazel supports pytype_strict_binary. 8 | def pytype_strict_binary(name, **kwargs): 9 | native.py_binary(name = name, **kwargs) 10 | 11 | # Placeholder to use until bazel supports pytype_strict_library. 12 | def pytype_strict_library(name, **kwargs): 13 | native.py_library(name = name, **kwargs) 14 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/build_utils/strict.default.bzl: -------------------------------------------------------------------------------- 1 | """Default (OSS) build versions of Python strict rules.""" 2 | 3 | # Placeholder to use until bazel supports py_strict_binary. 4 | def py_strict_binary(name, **kwargs): 5 | native.py_binary(name = name, **kwargs) 6 | 7 | # Placeholder to use until bazel supports py_strict_library. 8 | def py_strict_library(name, **kwargs): 9 | native.py_library(name = name, **kwargs) 10 | 11 | # Placeholder to use until bazel supports py_strict_test. 12 | def py_strict_test(name, **kwargs): 13 | native.py_test(name = name, **kwargs) 14 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/convert/__init__.py: -------------------------------------------------------------------------------- 1 | # Copyright 2020 The TensorFlow Authors. 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 | """Converter from protobuf to gviz/json format.""" 16 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/demo/__init__.py: -------------------------------------------------------------------------------- 1 | # Copyright 2020 The TensorFlow Authors. 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 | """Demos for TensorBoard profile plugin.""" 16 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/demo/data/profile_demo.input_pipeline.pb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/plugin/tensorboard_plugin_profile/demo/data/profile_demo.input_pipeline.pb -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/demo/data/profile_demo.overview_page.pb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/plugin/tensorboard_plugin_profile/demo/data/profile_demo.overview_page.pb -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/demo/data/profile_demo.tensorflow_stats.pb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/plugin/tensorboard_plugin_profile/demo/data/profile_demo.tensorflow_stats.pb -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/integration_tests/BUILD: -------------------------------------------------------------------------------- 1 | load("//plugin/tensorboard_plugin_profile/build_utils:pytype.default.bzl", "pytype_strict_library") 2 | 3 | visibility = ["//plugin:internal"] 4 | 5 | package( 6 | default_visibility = visibility, 7 | licenses = ["notice"], # Apache 2.0 8 | ) 9 | 10 | pytype_strict_library( 11 | name = "tf_mnist", 12 | srcs = ["tf_mnist.py"], 13 | visibility = visibility, 14 | deps = [], 15 | ) 16 | 17 | pytype_strict_library( 18 | name = "tf_profiler_session", 19 | srcs = ["tf_profiler_session.py"], 20 | visibility = visibility, 21 | deps = [], 22 | ) 23 | 24 | filegroup( 25 | name = "resources", 26 | srcs = [ 27 | "__init__.py", 28 | ], 29 | ) 30 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/integration_tests/__init__.py: -------------------------------------------------------------------------------- 1 | # Copyright 2020 The TensorFlow Authors. 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 | """Integration tests for TensorBoard profile plugin.""" 16 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/integration_tests/tpu/tensorflow/__init__.py: -------------------------------------------------------------------------------- 1 | # Copyright 2020 The TensorFlow Authors. 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 | """Integration tests for Tensorflow on Cloud TPU.""" 16 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/protobuf/__init__.py: -------------------------------------------------------------------------------- 1 | # Copyright 2020 The TensorFlow Authors. 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 | """Protobufs used by TensorBoard profile plugin.""" 16 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/protobuf/diagnostics.proto: -------------------------------------------------------------------------------- 1 | // This proto describes the diagnostics for debugging profiling issues of 2 | // the TensorFlow profiler. 3 | syntax = "proto3"; 4 | 5 | package tensorflow.profiler; 6 | 7 | message Diagnostics { 8 | repeated string info = 1; 9 | repeated string warnings = 2; 10 | repeated string errors = 3; 11 | } 12 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/protobuf/hardware_types.proto: -------------------------------------------------------------------------------- 1 | // This proto describes the types of hardware profiled by the TensorFlow 2 | // profiler. 3 | syntax = "proto3"; 4 | 5 | package tensorflow.profiler; 6 | 7 | // Types of hardware profiled. 8 | enum HardwareType { 9 | // Unknown hardware. 10 | UNKNOWN_HARDWARE = 0; 11 | // CPU only without any hardware accelerator. 12 | CPU_ONLY = 1; 13 | // GPU. 14 | GPU = 2; 15 | // TPU. 16 | TPU = 3; 17 | } 18 | 19 | message GPUComputeCapability { 20 | uint32 major = 1; 21 | uint32 minor = 2; 22 | } 23 | 24 | message DeviceCapabilities { 25 | double clock_rate_in_ghz = 1; 26 | uint32 num_cores = 2; 27 | uint64 memory_size_in_bytes = 3; 28 | uint64 memory_bandwidth = 4; // Bytes/s. 29 | GPUComputeCapability compute_capability = 5; 30 | string device_vendor = 6; 31 | } 32 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/protobuf/kernel_stats.proto: -------------------------------------------------------------------------------- 1 | syntax = "proto3"; 2 | 3 | package tensorflow.profiler; 4 | 5 | // Next ID: 15 6 | message KernelReport { 7 | // Name of the kernel. 8 | string name = 1; 9 | // Registers per thread. 10 | uint32 registers_per_thread = 2; 11 | // Static shared memory in bytes. 12 | uint32 static_shmem_bytes = 3; 13 | // Dynamic shared memory in bytes. 14 | uint32 dynamic_shmem_bytes = 4; 15 | // Block dimensions. 16 | repeated uint32 block_dim = 5; 17 | // Grid dimensions. 18 | repeated uint32 grid_dim = 6; 19 | // Total duration of this kernel. 20 | uint64 total_duration_ns = 7; 21 | // Min duration of kernel in nanoseconds. 22 | uint64 min_duration_ns = 8; 23 | // Max duration of kernel in nanoseconds. 24 | uint64 max_duration_ns = 9; 25 | // Kernel utilizes TensorCore instructions. 26 | bool is_kernel_using_tensor_core = 10; 27 | // Operation is eligible to use TensorCores. 28 | bool is_op_tensor_core_eligible = 11; 29 | // TF operation name. 30 | string op_name = 12; 31 | // Number of occurrences. 32 | uint32 occurrences = 13; 33 | // Occupancy pct. 34 | float occupancy_pct = 14; 35 | } 36 | 37 | message KernelStatsDb { 38 | // A list of kernels aggregated by name. 39 | repeated KernelReport reports = 1; 40 | } 41 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/protobuf/power_metrics.proto: -------------------------------------------------------------------------------- 1 | // LINT: LEGACY_NAMES 2 | 3 | syntax = "proto3"; 4 | 5 | package tensorflow.profiler; 6 | 7 | message PowerComponentMetrics { 8 | // power rail or component name, e.g. HBM, Core. 9 | string component_name = 1; 10 | // maximum watts monitored. 11 | double max_power = 2; 12 | // average watts monitored. 13 | double avg_power = 3; 14 | // (SPI sampler only) maximum watts of moving average power over a time window 15 | // of 100us. 16 | double max_moving_avg_power_100us = 4; 17 | // (SPI sampler only) maximum watts of moving average power over a time window 18 | // of 1ms. 19 | double max_moving_avg_power_1ms = 5; 20 | // (SPI sampler only) maximum watts of moving average power over a time window 21 | // of 10ms. 22 | double max_moving_avg_power_10ms = 6; 23 | // (FW only) The timescale in us to compute moving averages. 24 | uint32 timescale_us = 7; 25 | // The number of samples. 26 | uint64 sample_count = 8; 27 | // (SPI sampler only) maximum watts of moving average power over a time window 28 | // of 1s. 29 | double max_moving_avg_power_1s = 9; 30 | } 31 | 32 | message PowerMetrics { 33 | repeated PowerComponentMetrics power_component_metrics = 1; 34 | } 35 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/protobuf/source_info.proto: -------------------------------------------------------------------------------- 1 | syntax = "proto3"; 2 | 3 | package tensorflow.profiler; 4 | 5 | message SourceInfo { 6 | string file_name = 1; 7 | 8 | int32 line_number = 2; // could be `-1` 9 | 10 | string stack_frame = 3; // One stack frame per line. 11 | } 12 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/protobuf/tfstreamz.proto: -------------------------------------------------------------------------------- 1 | // This proto describes the format of the output profile file from 2 | // the TF-stats tool. 3 | syntax = "proto3"; 4 | 5 | package tensorflow.profiler.tfstreamz; 6 | 7 | // A proxy proto to serialize tensorflow::monitoring::Percentiles 8 | 9 | enum UnitOfMeasure { 10 | NUMBER = 0; 11 | TIME = 1; 12 | BYTES = 2; 13 | } 14 | 15 | message PercentilePoint { 16 | // In the [0, 100] range. 17 | double percentile = 1; 18 | double value = 2; 19 | } 20 | 21 | message Percentiles { 22 | UnitOfMeasure unit_of_measure = 1; 23 | uint64 start_nstime = 2; 24 | uint64 end_nstime = 3; 25 | double min_value = 4; 26 | double max_value = 5; 27 | double mean = 6; 28 | double stddev = 7; 29 | uint64 num_samples = 8; 30 | uint64 total_samples = 9; 31 | double accumulator = 10; 32 | repeated PercentilePoint points = 11; 33 | } 34 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/standalone/__init__.py: -------------------------------------------------------------------------------- 1 | # Copyright 2019 The TensorFlow Authors. 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 | """Utilities for xprof to be used without TensorBoard. 16 | 17 | """ 18 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/standalone/context.py: -------------------------------------------------------------------------------- 1 | # Copyright 2025 The TensorFlow Authors. 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 | """A standalone version of Tensorboard's context and utils.""" 16 | 17 | 18 | class RequestContext: 19 | """Overload of tensorboard/context.py:RequestContext.""" 20 | 21 | def __init__(self): 22 | pass 23 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/static/index.js: -------------------------------------------------------------------------------- 1 | export async function render() { 2 | document.location.href = 'index.html'; 3 | } 4 | -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/static/materialicons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/plugin/tensorboard_plugin_profile/static/materialicons.woff2 -------------------------------------------------------------------------------- /plugin/tensorboard_plugin_profile/version.py: -------------------------------------------------------------------------------- 1 | # Copyright 2023 The TensorFlow Authors. 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 | """Version information for tensorboard-plugin-profile.""" 16 | 17 | __version__ = "2.19.9" 18 | -------------------------------------------------------------------------------- /plugin/third_party/tracing/BUILD: -------------------------------------------------------------------------------- 1 | licenses(["notice"]) 2 | 3 | genrule( 4 | name = "trace_viewer_full", 5 | srcs = ["trace_viewer_full.html.gz"], 6 | outs = ["trace_viewer_full.html"], 7 | cmd = "gzip -d -c $(SRCS) > $(OUTS)", 8 | visibility = [ 9 | "//plugin:__subpackages__", 10 | ], 11 | ) 12 | 13 | # Catapult Trace Viewer (chrome://tracing): 14 | # git clone https://chromium.googlesource.com/catapult 15 | # cd catapult 16 | # git checkout 0d1854ab10b0950252ac4346e867639cec0ab6d2 17 | # tracing/bin/vulcanize_trace_viewer 18 | # gzip tracing/bin/trace_viewer_full.html 19 | exports_files(["trace_viewer_full.html.gz"]) 20 | -------------------------------------------------------------------------------- /plugin/third_party/tracing/trace_viewer_full.html.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/plugin/third_party/tracing/trace_viewer_full.html.gz -------------------------------------------------------------------------------- /plugin/third_party/webcomponentsjs/BUILD: -------------------------------------------------------------------------------- 1 | licenses(["notice"]) 2 | 3 | filegroup( 4 | name = "webcomponentsjs", 5 | srcs = ["webcomponents.js"], 6 | visibility = ["//plugin:__subpackages__"], 7 | ) 8 | -------------------------------------------------------------------------------- /plugin/trace_viewer/BUILD: -------------------------------------------------------------------------------- 1 | load("@org_tensorflow_tensorboard//tensorboard/defs:web.bzl", "tb_combine_html", "tf_web_library") 2 | 3 | package(default_visibility = ["//plugin:internal"]) 4 | 5 | licenses(["notice"]) 6 | 7 | tf_web_library( 8 | name = "trace_viewer", 9 | srcs = ["trace_viewer.html"], 10 | path = "/", 11 | deps = [ 12 | "@npm//@polymer/polymer", 13 | "@org_xprof//plugin/trace_viewer/tf_trace_viewer", 14 | "@org_xprof//plugin/trace_viewer/webcomponentsjs_polyfill", 15 | ], 16 | ) 17 | 18 | tb_combine_html( 19 | name = "trace_viewer_index", 20 | input_path = "/trace_viewer.html", 21 | js_path = "/trace_viewer_index.js", 22 | output_path = "/trace_viewer_index.html", 23 | deps = [":trace_viewer"], 24 | ) 25 | -------------------------------------------------------------------------------- /plugin/trace_viewer/tf_trace_viewer/BUILD: -------------------------------------------------------------------------------- 1 | load("@org_tensorflow_tensorboard//tensorboard/defs:web.bzl", "tf_web_library") 2 | 3 | package(default_visibility = ["//plugin:internal"]) 4 | 5 | licenses(["notice"]) 6 | 7 | tf_web_library( 8 | name = "tf_trace_viewer", 9 | srcs = [ 10 | "tf-trace-viewer.html", 11 | "@org_xprof//plugin/third_party/tracing:trace_viewer_full.html", 12 | ], 13 | path = "/tf-trace-viewer", 14 | deps = [ 15 | ":tf-trace-viewer-helper", 16 | ], 17 | ) 18 | 19 | tf_web_library( 20 | name = "demo", 21 | srcs = ["demo.html"], 22 | path = "/tf-trace-viewer", 23 | deps = [ 24 | ":tf_trace_viewer", 25 | "@org_xprof//plugin/trace_viewer/tf_trace_viewer/data", 26 | ], 27 | ) 28 | 29 | tf_web_library( 30 | name = "tf-trace-viewer-helper", 31 | srcs = [ 32 | "tf-trace-viewer-helper.js", 33 | ], 34 | path = "/tf-trace-viewer", 35 | ) 36 | -------------------------------------------------------------------------------- /plugin/trace_viewer/tf_trace_viewer/data/BUILD: -------------------------------------------------------------------------------- 1 | load("@io_bazel_rules_closure//closure:defs.bzl", "web_library") 2 | 3 | package(default_visibility = ["//plugin:internal"]) 4 | 5 | licenses(["notice"]) 6 | 7 | web_library( 8 | name = "data", 9 | srcs = glob(["*.json"]), 10 | path = "/tf-trace-viewer/data/plugin/profile", 11 | ) 12 | -------------------------------------------------------------------------------- /plugin/trace_viewer/tf_trace_viewer/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | 19 | 20 | Trace Viewer Demo 21 | 27 |
    28 | 29 | 30 |
    31 | -------------------------------------------------------------------------------- /plugin/trace_viewer/webcomponentsjs_polyfill/BUILD: -------------------------------------------------------------------------------- 1 | load("@org_tensorflow_tensorboard//tensorboard/defs:web.bzl", "tf_web_library") 2 | 3 | package(default_visibility = ["//plugin:internal"]) 4 | 5 | licenses(["notice"]) 6 | 7 | tf_web_library( 8 | name = "webcomponentsjs_polyfill", 9 | srcs = [ 10 | "webcomponentsjs_polyfill.html", 11 | "@org_xprof//plugin/third_party/webcomponentsjs", 12 | ], 13 | path = "/webcomponentsjs_polyfill", 14 | ) 15 | -------------------------------------------------------------------------------- /plugin/trace_viewer/webcomponentsjs_polyfill/webcomponentsjs_polyfill.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | 19 | -------------------------------------------------------------------------------- /requirements.in: -------------------------------------------------------------------------------- 1 | absl-py >= 2.1.0 2 | gviz_api >= 1.10.0 3 | setuptools <= 71.0.0 4 | fsspec[gcs] >= 2024.10.0 5 | cheroot >= 10.0.1 6 | etils[epath] >= 1.0.0 7 | werkzeug >= 0.11.15 8 | protobuf >= 3.19.6 9 | six >= 1.10.0 10 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | const {nodeResolve} = require('@rollup/plugin-node-resolve'); 2 | const commonjs = require('@rollup/plugin-commonjs'); 3 | 4 | module.exports = { 5 | plugins: [ 6 | nodeResolve({ 7 | mainFields: ['browser', 'es2015', 'module', 'jsnext:main', 'main'], 8 | }), 9 | commonjs(), 10 | ], 11 | output: { 12 | // Name field is required for iife|umd file format 13 | name: 'tbp', 14 | strict: false, 15 | format: 'iife', 16 | sourcemap: false, 17 | }, 18 | onwarn: (warning, warn) => { 19 | // Typescript decorator transpiled code checks `this` in case there are 20 | // global decorator. Rollup warns `this` is undefined. 21 | // This is safe to ignore. 22 | if (warning.code === 'THIS_IS_UNDEFINED') { 23 | return; 24 | } 25 | warn(warning); 26 | } 27 | }; 28 | -------------------------------------------------------------------------------- /third_party/BUILD: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/third_party/BUILD -------------------------------------------------------------------------------- /third_party/tensorboard.patch: -------------------------------------------------------------------------------- 1 | diff --git a/tensorboard/defs/protos.bzl b/tensorboard/defs/protos.bzl 2 | index e1dbe485d..6b0afc5ff 100644 3 | --- a/tensorboard/defs/protos.bzl 4 | +++ b/tensorboard/defs/protos.bzl 5 | @@ -53,8 +53,8 @@ def tb_proto_library( 6 | proto_gen( 7 | name = name + "_genproto", 8 | srcs = srcs, 9 | - deps = [s + "_genproto" for s in deps] + [protoc_runtime_genproto], 10 | - includes = [], 11 | + deps = [s + "_genproto" for s in deps] + ["@com_google_protobuf//:well_known_types_py_pb2_genproto"], 12 | + includes = [], 13 | protoc = protoc, 14 | gen_py = True, 15 | outs = outs_all, 16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "es2018"], 4 | "moduleResolution": "node", 5 | "strict": false, 6 | "inlineSourceMap": true, 7 | "experimentalDecorators": true, 8 | "baseUrl": "./" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /xprof/BUILD: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/xprof/BUILD -------------------------------------------------------------------------------- /xprof/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/xprof/__init__.py -------------------------------------------------------------------------------- /xprof/convert/executor.h: -------------------------------------------------------------------------------- 1 | #ifndef THIRD_PARTY_XPROF_CONVERT_EXECUTOR_H_ 2 | #define THIRD_PARTY_XPROF_CONVERT_EXECUTOR_H_ 3 | 4 | #include 5 | 6 | namespace tensorflow { 7 | namespace profiler { 8 | 9 | // Interface for abstracting execution mechanisms like thread pools. 10 | class Executor { 11 | public: 12 | virtual ~Executor() = default; 13 | 14 | // Executes the given function, potentially in parallel. 15 | // The execution might happen asynchronously. 16 | virtual void Execute(std::function fn) = 0; 17 | 18 | // Waits for all previously scheduled functions via Execute() to complete. 19 | virtual void JoinAll() = 0; 20 | }; 21 | 22 | } // namespace profiler 23 | } // namespace tensorflow 24 | 25 | #endif // THIRD_PARTY_XPROF_CONVERT_EXECUTOR_H_ 26 | -------------------------------------------------------------------------------- /xprof/convert/inference_stats_combiner.h: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 The TensorFlow Authors. 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 | #ifndef XPROF_CONVERT_INFERENCE_STATS_COMBINER_H_ 17 | #define XPROF_CONVERT_INFERENCE_STATS_COMBINER_H_ 18 | #include "plugin/tensorboard_plugin_profile/protobuf/inference_stats.pb.h" 19 | 20 | namespace tensorflow::profiler { 21 | void CombineInferenceStatsResult(int src_host_id, const InferenceStats& src, 22 | InferenceStats* dst); 23 | } // namespace tensorflow::profiler 24 | 25 | #endif // XPROF_CONVERT_INFERENCE_STATS_COMBINER_H_ 26 | -------------------------------------------------------------------------------- /xprof/convert/op_stats_to_pod_stats.h: -------------------------------------------------------------------------------- 1 | /* Copyright 2020 The TensorFlow Authors. 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 | #ifndef XPROF_CONVERT_OP_STATS_TO_POD_STATS_H_ 17 | #define XPROF_CONVERT_OP_STATS_TO_POD_STATS_H_ 18 | 19 | #include "plugin/tensorboard_plugin_profile/protobuf/op_stats.pb.h" 20 | #include "plugin/tensorboard_plugin_profile/protobuf/pod_stats.pb.h" 21 | 22 | namespace tensorflow { 23 | namespace profiler { 24 | 25 | PodStatsDatabase ConvertOpStatsToPodStats(const OpStats& op_stats); 26 | 27 | } // namespace profiler 28 | } // namespace tensorflow 29 | 30 | #endif // XPROF_CONVERT_OP_STATS_TO_POD_STATS_H_ 31 | -------------------------------------------------------------------------------- /xprof/convert/op_stats_to_pod_viewer.h: -------------------------------------------------------------------------------- 1 | /* Copyright 2020 The TensorFlow Authors. 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 | #ifndef XPROF_CONVERT_OP_STATS_TO_POD_VIEWER_H_ 17 | #define XPROF_CONVERT_OP_STATS_TO_POD_VIEWER_H_ 18 | 19 | #include "plugin/tensorboard_plugin_profile/protobuf/op_stats.pb.h" 20 | #include "plugin/tensorboard_plugin_profile/protobuf/pod_viewer.pb.h" 21 | 22 | namespace tensorflow { 23 | namespace profiler { 24 | 25 | PodViewerDatabase ConvertOpStatsToPodViewer(const OpStats& op_stats); 26 | 27 | } // namespace profiler 28 | } // namespace tensorflow 29 | 30 | #endif // XPROF_CONVERT_OP_STATS_TO_POD_VIEWER_H_ 31 | -------------------------------------------------------------------------------- /xprof/convert/oss/BUILD: -------------------------------------------------------------------------------- 1 | exports_files( 2 | ["tpu_input_pipeline_analysis_constants.cc"], 3 | visibility = ["@org_xprof//xprof/convert:__pkg__"], 4 | ) 5 | -------------------------------------------------------------------------------- /xprof/convert/oss/tpu_input_pipeline_analysis_constants.cc: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 The TensorFlow Authors. 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 | #include "xprof/convert/tpu_input_pipeline_analysis_constants.h" 16 | 17 | #include "absl/strings/string_view.h" 18 | 19 | namespace tensorflow { 20 | namespace profiler { 21 | 22 | constexpr absl::string_view kProfileAllHostsDoc = 23 | "https://cloud.google.com/tpu/docs/troubleshooting/troubleshoot-multislice"; 24 | constexpr absl::string_view kSparseCoreV0Name = "SparseCoreV0"; 25 | 26 | } // namespace profiler 27 | } // namespace tensorflow 28 | -------------------------------------------------------------------------------- /xprof/convert/process_megascale_dcn.h: -------------------------------------------------------------------------------- 1 | /* Copyright 2023 The TensorFlow Authors. 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 | #ifndef XPROF_CONVERT_PROCESS_MEGASCALE_DCN_H_ 16 | #define XPROF_CONVERT_PROCESS_MEGASCALE_DCN_H_ 17 | 18 | #include "tsl/profiler/protobuf/xplane.pb.h" 19 | 20 | namespace tensorflow { 21 | namespace profiler { 22 | 23 | // Process Dcn Megascale TraceMe info. 24 | void ProcessMegascaleDcn(XSpace* space); 25 | 26 | } // namespace profiler 27 | } // namespace tensorflow 28 | 29 | #endif // XPROF_CONVERT_PROCESS_MEGASCALE_DCN_H_ 30 | -------------------------------------------------------------------------------- /xprof/convert/tpu_input_pipeline_analysis_constants.h: -------------------------------------------------------------------------------- 1 | /* Copyright 2024 The TensorFlow Authors. 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 | #ifndef XPROF_CONVERT_TPU_INPUT_PIPELINE_ANALYSIS_CONSTANTS_H_ 16 | #define XPROF_CONVERT_TPU_INPUT_PIPELINE_ANALYSIS_CONSTANTS_H_ 17 | 18 | #include "absl/strings/string_view.h" 19 | #include "xla/tsl/platform/macros.h" 20 | 21 | namespace tensorflow { 22 | namespace profiler { 23 | 24 | TF_CONST_INIT extern const absl::string_view kProfileAllHostsDoc; 25 | TF_CONST_INIT extern const absl::string_view kSparseCoreV0Name; 26 | 27 | } // namespace profiler 28 | } // namespace tensorflow 29 | 30 | #endif // XPROF_CONVERT_TPU_INPUT_PIPELINE_ANALYSIS_CONSTANTS_H_ 31 | -------------------------------------------------------------------------------- /xprof/pywrap/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/openxla/xprof/c1f0728bb0df61f52e843e00a96586af02f99dbe/xprof/pywrap/__init__.py -------------------------------------------------------------------------------- /xprof/pywrap/_pywrap_profiler_plugin.pyi: -------------------------------------------------------------------------------- 1 | # Copyright 2023 The TensorFlow Authors. 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 | def monitor(arg0: str, arg1: int, arg2: int, arg3: bool) -> str: ... 17 | def trace(arg0: str, arg1: str, arg2: str, arg3: bool, arg4: int, arg5: int, arg6: dict) -> None: ... 18 | def xspace_to_tools_data(arg0: list, arg1: str, arg2: dict = ...) -> tuple: ... 19 | def xspace_to_tools_data_from_byte_string(arg0: list, arg1: list, arg2: str, arg3: dict) -> tuple: ... 20 | -------------------------------------------------------------------------------- /xprof/pywrap/profiler_wrapper_test.py: -------------------------------------------------------------------------------- 1 | # Copyright 2020 The TensorFlow Authors. 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 | """Tests for profiler_wrapper.cc pybind methods.""" 16 | 17 | from absl.testing import absltest 18 | from xprof.pywrap import _pywrap_profiler_plugin as profiler_wrapper_plugin 19 | 20 | 21 | class ProfilerSessionTest(absltest.TestCase): 22 | 23 | def test_xspace_to_tools_data_default_options(self): 24 | # filenames only used for `hlo_proto` tool. 25 | profiler_wrapper_plugin.xspace_to_tools_data([], 'trace_viewer') 26 | 27 | if __name__ == '__main__': 28 | absltest.main() 29 | -------------------------------------------------------------------------------- /xprof/utils/device_caps_utils.h: -------------------------------------------------------------------------------- 1 | /* Copyright 2020 The TensorFlow Authors. 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 | #ifndef XPROF_UTILS_DEVICE_CAPS_UTILS_H_ 17 | #define XPROF_UTILS_DEVICE_CAPS_UTILS_H_ 18 | 19 | #include "tsl/profiler/protobuf/xplane.pb.h" 20 | #include "plugin/tensorboard_plugin_profile/protobuf/hardware_types.pb.h" 21 | 22 | namespace tensorflow { 23 | namespace profiler { 24 | 25 | void SetDeviceCaps(const DeviceCapabilities& caps, XPlane* plane); 26 | DeviceCapabilities GetDeviceCaps(const XPlane& plane); 27 | 28 | } // namespace profiler 29 | } // namespace tensorflow 30 | 31 | #endif // XPROF_UTILS_DEVICE_CAPS_UTILS_H_ 32 | -------------------------------------------------------------------------------- /xprof/utils/roofline_model_utils.cc: -------------------------------------------------------------------------------- 1 | #include "xprof/utils/roofline_model_utils.h" 2 | 3 | #include "xla/tsl/profiler/utils/math_utils.h" 4 | 5 | namespace tensorflow { 6 | namespace profiler { 7 | 8 | double RidgePoint(double peak_gigaflops_per_second, 9 | double peak_gibibytes_per_second) { 10 | return tsl::profiler::SafeDivide( 11 | peak_gigaflops_per_second, 12 | tsl::profiler::GibiToGiga(peak_gibibytes_per_second)); 13 | } 14 | 15 | } // namespace profiler 16 | } // namespace tensorflow 17 | -------------------------------------------------------------------------------- /xprof/utils/roofline_model_utils.h: -------------------------------------------------------------------------------- 1 | #ifndef THIRD_PARTY_XPROF_UTILS_ROOFLINE_MODEL_UTILS_H_ 2 | #define THIRD_PARTY_XPROF_UTILS_ROOFLINE_MODEL_UTILS_H_ 3 | 4 | namespace tensorflow { 5 | namespace profiler { 6 | 7 | // Takes flops as Gflops and BW as GiB. 8 | double RidgePoint(double peak_gigaflops_per_second, 9 | double peak_gibibytes_per_second); 10 | 11 | } // namespace profiler 12 | } // namespace tensorflow 13 | 14 | #endif // THIRD_PARTY_XPROF_UTILS_ROOFLINE_MODEL_UTILS_H_ 15 | -------------------------------------------------------------------------------- /xprof_pypi_package/xprof/__init__.py: -------------------------------------------------------------------------------- 1 | # Copyright 2025 The XProf Authors. 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 | """Passthrough __init__.py pointing to tensorboard_plugin_profile.""" 16 | 17 | from tensorboard_plugin_profile import profile_plugin 18 | from tensorboard_plugin_profile import profile_plugin_loader 19 | from tensorboard_plugin_profile import server 20 | from tensorboard_plugin_profile import version 21 | --------------------------------------------------------------------------------