@perspective-dev/viewer 4.3.0 → 4.4.0

package/src/rust/components/column_selector/config_selector.rs

@@ -13,8 +13,7 @@
 use std::collections::HashSet;
 use std::rc::Rc;
 
-use perspective_client::config::*;
-use perspective_client::utils::PerspectiveResultExt;
+use perspective_client::config::{ViewConfig, *};
 use perspective_js::utils::ApiFuture;
 use yew::prelude::*;
 
@@ -22,24 +21,38 @@ use super::InPlaceColumn;
 use super::filter_column::*;
 use super::pivot_column::*;
 use super::sort_column::*;
+use crate::components::column_dropdown::{ColumnDropDownElement, ColumnDropDownPortal};
 use crate::components::containers::dragdrop_list::*;
 use crate::components::containers::select::{Select, SelectItem};
+use crate::components::filter_dropdown::{FilterDropDownElement, FilterDropDownPortal};
 use crate::components::style::LocalStyle;
-use crate::custom_elements::{ColumnDropDownElement, FilterDropDownElement};
+use crate::css;
 use crate::dragdrop::*;
-use crate::model::*;
 use crate::renderer::*;
+use crate::session::drag_drop_update::*;
 use crate::session::*;
 use crate::utils::*;
-use crate::{PerspectiveProperties, css};
 
