@perspective-dev/viewer 4.0.0 → 4.1.0

package/src/rust/components/containers/scroll_panel.rs

@@ -23,19 +23,8 @@ use yew::virtual_dom::VChild;
 
 use super::scroll_panel_item::ScrollPanelItem;
 use crate::components::style::LocalStyle;
+use crate::css;
 use crate::utils::*;
-use crate::*;
-
-pub struct ScrollPanel {
-    viewport_ref: NodeRef,
-    viewport_height: f64,
-    viewport_width: f64,
-    content_window: Option<ContentWindow>,
-    needs_rerender: bool,
-    total_height: f64,
-    _dimensions_reset_sub: Option<Subscription>,
-    _resize_sub: Option<Subscription>,
-}
 
 #[derive(Properties)]
 pub struct ScrollPanelProps {
@@ -96,71 +85,15 @@ pub enum ScrollPanelMsg {
     ChildrenChanged,
 }
 
-impl ScrollPanel {
-    fn viewport<'a, 'b: 'a, 'c: 'a>(&'b self, ctx: &'c Context<Self>) -> &'a NodeRef {
-        ctx.props()
-            .viewport_ref
-            .as_ref()
-            .unwrap_or(&self.viewport_ref)
-    }
-
-    fn viewport_elem(&self, ctx: &Context<Self>) -> Element {
-        self.viewport(ctx).cast::<Element>().unwrap()
-    }
-}
-
-#[derive(PartialEq)]
-struct ContentWindow {
-    scroll_top: f64,
-    start_y: f64,
-    visible_range: Range<usize>,
-}
-
-impl ScrollPanel {
-    fn calculate_window_content(&mut self, ctx: &Context<Self>) -> bool {
-        let viewport = self.viewport_elem(ctx);
-        let scroll_top = viewport.scroll_top() as f64;
-        let mut start_node = 0;
-        let mut start_y = 0_f64;
-        let mut offset = 0_f64;
-        let end_node = ctx
-            .props()
-            .children
-            .iter()
-            .enumerate()
-            .find_or_last(|(i, x)| {
-                if offset + x.props.get_size() < scroll_top {
-                    start_node = *i + 1;
-                    start_y = offset + x.props.get_size();
-                }
-
-                offset += x.props.get_size();
-                offset > scroll_top + self.viewport_height
-            })
-            .map(|x| x.0)
-            .unwrap_or_default();
-
-        // Why is this `end_node + 2`, I can see you asking yourself? `end_node` is the
-        // index of the last visible child, but [`Range`] is an open interval so we must
-        // increment by 1. The next rendered element is always occluded by the parent
-        // container, it may seem unnecessary to render it, however not doing so causing
-        // scroll glitching in Chrome:
-        // * When the first pixel of the `end_node + 1` child is scrolled into view, the
-        //   container element it is embedded in will expand past the end of the scroll
-        //   container.
-        // * Chrome detects this and helpfully scrolls this new element into view,
-        //   re-triggering the on scroll callback.
-        let visible_range = start_node..min!(ctx.props().children.len(), end_node + 2);
-        let content_window = Some(ContentWindow {
-            scroll_top,
-            start_y,
-            visible_range,
-        });
-
-        let re_render = self.content_window != content_window;
-        self.content_window = content_window;
-        re_render
-    }
+pub struct ScrollPanel {
+    viewport_ref: NodeRef,
+    viewport_height: f64,
+    viewport_width: f64,
+    content_window: Option<ContentWindow>,
+    needs_rerender: bool,
+    total_height: f64,
+    _dimensions_reset_sub: Option<Subscription>,
+    _resize_sub: Option<Subscription>,
 }
 
 impl Component for ScrollPanel {
@@ -211,12 +144,12 @@ impl Component for ScrollPanel {
                 let viewport = self.viewport_elem(ctx);
                 let rect = viewport.get_bounding_client_rect();
                 let viewport_height = rect.height() - 8.0;
-                let viewport_width = max!(self.viewport_width, rect.width() - 6.0);
+                let viewport_width = self.viewport_width.max(rect.width() - 6.0);
                 let re_render = self.viewport_height != viewport_height
                     || self.viewport_width != viewport_width;
 
                 self.viewport_height = rect.height() - 8.0;
-                self.viewport_width = max!(self.viewport_width, rect.width() - 6.0);
+                self.viewport_width = self.viewport_width.max(rect.width() - 6.0);
                 re_render
             },
             ScrollPanelMsg::CalculateWindowContent => self.calculate_window_content(ctx),
@@ -254,7 +187,7 @@ impl Component for ScrollPanel {
             ),
         };
 
-        let width_style = format!("width:{}px", max!(self.viewport_width, 0.0));
+        let width_style = format!("width:{}px", self.viewport_width.max(0.0));
         let items = if !windowed_items.is_empty() {
             let onscroll = ctx.link().batch_callback(|_| {
                 vec![
@@ -309,3 +242,70 @@ impl Component for ScrollPanel {
         ]);
     }
 }
+
+impl ScrollPanel {
+    fn viewport<'a, 'b: 'a, 'c: 'a>(&'b self, ctx: &'c Context<Self>) -> &'a NodeRef {
+        ctx.props()
+            .viewport_ref
+            .as_ref()
+            .unwrap_or(&self.viewport_ref)
+    }
+
+    fn viewport_elem(&self, ctx: &Context<Self>) -> Element {
+        self.viewport(ctx).cast::<Element>().unwrap()
+    }
+}
+
+#[derive(PartialEq)]
+struct ContentWindow {
+    scroll_top: f64,
+    start_y: f64,
+    visible_range: Range<usize>,
+}
+
+impl ScrollPanel {
+    fn calculate_window_content(&mut self, ctx: &Context<Self>) -> bool {
+        let viewport = self.viewport_elem(ctx);
+        let scroll_top = viewport.scroll_top() as f64;
+        let mut start_node = 0;
+        let mut start_y = 0_f64;
+        let mut offset = 0_f64;
+        let end_node = ctx
+            .props()
+            .children
+            .iter()
+            .enumerate()
+            .find_or_last(|(i, x)| {
+                if offset + x.props.get_size() < scroll_top {
+                    start_node = *i + 1;
+                    start_y = offset + x.props.get_size();
+                }
+
+                offset += x.props.get_size();
+                offset > scroll_top + self.viewport_height
+            })
+            .map(|x| x.0)
+            .unwrap_or_default();
+
+        // Why is this `end_node + 2`, I can see you asking yourself? `end_node` is the
+        // index of the last visible child, but [`Range`] is an open interval so we must
+        // increment by 1. The next rendered element is always occluded by the parent
+        // container, it may seem unnecessary to render it, however not doing so causing
+        // scroll glitching in Chrome:
+        // * When the first pixel of the `end_node + 1` child is scrolled into view, the
+        //   container element it is embedded in will expand past the end of the scroll
+        //   container.
+        // * Chrome detects this and helpfully scrolls this new element into view,
+        //   re-triggering the on scroll callback.
+        let visible_range = start_node..ctx.props().children.len().min(end_node + 2);
+        let content_window = Some(ContentWindow {
+            scroll_top,
+            start_y,
+            visible_range,
+        });
+
+        let re_render = self.content_window != content_window;
+        self.content_window = content_window;
+        re_render
+    }
+}

package/src/rust/components/containers/scroll_panel_item.rs

@@ -13,88 +13,88 @@
 // Forked from https://github.com/AircastDev/yew-virtual-scroller (Apache 2.0)
 // Adds support for Yew 0.19, auto-width and a simplified message structure.
 
-#[cfg(debug_assertions)]
 use std::cell::Cell;
-#[cfg(debug_assertions)]
 use std::rc::Rc;
 
 use yew::prelude::*;
 
 #[derive(PartialEq, Properties)]
 pub struct ScrollPanelItemProps {
+    pub children: Children,
+
     /// The expected size of this component in pixels. Calculating this value
     /// ahead of time makes it easier to implement a high-performance virtual
     /// renderer without resorting to weird tricks, _but_ checking that this
     /// hint is correct is nearly as expensive. So, we only generate the
     /// validation code in debug builds.
     pub size_hint: f64,
-    pub children: Children,
 
-    #[cfg(debug_assertions)]
+    /// Should we measure the child sizes or just rely on the hint? This
+    /// option may be enabled during debugging to validation render optimization
+    /// via [`Self::size_hint`], but will faile tests due to the extra DOM
+    /// structure it emits.
+    #[prop_or_default]
+    pub is_debug_mode: bool,
+
+    /// Communicate the panel size to virtual parent
     #[prop_or_default]
     measured_size: Rc<Cell<Option<f64>>>,
 }
 
 impl ScrollPanelItemProps {
-    #[cfg(debug_assertions)]
-    pub fn get_size(&self) -> f64 {
-        self.measured_size.get().unwrap_or(self.size_hint)
-    }
-
-    #[cfg(not(debug_assertions))]
-    pub fn get_size(&self) -> f64 {
-        self.size_hint
+    pub(crate) fn get_size(&self) -> f64 {
+        if self.is_debug_mode {
+            self.measured_size.get().unwrap_or(self.size_hint)
+        } else {
+            self.size_hint
+        }
     }
 }
 
-#[cfg(debug_assertions)]
 pub struct ScrollPanelItem {
     node: NodeRef,
 }
 
-#[cfg(not(debug_assertions))]
-pub struct ScrollPanelItem {}
-
 impl Component for ScrollPanelItem {
     type Message = ();
     type Properties = ScrollPanelItemProps;
 
-    #[cfg(debug_assertions)]
     fn create(ctx: &Context<Self>) -> Self {
-        ctx.props().measured_size.set(Some(ctx.props().size_hint));
+        if ctx.props().is_debug_mode {
+            ctx.props().measured_size.set(Some(ctx.props().size_hint));
+        }
+
         Self {
             node: NodeRef::default(),
         }
     }
 
-    #[cfg(not(debug_assertions))]
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {}
-    }
-
-    #[cfg(debug_assertions)]
     fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
-            <div class="debug-size-wrapper" style="display: flow-root" ref={self.node.clone()}>
-                { for ctx.props().children.iter() }
-            </div>
+            if ctx.props().is_debug_mode {
+                <div class="debug-size-wrapper" style="display: flow-root" ref={self.node.clone()}>
+                    for child in ctx.props().children.iter() {
+                        { child }
+                    }
+                </div>
+            } else {
+                for child in ctx.props().children.iter() {
+                    { child }
+                }
+            }
         }
     }
 
-    #[cfg(not(debug_assertions))]
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        html! { { for ctx.props().children.iter() } }
-    }
-
-    #[cfg(debug_assertions)]
     fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
-        ctx.props().measured_size.set(Some(ctx.props().size_hint));
+        if ctx.props().is_debug_mode {
+            ctx.props().measured_size.set(Some(ctx.props().size_hint));
+        }
+
         true
     }
 
