fix canvas position, dynamic layout

frontend/src/controls_panel.rs

@@ -1,24 +1,33 @@
 use crate::tauri_bridge;
-use crate::HierarchyAndTimeTable;
+use crate::{HierarchyAndTimeTable, Layout};
-use std::collections::VecDeque;
+use futures_util::join;
+use std::mem;
+use std::ops::Not;
 use std::rc::Rc;
 use wellen::GetItem;
-use zoon::{println, *};
+use zoon::*;
 
-#[derive(Clone, Copy)]
+const SCOPE_VAR_ROW_MAX_WIDTH: u32 = 480;
-struct VarForUI<'a> {
+const MILLER_COLUMN_MAX_HEIGHT: u32 = 500;
-    name: &'a str,
+
+#[derive(Clone)]
+struct VarForUI {
+    name: Rc<String>,
     var_type: wellen::VarType,
     var_direction: wellen::VarDirection,
     var_ref: wellen::VarRef,
     signal_type: wellen::SignalType,
 }
 
-#[derive(Clone, Copy)]
+#[derive(Clone)]
-struct ScopeForUI<'a> {
+struct ScopeForUI {
-    level: u32,
+    level: usize,
-    name: &'a str,
+    name: Rc<String>,
     scope_ref: wellen::ScopeRef,
+    has_children: bool,
+    expanded: Mutable<bool>,
+    parent_expanded: Option<ReadOnlyMutable<bool>>,
+    selected_scope_in_level: Mutable<Option<wellen::ScopeRef>>,
 }
 
 #[derive(Clone)]
