@perspective-dev/viewer 5.2.0 → 5.3.1

package/src/rust/components/column_settings_sidebar.rs

@@ -42,6 +42,7 @@ use crate::tasks::{
     delete_expr, delete_window, save_expr, save_window, update_expr, update_window,
 };
 use crate::utils::PtrEqRc;
+use crate::workspace::Workspace;
 
 #[derive(Clone, Derivative, Properties)]
 #[derivative(Debug)]
@@ -91,12 +92,13 @@ pub struct ColumnSettingsPanelProps {
 
     #[derivative(Debug = "ignore")]
     pub session: Session,
+
+    #[derivative(Debug = "ignore")]
+    pub workspace: Workspace,
 }
 
-impl ColumnSettingsPanelProps {
-    /// Everything EXCEPT the trap-door `auto_width`: the props whose change
-    /// invalidates the drafts that `initialize` rebuilds.
-    fn identity_eq(&self, other: &Self) -> bool {
+impl PartialEq for ColumnSettingsPanelProps {
+    fn eq(&self, other: &Self) -> bool {
         self.selected_column == other.selected_column
             && self.selected_tab == other.selected_tab
             && self.plugin_name == other.plugin_name
@@ -104,14 +106,46 @@ impl ColumnSettingsPanelProps {
             && self.view_config == other.view_config
             && self.column_stats == other.column_stats
             && self.selected_theme == other.selected_theme
+            && self.auto_width == other.auto_width
+            && self.is_pinned == other.is_pinned
     }
 }
 
-impl PartialEq for ColumnSettingsPanelProps {
-    fn eq(&self, other: &Self) -> bool {
-        self.identity_eq(other)
-            && self.auto_width == other.auto_width
-            && self.is_pinned == other.is_pinned
+#[derive(Clone, PartialEq)]
+struct Initials {
+    column_name: String,
+    expr: Rc<String>,
+    header: Option<String>,
+    window: Option<WindowSpec>,
+}
+
+impl Initials {
+    fn of(props: &ColumnSettingsPanelProps) -> Self {
+        let column_name = props
+            .metadata
+            .locator_name_or_default(&props.selected_column);
+
+        let expr = props
+            .metadata
+            .get_expression_by_alias(&column_name)
+            .or_else(|| props.view_config.expressions.get(&column_name).cloned())
+            .unwrap_or_default();
+
+        let expr = Rc::new(expr);
+        let header = (*expr != column_name).then_some(column_name.clone());
+
+        let window = props
+            .selected_column
+            .name()
+            .and_then(|name| props.view_config.windows.get(name))
+            .cloned();
+
+        Self {
+            column_name,
+            expr,
+            header,
+            window,
+        }
     }
 }
 
@@ -172,22 +206,23 @@ impl Component for ColumnSettingsPanel {
             initial_window_value: None,
             window_value: None,
             tabs: vec![],
-            on_input: Callback::default(),
-            on_save: Callback::default(),
-            on_validate: Callback::default(),
+            on_input: ctx.link().callback(ColumnSettingsPanelMsg::SetExprValue),
+            on_save: ctx
+                .link()
+                .callback(ColumnSettingsPanelMsg::OnSaveAttributes),
+            on_validate: ctx.link().callback(ColumnSettingsPanelMsg::SetExprValid),
         };
 
-        this.initialize(ctx);
+        this.reset_to(ctx, Initials::of(ctx.props()));
         this
     }
 
     fn changed(&mut self, ctx: &yew::prelude::Context<Self>, old_props: &Self::Properties) -> bool {
-        // Only reached when props are unequal. Re-`initialize` (which wipes
-        // in-progress expression/window drafts) only on IDENTITY changes -
-        // a trap-door `auto_width` change re-renders the `Sidebar` sizer
-        // alone.
-        if !ctx.props().identity_eq(old_props) {
-            self.initialize(ctx);
+        let next = Initials::of(ctx.props());
+        if ctx.props().selected_column != old_props.selected_column || next != self.initials() {
+            self.reset_to(ctx, next);
+        } else {
+            self.refresh_derived(ctx);
         }
 
         true
@@ -353,9 +388,9 @@ impl Component for ColumnSettingsPanel {
         };
 
         let header_props = props!(EditableHeaderProps {
+            value: self.header_value.clone(),
             initial_value: self.initial_header_value.clone(),
             placeholder: header_placeholder,
-            reset_count: self.reset_count,
             editable: (ctx.props().selected_column.is_expr()
                 && matches!(
                     ctx.props().selected_tab,
@@ -374,7 +409,6 @@ impl Component for ColumnSettingsPanel {
                 ]
             }),
             metadata: ctx.props().metadata.clone(),
-            session: &ctx.props().session
         });
 
         let expr_editor = props!(ExpressionEditorProps {
@@ -382,6 +416,7 @@ impl Component for ColumnSettingsPanel {
             on_save: self.on_save.clone(),
             on_validate: self.on_validate.clone(),
             alias: ctx.props().selected_column.name().cloned(),
+            initial_expr: self.initial_expr_value.clone(),
             disabled: !ctx.props().selected_column.is_expr(),
             reset_count: self.reset_count,
             metadata: ctx.props().metadata.clone(),
@@ -457,6 +492,7 @@ impl Component for ColumnSettingsPanel {
             presentation: ctx.props().presentation.clone(),
             renderer: ctx.props().renderer.clone(),
             session: ctx.props().session.clone(),
+            workspace: ctx.props().workspace.clone(),
         };
 
         let tab_children = self.tabs.iter().map(|tab| match tab {
@@ -506,38 +542,22 @@ impl ColumnSettingsPanel {
         self.save_enabled = changed && valid;
     }
 
-    fn initialize(&mut self, ctx: &yew::prelude::Context<Self>) {
-        let column_name = ctx
-            .props()
-            .metadata
-            .locator_name_or_default(&ctx.props().selected_column);
-
-        let initial_expr_value = ctx
-            .props()
-            .metadata
-            .get_expression_by_alias(&column_name)
-            .unwrap_or_default();
-
-        let initial_expr_value = Rc::new(initial_expr_value);
-        let initial_header_value =
-            (*initial_expr_value != column_name).then_some(column_name.clone());
+    fn initials(&self) -> Initials {
+        Initials {
+            column_name: self.column_name.clone(),
+            expr: self.initial_expr_value.clone(),
+            header: self.initial_header_value.clone(),
+            window: self.initial_window_value.clone(),
+        }
+    }
 
-        let maybe_ty = ctx
+    fn refresh_derived(&mut self, ctx: &yew::prelude::Context<Self>) {
+        self.maybe_ty = ctx
             .props()
             .metadata
             .locator_view_type(&ctx.props().selected_column);
 
-        // Specs are unnamed (the `windows` map key names them, and the
-        // editable header owns naming in the UI), so drafts and saved specs
-        // compare directly.
-        let initial_window_value = ctx
-            .props()
-            .selected_column
-            .name()
-            .and_then(|name| ctx.props().view_config.windows.get(name))
-            .cloned();
-
-        let tabs = {
+        self.tabs = {
             let mut tabs = vec![];
             let is_new_expr = ctx.props().selected_column.is_new_expr();
             let show_styles = !is_new_expr
@@ -571,28 +591,27 @@ impl ColumnSettingsPanel {
 
             tabs
         };
+    }
 
-        let on_input = ctx.link().callback(ColumnSettingsPanelMsg::SetExprValue);
-        let on_save = ctx
-            .link()
-            .callback(ColumnSettingsPanelMsg::OnSaveAttributes);
-
-        let on_validate = ctx.link().callback(ColumnSettingsPanelMsg::SetExprValid);
-        *self = Self {
+    fn reset_to(&mut self, ctx: &yew::prelude::Context<Self>, initials: Initials) {
+        let Initials {
             column_name,
-            expr_value: initial_expr_value.clone(),
-            initial_expr_value,
-            header_value: initial_header_value.clone(),
-            initial_header_value,
-            maybe_ty,
-            window_value: initial_window_value.clone(),
-            initial_window_value,
-            tabs,
-            header_valid: true,
-            on_input,
-            on_save,
-            on_validate,
-            ..*self
-        }
+            expr,
+            header,
+            window,
+        } = initials;
+
+        self.column_name = column_name;
+        self.expr_value = expr.clone();
+        self.initial_expr_value = expr;
+        self.header_value = header.clone();
+        self.initial_header_value = header;
+        self.window_value = window.clone();
+        self.initial_window_value = window;
+        self.header_valid = true;
+        self.save_enabled = false;
+        self.reset_enabled = false;
+        self.reset_count = self.reset_count.wrapping_add(1);
+        self.refresh_derived(ctx);
     }
 }

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>
             }
         }
     }

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

@@ -22,6 +22,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 +44,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 +79,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 +109,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}
                     />
                 }
             </>

package/src/rust/components/datetime_column_style.rs

@@ -38,6 +38,9 @@ pub struct DatetimeColumnStyleProps {
     pub enable_time_config: bool,
     pub config: Option<DatetimeColumnStyleConfig>,
 
+    /// The active plugin's declared default `date_format`.
+    pub default_format: Rc<DatetimeFormatType>,
+
     #[prop_or_default]
     pub on_change: Callback<ColumnConfigFieldUpdate>,
 
@@ -57,7 +60,9 @@ impl ModalLink<DatetimeColumnStyle> for DatetimeColumnStyleProps {
 
 impl PartialEq for DatetimeColumnStyleProps {
     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.default_format == other.default_format
     }
 }
 
@@ -90,7 +95,9 @@ impl Component for DatetimeColumnStyle {
             std::mem::swap(&mut self.config, &mut new_config);
             rerender = true;
         }
-        if old.enable_time_config != ctx.props().enable_time_config {
+        if old.enable_time_config != ctx.props().enable_time_config
+            || old.default_format != ctx.props().default_format
+        {
             rerender = true;
         }
         rerender
@@ -99,22 +106,24 @@ impl Component for DatetimeColumnStyle {
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             DatetimeColumnStyleMsg::TimezoneChanged(val) => {
+                let mut format = self.effective_format(ctx);
                 if Some(&*USER_TIMEZONE) != val.as_ref() {
-                    *self.config.date_format.time_zone_mut() = val;
+                    *format.time_zone_mut() = val;
                 } else {
-                    *self.config.date_format.time_zone_mut() = None;
+                    *format.time_zone_mut() = None;
                 }
 
+                self.set_format(ctx, format);
                 self.dispatch_config(ctx);
                 true
             },
             DatetimeColumnStyleMsg::SimpleDatetimeStyleConfigChanged(simple) => {
-                self.config.date_format = DatetimeFormatType::Simple(simple);
+                self.set_format(ctx, DatetimeFormatType::Simple(simple));
                 self.dispatch_config(ctx);
                 true
             },
             DatetimeColumnStyleMsg::CustomDatetimeStyleConfigChanged(custom) => {
-                self.config.date_format = DatetimeFormatType::Custom(custom);
+                self.set_format(ctx, DatetimeFormatType::Custom(custom));
                 self.dispatch_config(ctx);
                 true
             },
@@ -122,6 +131,24 @@ impl Component for DatetimeColumnStyle {
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
+        let format = self.effective_format(ctx);
+        let (date_style_default, time_style_default) = match &*ctx.props().default_format {
+            DatetimeFormatType::Simple(simple) => (simple.date_style, simple.time_style),
+            DatetimeFormatType::Custom(_) => {
+                (SimpleDatetimeFormat::Short, SimpleDatetimeFormat::Medium)
+            },
+        };
+
+        let simple_reset = {
+            let default_format = ctx.props().default_format.clone();
+            ctx.link().callback(move |_| {
+                DatetimeColumnStyleMsg::SimpleDatetimeStyleConfigChanged(match &*default_format {
+                    DatetimeFormatType::Simple(simple) => simple.clone(),
+                    DatetimeFormatType::Custom(_) => SimpleDatetimeStyleConfig::default(),
+                })
+            })
+        };
+
         html! {
             <>
                 <div id="column-style-container" class="datetime-column-style-container">
@@ -131,10 +158,10 @@ impl Component for DatetimeColumnStyle {
                             values={ALL_TIMEZONES.with(|x| (*x).clone())}
                             default_value={(*USER_TIMEZONE).clone()}
                             on_change={ctx.link().callback(DatetimeColumnStyleMsg::TimezoneChanged)}
-                            current_value={self.config.date_format.time_zone().as_ref().unwrap_or(&*USER_TIMEZONE).clone()}
+                            current_value={format.time_zone().as_ref().unwrap_or(&*USER_TIMEZONE).clone()}
                         />
                     }
-                    if let DatetimeFormatType::Simple(config) = &self.config.date_format {
+                    if let DatetimeFormatType::Simple(config) = &format {
                         if ctx.props().enable_time_config {
                             <div class="row">
                                 <button
@@ -149,15 +176,17 @@ impl Component for DatetimeColumnStyle {
                             enable_time_config={ctx.props().enable_time_config}
                             on_change={ctx.link().callback(DatetimeColumnStyleMsg::SimpleDatetimeStyleConfigChanged)}
                             config={config.clone()}
+                            {date_style_default}
+                            {time_style_default}
                         />
-                    } else if let DatetimeFormatType::Custom(config) = &self.config.date_format {
+                    } else if let DatetimeFormatType::Custom(config) = &format {
                         if ctx.props().enable_time_config {
                             <div class="row">
                                 <button
                                     id="datetime_format"
                                     data-title="Custom"
                                     data-title-hover="Switch to Simple"
-                                    onclick={ctx.link().callback(|_| DatetimeColumnStyleMsg::SimpleDatetimeStyleConfigChanged(SimpleDatetimeStyleConfig::default()))}
+                                    onclick={simple_reset}
                                 />
                             </div>
                         }
@@ -201,6 +230,17 @@ static USER_TIMEZONE: LazyLock<String> = LazyLock::new(|| {
 });
 
 impl DatetimeColumnStyle {
+    fn effective_format(&self, ctx: &Context<Self>) -> DatetimeFormatType {
+        self.config
+            .date_format
+            .clone()
+            .unwrap_or_else(|| (*ctx.props().default_format).clone())
+    }
+
+    fn set_format(&mut self, ctx: &Context<Self>, format: DatetimeFormatType) {
+        self.config.date_format = (format != *ctx.props().default_format).then_some(format);
+    }
+
     /// When this config has changed, we must signal the wrapper element.
     fn dispatch_config(&self, ctx: &Context<Self>) {
         let value = if self.config == DatetimeColumnStyleConfig::default() {