-#[derive(Clone, Properties, PerspectiveProperties!)]
+#[derive(Clone, Properties)]
 pub struct ConfigSelectorProps {
     pub onselect: Callback<()>,
 
     #[prop_or_default]
     pub ondragenter: Callback<()>,
 
+    /// Current view config threaded as a value prop so that config changes
+    /// (group_by, sort, filter, etc.) trigger re-renders via normal prop
+    /// diffing rather than a PubSub `view_created` subscription.
+    pub view_config: PtrEqRc<ViewConfig>,
+    /// Column currently being dragged — threaded to show `dragdrop-highlight`
+    /// without subscribing to `dragstart_received`/`dragend_received`.
+    pub drag_column: Option<String>,
+    /// Session metadata snapshot — threaded from `SessionProps`.
+    pub metadata: SessionMetadataRc,
+
+    /// Selected theme name, threaded for PortalModal consumers.
+    pub selected_theme: Option<String>,
+
     // State
     pub session: Session,
     pub renderer: Renderer,
@@ -47,22 +60,22 @@ pub struct ConfigSelectorProps {
 }
 
 impl PartialEq for ConfigSelectorProps {
-    fn eq(&self, _other: &Self) -> bool {
-        false
+    fn eq(&self, other: &Self) -> bool {
+        self.view_config == other.view_config
+            && self.drag_column == other.drag_column
+            && self.metadata == other.metadata
+            && self.selected_theme == other.selected_theme
     }
 }
 
 #[derive(Debug)]
 pub enum ConfigSelectorMsg {
-    DragStart,
-    DragEnd,
     DragOver(usize, DragTarget),
     DragLeave(DragTarget),
     Drop(String, DragTarget, DragEffect, usize),
     Close(usize, DragTarget),
     SetFilterValue(usize, String),
     TransposePivots,
-    ViewCreated,
     New(DragTarget, InPlaceColumn),
     UpdateGroupRollupMode(GroupRollupMode),
 }
@@ -71,7 +84,7 @@ pub enum ConfigSelectorMsg {
 pub struct ConfigSelector {
     filter_dropdown: FilterDropDownElement,
     column_dropdown: ColumnDropDownElement,
-    _subscriptions: [Rc<Subscription>; 4],
+    _subscriptions: [Rc<Subscription>; 1],
 }
 
 impl Component for ConfigSelector {
@@ -79,12 +92,6 @@ impl Component for ConfigSelector {
     type Properties = ConfigSelectorProps;
 
     fn create(ctx: &Context<Self>) -> Self {
-        let cb = ctx.link().callback(|_| ConfigSelectorMsg::DragStart);
-        let drag_sub = Rc::new(ctx.props().dragdrop.dragstart_received.add_listener(cb));
-
-        let cb = ctx.link().callback(|_| ConfigSelectorMsg::DragEnd);
-        let dragend_sub = Rc::new(ctx.props().dragdrop.dragend_received.add_listener(cb));
-
         let cb = ctx
             .link()
             .callback(|x: (String, DragTarget, DragEffect, usize)| {
@@ -92,12 +99,9 @@ impl Component for ConfigSelector {
             });
         let drop_sub = Rc::new(ctx.props().dragdrop.drop_received.add_listener(cb));
 
-        let cb = ctx.link().callback(|_| ConfigSelectorMsg::ViewCreated);
-        let view_sub = Rc::new(ctx.props().session.view_created.add_listener(cb));
-
         let filter_dropdown = FilterDropDownElement::new(ctx.props().session.clone());
         let column_dropdown = ColumnDropDownElement::new(ctx.props().session.clone());
-        let _subscriptions = [drop_sub, view_sub, drag_sub, dragend_sub];
+        let _subscriptions = [drop_sub];
         Self {
             filter_dropdown,
             column_dropdown,
@@ -107,8 +111,6 @@ impl Component for ConfigSelector {
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            ConfigSelectorMsg::DragStart | ConfigSelectorMsg::ViewCreated => true,
-            ConfigSelectorMsg::DragEnd => true,
             ConfigSelectorMsg::DragOver(index, action) => {
                 let should_render = ctx.props().dragdrop.notify_drag_enter(action, index);
                 if should_render {
@@ -121,7 +123,7 @@ impl Component for ConfigSelector {
                 true
             },
             ConfigSelectorMsg::Close(index, DragTarget::Sort) => {
-                let mut sort = ctx.props().session.get_view_config().sort.clone();
+                let mut sort = ctx.props().view_config.sort.clone();
                 sort.remove(index);
                 let sort = Some(sort);
                 let config = ViewConfigUpdate {
@@ -129,10 +131,16 @@ impl Component for ConfigSelector {
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(config)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    let session = ctx.props().session.clone();
+                    let renderer = ctx.props().renderer.clone();
+                    if session.update_view_config(config).is_ok() {
+                        ApiFuture::spawn(async move {
+                            renderer.apply_pending_plugin()?;
+                            renderer.draw(session.validate().await?.create_view()).await
+                        });
+                    }
+                }
 
                 ctx.props().onselect.emit(());
                 false
@@ -143,22 +151,26 @@ impl Component for ConfigSelector {
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(config)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    let session = ctx.props().session.clone();
+                    let renderer = ctx.props().renderer.clone();
+                    if session.update_view_config(config).is_ok() {
+                        ApiFuture::spawn(async move {
+                            renderer.apply_pending_plugin()?;
+                            renderer.draw(session.validate().await?.create_view()).await
+                        });
+                    }
+                }
 
                 false
             },
             ConfigSelectorMsg::Close(index, DragTarget::GroupBy) => {
-                if ctx.props().session.get_view_config().group_rollup_mode == GroupRollupMode::Total
-                {
+                if ctx.props().view_config.group_rollup_mode == GroupRollupMode::Total {
                     let requirements = ctx.props().renderer.metadata();
 
                     let rollup_features = ctx
                         .props()
-                        .session
-                        .metadata()
+                        .metadata
                         .get_features()
                         .map(|x| x.get_group_rollup_modes())
                         .unwrap();
@@ -171,51 +183,69 @@ impl Component for ConfigSelector {
                         ));
                     false
                 } else {
-                    let mut group_by = ctx.props().session.get_view_config().group_by.clone();
+                    let mut group_by = ctx.props().view_config.group_by.clone();
                     group_by.remove(index);
                     let config = ViewConfigUpdate {
                         group_by: Some(group_by),
                         ..ViewConfigUpdate::default()
                     };
 
-                    ctx.props()
-                        .update_and_render(config)
-                        .map(ApiFuture::spawn)
-                        .unwrap_or_log();
+                    {
+                        let session = ctx.props().session.clone();
+                        let renderer = ctx.props().renderer.clone();
+                        if session.update_view_config(config).is_ok() {
+                            ApiFuture::spawn(async move {
+                                renderer.apply_pending_plugin()?;
+                                renderer.draw(session.validate().await?.create_view()).await
+                            });
+                        }
+                    }
 
                     ctx.props().onselect.emit(());
                     false
                 }
             },
             ConfigSelectorMsg::Close(index, DragTarget::SplitBy) => {
-                let mut split_by = ctx.props().session.get_view_config().split_by.clone();
+                let mut split_by = ctx.props().view_config.split_by.clone();
                 split_by.remove(index);
                 let config = ViewConfigUpdate {
                     split_by: Some(split_by),
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(config)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    let session = ctx.props().session.clone();
+                    let renderer = ctx.props().renderer.clone();
+                    if session.update_view_config(config).is_ok() {
+                        ApiFuture::spawn(async move {
+                            renderer.apply_pending_plugin()?;
+                            renderer.draw(session.validate().await?.create_view()).await
+                        });
+                    }
+                }
 
                 ctx.props().onselect.emit(());
                 false
             },
             ConfigSelectorMsg::Close(index, DragTarget::Filter) => {
                 self.filter_dropdown.hide().unwrap();
-                let mut filter = ctx.props().session.get_view_config().filter.clone();
+                let mut filter = ctx.props().view_config.filter.clone();
                 filter.remove(index);
                 let config = ViewConfigUpdate {
                     filter: Some(filter),
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(config)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    let session = ctx.props().session.clone();
+                    let renderer = ctx.props().renderer.clone();
+                    if session.update_view_config(config).is_ok() {
+                        ApiFuture::spawn(async move {
+                            renderer.apply_pending_plugin()?;
+                            renderer.draw(session.validate().await?.create_view()).await
+                        });
+                    }
+                }
 
                 ctx.props().onselect.emit(());
                 false
@@ -224,18 +254,31 @@ impl Component for ConfigSelector {
             ConfigSelectorMsg::Drop(column, action, effect, index)
                 if action != DragTarget::Active =>
             {
-                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,
                     action,
                     effect,
                     &ctx.props().renderer.metadata(),
+                    ctx.props().metadata.get_features().unwrap(),
                 );
 
-                ctx.props()
-                    .update_and_render(update)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    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
+                        });
+                    }
+                }
 
                 ctx.props().onselect.emit(());
                 false
@@ -247,7 +290,7 @@ impl Component for ConfigSelector {
             },
             ConfigSelectorMsg::Drop(..) => false,
             ConfigSelectorMsg::TransposePivots => {
-                let mut view_config = ctx.props().session.get_view_config().clone();
+                let mut view_config = (*ctx.props().view_config).clone();
                 std::mem::swap(&mut view_config.group_by, &mut view_config.split_by);
 
                 let update = ViewConfigUpdate {
@@ -256,16 +299,22 @@ impl Component for ConfigSelector {
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(update)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    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
+                        });
+                    }
+                }
                 ctx.props().onselect.emit(());
                 false
             },
 
             ConfigSelectorMsg::SetFilterValue(index, input) => {
-                let mut filter = ctx.props().session.get_view_config().filter.clone();
+                let mut filter = ctx.props().view_config.filter.clone();
 
                 // TODO Can't special case these - need to make this part of the
                 // Features API.
@@ -295,47 +344,65 @@ impl Component for ConfigSelector {
                     }
                 };
 
-                ctx.props()
-                    .update_and_render(update)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    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
+                        });
+                    }
+                }
 
                 false
             },
             ConfigSelectorMsg::New(DragTarget::GroupBy, InPlaceColumn::Column(col)) => {
-                let mut view_config = ctx.props().session.get_view_config().clone();
+                let mut view_config = (*ctx.props().view_config).clone();
                 view_config.group_by.push(col);
                 let update = ViewConfigUpdate {
                     group_by: Some(view_config.group_by),
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(update)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    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
+                        });
+                    }
+                }
 
                 ctx.props().onselect.emit(());
                 false
             },
             ConfigSelectorMsg::New(DragTarget::SplitBy, InPlaceColumn::Column(col)) => {
-                let mut view_config = ctx.props().session.get_view_config().clone();
+                let mut view_config = (*ctx.props().view_config).clone();
                 view_config.split_by.push(col);
                 let update = ViewConfigUpdate {
                     split_by: Some(view_config.split_by),
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(update)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    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
+                        });
+                    }
+                }
 
                 ctx.props().onselect.emit(());
                 false
             },
             ConfigSelectorMsg::New(DragTarget::Filter, InPlaceColumn::Column(column)) => {
-                let mut view_config = ctx.props().session.get_view_config().clone();
+                let mut view_config = (*ctx.props().view_config).clone();
                 let op = ctx.props().default_op(column.as_str()).unwrap_or_default();
                 view_config.filter.push(Filter::new(
                     &column,
@@ -348,32 +415,44 @@ impl Component for ConfigSelector {
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(update)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    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
+                        });
+                    }
+                }
 
                 ctx.props().onselect.emit(());
                 false
             },
             ConfigSelectorMsg::New(DragTarget::Sort, InPlaceColumn::Column(col)) => {
-                let mut view_config = ctx.props().session.get_view_config().clone();
+                let mut view_config = (*ctx.props().view_config).clone();
                 view_config.sort.push(Sort(col, SortDir::Asc));
                 let update = ViewConfigUpdate {
                     sort: Some(view_config.sort),
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(update)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    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
+                        });
+                    }
+                }
 
                 ctx.props().onselect.emit(());
                 false
             },
             ConfigSelectorMsg::New(DragTarget::GroupBy, InPlaceColumn::Expression(col)) => {
-                let mut view_config = ctx.props().session.get_view_config().clone();
+                let mut view_config = (*ctx.props().view_config).clone();
                 view_config.group_by.push(col.name.as_ref().to_owned());
                 view_config.expressions.insert(&col);
                 let update = ViewConfigUpdate {
@@ -382,16 +461,22 @@ impl Component for ConfigSelector {
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(update)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    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
+                        });
+                    }
+                }
 
                 ctx.props().onselect.emit(());
                 false
             },
             ConfigSelectorMsg::New(DragTarget::SplitBy, InPlaceColumn::Expression(col)) => {
-                let mut view_config = ctx.props().session.get_view_config().clone();
+                let mut view_config = (*ctx.props().view_config).clone();
                 view_config.split_by.push(col.name.as_ref().to_owned());
                 view_config.expressions.insert(&col);
                 let update = ViewConfigUpdate {
@@ -400,16 +485,22 @@ impl Component for ConfigSelector {
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(update)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    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
+                        });
+                    }
+                }
 
                 ctx.props().onselect.emit(());
                 false
             },
             ConfigSelectorMsg::New(DragTarget::Filter, InPlaceColumn::Expression(col)) => {
-                let mut view_config = ctx.props().session.get_view_config().clone();
+                let mut view_config = (*ctx.props().view_config).clone();
                 let column = col.name.as_ref();
                 view_config.filter.push(Filter::new(
                     column,
@@ -426,16 +517,22 @@ impl Component for ConfigSelector {
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(update)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    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
+                        });
+                    }
+                }
 
                 ctx.props().onselect.emit(());
                 false
             },
             ConfigSelectorMsg::New(DragTarget::Sort, InPlaceColumn::Expression(col)) => {
-                let mut view_config = ctx.props().session.get_view_config().clone();
+                let mut view_config = (*ctx.props().view_config).clone();
                 view_config
                     .sort
                     .push(Sort(col.name.as_ref().to_owned(), SortDir::Asc));
@@ -446,10 +543,16 @@ impl Component for ConfigSelector {
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(update)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    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
+                        });
+                    }
+                }
 
                 ctx.props().onselect.emit(());
                 false
