@perspective-dev/viewer 5.1.0 → 5.3.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

@@ -23,7 +23,7 @@ use super::expr_edit_button::*;
 use crate::components::column_dropdown::ColumnDropDownElement;
 use crate::components::column_selector::{EmptyColumn, InvalidColumn};
 use crate::config::ColumnSelectMode;
-use crate::presentation::{ColumnLocator, Presentation};
+use crate::presentation::{ColumnSettingsTarget, Presentation};
 use crate::queries::*;
 use crate::renderer::*;
 use crate::session::*;
@@ -51,7 +51,7 @@ pub struct ActiveColumnProps {
     pub onselect: Callback<()>,
 
     /// Fires when this component's expression/config button is clicked.
-    pub on_open_expr_panel: Callback<ColumnLocator>,
+    pub on_open_expr_panel: Callback<ColumnSettingsTarget>,
 
     /// Is this column in a grouped context (does the aggregate selector
     /// need to be visible)?

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

@@ -12,12 +12,12 @@
 
 use yew::prelude::*;
 
-use super::ColumnLocator;
+use super::{ColumnLocator, ColumnSettingsTarget};
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct AddExpressionButtonProps {
     // Fires when this button is clicked.
-    pub on_open_expr_panel: Callback<ColumnLocator>,
+    pub on_open_expr_panel: Callback<ColumnSettingsTarget>,
 
     /// The column this butotn will open configuration for.
     pub selected_column: Option<ColumnLocator>,
@@ -47,7 +47,7 @@ pub fn AddExpressionButton(p: &AddExpressionButtonProps) -> Html {
 
     let onmousedown = p
         .on_open_expr_panel
-        .reform(|_| ColumnLocator::NewExpression);
+        .reform(|_| ColumnSettingsTarget::NewExpression);
 
     let class = if *is_mouseover || matches!(p.selected_column, Some(ColumnLocator::NewExpression))
     {

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

@@ -10,9 +10,9 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use std::collections::HashSet;
 use std::rc::Rc;
 
+use itertools::Itertools;
 use perspective_client::config::*;
 use yew::prelude::*;
 
@@ -163,8 +163,7 @@ impl AggregateSelector {
                 Aggregate::MultiAggregate(x, _) => Some(x),
                 _ => None,
             })
-            .collect::<HashSet<_>>()
-            .into_iter()
+            .unique()
             .map(|x| {
                 SelectItem::OptGroup(
                     x.clone().into(),

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();
@@ -252,6 +279,14 @@ impl Component for ConfigSelector {
                     ctx.props().metadata.get_features().unwrap(),
                 );
 
+                super::close_column_settings_if_displaced(
+                    &ctx.props().presentation,
+                    &ctx.props().renderer,
+                    &ctx.props().metadata,
+                    &ctx.props().view_config,
+                    &update,
+                );
+
                 {
                     let session = ctx.props().session.clone();
                     let renderer = ctx.props().renderer.clone();
@@ -531,6 +566,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!();
@@ -562,6 +609,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}>
@@ -593,6 +651,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()}
@@ -615,18 +674,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

@@ -12,7 +12,7 @@
 
 use yew::prelude::*;
 
-use super::ColumnLocator;
+use super::ColumnSettingsTarget;
 
 #[derive(PartialEq, Clone, Properties)]
 pub struct ExprEditButtonProps {
@@ -27,7 +27,7 @@ pub struct ExprEditButtonProps {
     pub is_window: bool,
 
     /// Fires when the config/expresison button is clicked.
-    pub on_open_expr_panel: Callback<ColumnLocator>,
+    pub on_open_expr_panel: Callback<ColumnSettingsTarget>,
 
     /// Is the expression/config panel open?
     pub is_editing: bool,
@@ -42,14 +42,8 @@ pub struct ExprEditButtonProps {
 #[function_component]
 pub fn ExprEditButton(p: &ExprEditButtonProps) -> Html {
     let onmousedown = yew::use_callback(p.clone(), |_, p| {
-        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())
-        };
-        p.on_open_expr_panel.emit(name)
+        p.on_open_expr_panel
+            .emit(ColumnSettingsTarget::Column(p.name.clone()))
     });
 
     let class = if p.is_disabled {

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

@@ -18,7 +18,7 @@ use yew::prelude::*;
 use super::expr_edit_button::*;
 use crate::components::type_icon::TypeIcon;
 use crate::config::ColumnSelectMode;
-use crate::presentation::{ColumnLocator, Presentation};
+use crate::presentation::{ColumnSettingsTarget, Presentation};
 use crate::renderer::*;
 use crate::session::*;
 use crate::tasks::apply_and_render;
@@ -61,7 +61,7 @@ pub struct InactiveColumnProps {
     pub onselect: Callback<()>,
 
     /// Fires when this column's expression/config button is clicked.
-    pub on_open_expr_panel: Callback<ColumnLocator>,
+    pub on_open_expr_panel: Callback<ColumnSettingsTarget>,
 
     // State
     pub presentation: Presentation,