-    #[cfg(debug_assertions)]
     fn rendered(&mut self, ctx: &Context<Self>, first_render: bool) {
-        if first_render {
+        if first_render && ctx.props().is_debug_mode {
             let elem = self.node.cast::<web_sys::HtmlElement>().unwrap();
             let new_height = elem.get_bounding_client_rect().height();
             if ctx.props().measured_size.get() != Some(new_height) {

package/src/rust/components/containers/select.rs

@@ -17,26 +17,6 @@ use std::rc::Rc;
 use wasm_bindgen::JsCast;
 use yew::prelude::*;
 
-#[derive(Clone, Eq, PartialEq)]
-pub enum SelectItem<T> {
-    Option(T),
-    OptGroup(Cow<'static, str>, Vec<T>),
-}
-
-impl<T: Display> SelectItem<T> {
-    pub fn name<'a>(&self) -> Cow<'a, str> {
-        match self {
-            Self::Option(x) => format!("{x}").into(),
-            Self::OptGroup(x, _) => x.clone(),
-        }
-    }
-}
-
-pub enum SelectMsg {
-    SelectedChanged(i32),
-    KeyboardInput(bool, i32, String),
-}
-
 #[derive(Properties)]
 pub struct SelectProps<T>
 where
@@ -71,6 +51,11 @@ where
     }
 }
 
+pub enum SelectMsg {
+    SelectedChanged(i32),
+    KeyboardInput(bool, i32, String),
+}
+
 /// A `<select>` HTML elements, lifted to support parameterization over a set of
 /// values of a type `T`.
 pub struct Select<T>
@@ -81,23 +66,6 @@ where
     selected: T,
 }
 
-fn find_nth<T>(mut count: i32, items: &[SelectItem<T>]) -> Option<&T> {
-    for ref item in items.iter() {
-        match item {
-            SelectItem::Option(_) if count > 0 => {
-                count -= 1;
-            },
-            SelectItem::OptGroup(_, items) if count >= items.len() as i32 => {
-                count -= items.len() as i32;
-            },
-            SelectItem::OptGroup(_, items) => return items.get(count as usize),
-            SelectItem::Option(x) => return Some(x),
-        }
-    }
-
-    None
-}
-
 impl<T> Component for Select<T>
 where
     T: Clone + Display + PartialEq + 'static,
@@ -132,12 +100,12 @@ where
                             ctx.props().on_select.emit(self.selected.clone());
                             return true;
                         }
-                    } else if code.as_str() == "ArrowDown"
-                        && let Some(x) = find_nth(idx + 1, &ctx.props().values)
-                    {
-                        self.selected = x.clone();
-                        ctx.props().on_select.emit(self.selected.clone());
-                        return true;
+                    } else if code.as_str() == "ArrowDown" {
+                        if let Some(x) = find_nth(idx + 1, &ctx.props().values) {
+                            self.selected = x.clone();
+                            ctx.props().on_select.emit(self.selected.clone());
+                            return true;
+                        }
                     }
                 }
 
