Managing state in a recursively rendered UI

[dangrazh]

I want to build a small "inspect.exe like" application that is quite simple, composed of 2 panels. One on the left side showing the tree of UI elements and then if a UI element is selected, display the details of that UI element in the panel on the right side. I got a first bit of it working thanks to the great example of @dbalsom, which looks as follows for now:

The relevant code is as follows:

struct UIExplorer {
    recording: bool,
    ui_tree: UITree,
    active_element: Option<UIElementProps>,
}

impl UIExplorer {
    fn new() -> Self {

        // get the ui tree in a separate thread
        let (tx, rx): (Sender<_>, Receiver<uiexplore::UITree>) = channel();
        thread::spawn(|| {
            uiexplore::get_all_elements(tx, None);
        });

        let ui_tree = rx.recv().unwrap();

        Self {
            recording: false,
            ui_tree,
            active_element: None,
        }
    }

    fn render_ui_tree(&mut self, ui: &mut egui::Ui) {
        let tree = &self.ui_tree;
        Self::render_ui_tree_recursive(ui, tree, 0);
    }

    pub fn render_ui_tree_recursive(ui: &mut egui::Ui, tree: &UITree, idx: usize) {
        for &child_index in tree.children(idx) {
            let (name, ui_element) = tree.node(child_index);

            if tree.children(child_index).is_empty() {
                ui.label(format!("  {}", name));
            }
            else {
                egui::CollapsingHeader::new(name)
                    .id_salt(format!("ch_node{}", child_index))
                    .show(ui, |ui| {
                        // Recursively render children
                        Self::render_ui_tree_recursive(ui, tree, child_index);
                    });
            }
        }
    }    

}

impl eframe::App for UIExplorer {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::SidePanel::left("left_panel").show(ctx, |ui| {
            self.render_ui_tree(ui);
        });
        
        egui::CentralPanel::default().show(ctx, |ui| {
            ui.horizontal(|ui| {
                if let Some(active_element) = &self.active_element {
                    egui::Grid::new("some_unique_id").min_col_width(100.0).show(ui, |ui| {
                        ui.label("Name:");
                        ui.label(self.active_element.as_mut().unwrap().name.clone());
                        ui.end_row();
                    
                        ui.label("Item Type:");
                        ui.label(self.active_element.as_mut().unwrap().item_type.clone());
                        ui.end_row();

                        ui.label("Localized Control Type:");
                        ui.label(self.active_element.as_mut().unwrap().localized_control_type.clone());
                        ui.end_row();

                        ui.label("Class Name:");
                        ui.label(self.active_element.as_mut().unwrap().classname.clone());
                        ui.end_row();

                        ui.label("Runtime ID:");
                        ui.label(self.active_element.as_mut().unwrap().runtime_id.iter().map(|x| x.to_string()).collect::<Vec<String>>().join("-"));
                        ui.end_row();


                        ui.label("Surrounding Rectangle:");
                        ui.label(format!("{:?}", self.active_element.as_mut().unwrap().bounding_rect));
                        ui.end_row();
                    });    
                }
                else {
                    ui.label("No active element");
                }
            });
        });
    }
}

However, if I want to update this code to set the active_element when a collapsing header or label is clicked, I run into problems. The main problem is that I need mutable access to the UIExplorer to set the active_element but that causes the borrow checker to complain:

fn render_ui_tree(&mut self, ui: &mut egui::Ui) {
        let tree = &self.ui_tree;
        // Display the file format as the root note, if there is one
        self.render_ui_tree_recursive(ui, 0);
    }

    pub fn render_ui_tree_recursive(&mut self, ui: &mut egui::Ui, idx: usize) {
        for &child_index in self.ui_tree.children(idx) {
            let (name, ui_element) = self.ui_tree.node(child_index);

            if self.ui_tree.children(child_index).is_empty() {
                //log::debug!("Rendering leaf node: {}", name);
                // Node has no children, so just show a label
                //ui.label(format! {"{}: {}", name, ui_element});
                if ui.label(format!("  {}", name)).clicked() {
                    self.active_element = Some(ui_element.clone());
                }
            }
            else {
                //log::debug!("Rendering new parent node: {}", name);
                // Render children under collapsing header
                if egui::CollapsingHeader::new(name)
                    .id_salt(format!("ch_node{}", child_index))
                    .show(ui, |ui| {
                        // Recursively render children
                        self.render_ui_tree_recursive(ui, child_index);
                    }).header_response.clicked() {
                        self.active_element = Some(ui_element.clone());
                    }
            }
        }
    }   

Borrow checker error:

error[E0500]: closure requires unique access to `*self` but it is already borrowed
  --> src/main.rs:96:31
   |
80 |         for &child_index in self.ui_tree.children(idx) {
   |                             --------------------------
   |                             |
   |                             borrow occurs here
   |                             first borrow later used here
...
96 |                     .show(ui, |ui| {
   |                               ^^^^ closure construction occurs here
97 |                         // Recursively render children
98 |                         self.render_ui_tree_recursive(ui, child_index);
   |                         ---- second borrow occurs due to use of `*self` in closure

Any sugestion how to properly handle this scenario with egui?

[dbalsom]

hello, glad you've had some success with my tree!

the easiest thing to do is have render_ui_tree_recursive() return an Option representing your selection. This will bubble it back up the stack to the root call where you can then set it.

You can see example of selecting items in a tree here:

https://github.com/dbalsom/fluxfox/blob/c0557bf3b91ba8331e3e673e86570f029fe6f09f/crates/ff_egui_lib/src/widgets/dir_tree.rs#L159

this is a slightly different tree implementation as it is generic for a filesystem not UI display, but the concept should be the same.

in this particular case, since this is a directory listing, there are only CollapsingHeaders present and so that is all that is clickable. It looks like you might want to change that, but you can see where I set new_event to be returned at the end:

                // Draw a directory node
                let header_response = CollapsingHeader::new(text)
                    .default_open(root)
                    .icon(dir_icon)
                    .show_background(is_selected)
                    .open(open_control)
                    .show(ui, |ui| {
                        // Draw children recursively
                        children.iter().for_each(|child| {
                            if let Some(event) = self.tree_ui(ui, child, selected_path, false) {
                                // Cascade event down from children
                                new_event = Some(event)
                            }
                        });
                    })
                    .header_response;

This works because we can only really have one click per frame (I am not sure if egui supports multitouch!)

[dbalsom]

It's also possible, if you dislike this pattern, to pass a mutable reference to a state struct to render_ui_tree_recursive which can be modified in-place and then examined after rendering is complete.

[dangrazh]

Thank you so much for your extensive feedback. Both posts helped me a lot! I could/should have come up with this approach myself, but I was a bit in a mental dead end. Anyway, I now implemented the version with a state struct that I pass to render_ui_recursive and this works like a charm. Again, thanks a million!!

[dbalsom]

No problem!

I like to think of the three D's of appeasing the borrow checker: Defer, Detach, Delegate

• Defer: Can we split up the operation in two passes? This is a common solution for mutation-during-iteration. You can collect indexes, and then operate on the list after.

• Detach: Can we destructure a struct, split a slice into parts, pass the parts of something through a closure, or Take an Option?

• Delegate: If all else fails, perhaps it's a sign that your mutation should occur elsewhere, closer to ownership

i rarely encounter situations now where one of these methods doesn't do the trick!