Initial support for manually adding container and space view in the h…

…ierarchy (#4616)

### What

This is an initial take for the new so-called "additive workflow", which
enables building a hierarchy of container and space views from scratch.
It involves the following changes in UX:
- The automatic simplification of the container tree is (mostly)
disabled, as empty containers must be (temporarily) allowed while
building a hierarchy.
- Instead, a new "Simplify Container" button is available in the
Selection Panel to simplify the subtree under the selected container.
- A list if container children is displayed in the container Selection
Panel, with a button to add more.
- A new "Add Container or Space View" modal makes it possible to add a
container and/or a space view of any type in the selected container.
This feature is gated behind an experimental flag (Rerun Menu -> Options
-> Enable the container addition workflow).

<img width="1248" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/0b58c298-d75c-480e-a88d-c1a5fe2265f5">

~~This PR also reorganises the experimental flags in the rerun menu such
that they are visible in web and release builds.~~ (superseded by #4661)

Fixes #4492 
Fixes #4493 

#### TODO (not necessarily in this PR)

- [x] Fix the hover/click UI of the big PLUS button in the modal.
- The PLUS button in the blueprint tree panel still shows the older
menu. This should reunified somehow (when we figure out how we want the
heuristics to show up): #4652
- Lots of container tree behaviour edge case to identify and fix.
- The modal really needs the new icons #4321
- Better hover highlight in the modal:
#4673

### 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/4616/index.html)
* Using examples from latest `main` build:
[app.rerun.io](https://app.rerun.io/pr/4616/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/4616/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/4616)
- [Docs
preview](https://rerun.io/preview/044dfdff939ae0e7bfa7effd2533a1026a11dd0f/docs)
<!--DOCS-PREVIEW-->
- [Examples
preview](https://rerun.io/preview/044dfdff939ae0e7bfa7effd2533a1026a11dd0f/examples)
<!--EXAMPLES-PREVIEW-->
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)

---------

Co-authored-by: Jeremy Leibs <jeremy@rerun.io>

crates/re_ui/src/icons.rs

@@ -57,6 +57,8 @@ pub const VISIBLE: Icon = Icon::new("visible", include_bytes!("../data/icons/vis
 pub const INVISIBLE: Icon = Icon::new("invisible", include_bytes!("../data/icons/invisible.png"));
 
 pub const ADD: Icon = Icon::new("add", include_bytes!("../data/icons/add.png"));
+
+pub const ADD_BIG: Icon = Icon::new("add_big", include_bytes!("../data/icons/add_big.png"));
 pub const REMOVE: Icon = Icon::new("remove", include_bytes!("../data/icons/remove.png"));
 
 pub const RESET: Icon = Icon::new("reset", include_bytes!("../data/icons/reset.png"));

crates/re_viewer/src/ui/add_space_view_or_container_modal.rs

@@ -0,0 +1,165 @@
+//! Modal for adding a new space view of container to an existing target container.
+
+use itertools::Itertools;
+
+use re_log_types::{EntityPath, EntityPathFilter};
+use re_space_view::DataQueryBlueprint;
+use re_viewer_context::ViewerContext;
+use re_viewport::{icon_for_container_kind, SpaceViewBlueprint, Viewport};
+
+#[derive(Default)]
+pub struct AddSpaceViewOrContainerModal {
+ target_container: Option<egui_tiles::TileId>,
+ modal_handler: re_ui::modal::ModalHandler,
+}
+
+impl AddSpaceViewOrContainerModal {
+ pub fn open(&mut self, target_container: egui_tiles::TileId) {
+ self.target_container = Some(target_container);
+ self.modal_handler.open();
+ }
+
+ pub fn ui(&mut self, ui: &mut egui::Ui, ctx: &ViewerContext<'_>, viewport: &Viewport<'_, '_>) {
+ self.modal_handler.ui(
+ ctx.re_ui,
+ ui,
+ || re_ui::modal::Modal::new("Add Space View or Container"),
+ |_, ui, _| modal_ui(ui, ctx, viewport, self.target_container),
+ );
+ }
+}
+
+fn modal_ui(
+ ui: &mut egui::Ui,
+ ctx: &ViewerContext<'_>,
+ viewport: &Viewport<'_, '_>,
+ target_container: Option<egui_tiles::TileId>,
+) {
+ ui.spacing_mut().item_spacing = egui::vec2(14.0, 10.0);
+
+ let container_data = [
+ (
+ "Tabs",
+ "Create a new tabbed container.",
+ egui_tiles::ContainerKind::Tabs,
+ ),
+ (
+ "Horizontal",
+ "Create a new horizontal container.",
+ egui_tiles::ContainerKind::Horizontal,
+ ),
+ (
+ "Vertical",
+ "Create a new vertical container.",
+ egui_tiles::ContainerKind::Vertical,
+ ),
+ (
+ "Grid",
+ "Create a new grid container.",
+ egui_tiles::ContainerKind::Grid,
+ ),
+ ];
+
+ for (title, subtitle, kind) in container_data {
+ if row_ui(ui, icon_for_container_kind(&kind), title, subtitle).clicked() {
+ viewport.blueprint.add_container(kind, target_container);
+ viewport.blueprint.mark_user_interaction(ctx);
+ }
+ }
+
+ ui.separator();
+
+ // space view of any kind
+ for space_view in ctx
+ .space_view_class_registry
+ .iter_registry()
+ .sorted_by_key(|entry| entry.class.display_name())
+ .map(|entry| {
+ SpaceViewBlueprint::new(
+ entry.class.identifier(),
+ &format!("empty {}", entry.class.display_name()),
+ &EntityPath::root(),
+ DataQueryBlueprint::new(entry.class.identifier(), EntityPathFilter::default()),
+ )
+ })
+ {
+ let icon = space_view.class(ctx.space_view_class_registry).icon();
+ let title = space_view
+ .class(ctx.space_view_class_registry)
+ .display_name();
+ let subtitle = format!("Create a new Space View to display {title} content.");
+
+ if row_ui(ui, icon, title, &subtitle).clicked() {
+ viewport
+ .blueprint
+ .add_space_views(std::iter::once(space_view), ctx, target_container);
+ viewport.blueprint.mark_user_interaction(ctx);
+ }
+ }
+}
+
+fn row_ui(ui: &mut egui::Ui, icon: &re_ui::Icon, title: &str, subtitle: &str) -> egui::Response {
+ let top_left_corner = ui.cursor().min;
+
+ ui.horizontal(|ui| {
+ //TODO(ab): move this to re_ui
+ //TODO(ab): use design token
+ let row_height = 42.0;
+ let icon_size = egui::vec2(18.0, 18.0);
+ let thumbnail_rounding = 6.0;
+
+ let thumbnail_content = |ui: &mut egui::Ui| {
+ let (rect, _) = ui.allocate_exact_size(icon_size, egui::Sense::hover());
+ icon.as_image()
+ .tint(ui.visuals().widgets.active.fg_stroke.color)
+ .paint_at(ui, rect);
+ };
+
+ egui::Frame {
+ inner_margin: egui::Margin::symmetric(
+ (62. - icon_size.x) / 2.0,
+ (row_height - icon_size.y) / 2.0,
+ ), // should be 62x42 when combined with icon size
+ rounding: egui::Rounding::same(thumbnail_rounding),
+ fill: egui::Color32::from_gray(50),
+ ..Default::default()
+ }
+ .show(ui, thumbnail_content);
+
+ ui.vertical(|ui| {
+ ui.strong(title);
+ ui.add_space(-5.0);
+
+ ui.add(egui::Label::new(subtitle).wrap(false));
+ });
+
+ ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
+ let right_coord = ui.cursor().max.x;
+
+ // interact with the entire row
+ let interact_rect = egui::Rect::from_min_max(
+ top_left_corner,
+ egui::pos2(right_coord, top_left_corner.y + row_height),
+ );
+
+ let response =
+ ui.interact(interact_rect, title.to_owned().into(), egui::Sense::click());
+ let tint = if response.hovered() {
+ ui.visuals().widgets.active.fg_stroke.color
+ } else {
+ ui.visuals().widgets.inactive.fg_stroke.color
+ };
+
+ ui.add(
+ re_ui::icons::ADD_BIG
+ .as_image()
+ .fit_to_exact_size(egui::vec2(24.0, 24.0))
+ .tint(tint),
+ );
+
+ response
+ })
+ .inner
+ })
+ .inner
+}

crates/re_viewer/src/ui/mod.rs

@@ -6,9 +6,9 @@ mod selection_history_ui;
 mod top_panel;
 mod welcome_screen;
 
+pub(crate) mod add_space_view_or_container_modal;
 pub(crate) mod memory_panel;
 pub(crate) mod selection_panel;
-
 pub(crate) mod visible_history;
 
 pub use blueprint_panel::blueprint_panel_ui;

crates/re_viewer/src/ui/rerun_menu.rs

@@ -318,6 +318,19 @@ fn experimental_feature_ui(
  )
  .on_hover_text("Show an entity filter DSL when selecting a space-view.");
 
+ re_ui
+ .checkbox(
+ ui,
+ &mut app_options.experimental_additive_workflow,
+ "Enable the container addition workflow",
+ )
+ .on_hover_text(
+ "This flag enables the experimental container addition workflow, including:\n\
+ - Remove the automatic simplification of the container tree.\n\
+ - Add a 'Content' list in the selection panel when a container is selected.\n\
+ - Add the 'Add space view/container' modal, accessible from the selection panel.",
+ );
+
  re_ui
  .checkbox(
  ui,