@@ -26,17 +35,20 @@ pub struct ControlsPanel {
     selected_scope_ref: Mutable<Option<wellen::ScopeRef>>,
     hierarchy_and_time_table: Mutable<Option<HierarchyAndTimeTable>>,
     selected_var_refs: MutableVec<wellen::VarRef>,
+    layout: Mutable<Layout>,
 }
 
 impl ControlsPanel {
     pub fn new(
         hierarchy_and_time_table: Mutable<Option<HierarchyAndTimeTable>>,
         selected_var_refs: MutableVec<wellen::VarRef>,
+        layout: Mutable<Layout>,
     ) -> impl Element {
         Self {
             selected_scope_ref: <_>::default(),
             hierarchy_and_time_table,
             selected_var_refs,
+            layout,
         }
         .root()
     }
@@ -54,27 +66,52 @@ impl ControlsPanel {
 
     fn root(&self) -> impl Element {
         let triggers = self.triggers();
+        let layout = self.layout.clone();
+        let layout_and_hierarchy_signal = map_ref! {
+            let layout = layout.signal(),
+            let hierarchy_and_time_table = self.hierarchy_and_time_table.signal_cloned() => {
+                (*layout, hierarchy_and_time_table.clone().map(|(hierarchy, _)| hierarchy))
+            }
+        };
         Column::new()
             .after_remove(move |_| drop(triggers))
-            .s(Scrollbars::y_and_clip_x())
+            .s(Width::with_signal_self(
-            .s(Height::fill())
+                self.layout
+                    .signal()
+                    .map(|layout| matches!(layout, Layout::Columns))
+                    .map_true(|| Width::fill()),
+            ))
+            .s(Height::with_signal_self(layout.signal().map(move |layout| match layout {
+                Layout::Tree => Height::fill(),
+                Layout::Columns => Height::fill().max(MILLER_COLUMN_MAX_HEIGHT),
+            })))
+            .s(Scrollbars::both())
             .s(Padding::all(20))
             .s(Gap::new().y(40))
             .s(Align::new().top())
-            .item(self.load_button())
+            .item(
+                Row::new()
+                    .s(Gap::both(15))
+                    .s(Align::new().left())
+                    .item(self.load_button("simple.vcd"))
+                    .item(self.load_button("wave_27.fst"))
+                    .item(self.layout_switcher()),
+            )
             .item_signal(
                 self.hierarchy_and_time_table
                     .signal_cloned()
                     .map_some(clone!((self => s) move |(hierarchy, _)| s.scopes_panel(hierarchy))),
             )
-            .item_signal(
+            .item_signal(layout_and_hierarchy_signal.map(
-                self.hierarchy_and_time_table
+                clone!((self => s) move |(layout, hierarchy)| {
-                    .signal_cloned()
+                    hierarchy.and_then(clone!((s) move |hierarchy| {
-                    .map_some(clone!((self => s) move |(hierarchy, _)| s.vars_panel(hierarchy))),
+                        matches!(layout, Layout::Tree).then(move || s.vars_panel(hierarchy))
-            )
+                    }))
+                }),
+            ))
     }
 
-    fn load_button(&self) -> impl Element {
+    fn load_button(&self, test_file_name: &'static str) -> impl Element {
         let (hovered, hovered_signal) = Mutable::new_and_signal(false);
         let hierarchy_and_time_table = self.hierarchy_and_time_table.clone();
         Button::new()
@@ -88,35 +125,13 @@ impl ControlsPanel {
                 El::new().s(Font::new().no_wrap()).child_signal(
                     hierarchy_and_time_table
                         .signal_ref(Option::is_some)
-                        .map_bool(|| "Unload simple.vcd", || "Load simple.vcd"),
+                        .map_bool(
+                            || format!("Unload test file"),
+                            move || format!("Load {test_file_name}"),
+                        ),
                 ),
             )
             .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered))
-            // @TODO REMOVE
-            .after_insert(clone!((hierarchy_and_time_table) move |_| {
-                if crate::SIMULATE_CLICKS {
-                    let mut hierarchy_and_time_table_lock = hierarchy_and_time_table.lock_mut();
-                    if hierarchy_and_time_table_lock.is_some() {
-                        *hierarchy_and_time_table_lock = None;
-                        return;
-                    }
-                    drop(hierarchy_and_time_table_lock);
-                    let hierarchy_and_time_table = hierarchy_and_time_table.clone();
-                    Task::start(async move {
-                        tauri_bridge::load_waveform().await;
-                        let hierarchy = tauri_bridge::get_hierarchy().await;
-                        for variable in hierarchy.iter_vars() {
-                            println!("{variable:?}");
-                        }
-                        for scope in hierarchy.iter_scopes() {
-                            println!("{scope:?}");
-                        }
-                        let time_table = tauri_bridge::get_time_table().await;
-                        println!("{time_table:?}");
-                        hierarchy_and_time_table.set(Some((Rc::new(hierarchy), Rc::new(time_table))))
-                    })
-                }
-            }))
             .on_press(move || {
                 let mut hierarchy_and_time_table_lock = hierarchy_and_time_table.lock_mut();
                 if hierarchy_and_time_table_lock.is_some() {
@@ -126,100 +141,324 @@ impl ControlsPanel {
                 drop(hierarchy_and_time_table_lock);
                 let hierarchy_and_time_table = hierarchy_and_time_table.clone();
                 Task::start(async move {
-                    tauri_bridge::load_waveform().await;
+                    tauri_bridge::load_waveform(test_file_name).await;
-                    let hierarchy = tauri_bridge::get_hierarchy().await;
+                    let (hierarchy, time_table) = join!(
-                    for variable in hierarchy.iter_vars() {
+                        tauri_bridge::get_hierarchy(),
-                        println!("{variable:?}");
+                        tauri_bridge::get_time_table()
-                    }
+                    );
-                    for scope in hierarchy.iter_scopes() {
-                        println!("{scope:?}");
-                    }
-                    let time_table = tauri_bridge::get_time_table().await;
-                    println!("{time_table:?}");
                     hierarchy_and_time_table.set(Some((Rc::new(hierarchy), Rc::new(time_table))))
                 })
             })
     }
 
+    fn layout_switcher(&self) -> impl Element {
+        let layout = self.layout.clone();
+        let (hovered, hovered_signal) = Mutable::new_and_signal(false);
+        Button::new()
+            .s(Padding::new().x(20).y(10))
+            .s(Background::new().color_signal(
+                hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
+            ))
+            .s(Align::new().left())
+            .s(RoundedCorners::all(15))
+            .label_signal(layout.signal().map(|layout| match layout {
+                Layout::Tree => "Columns",
+                Layout::Columns => "Tree",
+            }))
+            .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered))
+            .on_press(move || {
+                layout.update(|layout| match layout {
+                    Layout::Tree => Layout::Columns,
+                    Layout::Columns => Layout::Tree,
+                })
+            })
+    }
+
     fn scopes_panel(&self, hierarchy: Rc<wellen::Hierarchy>) -> impl Element {
         Column::new()
+            .s(Height::fill().min(150))
+            .s(Scrollbars::y_and_clip_x())
             .s(Gap::new().y(20))
-            .item(El::new().child("Scopes"))
+            .s(Width::fill())
+            .item_signal(
+                self.layout
+                    .signal()
+                    .map(|layout| matches!(layout, Layout::Tree))
+                    .map_true(|| El::new().child("Scopes")),
+            )
             .item(self.scopes_list(hierarchy))
     }
 
     fn scopes_list(&self, hierarchy: Rc<wellen::Hierarchy>) -> impl Element {
+        let layout = self.layout.clone();
         let mut scopes_for_ui = Vec::new();
+        let mut max_level_index: usize = 0;
         for scope_ref in hierarchy.scopes() {
-            let mut scope_refs = VecDeque::new();
+            let mut scope_refs = Vec::new();
-            scope_refs.push_back((0, scope_ref));
+            scope_refs.push((0, scope_ref, None));
-            while let Some((level, scope_ref)) = scope_refs.pop_front() {
+            let mut selected_scope_in_levels: Vec<Mutable<Option<wellen::ScopeRef>>> =
+                vec![<_>::default()];
+            while let Some((level, scope_ref, parent_expanded)) = scope_refs.pop() {
                 let scope = hierarchy.get(scope_ref);
+                let mut children = scope.scopes(&hierarchy).peekable();
+                let has_children = children.peek().is_some();
+                let expanded = Mutable::new(false);
+                if level > max_level_index {
+                    max_level_index = level;
+                    selected_scope_in_levels.push(<_>::default());
+                }
                 scopes_for_ui.push(ScopeForUI {
                     level,
-                    name: scope.name(&hierarchy),
+                    name: Rc::new(scope.name(&hierarchy).to_owned()),
                     scope_ref,
+                    has_children,
+                    expanded: expanded.clone(),
+                    parent_expanded,
+                    selected_scope_in_level: selected_scope_in_levels[level].clone(),
                 });
-                for scope_ref in scope.scopes(&hierarchy) {
+                for scope_ref in children {
-                    scope_refs.push_back((level + 1, scope_ref));
+                    scope_refs.push((level + 1, scope_ref, Some(expanded.read_only())));
                 }
             }
         }
-        Column::new()
+        let scopes_for_ui = Rc::new(scopes_for_ui);
-            .s(Align::new().left())
+        let s = self.clone();
-            .s(Gap::new().y(10))
+        El::new()
-            .items(
+            .s(Height::fill())
-                scopes_for_ui
+            .s(Scrollbars::both())
-                    .into_iter()
+            .s(Width::fill())
-                    .map(clone!((self => s) move |scope_for_ui| s.scope_button(scope_for_ui))),
+            .child_signal(layout.signal().map(move |layout| match layout {
-            )
+                Layout::Tree => {
+                    Column::new()
+                        .s(Align::new().left())
+                        .s(Gap::new().y(10))
+                        .s(Height::fill())
+                        .s(Scrollbars::y_and_clip_x())
+                        .s(Padding::new().right(15))
+                        .items(
+                            scopes_for_ui
+                                .iter()
+                                .map(clone!((s) move |scope_for_ui| s.scope_button_row(scope_for_ui.clone()))),
+                        ).unify()
+                }
+                Layout::Columns => {
+                    let mut scopes_for_ui_in_levels: Vec<Vec<ScopeForUI>> = vec![Vec::new(); max_level_index + 1];
+                    for scope_for_ui in scopes_for_ui.iter() {
+                        scopes_for_ui_in_levels[scope_for_ui.level].push(scope_for_ui.clone());
+                    }
+                    let viewport_x = Mutable::new(0);
+                    El::new()
+                        .s(Height::fill())
+                        .s(Scrollbars::x_and_clip_y())
+                        .s(Padding::new().bottom(15))
+                        .s(Width::fill())
+                        .viewport_x_signal(viewport_x.signal())
+                        .child(
+                            Row::new()
+                                .s(Height::fill())
+                                // @TODO add `width: max-content` to MoonZoon's `Width`?
+                                .update_raw_el(|raw_el| raw_el.style("width", "max-content"))
+                                .on_viewport_size_change(move |_, _| viewport_x.set(i32::MAX))
+                                .items(scopes_for_ui_in_levels.into_iter().map(|scopes_in_level| {
+                                    Column::new()
+                                        .s(Height::fill())
+                                        .s(Scrollbars::y_and_clip_x())
+                                        // @TODO `Width::default` add the class `exact_width` with `flex-shrink: 0;`
+                                        // We should make it more explicit / discoverable in MoonZoon
+                                        .s(Width::default())
+                                        .s(Gap::new().y(10))
+                                        .s(Padding::new().x(10))
+                                        .items(
+                                            scopes_in_level
+                                                .into_iter()
+                                                .map(clone!((s) move |scope_for_ui| s.scope_button_row(scope_for_ui)))
+                                        )
+                                }))
+                                .item(s.vars_panel(hierarchy.clone()))
+                        ).unify()
+                }
+            }))
     }
 
-    fn scope_button(&self, scope_for_ui: ScopeForUI) -> impl Element {
+    fn scope_button_row(&self, scope_for_ui: ScopeForUI) -> impl Element {
-        let (hovered, hovered_signal) = Mutable::new_and_signal(false);
+        let layout = self.layout.clone();
+        let (button_hovered, button_hovered_signal) = Mutable::new_and_signal(false);
         let selected_scope_ref = self.selected_scope_ref.clone();
         let is_selected = selected_scope_ref
             .signal()
             .map(move |selected_scope_ref| selected_scope_ref == Some(scope_for_ui.scope_ref));
         let background_color = map_ref! {
             let is_selected = is_selected,
-            let is_hovered = hovered_signal => match (*is_selected, *is_hovered) {
+            let is_hovered = button_hovered_signal => match (*is_selected, *is_hovered) {
                 (true, _) => color!("BlueViolet"),
                 (false, true) => color!("MediumSlateBlue"),
                 (false, false) => color!("SlateBlue"),
             }
         };
-        El::new()
+        let task_collapse_on_parent_collapse = {
-            // @TODO REMOVE
+            let expanded = scope_for_ui.expanded.clone();
-            .after_insert(
+            scope_for_ui.parent_expanded.clone().map(|parent_expanded| {
-                clone!((selected_scope_ref, scope_for_ui.scope_ref => scope_ref) move |_| {
+                Task::start_droppable(parent_expanded.signal().for_each_sync(
-                    if crate::SIMULATE_CLICKS {
+                    move |parent_expanded| {
-                        selected_scope_ref.set_neq(Some(scope_ref));
+                        if not(parent_expanded) {
+                            expanded.set_neq(false);
+                        }
+                    },
+                ))
+            })
+        };
+        let task_expand_or_collapse_on_selected_scope_in_level_change = {
+            let expanded = scope_for_ui.expanded.clone();
+            let scope_ref = scope_for_ui.scope_ref;
+            let layout = layout.clone();
+            Task::start_droppable(scope_for_ui.selected_scope_in_level.signal().for_each_sync(
+                move |selected_scope_in_level| {
+                    if matches!(layout.get(), Layout::Columns) {
+                        if let Some(selected_scope) = selected_scope_in_level {
+                            if selected_scope == scope_ref {
+                                return expanded.set(true);
+                            }
+                        }
+                        expanded.set(false);
                     }
-                }),
+                },
-            )
+            ))
-            .s(Padding::new().left(scope_for_ui.level * 30))
+        };
+        let display = signal::option(
+            scope_for_ui
+                .parent_expanded
+                .clone()
+                .map(|parent_expanded| parent_expanded.signal().map_false(|| "none")),
+        )
+        .map(Option::flatten);
+        let level = scope_for_ui.level as u32;
+        El::new()
+            // @TODO Add `Display` Style to MoonZoon? Merge with `Visible` Style?
+            .update_raw_el(|raw_el| raw_el.style_signal("display", display))
+            .s(Padding::new().left_signal(layout.signal().map(move |layout| match layout {
+                Layout::Tree => level * 30,
+                Layout::Columns => 0,
+            })))
+            .s(Width::default().max(SCOPE_VAR_ROW_MAX_WIDTH))
+            .after_remove(move |_| {
+                drop(task_collapse_on_parent_collapse);
+                drop(task_expand_or_collapse_on_selected_scope_in_level_change);
+            })
             .child(
-                Button::new()
+                Row::new()
-                    .s(Padding::new().x(15).y(5))
                     .s(Background::new().color_signal(background_color))
                     .s(RoundedCorners::all(15))
-                    .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered))
+                    .s(Clip::both())
-                    .on_press(move || selected_scope_ref.set_neq(Some(scope_for_ui.scope_ref)))
+                    .s(Align::new().left())
-                    .label(scope_for_ui.name),
+                    .items_signal_vec(layout.signal().map(clone!((self => s, scope_for_ui) move |layout| {
+                        let toggle = scope_for_ui.has_children.then(clone!((s, scope_for_ui) move || s.scope_toggle(scope_for_ui)));
+                        let button = s.scope_button(scope_for_ui.clone(), button_hovered.clone());
+                        match layout {
+                            Layout::Tree => element_vec![toggle, button],
+                            Layout::Columns => element_vec![button, toggle],
+                        }
+                    })).to_signal_vec())
             )
     }
 
+    fn scope_toggle(&self, scope_for_ui: ScopeForUI) -> impl Element {
+        let layout = self.layout.clone();
+        let expanded = scope_for_ui.expanded.clone();
+        let layout_and_expanded = map_ref! {
+            let layout = layout.signal(),
+            let expanded = expanded.signal() => (*layout, *expanded)
+        };
+        let selected_scope_ref: Mutable<Option<wellen::ScopeRef>> = self.selected_scope_ref.clone();
+        let (hovered, hovered_signal) = Mutable::new_and_signal(false);
+        Button::new()
+            .s(Padding::new()
+                .left_signal(
+                    self.layout
+                        .signal()
+                        .map(|layout| matches!(layout, Layout::Tree))
+                        .map_true(|| 10),
+                )
+                .right_signal(
+                    self.layout
+                        .signal()
+                        .map(|layout| matches!(layout, Layout::Columns))
+                        .map_true(|| 10),
+                ))
+            .s(Height::fill())
+            .s(Font::new().color_signal(hovered_signal.map_true(|| color!("LightBlue"))))
+            .label(
+                El::new()
+                    .s(Transform::with_signal_self(layout_and_expanded.map(
+                        |(layout, expanded)| match layout {
+                            Layout::Tree => expanded.not().then(|| Transform::new().rotate(-90)),
+                            Layout::Columns => {
+                                Some(Transform::new().rotate(if expanded { -90 } else { 90 }))
+                            }
+                        },
+                    )))
+                    .child("▼"),
+            )
+            .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered))
+            .on_press(move || match layout.get() {
+                Layout::Tree => { 
+                    if scope_for_ui.expanded.get() {
+                        scope_for_ui.selected_scope_in_level.set(None);
+                    } else {
+                        scope_for_ui
+                            .selected_scope_in_level
+                            .set(Some(scope_for_ui.scope_ref));
+                    }
+                    scope_for_ui.expanded.update(not)
+                }
+                Layout::Columns => {
+                    selected_scope_ref.set_neq(None);
+                    if scope_for_ui.expanded.get() {
+                        scope_for_ui.selected_scope_in_level.set(None);
+                    } else {
+                        scope_for_ui
+                            .selected_scope_in_level
+                            .set(Some(scope_for_ui.scope_ref));
+                    }
+                }
+            })
+    }
+
+    fn scope_button(
+        &self,
+        scope_for_ui: ScopeForUI,
+        button_hovered: Mutable<bool>,
+    ) -> impl Element {
+        Button::new()
+            .s(Padding::new().x(15).y(5))
+            .s(Font::new().wrap_anywhere())
+            .on_hovered_change(move |is_hovered| button_hovered.set_neq(is_hovered))
+            .on_press(
+                clone!((self.selected_scope_ref => selected_scope_ref, scope_for_ui) move || {
+                    selected_scope_ref.set_neq(Some(scope_for_ui.scope_ref));
+                    scope_for_ui.selected_scope_in_level.set_neq(None);
+                }),
+            )
+            .label(scope_for_ui.name)
+    }
+
     fn vars_panel(&self, hierarchy: Rc<wellen::Hierarchy>) -> impl Element {
         let selected_scope_ref = self.selected_scope_ref.clone();
         Column::new()
             .s(Gap::new().y(20))
-            .item(El::new().child("Variables"))
+            .s(Height::fill().min(150))
+            .s(Scrollbars::y_and_clip_x())
+            .item_signal(
+                self.layout
+                    .signal()
+                    .map(|layout| matches!(layout, Layout::Tree))
+                    .map_true(|| El::new().child("Variables")),
+            )
             .item_signal(selected_scope_ref.signal().map_some(
                 clone!((self => s) move |scope_ref| s.vars_list(scope_ref, hierarchy.clone())),
             ))
     }
 
+    // @TODO Group variables?
     fn vars_list(
         &self,
         selected_scope_ref: wellen::ScopeRef,
@@ -231,26 +470,64 @@ impl ControlsPanel {
             .map(|var_ref| {
                 let var = hierarchy.get(var_ref);
                 VarForUI {
-                    name: var.name(&hierarchy),
+                    name: Rc::new(var.name(&hierarchy).to_owned()),
                     var_type: var.var_type(),
                     var_direction: var.direction(),
                     var_ref,
                     signal_type: var.signal_tpe(),
                 }
             });
+
+        // Lazy loading to not freeze the main thread
+        const CHUNK_SIZE: usize = 50;
+        let mut chunked_vars_for_ui: Vec<Vec<VarForUI>> = <_>::default();
+        let mut chunk = Vec::with_capacity(CHUNK_SIZE);
+        for (index, var_for_ui) in vars_for_ui.enumerate() {
+            chunk.push(var_for_ui);
+            if index % CHUNK_SIZE == 0 {
+                chunked_vars_for_ui.push(mem::take(&mut chunk));
+            }
+        }
+        if not(chunk.is_empty()) {
+            chunked_vars_for_ui.push(chunk);
+        }
+        let vars_for_ui_mutable_vec = MutableVec::<VarForUI>::new();
+        let append_vars_for_ui_task =
+            Task::start_droppable(clone!((vars_for_ui_mutable_vec) async move {
+                for chunk in chunked_vars_for_ui {
+                    Task::next_macro_tick().await;
+                    vars_for_ui_mutable_vec.lock_mut().extend(chunk);
+                }
+            }));
+
         Column::new()
+            .s(Width::with_signal_self(
+                self.layout
+                    .signal()
+                    .map(|layout| matches!(layout, Layout::Columns))
+                    .map_true(|| Width::default().min(SCOPE_VAR_ROW_MAX_WIDTH)),
+            ))
             .s(Align::new().left())
             .s(Gap::new().y(10))
-            .items(vars_for_ui.map(clone!((self => s) move |var_for_ui| s.var_row(var_for_ui))))
+            .s(Height::fill())
+            .s(Scrollbars::y_and_clip_x())
+            .items_signal_vec(
+                vars_for_ui_mutable_vec
+                    .signal_vec_cloned()
+                    .map(clone!((self => s) move |var_for_ui| s.var_row(var_for_ui))),
+            )
+            .after_remove(move |_| drop(append_vars_for_ui_task))
     }
 
     fn var_row(&self, var_for_ui: VarForUI) -> impl Element {
         Row::new()
             .s(Gap::new().x(10))
-            .item(self.var_button(var_for_ui))
+            .s(Padding::new().right(15))
-            .item(self.var_tag_type(var_for_ui))
+            .s(Width::default().max(SCOPE_VAR_ROW_MAX_WIDTH))
-            .item(self.var_tag_index(var_for_ui))
+            .item(self.var_button(var_for_ui.clone()))
-            .item(self.var_tag_bit(var_for_ui))
+            .item(self.var_tag_type(var_for_ui.clone()))
+            .item(self.var_tag_index(var_for_ui.clone()))
+            .item(self.var_tag_bit(var_for_ui.clone()))
             .item(self.var_tag_direction(var_for_ui))
     }
 
@@ -259,14 +536,7 @@ impl ControlsPanel {
         let selected_var_ref = self.selected_var_refs.clone();
         El::new().child(
             Button::new()
-                // @TODO REMOVE
+                .s(Font::new().wrap_anywhere())
-                .after_insert(
-                    clone!((selected_var_ref, var_for_ui.var_ref => var_ref) move |_| {
-                        if crate::SIMULATE_CLICKS {
-                            selected_var_ref.lock_mut().extend([var_ref, var_ref]);
-                        }
-                    }),
-                )
                 .s(Padding::new().x(15).y(5))
                 .s(Background::new().color_signal(
                     hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),

frontend/src/main.rs

@@ -11,8 +11,12 @@ use waveform_panel::WaveformPanel;
 
 type HierarchyAndTimeTable = (Rc<wellen::Hierarchy>, Rc<wellen::TimeTable>);
 
-// @TODO REMOVE
+#[derive(Clone, Copy, Default)]
-const SIMULATE_CLICKS: bool = false;
+enum Layout {
+    Tree,
+    #[default]
+    Columns,
+}
 
 fn main() {
     start_app("app", root);
@@ -26,15 +30,27 @@ fn main() {
 fn root() -> impl Element {
     let hierarchy_and_time_table: Mutable<Option<HierarchyAndTimeTable>> = <_>::default();
     let selected_var_refs: MutableVec<wellen::VarRef> = <_>::default();
-    Row::new()
+    let layout: Mutable<Layout> = <_>::default();
+    Column::new()
         .s(Height::fill())
+        .s(Scrollbars::y_and_clip_x())
         .s(Font::new().color(color!("Lavender")))
-        .item(ControlsPanel::new(
+        .item(
+            Row::new()
+                .s(Height::fill())
+                .s(Gap::new().x(15))
+                .item(ControlsPanel::new(
+                    hierarchy_and_time_table.clone(),
+                    selected_var_refs.clone(),
+                    layout.clone(),
+                ))
+                .item_signal(layout.signal().map(|layout| matches!(layout, Layout::Tree)).map_true(clone!((hierarchy_and_time_table, selected_var_refs) move || WaveformPanel::new(
+                    hierarchy_and_time_table.clone(),
+                    selected_var_refs.clone(),
+                ))))
+        )
+        .item_signal(layout.signal().map(|layout| matches!(layout, Layout::Columns)).map_true(move || WaveformPanel::new(
             hierarchy_and_time_table.clone(),
             selected_var_refs.clone(),
-        ))
+        )))
-        .item(WaveformPanel::new(
-            hierarchy_and_time_table,
-            selected_var_refs,
-        ))
 }

frontend/src/tauri_bridge.rs

@@ -4,8 +4,8 @@ pub async fn show_window() {
     tauri_glue::show_window().await
 }
 
-pub async fn load_waveform() {
+pub async fn load_waveform(test_file_name: &'static str) {
-    tauri_glue::load_waveform().await
+    tauri_glue::load_waveform(test_file_name).await
 }
 
 pub async fn get_hierarchy() -> wellen::Hierarchy {
@@ -33,7 +33,7 @@ mod tauri_glue {
     extern "C" {
         pub async fn show_window();
 
-        pub async fn load_waveform();
+        pub async fn load_waveform(test_file_name: &str);
 
         pub async fn get_hierarchy() -> JsValue;
 

frontend/src/waveform_panel.rs

@@ -3,7 +3,7 @@ use wellen::GetItem;
 use zoon::*;
 
 mod pixi_canvas;
-use pixi_canvas::PixiCanvas;
+use pixi_canvas::{PixiCanvas, PixiController};
 
 const ROW_HEIGHT: u32 = 40;
 const ROW_GAP: u32 = 4;
@@ -67,7 +67,13 @@ impl WaveformPanel {
                 })).for_each(clone!((controller, hierarchy_and_time_table) move |vec_diff| {
                     clone!((controller, hierarchy_and_time_table) async move {
                         match vec_diff {
-                            VecDiff::Replace { values: _ } => { todo!("`task_with_controller` + `Replace`") },
+                            VecDiff::Replace { values } => { 
+                                let controller = controller.wait_for_some_cloned().await;
+                                controller.clear_vars();
+                                for var_ref in values {
+                                    Self::push_var(&controller, &hierarchy_and_time_table, var_ref).await;
+                                }
+                            },
                             VecDiff::InsertAt { index: _, value: _ } => { todo!("`task_with_controller` + `InsertAt`") }
                             VecDiff::UpdateAt { index: _, value: _ } => { todo!("`task_with_controller` + `UpdateAt`") }
                             VecDiff::RemoveAt { index } => {
@@ -78,20 +84,7 @@ impl WaveformPanel {
                             VecDiff::Move { old_index: _, new_index: _ } => { todo!("`task_with_controller` + `Move`") }
                             VecDiff::Push { value: var_ref } => {
                                 if let Some(controller) = controller.lock_ref().as_ref() {
-                                    let (hierarchy, time_table) = hierarchy_and_time_table.get_cloned().unwrap();
+                                    Self::push_var(controller, &hierarchy_and_time_table, var_ref).await;
-                                    let var = hierarchy.get(var_ref);
-                                    let signal_ref = var.signal_ref();
-                                    let signal = tauri_bridge::load_and_get_signal(signal_ref).await;
-
-                                    let timescale = hierarchy.timescale();
-                                    zoon::println!("{timescale:?}");
-
-                                    // Note: Sync `timeline`'s type with the `Timeline` in `frontend/typescript/pixi_canvas/pixi_canvas.ts'
-                                    let mut timeline: Vec<(wellen::Time, Option<String>)> = time_table.iter().map(|time| (*time, None)).collect();
-                                    for (time_index, signal_value) in signal.iter_changes() {
-                                        timeline[time_index as usize].1 = Some(signal_value.to_string());
-                                    }
-                                    controller.push_var(serde_wasm_bindgen::to_value(&timeline).unwrap_throw());
                                 }
                             }
                             VecDiff::Pop {} => {
@@ -110,6 +103,27 @@ impl WaveformPanel {
             })
     }
 
+    async fn push_var(
+        controller: &PixiController, 
+        hierarchy_and_time_table: &Mutable<Option<HierarchyAndTimeTable>>,
+        var_ref: wellen::VarRef,
+    ) {
+        let (hierarchy, time_table) = hierarchy_and_time_table.get_cloned().unwrap();
+        let var = hierarchy.get(var_ref);
+        let signal_ref = var.signal_ref();
+        let signal = tauri_bridge::load_and_get_signal(signal_ref).await;
+
+        let timescale = hierarchy.timescale();
+        zoon::println!("{timescale:?}");
+
+        // Note: Sync `timeline`'s type with the `Timeline` in `frontend/typescript/pixi_canvas/pixi_canvas.ts'
+        let mut timeline: Vec<(wellen::Time, Option<String>)> = time_table.iter().map(|time| (*time, None)).collect();
+        for (time_index, signal_value) in signal.iter_changes() {
+            timeline[time_index as usize].1 = Some(signal_value.to_string());
+        }
+        controller.push_var(serde_wasm_bindgen::to_value(&timeline).unwrap_throw());
+    }
+
     fn selected_var_panel(
         &self,
         index: ReadOnlyMutable<Option<usize>>,

frontend/src/waveform_panel/pixi_canvas.rs

@@ -1,4 +1,5 @@
 use zoon::*;
+pub use js_bridge::PixiController;
 
 pub struct PixiCanvas {
     raw_el: RawHtmlEl<web_sys::HtmlElement>,
@@ -89,6 +90,7 @@ mod js_bridge {
     // Note: Add all corresponding methods to `frontend/typescript/pixi_canvas/pixi_canvas.ts`
     #[wasm_bindgen(module = "/typescript/bundles/pixi_canvas.js")]
     extern "C" {
+        #[derive(Clone)]
         pub type PixiController;
 
         // @TODO `row_height` and `row_gap` is FastWave-specific

frontend/typescript/bundles/pixi_canvas.js

@@ -35161,7 +35161,9 @@ var PixiController = class {
   }
   // -- FastWave-specific --
   remove_var(index) {
-    this.var_signal_rows[index].destroy();
+    if (typeof this.var_signal_rows[index] !== "undefined") {
+      this.var_signal_rows[index].destroy();
+    }
   }
   push_var(timeline) {
     new VarSignalRow(
@@ -35174,7 +35176,7 @@ var PixiController = class {
     );
   }
   pop_var() {
-    this.var_signal_rows[this.var_signal_rows.length - 1].destroy();
+    this.remove_var(this.var_signal_rows.length - 1);
   }
   clear_vars() {
     this.var_signal_rows.slice().reverse().forEach((row) => row.destroy());

frontend/typescript/bundles/tauri_glue.js

@@ -2514,8 +2514,8 @@ var invoke2 = core_exports.invoke;
 async function show_window() {
   return await invoke2("show_window");
 }
-async function load_waveform() {
+async function load_waveform(test_file_name) {
-  return await invoke2("load_waveform");
+  return await invoke2("load_waveform", { test_file_name });
 }
 async function get_hierarchy() {
   return await invoke2("get_hierarchy");

frontend/typescript/pixi_canvas/pixi_canvas.ts

@@ -46,7 +46,9 @@ export class PixiController {
     // -- FastWave-specific --
 
     remove_var(index: number) {
-        this.var_signal_rows[index].destroy();
+        if (typeof this.var_signal_rows[index] !== 'undefined') {
+            this.var_signal_rows[index].destroy();
+        }
     }
 
     push_var(timeline: Timeline) {
@@ -61,7 +63,7 @@ export class PixiController {
     }
 
     pop_var() {
-        this.var_signal_rows[this.var_signal_rows.length - 1].destroy();
+        this.remove_var(this.var_signal_rows.length - 1);
     }
 
     clear_vars() {

frontend/typescript/tauri_glue/tauri_glue.ts

@@ -12,8 +12,8 @@ export async function show_window(): Promise<void> {
     return await invoke("show_window");
 }
 
-export async function load_waveform(): Promise<void> {
+export async function load_waveform(test_file_name: string): Promise<void> {
-    return await invoke("load_waveform");
+    return await invoke("load_waveform", { test_file_name });
 }
 
 export async function get_hierarchy(): Promise<WellenHierarchy> {

src-tauri/src/lib.rs

@@ -1,3 +1,4 @@
+use std::rc::Rc;
 use std::sync::Mutex;
 use wellen::simple::Waveform;
 
@@ -14,9 +15,15 @@ fn show_window(window: tauri::Window) {
 }
 
 #[tauri::command(rename_all = "snake_case")]
-fn load_waveform(store: tauri::State<Store>) {
+fn load_waveform(test_file_name: Rc<String>, store: tauri::State<Store>) {
-    let waveform =
+    static SIMPLE_VCD: &'static [u8; 311] = include_bytes!("../../test_files/simple.vcd");
-        wellen_helpers::read_from_bytes(include_bytes!("../../test_files/simple.vcd").to_vec());
+    static WAVE_27_FST: &'static [u8; 28860652] = include_bytes!("../../test_files/wave_27.fst");
+    let chosen_file = match test_file_name.as_str() {
+        "simple.vcd" => SIMPLE_VCD.to_vec(),
+        "wave_27.fst" => WAVE_27_FST.to_vec(),
+        test_file_name => todo!("add {test_file_name} to the `test_files` folder"),
+    };
+    let waveform = wellen_helpers::read_from_bytes(chosen_file);
     let Ok(waveform) = waveform else {
         panic!("VCD file reading failed")
     };