@perspective-dev/viewer 4.0.1 → 4.1.0

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

@@ -12,7 +12,7 @@
 
 use std::cmp::max;
 
-use perspective_js::utils::global;
+use perspective_js::utils::{ApiResult, global};
 use wasm_bindgen::JsCast;
 use wasm_bindgen::prelude::*;
 use web_sys::HtmlElement;
@@ -20,173 +20,7 @@ use yew::html::Scope;
 use yew::prelude::*;
 
 use crate::components::style::LocalStyle;
-#[cfg(test)]
-use crate::utils::*;
-use crate::*;
-
-/// The state for the `Resizing` action, including the `MouseEvent` callbacks
-/// and panel starting dimensions.
-struct ResizingState {
-    mousemove: Closure<dyn Fn(MouseEvent)>,
-    mouseup: Closure<dyn Fn(MouseEvent)>,
-    cursor: String,
-    index: usize,
-    start: i32,
-    total: i32,
-    alt: i32,
-    orientation: Orientation,
-    reverse: bool,
-    body_style: web_sys::CssStyleDeclaration,
-    pointer_id: i32,
-    pointer_elem: HtmlElement,
-}
-
-impl Drop for ResizingState {
-    /// On `drop`, we must remove these event listeners from the document
-    /// `body`. Without this, the `Closure` objects would not leak, but the
-    /// document will continue to call them, causing runtime exceptions.
-    fn drop(&mut self) {
-        let result: ApiResult<()> = maybe! {
-            let mousemove = self.mousemove.as_ref().unchecked_ref();
-            global::body().remove_event_listener_with_callback("mousemove", mousemove)?;
-            let mouseup = self.mouseup.as_ref().unchecked_ref();
-            global::body().remove_event_listener_with_callback("mouseup", mouseup)?;
-            self.release_cursor()?;
-            Ok(())
-        };
-
-        result.expect("Drop failed")
-    }
-}
-
-/// The minimum size a split panel child can be, including when overridden via
-/// user drag/drop.
-const MINIMUM_SIZE: i32 = 8;
-
-/// When the instantiated, capture the initial dimensions and create the
-/// MouseEvent callbacks.
-impl ResizingState {
-    pub fn new(
-        index: usize,
-        client_offset: i32,
-        ctx: &Context<SplitPanel>,
-        first_elem: &HtmlElement,
-        pointer_id: i32,
-        pointer_elem: HtmlElement,
-    ) -> ApiResult<Self> {
-        let orientation = ctx.props().orientation;
-        let reverse = ctx.props().reverse;
-        let split_panel = ctx.link();
-        let total = match orientation {
-            Orientation::Horizontal => first_elem.offset_width(),
-            Orientation::Vertical => first_elem.offset_height(),
-        };
-
-        let alt = match orientation {
-            Orientation::Horizontal => first_elem.offset_height(),
-            Orientation::Vertical => first_elem.offset_width(),
-        };
-
-        let mouseup = Closure::new({
-            let cb = split_panel.callback(|_| SplitPanelMsg::StopResizing);
-            move |x| cb.emit(x)
-        });
-
-        let mousemove = Closure::new({
-            let cb = split_panel.callback(move |event: MouseEvent| {
-                SplitPanelMsg::MoveResizing(match orientation {
-                    Orientation::Horizontal => event.client_x(),
-                    Orientation::Vertical => event.client_y(),
-                })
-            });
-            move |x| cb.emit(x)
-        });
-
-        let mut state = Self {
-            index,
-            cursor: "".to_owned(),
-            start: client_offset,
-            orientation,
-            reverse,
-            total,
-            alt,
-            body_style: global::body().style(),
-            mouseup,
-            mousemove,
-            pointer_id,
-            pointer_elem,
-        };
-
-        state.capture_cursor()?;
-        state.register_listeners()?;
-        Ok(state)
-    }
-
-    fn get_offset(&self, client_offset: i32) -> i32 {
-        let delta = if self.reverse {
-            self.start - client_offset
-        } else {
-            client_offset - self.start
-        };
-
-        max(MINIMUM_SIZE, self.total + delta)
-    }
-
-    pub fn get_style(&self, client_offset: i32) -> Option<String> {
-        let offset = self.get_offset(client_offset);
-        Some(match self.orientation {
-            Orientation::Horizontal => {
-                format!("max-width:{offset}px;min-width:{offset}px;width:{offset}px")
-            },
-            Orientation::Vertical => {
-                format!("max-height:{offset}px;min-height:{offset}px;height:{offset}px")
-            },
-        })
-    }
-
-    pub fn get_dimensions(&self, client_offset: i32) -> (i32, i32) {
-        let offset = self.get_offset(client_offset);
-        match self.orientation {
-            Orientation::Horizontal => (std::cmp::max(MINIMUM_SIZE, offset), self.alt),
-            Orientation::Vertical => (self.alt, std::cmp::max(MINIMUM_SIZE, offset)),
-        }
-    }
-
-    /// Adds the event listeners, the corollary of `Drop`.
-    fn register_listeners(&self) -> ApiResult<()> {
-        let mousemove = self.mousemove.as_ref().unchecked_ref();
-        global::body().add_event_listener_with_callback("mousemove", mousemove)?;
-        let mouseup = self.mouseup.as_ref().unchecked_ref();
-        Ok(global::body().add_event_listener_with_callback("mouseup", mouseup)?)
-    }
-
-    /// Helper functions capture and release the global cursor while dragging is
-    /// occurring.
-    fn capture_cursor(&mut self) -> ApiResult<()> {
-        self.pointer_elem.set_pointer_capture(self.pointer_id)?;
-        self.cursor = self.body_style.get_property_value("cursor")?;
-        self.body_style
-            .set_property("cursor", match self.orientation {
-                Orientation::Horizontal => "col-resize",
-                Orientation::Vertical => "row-resize",
-            })?;
-
-        Ok(())
-    }
-
-    /// " but for release
-    fn release_cursor(&self) -> ApiResult<()> {
-        self.pointer_elem.release_pointer_capture(self.pointer_id)?;
-        Ok(self.body_style.set_property("cursor", &self.cursor)?)
-    }
-}
-
-#[derive(Clone, Copy, Default, Eq, PartialEq)]
-pub enum Orientation {
-    #[default]
-    Horizontal,
-    Vertical,
-}
+use crate::{css, maybe};
 
 #[derive(Properties, Default)]
 pub struct SplitPanelProps {
@@ -220,10 +54,6 @@ pub struct SplitPanelProps {
     #[prop_or_default]
     pub on_resize_finished: Option<Callback<()>>,
 
-    #[cfg(test)]
-    #[prop_or_default]
-    pub weak_link: WeakScope<SplitPanel>,
-
     #[prop_or_default]
     pub initial_size: Option<i32>,
 }
@@ -278,7 +108,6 @@ impl Component for SplitPanel {
 
     fn create(ctx: &Context<Self>) -> Self {
         assert!(ctx.props().validate());
-        enable_weak_link_test!(ctx.props(), ctx.link());
         let len = ctx.props().children.len();
         // cant just use vec![Default::default(); len] as it would
         // use the same underlying NodeRef for each element.
@@ -351,7 +180,14 @@ impl Component for SplitPanel {
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let mut iter = ctx.props().children.iter();
+        let iter = ctx
+            .props()
+            .children
+            .iter()
+            .filter(|x| !ctx.props().skip_empty || x != &html! { <></> })
+            .enumerate()
+            .collect::<Vec<_>>();
+
         let orientation = ctx.props().orientation;
         let mut classes = classes!("split-panel");
         if orientation == Orientation::Vertical {
@@ -362,38 +198,50 @@ impl Component for SplitPanel {
             classes.push("orient-reverse");
         }
 
-        let head = iter.next().unwrap();
-
-        let tail = iter
-            .filter(|x| !ctx.props().skip_empty || x != &html! { <></> })
-            .enumerate()
-            .map(|(i, x)| {
-                html! {
-                    <key={i + 2}>
-                        <SplitPanelDivider
-                            {i}
-                            orientation={ctx.props().orientation}
-                            link={ctx.link().clone()}
-                        />
-                        if i == ctx.props().children.len() - 2 { { x } } else {
+        let count = iter.len();
+        let contents = html! {
+            <>
+                <LocalStyle key=0 href={css!("containers/split-panel")} />
+                for (i, x) in iter {
+                    if i == 0 {
+                        if count == 1 {
+                            <key={i}>
+                                {x}
+                            </>
+                        } else {
                             <SplitPanelChild
-                                style={self.styles[i + 1].clone()}
-                                ref_={self.refs[i + 1].clone()}
+                                key=0
+                                style={self.styles[i].clone()}
+                                ref_={self.refs[i].clone()}
                             >
                                 { x }
                             </SplitPanelChild>
                         }
-                    </>
+                    } else if i == count - 1 {
+                        <key={i}>
+                            <SplitPanelDivider
+                                i={i - 1}
+                                orientation={ctx.props().orientation}
+                                link={ctx.link().clone()}
+                            />
+                            { x }
+                        </>
+                    } else {
+                        <key={i}>
+                            <SplitPanelDivider
+                                i={i - 1}
+                                orientation={ctx.props().orientation}
+                                link={ctx.link().clone()}
+                            />
+                            <SplitPanelChild
+                                style={self.styles[i].clone()}
+                                ref_={self.refs[i].clone()}
+                            >
+                                { x }
+                            </SplitPanelChild>
+                        </>
+                    }
                 }
-            });
-
-        let contents = html! {
-            <>
-                <LocalStyle key=0 href={css!("containers/split-panel")} />
-                <SplitPanelChild key=1 style={self.styles[0].clone()} ref_={self.refs[0].clone()}>
-                    { head }
-                </SplitPanelChild>
-                { for tail }
             </>
         };
 
@@ -406,6 +254,13 @@ impl Component for SplitPanel {
     }
 }
 
+#[derive(Clone, Copy, Default, Eq, PartialEq)]
+pub enum Orientation {
+    #[default]
+    Horizontal,
+    Vertical,
+}
+
 #[derive(Properties)]
 struct SplitPanelDividerProps {
     i: usize,
@@ -481,3 +336,160 @@ fn split_panel_child(props: &SplitPanelChildProps) -> Html {
         </div>
     }
 }
+
+/// The state for the `Resizing` action, including the `MouseEvent` callbacks
+/// and panel starting dimensions.
+struct ResizingState {
+    mousemove: Closure<dyn Fn(MouseEvent)>,
+    mouseup: Closure<dyn Fn(MouseEvent)>,
+    cursor: String,
+    index: usize,
+    start: i32,
+    total: i32,
+    alt: i32,
+    orientation: Orientation,
+    reverse: bool,
+    body_style: web_sys::CssStyleDeclaration,
+    pointer_id: i32,
+    pointer_elem: HtmlElement,
+}
+
+impl Drop for ResizingState {
+    /// On `drop`, we must remove these event listeners from the document
+    /// `body`. Without this, the `Closure` objects would not leak, but the
+    /// document will continue to call them, causing runtime exceptions.
+    fn drop(&mut self) {
+        let result: ApiResult<()> = maybe! {
+            let mousemove = self.mousemove.as_ref().unchecked_ref();
+            global::body().remove_event_listener_with_callback("mousemove", mousemove)?;
+            let mouseup = self.mouseup.as_ref().unchecked_ref();
+            global::body().remove_event_listener_with_callback("mouseup", mouseup)?;
+            self.release_cursor()?;
+            Ok(())
+        };
+
+        result.expect("Drop failed")
+    }
+}
+
+/// The minimum size a split panel child can be, including when overridden via
+/// user drag/drop.
+const MINIMUM_SIZE: i32 = 8;
+
+/// When the instantiated, capture the initial dimensions and create the
+/// MouseEvent callbacks.
+impl ResizingState {
+    pub fn new(
+        index: usize,
+        client_offset: i32,
+        ctx: &Context<SplitPanel>,
+        first_elem: &HtmlElement,
+        pointer_id: i32,
+        pointer_elem: HtmlElement,
+    ) -> ApiResult<Self> {
+        let orientation = ctx.props().orientation;
+        let reverse = ctx.props().reverse;
+        let split_panel = ctx.link();
+        let total = match orientation {
+            Orientation::Horizontal => first_elem.offset_width(),
+            Orientation::Vertical => first_elem.offset_height(),
+        };
+
+        let alt = match orientation {
+            Orientation::Horizontal => first_elem.offset_height(),
+            Orientation::Vertical => first_elem.offset_width(),
+        };
+
+        let mouseup = Closure::new({
+            let cb = split_panel.callback(|_| SplitPanelMsg::StopResizing);
+            move |x| cb.emit(x)
+        });
+
+        let mousemove = Closure::new({
+            let cb = split_panel.callback(move |event: MouseEvent| {
+                SplitPanelMsg::MoveResizing(match orientation {
+                    Orientation::Horizontal => event.client_x(),
+                    Orientation::Vertical => event.client_y(),
+                })
+            });
+            move |x| cb.emit(x)
+        });
+
+        let mut state = Self {
+            index,
+            cursor: "".to_owned(),
+            start: client_offset,
+            orientation,
+            reverse,
+            total,
+            alt,
+            body_style: global::body().style(),
+            mouseup,
+            mousemove,
+            pointer_id,
+            pointer_elem,
+        };
+
+        state.capture_cursor()?;
+        state.register_listeners()?;
+        Ok(state)
+    }
+
+    fn get_offset(&self, client_offset: i32) -> i32 {
+        let delta = if self.reverse {
+            self.start - client_offset
+        } else {
+            client_offset - self.start
+        };
+
+        max(MINIMUM_SIZE, self.total + delta)
+    }
+
+    pub fn get_style(&self, client_offset: i32) -> Option<String> {
+        let offset = self.get_offset(client_offset);
+        Some(match self.orientation {
+            Orientation::Horizontal => {
+                format!("max-width:{offset}px;min-width:{offset}px;width:{offset}px")
+            },
+            Orientation::Vertical => {
+                format!("max-height:{offset}px;min-height:{offset}px;height:{offset}px")
+            },
+        })
+    }
+
+    pub fn get_dimensions(&self, client_offset: i32) -> (i32, i32) {
+        let offset = self.get_offset(client_offset);
+        match self.orientation {
+            Orientation::Horizontal => (std::cmp::max(MINIMUM_SIZE, offset), self.alt),
+            Orientation::Vertical => (self.alt, std::cmp::max(MINIMUM_SIZE, offset)),
+        }
+    }
+
+    /// Adds the event listeners, the corollary of `Drop`.
+    fn register_listeners(&self) -> ApiResult<()> {
+        let mousemove = self.mousemove.as_ref().unchecked_ref();
+        global::body().add_event_listener_with_callback("mousemove", mousemove)?;
+        let mouseup = self.mouseup.as_ref().unchecked_ref();
+        Ok(global::body().add_event_listener_with_callback("mouseup", mouseup)?)
+    }
+
+    /// Helper functions capture and release the global cursor while dragging is
+    /// occurring.
+    fn capture_cursor(&mut self) -> ApiResult<()> {
+        self.pointer_elem.set_pointer_capture(self.pointer_id)?;
+        self.cursor = self.body_style.get_property_value("cursor")?;
+        self.body_style
+            .set_property("cursor", match self.orientation {
+                Orientation::Horizontal => "col-resize",
+                Orientation::Vertical => "row-resize",
+            })?;
+
+        Ok(())
+    }
+
+    /// " but for release
+    fn release_cursor(&self) -> ApiResult<()> {
+        self.pointer_elem.release_pointer_capture(self.pointer_id)?;
+        Ok(self.body_style.set_property("cursor", &self.cursor)?)
+    }
+}

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

@@ -14,20 +14,20 @@ use yew::{Callback, Children, Component, Html, Properties, classes, html};
 
 use crate::components::style::LocalStyle;
 use crate::css;
-
-pub trait Tab: PartialEq + std::fmt::Display + Clone + Default + 'static {}
-
-impl Tab for String {}
-
-impl Tab for &'static str {}
+use crate::presentation::ColumnTab;
 
 #[derive(Properties, Debug, PartialEq)]
-pub struct TabListProps<T: Tab> {
-    // all possible tabs
+pub struct TabListProps<T: ColumnTab> {
+    /// All tabs
     pub tabs: Vec<T>,
+
+    /// Fires when the selected tab changes in the UI.
     pub on_tab_change: Callback<(usize, T)>,
+
+    // Which tab is selected.
     pub selected_tab: Option<usize>,
-    // the curently instantiated tabs
+
+    // The currently instantiated tabs.
     pub children: Children,
 }
 
@@ -35,12 +35,12 @@ pub enum TabListMsg {
     SetSelected(usize),
 }
 
-pub struct TabList<T: Tab> {
+pub struct TabList<T: ColumnTab> {
     t: std::marker::PhantomData<T>,
     selected_idx: usize,
 }
 
-impl<T: Tab> Component for TabList<T> {
+impl<T: ColumnTab> Component for TabList<T> {
     type Message = TabListMsg;
     type Properties = TabListProps<T>;
 

package/src/rust/components/copy_dropdown.rs

@@ -21,37 +21,49 @@ use crate::model::*;
 use crate::renderer::*;
 use crate::utils::*;
 
-pub type CopyDropDownMenuMsg = DropDownMenuMsg;
-pub type CopyDropDownMenuItem = DropDownMenuItem<ExportFile>;
+type CopyDropDownMenuItem = DropDownMenuItem<ExportFile>;
 
 #[derive(Properties, PartialEq)]
 pub struct CopyDropDownMenuProps {
-    pub renderer: Renderer,
     pub callback: Callback<ExportFile>,
     pub root: web_sys::HtmlElement,
+    pub renderer: Renderer,
 
     #[prop_or_default]
     weak_link: WeakScope<CopyDropDownMenu>,
 }
 
-pub struct CopyDropDownMenu {
-    _sub: Subscription,
-}
-
 impl ModalLink<CopyDropDownMenu> for CopyDropDownMenuProps {
     fn weak_link(&self) -> &'_ WeakScope<CopyDropDownMenu> {
         &self.weak_link
     }
 }
 
+pub struct CopyDropDownMenu {
+    _sub: Subscription,
+}
+
 impl Component for CopyDropDownMenu {
-    type Message = CopyDropDownMenuMsg;
+    type Message = ();
     type Properties = CopyDropDownMenuProps;
 
+    fn create(ctx: &Context<Self>) -> Self {
+        ctx.set_modal_link();
+        let _sub = ctx
+            .props()
+            .renderer
+            .plugin_changed
+            .add_listener(ctx.link().callback(|_| ()));
+
+        Self { _sub }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
+        true
+    }
+
     fn view(&self, ctx: &Context<Self>) -> yew::virtual_dom::VNode {
         let plugin = ctx.props().renderer.get_active_plugin().unwrap();
-        // let has_render = js_sys::Reflect::has(&plugin,
-        // js_intern::js_intern!("render")).unwrap();
         let is_chart = plugin.name().as_str() != "Datagrid";
         let has_selection = ctx.props().renderer.get_selection().is_some();
         html! {
@@ -63,21 +75,6 @@ impl Component for CopyDropDownMenu {
             </StyleProvider>
         }
     }
-
-    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
-        true
-    }
-
-    fn create(ctx: &Context<Self>) -> Self {
-        ctx.set_modal_link();
-        let _sub = ctx
-            .props()
-            .renderer
-            .plugin_changed
-            .add_listener(ctx.link().callback(|_| ()));
-
-        Self { _sub }
-    }
 }
 
 fn get_menu_items(is_chart: bool, has_selection: bool) -> Vec<CopyDropDownMenuItem> {

package/src/rust/components/datetime_column_style/custom.rs

@@ -15,23 +15,11 @@ use std::rc::Rc;
 use yew::prelude::*;
 
 use crate::components::form::number_field::NumberField;
-use crate::components::form::select_field::SelectValueField;
+use crate::components::form::select_value_field::SelectValueField;
 use crate::components::modal::{ModalLink, SetModalLink};
 use crate::config::*;
 use crate::utils::WeakScope;
 
-pub enum DatetimeStyleCustomMsg {
-    FractionalSeconds(Option<f64>),
-    Year(CustomDatetimeFormat),
-    Month(CustomDatetimeFormat),
-    Day(CustomDatetimeFormat),
-    Weekday(CustomDatetimeFormat),
-    Hour(CustomDatetimeFormat),
-    Minute(CustomDatetimeFormat),
-    Second(CustomDatetimeFormat),
-    Hour12(bool),
-}
-
 #[derive(Properties)]
 pub struct DatetimeStyleCustomProps {
     pub enable_time_config: bool,
@@ -57,18 +45,24 @@ impl PartialEq for DatetimeStyleCustomProps {
     }
 }
 
+pub enum DatetimeStyleCustomMsg {
+    FractionalSeconds(Option<f64>),
+    Year(CustomDatetimeFormat),
+    Month(CustomDatetimeFormat),
+    Day(CustomDatetimeFormat),
+    Weekday(CustomDatetimeFormat),
+    Hour(CustomDatetimeFormat),
+    Minute(CustomDatetimeFormat),
+    Second(CustomDatetimeFormat),
+    Hour12(bool),
+}
+
 /// The custom variation of the options parameter for `Intl.DatetimeFormat`.
 /// Complement to `DatetimeStyleSimple`.
 pub struct DatetimeStyleCustom {
     config: CustomDatetimeStyleConfig,
 }
 
-impl DatetimeStyleCustom {
-    fn dispatch_config(&self, ctx: &Context<Self>) {
-        ctx.props().on_change.emit(self.config.clone());
-    }
-}
-
 impl Component for DatetimeStyleCustom {
     type Message = DatetimeStyleCustomMsg;
     type Properties = DatetimeStyleCustomProps;
@@ -220,3 +214,9 @@ impl Component for DatetimeStyleCustom {
         }
     }
 }
+
+impl DatetimeStyleCustom {
+    fn dispatch_config(&self, ctx: &Context<Self>) {
+        ctx.props().on_change.emit(self.config.clone());
+    }
+}