@perspective-dev/viewer 4.4.1 → 4.5.1

package/src/rust/components/column_selector.rs

@@ -43,14 +43,11 @@ use super::style::LocalStyle;
 use crate::components::column_dropdown::{ColumnDropDownElement, ColumnDropDownPortal};
 use crate::components::containers::scroll_panel_item::ScrollPanelItem;
 use crate::css;
-use crate::dragdrop::*;
-use crate::presentation::ColumnLocator;
+use crate::presentation::{ColumnLocator, DragDropContainer, Presentation};
+use crate::queries::{ActiveColumnState, ActiveColumnStateData, ColumnsIteratorSet};
 use crate::renderer::*;
 use crate::session::drag_drop_update::*;
 use crate::session::*;
-use crate::tasks::{
-    ActiveColumnState, ActiveColumnStateData, ColumnsIteratorSet, can_render_column_styles,
-};
 use crate::utils::*;
 
 #[derive(Properties)]
@@ -77,11 +74,28 @@ pub struct ColumnSelectorProps {
     // State
     pub session: Session,
     pub renderer: Renderer,
-    pub dragdrop: DragDrop,
+    pub presentation: Presentation,
 
     /// Fires when this component is resized via the UI.
     #[prop_or_default]
     pub on_resize: Option<Rc<PubSub<()>>>,
+
+    /// Trap-door width pinned by the parent `SettingsPanel` so switching
+    /// tabs doesn't shrink the panel. Threaded into the inner
+    /// `ScrollPanel` as `initial_width`.
+    #[prop_or_default]
+    pub initial_width: f64,
+
+    /// Fires when the inner `ScrollPanel` measures its natural width.
+    /// Routed up to `SettingsPanel` which keeps the running max.
+    #[prop_or_default]
+    pub on_auto_width: Callback<f64>,
+
+    /// External "release the trap-door" signal from the outer settings
+    /// split-panel divider reset. Forwarded into `self.on_reset` so both
+    /// inner `ScrollPanel`s drop their cached `viewport_width`.
+    #[prop_or_default]
+    pub on_dimensions_reset: Option<Rc<PubSub<()>>>,
 }
 
 impl PartialEq for ColumnSelectorProps {
@@ -93,6 +107,7 @@ impl PartialEq for ColumnSelectorProps {
             && self.drag_column == rhs.drag_column
             && self.metadata == rhs.metadata
             && self.selected_theme == rhs.selected_theme
+            && self.initial_width == rhs.initial_width
     }
 }
 
@@ -102,7 +117,6 @@ pub enum ColumnSelectorMsg {
     /// from `ConfigSelector` after it mutates the view config.
     Redraw,
     HoverActiveIndex(Option<usize>),
-    SetWidth(f64),
     Drop((String, DragTarget, DragEffect, usize)),
 }
 
@@ -111,10 +125,9 @@ use ColumnSelectorMsg::*;
 /// A `ColumnSelector` controls the `columns` field of the `ViewConfig`,
 /// deriving its options from the table columns and `ViewConfig` expressions.
 pub struct ColumnSelector {
-    _subscriptions: [Subscription; 1],
+    _subscriptions: Vec<Subscription>,
     drag_container: DragDropContainer,
     column_dropdown: ColumnDropDownElement,
-    viewport_width: f64,
     on_reset: Rc<PubSub<()>>,
 }
 
