@perspective-dev/viewer 5.3.0 → 5.4.0

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

@@ -14,12 +14,12 @@ mod agg_depth_selector;
 pub(crate) mod primitive_field;
 mod symbol;
 
-use std::collections::HashMap;
+use std::collections::{BTreeMap, HashMap};
 use std::rc::Rc;
 
 use itertools::Itertools;
 use perspective_client::config::ColumnType;
-use yew::{Html, Properties, function_component, html};
+use yew::{Callback, Html, Properties, function_component, html};
 
 use self::agg_depth_selector::*;
 use self::primitive_field::{
@@ -31,15 +31,16 @@ use crate::components::number_series_style::NumberSeriesStyle;
 use crate::components::string_column_style::StringColumnStyle;
 use crate::components::style_controls::CustomNumberFormat;
 use crate::config::{
-    ControlSpec, CssKind, CustomNumberFormatConfig, DatetimeColumnStyleConfig,
-    NumberSeriesStyleConfig, StringColumnStyleConfig,
+    ColumnConfigFieldUpdate, ControlSpec, CustomNumberFormatConfig, DatetimeColumnStyleConfig,
+    NumberFormatDefaults, NumberSeriesStyleConfig, StringColumnStyleConfig,
 };
 use crate::presentation::Presentation;
 use crate::queries::{fetch_column_abs_max, get_column_config_schema, named_values};
 use crate::renderer::Renderer;
 use crate::session::Session;
 use crate::tasks::send_column_config;
-use crate::utils::PtrEqRc;
+use crate::ui::ControlGroup;
+use crate::utils::{CssKind, NamedValue, PtrEqRc};
 use crate::workspace::Workspace;
 
 #[derive(Clone, PartialEq, Properties)]
@@ -133,241 +134,27 @@ pub fn StyleTab(props: &StyleTabProps) -> Html {
         })
     };
 
-    fn deser_sub<T: serde::de::DeserializeOwned>(
-        raw: &Option<serde_json::Map<String, serde_json::Value>>,
-    ) -> Option<T> {
-        raw.as_ref()
-            .and_then(|m| serde_json::from_value::<T>(serde_json::Value::Object(m.clone())).ok())
-    }
+    let on_group_toggle = {
+        let presentation = props.presentation.clone();
+        yew::Callback::from(move |(key, open): (String, bool)| {
+            presentation.set_control_group_collapsed(&key, !open);
+        })
+    };
+
+    let ctx = FieldRenderCtx {
+        props,
+        raw_config: &raw_config,
+        on_change: &on_change,
+        on_group_toggle: &on_group_toggle,
+        on_pin: &on_pin,
+        named_colors: &named_colors,
+        named_palettes: &named_palettes,
+        named_gradients: &named_gradients,
+        restored: &restored,
+    };
 
     let components = schema
