@perspective-dev/viewer 4.2.0 → 4.4.0

package/src/rust/components/column_selector.rs

@@ -27,7 +27,9 @@ use std::rc::Rc;
 
 pub use empty_column::*;
 pub use invalid_column::*;
+use perspective_client::config::ViewConfig;
 use perspective_js::utils::ApiFuture;
+pub use pivot_column::*;
 use web_sys::*;
 use yew::prelude::*;
 
@@ -38,17 +40,20 @@ use self::inactive_column::*;
 use super::containers::scroll_panel::*;
 use super::containers::split_panel::{Orientation, SplitPanel};
 use super::style::LocalStyle;
+use crate::components::column_dropdown::{ColumnDropDownElement, ColumnDropDownPortal};
 use crate::components::containers::scroll_panel_item::ScrollPanelItem;
-use crate::custom_elements::ColumnDropDownElement;
+use crate::css;
 use crate::dragdrop::*;
-use crate::model::*;
 use crate::presentation::ColumnLocator;
 use crate::renderer::*;
+use crate::session::drag_drop_update::*;
 use crate::session::*;
+use crate::tasks::{
+    ActiveColumnState, ActiveColumnStateData, ColumnsIteratorSet, can_render_column_styles,
+};
 use crate::utils::*;
-use crate::*;
 
