@perspective-dev/viewer 4.4.1 → 4.5.0

package/src/rust/components/string_column_style.rs

@@ -11,9 +11,7 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 use yew::prelude::*;
-use yew::*;
 
-use super::form::color_selector::*;
 use super::modal::{ModalLink, SetModalLink};
 use super::style::LocalStyle;
 use crate::components::form::select_enum_field::SelectEnumField;
@@ -21,13 +19,18 @@ use crate::config::*;
 use crate::css;
 use crate::utils::WeakScope;
 
+/// Format-only widget for [`String`] columns. Renders the `format` enum
+/// only; color/color-mode UI is provided externally as primitive `Enum`
+/// + `Color` schema fields.
 #[derive(Properties)]
 pub struct StringColumnStyleProps {
     pub config: Option<StringColumnStyleConfig>,
-    pub default_config: StringColumnStyleDefaultConfig,
 
     #[prop_or_default]
-    pub on_change: Callback<ColumnConfigValueUpdate>,
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
+
+    #[prop_or_default]
+    pub keys: Vec<String>,
 
     #[prop_or_default]
     weak_link: WeakScope<StringColumnStyle>,
@@ -41,22 +44,16 @@ impl ModalLink<StringColumnStyle> for StringColumnStyleProps {
 
 impl PartialEq for StringColumnStyleProps {
     fn eq(&self, other: &Self) -> bool {
-        self.config == other.config && self.default_config == other.default_config
+        self.config == other.config
     }
 }
 
 pub enum StringColumnStyleMsg {
-    Reset(StringColumnStyleConfig),
     FormatChanged(Option<FormatMode>),
-    ColorModeChanged(Option<StringColorMode>),
-    ColorChanged(String),
-    ColorReset,
 }
 
-/// A component for the style form control for [`String`] columns.
 pub struct StringColumnStyle {
     config: StringColumnStyleConfig,
-    default_config: StringColumnStyleDefaultConfig,
 }
 
 impl Component for StringColumnStyle {
@@ -67,11 +64,9 @@ impl Component for StringColumnStyle {
         ctx.set_modal_link();
         Self {
             config: ctx.props().config.clone().unwrap_or_default(),
-            default_config: ctx.props().default_config.clone(),
         }
     }
 
-    // Always re-render when config changes.
     fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
         let mut new_config = ctx.props().config.clone().unwrap_or_default();
         if self.config != new_config {
@@ -84,51 +79,16 @@ impl Component for StringColumnStyle {
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            StringColumnStyleMsg::Reset(config) => {
-                self.config = config;
-                true
-            },
             StringColumnStyleMsg::FormatChanged(val) => {
                 self.config.format = val.unwrap_or_default();
                 self.dispatch_config(ctx);
                 true
             },
-            StringColumnStyleMsg::ColorModeChanged(mode) => {
-                self.config.string_color_mode = mode.unwrap_or_default();
-                self.dispatch_config(ctx);
-                true
-            },
-            StringColumnStyleMsg::ColorChanged(color) => {
-                self.config.color = Some(color);
-                self.dispatch_config(ctx);
-                true
-            },
-            StringColumnStyleMsg::ColorReset => {
-                self.config.color = Some(self.default_config.color.clone());
-                self.dispatch_config(ctx);
-                true
-            },
         }
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let format_mode_selected = self.config.format;
         let format_mode_changed = ctx.link().callback(StringColumnStyleMsg::FormatChanged);
-        let selected_color_mode = self.config.string_color_mode;
-        let color_mode_changed = ctx.link().callback(StringColumnStyleMsg::ColorModeChanged);
-        let color_controls = match selected_color_mode {
-            StringColorMode::Foreground => {
-                self.color_select_row(ctx, &StringColorMode::Foreground, "foreground-label")
-            },
-            StringColorMode::Background => {
-                self.color_select_row(ctx, &StringColorMode::Background, "background-label")
-            },
-            StringColorMode::Series => {
-                self.color_select_row(ctx, &StringColorMode::Series, "series-label")
-            },
-            StringColorMode::None => html! {},
-        };
-
         html! {
             <>
                 <LocalStyle href={css!("column-style")} />
@@ -136,14 +96,8 @@ impl Component for StringColumnStyle {
                     <SelectEnumField<FormatMode>
                         label="format"
                         on_change={format_mode_changed}
-                        current_value={format_mode_selected}
-                    />
-                    <SelectEnumField<StringColorMode>
-                        label="color"
-                        on_change={color_mode_changed}
-                        current_value={selected_color_mode}
+                        current_value={self.config.format}
                     />
-                    { color_controls }
                 </div>
             </>
         }
@@ -153,34 +107,18 @@ impl Component for StringColumnStyle {
 impl StringColumnStyle {
     /// When this config has changed, we must signal the wrapper element.
     fn dispatch_config(&self, ctx: &Context<Self>) {
-        let update = Some(self.config.clone()).filter(|x| x != &StringColumnStyleConfig::default());
-        ctx.props()
-            .on_change
-            .emit(ColumnConfigValueUpdate::DatagridStringStyle(update));
-    }
+        let value = if self.config == StringColumnStyleConfig::default() {
+            serde_json::Map::new()
+        } else {
+            match serde_json::to_value(&self.config) {
+                Ok(serde_json::Value::Object(m)) => m,
+                _ => serde_json::Map::new(),
+            }
+        };
 
-    /// Generate a color selector component for a specific `StringColorMode`
-    /// variant.
-    fn color_select_row(&self, ctx: &Context<Self>, mode: &StringColorMode, title: &str) -> Html {
-        let on_color = ctx.link().callback(StringColumnStyleMsg::ColorChanged);
-        let color = self
-            .config
-            .color
-            .clone()
-            .unwrap_or_else(|| self.default_config.color.to_owned());
-
-        let color_props = props!(ColorProps {
-            title: title.to_owned(),
-            on_color,
-            is_modified: color != self.default_config.color,
-            color,
-            on_reset: ctx.link().callback(|_| StringColumnStyleMsg::ColorReset)
+        ctx.props().on_change.emit(ColumnConfigFieldUpdate {
+            keys: ctx.props().keys.clone(),
+            value,
         });
-
-        if &self.config.string_color_mode == mode {
-            html! { <div class="row"><ColorSelector ..color_props /></div> }
-        } else {
-            html! {}
-        }
     }
 }

package/src/rust/components/style_controls/number_string_format.rs

@@ -26,9 +26,11 @@ use crate::css;
 #[derive(Properties, PartialEq, Clone)]
 pub struct CustomNumberFormatProps {
     pub restored_config: CustomNumberFormatConfig,
-    pub on_change: Callback<ColumnConfigValueUpdate>,
+    pub on_change: Callback<ColumnConfigFieldUpdate>,
     pub view_type: ColumnType,
     pub column_name: String,
+    #[prop_or_default]
+    pub keys: Vec<String>,
 }
 
 pub enum CustomNumberFormatMsg {
@@ -56,10 +58,6 @@ pub struct CustomNumberFormat {
     config: CustomNumberFormatConfig,
     style: NumberStyle,
     notation: Option<NotationName>,
-    // show_frac: bool,
-    // show_sig: bool,
-    // disable_rounding_increment: bool,
-    // disable_rounding_priority: bool,
 }
 
 impl Component for CustomNumberFormat {
@@ -197,11 +195,17 @@ impl Component for CustomNumberFormat {
 
         let is_float = ctx.props().view_type == ColumnType::Float;
         let filtered_config = self.config.clone().filter_default(is_float);
-        let value =
-            (filtered_config != CustomNumberFormatConfig::default()).then_some(filtered_config);
-
-        let update = ColumnConfigValueUpdate::CustomNumberStringFormat(value);
-        ctx.props().on_change.emit(update);
+        let mut value = serde_json::Map::new();
+        if filtered_config != CustomNumberFormatConfig::default() {
+            value.insert(
+                "number_format".to_owned(),
+                serde_json::to_value(&filtered_config).unwrap_or(serde_json::Value::Null),
+            );
+        }
+        ctx.props().on_change.emit(ColumnConfigFieldUpdate {
+            keys: ctx.props().keys.clone(),
+            value,
+        });
         true
     }
 
@@ -220,22 +224,6 @@ impl Component for CustomNumberFormat {
 impl CustomNumberFormat {
     fn initialize(ctx: &yew::prelude::Context<Self>) -> Self {
         let config = ctx.props().restored_config.clone();
-        // let show_frac = config
-        //     .minimum_fraction_digits
-        //     .or(config.maximum_fraction_digits)
-        //     .or(config.rounding_increment)
-        //     .is_some();
-        // let show_sig = config
-        //     .minimum_significant_digits
-        //     .or(config.maximum_significant_digits)
-        //     .is_some();
-        // let disable_rounding_increment = show_sig
-        //     || show_frac
-        //     || !matches!(
-        //         config.rounding_priority,
-        //         Some(RoundingPriority::Auto) | None
-        //     );
-        // let disable_rounding_priority = !(show_frac && show_sig);
         Self {
             style: config
                 ._style
@@ -248,10 +236,6 @@ impl CustomNumberFormat {
                 })
                 .unwrap_or_default(),
             config,
-            // show_frac,
-            // show_sig,
-            // disable_rounding_increment,
-            // disable_rounding_priority,
             notation: None,
         }
     }

package/src/rust/components/viewer.rs

@@ -19,17 +19,17 @@ use yew::prelude::*;
 
 use super::containers::split_panel::SplitPanel;
 use super::font_loader::{FontLoader, FontLoaderProps, FontLoaderStatus};
-use super::form::debug::DebugPanel;
 use super::style::{LocalStyle, StyleProvider};
 use crate::components::column_settings_sidebar::ColumnSettingsPanel;
 use crate::components::main_panel::MainPanel;
-use crate::components::settings_panel::SettingsPanel;
+use crate::components::settings_panel::{SelectedTab, SettingsPanel};
 use crate::config::*;
 use crate::css;
-use crate::custom_events::CustomEvents;
-use crate::dragdrop::{DragDropProps, *};
 use crate::js::JsPerspectiveViewerPlugin;
-use crate::presentation::{ColumnLocator, ColumnSettingsTab, Presentation, PresentationProps};
+use crate::presentation::{
+    ColumnLocator, ColumnSettingsTab, DragDropProps, Presentation, PresentationProps,
+};
+use crate::queries::*;
 use crate::renderer::{RendererProps, *};
 use crate::session::{SessionProps, *};
 use crate::tasks::*;
@@ -41,8 +41,6 @@ pub struct PerspectiveViewerProps {
     pub elem: web_sys::HtmlElement,
 
     /// State
-    pub custom_events: CustomEvents,
-    pub dragdrop: DragDrop,
     pub session: Session,
     pub renderer: Renderer,
     pub presentation: Presentation,
@@ -54,44 +52,6 @@ impl PartialEq for PerspectiveViewerProps {
     }
 }
 
-impl HasCustomEvents for PerspectiveViewerProps {
-    fn custom_events(&self) -> &CustomEvents {
-        &self.custom_events
-    }
-}
-
-impl HasDragDrop for PerspectiveViewerProps {
-    fn dragdrop(&self) -> &DragDrop {
-        &self.dragdrop
-    }
-}
-
-impl HasPresentation for PerspectiveViewerProps {
-    fn presentation(&self) -> &Presentation {
-        &self.presentation
-    }
-}
-
-impl HasRenderer for PerspectiveViewerProps {
-    fn renderer(&self) -> &Renderer {
-        &self.renderer
-    }
-}
-
-impl HasSession for PerspectiveViewerProps {
-    fn session(&self) -> &Session {
-        &self.session
-    }
-}
-
-impl StateProvider for PerspectiveViewerProps {
-    type State = PerspectiveViewerProps;
-
-    fn clone_state(&self) -> Self::State {
-        self.clone()
-    }
-}
-
 #[derive(Debug)]
 pub enum PerspectiveViewerMsg {
     ColumnSettingsPanelSizeUpdate(Option<i32>),
@@ -105,6 +65,8 @@ pub enum PerspectiveViewerMsg {
     Reset(bool, Option<Sender<()>>),
     Resize,
     SettingsPanelSizeUpdate(Option<i32>),
+    SettingsPanelTabChanged(SelectedTab),
+    SettingsPanelAutoWidth(f64),
     ToggleDebug,
     ToggleSettingsComplete(SettingsUpdate, Sender<()>),
     ToggleSettingsInit(Option<SettingsUpdate>, Option<Sender<ApiResult<JsValue>>>),
@@ -142,8 +104,11 @@ pub struct PerspectiveViewer {
     on_close_column_settings: Callback<()>,
     on_rendered: Option<Sender<()>>,
     on_resize: Rc<PubSub<()>>,
+    on_settings_panel_dimensions_reset: Rc<PubSub<()>>,
     settings_open: bool,
     settings_panel_width_override: Option<i32>,
+    settings_panel_selected_tab: SelectedTab,
+    settings_panel_auto_width: f64,
 
     /// Value-semantic state snapshots (Step 4 scaffold).
     /// Populated by `UpdateSession` / `UpdateRenderer` / `UpdatePresentation` /
@@ -203,8 +168,11 @@ impl Component for PerspectiveViewer {
             on_close_column_settings,
             on_rendered: None,
             on_resize: Default::default(),
+            on_settings_panel_dimensions_reset: Default::default(),
             settings_open: false,
             settings_panel_width_override: None,
+            settings_panel_selected_tab: SelectedTab::default(),
+            settings_panel_auto_width: 0.0,
             session_props,
             renderer_props,
             presentation_props,
@@ -221,43 +189,13 @@ impl Component for PerspectiveViewer {
                 false
             },
             Reset(all, sender) => {
-                ctx.props().presentation.set_open_column_settings(None);
-                clone!(
-                    ctx.props().renderer,
-                    ctx.props().session,
-                    ctx.props().presentation
+                reset_all(
+                    &ctx.props().session,
+                    &ctx.props().renderer,
+                    &ctx.props().presentation,
+                    all,
+                    sender,
                 );
-
-                ApiFuture::spawn(async move {
-                    session
-                        .reset(ResetOptions {
-                            config: true,
-                            expressions: all,
-                            ..ResetOptions::default()
-                        })
-                        .await?;
-                    let columns_config = if all {
-                        presentation.reset_columns_configs();
-                        None
-                    } else {
-                        Some(presentation.all_columns_configs())
-                    };
-
-                    renderer.reset(columns_config.as_ref()).await?;
-                    presentation.reset_available_themes(None).await;
-                    if all {
-                        presentation.reset_theme().await?;
-                    }
-
-                    let result = renderer.draw(session.validate().await?.create_view()).await;
-                    if let Some(sender) = sender {
-                        sender.send(()).unwrap();
-                    }
-
-                    renderer.reset_changed.emit(());
-                    result
-                });
-
                 false
             },
             ToggleSettingsInit(Some(SettingsUpdate::Missing), None) => false,
@@ -335,6 +273,10 @@ impl Component for PerspectiveViewer {
                     ctx.props()
                         .presentation
                         .set_open_column_settings(Some(open_column_settings));
+
+                    if locator.is_some() {
+                        self.settings_panel_selected_tab = SelectedTab::Query;
+                    }
                 }
 
                 if let Some(sender) = sender {
@@ -349,7 +291,22 @@ impl Component for PerspectiveViewer {
             },
             SettingsPanelSizeUpdate(None) => {
                 self.settings_panel_width_override = None;
-                false
+                self.settings_panel_auto_width = 0.0;
+                self.on_settings_panel_dimensions_reset.emit(());
+                true
+            },
+            SettingsPanelTabChanged(tab) => {
+                let changed = tab != self.settings_panel_selected_tab;
+                self.settings_panel_selected_tab = tab;
+                changed
+            },
+            SettingsPanelAutoWidth(w) => {
+                if w > self.settings_panel_auto_width {
+                    self.settings_panel_auto_width = w;
+                    true
+                } else {
+                    false
+                }
             },
             ColumnSettingsPanelSizeUpdate(Some(x)) => {
                 self.column_settings_panel_width_override = Some(x);
@@ -449,8 +406,6 @@ impl Component for PerspectiveViewer {
 
     fn view(&self, ctx: &Context<Self>) -> Html {
         let Self::Properties {
-            custom_events,
-            dragdrop,
             presentation,
             renderer,
             session,
@@ -470,7 +425,7 @@ impl Component for PerspectiveViewer {
         }
 
         let on_open_expr_panel = ctx.link().callback(|c| OpenColumnSettings {
-            locator: Some(c),
+            locator: c,
             sender: None,
             toggle: true,
         });
@@ -496,17 +451,13 @@ impl Component for PerspectiveViewer {
         let plugin_name = self.renderer_props.plugin_name.clone();
         let available_plugins = self.renderer_props.available_plugins.clone();
         let has_table = self.session_props.has_table.clone();
-        let named_column_count = self
-            .renderer_props
-            .requirements
-            .names
-            .as_ref()
-            .map(|n| n.len())
-            .unwrap_or(0);
+        let named_column_count = self.renderer_props.config.config_column_names.len();
 
         let view_config = self.session_props.config.clone();
         let drag_column = self.dragdrop_props.column.clone();
         let metadata = self.session_props.metadata.clone();
+        let on_select_tab = ctx.link().callback(SettingsPanelTabChanged);
+        let on_auto_width = ctx.link().callback(SettingsPanelAutoWidth);
         let settings_panel = html! {
             if is_settings_open {
                 <SettingsPanel
@@ -520,11 +471,16 @@ impl Component for PerspectiveViewer {
                     {has_table}
                     {named_column_count}
                     {view_config}
+                    plugin_config={self.renderer_props.plugin_config.clone()}
                     {drag_column}
                     metadata={metadata.clone()}
                     open_column_settings={self.presentation_props.open_column_settings.clone()}
                     selected_theme={self.presentation_props.selected_theme.clone()}
-                    {dragdrop}
+                    selected_tab={self.settings_panel_selected_tab}
+                    auto_width={self.settings_panel_auto_width}
+                    on_dimensions_reset={&self.on_settings_panel_dimensions_reset}
+                    {on_select_tab}
+                    {on_auto_width}
                     {presentation}
                     {renderer}
                     {session}
@@ -552,8 +508,8 @@ impl Component for PerspectiveViewer {
                         plugin_name={self.renderer_props.plugin_name.clone()}
                         {metadata}
                         view_config={self.session_props.config.clone()}
+                        column_stats={self.session_props.column_stats.clone()}
                         selected_theme={self.presentation_props.selected_theme.clone()}
-                        {custom_events}
                         {presentation}
                         {renderer}
                         {session}
@@ -564,43 +520,23 @@ impl Component for PerspectiveViewer {
         };
 
         let on_reset = ctx.link().callback(|all| Reset(all, None));
-        let render_limits = self.renderer_props.render_limits;
-        let has_table = self.session_props.has_table.clone();
-        let is_errored = self.session_props.error.is_some();
-        let stats = self.session_props.stats.clone();
-        let update_count = self.update_count;
-        let error = self.session_props.error.clone();
         let is_settings_open = self.settings_open
             && matches!(self.session_props.has_table, Some(TableLoadState::Loaded));
-        let title = self.session_props.title.clone();
-        let selected_theme = self.presentation_props.selected_theme.clone();
-        let available_themes = self.presentation_props.available_themes.clone();
         let main_panel = html! {
             <MainPanel
                 {on_settings}
                 {on_reset}
-                {render_limits}
-                {has_table}
-                {is_errored}
-                {stats}
-                {update_count}
-                {error}
+                session_props={self.session_props.clone()}
+                renderer_props={self.renderer_props.clone()}
+                presentation_props={self.presentation_props.clone()}
                 {is_settings_open}
-                {title}
-                {selected_theme}
-                {available_themes}
-                is_workspace={self.presentation_props.is_workspace}
-                {custom_events}
+                update_count={self.update_count}
                 {presentation}
                 {renderer}
                 {session}
             />
         };
 
-        let debug_panel = html! {
-            if self.debug_open { <DebugPanel {presentation} {renderer} {session} /> }
-        };
-
         html! {
             <StyleProvider root={ctx.props().elem.clone()}>
                 <LocalStyle href={css!("viewer")} />
@@ -613,9 +549,8 @@ impl Component for PerspectiveViewer {
                             initial_size={self.settings_panel_width_override}
                             on_reset={ctx.link().callback(|_| SettingsPanelSizeUpdate(None))}
                             on_resize={on_split_panel_resize.clone()}
-                            on_resize_finished={ctx.props().render_callback()}
+                            on_resize_finished={render_callback(&ctx.props().session, &ctx.props().renderer)}
                         >
-                            { debug_panel }
                             { settings_panel }
                             <div id="main_column_container">
                                 { main_panel }
@@ -735,17 +670,43 @@ fn create_subscriptions(ctx: &Context<PerspectiveViewer>) -> Vec<Subscription> {
             .view_created
             .add_listener(ctx.link().callback(|_| DecrementUpdateCount));
 
-        vec![sub1, sub2, sub3, sub4, sub5, sub6, sub7]
+        // Stats fetch resolution (populates session.column_stats) triggers
+        // a fresh `SessionProps` so `column_stats` reaches downstream
+        // components and the StyleTab re-queries the schema with the
+        // new value.
+        let sub8 = s.column_stats_changed.add_notify_listener(&cb);
+
+        vec![sub1, sub2, sub3, sub4, sub5, sub6, sub7, sub8]
     };
 
     let renderer_props_sub = {
         let renderer = ctx.props().renderer.clone();
         let cb_plugin = ctx.link().callback({
+            let renderer = renderer.clone();
             move |_: JsPerspectiveViewerPlugin| UpdateRenderer(Box::new(renderer.to_props(None)))
         });
 
+        // Re-snapshot RendererProps when the plugin_config bucket
+        // changes (in-tab edit via `send_plugin_config`, JSON paste via
+        // `restore_and_render`, full clear via `reset_all` with
+        // `all=true`). Without this, `RendererProps.plugin_config`
+        // would stay frozen at its construct-time value and `PluginTab`
+        // would render stale.
+        let cb_plugin_config = ctx.link().callback({
+            let renderer = renderer.clone();
+            move |_: serde_json::Map<String, serde_json::Value>| {
+                UpdateRenderer(Box::new(renderer.to_props(None)))
+            }
+        });
+
         let sub1 = ctx.props().renderer.plugin_changed.add_listener(cb_plugin);
-        vec![sub1]
+        let sub2 = ctx
+            .props()
+            .renderer
+            .plugin_config_changed
+            .add_listener(cb_plugin_config);
+
+        vec![sub1, sub2]
     };
 
     let presentation_props_sub = {
@@ -779,7 +740,7 @@ fn create_subscriptions(ctx: &Context<PerspectiveViewer>) -> Vec<Subscription> {
         let cb_clear = ctx.link().callback(|_: ()| UpdateDragDrop(Box::default()));
         let sub1 = ctx
             .props()
-            .dragdrop
+            .presentation
             .drop_received
             .add_notify_listener(&cb_clear);
 
@@ -858,19 +819,19 @@ fn inject_engine_callbacks(ctx: &Context<PerspectiveViewer>) {
             .borrow_mut() = Some(cb);
     }
 
-    // DragDrop: on_dragstart
+    // Drag/drop: on_dragstart (post-merge: lives on Presentation)
     {
-        let dragdrop = ctx.props().dragdrop.clone();
-        let cb = ctx
-            .link()
-            .callback(move |_: DragEffect| UpdateDragDrop(Box::new(dragdrop.to_props())));
+        let presentation = ctx.props().presentation.clone();
+        let cb = ctx.link().callback(move |_: DragEffect| {
+            UpdateDragDrop(Box::new(presentation.drag_drop_props()))
+        });
 
-        *ctx.props().dragdrop.on_dragstart.borrow_mut() = Some(cb);
+        *ctx.props().presentation.on_dragstart.borrow_mut() = Some(cb);
     }
 
-    // DragDrop: on_dragend
+    // Drag/drop: on_dragend
     {
         let cb = ctx.link().callback(|_: ()| UpdateDragDrop(Box::default()));
-        *ctx.props().dragdrop.on_dragend.borrow_mut() = Some(cb);
+        *ctx.props().presentation.on_dragend.borrow_mut() = Some(cb);
     }
 }