Show the loss history from the last realization

This introduces a dependency on the Charming crate, which we use to plot
the loss history, and the ECharts JavaScript library, which Charming
depends on.

Now that there's more than one canvas on the page, we have to pick out
the display by ID rather than by element type in our style sheet.

app-proto/src/diagnostics.rs

@@ -0,0 +1,65 @@
+use charming::{
+    Chart,
+    WasmRenderer,
+    component::{Axis, Grid},
+    element::AxisType,
+    series::Line,
+    theme::Theme
+};
+use sycamore::prelude::*;
+
+use crate::AppState;
+
+// a plot of the loss history from the last realization
+#[component]
+pub fn Diagnostics() -> View {
+    const CONTAINER_ID: &str = "loss-history";
+    let state = use_context::<AppState>();
+    let renderer = WasmRenderer::new_opt(None, Some(180)).theme(Theme::Walden);
+    
+    on_mount(move || {
+        create_effect(move || {
+            // get the loss history
+            let scaled_loss = state.assembly.descent_history.with(
+                |history| history.scaled_loss.clone()
+            );
+            let step_cnt = scaled_loss.len();
+            
+            // initialize the chart axes and series
+            const MIN_INTERVAL: f64 = 0.01;
+            let mut step_axis = Axis::new()
+                .type_(AxisType::Category)
+                .boundary_gap(false);
+            let scaled_loss_axis = Axis::new()
+                .type_(AxisType::Value)
+                .min(0)
+                .min_interval(MIN_INTERVAL);
+            
+            // load the chart data. when there's no history, we load the data
+            // point (0, None) to clear the chart. it would feel more natural to
+            // load empty data vectors, but that turns out not to clear the
+            // chart: it instead leads to previous data being re-used
+            let mut scaled_loss_series = Line::new();
+            if step_cnt > 0 {
+                step_axis = step_axis.data(
+                    (0..step_cnt).map(|step| step.to_string()).collect()
+                );
+                scaled_loss_series = scaled_loss_series.data(scaled_loss);
+            } else {
+                step_axis = step_axis.data(vec![0.to_string()]);
+                scaled_loss_series = scaled_loss_series.data(vec![None::<f64>]);
+            }
+            let chart = Chart::new()
+                .animation(false)
+                .x_axis(step_axis)
+                .y_axis(scaled_loss_axis)
+                .grid(Grid::new().top(20).right(40).bottom(30).left(60))
+                .series(scaled_loss_series);
+            renderer.render(CONTAINER_ID, &chart).unwrap();
+        });
+    });
+    
+    view! {
+        div(id=CONTAINER_ID)
+    }
+}