@perspective-dev/viewer 4.3.0 → 4.4.0

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"

package/src/rust/components/status_bar_counter.rs

@@ -10,35 +10,23 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use perspective_client::*;
 use yew::prelude::*;
 
-use crate::PerspectiveProperties;
-use crate::session::{Session, ViewStats};
-use crate::utils::{AddListener, u32Ext};
+use crate::session::ViewStats;
+use crate::utils::u32Ext;
 
-#[derive(PartialEq, Properties, PerspectiveProperties!)]
+/// Props are now pure value types: no `Session` handle, no PubSub
+/// subscriptions.  The parent passes an updated `stats` whenever the
+/// underlying data changes (driven by the root's `UpdateSession` message).
+#[derive(PartialEq, Properties)]
 pub struct StatusBarRowsCounterProps {
-    pub session: Session,
+    pub stats: Option<ViewStats>,
 }
 
 /// A component to show the current [`Table`]'s dimensions.
 #[function_component]
 pub fn StatusBarRowsCounter(props: &StatusBarRowsCounterProps) -> Html {
-    let stats = use_state_eq(|| props.session.get_table_stats());
-    use_effect_with(
-        (props.session.clone(), stats.setter()),
-        |(session, set_stats)| {
-            let sub = session.stats_changed.add_listener({
-                clone!(session, set_stats);
-                move |_| set_stats.set(session.get_table_stats())
-            });
-
-            || drop(sub)
-        },
-    );
-
-    match props.session.get_table_stats() {
+    match props.stats {
         Some(
             ViewStats {
                 num_table_cells: Some((tr, tc)),