Use egui atoms in help view (#10224)

### Related

- atomics landed in egui (emilk/egui#5830)

### What

Updates egui to latest master and uses atoms in the help view, removing
the icon_text macro since it was basically atomics lite

Seems like the snapshots the only thing that changed is the three dot
icon slightly moved. But it seems a bit clearer now, so that's a win.

Author: lucasmerlin

Cargo.lock

@@ -2901,7 +2901,7 @@ checksum = "f25c0e292a7ca6d6498557ff1df68f32c99850012b6ea401cf8daf771f22ff53"
 [[package]]
 name = "ecolor"
 version = "0.31.1"
-source = "git+https://github.com/emilk/egui.git?branch=main#54fded362dfc82f0ea188a110fc950d9adbb2f13"
+source = "git+https://github.com/emilk/egui.git?branch=main#5194c0df3ef162ec6e2df9bb29bbe944d6d68aa9"
 dependencies = [
  "bytemuck",
  "color-hex",
@@ -2918,7 +2918,7 @@ checksum = "18aade80d5e09429040243ce1143ddc08a92d7a22820ac512610410a4dd5214f"
 [[package]]
 name = "eframe"
 version = "0.31.1"
-source = "git+https://github.com/emilk/egui.git?branch=main#54fded362dfc82f0ea188a110fc950d9adbb2f13"
+source = "git+https://github.com/emilk/egui.git?branch=main#5194c0df3ef162ec6e2df9bb29bbe944d6d68aa9"
 dependencies = [
  "ahash",
  "bytemuck",
@@ -2958,7 +2958,7 @@ dependencies = [
 [[package]]
 name = "egui"
 version = "0.31.1"
-source = "git+https://github.com/emilk/egui.git?branch=main#54fded362dfc82f0ea188a110fc950d9adbb2f13"
+source = "git+https://github.com/emilk/egui.git?branch=main#5194c0df3ef162ec6e2df9bb29bbe944d6d68aa9"
 dependencies = [
  "accesskit",
  "ahash",
@@ -2978,7 +2978,7 @@ dependencies = [
 [[package]]
 name = "egui-wgpu"
 version = "0.31.1"
-source = "git+https://github.com/emilk/egui.git?branch=main#54fded362dfc82f0ea188a110fc950d9adbb2f13"
+source = "git+https://github.com/emilk/egui.git?branch=main#5194c0df3ef162ec6e2df9bb29bbe944d6d68aa9"
 dependencies = [
  "ahash",
  "bytemuck",
@@ -2997,7 +2997,7 @@ dependencies = [
 [[package]]
 name = "egui-winit"
 version = "0.31.1"
-source = "git+https://github.com/emilk/egui.git?branch=main#54fded362dfc82f0ea188a110fc950d9adbb2f13"
+source = "git+https://github.com/emilk/egui.git?branch=main#5194c0df3ef162ec6e2df9bb29bbe944d6d68aa9"
 dependencies = [
  "accesskit_winit",
  "ahash",
@@ -3061,7 +3061,7 @@ dependencies = [
 [[package]]
 name = "egui_extras"
 version = "0.31.1"
-source = "git+https://github.com/emilk/egui.git?branch=main#54fded362dfc82f0ea188a110fc950d9adbb2f13"
+source = "git+https://github.com/emilk/egui.git?branch=main#5194c0df3ef162ec6e2df9bb29bbe944d6d68aa9"
 dependencies = [
  "ahash",
  "egui",
@@ -3078,7 +3078,7 @@ dependencies = [
 [[package]]
 name = "egui_glow"
 version = "0.31.1"
-source = "git+https://github.com/emilk/egui.git?branch=main#54fded362dfc82f0ea188a110fc950d9adbb2f13"
+source = "git+https://github.com/emilk/egui.git?branch=main#5194c0df3ef162ec6e2df9bb29bbe944d6d68aa9"
 dependencies = [
  "ahash",
  "bytemuck",
@@ -3095,7 +3095,7 @@ dependencies = [
 [[package]]
 name = "egui_kittest"
 version = "0.31.1"
-source = "git+https://github.com/emilk/egui.git?branch=main#54fded362dfc82f0ea188a110fc950d9adbb2f13"
+source = "git+https://github.com/emilk/egui.git?branch=main#5194c0df3ef162ec6e2df9bb29bbe944d6d68aa9"
 dependencies = [
  "dify",
  "eframe",
@@ -3166,7 +3166,7 @@ checksum = "60b1af1c220855b6ceac025d3f6ecdd2b7c4894bfe9cd9bda4fbb4bc7c0d4cf0"
 [[package]]
 name = "emath"
 version = "0.31.1"
-source = "git+https://github.com/emilk/egui.git?branch=main#54fded362dfc82f0ea188a110fc950d9adbb2f13"
+source = "git+https://github.com/emilk/egui.git?branch=main#5194c0df3ef162ec6e2df9bb29bbe944d6d68aa9"
 dependencies = [
  "bytemuck",
  "serde",
@@ -3283,7 +3283,7 @@ dependencies = [
 [[package]]
 name = "epaint"
 version = "0.31.1"
-source = "git+https://github.com/emilk/egui.git?branch=main#54fded362dfc82f0ea188a110fc950d9adbb2f13"
+source = "git+https://github.com/emilk/egui.git?branch=main#5194c0df3ef162ec6e2df9bb29bbe944d6d68aa9"
 dependencies = [
  "ab_glyph",
  "ahash",
@@ -3302,7 +3302,7 @@ dependencies = [
 [[package]]
 name = "epaint_default_fonts"
 version = "0.31.1"
-source = "git+https://github.com/emilk/egui.git?branch=main#54fded362dfc82f0ea188a110fc950d9adbb2f13"
+source = "git+https://github.com/emilk/egui.git?branch=main#5194c0df3ef162ec6e2df9bb29bbe944d6d68aa9"
 
 [[package]]
 name = "equivalent"

crates/viewer/re_time_panel/src/data_density_graph.rs

@@ -423,10 +423,10 @@ pub fn data_density_graph_ui(
                 // TODO(jprochazk): check chunk.num_rows() and chunk.timeline.is_sorted()
                 //                  if too many rows and unsorted, show some generic error tooltip (=too much data)
                 Tooltip::new(
-                    egui::Id::new("data_tooltip"),
                     ui.ctx().clone(),
-                    egui::PopupAnchor::Pointer,
                     ui.layer_id(),
+                    egui::Id::new("data_tooltip"),
+                    egui::PopupAnchor::Pointer,
                 )
                 .gap(12.0)
                 .show(|ui| {

crates/viewer/re_time_panel/src/time_panel.rs

@@ -16,7 +16,7 @@ use re_log_types::{
 };
 use re_types::blueprint::components::PanelState;
 use re_types_core::ComponentDescriptor;
-use re_ui::{ContextExt as _, Help, UiExt as _, filter_widget, icon_text, icons, list_item};
+use re_ui::{ContextExt as _, Help, UiExt as _, filter_widget, icons, list_item};
 use re_ui::{IconText, filter_widget::format_matching_text};
 use re_viewer_context::{
     CollapseScope, HoverHighlight, Item, ItemCollection, ItemContext, RecordingConfig, TimeControl,
@@ -1490,21 +1490,18 @@ fn help(os: egui::os::OperatingSystem) -> Help {
         .control("Play/Pause", "Space")
         .control(
             "Move time cursor",
-            icon_text!(icons::LEFT_MOUSE_CLICK, "+", "drag time scale"),
+            (icons::LEFT_MOUSE_CLICK, "+", "drag time scale"),
         )
         .control(
             "Select time segment",
-            icon_text!(icons::SHIFT, "+", "drag time scale"),
-        )
-        .control(
-            "Pan",
-            icon_text!(icons::LEFT_MOUSE_CLICK, "+", "drag event canvas"),
+            (icons::SHIFT, "+", "drag time scale"),
         )
+        .control("Pan", (icons::LEFT_MOUSE_CLICK, "+", "drag event canvas"))
         .control(
             "Zoom",
             IconText::from_modifiers_and(os, Modifiers::COMMAND, icons::SCROLL),
         )
-        .control("Reset view", icon_text!("double", icons::LEFT_MOUSE_CLICK))
+        .control("Reset view", ("double", icons::LEFT_MOUSE_CLICK))
 }
 
 fn help_button(ui: &mut egui::Ui) {

crates/viewer/re_time_panel/tests/snapshots/help_view_timeline_mac.png

@@ -9,7 +9,7 @@ use re_ui::{
     filter_widget::FilterState, list_item,
 };
 use re_ui::{IconText, filter_widget::format_matching_text};
-use re_ui::{icon_text, icons, notifications};
+use re_ui::{icons, notifications};
 
 /// Sender that queues up the execution of a command.
 pub struct CommandSender(std::sync::mpsc::Sender<UICommand>);
@@ -494,7 +494,7 @@ impl egui_tiles::Behavior<Tab> for MyTileTreeBehavior {
             ui.label("Help").on_hover_ui(|ui| {
                 Help::new("Help example")
                     .docs_link("https://rerun.io/docs/reference/types/views/map_view")
-                    .control("Pan", icon_text!(icons::LEFT_MOUSE_CLICK, "+", "drag"))
+                    .control("Pan", (icons::LEFT_MOUSE_CLICK, "+", "drag"))
                     .control(
                         "Zoom",
                         IconText::from_modifiers_and(
@@ -503,7 +503,7 @@ impl egui_tiles::Behavior<Tab> for MyTileTreeBehavior {
                             icons::SCROLL,
                         ),
                     )
-                    .control("Reset view", icon_text!("double", icons::LEFT_MOUSE_CLICK))
+                    .control("Reset view", ("double", icons::LEFT_MOUSE_CLICK))
                     .ui(ui);
             });
 

crates/viewer/re_time_panel/tests/snapshots/help_view_timeline_windows.png

@@ -1,10 +1,6 @@
-use egui::{OpenUrl, RichText, Sense, TextStyle, Ui, UiBuilder};
+use egui::{AtomLayout, Atoms, IntoAtoms, OpenUrl, RichText, Sense, TextStyle, Ui, UiBuilder};
 
-use crate::{
-    UiExt as _,
-    icon_text::{IconText, IconTextItem},
-    icons,
-};
+use crate::{UiExt as _, icons};
 
 /// A help popup where you can show markdown text and controls as a table.
 #[derive(Debug, Clone)]
@@ -25,13 +21,13 @@ enum HelpSection {
 #[derive(Debug, Clone)]
 pub struct ControlRow {
     text: String,
-    items: IconText,
+    items: Atoms<'static>,
 }
 
 impl ControlRow {
     /// Create a new control row.
     #[allow(clippy::needless_pass_by_value)]
-    pub fn new(text: impl ToString, items: IconText) -> Self {
+    pub fn new(text: impl ToString, items: Atoms<'static>) -> Self {
         Self {
             text: text.to_string(),
             items,
@@ -92,18 +88,18 @@ impl Help {
     ///
     /// Split any + or / into an extra `IconTextItem`, like this:
     /// ```rust
-    /// re_ui::Help::new("Example").control("Pan", re_ui::icon_text!("click", "+", "drag"));
+    /// re_ui::Help::new("Example").control("Pan", ("click", "+", "drag"));
     /// ```
     #[allow(clippy::needless_pass_by_value)]
     #[inline]
-    pub fn control(mut self, label: impl ToString, items: impl Into<IconText>) -> Self {
+    pub fn control(mut self, label: impl ToString, items: impl IntoAtoms<'static>) -> Self {
         if let Some(HelpSection::Controls(controls)) = self.sections.last_mut() {
-            controls.push(ControlRow::new(label, items.into()));
+            controls.push(ControlRow::new(label, items.into_atoms()));
         } else {
             self.sections
                 .push(HelpSection::Controls(vec![ControlRow::new(
                     label,
-                    items.into(),
+                    items.into_atoms(),
                 )]));
         }
         self
@@ -193,7 +189,7 @@ fn section_ui(ui: &mut Ui, section: HelpSection) {
             ui.markdown_ui(&md);
         }
         HelpSection::Controls(controls) => {
-            for row in controls {
+            for mut row in controls {
                 egui::Sides::new().spacing(12.0).show(
                     ui,
                     |ui| {
@@ -202,19 +198,10 @@ fn section_ui(ui: &mut Ui, section: HelpSection) {
                     |ui| {
                         let color = ui.visuals().widgets.inactive.text_color();
                         ui.set_height(tokens.small_icon_size.y);
-                        ui.spacing_mut().item_spacing.x = 2.0;
                         ui.style_mut().override_text_style = Some(TextStyle::Monospace);
                         ui.visuals_mut().override_text_color = Some(color);
-                        for item in row.items.0.into_iter().rev() {
-                            match item {
-                                IconTextItem::Icon(icon) => {
-                                    ui.small_icon(&icon, Some(color));
-                                }
-                                IconTextItem::Text(text) => {
-                                    ui.label(text);
-                                }
-                            }
-                        }
+                        row.items.map_images(|i| i.tint(color));
+                        AtomLayout::new(row.items).gap(2.0).show(ui);
                     },
                 );
             }