@@ -471,12 +574,12 @@ impl Component for ConfigSelector {
             session,
             ..
         } = ctx.props();
-        let config = session.get_view_config();
+        let config = &ctx.props().view_config;
         let transpose = ctx.link().callback(|_| ConfigSelectorMsg::TransposePivots);
         let column_dropdown = self.column_dropdown.clone();
         let mut class = classes!();
 
-        if dragdrop.get_drag_column().is_some() {
+        if ctx.props().drag_column.is_some() {
             class.push("dragdrop-highlight");
         }
 
@@ -489,17 +592,14 @@ impl Component for ConfigSelector {
             move |_event| dragdrop.notify_drag_end()
         });
 
-        let metadata = session.metadata();
+        let metadata = &ctx.props().metadata;
         let features = metadata.get_features().unwrap();
         let requirements = renderer.metadata();
         let on_group_rollup_mode = ctx
             .link()
             .callback(ConfigSelectorMsg::UpdateGroupRollupMode);
 
-        let rollup_features = ctx
-            .props()
-            .session
-            .metadata()
+        let rollup_features = metadata
             .get_features()
             .map(|x| x.get_group_rollup_modes())
             .unwrap();
@@ -507,124 +607,130 @@ impl Component for ConfigSelector {
         let group_rollups = requirements.get_group_rollups(&rollup_features);
 
         html! {
-            <div slot="top_panel" id="top_panel" {class} ondragend={dragend}>
-                <LocalStyle href={css!("config-selector")} />
-                <div class="pivot_controls">
-                    if group_rollups.len() > 1 {
-                        <Select<GroupRollupMode>
-                            id="group_rollup_mode_selector"
-                            wrapper_class="group_rollup_wrapper"
-                            values={Rc::new(
+            <>
+                <div slot="top_panel" id="top_panel" {class} ondragend={dragend}>
+                    <LocalStyle href={css!("config-selector")} />
+                    <div class="pivot_controls">
+                        if group_rollups.len() > 1 {
+                            <Select<GroupRollupMode>
+                                id="group_rollup_mode_selector"
+                                wrapper_class="group_rollup_wrapper"
+                                is_autosize=true
+                                values={Rc::new(
                                 group_rollups
                                     .iter()
                                     .map(|x| SelectItem::Option(*x))
                                     .collect(),
                             )}
-                            selected={config.group_rollup_mode}
-                            on_select={on_group_rollup_mode}
-                        />
-                    }
-                    if !config.group_by.is_empty() && config.split_by.is_empty() {
-                        <span
-                            id="transpose_button"
-                            class="rrow centered"
-                            title="Transpose Pivots"
-                            onmousedown={transpose.clone()}
-                        />
-                    }
-                </div>
-                if features.group_by {
-                    <GroupBySelector
-                        name="group_by"
-                        disabled={config.group_rollup_mode == GroupRollupMode::Total}
-                        parent={ctx.link().clone()}
-                        column_dropdown={column_dropdown.clone()}
-                        exclude={config.group_by.iter().cloned().collect::<HashSet<_>>()}
-                        is_dragover={ctx.props().dragdrop.is_dragover(DragTarget::GroupBy)}
-                        {dragdrop}
-                    >
-                        { for config.group_by.iter().map(|group_by| {
+                                selected={config.group_rollup_mode}
+                                on_select={on_group_rollup_mode}
+                            />
+                        }
+                        if !config.group_by.is_empty() && config.split_by.is_empty() {
+                            <span
+                                id="transpose_button"
+                                class="rrow centered"
+                                title="Transpose Pivots"
+                                onmousedown={transpose.clone()}
+                            />
+                        }
+                    </div>
+                    if features.group_by {
+                        <GroupBySelector
+                            name="group_by"
+                            disabled={config.group_rollup_mode == GroupRollupMode::Total}
+                            parent={ctx.link().clone()}
+                            column_dropdown={column_dropdown.clone()}
+                            exclude={config.group_by.iter().cloned().collect::<HashSet<_>>()}
+                            is_dragover={ctx.props().dragdrop.is_dragover(DragTarget::GroupBy)}
+                            {dragdrop}
+                        >
+                            { for config.group_by.iter().map(|group_by| {
                                 html_nested! {
                                     <PivotColumn
                                         action={DragTarget::GroupBy}
                                         column={group_by.clone()}
+                                        metadata={metadata.clone()}
                                         {dragdrop}
                                         opt_session={session}
                                     >
                                     </PivotColumn>
                                 }
                             }) }
-                    </GroupBySelector>
-                }
-                if features.split_by {
-                    if !config.split_by.is_empty() {
-                        <div class="pivot_controls">
-                            <span
-                                id="transpose_button"
-                                class="rrow centered"
-                                title="Transpose Pivots"
-                                onmousedown={transpose}
-                            />
-                        </div>
+                        </GroupBySelector>
                     }
-                    <SplitBySelector
-                        name="split_by"
-                        parent={ctx.link().clone()}
-                        column_dropdown={column_dropdown.clone()}
-                        exclude={config.split_by.iter().cloned().collect::<HashSet<_>>()}
-                        is_dragover={dragdrop.is_dragover(DragTarget::SplitBy)}
-                        {dragdrop}
-                    >
-                        { for config.split_by.iter().map(|split_by| {
+                    if features.split_by {
+                        if !config.split_by.is_empty() {
+                            <div class="pivot_controls">
+                                <span
+                                    id="transpose_button"
+                                    class="rrow centered"
+                                    title="Transpose Pivots"
+                                    onmousedown={transpose}
+                                />
+                            </div>
+                        }
+                        <SplitBySelector
+                            name="split_by"
+                            parent={ctx.link().clone()}
+                            column_dropdown={column_dropdown.clone()}
+                            exclude={config.split_by.iter().cloned().collect::<HashSet<_>>()}
+                            is_dragover={dragdrop.is_dragover(DragTarget::SplitBy)}
+                            {dragdrop}
+                        >
+                            { for config.split_by.iter().map(|split_by| {
                             html_nested! {
                                 <PivotColumn
                                     action={ DragTarget::SplitBy }
                                     column={ split_by.clone() }
+                                    metadata={metadata.clone()}
                                     {dragdrop}
                                     opt_session={session}>
                                 </PivotColumn>
                             }
                         }) }
-                    </SplitBySelector>
-                }
-                if features.sort {
-                    <SortSelector
-                        name="sort"
-                        allow_duplicates=true
-                        parent={ctx.link().clone()}
-                        column_dropdown={column_dropdown.clone()}
-                        exclude={config.sort.iter().map(|x| x.0.clone()).collect::<HashSet<_>>()}
-                        is_dragover={dragdrop.is_dragover(DragTarget::Sort).map(|(index, name)| {
+                        </SplitBySelector>
+                    }
+                    if features.sort {
+                        <SortSelector
+                            name="sort"
+                            allow_duplicates=true
+                            parent={ctx.link().clone()}
+                            column_dropdown={column_dropdown.clone()}
+                            exclude={config.sort.iter().map(|x| x.0.clone()).collect::<HashSet<_>>()}
+                            is_dragover={dragdrop.is_dragover(DragTarget::Sort).map(|(index, name)| {
                             (index, Sort(name, SortDir::Asc))
                         })}
-                        {dragdrop}
-                    >
-                        { for config.sort.iter().enumerate().map(|(idx, sort)| {
+                            {dragdrop}
+                        >
+                            { for config.sort.iter().enumerate().map(|(idx, sort)| {
                             html_nested! {
                                 <SortColumn
                                     idx={ idx }
                                     sort={ sort.clone() }
+                                    view_config={config.clone()}
+                                    metadata={metadata.clone()}
                                     {dragdrop}
                                     {renderer}
                                     {session}>
                                 </SortColumn>
                             }
                         }) }
-                    </SortSelector>
-                }
-                if !features.filter_ops.is_empty() {
-                    <FilterSelector
-                        name="filter"
-                        allow_duplicates=true
-                        parent={ctx.link().clone()}
-                        {column_dropdown}
-                        exclude={config.filter.iter().map(|x| x.column().to_string()).collect::<HashSet<_>>()}
-                        is_dragover={dragdrop.is_dragover(DragTarget::Filter).map(|(index, name)| {
+                        </SortSelector>
+                    }
+                    if !features.filter_ops.is_empty() {
+                        <FilterSelector
+                            name="filter"
+                            allow_duplicates=true
+                            parent={ctx.link().clone()}
+                            {column_dropdown}
+                            exclude={config.filter.iter().map(|x| x.column().to_string()).collect::<HashSet<_>>()}
+                            is_dragover={dragdrop.is_dragover(DragTarget::Filter).map(|(index, name)| {
                             (index, Filter::new(&name, "", FilterTerm::Scalar(Scalar::Null)))
                         })}
-                        {dragdrop}
-                    >
-                        { for config.filter.iter().enumerate().map(|(idx, filter)| {
+                            {dragdrop}
+                        >
+                            { for config.filter.iter().enumerate().map(|(idx, filter)| {
                                 let filter_keydown = ctx.link()
                                     .callback(move |txt| ConfigSelectorMsg::SetFilterValue(idx, txt));
 
@@ -634,24 +740,34 @@ impl Component for ConfigSelector {
                                         filter_dropdown={ &self.filter_dropdown }
                                         filter={ filter.clone() }
                                         on_keydown={ filter_keydown }
+                                        view_config={config.clone()}
+                                        metadata={metadata.clone()}
                                         {dragdrop}
                                         {renderer}
                                         {session}>
                                     </FilterColumn>
                                 }
                             }) }
-                    </FilterSelector>
-                }
-            </div>
+                        </FilterSelector>
+                    }
+                </div>
+                <ColumnDropDownPortal
+                    element={self.column_dropdown.clone()}
+                    theme={ctx.props().selected_theme.clone().unwrap_or_default()}
+                />
+                <FilterDropDownPortal
+                    element={self.filter_dropdown.clone()}
+                    theme={ctx.props().selected_theme.clone().unwrap_or_default()}
+                />
+            </>
         }
     }
 }
 
 impl ConfigSelectorProps {
     fn default_op(&self, column: &str) -> Option<String> {
-        let metadata = self.session.metadata();
-        let features = metadata.get_features()?;
-        let col_type = metadata.get_column_table_type(column)?;
+        let features = self.metadata.get_features()?;
+        let col_type = self.metadata.get_column_table_type(column)?;
         let first = features.default_op(col_type)?;
         Some(first.to_string())
     }