Collapse panels (#238)

* Add button to collapse/expand blueprint panel * Shortcuts: Cmd-Shift-R to reset Viewer, Cmd-Shift-P to open profiler * Animate expansion of blueprint panel * Collapse selection panel * Expand/collapse timeline panel * Update egui * Update changelog * Fix compilation with no-default-features * Add shortcut keybindings for toggling the panels * Use same panel frame everywhere
rerun-io · Oct 31, 2022 · 256142d · 256142d
1 parent 2d817d8
commit 256142d
Show file tree

Hide file tree

Showing 9 changed files with 265 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 A rough time-line of major user-facing things added, removed and changed. Newest on top.
 
+* 2022-10-28: Add buttons to collapse/expand the side panels ([#238](https://github.com/rerun-io/rerun/pull/238)).
 * 2022-10-26: Replace old `space=…` and `set_space_up` code with new space transform hierarchy. See [`USAGE.md`](rerun_py/USAGE.md) for details ([#224](https://github.com/rerun-io/rerun/pull/224)).
 * 2022-10-19: Add support for SegmentationMaps ([#187](https://github.com/rerun-io/rerun/pull/187)).
 * 2022-10-14: Add support for logging 3D Arrows ([#199](https://github.com/rerun-io/rerun/pull/199)).

diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -24,12 +24,17 @@ opt-level = 2
 debug = true
 
 [patch.crates-io]
-# 2022-10-16 - table: fix deadlocks caused by lock fairness
-eframe = { git = "https://github.com/emilk/egui", rev = "3d36a20376a8479647557d172e1abc82abbff135" }
-egui = { git = "https://github.com/emilk/egui", rev = "3d36a20376a8479647557d172e1abc82abbff135" }
-egui_extras = { git = "https://github.com/emilk/egui", rev = "3d36a20376a8479647557d172e1abc82abbff135" }
-egui_glow = { git = "https://github.com/emilk/egui", rev = "3d36a20376a8479647557d172e1abc82abbff135" }
-egui-wgpu = { git = "https://github.com/emilk/egui", rev = "3d36a20376a8479647557d172e1abc82abbff135" }
+# 2022-10-28 - panel toggle animation
+eframe = { git = "https://github.com/emilk/egui", rev = "f7a15a34f9bd17f39ae75c488b722873465c8d86" }
+egui = { git = "https://github.com/emilk/egui", rev = "f7a15a34f9bd17f39ae75c488b722873465c8d86" }
+egui_extras = { git = "https://github.com/emilk/egui", rev = "f7a15a34f9bd17f39ae75c488b722873465c8d86" }
+egui_glow = { git = "https://github.com/emilk/egui", rev = "f7a15a34f9bd17f39ae75c488b722873465c8d86" }
+egui-wgpu = { git = "https://github.com/emilk/egui", rev = "f7a15a34f9bd17f39ae75c488b722873465c8d86" }
+# eframe = { path = "../../egui/crates/eframe" }
+# egui = { path = "../../egui/crates/egui" }
+# egui_extras = { path = "../../egui/crates/egui_extras" }
+# egui_glow = { path = "../../egui/crates/egui_glow" }
+# egui-wgpu = { path = "../../egui/crates/egui-wgpu" }
 
 # Because gltf hasn't published a new version: https://github.com/gltf-rs/gltf/issues/357
 gltf = { git = "https://github.com/rerun-io/gltf", rev = "3c14ded73755d1ce9e47010edb06db63cb7e2cca" }

diff --git a/crates/re_viewer/src/app.rs b/crates/re_viewer/src/app.rs
@@ -200,6 +200,21 @@ impl eframe::App for App {
             return;
         }
 
+        if egui_ctx.input_mut().consume_key(
+            egui::Modifiers::COMMAND | egui::Modifiers::SHIFT,
+            egui::Key::R,
+        ) {
+            self.reset(egui_ctx);
+        }
+
+        #[cfg(all(feature = "puffin", not(target_arch = "wasm32")))]
+        if egui_ctx.input_mut().consume_key(
+            egui::Modifiers::COMMAND | egui::Modifiers::SHIFT,
+            egui::Key::P,
+        ) {
+            self.state.profiler.start();
+        }
+
         self.state.cache.new_frame();
 
         if let Some(rx) = &mut self.rx {
@@ -257,7 +272,7 @@ impl eframe::App for App {
                 });
             });
         } else {
-            self.state.show(egui_ctx, log_db);
+            self.state.show(egui_ctx, log_db, &self.design_tokens);
         }
 
         self.handle_dropping_files(egui_ctx);
@@ -277,6 +292,20 @@ impl eframe::App for App {
 }
 
 impl App {
+    /// Reset the viewer to how it looked the first time you ran it.
+    fn reset(&mut self, egui_ctx: &egui::Context) {
+        self.state = Default::default();
+
+        // Keep dark/light mode setting:
+        let is_dark_mode = egui_ctx.style().visuals.dark_mode;
+        *egui_ctx.memory() = Default::default();
+        egui_ctx.set_visuals(if is_dark_mode {
+            egui::Visuals::dark()
+        } else {
+            egui::Visuals::light()
+        });
+    }
+
     fn log_db(&mut self) -> &mut LogDb {
         self.log_dbs.entry(self.state.selected_rec_id).or_default()
     }
@@ -388,7 +417,7 @@ struct AppState {
 }
 
 impl AppState {
-    fn show(&mut self, egui_ctx: &egui::Context, log_db: &LogDb) {
+    fn show(&mut self, egui_ctx: &egui::Context, log_db: &LogDb, design_tokens: &DesignTokens) {
         crate::profile_function!();
 
         let Self {
@@ -413,21 +442,12 @@ impl AppState {
             cache,
             log_db,
             rec_cfg,
+            design_tokens,
         };
 
-        if ctx.rec_cfg.selection.is_some() {
-            egui::SidePanel::right("selection_view").show(egui_ctx, |ui| {
-                let blueprint = blueprints.entry(*selected_recording_id).or_default();
-                selection_panel.ui(&mut ctx, blueprint, ui);
-            });
-        }
-
-        egui::TopBottomPanel::bottom("time_panel")
-            .resizable(true)
-            .default_height(210.0)
-            .show(egui_ctx, |ui| {
-                time_panel.ui(&mut ctx, ui);
-            });
+        let blueprint = blueprints.entry(*selected_recording_id).or_default();
+        selection_panel.show_panel(&mut ctx, blueprint, egui_ctx);
+        time_panel.show_panel(&mut ctx, blueprint, egui_ctx);
 
         let central_panel_frame = egui::Frame {
             fill: egui_ctx.style().visuals.window_fill(),
@@ -689,27 +709,19 @@ fn file_menu(ui: &mut egui::Ui, app: &mut App, _frame: &mut eframe::Frame) {
     ui.menu_button("Advanced", |ui| {
         if ui
             .button("Reset viewer")
-            .on_hover_text("Reset the viewer to how it looked the first time you ran it.")
+            .on_hover_text(
+                "Reset the viewer to how it looked the first time you ran it (⌘⇧R or ⌃⇧R)",
+            )
             .clicked()
         {
-            app.state = Default::default();
-
-            // Keep dark/light mode setting:
-            let is_dark_mode = ui.ctx().style().visuals.dark_mode;
-            *ui.ctx().memory() = Default::default();
-            ui.ctx().set_visuals(if is_dark_mode {
-                egui::Visuals::dark()
-            } else {
-                egui::Visuals::light()
-            });
-
+            app.reset(ui.ctx());
             ui.close_menu();
         }
 
         #[cfg(all(feature = "puffin", not(target_arch = "wasm32")))]
         if ui
             .button("Profile viewer")
-            .on_hover_text("Starts a profiler, showing what makes the viewer run slow")
+            .on_hover_text("Starts a profiler, showing what makes the viewer run slow (⌘⇧P or ⌃⇧P)")
             .clicked()
         {
             app.state.profiler.start();

diff --git a/crates/re_viewer/src/design_tokens.rs b/crates/re_viewer/src/design_tokens.rs
@@ -7,6 +7,18 @@ pub struct DesignTokens {
     pub top_bar_color: egui::Color32,
 }
 
+impl DesignTokens {
+    #[allow(clippy::unused_self)]
+    pub fn panel_frame(&self, egui_ctx: &egui::Context) -> egui::Frame {
+        egui::Frame {
+            fill: egui_ctx.style().visuals.window_fill(),
+            inner_margin: egui::style::Margin::same(4.0),
+            stroke: egui_ctx.style().visuals.window_stroke(),
+            ..Default::default()
+        }
+    }
+}
+
 pub(crate) fn apply_design_tokens(ctx: &egui::Context) -> DesignTokens {
     let apply_font = true;
     let apply_font_size = true;

diff --git a/crates/re_viewer/src/misc/viewer_context.rs b/crates/re_viewer/src/misc/viewer_context.rs
@@ -17,6 +17,9 @@ pub(crate) struct ViewerContext<'a> {
 
     /// UI config for the current recording (found in [`LogDb`]).
     pub rec_cfg: &'a mut RecordingConfig,
+
+    /// The look and feel of the UI
+    pub design_tokens: &'a crate::design_tokens::DesignTokens,
 }
 
 impl<'a> ViewerContext<'a> {

diff --git a/crates/re_viewer/src/ui/selection_panel.rs b/crates/re_viewer/src/ui/selection_panel.rs
@@ -12,21 +12,66 @@ pub(crate) struct SelectionPanel {}
 
 impl SelectionPanel {
     #[allow(clippy::unused_self)]
-    pub fn ui(
+    pub fn show_panel(
         &mut self,
         ctx: &mut ViewerContext<'_>,
         blueprint: &mut Blueprint,
-        ui: &mut egui::Ui,
+        egui_ctx: &egui::Context,
     ) {
-        crate::profile_function!();
+        blueprint.selection_panel_expanded ^= egui_ctx.input_mut().consume_key(
+            egui::Modifiers::COMMAND | egui::Modifiers::SHIFT,
+            egui::Key::S,
+        );
+
+        let panel_frame = ctx.design_tokens.panel_frame(egui_ctx);
+
+        let collapsed = egui::SidePanel::right("selection_view_collapsed")
+            .resizable(false)
+            .frame(panel_frame)
+            .default_width(16.0);
+        let expanded = egui::SidePanel::right("selection_view_expanded")
+            .resizable(true)
+            .frame(panel_frame);
+
+        egui::SidePanel::show_animated_between(
+            egui_ctx,
+            blueprint.selection_panel_expanded,
+            collapsed,
+            expanded,
+            |ui: &mut egui::Ui, expansion: f32| {
+                if expansion < 1.0 {
+                    // Collapsed, or animating:
+                    if ui
+                        .small_button("⏴")
+                        .on_hover_text("Expand Selection View (⌘⇧S or ⌃⇧S)")
+                        .clicked()
+                    {
+                        blueprint.selection_panel_expanded = true;
+                    }
+                } else {
+                    // Expanded:
+                    if ui
+                        .small_button("⏵")
+                        .on_hover_text("Collapse Selection View (⌘⇧S or ⌃⇧S)")
+                        .clicked()
+                    {
+                        blueprint.selection_panel_expanded = false;
+                    }
 
-        ui.horizontal(|ui| {
-            ui.heading("Selection");
+                    self.contents(ctx, blueprint, ui);
+                }
+            },
+        );
+    }
 
-            if ctx.rec_cfg.selection.is_some() && ui.small_button("Deselect").clicked() {
-                ctx.rec_cfg.selection = Selection::None;
-            }
-        });
+    #[allow(clippy::unused_self)]
+    fn contents(
+        &mut self,
+        ctx: &mut ViewerContext<'_>,
+        blueprint: &mut Blueprint,
+        ui: &mut egui::Ui,
+    ) {
+        crate::profile_function!();
 
         ui.separator();