-        .map(|schema| {
-            schema
-                .fields
-                .into_iter()
-                .filter_map(|spec| {
-                    let keys: Vec<String> = spec
-                        .serialized_keys()
-                        .into_iter()
-                        .map(|s| s.to_string())
-                        .collect();
-                    let component = match spec {
-                        ControlSpec::AggregateDepth => {
-                            let aggregate_depth = raw_config
-                                .as_ref()
-                                .and_then(|m| m.get("aggregate_depth"))
-                                .and_then(|v| v.as_u64())
-                                .unwrap_or(0)
-                                as u32;
-                            html! {
-                                <AggregateDepthSelector
-                                    group_by_depth={props.group_by_depth}
-                                    on_change={on_change.clone()}
-                                    column_name={props.column_name.to_owned()}
-                                    value={aggregate_depth}
-                                    keys={keys.clone()}
-                                />
-                            }
-                        },
-                        ControlSpec::NumberSeriesStyle {
-                            default: default_config,
-                        } => {
-                            let config: Option<NumberSeriesStyleConfig> = deser_sub(&raw_config);
-                            html! {
-                                <NumberSeriesStyle
-                                    {config}
-                                    {default_config}
-                                    on_change={on_change.clone()}
-                                    keys={keys.clone()}
-                                />
-                            }
-                        },
-                        ControlSpec::DatetimeFormat => {
-                            let config: Option<DatetimeColumnStyleConfig> = deser_sub(&raw_config);
-                            let enable_time_config = props.ty.unwrap() == ColumnType::Datetime;
-                            html! {
-                                <DatetimeColumnStyle
-                                    {enable_time_config}
-                                    {config}
-                                    on_change={on_change.clone()}
-                                    keys={keys.clone()}
-                                />
-                            }
-                        },
-                        ControlSpec::StringFormat => {
-                            let config: Option<StringColumnStyleConfig> = deser_sub(&raw_config);
-                            html! {
-                                <StringColumnStyle
-                                    {config}
-                                    on_change={on_change.clone()}
-                                    keys={keys.clone()}
-                                />
-                            }
-                        },
-                        ControlSpec::Symbols {
-                            default: default_config,
-                        } => {
-                            let restored_config: HashMap<String, String> = raw_config
-                                .as_ref()
-                                .and_then(|m| m.get("symbols"))
-                                .and_then(|v| serde_json::from_value(v.clone()).ok())
-                                .unwrap_or_default();
-
-                            html! {
-                                <SymbolStyle
-                                    {default_config}
-                                    restored_config={Some(restored_config)}
-                                    on_change={on_change.clone()}
-                                    column_name={props.column_name.clone()}
-                                    selected_theme={props.selected_theme.clone()}
-                                    session={props.session.clone()}
-                                    keys={keys.clone()}
-                                />
-                            }
-                        },
-                        ControlSpec::NumberFormat => {
-                            let restored_config: CustomNumberFormatConfig = raw_config
-                                .as_ref()
-                                .and_then(|m| m.get("number_format"))
-                                .and_then(|v| serde_json::from_value(v.clone()).ok())
-                                .unwrap_or_default();
-
-                            html! {
-                                <CustomNumberFormat
-                                    {restored_config}
-                                    on_change={on_change.clone()}
-                                    view_type={props.ty.unwrap()}
-                                    column_name={props.column_name.clone()}
-                                    keys={keys.clone()}
-                                />
-                            }
-                        },
-                        ControlSpec::Enum {
-                            key,
-                            variants,
-                            default,
-                        } => {
-                            let current = raw_config
-                                .as_ref()
-                                .and_then(|m| m.get(&key))
-                                .and_then(|v| v.as_str().map(|s| s.to_string()));
-
-                            html! {
-                                <EnumField
-                                    field_key={key}
-                                    {variants}
-                                    {default}
-                                    {current}
-                                    on_change={on_change.clone()}
-                                />
-                            }
-                        },
-                        ControlSpec::Bool { key, default } => {
-                            let current = raw_config
-                                .as_ref()
-                                .and_then(|m| m.get(&key))
-                                .and_then(|v| v.as_bool());
-                            html! {
-                                <BoolField
-                                    field_key={key}
-                                    {default}
-                                    {current}
-                                    on_change={on_change.clone()}
-                                />
-                            }
-                        },
-                        ControlSpec::Color { key, default } => {
-                            let current = raw_config
-                                .as_ref()
-                                .and_then(|m| m.get(&key))
-                                .and_then(|v| v.as_str().map(|s| s.to_string()));
-                            html! {
-                                <ColorField
-                                    field_key={key}
-                                    {default}
-                                    {current}
-                                    named={named_colors.clone()}
-                                    restored={restored.clone()}
-                                    on_pin={on_pin.clone()}
-                                    on_change={on_change.clone()}
-                                />
-                            }
-                        },
-                        ControlSpec::Palette { key, default, max } => {
-                            let current = raw_config
-                                .as_ref()
-                                .and_then(|m| m.get(&key))
-                                .and_then(|v| v.as_str().map(|s| s.to_string()));
-                            html! {
-                                <PaletteField
-                                    field_key={key}
-                                    {default}
-                                    {max}
-                                    {current}
-                                    named={named_palettes.clone()}
-                                    restored={restored.clone()}
-                                    on_pin={on_pin.clone()}
-                                    on_change={on_change.clone()}
-                                />
-                            }
-                        },
-                        ControlSpec::GradientStops {
-                            key,
-                            default,
-                            discrete,
-                        } => {
-                            let current = raw_config
-                                .as_ref()
-                                .and_then(|m| m.get(&key))
-                                .and_then(|v| v.as_str().map(|s| s.to_string()));
-                            html! {
-                                <GradientStopsField
-                                    field_key={key}
-                                    {default}
-                                    {discrete}
-                                    {current}
-                                    named={named_gradients.clone()}
-                                    restored={restored.clone()}
-                                    on_pin={on_pin.clone()}
-                                    on_change={on_change.clone()}
-                                />
-                            }
-                        },
-                        ControlSpec::Number {
-                            key,
-                            default,
-                            min,
-                            max,
-                            step,
-                            include,
-                        } => {
-                            let current = raw_config
-                                .as_ref()
-                                .and_then(|m| m.get(&key))
-                                .and_then(|v| v.as_f64());
-                            html! {
-                                <NumberFieldPrimitive
-                                    field_key={key}
-                                    {default}
-                                    {current}
-                                    {min}
-                                    {max}
-                                    {step}
-                                    {include}
-                                    on_change={on_change.clone()}
-                                />
-                            }
-                        },
-                        ControlSpec::String { .. } => {
-                            return None;
-                        },
-                    };
-
-                    let key = format!("{}::{}", props.column_name, keys.join("+"));
-                    Some(html! { <fieldset class="style-control" {key}>{ component }</fieldset> })
-                })
-                .collect_vec()
-        })
+        .map(|schema| render_specs(schema.fields, &ctx))
         .unwrap_or_else(|error| {
             tracing::error!("{}", error);
             vec![]
@@ -379,3 +166,274 @@ pub fn StyleTab(props: &StyleTabProps) -> Html {
         </div>
     }
 }
+
+fn deser_sub<T: serde::de::DeserializeOwned>(
+    raw: &Option<serde_json::Map<String, serde_json::Value>>,
+) -> Option<T> {
+    raw.as_ref()
+        .and_then(|m| serde_json::from_value::<T>(serde_json::Value::Object(m.clone())).ok())
+}
+
+struct FieldRenderCtx<'a> {
+    props: &'a StyleTabProps,
+    raw_config: &'a Option<serde_json::Map<String, serde_json::Value>>,
+    on_change: &'a Callback<ColumnConfigFieldUpdate>,
+    on_group_toggle: &'a Callback<(String, bool)>,
+    on_pin: &'a Callback<(CssKind, String)>,
+    named_colors: &'a Rc<Vec<NamedValue>>,
+    named_palettes: &'a Rc<Vec<NamedValue>>,
+    named_gradients: &'a Rc<Vec<NamedValue>>,
+    restored: &'a Rc<BTreeMap<String, String>>,
+}
+
+fn render_specs(specs: Vec<ControlSpec>, ctx: &FieldRenderCtx) -> Vec<Html> {
+    specs
+        .into_iter()
+        .filter_map(|spec| match spec {
+            ControlSpec::Group { key, fields } => {
+                let children = render_specs(fields, ctx);
+                (!children.is_empty()).then(|| {
+                    let open = !ctx.props.presentation.is_control_group_collapsed(&key);
+
+                    html! {
+                        <ControlGroup
+                            key={format!("{}::group::{}", ctx.props.column_name, key)}
+                            group_key={key.clone()}
+                            {open}
+                            on_toggle={ctx.on_group_toggle.clone()}
+                        >
+                            { children }
+                        </ControlGroup>
+                    }
+                })
+            },
+            spec => {
+                let keys: Vec<String> = spec
+                    .serialized_keys()
+                    .into_iter()
+                    .map(|s| s.to_string())
+                    .collect();
+
+                let component = render_leaf(spec, &keys, ctx)?;
+                let key = format!("{}::{}", ctx.props.column_name, keys.join("+"));
+                Some(html! { <fieldset class="style-control" {key}>{ component }</fieldset> })
+            },
+        })
+        .collect_vec()
+}
+
+fn render_leaf(spec: ControlSpec, keys: &[String], ctx: &FieldRenderCtx) -> Option<Html> {
+    let props = ctx.props;
+    let raw_config = ctx.raw_config;
+    let on_change = ctx.on_change;
+    let component = match spec {
+        ControlSpec::AggregateDepth => {
+            let aggregate_depth = raw_config
+                .as_ref()
+                .and_then(|m| m.get("aggregate_depth"))
+                .and_then(|v| v.as_u64())
+                .unwrap_or(0) as u32;
+            html! {
+                <AggregateDepthSelector
+                    group_by_depth={props.group_by_depth}
+                    on_change={on_change.clone()}
+                    column_name={props.column_name.to_owned()}
+                    value={aggregate_depth}
+                    keys={keys.to_vec()}
+                />
+            }
+        },
+        ControlSpec::NumberSeriesStyle {
+            default: default_config,
+        } => {
+            let config: Option<NumberSeriesStyleConfig> = deser_sub(raw_config);
+            html! {
+                <NumberSeriesStyle
+                    {config}
+                    {default_config}
+                    on_change={on_change.clone()}
+                    keys={keys.to_vec()}
+                />
+            }
+        },
+        ControlSpec::DatetimeFormat { default } => {
+            let config: Option<DatetimeColumnStyleConfig> = deser_sub(raw_config);
+            let enable_time_config = props.ty.unwrap() == ColumnType::Datetime;
+            let default_format = Rc::new(default.unwrap_or_default());
+            html! {
+                <DatetimeColumnStyle
+                    {enable_time_config}
+                    {config}
+                    {default_format}
+                    on_change={on_change.clone()}
+                    keys={keys.to_vec()}
+                />
+            }
+        },
+        ControlSpec::StringFormat => {
+            let config: Option<StringColumnStyleConfig> = deser_sub(raw_config);
+            html! {
+                <StringColumnStyle {config} on_change={on_change.clone()} keys={keys.to_vec()} />
+            }
+        },
+        ControlSpec::Symbols {
+            default: default_config,
+        } => {
+            let restored_config: HashMap<String, String> = raw_config
+                .as_ref()
+                .and_then(|m| m.get("symbols"))
+                .and_then(|v| serde_json::from_value(v.clone()).ok())
+                .unwrap_or_default();
+
+            html! {
+                <SymbolStyle
+                    {default_config}
+                    restored_config={Some(restored_config)}
+                    on_change={on_change.clone()}
+                    column_name={props.column_name.clone()}
+                    selected_theme={props.selected_theme.clone()}
+                    session={props.session.clone()}
+                    keys={keys.to_vec()}
+                />
+            }
+        },
+        ControlSpec::NumberFormat { default } => {
+            let restored_config: CustomNumberFormatConfig = raw_config
+                .as_ref()
+                .and_then(|m| m.get("number_format"))
+                .and_then(|v| serde_json::from_value(v.clone()).ok())
+                .unwrap_or_default();
+
+            let view_type = props.ty.unwrap();
+            let defaults = Rc::new(NumberFormatDefaults::resolve(
+                default.as_ref(),
+                view_type == ColumnType::Float,
+            ));
+
+            html! {
+                <CustomNumberFormat
+                    {restored_config}
+                    {defaults}
+                    on_change={on_change.clone()}
+                    {view_type}
+                    column_name={props.column_name.clone()}
+                    keys={keys.to_vec()}
+                />
+            }
+        },
+        ControlSpec::Enum {
+            key,
+            variants,
+            default,
+        } => {
+            let current = raw_config
+                .as_ref()
+                .and_then(|m| m.get(&key))
+                .and_then(|v| v.as_str().map(|s| s.to_string()));
+
+            html! {
+                <EnumField
+                    field_key={key}
+                    {variants}
+                    {default}
+                    {current}
+                    on_change={on_change.clone()}
+                />
+            }
+        },
+        ControlSpec::Bool { key, default } => {
+            let current = raw_config
+                .as_ref()
+                .and_then(|m| m.get(&key))
+                .and_then(|v| v.as_bool());
+            html! { <BoolField field_key={key} {default} {current} on_change={on_change.clone()} /> }
+        },
+        ControlSpec::Color { key, default } => {
+            let current = raw_config
+                .as_ref()
+                .and_then(|m| m.get(&key))
+                .and_then(|v| v.as_str().map(|s| s.to_string()));
+            html! {
+                <ColorField
+                    field_key={key}
+                    {default}
+                    {current}
+                    named={ctx.named_colors.clone()}
+                    restored={ctx.restored.clone()}
+                    on_pin={ctx.on_pin.clone()}
+                    on_change={on_change.clone()}
+                />
+            }
+        },
+        ControlSpec::Palette { key, default, max } => {
+            let current = raw_config
+                .as_ref()
+                .and_then(|m| m.get(&key))
+                .and_then(|v| v.as_str().map(|s| s.to_string()));
+            html! {
+                <PaletteField
+                    field_key={key}
+                    {default}
+                    {max}
+                    {current}
+                    named={ctx.named_palettes.clone()}
+                    restored={ctx.restored.clone()}
+                    on_pin={ctx.on_pin.clone()}
+                    on_change={on_change.clone()}
+                />
+            }
+        },
+        ControlSpec::GradientStops {
+            key,
+            default,
+            discrete,
+        } => {
+            let current = raw_config
+                .as_ref()
+                .and_then(|m| m.get(&key))
+                .and_then(|v| v.as_str().map(|s| s.to_string()));
+            html! {
+                <GradientStopsField
+                    field_key={key}
+                    {default}
+                    {discrete}
+                    {current}
+                    named={ctx.named_gradients.clone()}
+                    restored={ctx.restored.clone()}
+                    on_pin={ctx.on_pin.clone()}
+                    on_change={on_change.clone()}
+                />
+            }
+        },
+        ControlSpec::Number {
+            key,
+            default,
+            min,
+            max,
+            step,
+            include,
+        } => {
+            let current = raw_config
+                .as_ref()
+                .and_then(|m| m.get(&key))
+                .and_then(|v| v.as_f64());
+            html! {
+                <NumberFieldPrimitive
+                    field_key={key}
+                    {default}
+                    {current}
+                    {min}
+                    {max}
+                    {step}
+                    {include}
+                    on_change={on_change.clone()}
+                />
+            }
+        },
+        ControlSpec::String { .. } | ControlSpec::Group { .. } => {
+            return None;
+        },
+    };
+
+    Some(component)
+}

