@perspective-dev/viewer 4.4.0 → 4.5.0

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

@@ -25,7 +25,7 @@ use yew::{Callback, Html, Properties, html};
 use crate::components::column_settings_sidebar::style_tab::symbol::symbol_pairs::PairsList;
 use crate::components::filter_dropdown::{FilterDropDownElement, FilterDropDownPortal};
 use crate::components::style::LocalStyle;
-use crate::config::{ColumnConfigValueUpdate, KeyValueOpts, SymbolKVPair};
+use crate::config::{ColumnConfigFieldUpdate, KeyValueOpts, SymbolKVPair};
 use crate::css;
 use crate::session::Session;
 
@@ -34,10 +34,12 @@ pub struct SymbolAttrProps {
     pub session: Session,
     pub column_name: String,
     pub restored_config: Option<HashMap<String, String>>,
-    pub on_change: Callback<ColumnConfigValueUpdate>,
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
     pub default_config: KeyValueOpts,
     /// Selected theme name, threaded for PortalModal consumers.
     pub selected_theme: Option<String>,
+    #[prop_or_default]
+    pub keys: Vec<String>,
 }
 impl SymbolAttrProps {
     pub fn next_default_symbol(&self, pairs_len: usize) -> String {
@@ -92,10 +94,17 @@ impl yew::Component for SymbolStyle {
                     .into_iter()
                     .filter_map(|pair| Some((pair.key?, pair.value)))
                     .collect::<HashMap<_, _>>();
-                let update = Some(symbols).filter(|x| !x.is_empty());
-                ctx.props()
-                    .on_change
-                    .emit(ColumnConfigValueUpdate::Symbols(update));
+                let mut value = serde_json::Map::new();
+                if !symbols.is_empty() {
+                    value.insert(
+                        "symbols".to_owned(),
+                        serde_json::to_value(&symbols).unwrap_or(serde_json::Value::Null),
+                    );
+                }
+                ctx.props().on_change.emit(ColumnConfigFieldUpdate {
+                    keys: ctx.props().keys.clone(),
+                    value,
+                });
 
                 let has_last_key = new_pairs
                     .last()

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

@@ -11,28 +11,33 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 mod agg_depth_selector;
-mod stub;
+pub(crate) mod primitive_field;
 mod symbol;
 
+use std::collections::HashMap;
+
 use itertools::Itertools;
 use perspective_client::config::ColumnType;
 use yew::{Html, Properties, function_component, html};
 
 use self::agg_depth_selector::*;
-use crate::components::column_settings_sidebar::style_tab::stub::Stub;
+use self::primitive_field::{
+    BoolField, ColorField, ColorRangeField, EnumField, NumberFieldPrimitive,
+};
 use crate::components::column_settings_sidebar::style_tab::symbol::SymbolStyle;
 use crate::components::datetime_column_style::DatetimeColumnStyle;
-use crate::components::number_column_style::NumberColumnStyle;
+use crate::components::number_series_style::NumberSeriesStyle;
 use crate::components::string_column_style::StringColumnStyle;
 use crate::components::style_controls::CustomNumberFormat;
-use crate::custom_events::CustomEvents;
+use crate::config::{
+    ControlSpec, CustomNumberFormatConfig, DatetimeColumnStyleConfig, NumberSeriesStyleConfig,
+    StringColumnStyleConfig,
+};
 use crate::presentation::Presentation;
+use crate::queries::{fetch_column_abs_max, get_column_config_schema};
 use crate::renderer::Renderer;
 use crate::session::Session;
-use crate::tasks::{
-    HasCustomEvents, HasPresentation, HasRenderer, HasSession, SendPluginConfig,
-    get_column_style_control_options,
-};
+use crate::tasks::send_column_config;
 use crate::utils::PtrEqRc;
 
 #[derive(Clone, PartialEq, Properties)]
@@ -47,161 +52,287 @@ pub struct StyleTabProps {
     /// Session metadata snapshot — threaded from parent.
     pub metadata: PtrEqRc<crate::session::SessionMetadata>,
 
+    /// Per-column stats snapshot — threaded from `SessionProps`.
+    pub column_stats: PtrEqRc<HashMap<String, crate::session::ColumnStats>>,
+
     /// Selected theme name, threaded for PortalModal consumers.
     pub selected_theme: Option<String>,
 
     // State
-    pub custom_events: CustomEvents,
     pub presentation: Presentation,
     pub renderer: Renderer,
     pub session: Session,
 }
 
-impl HasCustomEvents for StyleTabProps {
-    fn custom_events(&self) -> &CustomEvents {
-        &self.custom_events
-    }
-}
+#[function_component]
+pub fn StyleTab(props: &StyleTabProps) -> Html {
+    // Bumped on every primitive field change so Yew re-renders the tab
+    // and re-queries `column_config_schema` with the new value. Without
+    // this, dynamic field gating (e.g. show `Color` only when
+    // `string_color_mode != none`) wouldn't surface until the user
+    // closed and reopened the sidebar.
+    let revision = yew::use_state(|| 0u32);
 
-impl HasPresentation for StyleTabProps {
-    fn presentation(&self) -> &Presentation {
-        &self.presentation
-    }
-}
+    // `abs_max` lives in `Session`'s shared cache, propagated as a
+    // value-semantic snapshot through `props.column_stats`. The cache
+    // is cleared on `view_config_changed`; on cache miss we spawn the
+    // fetch and let `column_stats_changed` drive the re-render via
+    // `SessionProps`.
+    let abs_max = props
+        .column_stats
+        .get(&props.column_name)
+        .and_then(|s| s.abs_max);
 
-impl HasRenderer for StyleTabProps {
-    fn renderer(&self) -> &Renderer {
-        &self.renderer
-    }
-}
+    yew::use_effect_with((props.column_name.clone(), props.view_config.clone()), {
+        let session = props.session.clone();
+        let column_name = props.column_name.clone();
+        move |_| {
+            fetch_column_abs_max(&session, column_name);
+            || ()
+        }
+    });
+
+    let raw_config = props.renderer.get_columns_config(&props.column_name);
+    let on_change = {
+        let state = props.clone();
+        let column_name = props.column_name.clone();
+        let revision = revision.clone();
+        yew::Callback::from(move |config: crate::config::ColumnConfigFieldUpdate| {
+            send_column_config(&state.session, &state.renderer, &column_name, config);
+            revision.set(*revision + 1);
+        })
+    };
 
-impl HasSession for StyleTabProps {
-    fn session(&self) -> &Session {
-        &self.session
+    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())
     }
-}
 
-#[function_component]
-pub fn StyleTab(props: &StyleTabProps) -> Html {
-    let config = props.presentation.get_columns_config(&props.column_name);
-    let on_change = yew::use_callback(
-        (props.clone(), props.column_name.clone()),
-        |config, (state, column_name)| {
-            state.send_plugin_config(column_name, config);
-        },
-    );
-
-    let components = get_column_style_control_options(
+    let components = get_column_config_schema(
         &props.renderer,
         &props.view_config,
         &props.metadata,
         &props.column_name,
+        raw_config.as_ref(),
+        abs_max,
     )
-    .map(|opts| {
-        let mut components = vec![];
-        if !props.view_config.group_by.is_empty() {
-            let aggregate_depth = config.as_ref().map(|x| x.aggregate_depth as f64);
-            components.push(("Aggregate Depth", html! {
-                <AggregateDepthSelector
-                    group_by_depth={props.group_by_depth}
-                    on_change={on_change.clone()}
-                    column_name={props.column_name.to_owned()}
-                    value={aggregate_depth.unwrap_or_default() as u32}
-                />
-            }));
-        }
-
-        if let Some(default_config) = opts.datagrid_number_style {
-            let config = config
-                .as_ref()
-                .map(|config| config.datagrid_number_style.clone());
-
-            components.push(("Number Styles", html! {
-                <NumberColumnStyle
-                    column_name={props.column_name.clone()}
-                    {config}
-                    {default_config}
-                    on_change={on_change.clone()}
-                    session={props.session.clone()}
-                />
-            }));
-        }
-        if let Some(default_config) = opts.datagrid_string_style {
-            let config = config
-                .as_ref()
-                .map(|config| config.datagrid_string_style.clone());
-
-            components.push(("String Styles", html! {
-                <StringColumnStyle {config} {default_config} on_change={on_change.clone()} />
-            }));
-        }
+    .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();
 
-        if let Some(default_config) = opts.datagrid_datetime_style {
-            let config = config
-                .as_ref()
-                .map(|config| config.datagrid_datetime_style.clone());
-
-            let enable_time_config = props.ty.unwrap() == ColumnType::Datetime;
-            components.push(("Datetime Styles", html! {
-                <DatetimeColumnStyle
-                    {enable_time_config}
-                    {config}
-                    {default_config}
-                    on_change={on_change.clone()}
-                />
-            }))
-        }
+                        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();
 
-        if let Some(default_config) = opts.symbols {
-            let restored_config = config
-                .as_ref()
-                .map(|config| config.symbols.clone())
-                .unwrap_or_default();
-
-            components.push(("Symbols", html! {
-                <SymbolStyle
-                    {default_config}
-                    {restored_config}
-                    on_change={on_change.clone()}
-                    column_name={props.column_name.clone()}
-                    selected_theme={props.selected_theme.clone()}
-                    session={props.session.clone()}
-                />
-            }))
-        }
+                        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()));
 
-        if opts.number_string_format.unwrap_or_default() {
-            let restored_config = config
-                .as_ref()
-                .and_then(|config| config.number_format.clone())
-                .unwrap_or_default();
-
-            components.push(("Number Formatting", html! {
-                <CustomNumberFormat
-                    {restored_config}
-                    on_change={on_change.clone()}
-                    view_type={props.ty.unwrap()}
-                    column_name={props.column_name.clone()}
-                />
-            }));
-        }
+                        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}
+                                on_change={on_change.clone()}
+                            />
+                        }
+                    },
+                    ControlSpec::ColorRange {
+                        key_pos,
+                        key_neg,
+                        default_pos,
+                        default_neg,
+                        is_gradient,
+                    } => {
+                        let current_pos = raw_config
+                            .as_ref()
+                            .and_then(|m| m.get(&key_pos))
+                            .and_then(|v| v.as_str().map(|s| s.to_string()));
+                        let current_neg = raw_config
+                            .as_ref()
+                            .and_then(|m| m.get(&key_neg))
+                            .and_then(|v| v.as_str().map(|s| s.to_string()));
+                        html! {
+                            <ColorRangeField
+                                field_key_pos={key_pos}
+                                field_key_neg={key_neg}
+                                {default_pos}
+                                {default_neg}
+                                {current_pos}
+                                {current_neg}
+                                {is_gradient}
+                                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()}
+                            />
+                        }
+                    },
+                    // String primitive has no caller yet — wire when a
+                    // plugin emits one.
+                    ControlSpec::String { .. } => {
+                        return None;
+                    },
+                };
 
-        components
-            .into_iter()
-            .map(|(_title, component)| {
-                html! {
-                    <fieldset class="style-control">
-                        // <legend >{ title }</legend>
-                        { component }
-                    </fieldset>
-                }
+                Some(html! { <fieldset class="style-control">{ component }</fieldset> })
             })
             .collect_vec()
     })
     .unwrap_or_else(|error| {
-        vec![html! {
-            <Stub message="Could not render column styles" error={Some(format!("{error:?}"))} />
-        }]
+        tracing::error!("{}", error);
+        vec![]
     });
 
     html! {