@perspective-dev/viewer 5.1.0 → 5.2.0

package/src/rust/components/form/mirrored_textarea.rs

@@ -0,0 +1,165 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! A `<textarea>` whose box is sized by its own text.
+//!
+//! A textarea cannot grow with its content — it scrolls at whatever height
+//! it was given. The technique here, shared by [`CodeEditor`] and the chat
+//! prompt, is to make the textarea a purely functional layer: it takes the
+//! keystrokes, the selection and the caret, but paints no glyphs
+//! (`color: transparent`). Underneath sits a `<pre>` mirror of the same
+//! characters which IS painted and IS in flow, so the ordinary layout
+//! engine sizes the box.
+//!
+//! This is deliberately not a JS measure-and-resize loop
+//! (`scrollHeight` → inline `height`): that re-measures on a reflow it
+//! just forced, drifts whenever font-size or the loaded font changes
+//! without an `input` event to re-trigger it, and jitters at fractional
+//! line heights. Here the two layers share their text metrics, so growth
+//! is exact by construction and free at runtime.
+//!
+//! Consumers decide the AXES: the mirror's `white-space` governs growth,
+//! so `pre-wrap` grows only downward (the chat prompt) while `pre` also
+//! grows sideways (the expression editor). They also own the box —
+//! padding, borders, min/max size — with `mirrored-textarea.css` fixing
+//! only what MUST agree between the two layers.
+//!
+//! [`CodeEditor`]: super::code_editor::CodeEditor
+
+use yew::html::IntoPropValue;
+use yew::prelude::*;
+
+#[derive(Clone)]
+pub struct Mirror(pub Html);
+
+impl PartialEq for Mirror {
+    fn eq(&self, _other: &Self) -> bool {
+        false
+    }
+}
+
+impl IntoPropValue<Mirror> for Html {
+    fn into_prop_value(self) -> Mirror {
+        Mirror(self)
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct MirroredTextareaProps {
+    /// `id` of the `<textarea>` itself — consumer CSS and tests key on it.
+    pub id: AttrValue,
+
+    /// The mirror's content: the same characters the textarea holds,
+    /// as plain text, or marked up (`CodeEditor` passes highlighted
+    /// spans). A stale mirror means a caret that drifts from the glyphs,
+    /// so this is re-rendered unconditionally — see [`Mirror`].
+    pub mirror: Mirror,
+
+    /// `id` of the mirror `<pre>`, for consumers that style it directly.
+    #[prop_or_default]
+    pub mirror_id: Option<AttrValue>,
+
+    /// Extra classes for the positioned container.
+    #[prop_or_default]
+    pub class: Classes,
+
+    #[prop_or_default]
+    pub textarea_ref: NodeRef,
+
+    #[prop_or_default]
+    pub mirror_ref: NodeRef,
+
+    /// The `placeholder` ATTRIBUTE, which exists for assistive tech: it
+    /// is painted transparent, because a CSS-`content` label cannot be
+    /// written into an attribute and so cannot be localized. The text a
+    /// sighted user reads comes from the mirror instead — see
+    /// [`Self::is_empty`].
+    #[prop_or_default]
+    pub placeholder: AttrValue,
+
+    /// Whether [`Self::mirror`] is empty, which the component cannot see
+    /// for itself (the mirror is opaque `Html`). Tags the mirror with
+    /// `is-empty` so a consumer's stylesheet can supply placeholder text
+    /// through `content`, and therefore through the intl label
+    /// mechanism, rather than through the untranslatable attribute.
+    #[prop_or_default]
+    pub is_empty: bool,
+
+    #[prop_or_default]
+    pub disabled: bool,
+
+    #[prop_or_default]
+    pub oninput: Callback<InputEvent>,
+
+    #[prop_or_default]
+    pub onkeydown: Callback<KeyboardEvent>,
+
+    #[prop_or_default]
+    pub onscroll: Callback<Event>,
+
+    /// Extra nodes inside the positioned container, e.g. `CodeEditor`'s
+    /// minimum-height sizer.
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[function_component]
+pub fn MirroredTextarea(props: &MirroredTextareaProps) -> Html {
+    html! {
+        <div class={classes!("mirrored-textarea", props.class.clone())}>
+            // `scrollable` is the viewer's webkit scrollbar styling: the
+            // input layer scrolls wherever a consumer lets it (the
+            // expression editor syncs its `scrollTop` to the mirror and
+            // line numbers), and is inert where it does not (the chat
+            // prompt, whose wrapper scrolls instead).
+            <textarea
+                id={props.id.clone()}
+                ref={props.textarea_ref.clone()}
+                class="mirrored-textarea-input scrollable"
+                spellcheck="false"
+                placeholder={props.placeholder.clone()}
+                disabled={props.disabled}
+                oninput={props.oninput.clone()}
+                onkeydown={props.onkeydown.clone()}
+                onscroll={props.onscroll.clone()}
+            />
+            { props.children.iter().collect::<Html>() }
+            <pre
+                id={props.mirror_id.clone()}
+                ref={props.mirror_ref.clone()}
+                class={classes!(
+                    "mirrored-textarea-mirror",
+                    props.is_empty.then_some("is-empty"),
+                )}
+            >
+                { props.mirror.0.clone() }
+                // A trailing newline opens a line box in the textarea but
+                // not in the `<pre>` (which has no caret to place there),
+                // so the mirror would come up one line short exactly when
+                // the text is about to overflow. The space forces it.
+                { " " }
+            </pre>
+        </div>
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn mirror_never_compares_equal() {
+        let mirror = Mirror(Html::default());
+        assert!(mirror != mirror.clone());
+        assert!(Mirror(Html::default()) != Mirror(Html::default()));
+    }
+}

package/src/rust/components/form/mod.rs

@@ -20,6 +20,7 @@ pub mod code_editor;
 pub mod color_range_selector;
 pub mod color_selector;
 pub mod debug;
+pub mod mirrored_textarea;
 pub mod number_field;
 pub mod number_input;
 pub mod number_range_field;

package/src/rust/components/mod.rs

@@ -14,6 +14,8 @@
 //! necessary for public Custom Elements.  The rest are internal components of
 //! these 4.
 
+#[cfg(feature = "llm-agent")]
+pub mod chat_panel;
 pub mod column_dropdown;
 pub mod column_selector;
 pub mod column_settings_sidebar;

package/src/rust/components/settings_panel.rs

@@ -21,13 +21,14 @@ use super::plugin_selector::PluginSelector;
 use super::plugin_tab::PluginTab;
 use crate::components::containers::sidebar_close_button::SidebarCloseButton;
 use crate::components::form::debug::DebugPanel;
-use crate::config::PluginUpdate;
+use crate::config::{PluginStaticConfig, PluginUpdate};
 use crate::presentation::{ColumnLocator, OpenColumnSettings, Presentation};
 use crate::renderer::*;
 use crate::session::column_defaults_update::*;
 use crate::session::*;
 use crate::tasks::update_plugin_and_render;
 use crate::utils::*;
+use crate::workspace::Workspace;
 
 #[derive(Clone, Properties)]
 pub struct SettingsPanelProps {
@@ -42,6 +43,15 @@ pub struct SettingsPanelProps {
     pub available_plugins: PtrEqRc<Vec<String>>,
     pub has_table: Option<TableLoadState>,
     pub named_column_count: usize,
+
+    /// The ACTIVE plugin's declared contract, threaded as a value prop so
+    /// that switching plugins re-renders the panes that read it. The
+    /// renderer handle cannot serve this: it is excluded from prop
+    /// equality (it is a handle, not a value), so a plugin swap that
+    /// leaves the view config untouched — Y Line back to Datagrid, both
+    /// of which name one column slot — would otherwise change nothing any
+    /// component compares.
+    pub plugin_static_config: Rc<PluginStaticConfig>,
     pub view_config: PtrEqRc<ViewConfig>,
 
     /// Snapshot of the active plugin's `plugin_config` bucket, threaded
@@ -90,6 +100,7 @@ pub struct SettingsPanelProps {
     pub session: Session,
     pub renderer: Renderer,
     pub presentation: Presentation,
+    pub workspace: Workspace,
 }
 
 impl PartialEq for SettingsPanelProps {
@@ -99,6 +110,7 @@ impl PartialEq for SettingsPanelProps {
             && self.available_plugins == rhs.available_plugins
             && self.has_table == rhs.has_table
             && self.named_column_count == rhs.named_column_count
+            && self.plugin_static_config == rhs.plugin_static_config
             && self.view_config == rhs.view_config
             && self.plugin_config == rhs.plugin_config
             && self.drag_column == rhs.drag_column
@@ -116,6 +128,11 @@ pub enum SelectedTab {
     Query,
     Plugin,
     Debug,
+
+    /// The embedded LLM agent's chat panel. The variant exists in every
+    /// build; its tab button and body render only under the `llm-agent`
+    /// feature, and only once `agentConfig()` has been called.
+    Chat,
 }
 
 #[function_component]
@@ -186,8 +203,15 @@ pub fn SettingsPanel(props: &SettingsPanelProps) -> Html {
                 .unwrap();
 
             let group_rollups = plugin_config.get_group_rollups(&rollup_features);
+            let split_rollup_features = session_metadata
+                .get_features()
+                .map(|x| x.get_split_rollup_modes())
+                .unwrap();
+
+            let split_rollups = plugin_config.get_split_rollups(&split_rollup_features);
             let mut update = ViewConfigUpdate {
                 group_rollup_mode: group_rollups.first().cloned(),
+                split_rollup_mode: split_rollups.first().cloned(),
                 ..ViewConfigUpdate::default()
             };
 
@@ -237,6 +261,52 @@ pub fn SettingsPanel(props: &SettingsPanelProps) -> Html {
         }
     };
 
+    // The chat tab is zero-affordance until `agentConfig()` is called; the
+    // subscription re-renders this panel when that happens (and as the
+    // transcript updates while the chat body is mounted).
+    #[cfg(feature = "llm-agent")]
+    let (chat_tab_button, chat_body) = {
+        let update = use_force_update();
+        let agent = presentation.agent.clone();
+        use_effect_with((), move |_| {
+            let sub = agent
+                .on_update
+                .add_notify_listener(&Callback::from(move |_| update.force_update()));
+
+            move || drop(sub)
+        });
+
+        let button = if presentation.agent.is_configured() {
+            let on_select_column = props.on_select_column.clone();
+            let set_chat = {
+                let on_select_tab = props.on_select_tab.clone();
+                Callback::from(move |_: PointerEvent| {
+                    on_select_tab.emit(SelectedTab::Chat);
+                    on_select_column.emit(None)
+                })
+            };
+
+            html! {
+                <div
+                    id="chat_tabbar_tab"
+                    class={tab_class(selected, SelectedTab::Chat)}
+                    onpointerdown={set_chat}
+                />
+            }
+        } else {
+            html! {}
+        };
+
+        let body = html! {
+            <crate::components::chat_panel::ChatPanel agent={presentation.agent.clone()} />
+        };
+
+        (button, body)
+    };
+
+    #[cfg(not(feature = "llm-agent"))]
+    let (chat_tab_button, chat_body) = (html! {}, html! {});
+
     let on_open_expr_panel = use_callback(props.on_select_column.clone(), |c, on_select| {
         on_select.emit(Some(c))
     });
@@ -270,6 +340,7 @@ pub fn SettingsPanel(props: &SettingsPanelProps) -> Html {
                     class={tab_class(selected, SelectedTab::Debug)}
                     onpointerdown={set_debug}
                 />
+                { chat_tab_button }
             </div>
             if selected == SelectedTab::Query {
                 <ColumnSelector
@@ -278,6 +349,7 @@ pub fn SettingsPanel(props: &SettingsPanelProps) -> Html {
                     {selected_column}
                     has_table={props.has_table.clone()}
                     named_column_count={props.named_column_count}
+                    plugin_static_config={props.plugin_static_config.clone()}
                     view_config={props.view_config.clone()}
                     drag_column={props.drag_column.clone()}
                     metadata={props.metadata.clone()}
@@ -298,11 +370,14 @@ pub fn SettingsPanel(props: &SettingsPanelProps) -> Html {
                 // initial_width={width}
                 // on_auto_width={on_auto_width.clone()}
                 />
+            } else if selected == SelectedTab::Chat {
+                { chat_body }
             } else {
                 <DebugPanel
                     {presentation}
                     {renderer}
                     {session}
+                    workspace={props.workspace.clone()}
                     initial_width={width}
                     on_auto_width={on_auto_width.clone()}
                 />
@@ -310,7 +385,10 @@ pub fn SettingsPanel(props: &SettingsPanelProps) -> Html {
             // Sibling sizer keeps the panel width pinned across tab
             // switches; lives outside the tab-body so it survives the
             // tab subtree's unmount.
-            <div class="scroll-panel-auto-width" style={format!("width:{}px", width)} />
+            <div
+                class="scroll-panel-auto-width"
+                style={format!("width:{}px", width)}
+            />
         </div>
     }
 }

package/src/rust/components/viewer/panels.rs

@@ -27,7 +27,7 @@ use super::wiring::{
     clear_active_callbacks, create_active_subscriptions, inject_active_callbacks,
     subscribe_panel_titles,
 };
-use crate::config::{TableUpdate, ViewerConfigUpdate};
+use crate::config::{ViewerConfigInitial, ViewerConfigUpdate};
 use crate::queries::*;
 use crate::renderer::Renderer;
 use crate::session::*;
@@ -216,18 +216,18 @@ impl PerspectiveViewer {
 
     pub(super) fn on_new_panel(&mut self, ctx: &Context<Self>, id: String) -> bool {
         if let Some(panel) = ctx.props().workspace.panel(&PanelId::from(id)) {
-            let table_name = panel.session.get_table().map(|t| t.get_name().to_owned());
+            let Some(table_name) = panel.session.get_table().map(|t| t.get_name().to_owned())
+            else {
+                tracing::warn!("Source panel has no `Table` to create a new panel from");
+                return false;
+            };
+
             let elem = ctx.props().elem.clone();
             let presentation = ctx.props().presentation.clone();
             let workspace = ctx.props().workspace.clone();
             let notify = ctx.link().callback(|_: ()| LayoutChanged);
             let activate = ctx.link().callback(|id| SetActivePanel(id, None));
             ApiFuture::spawn(async move {
-                let update = ViewerConfigUpdate {
-                    table: table_name.map(TableUpdate::Update).unwrap_or_default(),
-                    ..Default::default()
-                };
-
                 let client = panel.session.get_client();
                 let new_id = create_panel(
                     &elem,
@@ -235,7 +235,7 @@ impl PerspectiveViewer {
                     &workspace,
                     &notify,
                     None,
-                    update,
+                    ViewerConfigInitial::new(table_name).into(),
                     client,
                 )
                 .await?;
@@ -273,18 +273,13 @@ impl PerspectiveViewer {
         let notify = ctx.link().callback(|_: ()| LayoutChanged);
         let activate = ctx.link().callback(|id| SetActivePanel(id, None));
         ApiFuture::spawn(async move {
-            let update = ViewerConfigUpdate {
-                table: TableUpdate::Update(table),
-                ..Default::default()
-            };
-
             let new_id = create_panel(
                 &elem,
                 &presentation,
                 &workspace,
                 &notify,
                 None,
-                update,
+                ViewerConfigInitial::new(table).into(),
                 Some(client),
             )
             .await?;

package/src/rust/components/viewer/render.rs

@@ -94,6 +94,7 @@ impl PerspectiveViewer {
                     {available_plugins}
                     {has_table}
                     {named_column_count}
+                    plugin_static_config={self.renderer_props.config.clone()}
                     {view_config}
                     plugin_config={self.renderer_props.plugin_config.clone()}
                     {drag_column}
@@ -108,6 +109,7 @@ impl PerspectiveViewer {
                     {presentation}
                     {renderer}
                     {session}
+                    workspace={ctx.props().workspace.clone()}
                 />
             }
         } else {