@perspective-dev/viewer 5.0.0 → 5.2.0

package/src/rust/components/chat_panel.rs

@@ -0,0 +1,289 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! The chat sidebar tab (feature `llm-agent`) — a pure VIEW over
+//! [`AgentSlot`]: all conversation state lives on the slot so this component
+//! can unmount (tab switch, settings close) without losing the transcript or
+//! interrupting a running turn.
+
+use yew::prelude::*;
+
+use crate::agent::{AgentSlot, ChatEntry, render_markdown};
+use crate::components::form::mirrored_textarea::MirroredTextarea;
+
+#[derive(Properties, PartialEq)]
+struct ChatReasoningProps {
+    reasoning: String,
+    open: bool,
+}
+
+/// A reasoning-model's "thinking" text: plain-text collapsible block,
+/// expanded while it is streaming (the only progress signal during a long
+/// think) and collapsed once real content exists.
+///
+/// The body is capped and scrolls (`viewer.css`), and follows its own
+/// tail as deltas append — but only while the reader is AT that tail.
+/// Scrolling up to read something is a deliberate act, so it wins until
+/// the reader returns to the bottom, exactly like the transcript.
+#[function_component]
+fn ChatReasoning(props: &ChatReasoningProps) -> Html {
+    let body_ref = use_node_ref();
+    let scroll_pinned = use_mut_ref(|| true);
+    let seen_len = use_mut_ref(|| None::<usize>);
+    let onscroll = {
+        let body_ref = body_ref.clone();
+        let scroll_pinned = scroll_pinned.clone();
+        Callback::from(move |_: Event| {
+            if let Some(elem) = body_ref.cast::<web_sys::Element>() {
+                let gap = elem.scroll_height() - elem.scroll_top() - elem.client_height();
+                *scroll_pinned.borrow_mut() = gap < 24;
+            }
+        })
+    };
+
+    {
+        let body_ref = body_ref.clone();
+        let scroll_pinned = scroll_pinned.clone();
+        let seen_len = seen_len.clone();
+        let len = props.reasoning.len();
+        use_effect(move || {
+            let grew = seen_len.replace(Some(len)).is_some_and(|seen| len > seen);
+            if grew
+                && *scroll_pinned.borrow()
+                && let Some(elem) = body_ref.cast::<web_sys::Element>()
+            {
+                elem.set_scroll_top(elem.scroll_height());
+            }
+        });
+    }
+
+    html! {
+        <details class="chat-reasoning" open={props.open}>
+            <summary />
+            <div class="chat-reasoning-body scrollable" ref={body_ref} {onscroll}>
+                { &props.reasoning }
+            </div>
+        </details>
+    }
+}
+
+/// The prompt input, over the shared [`MirroredTextarea`] — so it grows
+/// with its text instead of scrolling. This consumer wraps
+/// (`white-space: pre-wrap` is the shared default), which confines growth
+/// to the vertical axis; the expression editor's `pre` instead lets it
+/// grow sideways too.
+///
+/// Split from [`ChatPanel`] because the mirror re-renders per keystroke:
+/// the transcript re-parses markdown for every message it renders, which
+/// must not happen per character.
+#[derive(Properties, PartialEq)]
+struct ChatInputProps {
+    agent: AgentSlot,
+    busy: bool,
+}
+
+#[function_component]
+fn ChatInput(props: &ChatInputProps) -> Html {
+    let input_ref = use_node_ref();
+
+    // Mirrors the textarea's value. The textarea is deliberately NOT
+    // value-bound — binding it fights the caret — so this is a shadow of
+    // the DOM value, written on `input` and cleared with it on submit.
+    let text = use_state_eq(String::new);
+    let submit = {
+        let agent = props.agent.clone();
+        let input_ref = input_ref.clone();
+        let text = text.clone();
+        Callback::from(move |()| {
+            if agent.is_busy() {
+                return;
+            }
+
+            if let Some(elem) = input_ref.cast::<web_sys::HtmlTextAreaElement>() {
+                let prompt = elem.value().trim().to_owned();
+                if prompt.is_empty() {
+                    return;
+                }
+
+                elem.set_value("");
+                text.set(String::new());
+                let agent = agent.clone();
+                wasm_bindgen_futures::spawn_local(async move {
+                    // Failures land in the transcript; nothing to propagate.
+                    let _ = agent.run_prompt(prompt).await;
+                });
+            }
+        })
+    };
+
+    let onkeydown = {
+        let submit = submit.clone();
+        Callback::from(move |event: KeyboardEvent| {
+            if event.key() == "Enter" && !event.shift_key() {
+                event.prevent_default();
+                submit.emit(());
+            }
+        })
+    };
+
+    // `input` fires after the value settles and covers paste, cut and
+    // Shift+Enter newlines, none of which `keydown` sees correctly.
+    let oninput = {
+        let input_ref = input_ref.clone();
+        let text = text.clone();
+        Callback::from(move |_: InputEvent| {
+            if let Some(elem) = input_ref.cast::<web_sys::HtmlTextAreaElement>() {
+                text.set(elem.value());
+            }
+        })
+    };
+
+    let onsend = submit.reform(|_: MouseEvent| ());
+    let onstop = {
+        let agent = props.agent.clone();
+        Callback::from(move |_: MouseEvent| agent.stop())
+    };
+
+    html! {
+        <div id="chat_input_row">
+            <div id="chat_input_scroll" class="scrollable">
+                <MirroredTextarea
+                    id="chat_input"
+                    class="chat-input-box"
+                    mirror={html! { (*text).clone() }}
+                    is_empty={text.is_empty()}
+                    textarea_ref={input_ref}
+                    placeholder="Ask about your data\u{2026}"
+                    disabled={props.busy}
+                    {onkeydown}
+                    {oninput}
+                />
+            </div>
+            if props.busy {
+                <button id="chat_stop_button" onclick={onstop} />
+            } else {
+                <button id="chat_send_button" onclick={onsend} />
+            }
+        </div>
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct ChatPanelProps {
+    pub agent: AgentSlot,
+}
+
+#[function_component]
+pub fn ChatPanel(props: &ChatPanelProps) -> Html {
+    let update = use_force_update();
+    {
+        let agent = props.agent.clone();
+        use_effect_with((), move |_| {
+            let sub = agent
+                .on_update
+                .add_notify_listener(&Callback::from(move |_| update.force_update()));
+
+            move || drop(sub)
+        });
+    }
+
+    // Autoscroll only while the user is pinned at the bottom — reading
+    // scrolled-back transcript must survive incoming streaming deltas.
+    // `onscroll` fires for programmatic scrolls too, so scrolling to the
+    // bottom re-pins consistently.
+    let log_ref = use_node_ref();
+    let scroll_pinned = use_mut_ref(|| true);
+    let onscroll = {
+        let log_ref = log_ref.clone();
+        let scroll_pinned = scroll_pinned.clone();
+        Callback::from(move |_: Event| {
+            if let Some(elem) = log_ref.cast::<web_sys::Element>() {
+                let gap = elem.scroll_height() - elem.scroll_top() - elem.client_height();
+                *scroll_pinned.borrow_mut() = gap < 30;
+            }
+        })
+    };
+
+    {
+        let log_ref = log_ref.clone();
+        let scroll_pinned = scroll_pinned.clone();
+        use_effect(move || {
+            if let Some(elem) = log_ref.cast::<web_sys::Element>()
+                && *scroll_pinned.borrow()
+            {
+                elem.set_scroll_top(elem.scroll_height());
+            }
+        });
+    }
+
+    let busy = props.agent.is_busy();
+    let entries = props
+        .agent
+        .transcript()
+        .into_iter()
+        .map(|entry| match entry {
+            ChatEntry::User(text) => html! {
+                <div class="chat-message chat-user">{ text.trim() }</div>
+            },
+            ChatEntry::Assistant { text, reasoning } => html! {
+                <div class="chat-message chat-assistant">
+                    if let Some(reasoning) = reasoning { <ChatReasoning {reasoning} open=false /> }
+                    { render_markdown(&text) }
+                </div>
+            },
+            ChatEntry::Tool { name, args, error } => {
+                let class = if error.is_some() {
+                    "chat-tool-chip chat-tool-chip-error"
+                } else {
+                    "chat-tool-chip"
+                };
+
+                let title = match &error {
+                    Some(err) => format!("{err}\n\n{args}"),
+                    None => args.clone(),
+                };
+
+                html! { <div {class} {title}>{ name }</div> }
+            },
+            ChatEntry::Error(text) => html! { <div class="chat-message chat-error">{ text }</div> },
+        })
+        .collect::<Html>();
+
+    // The in-flight turn's streaming tail: reasoning renders auto-OPEN
+    // while it is the only signal, collapsing once answer text starts;
+    // no deltas yet (or between tool rounds) shows the typing dots.
+    let pending = props.agent.pending();
+    let tail = match &pending {
+        Some((text, reasoning)) if !text.is_empty() || !reasoning.is_empty() => html! {
+            <div class="chat-message chat-assistant chat-streaming">
+                if !reasoning.is_empty() {
+                    <ChatReasoning reasoning={reasoning.clone()} open={text.is_empty()} />
+                }
+                if !text.is_empty() {
+                    { render_markdown(text) }
+                }
+            </div>
+        },
+        _ if busy => html! {
+            <div class="chat-message chat-assistant chat-pending"><span /><span /><span /></div>
+        },
+        _ => html! {},
+    };
+
+    html! {
+        <div id="chat_panel">
+            <div id="chat_log" class="scrollable" ref={log_ref} {onscroll}>{ entries }{ tail }</div>
+            <ChatInput agent={props.agent.clone()} {busy} />
+            <div id="chat_badge">{ props.agent.label().unwrap_or_default() }</div>
+        </div>
+    }
+}

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

@@ -18,10 +18,10 @@ use yew::prelude::*;
 
 use super::InPlaceColumn;
 use super::aggregate_selector::*;
+use super::column_selector_column_row::ColumnSelectorColumnRow;
 use super::expr_edit_button::*;
 use crate::components::column_dropdown::ColumnDropDownElement;
 use crate::components::column_selector::{EmptyColumn, InvalidColumn};
-use crate::components::type_icon::TypeIcon;
 use crate::config::ColumnSelectMode;
 use crate::presentation::{ColumnLocator, Presentation};
 use crate::queries::*;
@@ -66,6 +66,10 @@ pub struct ActiveColumnProps {
     #[prop_or_default]
     pub is_expression: bool,
 
+    /// Whether this column is a window column.
+    #[prop_or_default]
+    pub is_window: bool,
+
     /// Whether the expression/config edit button should be shown.  Computed
     /// by the parent (`is_expression || can_render_column_styles`).
     #[prop_or_default]
@@ -95,6 +99,7 @@ impl PartialEq for ActiveColumnProps {
             && self.is_aggregated == rhs.is_aggregated
             && self.is_editing == rhs.is_editing
             && self.is_expression == rhs.is_expression
+            && self.is_window == rhs.is_window
             && self.show_edit_btn == rhs.show_edit_btn
             && self.col_type == rhs.col_type
             && self.metadata == rhs.metadata
@@ -204,10 +209,7 @@ impl Component for ActiveColumn {
             Named(String),
         }
 
-        let mut classes = classes!["column-selector-draggable"];
-        if ctx.props().is_aggregated {
-            classes.push("show-aggregate");
-        };
+        let mut classes = classes![];
 
         let mut outer_classes = classes!["column-selector-column"];
         if self.mouseover {
@@ -344,6 +346,7 @@ impl Component for ActiveColumn {
                     .callback(|event: MouseEvent| MouseEnter(event.which() == 0));
 
                 let is_expression = ctx.props().is_expression;
+                let is_window = ctx.props().is_window;
                 let show_edit_btn = ctx.props().show_edit_btn;
                 let mut class = ctx.props().renderer.metadata().select_mode.css();
                 if is_required {
@@ -363,17 +366,14 @@ impl Component for ActiveColumn {
                         ondragenter={ondragenter.clone()}
                     >
                         <span {class} onmousedown={remove_column} />
-                        <div
-                            class={classes}
-                            ref={&self.add_expression_ref}
-                            draggable="true"
-                            {ondragstart}
-                            {ondragend}
-                        >
-                            <div class="column-selector-column-border">
-                                <span class="drag-handle icon" />
-                                <TypeIcon ty={col_type} />
-                                if ctx.props().is_aggregated {
+                        <ColumnSelectorColumnRow
+                            name={name.clone()}
+                            col_type={Some(col_type)}
+                            wrapper_class={classes}
+                            wrapper_ref={&self.add_expression_ref}
+                            ondragstart={Some(ondragstart)}
+                            ondragend={Some(ondragend.clone())}
+                            aggregate={ctx.props().is_aggregated.then(|| html! {
                                     <AggregateSelector
                                         column={name.clone()}
                                         aggregate={ctx.props().get_aggregate(&name)}
@@ -382,24 +382,18 @@ impl Component for ActiveColumn {
                                         renderer={&ctx.props().renderer}
                                         session={&ctx.props().session}
                                     />
-                                }
-                                <span
-                                    class="column_name"
-                                >
-                                    { name.clone() }
-                                </span>
-                                if !ctx.props().is_aggregated {
-                                    <span class="column-selector--spacer" />
-                                }
+                                })}
+                            trailing={html! {
                                 <ExprEditButton
+                                    {is_window}
                                     name={name.clone()}
                                     on_open_expr_panel={&ctx.props().on_open_expr_panel}
                                     {is_expression}
                                     is_disabled={!show_edit_btn}
                                     is_editing={ctx.props().is_editing}
                                 />
-                            </div>
-                        </div>
+                            }}
+                        />
                     </div>
                 }
             },

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

@@ -0,0 +1,73 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use perspective_client::config::ColumnType;
+use web_sys::DragEvent;
+use yew::prelude::*;
+
+use crate::components::type_icon::TypeIcon;
+
+/// The draggable row of a `column-selector-column`
+#[derive(Clone, PartialEq, Properties)]
+pub struct ColumnSelectorColumnRowProps {
+    pub name: String,
+
+    #[prop_or_default]
+    pub col_type: Option<ColumnType>,
+
+    #[prop_or_default]
+    pub aggregate: Option<Html>,
+
+    /// Trailing affordance (e.g. the edit button in the active list).
+    #[prop_or_default]
+    pub trailing: Html,
+
+    #[prop_or_default]
+    pub wrapper_class: Classes,
+
+    #[prop_or_default]
+    pub wrapper_ref: NodeRef,
+
+    #[prop_or_default]
+    pub ondragstart: Option<Callback<DragEvent>>,
+
+    #[prop_or_default]
+    pub ondragend: Option<Callback<DragEvent>>,
+}
+
+#[function_component]
+pub fn ColumnSelectorColumnRow(p: &ColumnSelectorColumnRowProps) -> Html {
+    let mut classes = classes!["column-selector-draggable"];
+    if p.aggregate.is_some() {
+        classes.push("show-aggregate");
+    }
+
+    classes.extend(p.wrapper_class.clone());
+    html! {
+        <div
+            class={classes}
+            ref={&p.wrapper_ref}
+            draggable={p.ondragstart.is_some().then_some("true")}
+            ondragstart={p.ondragstart.clone()}
+            ondragend={p.ondragend.clone()}
+        >
+            <div class="column-selector-column-border">
+                <span class="drag-handle icon" />
+                <TypeIcon ty={p.col_type.unwrap_or(ColumnType::String)} />
+                if let Some(aggregate) = &p.aggregate { { aggregate.clone() } }
+                <span class="column_name">{ p.name.clone() }</span>
+                if p.aggregate.is_none() { <span class="column-selector--spacer" /> }
+                { p.trailing.clone() }
+            </div>
+        </div>
+    }
+}

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

@@ -24,6 +24,7 @@ use crate::components::column_dropdown::{ColumnDropDownElement, ColumnDropDownPo
 use crate::components::containers::dragdrop_list::*;
 use crate::components::containers::select::{Select, SelectItem};
 use crate::components::filter_dropdown::{FilterDropDownElement, FilterDropDownPortal};
+use crate::config::PluginStaticConfig;
 use crate::presentation::Presentation;
 use crate::renderer::*;
 use crate::session::drag_drop_update::*;
@@ -48,6 +49,14 @@ pub struct ConfigSelectorProps {
     /// Session metadata snapshot — threaded from `SessionProps`.
     pub metadata: SessionMetadataRc,
 
+    /// The ACTIVE plugin's declared contract, threaded as a VALUE prop.
+    /// Read from `renderer.metadata()` during render instead, the pivot
+    /// labels went stale: `renderer` is deliberately excluded from prop
+    /// equality, so switching Y Line back to Datagrid — same view config,
+    /// same named-slot count — re-rendered nothing and left the previous
+    /// plugin's role labels on screen until the panel was reopened.
+    pub plugin_static_config: Rc<PluginStaticConfig>,
+
     /// Selected theme name, threaded for PortalModal consumers.
     pub selected_theme: Option<String>,
 
@@ -63,6 +72,7 @@ impl PartialEq for ConfigSelectorProps {
             && self.drag_column == other.drag_column
             && self.metadata == other.metadata
             && self.selected_theme == other.selected_theme
+            && self.plugin_static_config == other.plugin_static_config
     }
 }
 
@@ -76,6 +86,7 @@ pub enum ConfigSelectorMsg {
     TransposePivots,
     New(DragTarget, InPlaceColumn),
     UpdateGroupRollupMode(GroupRollupMode),
+    UpdateSplitRollupMode(SplitRollupMode),
 }
 
 #[derive(Clone)]
@@ -156,6 +167,22 @@ impl Component for ConfigSelector {
 
                 false
             },
+            ConfigSelectorMsg::UpdateSplitRollupMode(mode) => {
+                let config = ViewConfigUpdate {
+                    split_rollup_mode: Some(mode),
+                    ..ViewConfigUpdate::default()
+                };
+
+                {
+                    let session = ctx.props().session.clone();
+                    let renderer = ctx.props().renderer.clone();
+                    if let Ok(task) = apply_and_render(&session, &renderer, config) {
+                        spawn_owned("config-selector", task);
+                    }
+                }
+
+                false
+            },
             ConfigSelectorMsg::Close(index, DragTarget::GroupBy) => {
                 if ctx.props().view_config.group_rollup_mode == GroupRollupMode::Total {
                     let requirements = ctx.props().renderer.metadata();
@@ -235,7 +262,7 @@ impl Component for ConfigSelector {
             },
             ConfigSelectorMsg::Close(..) => false,
             ConfigSelectorMsg::Drop(column, action, effect, index)
-                if action != DragTarget::Active =>
+                if action != DragTarget::Active && !action.is_staged() =>
             {
                 let col_type = ctx
                     .props()
@@ -369,6 +396,12 @@ impl Component for ConfigSelector {
                 ctx.props().onselect.emit(());
                 false
             },
+            ConfigSelectorMsg::New(
+                DragTarget::WindowSource
+                | DragTarget::WindowOrderBy
+                | DragTarget::WindowPartitionBy,
+                _,
+            ) => false,
             ConfigSelectorMsg::New(DragTarget::Filter, InPlaceColumn::Column(column)) => {
                 let mut view_config = (*ctx.props().view_config).clone();
                 let op = ctx.props().default_op(column.as_str()).unwrap_or_default();
@@ -525,6 +558,18 @@ impl Component for ConfigSelector {
             ..
         } = ctx.props();
         let config = &ctx.props().view_config;
+
+        // What the ACTIVE plugin says these pivots draw — the same
+        // declaration the agent reads through `list_plugins`, so the
+        // label a user sees and the role a model is told cannot drift.
+        let plugin_roles = {
+            let plugin = &ctx.props().plugin_static_config;
+            (
+                plugin.group_by_role.clone().map(AttrValue::from),
+                plugin.split_by_role.clone().map(AttrValue::from),
+            )
+        };
+
         let transpose = ctx.link().callback(|_| ConfigSelectorMsg::TransposePivots);
         let column_dropdown = self.column_dropdown.clone();
         let mut class = classes!();
@@ -556,6 +601,17 @@ impl Component for ConfigSelector {
 
         let group_rollups = requirements.get_group_rollups(&rollup_features);
 
+        let on_split_rollup_mode = ctx
+            .link()
+            .callback(ConfigSelectorMsg::UpdateSplitRollupMode);
+
+        let split_rollup_features = metadata
+            .get_features()
+            .map(|x| x.get_split_rollup_modes())
+            .unwrap();
+
+        let split_rollups = requirements.get_split_rollups(&split_rollup_features);
+
         html! {
             <>
                 <div slot="top_panel" id="top_panel" {class} ondragend={dragend}>
@@ -587,6 +643,7 @@ impl Component for ConfigSelector {
                     if features.group_by {
                         <GroupBySelector
                             name="group_by"
+                            role_label={plugin_roles.0.clone()}
                             disabled={config.group_rollup_mode == GroupRollupMode::Total}
                             parent={ctx.link().clone()}
                             column_dropdown={column_dropdown.clone()}
@@ -609,18 +666,36 @@ impl Component for ConfigSelector {
                         </GroupBySelector>
                     }
                     if features.split_by {
-                        if !config.split_by.is_empty() {
+                        if !config.split_by.is_empty() || split_rollups.len() > 1 {
                             <div class="pivot_controls">
-                                <span
-                                    id="transpose_button"
-                                    class="rrow centered"
-                                    title="Transpose Pivots"
-                                    onmousedown={transpose}
-                                />
+                                if split_rollups.len() > 1 {
+                                    <Select<SplitRollupMode>
+                                        id="split_rollup_mode_selector"
+                                        wrapper_class="split_rollup_wrapper"
+                                        is_autosize=true
+                                        values={Rc::new(
+                                        split_rollups
+                                            .iter()
+                                            .map(|x| SelectItem::Option(*x))
+                                            .collect(),
+                                    )}
+                                        selected={config.split_rollup_mode}
+                                        on_select={on_split_rollup_mode}
+                                    />
+                                }
+                                if !config.split_by.is_empty() {
+                                    <span
+                                        id="transpose_button"
+                                        class="rrow centered"
+                                        title="Transpose Pivots"
+                                        onmousedown={transpose}
+                                    />
+                                }
                             </div>
                         }
                         <SplitBySelector
                             name="split_by"
+                            role_label={plugin_roles.1.clone()}
                             parent={ctx.link().clone()}
                             column_dropdown={column_dropdown.clone()}
                             exclude={config.split_by.iter().cloned().collect::<HashSet<_>>()}

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

@@ -22,6 +22,10 @@ pub struct ExprEditButtonProps {
     /// Is this an expression column?
     pub is_expression: bool,
 
+    /// Is this a window column?
+    #[prop_or_default]
+    pub is_window: bool,
+
     /// Fires when the config/expresison button is clicked.
     pub on_open_expr_panel: Callback<ColumnLocator>,
 
@@ -38,7 +42,9 @@ pub struct ExprEditButtonProps {
 #[function_component]
 pub fn ExprEditButton(p: &ExprEditButtonProps) -> Html {
     let onmousedown = yew::use_callback(p.clone(), |_, p| {
-        let name = if p.is_expression {
+        let name = if p.is_window {
+            ColumnLocator::Window(p.name.clone())
+        } else if p.is_expression {
             ColumnLocator::Expression(p.name.clone())
         } else {
             ColumnLocator::Table(p.name.clone())