Project import generated by Copybara

PiperOrigin-RevId: 837004373

Author: Profiler Team

frontend/app/components/trace_viewer_v2/color/BUILD

@@ -16,7 +16,6 @@ cc_library(
         "//third_party/dear_imgui",
         "//util/hash:highway_fingerprint",
         "@com_google_absl//absl/base:no_destructor",
-        "@com_google_absl//absl/hash",
         "@com_google_absl//absl/strings",
     ],
 )

frontend/app/components/trace_viewer_v2/color/color_generator.cc

@@ -13,10 +13,10 @@ namespace traceviewer {
 namespace {
 
 static constexpr ImU32 event_colors[] = {
-    kMaterialPurple70,
-    kMaterialGreen80,
-    kMaterialBlue80,
-    kMaterialYellow90,
+    kPurple70,
+    kGreen80,
+    kBlue80,
+    kYellow90,
 };
 
 // Generates colors based on string IDs.

frontend/app/components/trace_viewer_v2/color/colors.h

@@ -11,17 +11,25 @@ namespace traceviewer {
 //
 // For example, to get the color #C597FF (RR=C5, GG=97, BB=FF), the
 // ImU32 value is defined as 0xFF_FF97C5 (AA=FF, BB=FF, GG=97, RR=C5).
-//
-// These colors are from the Material Design color palette:
+
+// Static palette:
 // go/keep-sorted start
 // Blue 80: #A1C9FF
-inline constexpr ImU32 kMaterialBlue80 = 0xFFFFC9A1;
+inline constexpr ImU32 kBlue80 = 0xFFFFC9A1;
 // Green 80: #80DA88
-inline constexpr ImU32 kMaterialGreen80 = 0xFF88DA80;
+inline constexpr ImU32 kGreen80 = 0xFF88DA80;
 // Purple 70: #C597FF
-inline constexpr ImU32 kMaterialPurple70 = 0xFFFF97C5;
+inline constexpr ImU32 kPurple70 = 0xFFFF97C5;
 // Yellow 90: #FFE07C
-inline constexpr ImU32 kMaterialYellow90 = 0xFF7CE0FF;
+inline constexpr ImU32 kYellow90 = 0xFF7CE0FF;
+// go/keep-sorted end
+
+// Baseline palette:
+// go/keep-sorted start
+// Baseline Primary: #0B57D0
+inline constexpr ImU32 kPrimary40 = 0xFFD0570B;
+// Baseline Secondary: #C2E7FF
+inline constexpr ImU32 kSecondary90 = 0xFFFFE7C2;
 // go/keep-sorted end
 
 }  // namespace traceviewer

frontend/app/components/trace_viewer_v2/timeline/BUILD

@@ -41,6 +41,7 @@ cc_library(
     ],
     deps = [
         ":constants",
+        ":draw_utils",
         ":time_range",
         "//third_party/dear_imgui",
         "@com_google_absl//absl/base:nullability",
@@ -90,6 +91,17 @@ cc_library(
     ],
 )
 
+cc_library(
+    name = "draw_utils",
+    srcs = ["draw_utils.cc"],
+    hdrs = ["draw_utils.h"],
+    deps = [
+        ":constants",
+        "//third_party/dear_imgui",
+        "@org_xprof//frontend/app/components/trace_viewer_v2/color:colors",
+    ],
+)
+
 cc_test(
     name = "data_provider_test",
     srcs = ["data_provider_test.cc"],

frontend/app/components/trace_viewer_v2/timeline/draw_utils.cc

@@ -0,0 +1,109 @@
+#include "xprof/frontend/app/components/trace_viewer_v2/timeline/draw_utils.h"
+
+#include <algorithm>
+#include <cmath>
+
+#include "xprof/frontend/app/components/trace_viewer_v2/color/colors.h"
+#include "xprof/frontend/app/components/trace_viewer_v2/timeline/constants.h"
+#include "third_party/dear_imgui/imgui.h"
+
+namespace traceviewer {
+
+namespace {
+
+// GM3-style indefinite linear progress indicator constants.
+// The width of the progress bar as a ratio of the viewport width.
+constexpr float kProgressBarWidthRatio = 0.4f;
+constexpr Pixel kProgressBarHeight = 4.0f;
+// The duration in seconds for one full animation cycle of the progress bar.
+constexpr float kAnimationDuration = 3.0f;
+// The gap in pixels between the primary and secondary indicators.
+constexpr Pixel kProgressBarGap = 4.0f;
+// A scaling factor used in easing calculations for animation.
+constexpr float kProgressScale = 2.0f;
+constexpr Pixel kTextOffsetY = 16.0f;
+
+// Draws a "Loading data..." text message centered below the progress bar.
+void DrawLoadingText(const ImGuiViewport* viewport) {
+  ImDrawList* draw_list = ImGui::GetForegroundDrawList();
+  if (!draw_list) return;
+
+  const char* text = "Loading data...";
+  const ImVec2 text_size = ImGui::CalcTextSize(text);
+  const ImVec2 center = viewport->GetCenter();
+
+  const float text_x = center.x - text_size.x / 2.0f;
+  // Position text below the progress bar. The progress bar's center is at
+  // viewport->GetCenter().y.
+  const float text_y = center.y + kProgressBarHeight / 2.0f + kTextOffsetY;
+
+  draw_list->AddText(ImVec2(text_x, text_y), kBlackColor, text);
+}
+
+}  // namespace
+
+// Draws a loading indicator in the center of the viewport.
+void DrawLoadingIndicator(const ImGuiViewport* viewport) {
+  ImDrawList* draw_list = ImGui::GetForegroundDrawList();
+  if (!draw_list) return;
+
+  const Pixel kProgressBarCornerRadius = kProgressBarHeight / 2.0f;
+  const Pixel progress_bar_width = viewport->Size.x * kProgressBarWidthRatio;
+
+  const ImVec2 center = viewport->GetCenter();
+  const Pixel start_x = center.x - progress_bar_width / 2.0f;
+  const Pixel end_x = center.x + progress_bar_width / 2.0f;
+  const Pixel y = center.y - kProgressBarHeight / 2.0f;
+
+  const float time = static_cast<float>(ImGui::GetTime());
+  const float cycle_progress =
+      fmod(time, kAnimationDuration) / kAnimationDuration;
+
+  // The animation of the primary progress bar is defined by the movement of its
+  // head (right side) and tail (left side). The head moves with an ease-out
+  // curve, starting fast and slowing down, while the tail moves linearly. This
+  // creates the effect of the bar first growing in width and then shrinking as
+  // the tail catches up to the head.
+
+  // Quadratic ease-out for the head of the bar.
+  const float head_progress =
+      kProgressScale * cycle_progress * (kProgressScale - cycle_progress);
+  // Linear progress for the tail of the bar.
+  const float tail_progress = kProgressScale * cycle_progress;
+
+  const Pixel primary_start = start_x + progress_bar_width * tail_progress;
+  const Pixel primary_end = start_x + progress_bar_width * head_progress;
+
+  // Draw the two secondary segments and one primary segment, with gaps.
+  // All segments are clipped to the progress bar's bounds.
+  // Something like this:
+  // (-----s1-----) (--p--) (-----s2-----)
+  //               ^  gap  ^
+  const Pixel s1_start = start_x;
+  const Pixel s1_end = std::min(primary_start - kProgressBarGap, end_x);
+  if (s1_start < s1_end) {
+    draw_list->AddRectFilled(
+        ImVec2(s1_start, y), ImVec2(s1_end, y + kProgressBarHeight),
+        kSecondary90, kProgressBarCornerRadius, ImDrawFlags_RoundCornersAll);
+  }
+
+  const Pixel p_start = std::max(primary_start, start_x);
+  const Pixel p_end = std::min(primary_end, end_x);
+  if (p_start < p_end) {
+    draw_list->AddRectFilled(
+        ImVec2(p_start, y), ImVec2(p_end, y + kProgressBarHeight), kPrimary40,
+        kProgressBarCornerRadius, ImDrawFlags_RoundCornersAll);
+  }
+
+  const Pixel s2_start = std::max(primary_end + kProgressBarGap, start_x);
+  const Pixel s2_end = end_x;
+  if (s2_start < s2_end) {
+    draw_list->AddRectFilled(
+        ImVec2(s2_start, y), ImVec2(s2_end, y + kProgressBarHeight),
+        kSecondary90, kProgressBarCornerRadius, ImDrawFlags_RoundCornersAll);
+  }
+
+  DrawLoadingText(viewport);
+}
+
+}  // namespace traceviewer

frontend/app/components/trace_viewer_v2/timeline/draw_utils.h

@@ -0,0 +1,13 @@
+#ifndef PERFTOOLS_ACCELERATORS_XPROF_FRONTEND_APP_COMPONENTS_TRACE_VIEWER_V2_TIMELINE_DRAW_UTILS_H_
+#define PERFTOOLS_ACCELERATORS_XPROF_FRONTEND_APP_COMPONENTS_TRACE_VIEWER_V2_TIMELINE_DRAW_UTILS_H_
+
+#include "third_party/dear_imgui/imgui.h"
+
+namespace traceviewer {
+
+// Draws a loading indicator in the center of the viewport.
+void DrawLoadingIndicator(const ImGuiViewport* viewport);
+
+}  // namespace traceviewer
+
+#endif  // PERFTOOLS_ACCELERATORS_XPROF_FRONTEND_APP_COMPONENTS_TRACE_VIEWER_V2_TIMELINE_DRAW_UTILS_H_

frontend/app/components/trace_viewer_v2/timeline/timeline.cc

@@ -10,6 +10,7 @@
 #include "xprof/frontend/app/components/trace_viewer_v2/event_data.h"
 #include "xprof/frontend/app/components/trace_viewer_v2/helper/time_formatter.h"
 #include "xprof/frontend/app/components/trace_viewer_v2/timeline/constants.h"
+#include "xprof/frontend/app/components/trace_viewer_v2/timeline/draw_utils.h"
 #include "xprof/frontend/app/components/trace_viewer_v2/timeline/time_range.h"
 #include "xprof/frontend/app/components/trace_viewer_v2/trace_helper/trace_event.h"
 #include "absl/base/nullability.h"
@@ -49,9 +50,6 @@ void Timeline::SetVisibleRange(const TimeRange& range, bool animate) {
 }
 
 void Timeline::Draw() {
-  if (timeline_data_.groups.empty()) {
-    return;
-  }
   event_clicked_this_frame_ = false;
 
   const ImGuiViewport* viewport = ImGui::GetMainViewport();
@@ -61,6 +59,10 @@ void Timeline::Draw() {
   ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 0.f);
   ImGui::Begin("Timeline viewer", nullptr, kImGuiWindowFlags);
 
+  if (timeline_data_.groups.empty()) {
+    DrawLoadingIndicator(viewport);
+  }
+
   ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(0.0f, 0.0f));
 
   const Pixel timeline_width =

frontend/app/components/trace_viewer_v2/timeline/timeline_test.cc

@@ -1066,12 +1066,24 @@ TEST_F(RealTimelineImGuiFixture, ClickEmptyAreaWhenNoEventSelectedDoesNothing) {
   EXPECT_FALSE(callback_called);
 }
 
-TEST_F(RealTimelineImGuiFixture, NoDrawIfTimelineDataIsEmpty) {
+TEST_F(RealTimelineImGuiFixture,
+       DrawsLoadingAnimationWhenTimelineDataIsEmpty) {
   timeline_.set_timeline_data({});
 
-  SimulateFrame();
+  // We don't use SimulateFrame() here because we need to inspect the draw list
+  // before ImGui::EndFrame() is called.
+  ImGui::NewFrame();
+  timeline_.Draw();
+
+  EXPECT_NE(ImGui::FindWindowByName("Timeline viewer"), nullptr);
+
+  ImDrawList* draw_list = ImGui::GetForegroundDrawList();
+
+  ASSERT_NE(draw_list, nullptr);
+  // The loading animation should be drawn to the foreground draw list.
+  EXPECT_FALSE(draw_list->VtxBuffer.empty());
 
-  EXPECT_EQ(ImGui::FindWindowByName("Timeline viewer"), nullptr);
+  ImGui::EndFrame();
 }
 
 TEST_F(RealTimelineImGuiFixture, PanLeftBeyondDataRangeShouldBeConstrained) {