@perspective-dev/viewer 5.3.1 → 5.5.0

package/src/rust/components/column_selector/filter_column.rs

@@ -19,14 +19,14 @@ use wasm_bindgen::JsCast;
 use web_sys::*;
 use yew::prelude::*;
 
-use crate::components::containers::dragdrop_list::*;
-use crate::components::containers::select::*;
+use crate::components::dragdrop_list::*;
 use crate::components::filter_dropdown::FilterDropDownElement;
 use crate::components::type_icon::TypeIcon;
 use crate::presentation::Presentation;
 use crate::renderer::*;
 use crate::session::*;
 use crate::tasks::apply_and_render;
+use crate::ui::{Select, SelectItem};
 use crate::utils::*;
 
 #[derive(Clone, Properties)]
@@ -240,9 +240,12 @@ impl Component for FilterColumn {
             let event_name = ctx.props().filter.column().to_owned();
             let presentation = ctx.props().presentation.clone();
             move |event: DragEvent| {
-                presentation.set_drag_image(&event).unwrap();
-                presentation
-                    .notify_drag_start(event_name.to_string(), DragEffect::Move(DragTarget::Filter))
+                if presentation.set_drag_image(&event) {
+                    presentation.notify_drag_start(
+                        event_name.to_string(),
+                        DragEffect::Move(DragTarget::Filter),
+                    )
+                }
             }
         });
 

package/src/rust/components/column_selector/inactive_column.rs

@@ -141,8 +141,10 @@ impl Component for InactiveColumn {
             let event_name = ctx.props().name.to_owned();
             let presentation = ctx.props().presentation.clone();
             move |event: DragEvent| {
-                presentation.set_drag_image(&event).unwrap();
-                presentation.notify_drag_start(event_name.to_string(), DragEffect::Copy);
+                if presentation.set_drag_image(&event) {
+                    presentation.notify_drag_start(event_name.to_string(), DragEffect::Copy);
+                }
+
                 MouseLeave(true)
             }
         });

package/src/rust/components/column_selector/pivot_column.rs

@@ -14,7 +14,7 @@ use perspective_client::config::ColumnType;
 use web_sys::*;
 use yew::prelude::*;
 
-use crate::components::containers::dragdrop_list::*;
+use crate::components::dragdrop_list::*;
 use crate::components::type_icon::TypeIcon;
 use crate::presentation::Presentation;
 use crate::session::*;
@@ -73,8 +73,9 @@ impl Component for PivotColumn {
             let presentation = ctx.props().presentation.clone();
             let action = ctx.props().action;
             move |event: DragEvent| {
-                presentation.set_drag_image(&event).unwrap();
-                presentation.notify_drag_start(event_name.to_string(), DragEffect::Move(action))
+                if presentation.set_drag_image(&event) {
+                    presentation.notify_drag_start(event_name.to_string(), DragEffect::Move(action))
+                }
             }
         });
 

package/src/rust/components/column_selector/sort_column.rs

@@ -14,7 +14,7 @@ use perspective_client::config::*;
 use web_sys::*;
 use yew::prelude::*;
 
-use crate::components::containers::dragdrop_list::*;
+use crate::components::dragdrop_list::*;
 use crate::components::type_icon::TypeIcon;
 use crate::presentation::Presentation;
 use crate::renderer::*;
@@ -104,9 +104,12 @@ impl Component for SortColumn {
             let event_name = ctx.props().sort.0.to_owned();
             let presentation = ctx.props().presentation.clone();
             move |event: DragEvent| {
-                presentation.set_drag_image(&event).unwrap();
-                presentation
-                    .notify_drag_start(event_name.to_string(), DragEffect::Move(DragTarget::Sort))
+                if presentation.set_drag_image(&event) {
+                    presentation.notify_drag_start(
+                        event_name.to_string(),
+                        DragEffect::Move(DragTarget::Sort),
+                    )
+                }
             }
         });
 

package/src/rust/components/column_selector.rs

@@ -38,10 +38,7 @@ use self::active_column::*;
 use self::add_expression_button::AddExpressionButton;
 use self::config_selector::ConfigSelector;
 use self::inactive_column::*;
