Outline: sort elements by ID

app-proto/sketch-outline/Cargo.toml

@@ -8,6 +8,7 @@ edition = "2021"
 default = ["console_error_panic_hook"]
 
 [dependencies]
+itertools = "0.13.0"
 js-sys = "0.3.70"
 nalgebra = "0.33.0"
 sycamore = "0.9.0-beta.3"

app-proto/sketch-outline/src/app.rs

@@ -1,3 +1,4 @@
+use itertools::Itertools;
 use nalgebra::DVector;
 use sycamore::{prelude::*, web::tags::div};
 
@@ -10,6 +11,7 @@ struct Element {
 }
 
 struct AppState {
+    // the order of the elements is arbitrary, and it could change at any time
     elements: Signal<Vec<Element>>
 }
 
@@ -17,12 +19,6 @@ struct AppState {
 pub fn App() -> View {
     let state = AppState {
         elements: create_signal(vec![
-            Element {
-                id: String::from("central"),
-                label: String::from("Central"),
-                color: [0.75_f32, 0.75_f32, 0.75_f32],
-                rep: DVector::<f64>::from_column_slice(&[0.0, 0.0, 0.0, 0.25, -1.0])
-            },
             Element {
                 id: String::from("wing_a"),
                 label: String::from("Wing A"),
@@ -34,14 +30,29 @@ pub fn App() -> View {
                 label: String::from("Wing B"),
                 color: [1.00_f32, 0.25_f32, 0.00_f32],
                 rep: DVector::<f64>::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25])
+            },
+            Element {
+                id: String::from("central"),
+                label: String::from("Central"),
+                color: [0.75_f32, 0.75_f32, 0.75_f32],
+                rep: DVector::<f64>::from_column_slice(&[0.0, 0.0, 0.0, 0.25, -1.0])
             }
         ])
     };
     
+    // sort the elements alphabetically by ID
+    let elements_sorted = create_memo(move ||
+        state.elements
+            .get_clone()
+            .into_iter()
+            .sorted_by_key(|elt| elt.id.clone())
+            .collect()
+    );
+    
     view! {
         ul {
             Keyed(
-                list=state.elements,
+                list=elements_sorted,
                 view=|elt| {
                     let label = elt.label.clone();
                     let rep_components = elt.rep.iter().map(