Add the time measurement feature (1/4)

Shift-clicking an event to add/remove a time selection equals to its range.

PiperOrigin-RevId: 836451701

Author: Profiler Team

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

@@ -62,6 +62,14 @@ inline constexpr Pixel kHoverCornerRounding = 8.0f;
 inline constexpr Pixel kSelectedBorderThickness = 2.0f;
 // go/keep-sorted end
 
+// Time Range Selection Constants
+// go/keep-sorted start
+// A semi-transparent blue for the curtain border. #A1C9FF at 60% opacity.
+inline constexpr ImU32 kSelectedTimeRangeBorderColor = 0x99FFC9A1;
+// A semi-transparent blue for the curtain highlight. #A1C9FF at 30% opacity.
+inline constexpr ImU32 kSelectedTimeRangeColor = 0x4DFFC9A1;
+// go/keep-sorted end
+
 // Zooming and Panning Constants
 // These constants control the zooming and panning behavior of the timeline.
 // go/keep-sorted start

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

@@ -4,6 +4,7 @@
 #include <cfloat>
 #include <cmath>
 #include <numeric>
+#include <optional>
 #include <string>
 
 #include "xprof/frontend/app/components/trace_viewer_v2/color/color_generator.h"
@@ -56,15 +57,17 @@ void Timeline::Draw() {
   ImGui::SetNextWindowPos(viewport->Pos);
   ImGui::SetNextWindowSize(viewport->Size);
   ImGui::SetNextWindowViewport(viewport->ID);
+
   ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 0.f);
+  ImGui::PushStyleVar(ImGuiStyleVar_CellPadding, ImVec2(0.0f, 0.0f));
+  ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(0.0f, 0.0f));
+
   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 =
       ImGui::GetContentRegionAvail().x - label_width_ - kTimelinePaddingRight;
   const double px_per_time_unit_val = px_per_time_unit(timeline_width);
@@ -97,71 +100,14 @@ void Timeline::Draw() {
     ImGui::Unindent((group.nesting_level + 1) * kIndentSize);
 
     ImGui::TableNextColumn();
-    const int start_level = group.start_level;
-    int end_level = (group_index + 1 < timeline_data_.groups.size())
-                        ? timeline_data_.groups[group_index + 1].start_level
-                        // If this is the last group, the end level is the total
-                        // number of levels.
-                        : timeline_data_.events_by_level.size();
-    // Ensure end_level is not less than start_level, to avoid negative height.
-    end_level = std::max(start_level, end_level);
-
-    // Calculate group height. Ensure a minimum height of one level to prevent
-    // ImGui::BeginChild from auto-resizing, even if a group contains no levels.
-    // This is important for parent groups (e.g., a process) that might not
-    // contain any event levels directly.
-    // TODO: b/453676716 - Add tests for group height calculation.
-    const Pixel group_height = std::max(1, end_level - start_level) *
-                               (kEventHeight + kEventPaddingBottom);
-    // Groups might have the same name. We add the index of the group to the ID
-    // to ensure each ImGui::BeginChild call has a unique ID, otherwise ImGui
-    // might ignore later calls with the same name.
-    const std::string timeline_child_id =
-        absl::StrCat("TimelineChild_", group.name, "_", group_index);
-
-    if (ImGui::BeginChild(timeline_child_id.c_str(), ImVec2(0, group_height),
-                          ImGuiChildFlags_None, kLaneFlags)) {
-      const ImVec2 pos = ImGui::GetCursorScreenPos();
-      const ImVec2 max = ImGui::GetContentRegionMax();
-
-      for (int level = start_level; level < end_level; ++level) {
-        // This is a sanity check to ensure the level is within the bounds of
-        // events_by_level.
-        if (level < timeline_data_.events_by_level.size()) {
-          // TODO: b/453676716 - Add boundary test cases for this function.
-          DrawEventsForLevel(timeline_data_.events_by_level[level],
-                             px_per_time_unit_val,
-                             /*level_in_group=*/level - start_level, pos, max);
-        }
-      }
-    }
-    ImGui::EndChild();
-
-    if (group_index < timeline_data_.groups.size() - 1) {
-      ImDrawList* draw_list = ImGui::GetWindowDrawList();
-      float line_y =
-          ImGui::GetItemRectMax().y + ImGui::GetStyle().CellPadding.y;
-      draw_list->AddLine(ImVec2(viewport->Pos.x + label_width_ + 15, line_y),
-                         ImVec2(viewport->Pos.x + viewport->Size.x, line_y),
-                         kLightGrayColor);
-    }
+    DrawGroup(group_index, px_per_time_unit_val);
   }
 
   ImGui::EndTable();
 
