@perspective-dev/viewer 4.4.1 → 4.5.1

package/src/rust/components/export_dropdown.rs

@@ -15,9 +15,9 @@ use std::rc::Rc;
 use yew::prelude::*;
 
 use super::containers::dropdown_menu::*;
+use crate::config::*;
 use crate::renderer::*;
 use crate::session::Session;
-use crate::tasks::*;
 
 pub type ExportDropDownMenuItem = DropDownMenuItem<ExportFile>;
 
@@ -45,8 +45,7 @@ impl Component for ExportDropDownMenu {
 
     fn view(&self, ctx: &Context<Self>) -> yew::virtual_dom::VNode {
         let callback = ctx.link().callback(|_| ExportDropDownMenuMsg::TitleChange);
-        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();
         html! {
             <>
                 <span class="dropdown-group-label">{ "Save as" }</span>

package/src/rust/components/expression_editor.rs

@@ -18,6 +18,7 @@ use yew::prelude::*;
 use super::form::code_editor::*;
 use super::style::LocalStyle;
 use crate::session::{Session, SessionMetadata, SessionMetadataRc};
+use crate::tasks::{ExprValidation, validate_expression};
 use crate::*;
 
 #[derive(Properties, PartialEq, Clone)]
@@ -45,7 +46,7 @@ pub struct ExpressionEditorProps {
 #[derive(Debug)]
 pub enum ExpressionEditorMsg {
     SetExpr(Rc<String>),
-    ValidateComplete(Option<ExprValidationError>),
+    ValidateComplete(ExprValidation),
 }
 
 /// Expression editor component `CodeEditor` and a button toolbar.
@@ -53,6 +54,13 @@ pub struct ExpressionEditor {
     expr: Rc<String>,
     error: Option<ExprValidationError>,
     oninput: Callback<Rc<String>>,
+    /// Monotonically increasing request id used to drop stale
+    /// validation results when the user types faster than the engine
+    /// can validate.
+    validation_req_id: u64,
+    /// The id of the most recently dispatched validation; the result
+    /// is only applied when its echoed id matches.
+    last_dispatched_req_id: u64,
 }
 
 impl Component for ExpressionEditor {
@@ -69,6 +77,8 @@ impl Component for ExpressionEditor {
             error: None,
             expr,
             oninput,
+            validation_req_id: 0,
+            last_dispatched_req_id: 0,
         }
     }
 
@@ -77,23 +87,25 @@ impl Component for ExpressionEditor {
             ExpressionEditorMsg::SetExpr(val) => {
                 ctx.props().on_input.emit(val.clone());
                 self.expr = val.clone();
-                clone!(ctx.props().session);
-                ctx.link().send_future(async move {
-                    match session.validate_expr(&val).await {
-                        Ok(x) => ExpressionEditorMsg::ValidateComplete(x),
-                        Err(err) => {
-                            web_sys::console::error_1(&format!("{err:?}").into());
-                            ExpressionEditorMsg::ValidateComplete(None)
-                        },
-                    }
-                });
-
+                self.validation_req_id += 1;
+                self.last_dispatched_req_id = self.validation_req_id;
+                let cb = ctx.link().callback(ExpressionEditorMsg::ValidateComplete);
+                validate_expression(
+                    &ctx.props().session,
+                    cb,
+                    self.validation_req_id,
+                    (*val).clone(),
+                );
                 true
             },
-            ExpressionEditorMsg::ValidateComplete(err) => {
-                self.error = err;
+            ExpressionEditorMsg::ValidateComplete(result) => {
+                if result.req_id != self.last_dispatched_req_id {
+                    // Stale result from a superseded request — ignore.
+                    return false;
+                }
+                self.error = result.error;
                 if self.error.is_none() {
-                    maybe!({
+                    let _: Option<bool> = try {
                         let alias = ctx.props().alias.as_ref()?;
                         let session = &ctx.props().session;
                         let old = ctx.props().metadata.get_expression_by_alias(alias)?;
@@ -102,8 +114,8 @@ impl Component for ExpressionEditor {
                             .metadata_mut()
                             .set_edit_by_alias(alias, self.expr.to_string());
 
-                        Some(is_edited)
-                    });
+                        is_edited
+                    };
 
                     ctx.props().on_validate.emit(true);
                 } else {

package/src/rust/components/filter_dropdown.rs

@@ -103,7 +103,8 @@ impl FilterDropDownElement {
                     old_column = self.column
                 );
                 ApiFuture::spawn(async move {
-                    let fetched = session.get_column_values(column.1.clone()).await?;
+                    let fetched =
+                        crate::queries::get_column_values(&session, column.1.clone()).await?;
                     *all_values.borrow_mut() = Some(fetched);
                     let values = filter_values(&input, &all_values, &exclude);
                     let should_hide = values.len() == 1 && values[0] == input;

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

@@ -16,7 +16,13 @@ use yew::prelude::*;
 
 #[derive(Properties, PartialEq, Clone)]
 pub struct ColorRangeProps {
-    pub id: String,
+    /// Extra class appended to the positive input's `class` attribute,
+    /// so callers can target the pos / neg sides independently from CSS.
+    /// Paired with `neg_class`; both default to empty.
+    #[prop_or_default]
+    pub pos_class: Classes,
+    #[prop_or_default]
+    pub neg_class: Classes,
     pub pos_color: String,
     pub neg_color: String,
     pub is_gradient: bool,
@@ -68,32 +74,33 @@ pub fn color_chooser_component(props: &ColorRangeProps) -> Html {
 
     let on_reset = use_callback(props.clone(), |_: MouseEvent, deps| deps.on_reset.emit(()));
 
+    let pos_class = classes!("parameter", "pos-color-param", props.pos_class.clone());
+    let neg_class = classes!("parameter", "neg-color-param", props.neg_class.clone());
+
     html! {
         <>
             <label id="color-range-label" />
             <div class="color-gradient-container">
                 <div style={fg_pos} class="color-selector">
                     <input
-                        id={format!("{}-pos", props.id)}
-                        class="parameter pos-color-param"
+                        class={pos_class}
                         type="color"
                         value={props.pos_color.to_owned()}
                         data-value={props.pos_color.to_owned()}
                         oninput={on_pos_color}
                     />
-                    <label for={format!("{}-pos", props.id)} class="color-label">{ "+" }</label>
+                    <label class="color-label">{ "+" }</label>
                 </div>
                 <div class="color-thermometer" {style} />
                 <div style={fg_neg} class="color-selector">
                     <input
-                        id={format!("{}-neg", props.id)}
-                        class="parameter neg-color-param"
+                        class={neg_class}
                         type="color"
                         value={props.neg_color.to_owned()}
                         data-value={props.neg_color.to_owned()}
                         oninput={on_neg_color}
                     />
-                    <label for={format!("{}-neg", props.id)} class="color-label">{ "-" }</label>
+                    <label class="color-label">{ "-" }</label>
                 </div>
                 if props.is_modified {
                     <span class="reset-default-style" onclick={on_reset} />

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

@@ -17,7 +17,6 @@ use perspective_js::utils::{ApiFuture, JsValueSerdeExt};
 use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
-use crate::components::containers::trap_door_panel::TrapDoorPanel;
 use crate::components::form::code_editor::CodeEditor;
 use crate::components::style::LocalStyle;
 use crate::css;
@@ -25,7 +24,6 @@ use crate::js::{MimeType, copy_to_clipboard, paste_from_clipboard};
 use crate::presentation::*;
 use crate::renderer::*;
 use crate::session::*;
-use crate::tasks::*;
 use crate::utils::*;
 
 #[derive(Clone, PartialEq, Properties)]
@@ -33,24 +31,17 @@ pub struct DebugPanelProps {
     pub presentation: Presentation,
     pub renderer: Renderer,
     pub session: Session,
-}
-
-impl HasPresentation for DebugPanelProps {
-    fn presentation(&self) -> &Presentation {
-        &self.presentation
-    }
-}
 
-impl HasRenderer for DebugPanelProps {
-    fn renderer(&self) -> &Renderer {
-        &self.renderer
-    }
-}
+    /// Trap-door width pinned by the parent `SettingsPanel` so switching
+    /// tabs doesn't shrink the panel. Threaded into the hidden sizer
+    /// `<div class="scroll-panel-auto-width">`.
+    #[prop_or_default]
+    pub initial_width: f64,
 
-impl HasSession for DebugPanelProps {
-    fn session(&self) -> &Session {
-        &self.session
-    }
+    /// Fires once on mount with this panel's measured natural width.
+    /// Routed up to `SettingsPanel` which keeps the running max.
+    #[prop_or_default]
+    pub on_auto_width: Callback<f64>,
 }
 
 #[function_component(DebugPanel)]
@@ -60,6 +51,18 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
     let select_all = use_memo((), |()| PubSub::default());
     let modified = use_state_eq(|| false);
 
+    // Measure natural width on mount and route up to `SettingsPanel`.
+    let sizer = use_node_ref();
+    use_effect_with(expr.clone(), {
+        let sizer = sizer.clone();
+        let on_auto_width = props.on_auto_width.clone();
+        move |_| {
+            if let Some(elem) = sizer.cast::<web_sys::HtmlElement>() {
+                on_auto_width.emit(elem.get_bounding_client_rect().width());
+            }
+        }
+    });
+
     use_effect_with((expr.setter(), props.clone()), {
         clone!(error, modified);
         move |(text, state)| {
@@ -166,16 +169,12 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
             <LocalStyle href={css!("containers/tabs")} />
             <LocalStyle href={css!("form/debug")} />
             <div id="debug-panel-overflow">
-                <TrapDoorPanel id="debug-panel" class="sidebar_column">
-                    <div class="tab-gutter">
-                        <span class="tab selected">
-                            <div id="Debug" class="tab-title" />
-                            <div class="tab-border" />
-                        </span>
-                        <span class="tab tab-padding">
-                            <div class="tab-title" />
-                            <div class="tab-border" />
-                        </span>
+                <div id="debug-panel" class="sidebar_column" ref={sizer}>
+                    <div id="debug-panel-controls">
+                        <button disabled={!*modified} onclick={onapply}>{ "Apply" }</button>
+                        <button disabled={!*modified} onclick={onreset}>{ "Reset" }</button>
+                        <button onclick={oncopy}>{ "Copy" }</button>
+                        <button onclick={onpaste}>{ "Paste" }</button>
                     </div>
                     <div id="debug-panel-editor">
                         <CodeEditor
@@ -187,13 +186,11 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
                             error={(*error).clone()}
                         />
                     </div>
-                    <div id="debug-panel-controls">
-                        <button disabled={!*modified} onclick={onapply}>{ "Apply" }</button>
-                        <button disabled={!*modified} onclick={onreset}>{ "Reset" }</button>
-                        <button onclick={oncopy}>{ "Copy" }</button>
-                        <button onclick={onpaste}>{ "Paste" }</button>
-                    </div>
-                </TrapDoorPanel>
+                    <div
+                        class="scroll-panel-auto-width"
+                        style={format!("width:{}px", props.initial_width)}
+                    />
+                </div>
             </div>
         </>
     }
@@ -203,7 +200,12 @@ impl DebugPanelProps {
     fn set_text(&self, setter: UseStateSetter<Rc<String>>) {
         let props = self.clone();
         ApiFuture::spawn(async move {
-            let config = props.get_viewer_config().await?;
+            let config = crate::queries::get_viewer_config(
+                &props.session,
+                &props.renderer,
+                &props.presentation,
+            )
+            .await?;
             let json = JsValue::from_serde_ext(&config)?;
             let js_string =
                 js_sys::JSON::stringify_with_replacer_and_space(&json, &JsValue::NULL, &2.into())?;
@@ -238,7 +240,15 @@ impl DebugPanelProps {
         ApiFuture::spawn(async move {
             match serde_json::from_str(&text) {
                 Ok(config) => {
-                    match props.restore_and_render(config, async { Ok(()) }).await {
+                    match crate::tasks::restore_and_render(
+                        &props.session,
+                        &props.renderer,
+                        &props.presentation,
+                        config,
+                        async { Ok(()) },
+                    )
+                    .await
+                    {
                         Ok(_) => {
                             modified.set(false);
                         },

package/src/rust/components/main_panel.rs

@@ -10,18 +10,15 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use perspective_js::utils::*;
 use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
 use super::render_warning::RenderWarning;
 use super::status_bar::StatusBar;
-use crate::custom_events::CustomEvents;
-use crate::presentation::Presentation;
-use crate::renderer::limits::RenderLimits;
+use crate::presentation::{Presentation, PresentationProps};
 use crate::renderer::*;
-use crate::session::{Session, TableErrorState, TableLoadState, ViewStats};
-use crate::utils::*;
+use crate::session::{Session, SessionProps};
+use crate::tasks::dismiss_render_warning_callback;
 
 #[derive(Clone, Properties)]
 pub struct MainPanelProps {
@@ -32,28 +29,19 @@ pub struct MainPanelProps {
     /// + column configs), `false` for config-only.
     pub on_reset: Callback<bool>,
 
-    /// Render-limit dimensions forwarded from the root's `RendererProps`.
-    /// `Some` when the active plugin is capping the rendered row/column count;
-    /// `None` when no limits are active (e.g. after a plugin change).
-    pub render_limits: Option<RenderLimits>,
+    /// Snapshots threaded from root.  Read for `has_table`, `title` here in
+    /// the panel itself; threaded wholesale to `StatusBar`/`StatusIndicator`.
+    pub session_props: SessionProps,
+    pub renderer_props: RendererProps,
+    pub presentation_props: PresentationProps,
 
-    /// Value props from root's `SessionProps`, threaded to `StatusBar` /
-    /// `StatusIndicator`.
-    pub has_table: Option<TableLoadState>,
-    pub is_errored: bool,
-    pub stats: Option<ViewStats>,
-    pub update_count: u32,
-    pub error: Option<TableErrorState>,
-    pub title: Option<String>,
-
-    /// Value props from root's `PresentationProps`, threaded to `StatusBar`.
+    /// Derived from root: `settings_open && has_table_loaded`.
     pub is_settings_open: bool,
-    pub selected_theme: Option<String>,
-    pub available_themes: PtrEqRc<Vec<String>>,
-    pub is_workspace: bool,
+
+    /// Root-managed in-flight render counter (not engine state).
+    pub update_count: u32,
 
     /// State
-    pub custom_events: CustomEvents,
     pub session: Session,
     pub renderer: Renderer,
     pub presentation: Presentation,
@@ -61,23 +49,17 @@ pub struct MainPanelProps {
 
 impl PartialEq for MainPanelProps {
     fn eq(&self, rhs: &Self) -> bool {
-        self.has_table == rhs.has_table
-            && self.is_errored == rhs.is_errored
-            && self.stats == rhs.stats
-            && self.update_count == rhs.update_count
-            && self.error == rhs.error
-            && self.title == rhs.title
+        self.session_props == rhs.session_props
+            && self.renderer_props == rhs.renderer_props
+            && self.presentation_props == rhs.presentation_props
             && self.is_settings_open == rhs.is_settings_open
-            && self.selected_theme == rhs.selected_theme
-            && self.available_themes == rhs.available_themes
-            && self.is_workspace == rhs.is_workspace
-            && self.render_limits == rhs.render_limits
+            && self.update_count == rhs.update_count
     }
 }
 
 impl MainPanelProps {
     fn is_title(&self) -> bool {
-        self.title.is_some()
+        self.session_props.title.is_some()
     }
 }
 
@@ -109,10 +91,7 @@ impl Component for MainPanel {
                         .cast::<web_sys::HtmlElement>()
                         .map(JsValue::from)
                 {
-                    ctx.props()
-                        .custom_events
-                        .dispatch_event(format!("statusbar-{}", event.type_()).as_str(), &event)
-                        .unwrap();
+                    ctx.props().presentation.statusbar_pointer_event.emit(event);
                 }
 
                 false
@@ -126,16 +105,13 @@ impl Component for MainPanel {
 
     fn view(&self, ctx: &Context<Self>) -> Html {
         let Self::Properties {
-            custom_events,
             presentation,
             renderer,
             session,
             ..
         } = ctx.props();
 
-        let is_settings_open = ctx.props().is_settings_open
-            && matches!(ctx.props().has_table, Some(TableLoadState::Loaded));
-
+        let is_settings_open = ctx.props().is_settings_open;
         let on_settings = (!is_settings_open).then(|| ctx.props().on_settings.clone());
 
         let mut class = classes!();
@@ -148,17 +124,7 @@ impl Component for MainPanel {
         }
 
         let pointerdown = ctx.link().callback(MainPanelMsg::PointerEvent);
-        let on_dismiss_warning = {
-            clone!(renderer, session);
-            Callback::from(move |_: ()| {
-                clone!(renderer, session);
-                ApiFuture::spawn(async move {
-                    renderer.disable_active_plugin_render_warning();
-                    let view_task = session.get_view();
-                    renderer.update(view_task).await
-                });
-            })
-        };
+        let on_dismiss_warning = dismiss_render_warning_callback(session, renderer);
 
         html! {
             <div id="main_column">
@@ -166,17 +132,10 @@ impl Component for MainPanel {
                     id="status_bar"
                     {on_settings}
                     on_reset={ctx.props().on_reset.clone()}
-                    has_table={ctx.props().has_table.clone()}
-                    is_errored={ctx.props().is_errored}
-                    stats={ctx.props().stats.clone()}
-                    update_count={ctx.props().update_count}
-                    error={ctx.props().error.clone()}
-                    title={ctx.props().title.clone()}
+                    session_props={ctx.props().session_props.clone()}
+                    presentation_props={ctx.props().presentation_props.clone()}
                     is_settings_open={ctx.props().is_settings_open}
-                    selected_theme={ctx.props().selected_theme.clone()}
-                    available_themes={ctx.props().available_themes.clone()}
-                    is_workspace={ctx.props().is_workspace}
-                    {custom_events}
+                    update_count={ctx.props().update_count}
                     {presentation}
                     {renderer}
                     {session}
@@ -189,7 +148,7 @@ impl Component for MainPanel {
                 >
                     <RenderWarning
                         on_dismiss={on_dismiss_warning}
-                        dimensions={ctx.props().render_limits}
+                        dimensions={ctx.props().renderer_props.render_limits}
                     />
                     <slot />
                 </div>

package/src/rust/components/mod.rs

@@ -30,8 +30,9 @@ pub mod form;
 pub mod function_dropdown;
 pub mod main_panel;
 pub mod modal;
-pub mod number_column_style;
+pub mod number_series_style;
 pub mod plugin_selector;
+pub mod plugin_tab;
 pub mod portal;
 pub mod render_warning;
 pub mod settings_panel;

package/src/rust/components/number_series_style.rs

@@ -0,0 +1,161 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use web_sys::{HtmlInputElement, InputEvent};
+use yew::prelude::*;
+
+use super::modal::{ModalLink, SetModalLink};
+use super::style::LocalStyle;
+use crate::components::form::select_enum_field::SelectEnumField;
+use crate::config::*;
+use crate::css;
+use crate::utils::WeakScope;
+
+#[derive(Properties)]
+pub struct NumberSeriesStyleProps {
+    pub config: Option<NumberSeriesStyleConfig>,
+    pub default_config: NumberSeriesStyleDefaultConfig,
+
+    #[prop_or_default]
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
+
+    #[prop_or_default]
+    pub keys: Vec<String>,
+
+    #[prop_or_default]
+    weak_link: WeakScope<NumberSeriesStyle>,
+}
+
+impl ModalLink<NumberSeriesStyle> for NumberSeriesStyleProps {
+    fn weak_link(&self) -> &'_ WeakScope<NumberSeriesStyle> {
+        &self.weak_link
+    }
+}
+
+impl PartialEq for NumberSeriesStyleProps {
+    fn eq(&self, other: &Self) -> bool {
+        self.config == other.config && self.default_config == other.default_config
+    }
+}
+
+pub enum NumberSeriesStyleMsg {
+    ChartTypeChanged(Option<ChartType>),
+    StackChanged(Option<bool>),
+}
+
+/// Form control for the per-column `chart_type` + `stack` picker. Rendered
+/// inside the column-settings sidebar when the active plugin returns a
+/// `ControlSpec::NumberSeriesStyle` from its `column_config_schema` hook.
+pub struct NumberSeriesStyle {
+    config: NumberSeriesStyleConfig,
+}
+
+impl Component for NumberSeriesStyle {
+    type Message = NumberSeriesStyleMsg;
+    type Properties = NumberSeriesStyleProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        ctx.set_modal_link();
+        Self {
+            config: ctx.props().config.clone().unwrap_or_default(),
+        }
+    }
+
+    fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
+        let new_config = ctx.props().config.clone().unwrap_or_default();
+        if self.config != new_config {
+            self.config = new_config;
+            true
+        } else {
+            false
+        }
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            NumberSeriesStyleMsg::ChartTypeChanged(val) => {
+                self.config.chart_type = val.unwrap_or_default();
+                // Hiding the stack checkbox on Line/Scatter also clears any
+                // lingering override so the JSON stays empty by default.
+                if !self.config.chart_type.supports_stack() {
+                    self.config.stack = None;
+                }
+                self.dispatch_config(ctx);
+                true
+            },
+            NumberSeriesStyleMsg::StackChanged(val) => {
+                self.config.stack = val;
+                self.dispatch_config(ctx);
+                true
+            },
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let chart_type_changed = ctx.link().callback(NumberSeriesStyleMsg::ChartTypeChanged);
+
+        let stack_controls = if self.config.chart_type.supports_stack() {
+            // Default: bar/area stack. `None` == inherit the default.
+            let checked = self.config.stack.unwrap_or(true);
+            let oninput = ctx.link().callback(move |e: InputEvent| {
+                let input: HtmlInputElement = e.target_unchecked_into();
+                let next = input.checked();
+                // Persist explicit `false` overrides; the "stacked" default
+                // round-trips as `None` to keep JSON empty.
+                NumberSeriesStyleMsg::StackChanged(if next { None } else { Some(false) })
+            });
+            html! {
+                <div class="row">
+                    <label id="stack-label" />
+                    <input type="checkbox" id="stack-checkbox" {checked} {oninput} />
+                </div>
+            }
+        } else {
+            html! {}
+        };
+
+        html! {
+            <>
+                <LocalStyle href={css!("column-style")} />
+                <div id="column-style-container" class="number-series-style-container">
+                    <SelectEnumField<ChartType>
+                        label="chart-type"
+                        on_change={chart_type_changed}
+                        current_value={self.config.chart_type}
+                    />
+                    { stack_controls }
+                </div>
+            </>
+        }
+    }
+}
+
+impl NumberSeriesStyle {
+    /// Dispatch the current config as an update. The default (Bar + no
+    /// stack override) round-trips as an empty JSON object via
+    /// `skip_serializing_if`, which means a field-level reset for this
+    /// schema field.
+    fn dispatch_config(&self, ctx: &Context<Self>) {
+        let value = if self.config == NumberSeriesStyleConfig::default() {
+            serde_json::Map::new()
+        } else {
+            match serde_json::to_value(&self.config) {
+                Ok(serde_json::Value::Object(m)) => m,
+                _ => serde_json::Map::new(),
+            }
+        };
+        ctx.props().on_change.emit(ColumnConfigFieldUpdate {
+            keys: ctx.props().keys.clone(),
+            value,
+        });
+    }
+}