Improve the default UI when the welcome screen is hidden (#6287)

### What

Follow-up of #6262 to improve the default UI when the welcome screen is
disabled and no recordings are loaded.

- Fixes #6263

<img width="1522" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/ce7355e3-2aad-4171-9187-cda18df8aeaa">

### Checklist
* [x] I have read and agree to [Contributor
Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and
the [Code of
Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md)
* [x] I've included a screenshot or gif (if applicable)
* [x] I have tested the web demo (if applicable):
* Using examples from latest `main` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6287?manifest_url=https://app.rerun.io/version/main/examples_manifest.json)
* Using full set of examples from `nightly` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6287?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json)
* [x] The PR title and labels are set such as to maximize their
usefulness for the next release's CHANGELOG
* [x] If applicable, add a new check to the [release
checklist](https://github.com/rerun-io/rerun/blob/main/tests/python/release_checklist)!

- [PR Build Summary](https://build.rerun.io/pr/6287)
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)

To run all checks from `main`, comment on the PR with `@rerun-bot
full-check`.

crates/re_ui/src/lib.rs

@@ -25,6 +25,7 @@ pub use self::{
     syntax_highlighting::SyntaxHighlighting,
     toggle_switch::toggle_switch,
 };
+use std::hash::Hash;
 
 // ---------------------------------------------------------------------------
 
@@ -70,7 +71,7 @@ pub enum LabelStyle {
 use egui::emath::{Rangef, Rot2};
 use egui::{
     epaint::util::FloatOrd, pos2, Align2, CollapsingResponse, Color32, Mesh, NumExt, Rect, Shape,
-    Vec2, Widget,
+    Ui, Vec2, Widget,
 };
 
 #[derive(Debug, Clone)]
@@ -1162,6 +1163,69 @@ impl ReUi {
         ));
         painter.vline(x, (y_min + w)..=y_max, stroke);
     }
+
+    /// Draw a bullet (for text lists).
+    pub fn bullet(ui: &mut Ui, color: Color32) {
+        static DIAMETER: f32 = 6.0;
+        let (rect, _) =
+            ui.allocate_exact_size(egui::vec2(DIAMETER, DIAMETER), egui::Sense::hover());
+
+        ui.painter().add(egui::epaint::CircleShape {
+            center: rect.center(),
+            radius: DIAMETER / 2.0,
+            fill: color,
+            stroke: egui::Stroke::NONE,
+        });
+    }
+
+    /// Center the content within [`egui::Ui::max_rect()`].
+    ///
+    /// The `add_contents` closure is executed in the context of a vertical layout.
+    pub fn center<R>(
+        ui: &mut egui::Ui,
+        id_source: impl Hash,
+        add_contents: impl FnOnce(&mut egui::Ui) -> R,
+    ) -> R {
+        // Strategy:
+        // - estimate the size allocated by the `add_contents` closure
+        // - add space based on the estimated size and `ui.max_size()`
+        //
+        // The estimation is done by recording the cursor position before and after the closure in
+        // nested vertical/horizontal UIs such as for `ui.cursor()` to return the correct info.
+
+        #[derive(Clone, Copy)]
+        struct TextSize(egui::Vec2);
+
+        let id = ui.make_persistent_id(id_source);
+
+        let text_size: Option<TextSize> = ui.data(|reader| reader.get_temp(id));
+
+        // ensure the current ui has a vertical orientation so the space we add is in the correct
+        // direction
+        ui.vertical(|ui| {
+            if let Some(text_size) = text_size {
+                ui.add_space(ui.available_height() / 2.0 - text_size.0.y / 2.0);
+            }
+
+            ui.horizontal(|ui| {
+                if let Some(text_size) = text_size {
+                    ui.add_space(ui.available_width() / 2.0 - text_size.0.x / 2.0);
+                }
+
+                let starting_pos = ui.cursor().min;
+                let (result, end_y) = ui
+                    .vertical(|ui| (add_contents(ui), ui.cursor().min.y))
+                    .inner;
+
+                let end_pos = egui::pos2(ui.cursor().min.x, end_y);
+                ui.data_mut(|writer| writer.insert_temp(id, TextSize(end_pos - starting_pos)));
+
+                result
+            })
+            .inner
+        })
+        .inner
+    }
 }
 
 // ----------------------------------------------------------------------------

crates/re_viewer/src/ui/mod.rs

@@ -1,6 +1,5 @@
 mod blueprint_panel;
 mod mobile_warning_ui;
-mod no_data_ui;
 mod override_ui;
 mod recordings_panel;
 mod rerun_menu;
@@ -18,6 +17,6 @@ pub use recordings_panel::recordings_panel_ui;
 // ----
 
 pub(crate) use {
-    self::mobile_warning_ui::mobile_warning_ui, self::no_data_ui::no_data_ui,
-    self::top_panel::top_panel, self::welcome_screen::WelcomeScreen,
+    self::mobile_warning_ui::mobile_warning_ui, self::top_panel::top_panel,
+    self::welcome_screen::WelcomeScreen,
 };

crates/re_viewer/src/ui/recordings_panel.rs

@@ -142,6 +142,15 @@ fn recording_list_ui(
         }
     }
 
+    if entity_dbs_map.is_empty() && welcome_screen_state.hide {
+        ctx.re_ui
+            .list_item("No recordings loaded")
+            .weak(true)
+            .italics(true)
+            .interactive(false)
+            .show_flat(ui);
+    }
+
     for (app_id, entity_dbs) in entity_dbs_map {
         app_and_its_recordings_ui(ctx, ui, &app_id, entity_dbs);
     }

crates/re_viewer/src/ui/welcome_screen/mod.rs

