app-proto/sketch-outline/main.css

@@ -18,9 +18,12 @@ body {
   overflow-y: scroll;
 }
 
+li {
+  user-select: none;
+}
+
 summary {
   display: flex;
-  user-select: none;
 }
 
 summary.selected {
@@ -58,17 +61,25 @@ details[open]:has(li) .elt-switch::after {
   flex-grow: 1;
 }
 
+.cst-label {
+  flex-grow: 1;
+}
+
 .elt-rep {
   display: flex;
 }
 
-.elt-rep > div {
+.elt-rep > div, .cst-rep {
   padding: 2px 0px 0px 0px;
   font-size: 10pt;
   text-align: center;
   width: 56px;
 }
 
+.cst {
+  font-style: italic;
+}
+
 /* display */
 
 canvas {

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

@@ -12,6 +12,7 @@ pub struct Element {
     pub constraints: FxHashSet<usize>
 }
 
+#[derive(Clone)]
 pub struct Constraint {
     pub args: (usize, usize),
     pub rep: f64

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

@@ -4,6 +4,12 @@ use web_sys::{Element, KeyboardEvent, MouseEvent, wasm_bindgen::JsCast};
 
 use crate::AppState;
 
+// this component lists the elements of the assembly, showing the constraints
+// on each element as a collapsible sub-list. its implementation is based on
+// Kate Morley's HTML + CSS tree views:
+//
+//   https://iamkate.com/code/tree-views/
+//
 #[component]
 pub fn Outline() -> View {
     // sort the elements alphabetically by ID
@@ -118,9 +124,21 @@ pub fn Outline() -> View {
                                 ul(class="constraints") {
                                     Keyed(
                                         list=elt.constraints.into_iter().collect::<Vec<_>>(),
-                                        view=|c_key: usize| view! {
+                                        view=move |c_key: usize| {
-                                            li(class="cst") {
+                                            let c_state = use_context::<AppState>();
-                                                (c_key.to_string())
+                                            let assembly = &c_state.assembly;
+                                            let cst = assembly.constraints.with(|csts| csts[c_key].clone());
+                                            let other_arg = if cst.args.0 == key {
+                                                cst.args.1
+                                            } else {
+                                                cst.args.0
+                                            };
+                                            let other_arg_label = assembly.elements.with(|elts| elts[other_arg].label.clone());
+                                            view! {
+                                                li(class="cst") {
+                                                    div(class="cst-label") { (other_arg_label) }
+                                                    div(class="cst-rep") { (cst.rep) }
+                                                }
                                             }
                                         },
                                         key=|c_key| c_key.clone()