@perspective-dev/viewer 4.2.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

@@ -14,12 +14,14 @@ use std::collections::HashSet;
 use std::marker::PhantomData;
 
 use derivative::Derivative;
+use perspective_client::proto::ColumnType;
 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::custom_elements::ColumnDropDownElement;
+use crate::components::type_icon::TypeIcon;
 use crate::dragdrop::*;
 use crate::utils::DragTarget;
 
@@ -32,12 +34,16 @@ where
     <U as Component>::Properties: DragDropListItemProps,
 {
     pub parent: Scope<T>,
+
     pub dragdrop: DragDrop,
     pub name: &'static str,
     pub column_dropdown: ColumnDropDownElement,
     pub exclude: HashSet<String>,
     pub children: ChildrenWithProps<U>,
 
+    #[prop_or_default]
+    pub disabled: bool,
+
     #[prop_or_default]
     pub is_dragover: Option<(
         usize,
@@ -59,6 +65,7 @@ where
             && self.children == other.children
             && self.allow_duplicates == other.allow_duplicates
             && self.is_dragover == other.is_dragover
+            && self.disabled == other.disabled
     }
 }
 
@@ -283,20 +290,35 @@ where
         let column_dropdown = ctx.props().column_dropdown.clone();
         let exclude = ctx.props().exclude.clone();
         let on_select = ctx.props().parent.callback(V::create);
+        let class = classes!("rrow");
+        let is_enabled = true;
+
         html! {
-            <div ref={&self.elem} class="rrow">
+            <div ref={&self.elem} {class}>
                 <div
                     id={ctx.props().name}
-                    ondragover={dragover}
-                    ondragenter={drag_container.dragenter}
-                    ondragleave={drag_container.dragleave}
+                    ondragover={is_enabled.then_some(dragover)}
+                    ondragenter={is_enabled.then_some(drag_container.dragenter)}
+                    ondragleave={is_enabled.then_some(drag_container.dragleave)}
                     ref={drag_container.noderef}
-                    ondrop={drop}
+                    ondrop={is_enabled.then_some(drop)}
                 >
                     <div class="psp-text-field">
                         <ul class="psp-text-field__input" for={ctx.props().name}>
                             { columns_html }
-                            if ctx.props().is_dragover.is_none() | (!invalid_drag && valid_duplicate_drag) {
+                            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>
+                                    <span
+                                        class="toggle-mode is_column_active"
+                                        onmousedown={ctx.props().parent.callback(move |_| V::close(0))}
+                                    />
+                                </div>
+                            } else if ctx.props().is_dragover.is_none() | (!invalid_drag && valid_duplicate_drag) {
                                 <EmptyColumn {column_dropdown} {exclude} {on_select} />
                             } else if invalid_drag {
                                 <InvalidColumn />

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

@@ -34,6 +34,9 @@ pub struct ScrollPanelProps {
     #[prop_or_default]
     pub viewport_ref: Option<NodeRef>,
 
+    #[prop_or_default]
+    pub initial_width: Option<f64>,
+
     #[prop_or_default]
     pub class: Classes,
 
@@ -52,6 +55,9 @@ pub struct ScrollPanelProps {
     #[prop_or_default]
     pub on_resize: Option<Rc<PubSub<()>>>,
 
+    #[prop_or_default]
+    pub on_auto_width: Callback<f64>,
+
     #[prop_or_default]
     pub on_dimensions_reset: Option<Rc<PubSub<()>>>,
 
@@ -125,7 +131,7 @@ impl Component for ScrollPanel {
         Self {
             viewport_ref: Default::default(),
             viewport_height: 0f64,
-            viewport_width: 0f64,
+            viewport_width: ctx.props().initial_width.unwrap_or_default(),
             content_window: None,
             needs_rerender: true,
             total_height,
@@ -150,6 +156,7 @@ impl Component for ScrollPanel {
 
                 self.viewport_height = rect.height() - 8.0;
                 self.viewport_width = self.viewport_width.max(rect.width() - 6.0);
+                ctx.props().on_auto_width.emit(self.viewport_width);
                 re_render
             },
             ScrollPanelMsg::CalculateWindowContent => self.calculate_window_content(ctx),