@@ -1,13 +1,12 @@
 mod example_section;
+mod no_data_ui;
 mod welcome_section;
 
 use example_section::{ExampleSection, MIN_COLUMN_WIDTH};
 use welcome_section::welcome_section_ui;
 
 use crate::app_state::WelcomeScreenState;
 
-use super::no_data_ui;
-
 #[derive(Default)]
 pub struct WelcomeScreen {
     example_page: ExampleSection,
@@ -51,7 +50,7 @@ impl WelcomeScreen {
                 }
                 .show(ui, |ui| {
                     if welcome_screen_state.hide {
-                        no_data_ui(ui);
+                        no_data_ui::no_data_ui(ui);
                     } else {
                         self.example_page
                             .ui(ui, re_ui, command_sender, &welcome_section_ui);

crates/re_viewer/src/ui/welcome_screen/no_data_ui.rs

@@ -0,0 +1,58 @@
+use egui::Ui;
+
+#[derive(Debug, Default, Clone, Copy)]
+struct TextSize(egui::Vec2);
+
+/// Show a minimal welcome section.
+pub fn no_data_ui(ui: &mut egui::Ui) {
+    re_ui::ReUi::center(ui, "no_data_ui_contents", |ui| {
+        ui.add(
+            egui::Label::new(
+                egui::RichText::new(super::welcome_section::WELCOME_SCREEN_TITLE)
+                    .weak()
+                    .line_height(Some(36.0))
+                    .text_style(re_ui::ReUi::welcome_screen_h2()),
+            )
+            .wrap(true),
+        );
+
+        ui.add_space(10.0);
+
+        let bullet_text = |ui: &mut Ui, text: &str| {
+            ui.horizontal(|ui| {
+                ui.add_space(1.0);
+                re_ui::ReUi::bullet(ui, ui.visuals().weak_text_color());
+                ui.add_space(5.0);
+                ui.add(
+                    egui::Label::new(
+                        egui::RichText::new(text)
+                            .color(ui.visuals().weak_text_color())
+                            .text_style(re_ui::ReUi::welcome_screen_body()),
+                    )
+                    .wrap(true),
+                );
+            });
+            ui.add_space(4.0);
+        };
+
+        for text in super::welcome_section::WELCOME_SCREEN_BULLET_TEXT {
+            bullet_text(ui, text);
+        }
+
+        ui.add_space(9.0);
+        if ui
+            .button(
+                egui::RichText::new("Go to documentation →")
+                    .weak()
+                    .text_style(re_ui::ReUi::welcome_screen_body()),
+            )
+            .on_hover_cursor(egui::CursorIcon::PointingHand)
+            .clicked()
+        {
+            ui.ctx().open_url(egui::output::OpenUrl {
+                url: super::welcome_section::DOCS_URL.to_owned(),
+                new_tab: true,
+            });
+        }
+    });
+}

crates/re_viewer/src/ui/welcome_screen/welcome_section.rs

@@ -1,6 +1,12 @@
 use egui::Ui;
 
-const DOCS_URL: &str = "https://www.rerun.io/docs";
+pub(super) const DOCS_URL: &str = "https://www.rerun.io/docs";
+pub(super) const WELCOME_SCREEN_TITLE: &str = "Visualize Multimodal Data";
+pub(super) const WELCOME_SCREEN_BULLET_TEXT: &[&str] = &[
+    "Log data with the Rerun SDK in C++, Python, or Rust",
+    "Visualize and explore live or recorded data",
+    "Configure the viewer interactively or through code",
+];
 
 /// Show the welcome section.
 pub(super) fn welcome_section_ui(ui: &mut egui::Ui) {
@@ -13,7 +19,7 @@ pub(super) fn welcome_section_ui(ui: &mut egui::Ui) {
 
         ui.add(
             egui::Label::new(
-                egui::RichText::new("Visualize Multimodal Data")
+                egui::RichText::new(WELCOME_SCREEN_TITLE)
                     .strong()
                     .line_height(Some(line_height))
                     .text_style(style),
@@ -26,7 +32,7 @@ pub(super) fn welcome_section_ui(ui: &mut egui::Ui) {
         let bullet_text = |ui: &mut Ui, text: &str| {
             ui.horizontal(|ui| {
                 ui.add_space(1.0);
-                bullet(ui);
+                re_ui::ReUi::bullet(ui, ui.visuals().strong_text_color());
                 ui.add_space(5.0);
                 ui.add(
                     egui::Label::new(
@@ -40,9 +46,9 @@ pub(super) fn welcome_section_ui(ui: &mut egui::Ui) {
             ui.add_space(4.0);
         };
 
-        bullet_text(ui, "Log data with the Rerun SDK in C++, Python, or Rust");
-        bullet_text(ui, "Visualize and explore live or recorded data");
-        bullet_text(ui, "Configure the viewer interactively or through code");
+        for text in WELCOME_SCREEN_BULLET_TEXT {
+            bullet_text(ui, text);
+        }
 
         ui.add_space(9.0);
         if ui
@@ -63,15 +69,3 @@ pub(super) fn welcome_section_ui(ui: &mut egui::Ui) {
         ui.add_space(83.0);
     });
 }
-
-fn bullet(ui: &mut Ui) {
-    static DIAMETER: f32 = 6.0;
-    let (rect, _) = ui.allocate_exact_size(egui::vec2(DIAMETER, DIAMETER), egui::Sense::hover());
-
-    ui.painter().add(egui::epaint::CircleShape {
-        center: rect.center(),
-        radius: DIAMETER / 2.0,
-        fill: ui.visuals().strong_text_color(),
-        stroke: egui::Stroke::NONE,
-    });
-}