@perspective-dev/viewer 4.3.0 → 4.4.0

package/src/rust/components/column_settings_sidebar/style_tab.rs

@@ -26,18 +26,30 @@ use crate::components::number_column_style::NumberColumnStyle;
 use crate::components::string_column_style::StringColumnStyle;
 use crate::components::style_controls::CustomNumberFormat;
 use crate::custom_events::CustomEvents;
-use crate::model::*;
 use crate::presentation::Presentation;
 use crate::renderer::Renderer;
 use crate::session::Session;
-use crate::*;
+use crate::tasks::{
+    HasCustomEvents, HasPresentation, HasRenderer, HasSession, SendPluginConfig,
+    get_column_style_control_options,
+};
+use crate::utils::PtrEqRc;
 
-#[derive(Clone, PartialEq, Properties, PerspectiveProperties!)]
+#[derive(Clone, PartialEq, Properties)]
 pub struct StyleTabProps {
     pub ty: Option<ColumnType>,
     pub column_name: String,
     pub group_by_depth: u32,
 
+    /// View config snapshot — threaded from parent.
+    pub view_config: PtrEqRc<perspective_client::config::ViewConfig>,
+
+    /// Session metadata snapshot — threaded from parent.
+    pub metadata: PtrEqRc<crate::session::SessionMetadata>,
+
+    /// Selected theme name, threaded for PortalModal consumers.
+    pub selected_theme: Option<String>,
+
     // State
     pub custom_events: CustomEvents,
     pub presentation: Presentation,
@@ -45,123 +57,152 @@ pub struct StyleTabProps {
     pub session: Session,
 }
 
+impl HasCustomEvents for StyleTabProps {
+    fn custom_events(&self) -> &CustomEvents {
+        &self.custom_events
+    }
+}
+
+impl HasPresentation for StyleTabProps {
+    fn presentation(&self) -> &Presentation {
+        &self.presentation
+    }
+}
+
+impl HasRenderer for StyleTabProps {
+    fn renderer(&self) -> &Renderer {
+        &self.renderer
+    }
+}
+
+impl HasSession for StyleTabProps {
+    fn session(&self) -> &Session {
+        &self.session
+    }
+}
+
 #[function_component]
 pub fn StyleTab(props: &StyleTabProps) -> Html {
-    let config = props.presentation().get_columns_config(&props.column_name);
+    let config = props.presentation.get_columns_config(&props.column_name);
     let on_change = yew::use_callback(
-        (props.clone_state(), props.column_name.clone()),
+        (props.clone(), props.column_name.clone()),
         |config, (state, column_name)| {
             state.send_plugin_config(column_name, config);
         },
     );
 
-    let components = props
-        .get_column_style_control_options(&props.column_name)
-        .map(|opts| {
-            let mut components = vec![];
-            if !props.session().get_view_config().group_by.is_empty() {
-                let aggregate_depth = config.as_ref().map(|x| x.aggregate_depth as f64);
-                components.push(("Aggregate Depth", html! {
-                    <AggregateDepthSelector
-                        group_by_depth={props.group_by_depth}
-                        on_change={on_change.clone()}
-                        column_name={props.column_name.to_owned()}
-                        value={aggregate_depth.unwrap_or_default() as u32}
-                    />
-                }));
-            }
-
-            if let Some(default_config) = opts.datagrid_number_style {
-                let config = config
-                    .as_ref()
-                    .map(|config| config.datagrid_number_style.clone());
-
-                components.push(("Number Styles", html! {
-                    <NumberColumnStyle
-                        column_name={props.column_name.clone()}
-                        {config}
-                        {default_config}
-                        on_change={on_change.clone()}
-                        session={props.session()}
-                    />
-                }));
-            }
-            if let Some(default_config) = opts.datagrid_string_style {
-                let config = config
-                    .as_ref()
-                    .map(|config| config.datagrid_string_style.clone());
-
-                components.push(("String Styles", html! {
-                    <StringColumnStyle {config} {default_config} on_change={on_change.clone()} />
-                }));
-            }
-
-            if let Some(default_config) = opts.datagrid_datetime_style {
-                let config = config
-                    .as_ref()
-                    .map(|config| config.datagrid_datetime_style.clone());
-
-                let enable_time_config = props.ty.unwrap() == ColumnType::Datetime;
-                components.push(("Datetime Styles", html! {
-                    <DatetimeColumnStyle
-                        {enable_time_config}
-                        {config}
-                        {default_config}
-                        on_change={on_change.clone()}
-                    />
-                }))
-            }
-
-            if let Some(default_config) = opts.symbols {
-                let restored_config = config
-                    .as_ref()
-                    .map(|config| config.symbols.clone())
-                    .unwrap_or_default();
-
-                components.push(("Symbols", html! {
-                    <SymbolStyle
-                        {default_config}
-                        {restored_config}
-                        on_change={on_change.clone()}
-                        column_name={props.column_name.clone()}
-                        session={props.session().clone()}
-                    />
-                }))
-            }
-
-            if opts.number_string_format.unwrap_or_default() {
-                let restored_config = config
-                    .as_ref()
-                    .and_then(|config| config.number_format.clone())
-                    .unwrap_or_default();
-
-                components.push(("Number Formatting", html! {
-                    <CustomNumberFormat
-                        {restored_config}
-                        on_change={on_change.clone()}
-                        view_type={props.ty.unwrap()}
-                        column_name={props.column_name.clone()}
-                    />
-                }));
-            }
-
-            components
-                .into_iter()
-                .map(|(_title, component)| {
-                    html! {
-                        <fieldset class="style-control">
-                            // <legend >{ title }</legend>
-                            { component }
-                        </fieldset>
-                    }
-                })
-                .collect_vec()
-        })
-        .unwrap_or_else(|error| {
-            vec![html! {
-                <Stub message="Could not render column styles" error={Some(format!("{error:?}"))} />
-            }]
-        });
+    let components = get_column_style_control_options(
+        &props.renderer,
+        &props.view_config,
+        &props.metadata,
+        &props.column_name,
+    )
+    .map(|opts| {
+        let mut components = vec![];
+        if !props.view_config.group_by.is_empty() {
+            let aggregate_depth = config.as_ref().map(|x| x.aggregate_depth as f64);
+            components.push(("Aggregate Depth", html! {
+                <AggregateDepthSelector
+                    group_by_depth={props.group_by_depth}
+                    on_change={on_change.clone()}
+                    column_name={props.column_name.to_owned()}
+                    value={aggregate_depth.unwrap_or_default() as u32}
+                />
+            }));
+        }
+
+        if let Some(default_config) = opts.datagrid_number_style {
+            let config = config
+                .as_ref()
+                .map(|config| config.datagrid_number_style.clone());
+
+            components.push(("Number Styles", html! {
+                <NumberColumnStyle
+                    column_name={props.column_name.clone()}
+                    {config}
+                    {default_config}
+                    on_change={on_change.clone()}
+                    session={props.session.clone()}
+                />
+            }));
+        }
+        if let Some(default_config) = opts.datagrid_string_style {
+            let config = config
+                .as_ref()
+                .map(|config| config.datagrid_string_style.clone());
+
+            components.push(("String Styles", html! {
+                <StringColumnStyle {config} {default_config} on_change={on_change.clone()} />
+            }));
+        }
+
+        if let Some(default_config) = opts.datagrid_datetime_style {
+            let config = config
+                .as_ref()
+                .map(|config| config.datagrid_datetime_style.clone());
+
+            let enable_time_config = props.ty.unwrap() == ColumnType::Datetime;
+            components.push(("Datetime Styles", html! {
+                <DatetimeColumnStyle
+                    {enable_time_config}
+                    {config}
+                    {default_config}
+                    on_change={on_change.clone()}
+                />
+            }))
+        }
+
+        if let Some(default_config) = opts.symbols {
+            let restored_config = config
+                .as_ref()
+                .map(|config| config.symbols.clone())
+                .unwrap_or_default();
+
+            components.push(("Symbols", html! {
+                <SymbolStyle
+                    {default_config}
+                    {restored_config}
+                    on_change={on_change.clone()}
+                    column_name={props.column_name.clone()}
+                    selected_theme={props.selected_theme.clone()}
+                    session={props.session.clone()}
+                />
+            }))
+        }
+
+        if opts.number_string_format.unwrap_or_default() {
+            let restored_config = config
+                .as_ref()
+                .and_then(|config| config.number_format.clone())
+                .unwrap_or_default();
+
+            components.push(("Number Formatting", html! {
+                <CustomNumberFormat
+                    {restored_config}
+                    on_change={on_change.clone()}
+                    view_type={props.ty.unwrap()}
+                    column_name={props.column_name.clone()}
+                />
+            }));
+        }
+
+        components
+            .into_iter()
+            .map(|(_title, component)| {
+                html! {
+                    <fieldset class="style-control">
+                        // <legend >{ title }</legend>
+                        { component }
+                    </fieldset>
+                }
+            })
+            .collect_vec()
+    })
+    .unwrap_or_else(|error| {
+        vec![html! {
+            <Stub message="Could not render column styles" error={Some(format!("{error:?}"))} />
+        }]
+    });
 
     html! {
         <div id="style-tab">

package/src/rust/components/column_settings_sidebar.rs

@@ -18,7 +18,7 @@ use std::rc::Rc;
 
 use derivative::Derivative;
 use itertools::Itertools;
-use perspective_client::config::{ColumnType, Expression};
+use perspective_client::config::{ColumnType, Expression, ViewConfig};
 use perspective_client::utils::PerspectiveResultExt;
 use yew::{Callback, Component, Html, Properties, html, props};
 
@@ -34,14 +34,17 @@ use crate::components::expression_editor::ExpressionEditorProps;
 use crate::components::style::LocalStyle;
 use crate::components::type_icon::TypeIconType;
 use crate::custom_events::CustomEvents;
-use crate::model::*;
 use crate::presentation::{ColumnLocator, ColumnSettingsTab, Presentation};
 use crate::renderer::Renderer;
-use crate::session::Session;
-use crate::utils::*;
+use crate::session::{Session, SessionMetadataRc};
+use crate::tasks::{
+    EditExpression, HasCustomEvents, HasPresentation, HasRenderer, HasSession,
+    can_render_column_styles, locator_name_or_default, locator_view_type,
+};
+use crate::utils::PtrEqRc;
 use crate::*;
 
-#[derive(Clone, Derivative, Properties, PerspectiveProperties!)]
+#[derive(Clone, Derivative, Properties)]
 #[derivative(Debug)]
 pub struct ColumnSettingsPanelProps {
     pub selected_column: ColumnLocator,
@@ -50,6 +53,20 @@ pub struct ColumnSettingsPanelProps {
     pub width_override: Option<i32>,
     pub on_select_tab: Callback<ColumnSettingsTab>,
 
+    /// Active plugin name threaded as a value prop so that plugin changes
+    /// trigger re-initialization via `changed()` rather than a PubSub
+    /// `render_limits_changed` subscription.
+    pub plugin_name: Option<String>,
+
+    /// Session metadata snapshot — threaded from `SessionProps`.
+    pub metadata: SessionMetadataRc,
+
+    /// View config snapshot — threaded from `SessionProps`.
+    pub view_config: PtrEqRc<ViewConfig>,
+
+    /// Selected theme name, threaded for PortalModal consumers.
+    pub selected_theme: Option<String>,
+
     // State
     #[derivative(Debug = "ignore")]
     pub custom_events: CustomEvents,
@@ -66,7 +83,36 @@ pub struct ColumnSettingsPanelProps {
 
 impl PartialEq for ColumnSettingsPanelProps {
     fn eq(&self, other: &Self) -> bool {
-        self.selected_column == other.selected_column && self.selected_tab == other.selected_tab
+        self.selected_column == other.selected_column
+            && self.selected_tab == other.selected_tab
+            && self.plugin_name == other.plugin_name
+            && self.metadata == other.metadata
+            && self.view_config == other.view_config
+            && self.selected_theme == other.selected_theme
+    }
+}
+
+impl HasCustomEvents for ColumnSettingsPanelProps {
+    fn custom_events(&self) -> &CustomEvents {
+        &self.custom_events
+    }
+}
+
+impl HasPresentation for ColumnSettingsPanelProps {
+    fn presentation(&self) -> &Presentation {
+        &self.presentation
+    }
+}
+
+impl HasRenderer for ColumnSettingsPanelProps {
+    fn renderer(&self) -> &Renderer {
+        &self.renderer
+    }
+}
+
+impl HasSession for ColumnSettingsPanelProps {
+    fn session(&self) -> &Session {
+        &self.session
     }
 }
 
@@ -80,7 +126,6 @@ pub enum ColumnSettingsPanelMsg {
     OnSaveAttributes(()),
     OnResetAttributes(()),
     OnDelete(()),
-    SessionUpdated(bool),
 }
 
 #[derive(Derivative)]
@@ -102,9 +147,6 @@ pub struct ColumnSettingsPanel {
     save_count: u8,
     save_enabled: bool,
     tabs: Vec<ColumnSettingsTab>,
-
-    #[derivative(Debug = "ignore")]
-    _session_sub: Option<Subscription>,
 }
 
 impl Component for ColumnSettingsPanel {
@@ -112,18 +154,7 @@ impl Component for ColumnSettingsPanel {
     type Properties = ColumnSettingsPanelProps;
 
     fn create(ctx: &yew::prelude::Context<Self>) -> Self {
-        let session_cb = ctx
-            .link()
-            .callback(|(is_update, _)| ColumnSettingsPanelMsg::SessionUpdated(is_update));
-
-        let session_sub = ctx
-            .props()
-            .renderer
-            .render_limits_changed
-            .add_listener(session_cb);
-
         let mut this = Self {
-            _session_sub: Some(session_sub),
             initial_expr_value: Rc::default(),
             expr_value: Rc::default(),
             expr_valid: false,
@@ -233,14 +264,6 @@ impl Component for ColumnSettingsPanel {
                 ctx.props().on_close.emit(());
                 true
             },
-            ColumnSettingsPanelMsg::SessionUpdated(is_update) => {
-                if !is_update {
-                    self.initialize(ctx);
-                    true
-                } else {
-                    false
-                }
-            },
         }
     }
 
@@ -264,6 +287,7 @@ impl Component for ColumnSettingsPanel {
                     ColumnSettingsPanelMsg::SetHeaderValid(valid),
                 ]
             }),
+            metadata: ctx.props().metadata.clone(),
             session: &ctx.props().session
         });
 
@@ -274,13 +298,28 @@ impl Component for ColumnSettingsPanel {
             alias: ctx.props().selected_column.name().cloned(),
             disabled: !ctx.props().selected_column.is_expr(),
             reset_count: self.reset_count,
+            metadata: ctx.props().metadata.clone(),
+            selected_theme: ctx.props().selected_theme.clone(),
             session: &ctx.props().session
         });
 
         let disable_delete = ctx
             .props()
-            .session
-            .is_locator_active(&ctx.props().selected_column);
+            .selected_column
+            .name()
+            .map(|name| {
+                let config = &ctx.props().view_config;
+                config.columns.iter().any(|maybe_col| {
+                    maybe_col
+                        .as_ref()
+                        .map(|col| col == name)
+                        .unwrap_or_default()
+                }) || config.group_by.iter().any(|col| col == name)
+                    || config.split_by.iter().any(|col| col == name)
+                    || config.filter.iter().any(|col| col.column() == name)
+                    || config.sort.iter().any(|col| &col.0 == name)
+            })
+            .unwrap_or_default();
 
         let save_section = SaveSettingsProps {
             save_enabled: self.save_enabled,
@@ -302,15 +341,18 @@ impl Component for ColumnSettingsPanel {
             save_section,
         };
 
-        let style_tab = props!(StyleTabProps {
+        let style_tab = StyleTabProps {
             ty: self.maybe_ty,
             column_name: self.column_name.clone(),
-            group_by_depth: ctx.props().session.get_view_config().group_by.len() as u32,
-            custom_events: ctx.props().custom_events(),
-            presentation: ctx.props().presentation(),
-            renderer: ctx.props().renderer(),
-            session: ctx.props().session()
-        });
+            group_by_depth: ctx.props().view_config.group_by.len() as u32,
+            view_config: ctx.props().view_config.clone(),
+            metadata: ctx.props().metadata.clone(),
+            selected_theme: ctx.props().selected_theme.clone(),
+            custom_events: ctx.props().custom_events.clone(),
+            presentation: ctx.props().presentation.clone(),
+            renderer: ctx.props().renderer.clone(),
+            session: ctx.props().session.clone(),
+        };
 
         let tab_children = self.tabs.iter().map(|tab| match tab {
             ColumnSettingsTab::Attributes => html! { <AttributesTab ..attrs_tab.clone() /> },
@@ -356,15 +398,12 @@ impl ColumnSettingsPanel {
     }
 
     fn initialize(&mut self, ctx: &yew::prelude::Context<Self>) {
-        let column_name = ctx
-            .props()
-            .session
-            .locator_name_or_default(&ctx.props().selected_column);
+        let column_name =
+            locator_name_or_default(&ctx.props().metadata, &ctx.props().selected_column);
 
         let initial_expr_value = ctx
             .props()
-            .session
-            .metadata()
+            .metadata
             .get_expression_by_alias(&column_name)
             .unwrap_or_default();
 
@@ -372,19 +411,19 @@ impl ColumnSettingsPanel {
         let initial_header_value =
             (*initial_expr_value != column_name).then_some(column_name.clone());
 
-        let maybe_ty = ctx
-            .props()
-            .session()
-            .locator_view_type(&ctx.props().selected_column);
+        let maybe_ty = locator_view_type(&ctx.props().metadata, &ctx.props().selected_column);
 
         let tabs = {
             let mut tabs = vec![];
             let is_new_expr = ctx.props().selected_column.is_new_expr();
             let show_styles = !is_new_expr
-                && ctx
-                    .props()
-                    .can_render_column_styles(&column_name)
-                    .unwrap_or_default();
+                && can_render_column_styles(
+                    &ctx.props().renderer,
+                    &ctx.props().view_config,
+                    &ctx.props().metadata,
+                    &column_name,
+                )
+                .unwrap_or_default();
 
             if !is_new_expr && show_styles {
                 tabs.push(ColumnSettingsTab::Style);
@@ -414,7 +453,6 @@ impl ColumnSettingsPanel {
             on_input,
             on_save,
             on_validate,
-            _session_sub: self._session_sub.take(),
             ..*self
         }
     }

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

@@ -19,9 +19,9 @@ use web_sys::*;
 use yew::html::Scope;
 use yew::prelude::*;
 
+use crate::components::column_dropdown::ColumnDropDownElement;
 use crate::components::column_selector::{EmptyColumn, InPlaceColumn, InvalidColumn};
 use crate::components::type_icon::TypeIcon;
-use crate::custom_elements::ColumnDropDownElement;
 use crate::dragdrop::*;
 use crate::utils::DragTarget;
 
@@ -309,6 +309,7 @@ where
                             if ctx.props().disabled && ctx.props().is_dragover.is_none() {
                                 <div class="pivot-column">
                                     <div class="pivot-column-border pivot-column-total">
+                                        <span class="drag-handle icon" />
                                         <TypeIcon ty={ColumnType::Integer} />
                                         <span class="column_name">{ "TOTAL" }</span>
                                     </div>

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

@@ -24,7 +24,7 @@ pub fn SidebarCloseButton(p: &SidebarCloseButtonProps) -> Html {
     let id = &p.id;
     html! {
         <div {onclick} {id} class="sidebar_close_button">
-            <div class="sidebar_close_button_inner" />
+            <div class="sidebar_close_button_inner"><span class="icon" /></div>
         </div>
     }
 }

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

@@ -412,6 +412,7 @@ impl ResizingState {
                     Orientation::Vertical => event.client_y(),
                 })
             });
+
             move |x| cb.emit(x)
         });
 

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

@@ -95,7 +95,7 @@ impl<T: ColumnTab> Component for TabList<T> {
                         <div class="tab-border" />
                     </span>
                 </div>
-                <div id="format-tab" class="tab-content">
+                <div id="format-tab" class="tab-content scrollable">
                     { ctx.props().children.iter().nth(self.selected_idx) }
                 </div>
             </>

package/src/rust/components/copy_dropdown.rs

@@ -15,47 +15,25 @@ use std::rc::Rc;
 use yew::prelude::*;
 
 use super::containers::dropdown_menu::*;
-use super::modal::*;
-use super::style::StyleProvider;
-use crate::model::*;
 use crate::renderer::*;
-use crate::utils::*;
+use crate::tasks::*;
 
 type CopyDropDownMenuItem = DropDownMenuItem<ExportFile>;
 
 #[derive(Properties, PartialEq)]
 pub struct CopyDropDownMenuProps {
     pub callback: Callback<ExportFile>,
-    pub root: web_sys::HtmlElement,
     pub renderer: Renderer,
-
-    #[prop_or_default]
-    weak_link: WeakScope<CopyDropDownMenu>,
-}
-
-impl ModalLink<CopyDropDownMenu> for CopyDropDownMenuProps {
-    fn weak_link(&self) -> &'_ WeakScope<CopyDropDownMenu> {
-        &self.weak_link
-    }
 }
 
-pub struct CopyDropDownMenu {
-    _sub: Subscription,
-}
+pub struct CopyDropDownMenu {}
 
 impl Component for CopyDropDownMenu {
     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 create(_ctx: &Context<Self>) -> Self {
+        Self {}
     }
 
     fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
@@ -67,12 +45,13 @@ impl Component for CopyDropDownMenu {
         let is_chart = plugin.name().as_str() != "Datagrid";
         let has_selection = ctx.props().renderer.get_selection().is_some();
         html! {
-            <StyleProvider root={ctx.props().root.clone()}>
+            <>
+                <div id="test" />
                 <DropDownMenu<ExportFile>
                     values={Rc::new(get_menu_items(is_chart, has_selection))}
                     callback={&ctx.props().callback}
                 />
-            </StyleProvider>
+            </>
         }
     }
 }