@perspective-dev/viewer 4.2.0 → 4.4.0

package/src/rust/components/settings_panel.rs

@@ -12,20 +12,23 @@
 
 use std::rc::Rc;
 
+use perspective_client::config::{ViewConfig, ViewConfigUpdate};
+use perspective_js::utils::ApiFuture;
 use yew::prelude::*;
 
 use super::column_selector::ColumnSelector;
 use super::plugin_selector::PluginSelector;
-use crate::PerspectiveProperties;
 use crate::components::containers::sidebar_close_button::SidebarCloseButton;
+use crate::config::PluginUpdate;
 use crate::dragdrop::*;
-use crate::model::*;
-use crate::presentation::{ColumnLocator, Presentation};
+use crate::presentation::{ColumnLocator, OpenColumnSettings, Presentation};
 use crate::renderer::*;
+use crate::session::column_defaults_update::*;
 use crate::session::*;
+use crate::tasks::can_render_column_styles;
 use crate::utils::*;
 
-#[derive(Clone, Properties, PerspectiveProperties!)]
+#[derive(Clone, Properties)]
 pub struct SettingsPanelProps {
     pub on_close: Callback<()>,
     pub on_resize: Rc<PubSub<()>>,
@@ -33,6 +36,25 @@ pub struct SettingsPanelProps {
     pub on_debug: Callback<()>,
     pub is_debug: bool,
 
+    /// Value props threaded from the root's `RendererProps` / `SessionProps`.
+    pub plugin_name: Option<String>,
+    pub available_plugins: PtrEqRc<Vec<String>>,
+    pub has_table: Option<TableLoadState>,
+    pub named_column_count: usize,
+    pub view_config: PtrEqRc<ViewConfig>,
+    /// Column currently being dragged (if any) — threaded to show drag
+    /// highlights without per-component `DragDrop` PubSub subscriptions.
+    pub drag_column: Option<String>,
+    /// Cloned session metadata snapshot — threaded from `SessionProps`
+    /// so that metadata changes trigger re-renders via prop diffing.
+    pub metadata: SessionMetadataRc,
+    /// Snapshot of the column-settings sidebar state — threaded from
+    /// `PresentationProps` so that open/close triggers re-renders.
+    pub open_column_settings: OpenColumnSettings,
+
+    /// Selected theme name, threaded for PortalModal consumers.
+    pub selected_theme: Option<String>,
+
     /// State
     pub dragdrop: DragDrop,
     pub session: Session,
@@ -41,8 +63,17 @@ pub struct SettingsPanelProps {
 }
 
 impl PartialEq for SettingsPanelProps {
-    fn eq(&self, _rhs: &Self) -> bool {
-        false
+    fn eq(&self, rhs: &Self) -> bool {
+        self.is_debug == rhs.is_debug
+            && self.plugin_name == rhs.plugin_name
+            && self.available_plugins == rhs.available_plugins
+            && self.has_table == rhs.has_table
+            && self.named_column_count == rhs.named_column_count
+            && self.view_config == rhs.view_config
+            && self.drag_column == rhs.drag_column
+            && self.metadata == rhs.metadata
+            && self.open_column_settings == rhs.open_column_settings
+            && self.selected_theme == rhs.selected_theme
     }
 }
 
@@ -55,7 +86,74 @@ pub fn SettingsPanel(props: &SettingsPanelProps) -> Html {
         session,
         ..
     } = &props;
-    let selected_column = props.get_current_column_locator();
+
+    let selected_column = {
+        let locator = props.open_column_settings.locator.clone();
+        let config = &props.view_config;
+        locator.filter(|locator| match locator {
+            ColumnLocator::Table(name) => {
+                locator
+                    .name()
+                    .map(|n| {
+                        config.columns.iter().any(|maybe_col| {
+                            maybe_col.as_ref().map(|col| col == n).unwrap_or_default()
+                        }) || config.group_by.iter().any(|col| col == n)
+                            || config.split_by.iter().any(|col| col == n)
+                            || config.filter.iter().any(|col| col.column() == n)
+                            || config.sort.iter().any(|col| &col.0 == n)
+                    })
+                    .unwrap_or_default()
+                    && can_render_column_styles(&props.renderer, config, &props.metadata, name)
+                        .unwrap_or_default()
+            },
+            _ => true,
+        })
+    };
+
+    let plugin_name = props.plugin_name.clone();
+    let available_plugins = props.available_plugins.clone();
+
+    // Dispatch callback: captures engine handles, constructs config update, renders
+    let on_select_plugin = {
+        clone!(renderer, session, presentation);
+        let session_metadata = props.metadata.clone();
+        Callback::from(move |plugin_name: String| {
+            if !session.is_errored() {
+                let metadata =
+                    renderer.get_next_plugin_metadata(&PluginUpdate::Update(plugin_name));
+
+                let prev_metadata = renderer.metadata();
+                let requirements = metadata.as_ref().unwrap_or(&*prev_metadata);
+                let rollup_features = session_metadata
+                    .get_features()
+                    .map(|x| x.get_group_rollup_modes())
+                    .unwrap();
+
+                let group_rollups = requirements.get_group_rollups(&rollup_features);
+                let mut update = ViewConfigUpdate {
+                    group_rollup_mode: group_rollups.first().cloned(),
+                    ..ViewConfigUpdate::default()
+                };
+
+                update.set_update_column_defaults(
+                    &session_metadata,
+                    &session.get_view_config().columns,
+                    requirements,
+                );
+
+                if session.update_view_config(update).is_ok() {
+                    clone!(renderer, session);
+                    ApiFuture::spawn(async move {
+                        renderer.apply_pending_plugin()?;
+                        renderer.draw(session.validate().await?.create_view()).await
+                    });
+                }
+
+                presentation.set_open_column_settings(None);
+            }
+        })
+    };
+
     html! {
         <div id="settings_panel" class="sidebar_column noselect split-panel orient-vertical">
             if selected_column.is_none() {
@@ -68,14 +166,20 @@ pub fn SettingsPanel(props: &SettingsPanelProps) -> Html {
                 id={if props.is_debug {"debug_close_button"} else {"debug_open_button"}}
                 on_close_sidebar={&props.on_debug}
             />
-            <PluginSelector {presentation} {renderer} {session} />
+            <PluginSelector {plugin_name} {available_plugins} {on_select_plugin} />
             <ColumnSelector
                 on_resize={&props.on_resize}
                 on_open_expr_panel={&props.on_select_column}
-                selected_column={selected_column.clone()}
+                {selected_column}
+                has_table={props.has_table.clone()}
+                named_column_count={props.named_column_count}
+                view_config={props.view_config.clone()}
+                drag_column={props.drag_column.clone()}
+                metadata={props.metadata.clone()}
+                selected_theme={props.selected_theme.clone()}
                 {dragdrop}
-                {renderer}
-                {session}
+                renderer={renderer.clone()}
+                session={session.clone()}
             />
         </div>
     }

package/src/rust/components/status_bar.rs

@@ -10,26 +10,27 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use std::rc::Rc;
-
+use wasm_bindgen_futures::spawn_local;
 use web_sys::*;
 use yew::prelude::*;
 
 use super::status_indicator::StatusIndicator;
 use super::style::LocalStyle;
 use crate::components::containers::select::*;
+use crate::components::copy_dropdown::CopyDropDownMenu;
+use crate::components::export_dropdown::ExportDropDownMenu;
+use crate::components::portal::PortalModal;
 use crate::components::status_bar_counter::StatusBarRowsCounter;
-use crate::custom_elements::copy_dropdown::*;
-use crate::custom_elements::export_dropdown::*;
 use crate::custom_events::CustomEvents;
-use crate::model::*;
+use crate::js::*;
 use crate::presentation::Presentation;
 use crate::renderer::*;
 use crate::session::*;
+use crate::tasks::*;
 use crate::utils::*;
 use crate::*;
 
-#[derive(Properties, PerspectiveProperties!)]
+#[derive(Clone, Properties)]
 pub struct StatusBarProps {
     // DOM Attribute
     pub id: String,
@@ -41,6 +42,25 @@ pub struct StatusBarProps {
     #[prop_or_default]
     pub on_settings: Option<Callback<()>>,
 
+    // Value props threaded from the root's `SessionProps`.
+    // Using these avoids PubSub subscriptions for table_loaded / table_errored.
+    pub has_table: Option<TableLoadState>,
+    pub is_errored: bool,
+    pub stats: Option<ViewStats>,
+    /// In-flight render counter and full error, threaded to `StatusIndicator`.
+    pub update_count: u32,
+    pub error: Option<TableErrorState>,
+    /// Title string from session — threaded to avoid title_changed
+    /// subscription.
+    pub title: Option<String>,
+    /// Theme state from presentation — threaded to avoid theme_config_updated /
+    /// visibility_changed subscriptions.
+    pub is_settings_open: bool,
+    pub selected_theme: Option<String>,
+    pub available_themes: PtrEqRc<Vec<String>>,
+    /// Whether this viewer is hosted inside a `<perspective-workspace>`.
+    pub is_workspace: bool,
+
     // State
     pub custom_events: CustomEvents,
     pub session: Session,
@@ -51,6 +71,48 @@ pub struct StatusBarProps {
 impl PartialEq for StatusBarProps {
     fn eq(&self, other: &Self) -> bool {
         self.id == other.id
+            && self.has_table == other.has_table
+            && self.is_errored == other.is_errored
+            && self.stats == other.stats
+            && self.update_count == other.update_count
+            && self.error == other.error
+            && self.title == other.title
+            && self.is_settings_open == other.is_settings_open
+            && self.selected_theme == other.selected_theme
+            && self.available_themes == other.available_themes
+            && self.is_workspace == other.is_workspace
+    }
+}
+
+impl HasCustomEvents for StatusBarProps {
+    fn custom_events(&self) -> &CustomEvents {
+        &self.custom_events
+    }
+}
+
+impl HasPresentation for StatusBarProps {
+    fn presentation(&self) -> &Presentation {
+        &self.presentation
+    }
+}
+
+impl HasRenderer for StatusBarProps {
+    fn renderer(&self) -> &Renderer {
+        &self.renderer
+    }
+}
+
+impl HasSession for StatusBarProps {
+    fn session(&self) -> &Session {
+        &self.session
+    }
+}
+
+impl StateProvider for StatusBarProps {
+    type State = StatusBarProps;
+
+    fn clone_state(&self) -> Self::State {
+        self.clone()
     }
 }
 
@@ -58,9 +120,10 @@ pub enum StatusBarMsg {
     Reset(MouseEvent),
     Export,
     Copy,
+    CloseExport,
+    CloseCopy,
     Noop,
     Eject,
-    SetThemeConfig((Rc<Vec<String>>, Option<usize>)),
     SetTheme(String),
     ResetTheme,
     PointerEvent(web_sys::PointerEvent),
@@ -70,14 +133,16 @@ pub enum StatusBarMsg {
 
 /// A toolbar with buttons, and `Table` & `View` status information.
 pub struct StatusBar {
-    _subscriptions: [Subscription; 5],
     copy_ref: NodeRef,
     export_ref: NodeRef,
     input_ref: NodeRef,
     statusbar_ref: NodeRef,
-    theme: Option<String>,
-    themes: Rc<Vec<String>>,
+    /// Local title tracks the live `<input>` value before the user commits the
+    /// change (blur / Enter).  Reset to the prop value whenever the prop
+    /// changes.
     title: Option<String>,
+    copy_target: Option<HtmlElement>,
+    export_target: Option<HtmlElement>,
 }
 
 impl Component for StatusBar {
@@ -85,21 +150,26 @@ impl Component for StatusBar {
     type Properties = StatusBarProps;
 
     fn create(ctx: &Context<Self>) -> Self {
-        fetch_initial_theme(ctx);
         Self {
-            _subscriptions: register_listeners(ctx),
             copy_ref: NodeRef::default(),
             export_ref: NodeRef::default(),
             input_ref: NodeRef::default(),
             statusbar_ref: NodeRef::default(),
-            theme: None,
-            themes: vec![].into(),
-            title: ctx.props().session().get_title().clone(),
+            title: ctx.props().title.clone(),
+            copy_target: None,
+            export_target: None,
         }
     }
 
-    fn changed(&mut self, ctx: &Context<Self>, _old_props: &Self::Properties) -> bool {
-        self._subscriptions = register_listeners(ctx);
+    fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
+        // Keep the local title in sync with the prop whenever the session title
+        // changes externally (e.g. restore() call) or the settings panel opens /
+        // closes (which resets the input element).
+        if ctx.props().title != old_props.title
+            || ctx.props().is_settings_open != old_props.is_settings_open
+        {
+            self.title = ctx.props().title.clone();
+        }
         true
     }
 
@@ -111,47 +181,50 @@ impl Component for StatusBar {
                 false
             },
             StatusBarMsg::ResetTheme => {
-                let state = ctx.props().clone_state();
+                let presentation = ctx.props().presentation.clone();
+                let session = ctx.props().session.clone();
+                let renderer = ctx.props().renderer.clone();
                 ApiFuture::spawn(async move {
-                    state.presentation.reset_theme().await?;
-                    let view = state.session.get_view().into_apierror()?;
-                    state.renderer.restyle_all(&view).await
+                    presentation.reset_theme().await?;
+                    let view = session.get_view().into_apierror()?;
+                    renderer.restyle_all(&view).await
                 });
                 true
             },
-            StatusBarMsg::SetThemeConfig((themes, index)) => {
-                let new_theme = index.and_then(|x| themes.get(x)).cloned();
-                let should_render = new_theme != self.theme || self.themes != themes;
-                self.theme = new_theme;
-                self.themes = themes;
-                should_render
-            },
             StatusBarMsg::SetTheme(theme_name) => {
-                let state = ctx.props().clone_state();
+                let presentation = ctx.props().presentation.clone();
+                let session = ctx.props().session.clone();
+                let renderer = ctx.props().renderer.clone();
                 ApiFuture::spawn(async move {
-                    state.presentation.set_theme_name(Some(&theme_name)).await?;
-                    let view = state.session.get_view().into_apierror()?;
-                    state.renderer.restyle_all(&view).await
+                    presentation.set_theme_name(Some(&theme_name)).await?;
+                    let view = session.get_view().into_apierror()?;
+                    renderer.restyle_all(&view).await
                 });
 
                 false
             },
             StatusBarMsg::Export => {
-                let target = self.export_ref.cast::<HtmlElement>().into_apierror()?;
-                ExportDropDownMenuElement::new_from_model(ctx.props()).open(target);
-                false
+                self.export_target = self.export_ref.cast::<HtmlElement>();
+                true
             },
             StatusBarMsg::Copy => {
-                let target = self.copy_ref.cast::<HtmlElement>().into_apierror()?;
-                CopyDropDownMenuElement::new_from_model(ctx.props()).open(target);
-                false
+                self.copy_target = self.copy_ref.cast::<HtmlElement>();
+                true
+            },
+            StatusBarMsg::CloseExport => {
+                self.export_target = None;
+                true
+            },
+            StatusBarMsg::CloseCopy => {
+                self.copy_target = None;
+                true
             },
             StatusBarMsg::Eject => {
                 ctx.props().presentation().on_eject.emit(());
                 false
             },
             StatusBarMsg::Noop => {
-                self.title = ctx.props().session().get_title();
+                self.title = ctx.props().title.clone();
                 true
             },
             StatusBarMsg::TitleInputEvent => {
@@ -201,16 +274,21 @@ impl Component for StatusBar {
             ..
         } = ctx.props();
 
+        let has_table = ctx.props().has_table.clone();
+        let is_errored = ctx.props().is_errored;
+        let is_settings_open = ctx.props().is_settings_open;
+        let title = &ctx.props().title;
+
         let mut is_updating_class_name = classes!();
-        if session.get_title().is_some() {
+        if title.is_some() {
             is_updating_class_name.push("titled");
         };
 
-        if !presentation.is_settings_open() {
+        if !is_settings_open {
             is_updating_class_name.push(["settings-closed", "titled"]);
         };
 
-        if !session.has_table() {
+        if !matches!(has_table, Some(TableLoadState::Loaded)) {
             is_updating_class_name.push("updating");
         }
 
@@ -229,20 +307,58 @@ impl Component for StatusBar {
             .link()
             .callback(|_: InputEvent| StatusBarMsg::TitleInputEvent);
 
-        let is_menu = session.has_table() && ctx.props().on_settings.as_ref().is_none();
+        let is_menu = matches!(has_table, Some(TableLoadState::Loaded))
+            && ctx.props().on_settings.as_ref().is_none();
         let is_title = is_menu
-            || presentation.get_is_workspace()
-            || session.get_title().is_some()
-            || session.is_errored()
+            || ctx.props().is_workspace
+            || title.is_some()
+            || is_errored
             || presentation.is_active(&self.input_ref.cast::<Element>());
 
-        let is_settings = session.get_title().is_some()
-            || presentation.get_is_workspace()
-            || !session.has_table()
-            || session.is_errored()
-            || presentation.is_settings_open()
+        let is_settings = title.is_some()
+            || ctx.props().is_workspace
+            || !matches!(has_table, Some(TableLoadState::Loaded))
+            || is_errored
+            || is_settings_open
             || presentation.is_active(&self.input_ref.cast::<Element>());
 
+        let on_copy_select = {
+            let props = ctx.props().clone();
+            let link = ctx.link().clone();
+            Callback::from(move |x: ExportFile| {
+                let props = props.clone();
+                let link = link.clone();
+                spawn_local(async move {
+                    let mime = x.method.mimetype(x.is_chart);
+                    let task = props.export_method_to_blob(x.method);
+                    let result = copy_to_clipboard(task, mime).await;
+                    crate::maybe_log!({
+                        result?;
+                        link.send_message(StatusBarMsg::CloseCopy);
+                    })
+                })
+            })
+        };
+
+        let on_export_select = {
+            let props = ctx.props().clone();
+            let link = ctx.link().clone();
+            Callback::from(move |x: ExportFile| {
+                if !x.name.is_empty() {
+                    clone!(props, link);
+                    spawn_local(async move {
+                        let val = props.export_method_to_blob(x.method).await.unwrap();
+                        let is_chart = props.renderer().is_chart();
+                        download(&x.as_filename(is_chart), &val).unwrap();
+                        link.send_message(StatusBarMsg::CloseExport);
+                    })
+                }
+            })
+        };
+
+        let on_close_copy = ctx.link().callback(|_| StatusBarMsg::CloseCopy);
+        let on_close_export = ctx.link().callback(|_| StatusBarMsg::CloseExport);
+
         if is_settings {
             html! {
                 <>
@@ -253,7 +369,15 @@ impl Component for StatusBar {
                         class={is_updating_class_name}
                         {onpointerdown}
                     >
-                        <StatusIndicator {custom_events} {renderer} {session} />
+                        <StatusIndicator
+                            {custom_events}
+                            {renderer}
+                            {session}
+                            update_count={ctx.props().update_count}
+                            error={ctx.props().error.clone()}
+                            has_table={ctx.props().has_table.clone()}
+                            stats={ctx.props().stats.clone()}
+                        />
                         if is_title {
                             <label
                                 class="input-sizer"
@@ -272,21 +396,22 @@ impl Component for StatusBar {
                             </label>
                         }
                         if is_title {
-                            <StatusBarRowsCounter {session} />
+                            <StatusBarRowsCounter stats={ctx.props().stats.clone()} />
                         }
                         <div id="spacer" />
                         if is_menu {
                             <div id="menu-bar" class="section">
                                 <ThemeSelector
-                                    theme={self.theme.clone()}
-                                    themes={self.themes.clone()}
+                                    theme={ctx.props().selected_theme.clone()}
+                                    themes={ctx.props().available_themes.clone()}
                                     on_change={ctx.link().callback(StatusBarMsg::SetTheme)}
                                     on_reset={ctx.link().callback(|_| StatusBarMsg::ResetTheme)}
                                 />
                                 <div id="plugin-settings"><slot name="statusbar-extra" /></div>
                                 <span class="hover-target">
                                     <span id="reset" class="button" onmousedown={&onreset}>
-                                        <span />
+                                        <span class="icon" />
+                                        <span class="icon-label" />
                                     </span>
                                 </span>
                                 <span
@@ -294,14 +419,20 @@ impl Component for StatusBar {
                                     class="hover-target"
                                     onmousedown={onexport}
                                 >
-                                    <span id="export" class="button"><span /></span>
+                                    <span id="export" class="button">
+                                        <span class="icon" />
+                                        <span class="icon-label" />
+                                    </span>
                                 </span>
                                 <span
                                     ref={&self.copy_ref}
                                     class="hover-target"
                                     onmousedown={oncopy}
                                 >
-                                    <span id="copy" class="button"><span /></span>
+                                    <span id="copy" class="button">
+                                        <span class="icon" />
+                                        <span class="icon-label" />
+                                    </span>
                                 </span>
                             </div>
                         }
@@ -310,17 +441,45 @@ impl Component for StatusBar {
                                 id="settings_button"
                                 class="noselect"
                                 onmousedown={x.reform(|_| ())}
-                            />
-                            <div id="close_button" class="noselect" onmousedown={onclose} />
+                            >
+                                <span class="icon" />
+                            </div>
+                            <div id="close_button" class="noselect" onmousedown={onclose}>
+                                <span class="icon" />
+                            </div>
                         }
                     </div>
+                    <PortalModal
+                        tag_name="perspective-copy-menu"
+                        target={self.copy_target.clone()}
+                        own_focus=true
+                        on_close={on_close_copy}
+                        theme={ctx.props().selected_theme.clone().unwrap_or_default()}
+                    >
+                        <CopyDropDownMenu renderer={renderer.clone()} callback={on_copy_select} />
+                    </PortalModal>
+                    <PortalModal
+                        tag_name="perspective-export-menu"
+                        target={self.export_target.clone()}
+                        own_focus=true
+                        on_close={on_close_export}
+                        theme={ctx.props().selected_theme.clone().unwrap_or_default()}
+                    >
+                        <ExportDropDownMenu
+                            renderer={renderer.clone()}
+                            session={session.clone()}
+                            callback={on_export_select}
+                        />
+                    </PortalModal>
                 </>
             }
         } else if let Some(x) = ctx.props().on_settings.as_ref() {
             let class = classes!(is_updating_class_name, "floating");
             html! {
                 <div id={ctx.props().id.clone()} {class}>
-                    <div id="settings_button" class="noselect" onmousedown={x.reform(|_| ())} />
+                    <div id="settings_button" class="noselect" onmousedown={x.reform(|_| ())}>
+                        <span class="icon" />
+                    </div>
                     <div id="close_button" class="noselect" onmousedown={&onclose} />
                 </div>
             }
@@ -330,46 +489,10 @@ impl Component for StatusBar {
     }
 }
 
-fn register_listeners(ctx: &Context<StatusBar>) -> [Subscription; 5] {
-    [
-        ctx.props()
-            .presentation()
-            .theme_config_updated
-            .add_listener(ctx.link().callback(StatusBarMsg::SetThemeConfig)),
-        ctx.props()
-            .presentation()
-            .visibility_changed
-            .add_listener(ctx.link().callback(|_| StatusBarMsg::Noop)),
-        ctx.props()
-            .session()
-            .title_changed
-            .add_listener(ctx.link().callback(|_| StatusBarMsg::Noop)),
-        ctx.props()
-            .session()
-            .table_loaded
-            .add_listener(ctx.link().callback(|_| StatusBarMsg::Noop)),
-        ctx.props()
-            .session()
-            .table_errored
-            .add_listener(ctx.link().callback(|_| StatusBarMsg::Noop)),
-    ]
-}
-
-fn fetch_initial_theme(ctx: &Context<StatusBar>) {
-    ApiFuture::spawn({
-        let on_theme = ctx.link().callback(StatusBarMsg::SetThemeConfig);
-        clone!(ctx.props().presentation());
-        async move {
-            on_theme.emit(presentation.get_selected_theme_config().await?);
-            Ok(())
-        }
-    });
-}
-
 #[derive(Properties, PartialEq)]
 struct ThemeSelectorProps {
     pub theme: Option<String>,
-    pub themes: Rc<Vec<String>>,
+    pub themes: PtrEqRc<Vec<String>>,
     pub on_reset: Callback<()>,
     pub on_change: Callback<String>,
 }
@@ -403,6 +526,7 @@ fn ThemeSelector(props: &ThemeSelectorProps) -> Html {
                             onclick={props.on_reset.reform(|_| ())}
                         />
                         <span id="theme" class="button">
+                            <span class="icon" />
                             <Select<String>
                                 id="theme_selector"
                                 class="invert"