package/src/rust/components/column_settings_sidebar.rs

@@ -29,9 +29,7 @@ use crate::components::column_settings_sidebar::attributes_tab::AttributesTab;
 use crate::components::column_settings_sidebar::save_settings::SaveSettingsProps;
 use crate::components::column_settings_sidebar::style_tab::StyleTab;
 use crate::components::column_settings_sidebar::window_tab::{WindowTab, WindowTabProps};
-use crate::components::containers::sidebar::Sidebar;
-use crate::components::containers::tab_list::TabList;
-use crate::components::editable_header::EditableHeaderProps;
+use crate::components::editable_header::{EditableHeader, EditableHeaderProps};
 use crate::components::expression_editor::ExpressionEditorProps;
 use crate::components::type_icon::TypeIconType;
 use crate::components::window_editor::WindowEditorProps;
@@ -41,6 +39,7 @@ use crate::session::{Session, SessionMetadataRc};
 use crate::tasks::{
     delete_expr, delete_window, save_expr, save_window, update_expr, update_window,
 };
+use crate::ui::{Sidebar, TabList};
 use crate::utils::PtrEqRc;
 use crate::workspace::Workspace;
 
@@ -519,7 +518,7 @@ impl Component for ColumnSettingsPanel {
                     is_pinned={ctx.props().is_pinned}
                     on_toggle_pin={Some(ctx.props().on_toggle_pin.clone())}
                     selected_tab={selected_tab_idx}
-                    {header_props}
+                    header={html! { <EditableHeader ..header_props /> }}
                 >
                     <TabList<ColumnSettingsTab>
                         tabs={self.tabs.clone()}

package/src/rust/components/copy_dropdown.rs

@@ -14,9 +14,9 @@ use std::rc::Rc;
 
 use yew::prelude::*;
 
-use super::containers::dropdown_menu::*;
 use crate::config::*;
 use crate::renderer::*;
+use crate::ui::{DropDownMenu, DropDownMenuItem};
 
 type CopyDropDownMenuItem = DropDownMenuItem<ExportFile>;
 

package/src/rust/components/datetime_column_style/custom.rs

@@ -14,10 +14,8 @@ use std::rc::Rc;
 
 use yew::prelude::*;
 
-use crate::components::form::number_field::NumberField;
-use crate::components::form::select_value_field::SelectValueField;
-use crate::components::modal::{ModalLink, SetModalLink};
 use crate::config::*;
+use crate::ui::{ModalLink, NumberField, SelectValueField, SetModalLink};
 use crate::utils::WeakScope;
 
 #[derive(Properties)]

package/src/rust/components/datetime_column_style/simple.rs

@@ -12,9 +12,8 @@
 
 use yew::prelude::*;
 
-use crate::components::form::select_enum_field::SelectEnumField;
-use crate::components::modal::{ModalLink, SetModalLink};
 use crate::config::*;
+use crate::ui::{ModalLink, SelectEnumField, SetModalLink};
 use crate::utils::WeakScope;
 
 #[derive(Properties)]
@@ -22,6 +21,13 @@ pub struct DatetimeStyleSimpleProps {
     pub enable_time_config: bool,
     pub config: SimpleDatetimeStyleConfig,
 
+    /// The plugin-declared default preset for each style select.
+    #[prop_or(SimpleDatetimeFormat::Short)]
+    pub date_style_default: SimpleDatetimeFormat,
+
+    #[prop_or(SimpleDatetimeFormat::Medium)]
+    pub time_style_default: SimpleDatetimeFormat,
+
     #[prop_or_default]
     pub on_change: Callback<SimpleDatetimeStyleConfig>,
 
@@ -37,7 +43,10 @@ impl ModalLink<DatetimeStyleSimple> for DatetimeStyleSimpleProps {
 
 impl PartialEq for DatetimeStyleSimpleProps {
     fn eq(&self, other: &Self) -> bool {
-        self.enable_time_config == other.enable_time_config && self.config == other.config
+        self.enable_time_config == other.enable_time_config
+            && self.config == other.config
+            && self.date_style_default == other.date_style_default
+            && self.time_style_default == other.time_style_default
     }
 }
 
@@ -69,12 +78,12 @@ impl Component for DatetimeStyleSimple {
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             DatetimeStyleSimpleMsg::DateStyleChanged(format) => {
-                self.config.date_style = format.unwrap_or_default();
+                self.config.date_style = format.unwrap_or(ctx.props().date_style_default);
                 self.dispatch_config(ctx);
                 true
             },
             DatetimeStyleSimpleMsg::TimeStyleChanged(format) => {
-                self.config.time_style = format.unwrap_or_default();
+                self.config.time_style = format.unwrap_or(ctx.props().time_style_default);
                 self.dispatch_config(ctx);
                 true
             },
@@ -99,13 +108,14 @@ impl Component for DatetimeStyleSimple {
                     label="date-style"
                     on_change={ctx.link().callback(DatetimeStyleSimpleMsg::DateStyleChanged)}
                     current_value={self.config.date_style}
+                    default_value={ctx.props().date_style_default}
                 />
                 if ctx.props().enable_time_config {
                     <SelectEnumField<SimpleDatetimeFormat>
                         label="time-style"
                         on_change={ctx.link().callback(DatetimeStyleSimpleMsg::TimeStyleChanged)}
                         current_value={self.config.time_style}
-                        default_value={SimpleDatetimeFormat::Medium}
+                        default_value={ctx.props().time_style_default}
                     />
                 }
             </>