-  // If an event was selected, and the user clicks on an empty area
-  // (i.e., not on any event), deselect the event.
-  if (selected_event_index_ != -1 && ImGui::IsMouseClicked(0) &&
-      ImGui::IsWindowHovered(ImGuiHoveredFlags_ChildWindows) &&
-      !event_clicked_this_frame_) {
-    selected_event_index_ = -1;
-
-    EventData event_data;
-    event_data[std::string(kEventSelectedIndex)] = -1;
-    event_data[std::string(kEventSelectedName)] = std::string("");
+  DrawSelectedTimeRange(timeline_width, px_per_time_unit_val);
 
-    event_callback_(kEventSelected, event_data);
-  }
+  HandleEventDeselection();
 
   // Handle continuous keyboard and mouse wheel input for timeline navigation.
   // These functions are called every frame to ensure smooth and responsive
@@ -173,8 +119,9 @@ void Timeline::Draw() {
 
   ImGui::EndChild();
   ImGui::PopStyleVar();  // ItemSpacing
+  ImGui::PopStyleVar();  // CellPadding
   ImGui::PopStyleVar();  // WindowRounding
-  ImGui::End();
+  ImGui::End();          // Timeline viewer
 }
 
 EventRect Timeline::CalculateEventRect(Microseconds start, Microseconds end,
@@ -388,6 +335,87 @@ double Timeline::px_per_time_unit(Pixel timeline_width) const {
   }
 }
 
