Graph visualization with rust and egui
GraphView widget does not modify the provided graph and properties, instead in case of any interactions, it generates changes which the client can apply;
The GraphView widget provides a way to visualize a graph and interact with it by dragging nodes, selecting nodes and edges, and more. However, in order to update the underlying graph data structure with these changes, we need to apply the changes returned by the widget.
This is where the Elements struct comes in. The Elements struct contains the graph data that is used to render the GraphView widget, and provides a method to apply the changes to this data.
The simplest way to apply changes is to call the apply_changes method on the Elements struct. This method accepts a Changes struct which contains information about the changes that were made in the GraphView widget, and applies these changes to the Elements struct. Default operations for applying changes will be performed automatically when apply_changes method is called. User callback is needed to perfor any additional actions which can be required by the user's application.
``rust
elements.apply_changes(changes, &mut |elements, node_idx, change| {
// some additional manipulation with changed node using its idxnode_idx
// or manipulations with other elements via mutable reference toelements`
println!("changes for node {} applied", node_idx); }) ```
apply_changes method on the Elements struct applies changes, calling the user callback for each node that was changed after default changes has been applied.
The apply_changes method is flexible and allows for custom behavior when changes are applied. For example, if you want to update some external data structure when a node is moved in the GraphView widget, you can provide a callback function to the apply_changes method.
By using the apply_changes method and providing custom callback functions, we can easily apply changes made in the GraphView widget to our graph data structure and perform any additional tasks we need to when changes are made.
First, let's define the BasicApp struct that will hold the graph elements and settings. The struct contains two fields: elements and settings. The elements field stores the graph's nodes and edges, while settings contains the configuration options for the GraphView widget.
rust
pub struct BasicApp {
elements: Elements,
}
Next, implement the new() function for the BasicApp struct. This function initializes the graph settings with default values and generates the graph elements.
rust
impl BasicApp {
fn new(_: &CreationContext<'_>) -> Self {
let elements = generate_graph();
Self { elements }
}
}
Create a helper function called generate_graph() that initializes the nodes and edges for the graph. In this example, we create three nodes with unique positions and three edges connecting them in a triangular pattern.
```rust
fn generategraph() -> Elements {
let mut nodes = HashMap::new();
nodes.insert(0, Node::new(0, egui::Vec2::new(0., SIDESIZE)));
nodes.insert(1, Node::new(1, egui::Vec2::new(-SIDESIZE, 0.)));
nodes.insert(2, Node::new(2, egui::Vec2::new(SIDESIZE, 0.)));
let mut edges = HashMap::new();
edges.insert((0, 1), vec![Edge::new(0, 1, 0)]);
edges.insert((1, 2), vec![Edge::new(1, 2, 0)]);
edges.insert((2, 0), vec![Edge::new(2, 0, 0)]);
Elements::new(nodes, edges)
} ```
Now, implement the update() function for the BasicApp. This function creates a GraphView widget with the elements, and adds it to the central panel using the ui.add() function.
rust
impl App for BasicApp {
fn update(&mut self, ctx: &Context, _: &mut eframe::Frame) {
egui::CentralPanel::default().show(ctx, |ui| {
ui.add(GraphView::new(&self.elements));
});
}
}
Finally, run the application using the run_native() function with the specified native options and the BasicApp.
rust
fn main() {
let native_options = eframe::NativeOptions::default();
run_native(
"egui_graphs_basic_demo",
native_options,
Box::new(|cc| Box::new(BasicApp::new(cc))),
)
.unwrap();
}
You can further customize the appearance and behavior of your graph by modifying the settings or adding more nodes and edges as needed. Don't forget to apply changes returned from the widget.
You can check more advanced interactive example for usage references, settings description and changes apply demonstration.