Add arrow data tree view and syntax highlighting

ARCHITECTURE.md

@@ -135,6 +135,7 @@ Update instructions:
 
 | Crate                 | Description                                                                                                |
 |-----------------------|------------------------------------------------------------------------------------------------------------|
+| re_arrow_ui           | Show arrow data in a tree of rerun list_items and format arrow with syntax highlighting.                   |
 | re_blueprint_tree     | The UI for the blueprint tree in the left panel.                                                           |
 | re_redap_browser      | The UI and communication to implement the in-viewer redap server browser.                                  |
 | re_chunk_store_ui     | A chunk store browser UI.                                                                                  |

Cargo.lock

@@ -7172,6 +7172,21 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "re_arrow_ui"
+version = "0.25.0-alpha.1+dev"
+dependencies = [
+ "arrow",
+ "egui",
+ "egui_kittest",
+ "half",
+ "re_arrow_util",
+ "re_format",
+ "re_tracing",
+ "re_types",
+ "re_ui",
+]
+
 [[package]]
 name = "re_arrow_util"
 version = "0.25.0-alpha.1+dev"
@@ -7350,6 +7365,7 @@ dependencies = [
  "egui",
  "egui_extras",
  "itertools 0.14.0",
+ "re_arrow_ui",
  "re_byte_size",
  "re_chunk_store",
  "re_format",
@@ -7491,6 +7507,7 @@ dependencies = [
  "egui_plot",
  "itertools 0.14.0",
  "jiff",
+ "re_arrow_ui",
  "re_arrow_util",
  "re_byte_size",
  "re_capabilities",
@@ -8477,7 +8494,6 @@ version = "0.25.0-alpha.1+dev"
 dependencies = [
  "ahash",
  "anyhow",
- "arrow",
  "eframe",
  "egui",
  "egui_commonmark",
@@ -8491,14 +8507,12 @@ dependencies = [
  "parking_lot",
  "rand 0.8.5",
  "re_analytics",
- "re_arrow_util",
  "re_build_tools",
  "re_entity_db",
  "re_format",
  "re_log",
  "re_log_types",
  "re_tracing",
- "re_types",
  "ron",
  "serde",
  "smallvec",
@@ -8931,6 +8945,7 @@ dependencies = [
  "ndarray",
  "nohash-hasher",
  "parking_lot",
+ "re_arrow_ui",
  "re_arrow_util",
  "re_byte_size",
  "re_chunk",
@@ -12859,18 +12874,18 @@ dependencies = [
 
 [[package]]
 name = "zstd-safe"
-version = "7.2.4"
+version = "7.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8f49c4d5f0abb602a93fb8736af2a4f4dd9512e36f7f570d66e65ff867ed3b9d"
+checksum = "54a3ab4db68cea366acc5c897c7b4d4d1b8994a9cd6e6f841f8964566a419059"
 dependencies = [
  "zstd-sys",
 ]
 
 [[package]]
 name = "zstd-sys"
-version = "2.0.15+zstd.1.5.7"
+version = "2.0.12+zstd.1.5.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eb81183ddd97d0c74cedf1d50d85c8d08c1b8b68ee863bdee9e706eedba1a237"
+checksum = "0a4e40c320c3cb459d9a9ff6de98cff88f4751ee9275d140e2be94a2b74e4c13"
 dependencies = [
  "cc",
  "pkg-config",

Cargo.toml

@@ -111,6 +111,7 @@ re_uri = { path = "crates/utils/re_uri", version = "=0.25.0-alpha.1", default-fe
 re_video = { path = "crates/utils/re_video", version = "=0.25.0-alpha.1", default-features = false }
 
 # crates/viewer:
+re_arrow_ui = { path = "crates/viewer/re_arrow_ui", version = "=0.25.0-alpha.1", default-features = false }
 re_blueprint_tree = { path = "crates/viewer/re_blueprint_tree", version = "=0.25.0-alpha.1", default-features = false }
 re_redap_browser = { path = "crates/viewer/re_redap_browser", version = "=0.25.0-alpha.1", default-features = false }
 re_component_ui = { path = "crates/viewer/re_component_ui", version = "=0.25.0-alpha.1", default-features = false }
@@ -420,6 +421,7 @@ debug = false
 
 [profile.dev.package]
 "re_analytics".debug = true
+"re_arrow_ui".debug = true
 "re_arrow_util".debug = true
 "re_auth".debug = true
 "re_blueprint_tree".debug = true

crates/viewer/re_arrow_ui/Cargo.toml

@@ -0,0 +1,30 @@
+[package]
+authors.workspace = true
+description = "Show arrow data in a tree of rerun list_items and format arrow with syntax highlighting."
+edition.workspace = true
+homepage.workspace = true
+license.workspace = true
+name = "re_arrow_ui"
+publish = true
+readme = "README.md"
+repository.workspace = true
+rust-version.workspace = true
+version.workspace = true
+include.workspace = true
+
+[lints]
+workspace = true
+
+[dependencies]
+re_arrow_util.workspace = true
+re_format.workspace = true
+re_tracing.workspace = true
+re_ui.workspace = true
+
+arrow.workspace = true
+egui.workspace = true
+half.workspace = true
+
+[dev-dependencies]
+egui_kittest.workspace = true
+re_types.workspace = true

crates/viewer/re_arrow_ui/README.md

@@ -0,0 +1,10 @@
+# re_arrow_ui
+
+Part of the [`rerun`](https://github.com/rerun-io/rerun) family of crates.
+
+[![Latest version](https://img.shields.io/crates/v/re_blueprint_tree.svg)](https://crates.io/crates/re_blueprint_tree)
+[![Documentation](https://docs.rs/re_blueprint_tree/badge.svg)](https://docs.rs/re_blueprint_tree)
+![MIT](https://img.shields.io/badge/license-MIT-blue.svg)
+![Apache](https://img.shields.io/badge/license-Apache-blue.svg)
+
+Show arrow data in a tree of rerun list_items and format arrow with syntax highlighting.

crates/viewer/re_arrow_ui/src/arrow_node.rs

@@ -0,0 +1,144 @@
+use crate::datatype_ui::data_type_ui;
+use crate::show_index::ShowIndex;
+use egui::{Id, RichText, Stroke, StrokeKind, Tooltip, Ui, WidgetText};
+use re_format::format_uint;
+use re_ui::UiExt as _;
+use re_ui::list_item::{LabelContent, PropertyContent, list_item_scope};
+use re_ui::syntax_highlighting::SyntaxHighlightedBuilder;
+
+enum NodeLabel {
+    /// The index to *display*. May be different from the actual index of the value.
+    Index(usize),
+    Name(String),
+    Custom(WidgetText),
+}
+
+/// Display an item of an Arrow array in a list item with some label.
+pub struct ArrowNode<'a> {
+    label: NodeLabel,
+    values: &'a dyn ShowIndex,
+}
+
+impl<'a> ArrowNode<'a> {
+    /// Create a new [`ArrowNode`] with a custom label
+    pub fn custom(name: impl Into<WidgetText>, values: &'a dyn ShowIndex) -> Self {
+        Self {
+            label: NodeLabel::Custom(name.into()),
+            values,
+        }
+    }
+
+    /// Create a new [`ArrowNode`] with a name label.
+    pub fn name(name: impl Into<String>, values: &'a dyn ShowIndex) -> Self {
+        Self {
+            label: NodeLabel::Name(name.into()),
+            values,
+        }
+    }
+
+    /// The index to *display*
+    pub fn index(idx: usize, values: &'a dyn ShowIndex) -> Self {
+        Self {
+            label: NodeLabel::Index(idx),
+            values,
+        }
+    }
+
+    /// The index of the *value* to display.
+    /// Can be different from [`ArrowNode::index`] e.g. in a sliced array.
+    pub fn show(self, ui: &mut Ui, index: usize) {
+        let label = match self.label {
+            NodeLabel::Index(idx) => {
+                let mut builder = SyntaxHighlightedBuilder::new(ui.style(), ui.tokens());
+                builder.code_index(&format_uint(idx));
+                builder.into_widget_text()
+            }
+            NodeLabel::Name(name) => {
+                let mut builder = SyntaxHighlightedBuilder::new(ui.style(), ui.tokens());
+                builder.code_name(&name);
+                builder.into_widget_text()
+            }
+            NodeLabel::Custom(name) => name,
+        };
+
+        let mut value = SyntaxHighlightedBuilder::new(ui.style(), ui.tokens());
+        let result = self.values.write(index, &mut value);
+        let value = match result {
+            Ok(()) => value.into_widget_text(),
+            Err(err) => RichText::new(format!("Error: {err}"))
+                .color(ui.tokens().error_fg_color)
+                .into(),
+        };
+
+        let nested = self.values.is_item_nested();
+        let data_type = self.values.array().data_type();
+        let data_type_ui = data_type_ui(data_type);
+
+        let item = ui.list_item();
+        // We *don't* use index for the ID, since it might change across timesteps,
+        // while referring the same logical data.
+        let id = ui.id().with(label.text());
+        let content = PropertyContent::new(label)
+            .value_fn(|ui, visuals| {
+                ui.horizontal(|ui| {
+                    egui::Sides::new().shrink_left().show(
+                        ui,
+                        |ui| {
+                            if visuals.is_collapsible() && visuals.openness() != 0.0 {
+                                if visuals.openness() == 1.0 {
+                                    return;
+                                }
+                                ui.set_opacity(1.0 - visuals.openness());
+                            }
+                            ui.label(value);
+                        },
+                        |ui| {
+                            let tooltip_open =
+                                Tooltip::was_tooltip_open_last_frame(ui.ctx(), ui.next_auto_id());
+                            // Keep showing the data type when the tooltip is open, so the
+                            // user can interact with it.
+                            if visuals.hovered || tooltip_open {
+                                let response =
+                                    ui.small(RichText::new(&data_type_ui.type_name).strong());
+                                ui.painter().rect_stroke(
+                                    response.rect.expand(2.0),
+                                    4.0,
+                                    Stroke::new(1.0, visuals.text_color()),
+                                    StrokeKind::Middle,
+                                );
+
+                                if let Some(content) = data_type_ui.content {
+                                    response.on_hover_ui(|ui| {
+                                        list_item_scope(
+                                            ui,
+                                            Id::new("arrow data type hover"),
+                                            |ui| {
+                                                ui.list_item().show_hierarchical_with_children(
+                                                    ui,
+                                                    Id::new("arrow data type item hover"),
+                                                    true,
+                                                    LabelContent::new(data_type_ui.type_name),
+                                                    content,
+                                                );
+                                            },
+                                        );
+                                    });
+                                }
+                            }
+                        },
+                    );
+                });
+            })
+            .show_only_when_collapsed(false);
+
+        if nested {
+            item.show_hierarchical_with_children(ui, id, false, content, |ui| {
+                list_item_scope(ui, id.with("child_scope"), |ui| {
+                    self.values.show(index, ui);
+                });
+            });
+        } else {
+            item.show_hierarchical(ui, content);
+        }
+    }
+}

crates/viewer/re_arrow_ui/src/arrow_ui.rs

@@ -0,0 +1,91 @@
+use crate::datatype_ui::data_type_ui;
+use crate::show_index::ArrayUi;
+use arrow::{array::Array, error::ArrowError, util::display::FormatOptions};
+use egui::Id;
+use re_arrow_util::ArrowArrayDowncastRef as _;
+use re_ui::list_item::{PropertyContent, list_item_scope};
+use re_ui::{UiExt as _, UiLayout};
+
+pub fn arrow_ui(ui: &mut egui::Ui, ui_layout: UiLayout, array: &dyn Array) {
+    re_tracing::profile_function!();
+
+    use arrow::array::{LargeStringArray, StringArray};
+
+    ui.scope(|ui| {
+        ui.style_mut().wrap_mode = Some(egui::TextWrapMode::Truncate);
+
+        // TODO: Should this also be handled in the arrow tree UI?
+        // Special-treat text.
+        // This is so that we can show urls as clickable links.
+        // Note: we match on the raw data here, so this works for any component containing text.
+        if let Some(entries) = array.downcast_array_ref::<StringArray>() {
+            if entries.len() == 1 {
+                let string = entries.value(0);
+                ui_layout.data_label(ui, string);
+                return;
+            }
+        }
+        if let Some(entries) = array.downcast_array_ref::<LargeStringArray>() {
+            if entries.len() == 1 {
+                let string = entries.value(0);
+                ui_layout.data_label(ui, string);
+                return;
+            }
+        }
+
+        match make_ui(array) {
+            Ok(array_formatter) => match ui_layout {
+                UiLayout::SelectionPanel => {
+                    list_item_scope(ui, Id::new("arrow_ui"), |ui| {
+                        let data_type_ui = data_type_ui(array.data_type());
+                        let content = PropertyContent::new("Data type")
+                            .value_text(data_type_ui.type_name)
+                            .show_only_when_collapsed(false);
+                        if let Some(datatype_ui) = data_type_ui.content {
+                            ui.list_item().show_hierarchical_with_children(
+                                ui,
+                                Id::new("data_type_ui_root"),
+                                false,
+                                content,
+                                datatype_ui,
+                            );
+                        } else {
+                            ui.list_item().show_hierarchical(ui, content);
+                        }
+                        if array.len() == 1 {
+                            array_formatter.show_value(0, ui);
+                        } else {
+                            array_formatter.show(ui);
+                        }
+                    });
+                }
+                UiLayout::Tooltip | UiLayout::List => {
+                    let job = if array.len() == 1 {
+                        array_formatter.value_job(ui, 0)
+                    } else {
+                        array_formatter.job(ui)
+                    };
+                    match job {
+                        Ok(job) => {
+                            ui_layout.label(ui, job);
+                        }
+                        Err(err) => {
+                            ui.error_with_details_on_hover(err.to_string());
+                        }
+                    }
+                }
+            },
+            Err(err) => {
+                ui.error_with_details_on_hover(err.to_string());
+            }
+        }
+    });
+}
+
+pub(crate) fn make_ui(array: &dyn Array) -> Result<ArrayUi<'_>, ArrowError> {
+    let options = FormatOptions::default()
+        .with_null("null")
+        .with_display_error(true);
+    let array_ui = ArrayUi::try_new(array, &options)?;
+    Ok(array_ui)
+}