@perspective-dev/viewer 5.2.0 → 5.3.1

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;