-use super::containers::scroll_panel::*;
-use super::containers::split_panel::{Orientation, SplitPanel};
 use crate::components::column_dropdown::{ColumnDropDownElement, ColumnDropDownPortal};
-use crate::components::containers::scroll_panel_item::ScrollPanelItem;
 use crate::config::PluginStaticConfig;
 use crate::presentation::{ColumnLocator, ColumnSettingsTarget, DragDropContainer, Presentation};
 use crate::queries::{
@@ -51,6 +48,7 @@ use crate::renderer::*;
 use crate::session::drag_drop_update::*;
 use crate::session::*;
 use crate::tasks::apply_and_render;
+use crate::ui::{Orientation, ScrollPanel, ScrollPanelItem, SplitPanel};
 use crate::utils::*;
 
 #[derive(Properties)]
@@ -69,6 +67,10 @@ pub struct ColumnSelectorProps {
     /// prop on `SettingsPanelProps`.
     pub plugin_static_config: Rc<PluginStaticConfig>,
     pub view_config: PtrEqRc<ViewConfig>,
+
+    /// Snapshot of the active plugin's `columns_config` bucket, whose
+    /// non-empty entries mark their active columns as modified.
+    pub columns_config: PtrEqRc<ColumnConfigMap>,
     pub drag_column: Option<String>,
 
     /// Cloned session metadata snapshot — threaded from `SessionProps`
@@ -112,6 +114,7 @@ impl PartialEq for ColumnSelectorProps {
             && self.named_column_count == rhs.named_column_count
             && self.plugin_static_config == rhs.plugin_static_config
             && self.view_config == rhs.view_config
+            && self.columns_config == rhs.columns_config
             && self.drag_column == rhs.drag_column
             && self.metadata == rhs.metadata
             && self.selected_theme == rhs.selected_theme
@@ -333,6 +336,7 @@ impl Component for ColumnSelector {
             prop_config.clone()
         };
 
+        let is_last_column = config.columns.len() == 1;
         let is_aggregated = config.is_aggregated();
         let columns_iter = ColumnsIteratorSet::new(&config, metadata, renderer, presentation);
         let onselect = ctx.link().callback(|()| Redraw);
@@ -456,6 +460,11 @@ impl Component for ColumnSelector {
                     name.get_name().is_some() && renderer.can_render_column_styles();
 
                 let show_edit_btn = is_expression || is_window || can_render_styles;
+                let is_modified = name
+                    .get_name()
+                    .and_then(|n| ctx.props().columns_config.get(n))
+                    .is_some_and(|entry| !entry.is_empty());
+
                 let on_open_expr_panel = &ctx.props().on_open_expr_panel;
                 html_nested! {
                     <ScrollPanelItem {key} {size_hint}>
@@ -466,8 +475,10 @@ impl Component for ColumnSelector {
                             {is_editing}
                             {is_expression}
                             {is_window}
+                            {is_modified}
                             {show_edit_btn}
                             {col_type}
+                            {is_last_column}
                             view_config={config.clone()}
                             metadata={metadata.clone()}
                             {name}

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

@@ -13,8 +13,8 @@
 use perspective_client::clone;
 use yew::{Callback, Html, Properties, function_component, html};
 
-use crate::components::form::number_field::NumberField;
 use crate::config::ColumnConfigFieldUpdate;
+use crate::ui::NumberField;
 
 // ░░░█▀█░█▀▄░█▀█░█▀█░█▀▀░█▀▄░▀█▀░▀█▀░█▀▀░█▀▀░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 // ░░░█▀▀░█▀▄░█░█░█▀▀░█▀▀░█▀▄░░█░░░█░░█▀▀░▀▀█░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

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

@@ -0,0 +1,90 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 serde_json::Value;
+use web_sys::MouseEvent;
+use yew::prelude::*;
+
+use super::primitive_field::emit;
+use crate::config::{Alignment, ColumnConfigFieldUpdate};
+use crate::ui::OptionalField;
+
+#[derive(Properties, PartialEq)]
+pub struct AlignmentFieldProps {
+    pub field_key: String,
+    pub default: Option<Alignment>,
+    pub corners: bool,
+    pub current: Option<Alignment>,
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
+}
+
+/// The `ControlSpec::Alignment` widget: a 3×3 grid of cells whose dot sits
+/// where the cell's token anchors.
+#[function_component]
+pub fn AlignmentField(props: &AlignmentFieldProps) -> Html {
+    let selected = props.current.or(props.default);
+    let checked = props.current.is_some() && props.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),
+    );
+
+    let cells = Alignment::ALL.into_iter().map(|align| {
+        let onclick = {
+            let key = props.field_key.clone();
+            let default = props.default;
+            let on_change = props.on_change.clone();
+            Callback::from(move |_: MouseEvent| {
+                if Some(align) == default {
+                    emit(&on_change, &key, None);
+                } else {
+                    emit(
+                        &on_change,
+                        &key,
+                        Some(Value::String(align.as_str().to_owned())),
+                    );
+                }
+            })
+        };
+
+        let is_selected = selected == Some(align);
+        html! {
+            <button
+                type="button"
+                role="radio"
+                class={classes!(
+                    "alignment-cell",
+                    (is_selected && props.current.is_none()).then_some("is-default")
+                )}
+                data-align={align.as_str()}
+                aria-checked={is_selected.to_string()}
+                aria-label={align.humanized()}
+                disabled={props.corners && !align.is_corner()}
+                {onclick}
+            />
+        }
+    });
+
+    html! {
+        <div class="row">
+            <OptionalField label={props.field_key.clone()} on_check={on_reset} {checked}>
+                <div
+                    class="alignment-grid"
+                    role="radiogroup"
+                    id={format!("{}-alignment", props.field_key)}
+                >
+                    { for cells }
+                </div>
+            </OptionalField>
+        </div>
+    }
+}

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

@@ -0,0 +1,267 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 std::rc::Rc;
+
+use serde_json::Value;
+use web_sys::{HtmlInputElement, InputEvent, MouseEvent};
+use yew::prelude::*;
+
+use super::primitive_field::emit;
+use crate::config::{ColumnConfigFieldUpdate, FontSize, FontToggle};
+use crate::ui::{OptionalField, Select, SelectItem};
+use crate::utils::{
+    LocalFontsAccess, font_family_options, local_fonts_access, on_local_fonts_changed,
+    probe_local_fonts_access, read_intl_string, request_local_fonts_access,
+};
+
+#[derive(Properties, PartialEq)]
+pub struct FontFieldProps {
+    pub field_key: String,
+    pub default: String,
+    pub current: Option<String>,
+
+    /// The size input's key, default and bounds, when the spec declares
+    /// one, and the stored value for that key.
+    #[prop_or_default]
+    pub size: Option<FontSize>,
+
+    #[prop_or_default]
+    pub size_current: Option<f64>,
+
+    /// The bold toggle's key and default, when the spec declares one, and
+    /// the stored value for that key.
+    #[prop_or_default]
+    pub bold: Option<FontToggle>,
+
+    #[prop_or_default]
+    pub bold_current: Option<bool>,
+
+    #[prop_or_default]
+    pub italic: Option<FontToggle>,
+
+    #[prop_or_default]
+    pub italic_current: Option<bool>,
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
+}
+
+/// The `ControlSpec::Font` widget: a family `<select>`, the optional size
+/// input and bold / italic toggles, and a "Local Fonts" action while the
+/// `local-fonts` permission is promptable.
+#[function_component]
+pub fn FontField(props: &FontFieldProps) -> Html {
+    let force_update = use_force_update();
+    use_effect_with((), move |_| {
+        let sub = on_local_fonts_changed(Callback::from(move |()| force_update.force_update()));
+        probe_local_fonts_access();
+        move || drop(sub)
+    });
+
+    let selected = props
+        .current
+        .clone()
+        .unwrap_or_else(|| props.default.clone());
+
+    let toggle_state = |toggle: &Option<FontToggle>, current: Option<bool>| {
+        toggle
+            .as_ref()
+            .map(|t| (t.clone(), current.unwrap_or(t.default)))
+    };
+
+    let bold = toggle_state(&props.bold, props.bold_current);
+    let italic = toggle_state(&props.italic, props.italic_current);
+    let family_checked = selected != props.default;
+    let style_checked = props
+        .size
+        .as_ref()
+        .is_some_and(|s| props.size_current.is_some_and(|v| v != s.default))
+        || bold.as_ref().is_some_and(|(t, on)| *on != t.default)
+        || italic.as_ref().is_some_and(|(t, on)| *on != t.default);
+
+    let values: Rc<Vec<SelectItem<String>>> = Rc::new(
+        font_family_options(&selected)
+            .into_iter()
+            .map(SelectItem::Option)
+            .collect(),
+    );
+
+    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_style = use_callback(
+        (
+            props.size.clone(),
+            props.bold.clone(),
+            props.italic.clone(),
+            props.field_key.clone(),
+            props.on_change.clone(),
+        ),
+        |_: MouseEvent, (size, bold, italic, key, on_change)| {
+            let keys = [
+                size.as_ref().map(|s| s.key.clone()),
+                bold.as_ref().map(|t| t.key.clone()),
+                italic.as_ref().map(|t| t.key.clone()),
+                Some(key.clone()),
+            ]
+            .into_iter()
+            .flatten()
+            .collect();
+
+            on_change.emit(ColumnConfigFieldUpdate {
+                keys,
+                value: serde_json::Map::new(),
+            });
+        },
+    );
+
+    let size_input = props.size.as_ref().map(|size| {
+        let on_input = {
+            let on_change = props.on_change.clone();
+            let size = size.clone();
+            Callback::from(move |event: InputEvent| {
+                let value = event
+                    .target_unchecked_into::<HtmlInputElement>()
+                    .value_as_number();
+                let value = (value.is_finite() && value != size.default)
+                    .then(|| serde_json::Number::from_f64(value).map(Value::Number))
+                    .flatten();
+
+                emit(&on_change, &size.key, value);
+            })
+        };
+
+        html! {
+            <input
+                type="number"
+                class="parameter font-size"
+                id={format!("{}-input", size.key)}
+                min={size.min.map(|v| v.to_string())}
+                max={size.max.map(|v| v.to_string())}
+                step={size.step.map(|v| v.to_string())}
+                value={props.size_current.unwrap_or(size.default).to_string()}
+                oninput={on_input}
+            />
+        }
+    });
+
+    let toggle_button = |class: &'static str, state: &Option<(FontToggle, bool)>| {
+        let Some((toggle, on)) = state else {
+            return html! {};
+        };
+
+        let next = !*on;
+        let on_toggle = {
+            let on_change = props.on_change.clone();
+            let toggle = toggle.clone();
+            Callback::from(move |_: MouseEvent| {
+                let value = (next != toggle.default).then_some(Value::Bool(next));
+                emit(&on_change, &toggle.key, value);
+            })
+        };
+
+        html! {
+            <span
+                class={classes!("font-style-toggle", class)}
+                id={format!("{}-toggle", toggle.key)}
+                role="button"
+                aria-pressed={on.to_string()}
+                onclick={on_toggle}
+            />
+        }
+    };
+
+    let access = local_fonts_access();
+    let action_ref = use_node_ref();
+    use_effect_with((action_ref.clone(), access), |(action_ref, access)| {
+        let Some(elem) = action_ref.cast::<web_sys::Element>() else {
+            return;
+        };
+
+        let (slug, fallback) = match access {
+            Some(LocalFontsAccess::Denied) => (
+                "local-fonts-blocked-title",
+                "Access to local fonts is blocked for this site. Allow it in the browser's site \
+                 settings to list them here.",
+            ),
+            _ => (
+                "request-local-fonts-title",
+                "Allow access to the fonts installed on this device",
+            ),
+        };
+
+        let title = read_intl_string(&elem, slug).unwrap_or_else(|| fallback.to_owned());
+        let _ = elem.set_attribute("title", &title);
+    });
+
+    let local_fonts = match access {
+        Some(LocalFontsAccess::Prompt) => {
+            let on_request = Callback::from(|_: MouseEvent| request_local_fonts_access());
+            html! {
+                <div class="local-fonts-controls">
+                    <span
+                        ref={action_ref}
+                        class="local-fonts-request"
+                        id="request-local-fonts"
+                        onclick={on_request}
+                    />
+                </div>
+            }
+        },
+        Some(LocalFontsAccess::Denied) => html! {
+            <div class="local-fonts-controls">
+                <span
+                    ref={action_ref}
+                    class="local-fonts-request blocked"
+                    id="request-local-fonts"
+                />
+            </div>
+        },
+        _ => html! {},
+    };
+
+    html! {
+        <>
+            <div class="row">
+                { local_fonts }
+                <OptionalField
+                    label={props.field_key.clone()}
+                    on_check={on_reset_style}
+                    checked={family_checked || style_checked}
+                >
+                    <div class="font-group">
+                        <Select<String>
+                            wrapper_class="font-group-family"
+                            {values}
+                            {selected}
+                            {on_select}
+                        />
+                        { size_input }
+                        { toggle_button("bold", &bold) }
+                        { toggle_button("italic", &italic) }
+                    </div>
+                </OptionalField>
+            </div>
+        </>
+    }
+}

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

@@ -26,20 +26,17 @@ use wasm_bindgen::JsCast;
 use web_sys::{HtmlInputElement, MouseEvent};
 use yew::{Callback, Html, Properties, function_component, html, use_callback};
 
-use crate::components::containers::select::{Select, SelectItem};
-use crate::components::form::color_selector::ColorSelector;
-use crate::components::form::multi_stop_gradient_selector::MultiStopGradientSelector;
-use crate::components::form::named_value_picker::NamedValuePicker;
-use crate::components::form::number_field::NumberField;
-use crate::components::form::optional_field::OptionalField;
-use crate::components::form::palette_selector::PaletteSelector;
-use crate::config::{
-    ColumnConfigFieldUpdate, CssColor, CssGradient, CssKind, CssPalette, EnumVariant,
-    GradientStopSpec, NamedValue, canonicalize_css_color, discrete_pair, gradient_to_css,
-    palette_name_for,
+use crate::config::{ColumnConfigFieldUpdate, EnumVariant, discrete_pair};
+use crate::ui::{
+    ColorSelector, MultiStopGradientSelector, NamedValuePicker, NumberField, OptionalField,
+    PaletteSelector, Select, SelectItem,
+};
+use crate::utils::{
+    CssColor, CssGradient, CssKind, CssPalette, GradientStopSpec, NamedValue,
+    canonicalize_css_color, gradient_to_css, palette_name_for,
 };
 
-fn emit(on_change: &Callback<ColumnConfigFieldUpdate>, key: &str, value: Option<Value>) {
+pub(super) 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);
@@ -150,9 +147,10 @@ pub fn BoolField(props: &BoolFieldProps) -> Html {
                         checked={current}
                         {oninput}
                     />
-                    <label for={format!("{}-checkbox", props.field_key)} class="bool-field-desc">
-                        { if current { "Enabled" } else { "Disabled" } }
-                    </label>
+                    <label
+                        for={format!("{}-checkbox", props.field_key)}
+                        class={if current { "bool-field-desc enabled" } else { "bool-field-desc disabled" }}
+                    />
                 </div>
             </OptionalField>
         </div>
@@ -346,7 +344,7 @@ pub fn PaletteField(props: &PaletteFieldProps) -> Html {
                 on_change={on_change_palette}
                 {on_reset}
                 {is_modified}
-                title={Some(format!("{}-label", props.field_key))}
+                label={Some(props.field_key.clone())}
             />
         </div>
     }
@@ -459,7 +457,7 @@ pub fn GradientStopsField(props: &GradientStopsFieldProps) -> Html {
                 on_change={on_change_stops}
                 {on_reset}
                 {is_modified}
-                title={Some(format!("{}-label", props.field_key))}
+                label={Some(props.field_key.clone())}
             />
         </div>
     }
@@ -555,7 +553,7 @@ pub fn ColorField(props: &ColorFieldProps) -> Html {
                 {on_color}
                 {on_reset}
                 {is_modified}
-                title={Some(format!("{}-label", props.field_key))}
+                label={Some(props.field_key.clone())}
             />
         </div>
     }

package/src/rust/components/column_settings_sidebar/style_tab/symbol/symbol_selector.rs

@@ -13,7 +13,7 @@
 use itertools::Itertools;
 use yew::{Callback, Html, Properties, function_component, html};
 
-use crate::components::containers::select::{Select, SelectItem};
+use crate::ui::{Select, SelectItem};
 use crate::utils::PtrEqRc;
 
 #[derive(Properties, PartialEq)]