optimize canvas rendering

frontend/src/controls_panel.rs

@@ -1,24 +1,33 @@
 use crate::tauri_bridge;
-use crate::HierarchyAndTimeTable;
-use std::collections::VecDeque;
+use crate::{HierarchyAndTimeTable, Layout};
+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)]
-struct VarForUI<'a> {
-    name: &'a str,
+const SCOPE_VAR_ROW_MAX_WIDTH: u32 = 480;
+const MILLER_COLUMN_MAX_HEIGHT: u32 = 500;
+
+#[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)]
-struct ScopeForUI<'a> {
-    level: u32,
-    name: &'a str,
+#[derive(Clone)]
+struct ScopeForUI {
+    level: usize,
+    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,54 @@ 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(Height::fill())
+            .s(Width::with_signal_self(
+                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(
-                self.hierarchy_and_time_table
-                    .signal_cloned()
-                    .map_some(clone!((self => s) move |(hierarchy, _)| s.vars_panel(hierarchy))),
-            )
+            .item_signal(layout_and_hierarchy_signal.map(
+                clone!((self => s) move |(layout, hierarchy)| {
+                    hierarchy.and_then(clone!((s) move |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 +127,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 +143,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;
-                    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:?}");
+                    tauri_bridge::load_waveform(test_file_name).await;
+                    let (hierarchy, time_table) = join!(
+                        tauri_bridge::get_hierarchy(),
+                        tauri_bridge::get_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();
-            scope_refs.push_back((0, scope_ref));
-            while let Some((level, scope_ref)) = scope_refs.pop_front() {
+            let mut scope_refs = Vec::new();
+            scope_refs.push((0, scope_ref, None));
+            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) {
-                    scope_refs.push_back((level + 1, scope_ref));
+                for scope_ref in children {
+                    scope_refs.push((level + 1, scope_ref, Some(expanded.read_only())));
                 }
             }
         }
-        Column::new()
-            .s(Align::new().left())
-            .s(Gap::new().y(10))
-            .items(
-                scopes_for_ui
-                    .into_iter()
-                    .map(clone!((self => s) move |scope_for_ui| s.scope_button(scope_for_ui))),
-            )
+        let scopes_for_ui = Rc::new(scopes_for_ui);
+        let s = self.clone();
+        El::new()
+            .s(Height::fill())
+            .s(Scrollbars::both())
+            .s(Width::fill())
+            .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 {
-        let (hovered, hovered_signal) = Mutable::new_and_signal(false);
+    fn scope_button_row(&self, scope_for_ui: ScopeForUI) -> impl Element {
+        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()
-            // @TODO REMOVE
-            .after_insert(
-                clone!((selected_scope_ref, scope_for_ui.scope_ref => scope_ref) move |_| {
-                    if crate::SIMULATE_CLICKS {
-                        selected_scope_ref.set_neq(Some(scope_ref));
+        let task_collapse_on_parent_collapse = {
+            let expanded = scope_for_ui.expanded.clone();
+            scope_for_ui.parent_expanded.clone().map(|parent_expanded| {
+                Task::start_droppable(parent_expanded.signal().for_each_sync(
+                    move |parent_expanded| {
+                        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()
-                    .s(Padding::new().x(15).y(5))
+                Row::new()
                     .s(Background::new().color_signal(background_color))
                     .s(RoundedCorners::all(15))
-                    .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered))
-                    .on_press(move || selected_scope_ref.set_neq(Some(scope_for_ui.scope_ref)))
-                    .label(scope_for_ui.name),
+                    .s(Clip::both())
+                    .s(Align::new().left())
+                    .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 +472,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))
-            .item(self.var_tag_type(var_for_ui))
-            .item(self.var_tag_index(var_for_ui))
-            .item(self.var_tag_bit(var_for_ui))
+            .s(Padding::new().right(15))
+            .s(Width::default().max(SCOPE_VAR_ROW_MAX_WIDTH))
+            .item(self.var_button(var_for_ui.clone()))
+            .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 +538,7 @@ impl ControlsPanel {
         let selected_var_ref = self.selected_var_refs.clone();
         El::new().child(
             Button::new()
-                // @TODO REMOVE
-                .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(Font::new().wrap_anywhere())
                 .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
-const SIMULATE_CLICKS: bool = false;
+#[derive(Clone, Copy, Default)]
+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() {
-    tauri_glue::load_waveform().await
+pub async fn load_waveform(test_file_name: &'static str) {
+    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

@@ -1,9 +1,9 @@
 use crate::{tauri_bridge, HierarchyAndTimeTable};
 use wellen::GetItem;
-use zoon::*;
+use zoon::{eprintln, *};
 
 mod pixi_canvas;
-use pixi_canvas::PixiCanvas;
+use pixi_canvas::{PixiCanvas, PixiController};
 
 const ROW_HEIGHT: u32 = 40;
 const ROW_GAP: u32 = 4;
@@ -29,7 +29,7 @@ impl WaveformPanel {
     fn root(&self) -> impl Element {
         let selected_vars_panel_height_getter: Mutable<u32> = <_>::default();
         Row::new()
-            .s(Padding::all(20).left(0))
+            .s(Padding::all(20))
             .s(Scrollbars::y_and_clip_x())
             .s(Width::growable())
             .s(Height::fill())
@@ -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();
-                                    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());
+                                    Self::push_var(controller, &hierarchy_and_time_table, var_ref).await;
                                 }
                             }
                             VecDiff::Pop {} => {
@@ -110,6 +103,42 @@ 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();
+        if time_table.is_empty() {
+            eprintln!("timetable is empty");
+            return;
+        }
+        let last_time = time_table.last().copied().unwrap_throw();
+
+        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();
+        // @TODO remove
+        zoon::println!("{timescale:?}");
+
+        let mut timeline: Vec<(wellen::Time, String)> = signal
+            .iter_changes()
+            .map(|(time_index, signal_value)| {
+                (time_table[time_index as usize], signal_value.to_string())
+            })
+            .collect();
+        if timeline.is_empty() {
+            eprintln!("timeline is empty");
+            return;
+        }
+        timeline.push((last_time, timeline.last().cloned().unwrap_throw().1));
+
+        // Note: Sync `timeline`'s type with the `Timeline` in `frontend/typescript/pixi_canvas/pixi_canvas.ts'
+        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,3 +1,4 @@
+pub use js_bridge::PixiController;
 use zoon::*;
 
 pub struct PixiCanvas {
@@ -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,29 +35176,37 @@ 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());
   }
 };
 var VarSignalRow = class {
-  timeline;
   app;
+  timeline;
+  last_time;
+  formatter;
+  timeline_for_ui;
   owner;
   index_in_owner;
   rows_container;
   row_height;
   row_gap;
   row_height_with_gap;
-  renderer_resize_callback = () => this.draw();
+  renderer_resize_callback = () => this.redraw_on_canvas_resize();
   // -- elements --
   row_container = new Container();
   signal_blocks_container = new Container();
   constructor(timeline, app, owner, rows_container, row_height, row_gap) {
-    console.log("VarSignalRow timeline:", timeline);
-    this.timeline = timeline;
     this.app = app;
+    this.timeline = timeline;
+    this.last_time = timeline[timeline.length - 1][0];
+    this.formatter = (signal_value) => parseInt(signal_value, 2).toString(16);
+    this.timeline_for_ui = this.timeline.map(([time, value]) => {
+      const x2 = time / this.last_time * this.app.screen.width;
+      return [x2, this.formatter(value)];
+    });
     this.row_height = row_height;
     this.row_gap = row_gap;
     this.row_height_with_gap = row_height + row_gap;
@@ -35204,46 +35214,59 @@ var VarSignalRow = class {
     this.owner = owner;
     this.owner.push(this);
     this.rows_container = rows_container;
-    this.create_element_tree();
     this.draw();
     this.app.renderer.on("resize", this.renderer_resize_callback);
   }
-  create_element_tree() {
+  draw() {
     this.row_container.y = this.index_in_owner * this.row_height_with_gap;
     this.rows_container.addChild(this.row_container);
     this.row_container.addChild(this.signal_blocks_container);
+    const label_style = new TextStyle({
+      align: "center",
+      fill: "White",
+      fontSize: 16,
+      fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"'
+    });
+    this.timeline_for_ui.forEach(([x2, value], index) => {
+      if (index == this.timeline_for_ui.length - 1) {
+        return;
+      }
+      const block_width = this.timeline_for_ui[index + 1][0] - x2;
+      const block_height = this.row_height;
+      const signal_block = new Container();
+      signal_block.x = x2;
+      this.signal_blocks_container.addChild(signal_block);
+      const background = new Graphics().roundRect(0, 0, block_width, block_height, 15).fill("SlateBlue");
+      background.label = "background";
+      signal_block.addChild(background);
+      const label = new Text({ text: value, style: label_style });
+      label.x = (block_width - label.width) / 2;
+      label.y = (block_height - label.height) / 2;
+      label.visible = label.width < block_width;
+      label.label = "label";
+      signal_block.addChild(label);
+    });
   }
-  draw() {
-    if (this.timeline.length > 0) {
-      const last_time = this.timeline[this.timeline.length - 1][0];
-      const formatter = (signal_value) => parseInt(signal_value, 2).toString(16);
-      const timeline = this.timeline.map(([time, value]) => {
-        const x2 = time / last_time * this.app.screen.width;
-        const formatted_value = typeof value === "string" ? formatter(value) : void 0;
-        return [x2, formatted_value];
-      });
-      this.signal_blocks_container.removeChildren();
-      timeline.forEach(([x2, value], index) => {
-        if (typeof value === "string") {
-          const block_width = timeline[index + 1][0] - x2;
-          const block_height = this.row_height;
-          const signal_block = new Container({ x: x2 });
-          this.signal_blocks_container.addChild(signal_block);
-          let background = new Graphics().roundRect(0, 0, block_width, block_height, 15).fill("SlateBlue");
-          signal_block.addChild(background);
-          let style = new TextStyle({
-            align: "center",
-            fill: "White",
-            fontSize: 16,
-            fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"'
-          });
-          let label = new Text({ text: value, style });
-          label.x = (block_width - label.width) / 2;
-          label.y = (block_height - label.height) / 2;
-          signal_block.addChild(label);
-        }
-      });
+  redraw_on_canvas_resize() {
+    for (let index = 0; index < this.timeline_for_ui.length; index++) {
+      const x2 = this.timeline[index][0] / this.last_time * this.app.screen.width;
+      this.timeline_for_ui[index][0] = x2;
     }
+    this.timeline_for_ui.forEach(([x2, _value], index) => {
+      if (index == this.timeline_for_ui.length - 1) {
+        return;
+      }
+      const block_width = this.timeline_for_ui[index + 1][0] - x2;
+      const block_height = this.row_height;
+      const signal_block = this.signal_blocks_container.getChildAt(index);
+      signal_block.x = x2;
+      const background = signal_block.getChildByLabel("background");
+      background.width = block_width;
+      const label = signal_block.getChildByLabel("label");
+      label.x = (block_width - label.width) / 2;
+      label.y = (block_height - label.height) / 2;
+      label.visible = label.width < block_width;
+    });
   }
   decrement_index() {
     this.index_in_owner--;

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() {
-  return await invoke2("load_waveform");
+async function load_waveform(test_file_name) {
+  return await invoke2("load_waveform", { test_file_name });
 }
 async function get_hierarchy() {
   return await invoke2("get_hierarchy");

frontend/typescript/pixi_canvas/pixi_canvas.ts

@@ -2,7 +2,10 @@ import { Application, Text, Graphics, Container, TextStyle } from "pixi.js";
 
 type Time = number;
 type BitString = string;
-type Timeline = Array<[Time, BitString | undefined]>;
+type Timeline = Array<[Time, BitString]>;
+
+type X = number;
+type TimelineForUI = Array<[X, string]>;
 
 export class PixiController {
     app: Application
@@ -46,7 +49,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 +66,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() {
@@ -70,15 +75,18 @@ export class PixiController {
 }
 
 class VarSignalRow {
-    timeline: Timeline;
     app: Application;
+    timeline: Timeline;
+    last_time: Time;
+    formatter: (signal_value: BitString) => string;
+    timeline_for_ui: TimelineForUI;
     owner: Array<VarSignalRow>;
     index_in_owner: number;
     rows_container: Container;
     row_height: number;
     row_gap: number;
     row_height_with_gap: number;
-    renderer_resize_callback = () => this.draw();
+    renderer_resize_callback = () => this.redraw_on_canvas_resize();
     // -- elements --
     row_container = new Container();
     signal_blocks_container = new Container();
@@ -91,11 +99,17 @@ class VarSignalRow {
         row_height: number,
         row_gap: number,
     ) {
-        console.log("VarSignalRow timeline:", timeline);
-        this.timeline = timeline;
-
         this.app = app;
 
+        this.timeline = timeline;
+        this.last_time = timeline[timeline.length - 1][0];
+        this.formatter = signal_value => parseInt(signal_value, 2).toString(16);
+
+        this.timeline_for_ui = this.timeline.map(([time, value]) => {
+            const x = time / this.last_time * this.app.screen.width;
+            return [x, this.formatter(value)]
+        });
+
         this.row_height = row_height;
         this.row_gap = row_gap;
         this.row_height_with_gap = row_height + row_gap;
@@ -105,64 +119,82 @@ class VarSignalRow {
         this.owner.push(this);
 
         this.rows_container = rows_container;
-        this.create_element_tree();
 
         this.draw();
         this.app.renderer.on("resize", this.renderer_resize_callback);
     }
 
-    create_element_tree() {
+    draw() {
         // row_container
         this.row_container.y = this.index_in_owner * this.row_height_with_gap;
         this.rows_container.addChild(this.row_container);
 
         // signal_block_container
         this.row_container.addChild(this.signal_blocks_container);
+
+        const label_style = new TextStyle({
+            align: "center",
+            fill: "White",
+            fontSize: 16,
+            fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+        });
+
+        this.timeline_for_ui.forEach(([x, value], index) => {
+            if (index == this.timeline_for_ui.length - 1) {
+                return;
+            }
+            const block_width = this.timeline_for_ui[index+1][0] - x;
+            const block_height = this.row_height;
+
+            // signal_block
+            const signal_block = new Container();
+            signal_block.x = x;
+            this.signal_blocks_container.addChild(signal_block);
+
+            // background
+            const background = new Graphics()
+                .roundRect(0, 0, block_width, block_height, 15)
+                .fill("SlateBlue");
+            background.label = "background";
+            signal_block.addChild(background);
+
+            // label
+            const label = new Text({ text: value, style: label_style });
+            label.x = (block_width - label.width) / 2;
+            label.y = (block_height - label.height) / 2;
+            label.visible = label.width < block_width;
+            label.label = "label";
+            signal_block.addChild(label);
+        })
     }
 
-    draw() {
-        if (this.timeline.length > 0) {
-            const last_time = this.timeline[this.timeline.length - 1][0];
-            // @TODO make formatter configurable
-            const formatter: (signal_value: BitString) => string = signal_value => parseInt(signal_value, 2).toString(16); 
-            // @TODO optimize - one pass, partly in Rust, partly outside of `draw()`, etc.
-            const timeline: Array<[number, string | undefined]> = this.timeline.map(([time, value]) => {
-                const x = time / last_time * this.app.screen.width;
-                const formatted_value = typeof value === 'string' ? formatter(value) : undefined;
-                return [x, formatted_value]
-            });
-            // @TODO optimize - don't recreate all on every draw
-            this.signal_blocks_container.removeChildren();
-            timeline.forEach(([x, value], index) => {
-                if (typeof value === 'string') {
-                    const block_width = timeline[index+1][0] - x;
-                    const block_height = this.row_height;
-
-                    // signal_block
-                    const signal_block = new Container({x});
-                    this.signal_blocks_container.addChild(signal_block);
-
-                    // background
-                    let background = new Graphics()
-                        .roundRect(0, 0, block_width, block_height, 15)
-                        .fill("SlateBlue");
-                    signal_block.addChild(background);
-
-                    // label
-                    let style = new TextStyle({
-                        align: "center",
-                        fill: "White",
-                        fontSize: 16,
-                        fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
-                    });
-                    // @TODO don't show when the label is wider/higher than the block
-                    let label = new Text({ text: value, style });
-                    label.x = (block_width - label.width) / 2;
-                    label.y = (block_height - label.height) / 2;
-                    signal_block.addChild(label);
-                }
-            })
+    redraw_on_canvas_resize() {
+        for (let index = 0; index < this.timeline_for_ui.length; index++) {
+            const x = this.timeline[index][0] / this.last_time * this.app.screen.width;
+            this.timeline_for_ui[index][0] = x;
         }
+        this.timeline_for_ui.forEach(([x, _value], index) => {
+            if (index == this.timeline_for_ui.length - 1) {
+                return;
+            }
+
+            const block_width = this.timeline_for_ui[index+1][0] - x;
+            const block_height = this.row_height;
+
+            // signal_block
+            const signal_block = this.signal_blocks_container.getChildAt(index);
+            signal_block.x = x;
+
+            // background
+            const background = signal_block.getChildByLabel("background")!;
+            background.width = block_width;
+
+            // label
+            const label = signal_block.getChildByLabel("label")!;
+            label.x = (block_width - label.width) / 2;
+            label.y = (block_height - label.height) / 2;
+            label.visible = label.width < block_width;
+        })
     }
 
     decrement_index() {

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> {
-    return await invoke("load_waveform");
+export async function load_waveform(test_file_name: string): Promise<void> {
+    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>) {
-    let waveform =
-        wellen_helpers::read_from_bytes(include_bytes!("../../test_files/simple.vcd").to_vec());
+fn load_waveform(test_file_name: Rc<String>, store: tauri::State<Store>) {
+    static SIMPLE_VCD: &'static [u8; 311] = include_bytes!("../../test_files/simple.vcd");
+    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")
     };