@@ -124,12 +137,14 @@ impl Component for ColumnSelector {
 
     fn create(ctx: &Context<Self>) -> Self {
         let ColumnSelectorProps {
-            dragdrop, session, ..
+            presentation,
+            session,
+            ..
         } = ctx.props();
 
         let drop_sub = {
             let cb = ctx.link().callback(ColumnSelectorMsg::Drop);
-            dragdrop.drop_received.add_listener(cb)
+            presentation.drop_received.add_listener(cb)
         };
 
         let drag_container = DragDropContainer::new(|| {}, {
@@ -138,28 +153,32 @@ impl Component for ColumnSelector {
         });
 
         let column_dropdown = ColumnDropDownElement::new(session.clone());
+        let on_reset: Rc<PubSub<()>> = Default::default();
+        let mut subscriptions = vec![drop_sub];
+        if let Some(outer_reset) = ctx.props().on_dimensions_reset.as_ref() {
+            let on_reset = on_reset.clone();
+            subscriptions.push(outer_reset.add_listener(move |()| on_reset.emit(())));
+        }
+
         Self {
-            _subscriptions: [drop_sub],
-            viewport_width: 0f64,
+            _subscriptions: subscriptions,
             drag_container,
             column_dropdown,
-            on_reset: Default::default(),
+            on_reset,
         }
     }
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Redraw => true,
-            SetWidth(w) => {
-                self.viewport_width = w;
-                false
-            },
             HoverActiveIndex(Some(to_index)) => ctx
                 .props()
-                .dragdrop
+                .presentation
                 .notify_drag_enter(DragTarget::Active, to_index),
             HoverActiveIndex(_) => {
-                ctx.props().dragdrop.notify_drag_leave(DragTarget::Active);
+                ctx.props()
+                    .presentation
+                    .notify_drag_leave(DragTarget::Active);
                 true
             },
             Drop((column, DragTarget::Active, DragEffect::Move(DragTarget::Active), index)) => {
@@ -170,7 +189,7 @@ impl Component for ColumnSelector {
                         .iter()
                         .position(|x| x.as_ref() == Some(&column));
 
-                    let min_cols = ctx.props().renderer.metadata().min;
+                    let min_cols = ctx.props().renderer.metadata().min_config_columns;
                     let is_to_empty = !config
                         .columns
                         .get(index)
@@ -247,7 +266,7 @@ impl Component for ColumnSelector {
         let ColumnSelectorProps {
             session,
             renderer,
-            dragdrop,
+            presentation,
             ..
         } = ctx.props();
         let metadata = &ctx.props().metadata;
@@ -271,18 +290,18 @@ impl Component for ColumnSelector {
         };
 
         let is_aggregated = config.is_aggregated();
-        let columns_iter = ColumnsIteratorSet::new(&config, metadata, renderer, dragdrop);
+        let columns_iter = ColumnsIteratorSet::new(&config, metadata, renderer, presentation);
         let onselect = ctx.link().callback(|()| Redraw);
         let ondragenter = ctx.link().callback(HoverActiveIndex);
         let ondragover = Callback::from(|_event: DragEvent| _event.prevent_default());
         let ondrop = Callback::from({
-            clone!(dragdrop);
-            move |event| dragdrop.notify_drop(&event)
+            clone!(presentation);
+            move |event| presentation.notify_drop(&event)
         });
 
         let ondragend = Callback::from({
-            clone!(dragdrop);
-            move |_| dragdrop.notify_drag_end()
+            clone!(presentation);
+            move |_| presentation.notify_drag_end()
         });
 
         let mut active_classes = classes!("scrollable");
@@ -333,7 +352,7 @@ impl Component for ColumnSelector {
                     drag_column={ctx.props().drag_column.clone()}
                     metadata={metadata.clone()}
                     selected_theme={ctx.props().selected_theme.clone()}
-                    {dragdrop}
+                    {presentation}
                     {renderer}
                     {session}
                 />
@@ -368,7 +387,7 @@ impl Component for ColumnSelector {
                     .and_then(|n| metadata.get_column_table_type(n))
                     .or_else(|| {
                         if matches!(name.state, ActiveColumnStateData::DragOver) {
-                            dragdrop
+                            presentation
                                 .get_drag_column()
                                 .and_then(|c| metadata.get_column_table_type(&c))
                         } else {
@@ -381,10 +400,8 @@ impl Component for ColumnSelector {
                     .map(|n| metadata.is_column_expression(n))
                     .unwrap_or(false);
 
-                let can_render_styles = name
-                    .get_name()
-                    .and_then(|n| can_render_column_styles(renderer, &config, metadata, n).ok())
-                    .unwrap_or(false);
+                let can_render_styles =
+                    name.get_name().is_some() && renderer.can_render_column_styles();
 
                 let show_edit_btn = is_expression || can_render_styles;
                 let on_open_expr_panel = &ctx.props().on_open_expr_panel;
@@ -405,7 +422,7 @@ impl Component for ColumnSelector {
                             {ondragenter}
                             ondragend={&ondragend}
                             onselect={&onselect}
-                            {dragdrop}
+                            {presentation}
                             {renderer}
                             {session}
                         />
@@ -435,7 +452,7 @@ impl Component for ColumnSelector {
                             onselect={&onselect}
                             ondragend={&ondragend}
                             on_open_expr_panel={&ctx.props().on_open_expr_panel}
-                            {dragdrop}
+                            {presentation}
                             {renderer}
                             {session}
                         />
@@ -471,13 +488,14 @@ impl Component for ColumnSelector {
             <div id="selected-columns" key="__active_columns__">
                 <ScrollPanel
                     id="active-columns"
+                    omit_autosize_div={true}
                     class={active_classes}
                     dragover={ondragover}
                     dragenter={&self.drag_container.dragenter}
                     dragleave={&self.drag_container.dragleave}
                     viewport_ref={&self.drag_container.noderef}
-                    initial_width={self.viewport_width}
-                    on_auto_width={ctx.link().callback(ColumnSelectorMsg::SetWidth)}
+                    initial_width={ctx.props().initial_width}
+                    on_auto_width={ctx.props().on_auto_width.clone()}
                     drop={ondrop}
                     on_resize={&ctx.props().on_resize}
                     on_dimensions_reset={&self.on_reset}

package/src/rust/components/column_settings_sidebar/style_tab/agg_depth_selector.rs

@@ -14,17 +14,19 @@ use perspective_client::clone;
 use yew::{Callback, Html, Properties, function_component, html};
 
 use crate::components::form::number_field::NumberField;
-use crate::config::ColumnConfigValueUpdate;
+use crate::config::ColumnConfigFieldUpdate;
 
 // ░░░█▀█░█▀▄░█▀█░█▀█░█▀▀░█▀▄░▀█▀░▀█▀░█▀▀░█▀▀░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 // ░░░█▀▀░█▀▄░█░█░█▀▀░█▀▀░█▀▄░░█░░░█░░█▀▀░▀▀█░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 // ░░░▀░░░▀░▀░▀▀▀░▀░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░▀▀▀░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 #[derive(Properties, PartialEq)]
 pub struct AggregateDepthSelectorProps {
-    pub on_change: Callback<ColumnConfigValueUpdate>,
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
     pub value: u32,
     pub group_by_depth: u32,
     pub column_name: String,
+    #[prop_or_default]
+    pub keys: Vec<String>,
 }
 
 #[function_component]
@@ -36,12 +38,18 @@ pub fn AggregateDepthSelector(props: &AggregateDepthSelectorProps) -> Html {
     });
 
     let on_change = yew::use_callback(
-        (state.setter(), props.on_change.clone()),
+        (state.setter(), props.on_change.clone(), props.keys.clone()),
         |x: Option<f64>, deps| {
-            deps.0.set(x.unwrap_or_default() as u32);
-            deps.1.emit(ColumnConfigValueUpdate::AggregateDepth(
-                x.unwrap_or_default() as u32,
-            ))
+            let depth = x.unwrap_or_default() as u32;
+            deps.0.set(depth);
+            let mut value = serde_json::Map::new();
+            if depth > 0 {
+                value.insert("aggregate_depth".to_owned(), serde_json::json!(depth));
+            }
+            deps.1.emit(ColumnConfigFieldUpdate {
+                keys: deps.2.clone(),
+                value,
+            })
         },
     );
 

package/src/rust/components/column_settings_sidebar/style_tab/primitive_field.rs

@@ -0,0 +1,395 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! Schema-driven generic widgets for the Style tab. Each widget renders a
+//! single primitive [`crate::config::ControlSpec`] variant and emits a
+//! [`crate::config::ColumnConfigFieldUpdate`] on change. Built on top of
+//! the existing form components ([`Select`], [`OptionalField`],
+//! [`ColorSelector`]) so that they visually match the rich Yew widgets in
+//! the same sidebar.
+
+use std::rc::Rc;
+
+use itertools::Itertools;
+use serde_json::Value;
+use wasm_bindgen::JsCast;
+use web_sys::{HtmlInputElement, MouseEvent};
+use yew::{Callback, Html, Properties, classes, function_component, html, use_callback};
+
+use crate::components::containers::select::{Select, SelectItem};
+use crate::components::form::color_range_selector::ColorRangeSelector;
+use crate::components::form::color_selector::ColorSelector;
+use crate::components::form::number_field::NumberField;
+use crate::components::form::optional_field::OptionalField;
+use crate::config::{ColumnConfigFieldUpdate, EnumVariant};
+
+fn emit(on_change: &Callback<ColumnConfigFieldUpdate>, key: &str, value: Option<Value>) {
+    let mut map = serde_json::Map::new();
+    if let Some(v) = value {
+        map.insert(key.to_owned(), v);
+    }
+
+    on_change.emit(ColumnConfigFieldUpdate {
+        keys: vec![key.to_owned()],
+        value: map,
+    });
+}
+
+fn emit_color_range(
+    on_change: &Callback<ColumnConfigFieldUpdate>,
+    key_pos: &str,
+    key_neg: &str,
+    default_pos: &str,
+    default_neg: &str,
+    new_pos: &str,
+    new_neg: &str,
+) {
+    let mut value = serde_json::Map::new();
+    if new_pos != default_pos {
+        value.insert(key_pos.to_owned(), Value::String(new_pos.to_owned()));
+    }
+    if new_neg != default_neg {
+        value.insert(key_neg.to_owned(), Value::String(new_neg.to_owned()));
+    }
+    on_change.emit(ColumnConfigFieldUpdate {
+        keys: vec![key_pos.to_owned(), key_neg.to_owned()],
+        value,
+    });
+}
+
+#[derive(Properties, PartialEq)]
+pub struct EnumFieldProps {
+    pub field_key: String,
+    pub variants: Vec<EnumVariant>,
+    pub default: String,
+    pub current: Option<String>,
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
+}
+
+#[function_component]
+pub fn EnumField(props: &EnumFieldProps) -> Html {
+    let selected = props
+        .current
+        .clone()
+        .unwrap_or_else(|| props.default.clone());
+
+    let checked = selected != props.default;
+    let values: Rc<Vec<SelectItem<String>>> = Rc::new(
+        props
+            .variants
+            .iter()
+            .map(|v| SelectItem::Option(v.value.clone()))
+            .collect_vec(),
+    );
+
+    let on_select = use_callback(
+        (
+            props.field_key.clone(),
+            props.default.clone(),
+            props.on_change.clone(),
+        ),
+        |value: String, (key, default, on_change)| {
+            if value == *default {
+                emit(on_change, key, None);
+            } else {
+                emit(on_change, key, Some(Value::String(value)));
+            }
+        },
+    );
+
+    let on_reset = use_callback(
+        (props.field_key.clone(), props.on_change.clone()),
+        |_: MouseEvent, (key, on_change)| emit(on_change, key, None),
+    );
+
+    html! {
+        <div class="row">
+            <OptionalField label={props.field_key.clone()} on_check={on_reset} {checked}>
+                <Select<String> {values} {selected} {on_select} />
+            </OptionalField>
+        </div>
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct BoolFieldProps {
+    pub field_key: String,
+    pub default: bool,
+    pub current: Option<bool>,
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
+}
+
+#[function_component]
+pub fn BoolField(props: &BoolFieldProps) -> Html {
+    let current = props.current.unwrap_or(props.default);
+    let oninput = use_callback(
+        (
+            props.field_key.clone(),
+            props.default,
+            props.on_change.clone(),
+        ),
+        |e: yew::events::InputEvent, (key, default, on_change)| {
+            let target: HtmlInputElement = e.target().unwrap().unchecked_into();
+            let next = target.checked();
+            if next == *default {
+                emit(on_change, key, None);
+            } else {
+                emit(on_change, key, Some(Value::Bool(next)));
+            }
+        },
+    );
+
+    let checked = current != props.default;
+    let on_reset = use_callback(
+        (props.field_key.clone(), props.on_change.clone()),
+        |_: MouseEvent, (key, on_change)| emit(on_change, key, None),
+    );
+
+    html! {
+        <div class="row">
+            <OptionalField label={props.field_key.clone()} on_check={on_reset} {checked}>
+                <div class="bool-field-container">
+                    <input
+                        type="checkbox"
+                        class="alternate"
+                        id={format!("{}-checkbox", props.field_key)}
+                        checked={current}
+                        {oninput}
+                    />
+                    <label for={format!("{}-checkbox", props.field_key)} class="bool-field-desc">
+                        { if current { "Enabled" } else { "Disabled" } }
+                    </label>
+                </div>
+            </OptionalField>
+        </div>
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct NumberFieldPrimitiveProps {
+    pub field_key: String,
+    pub default: f64,
+    pub current: Option<f64>,
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
+
+    #[prop_or_default]
+    pub include: Option<bool>,
+
+    #[prop_or_default]
+    pub min: Option<f64>,
+
+    #[prop_or_default]
+    pub max: Option<f64>,
+
+    #[prop_or_default]
+    pub step: Option<f64>,
+}
+
+#[function_component]
+pub fn NumberFieldPrimitive(props: &NumberFieldPrimitiveProps) -> Html {
+    let on_change_inner = use_callback(
+        (
+            props.field_key.clone(),
+            props.default,
+            props.on_change.clone(),
+            props.include,
+        ),
+        |value: Option<f64>, (key, default, on_change, include)| match value {
+            Some(v) if include.unwrap_or_default() || v != *default => emit(
+                on_change,
+                key,
+                Some(
+                    serde_json::Number::from_f64(v)
+                        .map(Value::Number)
+                        .unwrap_or(Value::Null),
+                ),
+            ),
+            None if include.unwrap_or_default() => emit(
+                on_change,
+                key,
+                Some(
+                    serde_json::Number::from_f64(*default)
+                        .map(Value::Number)
+                        .unwrap_or(Value::Null),
+                ),
+            ),
+            _ => emit(on_change, key, None),
+        },
+    );
+
+    html! {
+        <NumberField
+            label={props.field_key.clone()}
+            current_value={props.current}
+            default={props.default}
+            min={props.min}
+            max={props.max}
+            step={props.step}
+            on_change={on_change_inner}
+        />
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct ColorRangeFieldProps {
+    pub field_key_pos: String,
+    pub field_key_neg: String,
+    pub default_pos: String,
+    pub default_neg: String,
+    pub current_pos: Option<String>,
+    pub current_neg: Option<String>,
+    pub is_gradient: bool,
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
+}
+
+#[function_component]
+pub fn ColorRangeField(props: &ColorRangeFieldProps) -> Html {
+    let pos = props
+        .current_pos
+        .clone()
+        .unwrap_or_else(|| props.default_pos.clone());
+    let neg = props
+        .current_neg
+        .clone()
+        .unwrap_or_else(|| props.default_neg.clone());
+    let is_modified = (props.current_pos.is_some()
+        && props.current_pos.as_deref() != Some(props.default_pos.as_str()))
+        || (props.current_neg.is_some()
+            && props.current_neg.as_deref() != Some(props.default_neg.as_str()));
+
+    // Multi-key emit: write whichever side(s) differ from default,
+    // clear the others. Mirrors the apply semantics of
+    // `ColumnConfigFieldUpdate { keys, value }` with both keys owned.
+    let on_pos_color = use_callback(
+        (
+            props.field_key_pos.clone(),
+            props.field_key_neg.clone(),
+            props.default_pos.clone(),
+            props.default_neg.clone(),
+            props.on_change.clone(),
+            neg.clone(),
+        ),
+        |new_pos: String, (key_pos, key_neg, default_pos, default_neg, on_change, neg)| {
+            emit_color_range(
+                on_change,
+                key_pos,
+                key_neg,
+                default_pos,
+                default_neg,
+                &new_pos,
+                neg,
+            );
+        },
+    );
+
+    let on_neg_color = use_callback(
+        (
+            props.field_key_pos.clone(),
+            props.field_key_neg.clone(),
+            props.default_pos.clone(),
+            props.default_neg.clone(),
+            props.on_change.clone(),
+            pos.clone(),
+        ),
+        |new_neg: String, (key_pos, key_neg, default_pos, default_neg, on_change, pos)| {
+            emit_color_range(
+                on_change,
+                key_pos,
+                key_neg,
+                default_pos,
+                default_neg,
+                pos,
+                &new_neg,
+            );
+        },
+    );
+
+    let on_reset = use_callback(
+        (
+            props.field_key_pos.clone(),
+            props.field_key_neg.clone(),
+            props.on_change.clone(),
+        ),
+        |_: (), (key_pos, key_neg, on_change)| {
+            on_change.emit(ColumnConfigFieldUpdate {
+                keys: vec![key_pos.clone(), key_neg.clone()],
+                value: serde_json::Map::new(),
+            });
+        },
+    );
+
+    html! {
+        <div class="row">
+            <ColorRangeSelector
+                pos_class={classes!(props.field_key_pos.clone())}
+                neg_class={classes!(props.field_key_neg.clone())}
+                pos_color={pos}
+                neg_color={neg}
+                is_gradient={props.is_gradient}
+                {on_pos_color}
+                {on_neg_color}
+                {on_reset}
+                {is_modified}
+            />
+        </div>
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct ColorFieldProps {
+    pub field_key: String,
+    pub default: String,
+    pub current: Option<String>,
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
+}
+
+#[function_component]
+pub fn ColorField(props: &ColorFieldProps) -> Html {
+    let color = props
+        .current
+        .clone()
+        .unwrap_or_else(|| props.default.clone());
+    let is_modified =
+        props.current.as_deref() != Some(props.default.as_str()) && props.current.is_some();
+
+    let on_color = use_callback(
+        (
+            props.field_key.clone(),
+            props.default.clone(),
+            props.on_change.clone(),
+        ),
+        |value: String, (key, default, on_change)| {
+            if value == *default {
+                emit(on_change, key, None);
+            } else {
+                emit(on_change, key, Some(Value::String(value)));
+            }
+        },
+    );
+
+    let on_reset = use_callback(
+        (props.field_key.clone(), props.on_change.clone()),
+        |_: (), (key, on_change)| emit(on_change, key, None),
+    );
+
+    html! {
+        <div class="row">
+            <ColorSelector
+                {color}
+                {on_color}
+                {on_reset}
+                {is_modified}
+                title={Some(format!("{}-label", props.field_key))}
+            />
+        </div>
+    }
+}