@perspective-dev/viewer 4.2.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,23 +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(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,
@@ -46,30 +60,31 @@ 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),
 }
 
 #[derive(Clone)]
 pub struct ConfigSelector {
     filter_dropdown: FilterDropDownElement,
     column_dropdown: ColumnDropDownElement,
-    _subscriptions: [Rc<Subscription>; 4],
+    _subscriptions: [Rc<Subscription>; 1],
 }
 
 impl Component for ConfigSelector {
@@ -77,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)| {
@@ -90,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,
@@ -105,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 {
@@ -119,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 {
@@ -127,59 +131,121 @@ 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
             },
-            ConfigSelectorMsg::Close(index, DragTarget::GroupBy) => {
-                let mut group_by = ctx.props().session.get_view_config().group_by.clone();
-                group_by.remove(index);
+            ConfigSelectorMsg::UpdateGroupRollupMode(mode) => {
                 let config = ViewConfigUpdate {
-                    group_by: Some(group_by),
+                    group_rollup_mode: Some(mode),
                     ..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::GroupBy) => {
+                if ctx.props().view_config.group_rollup_mode == GroupRollupMode::Total {
+                    let requirements = ctx.props().renderer.metadata();
+
+                    let rollup_features = ctx
+                        .props()
+                        .metadata
+                        .get_features()
+                        .map(|x| x.get_group_rollup_modes())
+                        .unwrap();
+
+                    let group_rollups = requirements.get_group_rollups(&rollup_features);
+
+                    ctx.link()
+                        .send_message(ConfigSelectorMsg::UpdateGroupRollupMode(
+                            group_rollups.first().cloned().unwrap(),
+                        ));
+                    false
+                } else {
+                    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()
+                    };
+
+                    {
+                        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
@@ -188,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
@@ -211,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 {
@@ -220,15 +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.
@@ -258,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,
@@ -311,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 {
@@ -345,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 {
@@ -363,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,
@@ -389,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));
@@ -409,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
@@ -434,124 +574,163 @@ 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 class = if dragdrop.get_drag_column().is_some() {
-            "dragdrop-highlight"
-        } else {
-            ""
-        };
+        let mut class = classes!();
+
+        if ctx.props().drag_column.is_some() {
+            class.push("dragdrop-highlight");
+        }
+
+        if config.group_rollup_mode == GroupRollupMode::Total {
+            class.push("group-rollup-mode-total");
+        }
 
         let dragend = Callback::from({
             let dragdrop = dragdrop.clone();
             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 = metadata
+            .get_features()
+            .map(|x| x.get_group_rollup_modes())
+            .unwrap();
+
+        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")} />
-                if !config.group_by.is_empty() && config.split_by.is_empty() {
-                    <span
-                        id="transpose_button"
-                        class="rrow centered"
-                        title="Transpose Pivots"
-                        onmousedown={transpose.clone()}
-                    />
-                }
-                if features.group_by {
-                    <GroupBySelector
-                        name="group_by"
-                        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| {
+            <>
+                <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| {
                                 html_nested! {
                                     <PivotColumn
                                         action={DragTarget::GroupBy}
                                         column={group_by.clone()}
+                                        metadata={metadata.clone()}
                                         {dragdrop}
-                                        {session}
+                                        opt_session={session}
                                     >
                                     </PivotColumn>
                                 }
                             }) }
-                    </GroupBySelector>
-                }
-                if features.split_by {
-                    if !config.split_by.is_empty() {
-                        <span
-                            id="transpose_button"
-                            class="rrow centered"
-                            title="Transpose Pivots"
-                            onmousedown={transpose}
-                        />
+                        </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() }
-
-                                     {dragdrop}
-                                    {session}>
+                                    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));
 
@@ -561,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())
     }