-#[derive(Properties, PerspectiveProperties!)]
+#[derive(Properties)]
 pub struct ColumnSelectorProps {
     /// Fires when the expression/config column is open.
     pub on_open_expr_panel: Callback<ColumnLocator>,
@@ -56,29 +61,48 @@ pub struct ColumnSelectorProps {
     /// This is passed to the add_expression_button for styling.
     pub selected_column: Option<ColumnLocator>,
 
-    /// Fires when this component is resized via the UI.
-    #[prop_or_default]
-    pub on_resize: Option<Rc<PubSub<()>>>,
+    /// Value props threaded from root's `SessionProps` / `RendererProps`.
+    pub has_table: Option<TableLoadState>,
+    pub named_column_count: usize,
+    pub view_config: PtrEqRc<ViewConfig>,
+    pub drag_column: Option<String>,
+
+    /// Cloned session metadata snapshot — threaded from `SessionProps`
+    /// so that metadata changes trigger re-renders via prop diffing.
+    pub metadata: SessionMetadataRc,
+
+    /// Selected theme name, threaded for PortalModal consumers.
+    pub selected_theme: Option<String>,
 
     // State
     pub session: Session,
     pub renderer: Renderer,
     pub dragdrop: DragDrop,
+
+    /// Fires when this component is resized via the UI.
+    #[prop_or_default]
+    pub on_resize: Option<Rc<PubSub<()>>>,
 }
 
 impl PartialEq for ColumnSelectorProps {
     fn eq(&self, rhs: &Self) -> bool {
         self.selected_column == rhs.selected_column
+            && self.has_table == rhs.has_table
+            && self.named_column_count == rhs.named_column_count
+            && self.view_config == rhs.view_config
+            && self.drag_column == rhs.drag_column
+            && self.metadata == rhs.metadata
+            && self.selected_theme == rhs.selected_theme
     }
 }
 
 #[derive(Debug)]
 pub enum ColumnSelectorMsg {
-    TableLoaded,
-    ViewCreated,
+    /// Triggers a plain re-render; used as `onselect`/`ondragenter` callbacks
+    /// from `ConfigSelector` after it mutates the view config.
+    Redraw,
     HoverActiveIndex(Option<usize>),
-    Drag(DragEffect),
-    DragEnd,
+    SetWidth(f64),
     Drop((String, DragTarget, DragEffect, usize)),
 }
 
@@ -87,10 +111,10 @@ use ColumnSelectorMsg::*;
 /// A `ColumnSelector` controls the `columns` field of the `ViewConfig`,
 /// deriving its options from the table columns and `ViewConfig` expressions.
 pub struct ColumnSelector {
-    _subscriptions: [Subscription; 5],
-    named_row_count: usize,
+    _subscriptions: [Subscription; 1],
     drag_container: DragDropContainer,
     column_dropdown: ColumnDropDownElement,
+    viewport_width: f64,
     on_reset: Rc<PubSub<()>>,
 }
 
@@ -100,44 +124,14 @@ impl Component for ColumnSelector {
 
     fn create(ctx: &Context<Self>) -> Self {
         let ColumnSelectorProps {
-            dragdrop,
-            renderer,
-            session,
-            ..
+            dragdrop, session, ..
         } = ctx.props();
-        let table_sub = {
-            let cb = ctx.link().callback(|_| ColumnSelectorMsg::TableLoaded);
-            session.table_loaded.add_listener(cb)
-        };
-
-        let view_sub = {
-            let cb = ctx.link().callback(|_| ColumnSelectorMsg::ViewCreated);
-            session.view_created.add_listener(cb)
-        };
 
         let drop_sub = {
             let cb = ctx.link().callback(ColumnSelectorMsg::Drop);
             dragdrop.drop_received.add_listener(cb)
         };
 
-        let drag_sub = {
-            let cb = ctx.link().callback(ColumnSelectorMsg::Drag);
-            dragdrop.dragstart_received.add_listener(cb)
-        };
-
-        let dragend_sub = {
-            let cb = ctx.link().callback(|_| ColumnSelectorMsg::DragEnd);
-            dragdrop.dragend_received.add_listener(cb)
-        };
-
-        let named = maybe! {
-            let plugin =
-                renderer.get_active_plugin().ok()?;
-
-            Some(plugin.config_column_names()?.length() as usize)
-        };
-
-        let named_row_count = named.unwrap_or_default();
         let drag_container = DragDropContainer::new(|| {}, {
             let link = ctx.link().clone();
             move || link.send_message(ColumnSelectorMsg::HoverActiveIndex(None))
@@ -145,8 +139,8 @@ impl Component for ColumnSelector {
 
         let column_dropdown = ColumnDropDownElement::new(session.clone());
         Self {
-            _subscriptions: [table_sub, view_sub, drop_sub, drag_sub, dragend_sub],
-            named_row_count,
+            _subscriptions: [drop_sub],
+            viewport_width: 0f64,
             drag_container,
             column_dropdown,
             on_reset: Default::default(),
@@ -155,18 +149,10 @@ impl Component for ColumnSelector {
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            Drag(DragEffect::Move(DragTarget::Active)) => false,
-            Drag(_) | DragEnd | TableLoaded => true,
-            ViewCreated => {
-                let named = maybe! {
-                    let plugin =
-                        ctx.props().renderer.get_active_plugin().ok()?;
-
-                    Some(plugin.config_column_names()?.length() as usize)
-                };
-
-                self.named_row_count = named.unwrap_or_default();
-                true
+            Redraw => true,
+            SetWidth(w) => {
+                self.viewport_width = w;
+                false
             },
             HoverActiveIndex(Some(to_index)) => ctx
                 .props()
@@ -177,33 +163,77 @@ impl Component for ColumnSelector {
                 true
             },
             Drop((column, DragTarget::Active, DragEffect::Move(DragTarget::Active), index)) => {
-                if !ctx.props().is_invalid_columns_column(&column, index) {
-                    let update = ctx.props().session.create_drag_drop_update(
+                let is_invalid = {
+                    let config = &ctx.props().view_config;
+                    let from_index = config
+                        .columns
+                        .iter()
+                        .position(|x| x.as_ref() == Some(&column));
+
+                    let min_cols = ctx.props().renderer.metadata().min;
+                    let is_to_empty = !config
+                        .columns
+                        .get(index)
+                        .map(|x| x.is_some())
+                        .unwrap_or_default();
+
+                    min_cols
+                        .and_then(|x| from_index.map(|fi| fi < x))
+                        .unwrap_or_default()
+                        && is_to_empty
+                };
+                if !is_invalid {
+                    let col_type = ctx
+                        .props()
+                        .metadata
+                        .get_column_table_type(column.as_str())
+                        .unwrap();
+
+                    let update = ctx.props().view_config.create_drag_drop_update(
                         column,
+                        col_type,
                         index,
                         DragTarget::Active,
                         DragEffect::Move(DragTarget::Active),
                         &ctx.props().renderer.metadata(),
+                        ctx.props().metadata.get_features().unwrap(),
                     );
 
-                    if let Ok(task) = ctx.props().update_and_render(update) {
-                        ApiFuture::spawn(task);
+                    let session = ctx.props().session.clone();
+                    let renderer = ctx.props().renderer.clone();
+                    if session.update_view_config(update).is_ok() {
+                        ApiFuture::spawn(async move {
+                            renderer.apply_pending_plugin()?;
+                            renderer.draw(session.validate().await?.create_view()).await
+                        });
                     }
                 }
 
                 true
             },
             Drop((column, DragTarget::Active, effect, index)) => {
-                let update = ctx.props().session.create_drag_drop_update(
+                let col_type = ctx
+                    .props()
+                    .metadata
+                    .get_column_table_type(column.as_str())
+                    .unwrap();
+                let update = ctx.props().view_config.create_drag_drop_update(
                     column,
+                    col_type,
                     index,
                     DragTarget::Active,
                     effect,
                     &ctx.props().renderer.metadata(),
+                    ctx.props().metadata.get_features().unwrap(),
                 );
 
-                if let Ok(task) = ctx.props().update_and_render(update) {
-                    ApiFuture::spawn(task);
+                let session = ctx.props().session.clone();
+                let renderer = ctx.props().renderer.clone();
+                if session.update_view_config(update).is_ok() {
+                    ApiFuture::spawn(async move {
+                        renderer.apply_pending_plugin()?;
+                        renderer.draw(session.validate().await?.create_view()).await
+                    });
                 }
 
                 true
@@ -220,10 +250,29 @@ impl Component for ColumnSelector {
             dragdrop,
             ..
         } = ctx.props();
-        let config = session.get_view_config();
+        let metadata = &ctx.props().metadata;
+
+        // When `config.columns` is empty but the table has columns (transient
+        // state during `load()` after `reset()` clears the config), fill in
+        // all table columns as active — matching `validate_view_config()`.
+        let prop_config = &ctx.props().view_config;
+        let config = if prop_config.columns.is_empty() {
+            if let Some(table_cols) = metadata.get_table_columns() {
+                ViewConfig {
+                    columns: table_cols.iter().map(|c| Some(c.clone())).collect(),
+                    ..(**prop_config).clone()
+                }
+                .into()
+            } else {
+                prop_config.clone()
+            }
+        } else {
+            prop_config.clone()
+        };
+
         let is_aggregated = config.is_aggregated();
-        let columns_iter = ctx.props().column_selector_iter_set(&config);
-        let onselect = ctx.link().callback(|()| ViewCreated);
+        let columns_iter = ColumnsIteratorSet::new(&config, metadata, renderer, dragdrop);
+        let onselect = ctx.link().callback(|()| Redraw);
         let ondragenter = ctx.link().callback(HoverActiveIndex);
         let ondragover = Callback::from(|_event: DragEvent| _event.prevent_default());
         let ondrop = Callback::from({
@@ -236,8 +285,8 @@ impl Component for ColumnSelector {
             move |_| dragdrop.notify_drag_end()
         });
 
-        let mut active_classes = classes!();
-        if ctx.props().dragdrop.get_drag_column().is_some() {
+        let mut active_classes = classes!("scrollable");
+        if ctx.props().drag_column.is_some() {
             active_classes.push("dragdrop-highlight");
         };
 
@@ -250,8 +299,7 @@ impl Component for ColumnSelector {
                 + config.split_by.len()
                 + config.filter.len()
                 + config.sort.len()) as f64,
-            session
-                .metadata()
+            metadata
                 .get_features()
                 .map(|x| {
                     let mut y = 0.0;
@@ -280,7 +328,11 @@ impl Component for ColumnSelector {
             <ScrollPanelItem key="config_selector" {size_hint}>
                 <ConfigSelector
                     onselect={onselect.clone()}
-                    ondragenter={ctx.link().callback(|()| ViewCreated)}
+                    ondragenter={ctx.link().callback(|()| Redraw)}
+                    view_config={ctx.props().view_config.clone()}
+                    drag_column={ctx.props().drag_column.clone()}
+                    metadata={metadata.clone()}
+                    selected_theme={ctx.props().selected_theme.clone()}
                     {dragdrop}
                     {renderer}
                     {session}
@@ -288,11 +340,11 @@ impl Component for ColumnSelector {
             </ScrollPanelItem>
         };
 
-        let mut named_count = self.named_row_count;
+        let mut named_count = ctx.props().named_column_count;
         let mut active_columns: Vec<_> = columns_iter
             .active()
             .enumerate()
-            .map(|(idx, name)| {
+            .map(|(idx, name): (usize, ActiveColumnState)| {
                 let ondragenter = ondragenter.reform(move |_| Some(idx));
                 let size_hint = if named_count > 0 { 50.0 } else { 28.0 };
                 named_count = named_count.saturating_sub(1);
@@ -307,6 +359,34 @@ impl Component for ColumnSelector {
                     Some(ColumnLocator::Table(x)) | Some(ColumnLocator::Expression(x))
                 if x == &key );
 
+                // Compute metadata-derived props here so that changes to
+                // session metadata propagate via prop diffing.
+                // For DragOver placeholders, resolve the type from the
+                // dragged column (since `get_name()` returns `None`).
+                let col_type = name
+                    .get_name()
+                    .and_then(|n| metadata.get_column_table_type(n))
+                    .or_else(|| {
+                        if matches!(name.state, ActiveColumnStateData::DragOver) {
+                            dragdrop
+                                .get_drag_column()
+                                .and_then(|c| metadata.get_column_table_type(&c))
+                        } else {
+                            None
+                        }
+                    });
+
+                let is_expression = name
+                    .get_name()
+                    .map(|n| metadata.is_column_expression(n))
+                    .unwrap_or(false);
+
+                let can_render_styles = name
+                    .get_name()
+                    .and_then(|n| can_render_column_styles(renderer, &config, metadata, n).ok())
+                    .unwrap_or(false);
+
+                let show_edit_btn = is_expression || can_render_styles;
                 let on_open_expr_panel = &ctx.props().on_open_expr_panel;
                 html_nested! {
                     <ScrollPanelItem {key} {size_hint}>
@@ -315,6 +395,11 @@ impl Component for ColumnSelector {
                             {idx}
                             {is_aggregated}
                             {is_editing}
+                            {is_expression}
+                            {show_edit_btn}
+                            {col_type}
+                            view_config={config.clone()}
+                            metadata={metadata.clone()}
                             {name}
                             {on_open_expr_panel}
                             {ondragenter}
@@ -336,6 +421,7 @@ impl Component for ColumnSelector {
             .map(|(idx, vc)| {
                 let selected_column = ctx.props().selected_column.as_ref();
                 let is_editing = matches!(selected_column, Some(ColumnLocator::Expression(x)) if x.as_str() == vc.name);
+                let is_expression = metadata.is_column_expression(vc.name);
                 html_nested! {
                     <ScrollPanelItem key={vc.name} size_hint=28.0>
                         <InactiveColumn
@@ -343,6 +429,9 @@ impl Component for ColumnSelector {
                             visible={vc.is_visible}
                             name={vc.name.to_owned()}
                             {is_editing}
+                            {is_expression}
+                            view_config={config.clone()}
+                            metadata={metadata.clone()}
                             onselect={&onselect}
                             ondragend={&ondragend}
                             on_open_expr_panel={&ctx.props().on_open_expr_panel}
@@ -355,20 +444,9 @@ impl Component for ColumnSelector {
             })
             .collect();
 
-        let size = if !inactive_children.is_empty() {
-            56.0
-        } else {
-            28.0
-        };
+        let size = 28.0;
 
-        let add_column = if ctx
-            .props()
-            .session
-            .metadata()
-            .get_features()
-            .unwrap()
-            .expressions
-        {
+        let add_column = if metadata.get_features().unwrap().expressions {
             html_nested! {
                 <ScrollPanelItem key="__add_expression__" size_hint={size}>
                     <AddExpressionButton
@@ -389,8 +467,8 @@ impl Component for ColumnSelector {
             inactive_children.insert(0, add_column);
         }
 
-        let selected_columns = html! {
-            <div id="selected-columns">
+        let mut selected_columns = vec![html! {
+            <div id="selected-columns" key="__active_columns__">
                 <ScrollPanel
                     id="active-columns"
                     class={active_classes}
@@ -398,13 +476,28 @@ impl Component for ColumnSelector {
                     dragenter={&self.drag_container.dragenter}
                     dragleave={&self.drag_container.dragleave}
                     viewport_ref={&self.drag_container.noderef}
+                    initial_width={self.viewport_width}
+                    on_auto_width={ctx.link().callback(ColumnSelectorMsg::SetWidth)}
                     drop={ondrop}
                     on_resize={&ctx.props().on_resize}
                     on_dimensions_reset={&self.on_reset}
                     children={std::iter::once(config_selector).chain(active_columns).collect::<Vec<_>>()}
                 />
             </div>
-        };
+        }];
+
+        if !inactive_children.is_empty() {
+            selected_columns.push(html! {
+                <ScrollPanel
+                    id="sub-columns"
+                    key="__sub_columns__"
+                    class={classes!("scrollable")}
+                    on_resize={&ctx.props().on_resize}
+                    on_dimensions_reset={&self.on_reset}
+                    children={inactive_children}
+                />
+            })
+        }
 
         html! {
             <>
@@ -415,16 +508,12 @@ impl Component for ColumnSelector {
                     skip_empty=true
                     orientation={Orientation::Vertical}
                 >
-                    { selected_columns }
-                    if !inactive_children.is_empty() {
-                        <ScrollPanel
-                            id="sub-columns"
-                            on_resize={&ctx.props().on_resize}
-                            on_dimensions_reset={&self.on_reset}
-                            children={inactive_children}
-                        />
-                    }
+                    { for selected_columns }
                 </SplitPanel>
+                <ColumnDropDownPortal
+                    element={self.column_dropdown.clone()}
+                    theme={ctx.props().selected_theme.clone().unwrap_or_default()}
+                />
             </>
         }
     }

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

@@ -18,8 +18,8 @@ use perspective_client::clone;
 use yew::{Html, Properties, function_component, html};
 
 use crate::components::empty_row::EmptyRow;
+use crate::components::filter_dropdown::FilterDropDownElement;
 use crate::config::SymbolKVPair;
-use crate::custom_elements::FilterDropDownElement;
 
 #[derive(Properties, PartialEq)]
 pub struct RowSelectorProps {

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

@@ -16,10 +16,11 @@ use itertools::Itertools;
 use yew::{Callback, Html, Properties, html};
 
 use crate::components::column_settings_sidebar::style_tab::symbol::symbol_pairs_item::PairsListItem;
+use crate::components::filter_dropdown::FilterDropDownElement;
 use crate::components::style::LocalStyle;
 use crate::config::SymbolKVPair;
 use crate::css;
-use crate::custom_elements::FilterDropDownElement;
+use crate::utils::PtrEqRc;
 
 #[derive(Properties, PartialEq)]
 pub struct PairsListProps {
@@ -28,7 +29,7 @@ pub struct PairsListProps {
     pub update_pairs: Callback<Vec<SymbolKVPair>>,
     pub id: Option<String>,
     pub row_dropdown: Rc<FilterDropDownElement>,
-    pub values: Rc<Vec<String>>,
+    pub values: PtrEqRc<Vec<String>>,
     pub column_name: String,
 }
 

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

@@ -16,8 +16,9 @@ use yew::{Callback, Html, Properties, html};
 
 use crate::components::column_settings_sidebar::style_tab::symbol::row_selector::RowSelector;
 use crate::components::column_settings_sidebar::style_tab::symbol::symbol_selector::SymbolSelector;
+use crate::components::filter_dropdown::FilterDropDownElement;
 use crate::config::SymbolKVPair;
-use crate::custom_elements::FilterDropDownElement;
+use crate::utils::PtrEqRc;
 
 #[derive(Properties, PartialEq)]
 pub struct PairsListItemProps {
@@ -26,7 +27,7 @@ pub struct PairsListItemProps {
     pub pairs: Vec<SymbolKVPair>,
     pub update_pairs: Callback<Vec<SymbolKVPair>>,
     pub row_dropdown: Rc<FilterDropDownElement>,
-    pub values: Rc<Vec<String>>,
+    pub values: PtrEqRc<Vec<String>>,
     pub focused: bool,
     pub set_focused_index: Callback<Option<usize>>,
     pub column_name: String,

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

@@ -10,18 +10,17 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use std::rc::Rc;
-
 use itertools::Itertools;
 use yew::{Callback, Html, Properties, function_component, html};
 
 use crate::components::containers::select::{Select, SelectItem};
+use crate::utils::PtrEqRc;
 
 #[derive(Properties, PartialEq)]
 pub struct SymbolSelectorProps {
     pub index: usize,
     pub selected_value: Option<String>,
-    pub values: Rc<Vec<String>>,
+    pub values: PtrEqRc<Vec<String>>,
     pub callback: Callback<String>,
 }
 

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

@@ -23,10 +23,10 @@ use itertools::Itertools;
 use yew::{Callback, Html, Properties, html};
 
 use crate::components::column_settings_sidebar::style_tab::symbol::symbol_pairs::PairsList;
+use crate::components::filter_dropdown::{FilterDropDownElement, FilterDropDownPortal};
 use crate::components::style::LocalStyle;
 use crate::config::{ColumnConfigValueUpdate, KeyValueOpts, SymbolKVPair};
 use crate::css;
-use crate::custom_elements::FilterDropDownElement;
 use crate::session::Session;
 
 #[derive(Properties, PartialEq, Clone)]
@@ -36,6 +36,8 @@ pub struct SymbolAttrProps {
     pub restored_config: Option<HashMap<String, String>>,
     pub on_change: Callback<ColumnConfigValueUpdate>,
     pub default_config: KeyValueOpts,
+    /// Selected theme name, threaded for PortalModal consumers.
+    pub selected_theme: Option<String>,
 }
 impl SymbolAttrProps {
     pub fn next_default_symbol(&self, pairs_len: usize) -> String {
@@ -125,6 +127,10 @@ impl yew::Component for SymbolStyle {
                     values={Rc::new(ctx.props().default_config.values.clone())}
                     {update_pairs}
                 />
+                <FilterDropDownPortal
+                    element={(*self.row_dropdown).clone()}
+                    theme={ctx.props().selected_theme.clone().unwrap_or_default()}
+                />
             </>
         }
     }