@perspective-dev/viewer 5.3.0 → 5.3.1

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

@@ -14,25 +14,27 @@ 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::{
     BoolField, ColorField, EnumField, GradientStopsField, NumberFieldPrimitive, PaletteField,
 };
 use crate::components::column_settings_sidebar::style_tab::symbol::SymbolStyle;
+use crate::components::containers::control_group::ControlGroup;
 use crate::components::datetime_column_style::DatetimeColumnStyle;
 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, CssKind, CustomNumberFormatConfig,
+    DatetimeColumnStyleConfig, NamedValue, NumberFormatDefaults, NumberSeriesStyleConfig,
+    StringColumnStyleConfig,
 };
 use crate::presentation::Presentation;
 use crate::queries::{fetch_column_abs_max, get_column_config_schema, named_values};
@@ -133,241 +135,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 +167,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/containers/control_group.rs

@@ -0,0 +1,91 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 wasm_bindgen::JsCast;
+use web_sys::{Event, MouseEvent};
+use yew::{Callback, Html, Properties, function_component, html, use_callback, use_mut_ref};
+
+#[derive(Properties, PartialEq)]
+pub struct ControlGroupProps {
+    pub group_key: String,
+
+    pub open: bool,
+
+    pub on_toggle: Callback<(String, bool)>,
+
+    pub children: Html,
+}
+
+#[function_component]
+pub fn ControlGroup(props: &ControlGroupProps) -> Html {
+    let ontoggle = use_callback(
+        (props.group_key.clone(), props.on_toggle.clone()),
+        |event: Event, (group_key, on_toggle)| {
+            if let Some(el) = event
+                .target()
+                .and_then(|x| x.dyn_into::<web_sys::Element>().ok())
+            {
+                on_toggle.emit((group_key.clone(), el.has_attribute("open")));
+            }
+        },
+    );
+
+    let onclick = use_callback((), |event: MouseEvent, _| {
+        if !event.shift_key() {
+            return;
+        }
+
+        event.prevent_default();
+        let Some(details) = event
+            .target()
+            .and_then(|x| x.dyn_into::<web_sys::Element>().ok())
+            .and_then(|x| x.closest("details.control-group").ok().flatten())
+        else {
+            return;
+        };
+
+        let Some(scope) = details.closest(".tab-section").ok().flatten() else {
+            return;
+        };
+
+        let expand = !details.has_attribute("open");
+        let Ok(groups) = scope.query_selector_all("details.control-group") else {
+            return;
+        };
+
+        for i in 0..groups.length() {
+            let Some(el) = groups
+                .item(i)
+                .and_then(|x| x.dyn_into::<web_sys::Element>().ok())
+            else {
+                continue;
+            };
+
+            if expand {
+                let _ = el.set_attribute("open", "");
+            } else {
+                let _ = el.remove_attribute("open");
+            }
+        }
+    });
+
+    let open = *use_mut_ref(|| props.open).borrow();
+    html! {
+        <details class="control-group" {open} {ontoggle}>
+            <summary {onclick}>
+                <span class="control-group-chevron shift-alt-icon" />
+                <label id={format!("{}-group-label", props.group_key)} />
+            </summary>
+            { props.children.clone() }
+        </details>
+    }
+}

package/src/rust/components/containers/mod.rs

@@ -13,6 +13,7 @@
 //! `containers` are generic container-like components for collections of other
 //! `Component` types.
 
+pub mod control_group;
 pub mod dragdrop_list;
 pub mod dropdown_menu;
 pub mod scroll_panel;

package/src/rust/components/containers/select.rs

@@ -230,9 +230,15 @@ where
                 <label>
                     { ctx.props().label.as_ref().map(|x| x.to_string()).unwrap_or_default() }
                 </label>
-                <div class={wrapper_class} data-value={value}>{ select }</div>
+                <div class={wrapper_class} data-value={value}>
+                    { select }
+                    <span class="select-arrow" />
+                </div>
             } else {
-                <div class={wrapper_class} data-value={value}>{ select }</div>
+                <div class={wrapper_class} data-value={value}>
+                    { select }
+                    <span class="select-arrow" />
+                </div>
             }
         }
     }