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

use itertools::Itertools;
use nalgebra::DVector;
use sycamore::{prelude::*, web::tags::div};

use crate::assembly::{Assembly, Element};

struct AppState {
    assembly: Assembly
}

#[component]
pub fn App() -> View {
    let state = AppState {
        assembly: Assembly {
            elements: create_signal(vec![
                Element {
                    id: String::from("wing_a"),
                    label: String::from("Wing A"),
                    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("wing_b"),
                    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.assembly.elements
            .get_clone()
            .into_iter()
            .sorted_by_key(|elt| elt.id.clone())
            .collect()
    );
    
    view! {
        ul {
            Keyed(
                list=elements_sorted,
                view=|elt| {
                    let label = elt.label.clone();
                    let rep_components = elt.rep.iter().map(
                        |u| View::from(div().children(u.to_string().replace("-", "\u{2212}")))
                    ).collect::<Vec<_>>();
                    view! {
                        li {
                            div(class="elt-label") { (label) }
                            div(class="elt-rep") { (rep_components) }
                        }
                    }
                },
                key=|elt| elt.id.clone()
            )
        }
    }
}