@perspective-dev/viewer 4.4.1 → 4.5.1

package/src/rust/components/column_settings_sidebar.rs

@@ -12,7 +12,7 @@
 mod attributes_tab;
 
 mod save_settings;
-mod style_tab;
+pub(crate) mod style_tab;
 
 use std::rc::Rc;
 
@@ -33,14 +33,10 @@ use crate::components::editable_header::EditableHeaderProps;
 use crate::components::expression_editor::ExpressionEditorProps;
 use crate::components::style::LocalStyle;
 use crate::components::type_icon::TypeIconType;
-use crate::custom_events::CustomEvents;
 use crate::presentation::{ColumnLocator, ColumnSettingsTab, Presentation};
 use crate::renderer::Renderer;
 use crate::session::{Session, SessionMetadataRc};
-use crate::tasks::{
-    EditExpression, HasCustomEvents, HasPresentation, HasRenderer, HasSession,
-    can_render_column_styles, locator_name_or_default, locator_view_type,
-};
+use crate::tasks::{delete_expr, save_expr, update_expr};
 use crate::utils::PtrEqRc;
 use crate::*;
 
@@ -64,13 +60,13 @@ pub struct ColumnSettingsPanelProps {
     /// View config snapshot — threaded from `SessionProps`.
     pub view_config: PtrEqRc<ViewConfig>,
 
+    /// Per-column stats snapshot — threaded from `SessionProps`.
+    pub column_stats: PtrEqRc<std::collections::HashMap<String, crate::session::ColumnStats>>,
+
     /// Selected theme name, threaded for PortalModal consumers.
     pub selected_theme: Option<String>,
 
     // State
-    #[derivative(Debug = "ignore")]
-    pub custom_events: CustomEvents,
-
     #[derivative(Debug = "ignore")]
     pub presentation: Presentation,
 
@@ -88,34 +84,11 @@ impl PartialEq for ColumnSettingsPanelProps {
             && self.plugin_name == other.plugin_name
             && self.metadata == other.metadata
             && self.view_config == other.view_config
+            && self.column_stats == other.column_stats
             && self.selected_theme == other.selected_theme
     }
 }
 
