Improve datastore browser column header UI (#7344)

### What Uses the new `egui::Sides` API to display the sort arrow. Note that the truncation behaviour is not quite perfect yet. <img width="652" alt="image" src="https://github.com/user-attachments/assets/752934eb-c5b0-4840-a903-7b38a8837ab8"> ### 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/7344?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/7344?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)! * [x] If have noted any breaking changes to the log API in `CHANGELOG.md` and the migration guide - [PR Build Summary](https://build.rerun.io/pr/7344) - [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`. --------- Co-authored-by: Emil Ernerfeldt <[email protected]>
rerun-io · Sep 3, 2024 · 8464acb · 8464acb
1 parent b9c5612
commit 8464acb
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 31 deletions.
diff --git a/Cargo.lock b/Cargo.lock
@@ -1777,7 +1777,7 @@ checksum = "68b0cf012f1230e43cd00ebb729c6bb58707ecfa8ad08b52ef3a4ccd2697fc30"
 [[package]]
 name = "ecolor"
 version = "0.28.1"
-source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c"
+source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906"
 dependencies = [
  "bytemuck",
  "emath",
@@ -1787,7 +1787,7 @@ dependencies = [
 [[package]]
 name = "eframe"
 version = "0.28.1"
-source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c"
+source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906"
 dependencies = [
  "ahash",
  "bytemuck",
@@ -1824,7 +1824,7 @@ dependencies = [
 [[package]]
 name = "egui"
 version = "0.28.1"
-source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c"
+source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906"
 dependencies = [
  "accesskit",
  "ahash",
@@ -1841,7 +1841,7 @@ dependencies = [
 [[package]]
 name = "egui-wgpu"
 version = "0.28.1"
-source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c"
+source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906"
 dependencies = [
  "ahash",
  "bytemuck",
@@ -1860,7 +1860,7 @@ dependencies = [
 [[package]]
 name = "egui-winit"
 version = "0.28.1"
-source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c"
+source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906"
 dependencies = [
  "accesskit_winit",
  "ahash",
@@ -1902,7 +1902,7 @@ dependencies = [
 [[package]]
 name = "egui_extras"
 version = "0.28.1"
-source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c"
+source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906"
 dependencies = [
  "ahash",
  "egui",
@@ -1918,7 +1918,7 @@ dependencies = [
 [[package]]
 name = "egui_glow"
 version = "0.28.1"
-source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c"
+source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906"
 dependencies = [
  "ahash",
  "bytemuck",
@@ -1981,7 +1981,7 @@ checksum = "a26ae43d7bcc3b814de94796a5e736d4029efb0ee900c12e2d54c993ad1a1e07"
 [[package]]
 name = "emath"
 version = "0.28.1"
-source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c"
+source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906"
 dependencies = [
  "bytemuck",
  "serde",
@@ -2082,7 +2082,7 @@ dependencies = [
 [[package]]
 name = "epaint"
 version = "0.28.1"
-source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c"
+source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906"
 dependencies = [
  "ab_glyph",
  "ahash",
@@ -2101,7 +2101,7 @@ dependencies = [
 [[package]]
 name = "epaint_default_fonts"
 version = "0.28.1"
-source = "git+https://github.com/emilk/egui.git?rev=b9435541df664f36c0956007afe4155514eebc5c#b9435541df664f36c0956007afe4155514eebc5c"
+source = "git+https://github.com/emilk/egui.git?rev=454abf705b87aba70cef582d6ce80f74aa398906#454abf705b87aba70cef582d6ce80f74aa398906"
 
 [[package]]
 name = "equivalent"

diff --git a/Cargo.toml b/Cargo.toml
@@ -507,12 +507,12 @@ missing_errors_doc = "allow"
 # As a last resport, patch with a commit to our own repository.
 # ALWAYS document what PR the commit hash is part of, or when it was merged into the upstream trunk.
 
-ecolor = { git = "https://github.com/emilk/egui.git", rev = "b9435541df664f36c0956007afe4155514eebc5c" }      # egui master 2024-09-03
-eframe = { git = "https://github.com/emilk/egui.git", rev = "b9435541df664f36c0956007afe4155514eebc5c" }      # egui master 2024-09-03
-egui = { git = "https://github.com/emilk/egui.git", rev = "b9435541df664f36c0956007afe4155514eebc5c" }        # egui master 2024-09-03
-egui_extras = { git = "https://github.com/emilk/egui.git", rev = "b9435541df664f36c0956007afe4155514eebc5c" } # egui master 2024-09-03
-egui-wgpu = { git = "https://github.com/emilk/egui.git", rev = "b9435541df664f36c0956007afe4155514eebc5c" }   # egui master 2024-09-03
-emath = { git = "https://github.com/emilk/egui.git", rev = "b9435541df664f36c0956007afe4155514eebc5c" }       # egui master 2024-09-03
+ecolor = { git = "https://github.com/emilk/egui.git", rev = "454abf705b87aba70cef582d6ce80f74aa398906" }      # egui master 2024-09-03
+eframe = { git = "https://github.com/emilk/egui.git", rev = "454abf705b87aba70cef582d6ce80f74aa398906" }      # egui master 2024-09-03
+egui = { git = "https://github.com/emilk/egui.git", rev = "454abf705b87aba70cef582d6ce80f74aa398906" }        # egui master 2024-09-03
+egui_extras = { git = "https://github.com/emilk/egui.git", rev = "454abf705b87aba70cef582d6ce80f74aa398906" } # egui master 2024-09-03
+egui-wgpu = { git = "https://github.com/emilk/egui.git", rev = "454abf705b87aba70cef582d6ce80f74aa398906" }   # egui master 2024-09-03
+emath = { git = "https://github.com/emilk/egui.git", rev = "454abf705b87aba70cef582d6ce80f74aa398906" }       # egui master 2024-09-03
 
 # Useful while developing:
 # ecolor = { path = "../../egui/crates/ecolor" }

diff --git a/crates/viewer/re_chunk_store_ui/src/sort.rs b/crates/viewer/re_chunk_store_ui/src/sort.rs
@@ -27,31 +27,35 @@ pub(crate) struct SortColumn<T> {
 }
 
 /// UI for a column header that is sortable.
-//TODO(ab): this UI could be much improved with https://github.com/emilk/egui/issues/5015
 pub(crate) fn sortable_column_header_ui<T: Default + Copy + PartialEq>(
     column: &T,
     ui: &mut egui::Ui,
     sort_column: &mut SortColumn<T>,
     label: &'static str,
 ) {
     let is_sorted = &sort_column.column == column;
+    let direction = sort_column.direction;
 
-    ui.style_mut().wrap_mode = Some(egui::TextWrapMode::Truncate);
+    let (left_clicked, right_clicked) = egui::Sides::new()
+        .height(re_ui::DesignTokens::table_line_height())
+        .show(
+            ui,
+            |ui| {
+                ui.style_mut().wrap_mode = Some(egui::TextWrapMode::Truncate);
 
-    if ui
-        .add(egui::Button::new(
-            egui::WidgetText::from(format!(
-                "{label}{}",
-                match (is_sorted, sort_column.direction) {
-                    (true, SortDirection::Ascending) => " ↓",
-                    (true, SortDirection::Descending) => " ↑",
+                ui.button(egui::WidgetText::from(label).strong()).clicked()
+            },
+            |ui| {
+                ui.button(match (is_sorted, direction) {
+                    (true, SortDirection::Ascending) => "↓",
+                    (true, SortDirection::Descending) => "↑",
                     _ => "",
-                }
-            ))
-            .strong(),
-        ))
-        .clicked()
-    {
+                })
+                .clicked()
+            },
+        );
+
+    if left_clicked || right_clicked {
         if is_sorted {
             sort_column.direction.toggle();
         } else {