@perspective-dev/viewer 4.3.0 → 4.4.1

package/src/rust/components/viewer.rs

@@ -25,16 +25,17 @@ use crate::components::column_settings_sidebar::ColumnSettingsPanel;
 use crate::components::main_panel::MainPanel;
 use crate::components::settings_panel::SettingsPanel;
 use crate::config::*;
+use crate::css;
 use crate::custom_events::CustomEvents;
-use crate::dragdrop::*;
-use crate::model::*;
-use crate::presentation::{ColumnLocator, ColumnSettingsTab, Presentation};
-use crate::renderer::*;
-use crate::session::*;
+use crate::dragdrop::{DragDropProps, *};
+use crate::js::JsPerspectiveViewerPlugin;
+use crate::presentation::{ColumnLocator, ColumnSettingsTab, Presentation, PresentationProps};
+use crate::renderer::{RendererProps, *};
+use crate::session::{SessionProps, *};
+use crate::tasks::*;
 use crate::utils::*;
-use crate::{PerspectiveProperties, css};
 
-#[derive(Clone, Properties, PerspectiveProperties!)]
+#[derive(Clone, Properties)]
 pub struct PerspectiveViewerProps {
     /// The light DOM element this component will render to.
     pub elem: web_sys::HtmlElement,
@@ -53,9 +54,41 @@ impl PartialEq for PerspectiveViewerProps {
     }
 }
 
-impl PerspectiveViewerProps {
-    fn is_title(&self) -> bool {
-        self.session.get_title().is_some()
+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()
     }
 }
 