+// Draws the timeline ruler. This includes the main horizontal line,
+// vertical tick marks indicating time intervals, and their corresponding time
+// labels.
+void Timeline::DrawRuler(Pixel timeline_width) {
+  if (ImGui::BeginTable("Ruler", 2, kImGuiTableFlags)) {
+    ImGui::TableSetupColumn("Labels", ImGuiTableColumnFlags_WidthFixed,
+                            label_width_);
+    ImGui::TableSetupColumn("Timeline", ImGuiTableColumnFlags_WidthStretch);
+    ImGui::TableNextRow();
+    ImGui::TableSetBgColor(ImGuiTableBgTarget_RowBg0,
+                           ImGui::GetColorU32(ImGuiCol_WindowBg));
+    ImGui::TableNextColumn();
+    ImGui::TableNextColumn();
+
+    const ImVec2 pos = ImGui::GetCursorScreenPos();
+    ImDrawList* const draw_list = ImGui::GetWindowDrawList();
+
+    const double px_per_time_unit_val = px_per_time_unit(timeline_width);
+    if (px_per_time_unit_val > 0) {
+      // Draw horizontal line
+      const Pixel line_y = pos.y + kRulerHeight;
+      draw_list->AddLine(ImVec2(pos.x, line_y),
+                         ImVec2(pos.x + timeline_width, line_y),
+                         kRulerLineColor);
+
+      const Microseconds min_time_interval =
+          kMinTickDistancePx / px_per_time_unit_val;
+      const Microseconds tick_interval =
+          CalculateNiceInterval(min_time_interval);
+      const Pixel major_tick_dist_px = tick_interval * px_per_time_unit_val;
+
+      const Microseconds view_start = visible_range().start();
+      const Microseconds trace_start = data_time_range_.start();
+
+      const Microseconds view_start_relative = view_start - trace_start;
+      const Microseconds first_tick_time_relative =
+          std::floor(view_start_relative / tick_interval) * tick_interval;
+
+      const Pixel minor_tick_dist_px =
+          major_tick_dist_px / static_cast<float>(kMinorTickDivisions);
+
+      Microseconds t_relative = first_tick_time_relative;
+      Pixel x =
+          TimeToScreenX(t_relative + trace_start, pos.x, px_per_time_unit_val);
+
+      for (;; t_relative += tick_interval, x += major_tick_dist_px) {
+        if (x > pos.x + timeline_width + kRulerScreenBuffer) {
+          break;
+        }
+
+        // Draw major tick.
+        if (x >= pos.x - kRulerScreenBuffer) {
+          draw_list->AddLine(ImVec2(x, line_y - kRulerTickHeight),
+                             ImVec2(x, line_y), kRulerLineColor);
+
+          const std::string text = FormatTime(t_relative);
+          draw_list->AddText(ImVec2(x + kRulerTextPadding, pos.y),
+                             kRulerTextColor, text.c_str());
+        }
+
+        // Draw minor ticks for the current interval.
+        for (int i = 1; i < kMinorTickDivisions; ++i) {
+          const Pixel minor_x = x + i * minor_tick_dist_px;
+          if (minor_x > pos.x + timeline_width + kRulerScreenBuffer) {
+            break;
+          }
+          if (minor_x >= pos.x - kRulerScreenBuffer) {
+            draw_list->AddLine(
+                ImVec2(minor_x, line_y - kRulerTickHeight / 2.0f),
+                ImVec2(minor_x, line_y), kRulerLineColor);
+          }
+        }
+      }
+    }
+
+    // Reserve space for the ruler
+    ImGui::Dummy(ImVec2(0.0f, kRulerHeight + ImGui::GetStyle().CellPadding.y));
+    ImGui::EndTable();
+  }
+}
+
 void Timeline::DrawEventName(absl::string_view event_name,
                              const EventRect& event_rect,
                              ImDrawList* absl_nonnull draw_list) const {
@@ -442,6 +470,20 @@ void Timeline::DrawEvent(int event_index, const EventRect& rect,
       // ImGuiMouseButton enum. We check if the left mouse button was clicked.
       if (ImGui::IsMouseClicked(0)) {
         event_clicked_this_frame_ = true;
+
+        if (ImGui::GetIO().KeyShift) {
+          const Microseconds start =
+              timeline_data_.entry_start_times[event_index];
+          const Microseconds end =
+              start + timeline_data_.entry_total_times[event_index];
+          TimeRange event_range(start, end);
+          if (selected_time_range_ == event_range) {
+            selected_time_range_ = std::nullopt;
+          } else {
+            selected_time_range_ = event_range;
+          }
+        }
+
         if (selected_event_index_ != event_index) {
           selected_event_index_ = event_index;
 
@@ -492,41 +534,6 @@ void Timeline::DrawEventsForLevel(absl::Span<const int> event_indices,
   }
 }
 
-void Timeline::HandleKeyboard() {
-  const ImGuiIO& io = ImGui::GetIO();
-
-  // Pan left
-  if (ImGui::IsKeyDown(ImGuiKey_A)) {
-    float multiplier = GetSpeedMultiplier(io, ImGuiKey_A);
-    Pan(-kPanningSpeed * io.DeltaTime * multiplier);
-  }
-  // Pan right
-  if (ImGui::IsKeyDown(ImGuiKey_D)) {
-    float multiplier = GetSpeedMultiplier(io, ImGuiKey_D);
-    Pan(kPanningSpeed * io.DeltaTime * multiplier);
-  }
-
-  // Scroll up
-  if (ImGui::IsKeyDown(ImGuiKey_UpArrow)) {
-    Scroll(-kScrollSpeed * io.DeltaTime);
-  }
-  // Scroll down
-  if (ImGui::IsKeyDown(ImGuiKey_DownArrow)) {
-    Scroll(kScrollSpeed * io.DeltaTime);
-  }
-
-  // Zoom in
-  if (ImGui::IsKeyDown(ImGuiKey_W)) {
-    float multiplier = GetSpeedMultiplier(io, ImGuiKey_W);
-    Zoom(1.0f - kZoomSpeed * io.DeltaTime * multiplier);
-  }
-  // Zoom out
-  if (ImGui::IsKeyDown(ImGuiKey_S)) {
-    float multiplier = GetSpeedMultiplier(io, ImGuiKey_S);
-    Zoom(1.0f + kZoomSpeed * io.DeltaTime * multiplier);
-  }
-}
-
 // Draws the timeline ruler. This includes the main horizontal line,
 // vertical tick marks indicating time intervals, and their corresponding time
 // labels.
@@ -610,6 +617,72 @@ void Timeline::DrawRuler(Pixel timeline_width, Pixel viewport_bottom) {
   }
 }
 
+void Timeline::DrawSelectedTimeRange(Pixel timeline_width,
+                                     double px_per_time_unit_val) {
+  if (!selected_time_range_) return;
+
+  const ImVec2 table_rect_min = ImGui::GetItemRectMin();
+  const ImVec2 table_rect_max = ImGui::GetItemRectMax();
+  const Pixel timeline_x_start = table_rect_min.x + label_width_;
+
+  const Pixel time_range_x1 = TimeToScreenX(
+      selected_time_range_->start(), timeline_x_start, px_per_time_unit_val);
+  const Pixel time_range_x2 = TimeToScreenX(
+      selected_time_range_->end(), timeline_x_start, px_per_time_unit_val);
+  const Pixel clipped_x1 = std::max(time_range_x1, timeline_x_start);
+  const Pixel clipped_x2 =
+      std::min(time_range_x2, timeline_x_start + timeline_width);
+
+  if (clipped_x2 > clipped_x1) {
+    // Use the foreground draw list to render over all other timeline content.
+    ImDrawList* const draw_list = ImGui::GetForegroundDrawList();
+    draw_list->AddRectFilled(ImVec2(clipped_x1, table_rect_min.y),
+                             ImVec2(clipped_x2, table_rect_max.y),
+                             kSelectedTimeRangeColor);
+    draw_list->AddLine(ImVec2(clipped_x1, table_rect_min.y),
+                       ImVec2(clipped_x1, table_rect_max.y),
+                       kSelectedTimeRangeBorderColor);
+    draw_list->AddLine(ImVec2(clipped_x2, table_rect_min.y),
+                       ImVec2(clipped_x2, table_rect_max.y),
+                       kSelectedTimeRangeBorderColor);
+  }
+}
+
+void Timeline::HandleKeyboard() {
+  const ImGuiIO& io = ImGui::GetIO();
+
+  // Pan left
+  if (ImGui::IsKeyDown(ImGuiKey_A)) {
+    float multiplier = GetSpeedMultiplier(io, ImGuiKey_A);
+    Pan(-kPanningSpeed * io.DeltaTime * multiplier);
+  }
+  // Pan right
+  if (ImGui::IsKeyDown(ImGuiKey_D)) {
+    float multiplier = GetSpeedMultiplier(io, ImGuiKey_D);
+    Pan(kPanningSpeed * io.DeltaTime * multiplier);
+  }
+
+  // Scroll up
+  if (ImGui::IsKeyDown(ImGuiKey_UpArrow)) {
+    Scroll(-kScrollSpeed * io.DeltaTime);
+  }
+  // Scroll down
+  if (ImGui::IsKeyDown(ImGuiKey_DownArrow)) {
+    Scroll(kScrollSpeed * io.DeltaTime);
+  }
+
+  // Zoom in
+  if (ImGui::IsKeyDown(ImGuiKey_W)) {
+    float multiplier = GetSpeedMultiplier(io, ImGuiKey_W);
+    Zoom(1.0f - kZoomSpeed * io.DeltaTime * multiplier);
+  }
+  // Zoom out
+  if (ImGui::IsKeyDown(ImGuiKey_S)) {
+    float multiplier = GetSpeedMultiplier(io, ImGuiKey_S);
+    Zoom(1.0f + kZoomSpeed * io.DeltaTime * multiplier);
+  }
+}
+
 void Timeline::HandleWheel() {
   const ImGuiIO& io = ImGui::GetIO();
 
@@ -636,4 +709,20 @@ void Timeline::HandleWheel() {
   }
 }
 
+void Timeline::HandleEventDeselection() {
+  // If an event was selected, and the user clicks on an empty area
+  // (i.e., not on any event), deselect the event.
+  if (selected_event_index_ != -1 && ImGui::IsMouseClicked(0) &&
+      ImGui::IsWindowHovered(ImGuiHoveredFlags_ChildWindows) &&
+      !event_clicked_this_frame_) {
+    selected_event_index_ = -1;
+
+    EventData event_data;
+    event_data[std::string(kEventSelectedIndex)] = -1;
+    event_data[std::string(kEventSelectedName)] = std::string("");
+
+    event_callback_(kEventSelected, event_data);
+  }
+}
+
 }  // namespace traceviewer