@@ -259,7 +227,9 @@ where
 
         html! {
             if is_group_selected && ctx.props().label.is_some() {
-                <label>{ ctx.props().label.to_owned() }</label>
+                <label>
+                    { ctx.props().label.as_ref().map(|x| x.to_string()).unwrap_or_default() }
+                </label>
                 <div class={wrapper_class} data-value={value.clone()}>{ select }</div>
             } else {
                 <div class={wrapper_class} data-value={value}>{ select }</div>
@@ -267,3 +237,35 @@ where
         }
     }
 }
+
+#[derive(Clone, Eq, PartialEq)]
+pub enum SelectItem<T> {
+    Option(T),
+    OptGroup(Cow<'static, str>, Vec<T>),
+}
+
+impl<T: Display> SelectItem<T> {
+    pub fn name<'a>(&self) -> Cow<'a, str> {
+        match self {
+            Self::Option(x) => format!("{x}").into(),
+            Self::OptGroup(x, _) => x.clone(),
+        }
+    }
+}
+
+fn find_nth<T>(mut count: i32, items: &[SelectItem<T>]) -> Option<&T> {
+    for ref item in items.iter() {
+        match item {
+            SelectItem::Option(_) if count > 0 => {
+                count -= 1;
+            },
+            SelectItem::OptGroup(_, items) if count >= items.len() as i32 => {
+                count -= items.len() as i32;
+            },
+            SelectItem::OptGroup(_, items) => return items.get(count as usize),
+            SelectItem::Option(x) => return Some(x),
+        }
+    }
+
+    None
+}

package/src/rust/components/containers/sidebar.rs

@@ -13,10 +13,11 @@
 use perspective_client::clone;
 use web_sys::Element;
 use yew::{
-    AttrValue, Callback, Children, Html, Properties, function_component, html, use_effect_with,
-    use_node_ref, use_state_eq,
+    Callback, Children, Html, Properties, function_component, html, use_effect_with, use_node_ref,
+    use_state_eq,
 };
 
+use crate::components::containers::sidebar_close_button::SidebarCloseButton;
 use crate::components::editable_header::{EditableHeader, EditableHeaderProps};
 
 #[derive(PartialEq, Clone, Properties)]
@@ -70,20 +71,3 @@ pub fn Sidebar(p: &SidebarProps) -> Html {
         </div>
     }
 }
