@perspective-dev/viewer 5.2.0 → 5.3.0

package/src/rust/components/column_settings_sidebar.rs

@@ -42,6 +42,7 @@ use crate::tasks::{
     delete_expr, delete_window, save_expr, save_window, update_expr, update_window,
 };
 use crate::utils::PtrEqRc;
+use crate::workspace::Workspace;
 
 #[derive(Clone, Derivative, Properties)]
 #[derivative(Debug)]
@@ -91,12 +92,13 @@ pub struct ColumnSettingsPanelProps {
 
     #[derivative(Debug = "ignore")]
     pub session: Session,
+
+    #[derivative(Debug = "ignore")]
+    pub workspace: Workspace,
 }
 
-impl ColumnSettingsPanelProps {
-    /// Everything EXCEPT the trap-door `auto_width`: the props whose change
-    /// invalidates the drafts that `initialize` rebuilds.
-    fn identity_eq(&self, other: &Self) -> bool {
+impl PartialEq for ColumnSettingsPanelProps {
+    fn eq(&self, other: &Self) -> bool {
         self.selected_column == other.selected_column
             && self.selected_tab == other.selected_tab
             && self.plugin_name == other.plugin_name
@@ -104,14 +106,46 @@ impl ColumnSettingsPanelProps {
             && self.view_config == other.view_config
             && self.column_stats == other.column_stats
             && self.selected_theme == other.selected_theme
+            && self.auto_width == other.auto_width
+            && self.is_pinned == other.is_pinned
     }
 }
 
-impl PartialEq for ColumnSettingsPanelProps {
-    fn eq(&self, other: &Self) -> bool {
-        self.identity_eq(other)
-            && self.auto_width == other.auto_width
-            && self.is_pinned == other.is_pinned
+#[derive(Clone, PartialEq)]
+struct Initials {
+    column_name: String,
+    expr: Rc<String>,
+    header: Option<String>,
+    window: Option<WindowSpec>,
+}
+
+impl Initials {
+    fn of(props: &ColumnSettingsPanelProps) -> Self {
+        let column_name = props
+            .metadata
+            .locator_name_or_default(&props.selected_column);
+
+        let expr = props
+            .metadata
+            .get_expression_by_alias(&column_name)
+            .or_else(|| props.view_config.expressions.get(&column_name).cloned())
+            .unwrap_or_default();
+
+        let expr = Rc::new(expr);
+        let header = (*expr != column_name).then_some(column_name.clone());
+
+        let window = props
+            .selected_column
+            .name()
+            .and_then(|name| props.view_config.windows.get(name))
+            .cloned();
+
+        Self {
+            column_name,
+            expr,
+            header,
+            window,
+        }
     }
 }
 
@@ -172,22 +206,23 @@ impl Component for ColumnSettingsPanel {
             initial_window_value: None,
             window_value: None,
             tabs: vec![],
-            on_input: Callback::default(),
-            on_save: Callback::default(),
-            on_validate: Callback::default(),
+            on_input: ctx.link().callback(ColumnSettingsPanelMsg::SetExprValue),
+            on_save: ctx
+                .link()
+                .callback(ColumnSettingsPanelMsg::OnSaveAttributes),
+            on_validate: ctx.link().callback(ColumnSettingsPanelMsg::SetExprValid),
         };
 
-        this.initialize(ctx);
+        this.reset_to(ctx, Initials::of(ctx.props()));
         this
     }
 
     fn changed(&mut self, ctx: &yew::prelude::Context<Self>, old_props: &Self::Properties) -> bool {
-        // Only reached when props are unequal. Re-`initialize` (which wipes
-        // in-progress expression/window drafts) only on IDENTITY changes -
-        // a trap-door `auto_width` change re-renders the `Sidebar` sizer
-        // alone.
-        if !ctx.props().identity_eq(old_props) {
-            self.initialize(ctx);
+        let next = Initials::of(ctx.props());
+        if ctx.props().selected_column != old_props.selected_column || next != self.initials() {
+            self.reset_to(ctx, next);
+        } else {
+            self.refresh_derived(ctx);
         }
 
         true
@@ -353,9 +388,9 @@ impl Component for ColumnSettingsPanel {
         };
 
         let header_props = props!(EditableHeaderProps {
+            value: self.header_value.clone(),
             initial_value: self.initial_header_value.clone(),
             placeholder: header_placeholder,
-            reset_count: self.reset_count,
             editable: (ctx.props().selected_column.is_expr()
                 && matches!(
                     ctx.props().selected_tab,
@@ -374,7 +409,6 @@ impl Component for ColumnSettingsPanel {
                 ]
             }),
             metadata: ctx.props().metadata.clone(),
-            session: &ctx.props().session
         });
 
         let expr_editor = props!(ExpressionEditorProps {
@@ -382,6 +416,7 @@ impl Component for ColumnSettingsPanel {
             on_save: self.on_save.clone(),
             on_validate: self.on_validate.clone(),
             alias: ctx.props().selected_column.name().cloned(),
+            initial_expr: self.initial_expr_value.clone(),
             disabled: !ctx.props().selected_column.is_expr(),
             reset_count: self.reset_count,
             metadata: ctx.props().metadata.clone(),
@@ -457,6 +492,7 @@ impl Component for ColumnSettingsPanel {
             presentation: ctx.props().presentation.clone(),
             renderer: ctx.props().renderer.clone(),
             session: ctx.props().session.clone(),
+            workspace: ctx.props().workspace.clone(),
         };
 
         let tab_children = self.tabs.iter().map(|tab| match tab {
@@ -506,38 +542,22 @@ impl ColumnSettingsPanel {
         self.save_enabled = changed && valid;
     }
 
-    fn initialize(&mut self, ctx: &yew::prelude::Context<Self>) {
-        let column_name = ctx
-            .props()
-            .metadata
-            .locator_name_or_default(&ctx.props().selected_column);
-
-        let initial_expr_value = ctx
-            .props()
-            .metadata
-            .get_expression_by_alias(&column_name)
-            .unwrap_or_default();
-
-        let initial_expr_value = Rc::new(initial_expr_value);
-        let initial_header_value =
-            (*initial_expr_value != column_name).then_some(column_name.clone());
+    fn initials(&self) -> Initials {
+        Initials {
+            column_name: self.column_name.clone(),
+            expr: self.initial_expr_value.clone(),
+            header: self.initial_header_value.clone(),
+            window: self.initial_window_value.clone(),
+        }
+    }
 
-        let maybe_ty = ctx
+    fn refresh_derived(&mut self, ctx: &yew::prelude::Context<Self>) {
+        self.maybe_ty = ctx
             .props()
             .metadata
             .locator_view_type(&ctx.props().selected_column);
 
-        // Specs are unnamed (the `windows` map key names them, and the
-        // editable header owns naming in the UI), so drafts and saved specs
-        // compare directly.
-        let initial_window_value = ctx
-            .props()
-            .selected_column
-            .name()
-            .and_then(|name| ctx.props().view_config.windows.get(name))
-            .cloned();
-
-        let tabs = {
+        self.tabs = {
             let mut tabs = vec![];
             let is_new_expr = ctx.props().selected_column.is_new_expr();
             let show_styles = !is_new_expr
@@ -571,28 +591,27 @@ impl ColumnSettingsPanel {
 
             tabs
         };
+    }
 
-        let on_input = ctx.link().callback(ColumnSettingsPanelMsg::SetExprValue);
-        let on_save = ctx
-            .link()
-            .callback(ColumnSettingsPanelMsg::OnSaveAttributes);
-
-        let on_validate = ctx.link().callback(ColumnSettingsPanelMsg::SetExprValid);
-        *self = Self {
+    fn reset_to(&mut self, ctx: &yew::prelude::Context<Self>, initials: Initials) {
+        let Initials {
             column_name,
-            expr_value: initial_expr_value.clone(),
-            initial_expr_value,
-            header_value: initial_header_value.clone(),
-            initial_header_value,
-            maybe_ty,
-            window_value: initial_window_value.clone(),
-            initial_window_value,
-            tabs,
-            header_valid: true,
-            on_input,
-            on_save,
-            on_validate,
-            ..*self
-        }
+            expr,
+            header,
+            window,
+        } = initials;
+
+        self.column_name = column_name;
+        self.expr_value = expr.clone();
+        self.initial_expr_value = expr;
+        self.header_value = header.clone();
+        self.initial_header_value = header;
+        self.window_value = window.clone();
+        self.initial_window_value = window;
+        self.header_valid = true;
+        self.save_enabled = false;
+        self.reset_enabled = false;
+        self.reset_count = self.reset_count.wrapping_add(1);
+        self.refresh_derived(ctx);
     }
 }

package/src/rust/components/editable_header.rs

@@ -14,32 +14,30 @@ use std::rc::Rc;
 
 use itertools::Itertools;
 use web_sys::{FocusEvent, HtmlInputElement, KeyboardEvent};
-use yew::{Callback, Component, Html, NodeRef, Properties, TargetCast, classes, html};
+use yew::prelude::*;
 
 use super::type_icon::TypeIconType;
 use crate::components::type_icon::TypeIcon;
-use crate::session::{Session, SessionMetadataRc};
+use crate::session::SessionMetadataRc;
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct EditableHeaderProps {
     pub icon_type: Option<TypeIconType>,
     pub on_change: Callback<(Option<String>, bool)>,
     pub editable: bool,
+
+    /// The owner's draft.
+    pub value: Option<String>,
+
+    /// The saved name the draft is measured against.
     pub initial_value: Option<String>,
     pub placeholder: Rc<String>,
 
-    // TODO remove this pattern
-    #[prop_or_default]
-    pub reset_count: u8,
-
     #[prop_or_default]
     pub update_on_input: bool,
 
     /// Session metadata snapshot — threaded from `SessionProps`.
     pub metadata: SessionMetadataRc,
-
-    // State
-    pub session: Session,
 }
 
 impl EditableHeaderProps {
@@ -55,152 +53,95 @@ impl EditableHeaderProps {
             Some((idx, _)) => split[..idx].to_owned(),
         }
     }
-}
-
-pub enum EditableHeaderMsg {
-    SetNewValue(String),
-    OnClick(()),
-}
 
-#[derive(Debug)]
-pub struct EditableHeader {
-    noderef: NodeRef,
-    edited: bool,
-    valid: bool,
-    value: Option<String>,
-    placeholder: String,
-}
+    fn is_valid(&self, value: &Option<String>, placeholder: &str) -> bool {
+        let Some(value) = value else {
+            return true;
+        };
 
-impl Component for EditableHeader {
-    type Message = EditableHeaderMsg;
-    type Properties = EditableHeaderProps;
-
-    fn create(ctx: &yew::prelude::Context<Self>) -> Self {
-        Self {
-            value: ctx.props().initial_value.clone(),
-            placeholder: ctx.props().split_placeholder(),
-            valid: true,
-            noderef: NodeRef::default(),
-            edited: false,
+        if value == placeholder || Some(value) == self.initial_value.as_ref() {
+            return true;
         }
-    }
 
-    fn changed(&mut self, ctx: &yew::prelude::Context<Self>, old_props: &Self::Properties) -> bool {
-        if ctx.props().reset_count != old_props.reset_count {
-            self.value.clone_from(&ctx.props().initial_value);
-        }
-        if ctx.props().initial_value != old_props.initial_value {
-            self.edited = false;
-            self.value.clone_from(&ctx.props().initial_value);
-        }
-        if !ctx.props().editable {
-            self.edited = false;
-        }
-        self.placeholder = ctx.props().split_placeholder();
-        ctx.props() != old_props
-    }
+        let metadata = &self.metadata;
+        let Some(table_columns) = metadata.get_table_columns() else {
+            return true;
+        };
 
-    fn update(&mut self, ctx: &yew::prelude::Context<Self>, msg: Self::Message) -> bool {
-        match msg {
-            EditableHeaderMsg::SetNewValue(new_value) => {
-                let maybe_value = (!new_value.is_empty()).then_some(new_value.clone());
-                self.edited = ctx.props().initial_value != maybe_value;
-
-                self.valid = (|| -> Option<bool> {
-                    if maybe_value
-                        .as_ref()
-                        .map(|v| v == &self.placeholder)
-                        .unwrap_or(true)
-                    {
-                        return Some(true);
-                    }
-                    if !self.edited {
-                        return Some(true);
-                    }
-                    let metadata = &ctx.props().metadata;
-                    let expressions = metadata.get_expression_columns();
-                    let windows = metadata.get_window_columns();
-                    let found = metadata
-                        .get_table_columns()?
-                        .iter()
-                        .chain(expressions)
-                        .chain(windows)
-                        .contains(&new_value);
-                    Some(!found)
-                })()
-                .unwrap_or(true);
-
-                self.value.clone_from(&maybe_value);
-                ctx.props().on_change.emit((maybe_value, self.valid));
-                true
-            },
-            EditableHeaderMsg::OnClick(()) => {
-                self.noderef
-                    .cast::<HtmlInputElement>()
-                    .unwrap()
-                    .focus()
-                    .unwrap();
-                false
-            },
-        }
+        !table_columns
+            .iter()
+            .chain(metadata.get_expression_columns())
+            .chain(metadata.get_window_columns())
+            .contains(value)
     }
+}
 
-    fn view(&self, ctx: &yew::prelude::Context<Self>) -> Html {
-        let mut classes = classes!("sidebar_header_contents");
-        if ctx.props().editable {
-            classes.push("editable");
-        }
-
-        if !self.valid {
-            classes.push("invalid");
-        }
-
-        if self.edited {
-            classes.push("edited");
-        }
+#[function_component(EditableHeader)]
+pub fn editable_header(props: &EditableHeaderProps) -> Html {
+    let noderef = use_node_ref();
+    let placeholder = props.split_placeholder();
+    let edited = props.value != props.initial_value;
+    let valid = props.is_valid(&props.value, &placeholder);
+    let mut classes = classes!("sidebar_header_contents");
+    if props.editable {
+        classes.push("editable");
+    }
 
-        let onkeyup = ctx.link().callback(|e: KeyboardEvent| {
-            let value = e.target_unchecked_into::<HtmlInputElement>().value();
-            EditableHeaderMsg::SetNewValue(value)
-        });
+    if !valid {
+        classes.push("invalid");
+    }
 
-        let onblur = ctx.link().callback(|e: FocusEvent| {
-            let value = e.target_unchecked_into::<HtmlInputElement>().value();
-            EditableHeaderMsg::SetNewValue(value)
-        });
+    if edited {
+        classes.push("edited");
+    }
 
-        let update_on_input = ctx.props().update_on_input;
-        let oninput = ctx.link().batch_callback(move |e: yew::InputEvent| {
+    let on_value = {
+        let props = props.clone();
+        let placeholder = placeholder.clone();
+        Callback::from(move |value: String| {
+            let value = (!value.is_empty()).then_some(value);
+            let valid = props.is_valid(&value, &placeholder);
+            props.on_change.emit((value, valid));
+        })
+    };
+
+    let onkeyup =
+        on_value.reform(|e: KeyboardEvent| e.target_unchecked_into::<HtmlInputElement>().value());
+    let onblur =
+        on_value.reform(|e: FocusEvent| e.target_unchecked_into::<HtmlInputElement>().value());
+    let oninput = {
+        let update_on_input = props.update_on_input;
+        let on_value = on_value.clone();
+        Callback::from(move |e: InputEvent| {
             if update_on_input {
-                let value = e.target_unchecked_into::<HtmlInputElement>().value();
-                vec![EditableHeaderMsg::SetNewValue(value)]
-            } else {
-                vec![]
+                on_value.emit(e.target_unchecked_into::<HtmlInputElement>().value());
             }
-        });
-
-        html! {
-            <div class={classes} onclick={ctx.link().callback(|_| EditableHeaderMsg::OnClick(()))}>
-                if let Some(icon) = ctx.props().icon_type { <TypeIcon ty={icon} /> }
-                <input
-                    ref={self.noderef.clone()}
-                    type="search"
-                    class="sidebar_header_title"
-                    disabled={!ctx.props().editable}
-                    {onblur}
-                    {onkeyup}
-                    {oninput}
-                    value={self.value.clone()}
-                    placeholder={self.placeholder.clone()}
-                />
-            </div>
-        }
+        })
+    };
+
+    let onclick = {
+        let noderef = noderef.clone();
+        Callback::from(move |_: MouseEvent| {
+            if let Some(input) = noderef.cast::<HtmlInputElement>() {
+                let _ = input.focus();
+            }
+        })
+    };
+
+    html! {
+        <div class={classes} {onclick}>
+            if let Some(icon) = props.icon_type { <TypeIcon ty={icon} /> }
+            <input
+                ref={noderef}
+                type="search"
+                class="sidebar_header_title"
+                disabled={!props.editable}
+                {onblur}
+                {onkeyup}
+                {oninput}
+                value={props.value.clone()}
+                {placeholder}
+            />
+        </div>
     }
 }
-
-#[derive(Default, Debug, PartialEq, Copy, Clone)]
-pub enum ValueState {
-    #[default]
-    Unedited,
-    Edited,
-}

package/src/rust/components/expression_editor.rs

@@ -16,7 +16,7 @@ use perspective_client::{ExprValidationError, clone};
 use yew::prelude::*;
 
 use super::form::code_editor::*;
-use crate::session::{Session, SessionMetadata, SessionMetadataRc};
+use crate::session::{Session, SessionMetadataRc};
 use crate::tasks::{ExprValidation, validate_expression};
 
 #[derive(Properties, PartialEq, Clone)]
@@ -27,6 +27,9 @@ pub struct ExpressionEditorProps {
     pub alias: Option<String>,
     pub disabled: bool,
 
+    /// The saved expression text this editor edits against.
+    pub initial_expr: Rc<String>,
+
     #[prop_or_default]
     pub reset_count: u8,
 
@@ -69,7 +72,7 @@ impl Component for ExpressionEditor {
 
     fn create(ctx: &Context<Self>) -> Self {
         let oninput = ctx.link().callback(ExpressionEditorMsg::SetExpr);
-        let expr = initial_expr(&ctx.props().metadata, &ctx.props().alias);
+        let expr = ctx.props().initial_expr.clone();
         ctx.link()
             .send_message(Self::Message::SetExpr(expr.clone()));
 
@@ -156,24 +159,14 @@ impl Component for ExpressionEditor {
     fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
         if ctx.props().alias != old_props.alias
             || ctx.props().reset_count != old_props.reset_count
-            || (ctx.props().alias.is_some() && ctx.props().metadata != old_props.metadata)
+            || ctx.props().initial_expr != old_props.initial_expr
         {
-            ctx.link()
-                .send_message(ExpressionEditorMsg::SetExpr(initial_expr(
-                    &ctx.props().metadata,
-                    &ctx.props().alias,
-                )));
+            ctx.link().send_message(ExpressionEditorMsg::SetExpr(
+                ctx.props().initial_expr.clone(),
+            ));
             false
         } else {
             true
         }
     }
 }
-
-fn initial_expr(metadata: &SessionMetadata, alias: &Option<String>) -> Rc<String> {
-    alias
-        .as_ref()
-        .and_then(|alias| metadata.get_expression_by_alias(alias))
-        .unwrap_or_default()
-        .into()
-}

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

@@ -45,6 +45,9 @@ pub struct CodeEditorProps {
     #[prop_or_default]
     pub error: Option<ExprValidationError>,
 
+    #[prop_or_default]
+    pub contained: bool,
+
     /// Selected theme name, threaded for PortalModal consumers.
     #[prop_or_default]
     pub theme: String,
@@ -165,20 +168,27 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
         ))
         .collect::<Html>();
 
-    let class = if props.wordwrap {
-        "wordwrap scrollable"
-    } else {
-        "scrollable"
+    let mut outer_class = classes!("scrollable");
+    let mut inner_class = classes!("editor-inner", "scrollable");
+
+    if props.wordwrap {
+        outer_class.push("wordwrap");
+        inner_class.push("wordwrap");
     };
+
+    if props.contained {
+        outer_class.push("contained")
+    }
+
     clone!(props.disabled);
     html! {
         <>
-            <div id="editor" {class}>
+            <div id="editor" class={outer_class}>
                 <div id="line_numbers" ref={lineno_ref}>{ line_numbers }</div>
                 <MirroredTextarea
                     id="textarea_editable"
                     mirror_id="content"
-                    class={classes!("editor-inner", class)}
+                    class={inner_class}
                     mirror={terms}
                     {textarea_ref}
                     mirror_ref={content_ref}

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

@@ -178,6 +178,7 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
                         <CodeEditor
                             expr={&*expr}
                             disabled=false
+                            contained=true
                             {oninput}
                             {onsave}
                             select_all={select_all.subscriber()}

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

@@ -17,14 +17,16 @@
 //! parent module directly.
 
 pub mod code_editor;
-pub mod color_range_selector;
 pub mod color_selector;
 pub mod debug;
 pub mod mirrored_textarea;
+pub mod multi_stop_gradient_selector;
+pub mod named_value_picker;
 pub mod number_field;
 pub mod number_input;
 pub mod number_range_field;
 pub mod optional_field;
+pub mod palette_selector;
 pub mod select_enum_field;
 pub mod select_value_field;