Syntax highlighting of entity paths and instance paths (#4803)

### What
* Closes #4598

Adds basic syntax highlighting to patsh. Slashes and brackets are in a
fixed bright-white color, while the text uses the color appropriate for
the widget it is in (labels are dimmer than button, for instance).

For labels this produces a lot of contrast:

![image](https://github.com/rerun-io/rerun/assets/1148717/b77139e6-6a5e-4779-a367-c64026997b47)

For buttons, not so much:

![image](https://github.com/rerun-io/rerun/assets/1148717/104f59b1-8226-4b88-a1e6-3c0a7d93ae14)


### 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 newly built examples:
[app.rerun.io](https://app.rerun.io/pr/4803/index.html)
* Using examples from latest `main` build:
[app.rerun.io](https://app.rerun.io/pr/4803/index.html?manifest_url=https://app.rerun.io/version/main/examples_manifest.json)
* Using full set of examples from `nightly` build:
[app.rerun.io](https://app.rerun.io/pr/4803/index.html?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

- [PR Build Summary](https://build.rerun.io/pr/4803)
- [Docs
preview](https://rerun.io/preview/6243e3c459dffd9c6c7f9f72c2bc4d9ab176044c/docs)
<!--DOCS-PREVIEW-->
- [Examples
preview](https://rerun.io/preview/6243e3c459dffd9c6c7f9f72c2bc4d9ab176044c/examples)
<!--EXAMPLES-PREVIEW-->
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)

crates/re_data_ui/src/item_ui.rs

@@ -2,9 +2,9 @@
 //!
 //! TODO(andreas): This is not a `data_ui`, can this go somewhere else, shouldn't be in `re_data_ui`.
 
-use egui::Ui;
 use re_entity_db::{EntityTree, InstancePath};
 use re_log_types::{ComponentPath, EntityPath, TimeInt, Timeline};
+use re_ui::SyntaxHighlighting;
 use re_viewer_context::{
     DataQueryId, HoverHighlight, Item, Selection, SpaceViewId, UiVerbosity, ViewerContext,
 };
@@ -49,7 +49,7 @@ pub fn entity_path_button(
         ui,
         space_view_id,
         &InstancePath::entity_splat(entity_path.clone()),
-        entity_path.to_string(),
+        entity_path.syntax_highlighted(ui.style()),
     )
 }
 
@@ -82,7 +82,7 @@ pub fn instance_path_button(
         ui,
         space_view_id,
         instance_path,
-        instance_path.to_string(),
+        instance_path.syntax_highlighted(ui.style()),
     )
 }
 
@@ -351,14 +351,18 @@ pub fn select_hovered_on_click(
 /// Displays the "hover card" (i.e. big tooltip) for an instance or an entity.
 ///
 /// The entity hover card is displayed the provided instance path is a splat.
-pub fn instance_hover_card_ui(ui: &mut Ui, ctx: &ViewerContext<'_>, instance_path: &InstancePath) {
+pub fn instance_hover_card_ui(
+    ui: &mut egui::Ui,
+    ctx: &ViewerContext<'_>,
+    instance_path: &InstancePath,
+) {
     let subtype_string = if instance_path.instance_key.is_splat() {
         "Entity"
     } else {
         "Entity Instance"
     };
     ui.strong(subtype_string);
-    ui.label(format!("Path: {instance_path}"));
+    ui.label(instance_path.syntax_highlighted(ui.style()));
 
     // TODO(emilk): give data_ui an alternate "everything on this timeline" query?
     // Then we can move the size view into `data_ui`.

crates/re_ui/Cargo.toml

@@ -26,6 +26,9 @@ all-features = true
 default = []
 
 [dependencies]
+re_entity_db.workspace = true # syntax-highlighting for InstancePath. TODO(emilk): move InstancePath
+re_log_types.workspace = true # syntax-highlighting for EntityPath
+
 egui_commonmark.workspace = true
 egui_extras.workspace = true
 egui.workspace = true

crates/re_ui/src/lib.rs

@@ -8,6 +8,7 @@ pub mod icons;
 mod layout_job_builder;
 pub mod list_item;
 pub mod modal;
+mod syntax_highlighting;
 pub mod toasts;
 mod toggle_switch;
 
@@ -16,6 +17,7 @@ pub use command_palette::CommandPalette;
 pub use design_tokens::DesignTokens;
 pub use icons::Icon;
 pub use layout_job_builder::LayoutJobBuilder;
+pub use syntax_highlighting::SyntaxHighlighting;
 pub use toggle_switch::toggle_switch;
 
 // ---------------------------------------------------------------------------

crates/re_ui/src/syntax_highlighting.rs

@@ -0,0 +1,64 @@
+use re_entity_db::InstancePath;
+use re_log_types::{EntityPath, EntityPathPart};
+
+use egui::{text::LayoutJob, Color32, Style, TextFormat};
+
+pub trait SyntaxHighlighting {
+    fn syntax_highlighted(&self, style: &Style) -> LayoutJob {
+        let mut job = LayoutJob::default();
+        self.syntax_highlight_into(style, &mut job);
+        job
+    }
+
+    fn syntax_highlight_into(&self, style: &Style, job: &mut LayoutJob);
+}
+
+fn text_format(style: &Style) -> TextFormat {
+    TextFormat {
+        font_id: egui::TextStyle::Body.resolve(style),
+
+        // This color be replaced with appropriate color based on widget,
+        // and whether the widget is hovered, etc
+        color: Color32::PLACEHOLDER,
+
+        ..Default::default()
+    }
+}
+
+fn faint_text_format(style: &Style) -> TextFormat {
+    TextFormat {
+        color: Color32::WHITE,
+
+        ..text_format(style)
+    }
+}
+
+impl SyntaxHighlighting for EntityPathPart {
+    fn syntax_highlight_into(&self, style: &Style, job: &mut LayoutJob) {
+        job.append(&self.ui_string(), 0.0, text_format(style));
+    }
+}
+
+impl SyntaxHighlighting for EntityPath {
+    fn syntax_highlight_into(&self, style: &Style, job: &mut LayoutJob) {
+        job.append("/", 0.0, faint_text_format(style));
+
+        for (i, part) in self.iter().enumerate() {
+            if i != 0 {
+                job.append("/", 0.0, faint_text_format(style));
+            }
+            part.syntax_highlight_into(style, job);
+        }
+    }
+}
+
+impl SyntaxHighlighting for InstancePath {
+    fn syntax_highlight_into(&self, style: &Style, job: &mut LayoutJob) {
+        self.entity_path.syntax_highlight_into(style, job);
+        if !self.instance_key.is_splat() {
+            job.append("[", 0.0, faint_text_format(style));
+            job.append(&self.instance_key.to_string(), 0.0, text_format(style));
+            job.append("]", 0.0, faint_text_format(style));
+        }
+    }
+}

crates/re_viewer/src/ui/selection_panel.rs

@@ -13,6 +13,7 @@ use re_types::{
 };
 use re_ui::list_item::ListItem;
 use re_ui::ReUi;
+use re_ui::SyntaxHighlighting as _;
 use re_viewer_context::{
     gpu_bridge::colormap_dropdown_button_ui, HoverHighlight, Item, SpaceViewClass,
     SpaceViewClassIdentifier, SpaceViewId, SystemCommand, SystemCommandSender as _, UiVerbosity,
@@ -353,12 +354,14 @@ fn what_is_selected_ui(
                 "Entity instance"
             };
 
+            let name = instance_path.syntax_highlighted(ui.style());
+
             if let Some(space_view_id) = space_view_id {
                 if let Some(space_view) = viewport.space_view(space_view_id) {
                     item_title_ui(
                         ctx.re_ui,
                         ui,
-                        instance_path.to_string().as_str(),
+                        name,
                         None,
                         &format!(
                             "{typ} '{instance_path}' as shown in Space View {:?}",
@@ -375,7 +378,7 @@ fn what_is_selected_ui(
                 item_title_ui(
                     ctx.re_ui,
                     ui,
-                    instance_path.to_string().as_str(),
+                    name,
                     None,
                     &format!("{typ} '{instance_path}'"),
                 );
@@ -409,7 +412,7 @@ fn what_is_selected_ui(
 fn item_title_ui(
     re_ui: &re_ui::ReUi,
     ui: &mut egui::Ui,
-    name: &str,
+    name: impl Into<egui::WidgetText>,
     icon: Option<&re_ui::Icon>,
     hover: &str,
 ) -> egui::Response {