-
-#[derive(PartialEq, Clone, Properties)]
-pub struct SidebarCloseButtonProps {
-    pub on_close_sidebar: Callback<()>,
-    pub id: AttrValue,
-}
-
-#[function_component]
-pub fn SidebarCloseButton(p: &SidebarCloseButtonProps) -> Html {
-    let onclick = yew::use_callback(p.on_close_sidebar.clone(), |_, cb| cb.emit(()));
-    let id = &p.id;
-    html! {
-        <div {onclick} {id} class="sidebar_close_button">
-            <div class="sidebar_close_button_inner" />
-        </div>
-    }
-}

package/src/rust/components/{column_settings_sidebar/style_tab/symbol/symbol_config.rs → containers/sidebar_close_button.rs}

@@ -10,15 +10,21 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use std::collections::HashMap;
+use yew::{AttrValue, Callback, Html, Properties, function_component, html};
 
-use serde::{Deserialize, Serialize};
-
-use crate::components::containers::kvpair::KVPair;
-
-#[derive(Serialize, Deserialize)]
-pub struct SymbolConfig {
-    pub symbols: HashMap<String, String>,
+#[derive(PartialEq, Clone, Properties)]
+pub struct SidebarCloseButtonProps {
+    pub on_close_sidebar: Callback<()>,
+    pub id: AttrValue,
 }
 
-pub type SymbolKVPair = KVPair<Option<String>, String>;
+#[function_component]
+pub fn SidebarCloseButton(p: &SidebarCloseButtonProps) -> Html {
+    let onclick = yew::use_callback(p.on_close_sidebar.clone(), |_, cb| cb.emit(()));
+    let id = &p.id;
+    html! {
+        <div {onclick} {id} class="sidebar_close_button">
+            <div class="sidebar_close_button_inner" />
+        </div>
+    }
+}