From d481181ef87162f660f0f74e16be3b629ff5f53e Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Fri, 13 Sep 2024 00:07:49 -0700
Subject: [PATCH] Outline: sort elements by ID

---
 app-proto/sketch-outline/Cargo.toml |  1 +
 app-proto/sketch-outline/src/app.rs | 25 ++++++++++++++++++-------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/app-proto/sketch-outline/Cargo.toml b/app-proto/sketch-outline/Cargo.toml
index 522c994..b039ab8 100644
--- a/app-proto/sketch-outline/Cargo.toml
+++ b/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"
diff --git a/app-proto/sketch-outline/src/app.rs b/app-proto/sketch-outline/src/app.rs
index 35503f0..cc63ec0 100644
--- a/app-proto/sketch-outline/src/app.rs
+++ b/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(