-impl HasCustomEvents for ColumnSettingsPanelProps {
-    fn custom_events(&self) -> &CustomEvents {
-        &self.custom_events
-    }
-}
-
-impl HasPresentation for ColumnSettingsPanelProps {
-    fn presentation(&self) -> &Presentation {
-        &self.presentation
-    }
-}
-
-impl HasRenderer for ColumnSettingsPanelProps {
-    fn renderer(&self) -> &Renderer {
-        &self.renderer
-    }
-}
-
-impl HasSession for ColumnSettingsPanelProps {
-    fn session(&self) -> &Session {
-        &self.session
-    }
-}
-
 #[derive(Debug)]
 pub enum ColumnSettingsPanelMsg {
     SetExprValue(Rc<String>),
@@ -239,11 +212,20 @@ impl Component for ColumnSettingsPanel {
                     ColumnLocator::Table(_) => {
                         tracing::error!("Tried to save non-expression column!")
                     },
-                    ColumnLocator::Expression(name) => {
-                        ctx.props().update_expr(name.clone(), new_expr)
-                    },
+                    ColumnLocator::Expression(name) => update_expr(
+                        &ctx.props().session,
+                        &ctx.props().renderer,
+                        &ctx.props().presentation,
+                        name.clone(),
+                        new_expr,
+                    ),
                     ColumnLocator::NewExpression => {
-                        if let Err(err) = ctx.props().save_expr(new_expr) {
+                        if let Err(err) = save_expr(
+                            &ctx.props().session,
+                            &ctx.props().renderer,
+                            &ctx.props().presentation,
+                            new_expr,
+                        ) {
                             tracing::warn!("{}", err);
                         }
                     },
@@ -258,7 +240,12 @@ impl Component for ColumnSettingsPanel {
             },
             ColumnSettingsPanelMsg::OnDelete(()) => {
                 if ctx.props().selected_column.is_saved_expr() {
-                    ctx.props().delete_expr(&self.column_name).unwrap_or_log();
+                    delete_expr(
+                        &ctx.props().session,
+                        &ctx.props().renderer,
+                        &self.column_name,
+                    )
+                    .unwrap_or_log();
                 }
 
                 ctx.props().on_close.emit(());
@@ -277,6 +264,7 @@ impl Component for ColumnSettingsPanel {
                     ctx.props().selected_tab,
                     Some(ColumnSettingsTab::Attributes)
                 ),
+            update_on_input: true,
             icon_type: self
                 .maybe_ty
                 .map(|ty| ty.into())
@@ -347,8 +335,8 @@ impl Component for ColumnSettingsPanel {
             group_by_depth: ctx.props().view_config.group_by.len() as u32,
             view_config: ctx.props().view_config.clone(),
             metadata: ctx.props().metadata.clone(),
+            column_stats: ctx.props().column_stats.clone(),
             selected_theme: ctx.props().selected_theme.clone(),
-            custom_events: ctx.props().custom_events.clone(),
             presentation: ctx.props().presentation.clone(),
             renderer: ctx.props().renderer.clone(),
             session: ctx.props().session.clone(),
@@ -398,8 +386,10 @@ impl ColumnSettingsPanel {
     }
 
     fn initialize(&mut self, ctx: &yew::prelude::Context<Self>) {
-        let column_name =
-            locator_name_or_default(&ctx.props().metadata, &ctx.props().selected_column);
+        let column_name = ctx
+            .props()
+            .metadata
+            .locator_name_or_default(&ctx.props().selected_column);
 
         let initial_expr_value = ctx
             .props()
@@ -411,19 +401,23 @@ impl ColumnSettingsPanel {
         let initial_header_value =
             (*initial_expr_value != column_name).then_some(column_name.clone());
 
-        let maybe_ty = locator_view_type(&ctx.props().metadata, &ctx.props().selected_column);
+        let maybe_ty = ctx
+            .props()
+            .metadata
+            .locator_view_type(&ctx.props().selected_column);
 
         let tabs = {
             let mut tabs = vec![];
             let is_new_expr = ctx.props().selected_column.is_new_expr();
             let show_styles = !is_new_expr
-                && can_render_column_styles(
-                    &ctx.props().renderer,
-                    &ctx.props().view_config,
-                    &ctx.props().metadata,
-                    &column_name,
-                )
-                .unwrap_or_default();
+                && ctx.props().renderer.can_render_column_styles()
+                && ctx.props().view_config.columns.contains(&Some(
+                    ctx.props()
+                        .selected_column
+                        .name()
+                        .map(|x| x.to_string())
+                        .unwrap_or_default(),
+                ));
 
             if !is_new_expr && show_styles {
                 tabs.push(ColumnSettingsTab::Style);
@@ -432,6 +426,7 @@ impl ColumnSettingsPanel {
             if ctx.props().selected_column.is_expr() {
                 tabs.push(ColumnSettingsTab::Attributes);
             }
+
             tabs
         };
 

package/src/rust/components/containers/dragdrop_list.rs

@@ -22,7 +22,7 @@ use yew::prelude::*;
 use crate::components::column_dropdown::ColumnDropDownElement;
 use crate::components::column_selector::{EmptyColumn, InPlaceColumn, InvalidColumn};
 use crate::components::type_icon::TypeIcon;
-use crate::dragdrop::*;
+use crate::presentation::{DragDropContainer, Presentation};
 use crate::utils::DragTarget;
 
 #[derive(Properties, Derivative)]
@@ -35,7 +35,7 @@ where
 {
     pub parent: Scope<T>,
 
-    pub dragdrop: DragDrop,
+    pub presentation: Presentation,
     pub name: &'static str,
     pub column_dropdown: ColumnDropDownElement,
     pub exclude: HashSet<String>,
@@ -185,14 +185,20 @@ where
         );
 
         let drop = Callback::from({
-            let dragdrop = ctx.props().dragdrop.clone();
+            let presentation = ctx.props().presentation.clone();
             let link = ctx.link().clone();
             move |event| {
                 link.send_message(DragDropListMsg::Freeze(false));
-                dragdrop.notify_drop(&event);
+                presentation.notify_drop(&event);
             }
         });
 
+        // Held by per-row `ondragenter` closures below so they can re-arm
+        // the `safaridragleave` flag on the container element when the
+        // row stops dragenter from bubbling. See the comment inside the
+        // closure for why this matters.
+        let container_noderef = drag_container.noderef.clone();
+
         let invalid_drag: bool;
         let mut valid_duplicate_drag = false;
 
@@ -210,7 +216,7 @@ where
                 let is_append = index == columns.len();
                 let is_self_move = ctx
                     .props()
-                    .dragdrop
+                    .presentation
                     .get_drag_target()
                     .map(|x| V::is_self_move(x))
                     .unwrap_or_default();
@@ -253,9 +259,30 @@ where
                     let close = ctx.props().parent.callback(move |_| V::close(idx));
                     let dragenter = ctx.props().parent.callback({
                         let link = ctx.link().clone();
+                        let container_noderef = container_noderef.clone();
                         move |event: DragEvent| {
                             event.stop_propagation();
                             event.prevent_default();
+                            // Safari: `relatedTarget` is always null on
+                            // dragleave, so `dragleave_helper` uses a
+                            // `data-safaridragleave` flag set by the
+                            // container's own dragenter to distinguish
+                            // child-crossing leaves (consume the flag)
+                            // from real leaves (no flag → fire callback).
+                            // The `stop_propagation` above blocks the
+                            // container's dragenter, so the flag would
+                            // never be re-armed after the first consume —
+                            // any further internal boundary crossing
+                            // would demote the state out of
+                            // `DragOverInProgress` and the next drop
+                            // would be silently rejected. Set the flag
+                            // here so each row-targeted dragenter
+                            // refills the pool.
+                            if event.related_target().is_none()
+                                && let Some(elem) = container_noderef.cast::<HtmlElement>()
+                            {
+                                let _ = elem.dataset().set("safaridragleave", "true");
+                            }
                             link.send_message(DragDropListMsg::Freeze(true));
                             V::dragenter(idx)
                         }

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

@@ -22,4 +22,3 @@ pub mod sidebar;
 pub mod sidebar_close_button;
 pub mod split_panel;
 pub mod tab_list;
-pub mod trap_door_panel;

package/src/rust/components/containers/scroll_panel.rs

@@ -63,6 +63,9 @@ pub struct ScrollPanelProps {
 
     #[prop_or_default]
     pub drop: Callback<DragEvent>,
+
+    #[prop_or_default]
+    pub omit_autosize_div: bool,
 }
 
 impl ScrollPanelProps {
@@ -146,16 +149,25 @@ impl Component for ScrollPanel {
                 self.viewport_width = 0.0;
                 self.calculate_window_content(ctx)
             },
+
+            // TODO don't hardcode pixel offsets - fix the CSS container to not
+            // require pixel offsets to work.
             ScrollPanelMsg::UpdateViewportDimensions => {
                 let viewport = self.viewport_elem(ctx);
                 let rect = viewport.get_bounding_client_rect();
                 let viewport_height = rect.height() - 8.0;
-                let viewport_width = self.viewport_width.max(rect.width() - 6.0);
+                let scroll_offset = if ctx.props().omit_autosize_div {
+                    0.0
+                } else {
+                    6.0
+                };
+
+                let viewport_width = self.viewport_width.max(rect.width() - scroll_offset);
                 let re_render = self.viewport_height != viewport_height
                     || self.viewport_width != viewport_width;
 
                 self.viewport_height = rect.height() - 8.0;
-                self.viewport_width = self.viewport_width.max(rect.width() - 6.0);
+                self.viewport_width = self.viewport_width.max(rect.width() - scroll_offset);
                 ctx.props().on_auto_width.emit(self.viewport_width);
                 re_render
             },
@@ -218,11 +230,13 @@ impl Component for ScrollPanel {
                 >
                     <div class="scroll-panel-container" style={window_style}>
                         { for windowed_items.iter().cloned().map(Html::from) }
-                        <div
-                            key="__scroll-panel-auto-width__"
-                            class="scroll-panel-auto-width"
-                            style={width_style}
-                        />
+                        if !ctx.props().omit_autosize_div {
+                            <div
+                                key="__scroll-panel-auto-width__"
+                                class="scroll-panel-auto-width"
+                                style={width_style}
+                            />
+                        }
                     </div>
                     <div class="scroll-panel-content" style={content_style} />
                 </div>

package/src/rust/components/containers/sidebar.rs

@@ -62,12 +62,14 @@ pub fn Sidebar(p: &SidebarProps) -> Html {
 
     let width_style = format!("min-width: 200px; width: {}px", *auto_width);
     html! {
-        <div class="sidebar_column" id={format!("{id}_sidebar")} ref={noderef}>
+        <>
             <SidebarCloseButton id={format!("{id}_close_button")} on_close_sidebar={&p.on_close} />
-            <div class="sidebar_header"><EditableHeader ..p.header_props.clone() /></div>
-            <div class="sidebar_border" id={format!("{id}_border")} />
-            { p.children.iter().collect::<Html>() }
-            <div class="sidebar-auto-width" style={width_style} />
-        </div>
+            <div class="sidebar_column" id={format!("{id}_sidebar")} ref={noderef}>
+                <div class="sidebar_header"><EditableHeader ..p.header_props.clone() /></div>
+                <div class="sidebar_border" id={format!("{id}_border")} />
+                { p.children.iter().collect::<Html>() }
+                <div class="sidebar-auto-width" style={width_style} />
+            </div>
+        </>
     }
 }

package/src/rust/components/containers/split_panel.rs

@@ -20,7 +20,7 @@ use yew::html::Scope;
 use yew::prelude::*;
 
 use crate::components::style::LocalStyle;
-use crate::{css, maybe};
+use crate::css;
 
 #[derive(Properties, Default)]
 pub struct SplitPanelProps {
@@ -359,14 +359,14 @@ impl Drop for ResizingState {
     /// `body`. Without this, the `Closure` objects would not leak, but the
     /// document will continue to call them, causing runtime exceptions.
     fn drop(&mut self) {
-        let result: ApiResult<()> = maybe! {
+        let result: ApiResult<()> = (|| {
             let mousemove = self.mousemove.as_ref().unchecked_ref();
             global::body().remove_event_listener_with_callback("mousemove", mousemove)?;
             let mouseup = self.mouseup.as_ref().unchecked_ref();
             global::body().remove_event_listener_with_callback("mouseup", mouseup)?;
             self.release_cursor()?;
             Ok(())
-        };
+        })();
 
         result.expect("Drop failed")
     }

package/src/rust/components/containers/tab_list.rs

@@ -71,9 +71,9 @@ impl<T: ColumnTab> Component for TabList<T> {
     fn view(&self, ctx: &yew::Context<Self>) -> Html {
         let p = ctx.props();
         let gutter_tabs = p.tabs.iter().enumerate().map(|(idx, tab)| {
-            let mut class = classes!("tab");
+            let mut class = classes!("settings_tab");
             if idx == self.selected_idx {
-                class.push("selected");
+                class.push("selected_tab");
             }
 
             let onclick = ctx.link().callback(move |_| TabListMsg::SetSelected(idx));
@@ -88,13 +88,7 @@ impl<T: ColumnTab> Component for TabList<T> {
         html! {
             <>
                 <LocalStyle href={css!("containers/tabs")} />
-                <div class="tab-gutter">
-                    { for gutter_tabs }
-                    <span class="tab tab-padding">
-                        <div class="tab-title">{ "\u{00a0}" }</div>
-                        <div class="tab-border" />
-                    </span>
-                </div>
+                <div id="settings_tab_bar">{ for gutter_tabs }</div>
                 <div id="format-tab" class="tab-content scrollable">
                     { ctx.props().children.iter().nth(self.selected_idx) }
                 </div>

package/src/rust/components/copy_dropdown.rs

@@ -15,8 +15,8 @@ use std::rc::Rc;
 use yew::prelude::*;
 
 use super::containers::dropdown_menu::*;
+use crate::config::*;
 use crate::renderer::*;
-use crate::tasks::*;
 
 type CopyDropDownMenuItem = DropDownMenuItem<ExportFile>;
 
@@ -41,8 +41,7 @@ impl Component for CopyDropDownMenu {
     }
 
     fn view(&self, ctx: &Context<Self>) -> yew::virtual_dom::VNode {
-        let plugin = ctx.props().renderer.get_active_plugin().unwrap();
-        let is_chart = plugin.name().as_str() != "Datagrid";
+        let is_chart = ctx.props().renderer.is_chart();
         let has_selection = ctx.props().renderer.get_selection().is_some();
         html! {
             <>

package/src/rust/components/datetime_column_style.rs

@@ -21,28 +21,30 @@ use perspective_js::json;
 use perspective_js::utils::global::navigator;
 use wasm_bindgen::prelude::*;
 use yew::prelude::*;
-use yew::*;
 
-use super::form::color_selector::*;
 use super::modal::{ModalLink, SetModalLink};
 use super::style::LocalStyle;
 use crate::components::datetime_column_style::custom::DatetimeStyleCustom;
 use crate::components::datetime_column_style::simple::DatetimeStyleSimple;
-use crate::components::form::select_enum_field::SelectEnumField;
 use crate::components::form::select_value_field::SelectValueField;
 use crate::config::*;
 use crate::css;
 use crate::utils::WeakScope;
 
+/// Format-only widget for `datetime` columns. Renders the `date_format`
+/// hierarchy (Simple|Custom + timezone); color/color-mode UI is provided
+/// externally as primitive `Enum` + `Color` schema fields.
 #[derive(Properties, Derivative)]
 #[derivative(Debug)]
 pub struct DatetimeColumnStyleProps {
     pub enable_time_config: bool,
     pub config: Option<DatetimeColumnStyleConfig>,
-    pub default_config: DatetimeColumnStyleDefaultConfig,
 
     #[prop_or_default]
-    pub on_change: Callback<ColumnConfigValueUpdate>,
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
+
+    #[prop_or_default]
+    pub keys: Vec<String>,
 
     #[prop_or_default]
     #[derivative(Debug = "ignore")]
@@ -57,9 +59,7 @@ impl ModalLink<DatetimeColumnStyle> for DatetimeColumnStyleProps {
 
 impl PartialEq for DatetimeColumnStyleProps {
     fn eq(&self, other: &Self) -> bool {
-        self.enable_time_config == other.enable_time_config
-            && self.config == other.config
-            && self.default_config == other.default_config
+        self.enable_time_config == other.enable_time_config && self.config == other.config
     }
 }
 
@@ -67,16 +67,11 @@ pub enum DatetimeColumnStyleMsg {
     SimpleDatetimeStyleConfigChanged(SimpleDatetimeStyleConfig),
     CustomDatetimeStyleConfigChanged(CustomDatetimeStyleConfig),
     TimezoneChanged(Option<String>),
-    ColorModeChanged(Option<DatetimeColorMode>),
-    ColorChanged(String),
-    ColorReset,
 }
 
-/// Column style controls for the `datetime` type.
 #[derive(Debug)]
 pub struct DatetimeColumnStyle {
     config: DatetimeColumnStyleConfig,
-    default_config: DatetimeColumnStyleDefaultConfig,
 }
 
 impl Component for DatetimeColumnStyle {
@@ -87,11 +82,9 @@ impl Component for DatetimeColumnStyle {
         ctx.set_modal_link();
         Self {
             config: ctx.props().config.clone().unwrap_or_default(),
-            default_config: ctx.props().default_config.clone(),
         }
     }
 
-    // Always re-render when config changes.
     fn changed(&mut self, ctx: &Context<Self>, old: &Self::Properties) -> bool {
         let mut rerender = false;
         let mut new_config = ctx.props().config.clone().unwrap_or_default();
@@ -105,7 +98,6 @@ impl Component for DatetimeColumnStyle {
         rerender
     }
 
-    // TODO could be more conservative here with re-rendering
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             DatetimeColumnStyleMsg::TimezoneChanged(val) => {
@@ -118,17 +110,6 @@ impl Component for DatetimeColumnStyle {
                 self.dispatch_config(ctx);
                 true
             },
-            DatetimeColumnStyleMsg::ColorModeChanged(mode) => {
-                self.config.datetime_color_mode = mode.unwrap_or_default();
-                self.dispatch_config(ctx);
-                true
-            },
-            DatetimeColumnStyleMsg::ColorChanged(color) => {
-                self.config.color = Some(color);
-                self.dispatch_config(ctx);
-                true
-            },
-
             DatetimeColumnStyleMsg::SimpleDatetimeStyleConfigChanged(simple) => {
                 self.config.date_format = DatetimeFormatType::Simple(simple);
                 self.dispatch_config(ctx);
@@ -139,40 +120,14 @@ impl Component for DatetimeColumnStyle {
                 self.dispatch_config(ctx);
                 true
             },
-            DatetimeColumnStyleMsg::ColorReset => {
-                self.config.color = Some(self.default_config.color.clone());
-                self.dispatch_config(ctx);
-                true
-            },
         }
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let selected_color_mode = self.config.datetime_color_mode;
-        let color_mode_changed = ctx
-            .link()
-            .callback(DatetimeColumnStyleMsg::ColorModeChanged);
-
-        let color_controls = match selected_color_mode {
-            DatetimeColorMode::None => html! {},
-            DatetimeColorMode::Foreground => {
-                self.color_select_row(ctx, &DatetimeColorMode::Foreground, "foreground-label")
-            },
-            DatetimeColorMode::Background => {
-                self.color_select_row(ctx, &DatetimeColorMode::Background, "background-label")
-            },
-        };
-
         html! {
             <>
                 <LocalStyle href={css!("column-style")} />
                 <div id="column-style-container" class="datetime-column-style-container">
-                    <SelectEnumField<DatetimeColorMode>
-                        label="color"
-                        on_change={color_mode_changed}
-                        current_value={selected_color_mode}
-                    />
-                    { color_controls }
                     if ctx.props().enable_time_config {
                         <SelectValueField<String>
                             label="timezone"
@@ -251,35 +206,18 @@ static USER_TIMEZONE: LazyLock<String> = LazyLock::new(|| {
 impl DatetimeColumnStyle {
     /// When this config has changed, we must signal the wrapper element.
     fn dispatch_config(&self, ctx: &Context<Self>) {
-        let update =
-            Some(self.config.clone()).filter(|x| x != &DatetimeColumnStyleConfig::default());
-        ctx.props()
-            .on_change
-            .emit(ColumnConfigValueUpdate::DatagridDatetimeStyle(update));
-    }
-
-    /// Generate a color selector component for a specific `StringColorMode`
-    /// variant.
-    fn color_select_row(&self, ctx: &Context<Self>, mode: &DatetimeColorMode, title: &str) -> Html {
-        let on_color = ctx.link().callback(DatetimeColumnStyleMsg::ColorChanged);
-        let color = self
-            .config
-            .color
-            .clone()
-            .unwrap_or_else(|| self.default_config.color.to_owned());
+        let value = if self.config == DatetimeColumnStyleConfig::default() {
+            serde_json::Map::new()
+        } else {
+            match serde_json::to_value(&self.config) {
+                Ok(serde_json::Value::Object(m)) => m,
+                _ => serde_json::Map::new(),
+            }
+        };
 
-        let color_props = props!(ColorProps {
-            title: title.to_owned(),
-            on_color,
-            is_modified: color != self.default_config.color,
-            color,
-            on_reset: ctx.link().callback(|_| DatetimeColumnStyleMsg::ColorReset)
+        ctx.props().on_change.emit(ColumnConfigFieldUpdate {
+            keys: ctx.props().keys.clone(),
+            value,
         });
-
-        if &self.config.datetime_color_mode == mode {
-            html! { <div class="row"><ColorSelector ..color_props /></div> }
-        } else {
-            html! {}
-        }
     }
 }

package/src/rust/components/editable_header.rs

@@ -18,7 +18,6 @@ use yew::{Callback, Component, Html, NodeRef, Properties, TargetCast, classes, h
 
 use super::type_icon::TypeIconType;
 use crate::components::type_icon::TypeIcon;
-use crate::maybe;
 use crate::session::{Session, SessionMetadataRc};
 
 #[derive(Clone, PartialEq, Properties)]
@@ -29,9 +28,13 @@ pub struct EditableHeaderProps {
     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,
 
@@ -103,7 +106,7 @@ impl Component for EditableHeader {
                 let maybe_value = (!new_value.is_empty()).then_some(new_value.clone());
                 self.edited = ctx.props().initial_value != maybe_value;
 
-                self.valid = maybe!({
+                self.valid = (|| -> Option<bool> {
                     if maybe_value
                         .as_ref()
                         .map(|v| v == &self.placeholder)
@@ -122,7 +125,7 @@ impl Component for EditableHeader {
                         .chain(expressions)
                         .contains(&new_value);
                     Some(!found)
-                })
+                })()
                 .unwrap_or(true);
 
                 self.value.clone_from(&maybe_value);
@@ -164,6 +167,16 @@ impl Component for EditableHeader {
             EditableHeaderMsg::SetNewValue(value)
         });
 
+        let update_on_input = ctx.props().update_on_input;
+        let oninput = ctx.link().batch_callback(move |e: yew::InputEvent| {
+            if update_on_input {
+                let value = e.target_unchecked_into::<HtmlInputElement>().value();
+                vec![EditableHeaderMsg::SetNewValue(value)]
+            } else {
+                vec![]
+            }
+        });
+
         html! {
             <div class={classes} onclick={ctx.link().callback(|_| EditableHeaderMsg::OnClick(()))}>
                 if let Some(icon) = ctx.props().icon_type { <TypeIcon ty={icon} /> }
@@ -174,6 +187,7 @@ impl Component for EditableHeader {
                     disabled={!ctx.props().editable}
                     {onblur}
                     {onkeyup}
+                    {oninput}
                     value={self.value.clone()}
                     placeholder={self.placeholder.clone()}
                 />