@@ -75,12 +108,34 @@ pub enum PerspectiveViewerMsg {
     ToggleDebug,
     ToggleSettingsComplete(SettingsUpdate, Sender<()>),
     ToggleSettingsInit(Option<SettingsUpdate>, Option<Sender<ApiResult<JsValue>>>),
+    UpdateSession(Box<SessionProps>),
+    UpdateRenderer(Box<RendererProps>),
+    UpdatePresentation(Box<PresentationProps>),
+
+    /// Update only `is_settings_open` in the presentation snapshot without
+    /// touching `available_themes` (which requires async data).
+    UpdateSettingsOpen(bool),
+    UpdateIsWorkspace(bool),
+
+    /// Update only `open_column_settings` in the presentation snapshot.
+    UpdateColumnSettings(Box<crate::presentation::OpenColumnSettings>),
+    UpdateDragDrop(Box<DragDropProps>),
+
+    /// Update only stats-related fields of `session_props` without touching
+    /// `config`.  This prevents `stats_changed` events (e.g. from `reset()`)
+    /// from propagating a freshly-cleared config to the column selector.
+    UpdateSessionStats(Option<ViewStats>, Option<TableLoadState>),
+
+    /// Increment/decrement the in-flight render counter threaded to
+    /// `StatusIndicator` so it can show the "updating" spinner.
+    IncrementUpdateCount,
+    DecrementUpdateCount,
 }
 
 use PerspectiveViewerMsg::*;
 
 pub struct PerspectiveViewer {
-    _subscriptions: [Subscription; 1],
+    _subscriptions: Vec<Subscription>,
     column_settings_panel_width_override: Option<i32>,
     debug_open: bool,
     fonts: FontLoaderProps,
@@ -89,6 +144,18 @@ pub struct PerspectiveViewer {
     on_resize: Rc<PubSub<()>>,
     settings_open: bool,
     settings_panel_width_override: Option<i32>,
+
+    /// Value-semantic state snapshots (Step 4 scaffold).
+    /// Populated by `UpdateSession` / `UpdateRenderer` / `UpdatePresentation` /
+    /// `UpdateDragDrop` messages dispatched from async engine tasks.
+    session_props: SessionProps,
+    renderer_props: RendererProps,
+    presentation_props: PresentationProps,
+    dragdrop_props: DragDropProps,
+
+    /// Counts in-flight renders (incremented on `view_config_changed`,
+    /// decremented on `view_created`). Threaded to `StatusIndicator`.
+    update_count: u32,
 }
 
 impl Component for PerspectiveViewer {
@@ -98,36 +165,38 @@ impl Component for PerspectiveViewer {
     fn create(ctx: &Context<Self>) -> Self {
         let elem = ctx.props().elem.clone();
         let fonts = FontLoaderProps::new(&elem, ctx.link().callback(|()| PreloadFontsUpdate));
+        inject_engine_callbacks(ctx);
+        let subscriptions = create_subscriptions(ctx);
+        let session_props = ctx.props().session.to_props();
+        let renderer_props = ctx.props().renderer.to_props(None);
+        let presentation_props = ctx.props().presentation.to_props(PtrEqRc::new(vec![]));
 
-        let session_sub = {
-            let props = ctx.props().clone();
-            let callback = ctx.link().batch_callback(move |(update, _)| {
-                if update {
-                    vec![]
-                } else {
-                    let locator = props.get_current_column_locator();
-                    vec![OpenColumnSettings {
-                        locator,
-                        sender: None,
-                        toggle: false,
-                    }]
-                }
-            });
-
-            ctx.props()
-                .renderer
-                .render_limits_changed
-                .add_listener(callback)
-        };
-
+        // Memoized callback for column settings drawer
         let on_close_column_settings = ctx.link().callback(|_| OpenColumnSettings {
             locator: None,
             sender: None,
             toggle: false,
         });
 
+        // Kick off an initial async theme fetch so that `available_themes` is
+        // populated even if `theme_config_updated` fires before the PubSub
+        // subscription is registered.
+        {
+            let presentation = ctx.props().presentation.clone();
+            let cb = ctx.link().callback(move |themes: PtrEqRc<Vec<String>>| {
+                UpdatePresentation(Box::new(presentation.to_props(themes)))
+            });
+
+            let presentation = ctx.props().presentation.clone();
+            ApiFuture::spawn(async move {
+                let themes = presentation.get_available_themes().await?;
+                cb.emit(themes);
+                Ok(())
+            });
+        }
+
         Self {
-            _subscriptions: [session_sub],
+            _subscriptions: subscriptions,
             column_settings_panel_width_override: None,
             debug_open: false,
             fonts,
@@ -136,6 +205,11 @@ impl Component for PerspectiveViewer {
             on_resize: Default::default(),
             settings_open: false,
             settings_panel_width_override: None,
+            session_props,
+            renderer_props,
+            presentation_props,
+            dragdrop_props: DragDropProps::default(),
+            update_count: 0,
         }
     }
 
@@ -220,7 +294,6 @@ impl Component for PerspectiveViewer {
             ToggleSettingsComplete(_, resolve)
                 if matches!(self.fonts.get_status(), FontLoaderStatus::Finished) =>
             {
-                ctx.props().presentation.set_open_column_settings(None);
                 if let Err(e) = resolve.send(()) {
                     tracing::error!("toggle settings failed {:?}", e);
                 }
@@ -250,7 +323,7 @@ impl Component for PerspectiveViewer {
                         } else {
                             locator.as_ref().and_then(|x| {
                                 x.name().map(|x| {
-                                    if ctx.props().session.is_column_active(x) {
+                                    if self.session_props.is_column_active(x) {
                                         ColumnSettingsTab::Style
                                     } else {
                                         ColumnSettingsTab::Attributes
@@ -303,6 +376,56 @@ impl Component for PerspectiveViewer {
 
                 true
             },
+            UpdateSession(props) => {
+                let changed = *props != self.session_props;
+                self.session_props = *props;
+                changed
+            },
+            UpdateSessionStats(stats, has_table) => {
+                let changed =
+                    stats != self.session_props.stats || has_table != self.session_props.has_table;
+                self.session_props.stats = stats;
+                self.session_props.has_table = has_table;
+                changed
+            },
+            UpdateRenderer(props) => {
+                let changed = *props != self.renderer_props;
+                self.renderer_props = *props;
+                changed
+            },
+            UpdatePresentation(props) => {
+                let changed = *props != self.presentation_props;
+                self.presentation_props = *props;
+                changed
+            },
+            UpdateSettingsOpen(open) => {
+                let changed = open != self.presentation_props.is_settings_open;
+                self.presentation_props.is_settings_open = open;
+                changed
+            },
+            UpdateIsWorkspace(is_workspace) => {
+                let changed = is_workspace != self.presentation_props.is_workspace;
+                self.presentation_props.is_workspace = is_workspace;
+                changed
+            },
+            UpdateColumnSettings(ocs) => {
+                let changed = *ocs != self.presentation_props.open_column_settings;
+                self.presentation_props.open_column_settings = *ocs;
+                changed
+            },
+            UpdateDragDrop(props) => {
+                let changed = *props != self.dragdrop_props;
+                self.dragdrop_props = *props;
+                changed
+            },
+            IncrementUpdateCount => {
+                self.update_count = self.update_count.saturating_add(1);
+                true
+            },
+            DecrementUpdateCount => {
+                self.update_count = self.update_count.saturating_sub(1);
+                true
+            },
         }
     }
 
@@ -334,13 +457,15 @@ impl Component for PerspectiveViewer {
             ..
         } = ctx.props();
 
-        let is_settings_open = self.settings_open && ctx.props().session.has_table();
+        let is_settings_open = self.settings_open
+            && matches!(self.session_props.has_table, Some(TableLoadState::Loaded));
+
         let mut class = classes!();
         if !is_settings_open {
             class.push("settings-closed");
         }
 
-        if ctx.props().is_title() {
+        if self.session_props.title.is_some() {
             class.push("titled");
         }
 
@@ -360,8 +485,28 @@ impl Component for PerspectiveViewer {
 
         let on_close_settings = ctx.link().callback(|()| ToggleSettingsInit(None, None));
         let on_debug = ctx.link().callback(|_| ToggleDebug);
-        let selected_column = ctx.props().get_current_column_locator();
-        let selected_tab = ctx.props().presentation.get_open_column_settings().tab;
+        let selected_column = get_current_column_locator(
+            &self.presentation_props.open_column_settings,
+            &ctx.props().renderer,
+            &self.session_props.config,
+            &self.session_props.metadata,
+        );
+
+        let selected_tab = self.presentation_props.open_column_settings.tab;
+        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 view_config = self.session_props.config.clone();
+        let drag_column = self.dragdrop_props.column.clone();
+        let metadata = self.session_props.metadata.clone();
         let settings_panel = html! {
             if is_settings_open {
                 <SettingsPanel
@@ -370,6 +515,15 @@ impl Component for PerspectiveViewer {
                     on_select_column={on_open_expr_panel}
                     is_debug={self.debug_open}
                     {on_debug}
+                    {plugin_name}
+                    {available_plugins}
+                    {has_table}
+                    {named_column_count}
+                    {view_config}
+                    {drag_column}
+                    metadata={metadata.clone()}
+                    open_column_settings={self.presentation_props.open_column_settings.clone()}
+                    selected_theme={self.presentation_props.selected_theme.clone()}
                     {dragdrop}
                     {presentation}
                     {renderer}
@@ -395,6 +549,10 @@ impl Component for PerspectiveViewer {
                         on_close={self.on_close_column_settings.clone()}
                         width_override={self.column_settings_panel_width_override}
                         {on_select_tab}
+                        plugin_name={self.renderer_props.plugin_name.clone()}
+                        {metadata}
+                        view_config={self.session_props.config.clone()}
+                        selected_theme={self.presentation_props.selected_theme.clone()}
                         {custom_events}
                         {presentation}
                         {renderer}
@@ -405,8 +563,38 @@ 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} {custom_events} {presentation} {renderer} {session} />
+            <MainPanel
+                {on_settings}
+                {on_reset}
+                {render_limits}
+                {has_table}
+                {is_errored}
+                {stats}
+                {update_count}
+                {error}
+                {is_settings_open}
+                {title}
+                {selected_theme}
+                {available_themes}
+                is_workspace={self.presentation_props.is_workspace}
+                {custom_events}
+                {presentation}
+                {renderer}
+                {session}
+            />
         };
 
         let debug_panel = html! {
@@ -523,3 +711,166 @@ impl PerspectiveViewer {
         };
     }
 }
+
+/// Subscribe to PubSub events that still have non-root subscribers and
+/// therefore cannot yet be replaced with direct callbacks.
+fn create_subscriptions(ctx: &Context<PerspectiveViewer>) -> Vec<Subscription> {
+    let session_props_sub = {
+        let session = ctx.props().session.clone();
+        let cb = ctx
+            .link()
+            .callback(move |_: ()| UpdateSession(Box::new(session.to_props())));
+
+        let s = &ctx.props().session;
+        let sub1 = s.table_loaded.add_notify_listener(&cb);
+        let sub2 = s.table_unloaded.add_notify_listener(&cb);
+        let sub3 = s.view_created.add_notify_listener(&cb);
+        let sub4 = s.view_config_changed.add_notify_listener(&cb);
+        let sub5 = s.title_changed.add_notify_listener(&cb);
+        let sub6 = s
+            .view_config_changed
+            .add_listener(ctx.link().callback(|_| IncrementUpdateCount));
+
+        let sub7 = s
+            .view_created
+            .add_listener(ctx.link().callback(|_| DecrementUpdateCount));
+
+        vec![sub1, sub2, sub3, sub4, sub5, sub6, sub7]
+    };
+
+    let renderer_props_sub = {
+        let renderer = ctx.props().renderer.clone();
+        let cb_plugin = ctx.link().callback({
+            move |_: JsPerspectiveViewerPlugin| UpdateRenderer(Box::new(renderer.to_props(None)))
+        });
+
+        let sub1 = ctx.props().renderer.plugin_changed.add_listener(cb_plugin);
+        vec![sub1]
+    };
+
+    let presentation_props_sub = {
+        let presentation = ctx.props().presentation.clone();
+        let cb_settings = ctx.link().callback(UpdateSettingsOpen);
+        let cb_theme = {
+            let pres = presentation.clone();
+            ctx.link()
+                .callback(move |(themes, _): (PtrEqRc<Vec<String>>, _)| {
+                    UpdatePresentation(Box::new(pres.to_props(themes)))
+                })
+        };
+
+        let cb_column_settings = {
+            let pres = presentation.clone();
+            ctx.link().callback(move |_: (bool, Option<String>)| {
+                UpdateColumnSettings(Box::new(pres.get_open_column_settings()))
+            })
+        };
+
+        let sub1 = presentation.settings_open_changed.add_listener(cb_settings);
+        let sub2 = presentation.theme_config_updated.add_listener(cb_theme);
+        let sub3 = presentation
+            .column_settings_open_changed
+            .add_listener(cb_column_settings);
+
+        vec![sub1, sub2, sub3]
+    };
+
+    let dragdrop_props_sub = {
+        let cb_clear = ctx.link().callback(|_: ()| UpdateDragDrop(Box::default()));
+        let sub1 = ctx
+            .props()
+            .dragdrop
+            .drop_received
+            .add_notify_listener(&cb_clear);
+
+        vec![sub1]
+    };
+
+    let mut subscriptions = Vec::new();
+    subscriptions.extend(session_props_sub);
+    subscriptions.extend(renderer_props_sub);
+    subscriptions.extend(presentation_props_sub);
+    subscriptions.extend(dragdrop_props_sub);
+    subscriptions
+}
+
+/// Inject direct callbacks into the engine handles, replacing PubSub fields
+/// that were exclusively consumed by the root component.
+fn inject_engine_callbacks(ctx: &Context<PerspectiveViewer>) {
+    // Session: on_stats_changed
+    {
+        let session = ctx.props().session.clone();
+        let cb = ctx.link().callback(move |_: ()| {
+            UpdateSessionStats(session.get_table_stats(), session.has_table())
+        });
+
+        *ctx.props().session.on_stats_changed.borrow_mut() = Some(cb);
+    }
+
+    // Session: on_table_errored
+    {
+        let session = ctx.props().session.clone();
+        let cb = ctx
+            .link()
+            .callback(move |_: ()| UpdateSession(Box::new(session.to_props())));
+
+        *ctx.props().session.on_table_errored.borrow_mut() = Some(cb);
+    }
+
+    // Renderer: on_render_limits_changed (combines UpdateRenderer + column
+    // locator recheck that were previously two separate PubSub subscriptions).
+    {
+        clone!(
+            ctx.props().presentation,
+            ctx.props().renderer,
+            ctx.props().session
+        );
+
+        let cb = ctx.link().batch_callback(move |limits: RenderLimits| {
+            let mut msgs = vec![UpdateRenderer(Box::new(renderer.to_props(Some(limits))))];
+            if !limits.is_update {
+                let locator = get_current_column_locator(
+                    &presentation.get_open_column_settings(),
+                    &renderer,
+                    &session.get_view_config(),
+                    &session.metadata(),
+                );
+
+                msgs.push(OpenColumnSettings {
+                    locator,
+                    sender: None,
+                    toggle: false,
+                });
+            }
+
+            msgs
+        });
+
+        *ctx.props().renderer.on_render_limits_changed.borrow_mut() = Some(cb);
+    }
+
+    // Presentation: on_is_workspace_changed
+    {
+        let cb = ctx.link().callback(UpdateIsWorkspace);
+        *ctx.props()
+            .presentation
+            .on_is_workspace_changed
+            .borrow_mut() = Some(cb);
+    }
+
+    // DragDrop: on_dragstart
+    {
+        let dragdrop = ctx.props().dragdrop.clone();
+        let cb = ctx
+            .link()
+            .callback(move |_: DragEffect| UpdateDragDrop(Box::new(dragdrop.to_props())));
+
+        *ctx.props().dragdrop.on_dragstart.borrow_mut() = Some(cb);
+    }
+
+    // DragDrop: on_dragend
+    {
+        let cb = ctx.link().callback(|_: ()| UpdateDragDrop(Box::default()));
+        *ctx.props().dragdrop.on_dragend.borrow_mut() = Some(cb);
+    }
+}

package/src/rust/config/number_column_style.rs

@@ -29,6 +29,9 @@ pub enum NumberForegroundMode {
 
     #[serde(rename = "bar")]
     Bar,
+
+    #[serde(rename = "label-bar")]
+    LabelBar,
 }
 
 impl FromStr for NumberForegroundMode {
@@ -38,6 +41,7 @@ impl FromStr for NumberForegroundMode {
         match s {
             "color" => Ok(Self::Color),
             "bar" => Ok(Self::Bar),
+            "label-bar" => Ok(Self::LabelBar),
             x => Err(format!("Unknown NumberForegroundMode::{x}")),
         }
     }
@@ -53,7 +57,7 @@ impl NumberForegroundMode {
     }
 
     pub fn needs_gradient(&self) -> bool {
-        *self == Self::Bar
+        *self == Self::Bar || *self == Self::LabelBar
     }
 }
 

package/src/rust/config/viewer_config.rs

@@ -26,9 +26,9 @@ use crate::presentation::ColumnConfigMap;
 
 /// The state of an entire `custom_elements::PerspectiveViewerElement` component
 /// and its `Plugin`.
-#[derive(Debug, Default, Serialize, PartialEq)]
+#[derive(Debug, Default, Serialize, PartialEq, TS)]
 #[serde(deny_unknown_fields)]
-pub struct ViewerConfig<V = String> {
+pub struct ViewerConfig<V: TS = String> {
     pub version: V,
     pub columns_config: ColumnConfigMap,
     pub plugin: String,