@perspective-dev/viewer 4.3.0 → 4.4.0

package/src/rust/components/portal.rs

@@ -0,0 +1,274 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use std::cell::Cell;
+use std::rc::Rc;
+
+use perspective_js::utils::global;
+use wasm_bindgen::JsCast;
+use wasm_bindgen::prelude::*;
+use web_sys::*;
+use yew::prelude::*;
+
+use crate::components::modal::ModalOrientation;
+use crate::components::style::StyleProvider;
+use crate::utils::*;
+
+#[derive(Properties, PartialEq)]
+pub struct PortalModalProps {
+    pub children: Children,
+
+    /// The element to position relative to. `None` means closed.
+    pub target: Option<HtmlElement>,
+
+    /// Whether the portal manages its own focus and closes on blur.
+    #[prop_or(true)]
+    pub own_focus: bool,
+
+    /// Called when the portal closes (blur, etc).
+    #[prop_or_default]
+    pub on_close: Callback<()>,
+
+    pub tag_name: &'static str,
+
+    pub theme: String,
+}
+
+pub enum PortalModalMsg {
+    Reposition,
+}
+
+pub struct PortalModal {
+    host: HtmlElement,
+    shadow_root: Element,
+    top: f64,
+    left: f64,
+    visible: bool,
+    rev_vert: ModalOrientation,
+    anchor: Rc<Cell<ModalAnchor>>,
+    _blur_closure: Option<Closure<dyn FnMut(FocusEvent)>>,
+}
+
+impl PortalModal {
+    fn attach_to_body(&self) {
+        if !self.host.is_connected() {
+            let _ = global::body().append_child(&self.host);
+        }
+    }
+
+    fn detach_from_body(&mut self) {
+        if self.host.is_connected() {
+            let _ = global::body().remove_child(&self.host);
+        }
+
+        if let Some(closure) = self._blur_closure.as_ref() {
+            self.host
+                .remove_event_listener_with_callback("blur", closure.as_ref().unchecked_ref())
+                .unwrap()
+        }
+
+        self._blur_closure = None;
+    }
+
+    fn position_against_target(&mut self, target: &HtmlElement) {
+        let target_rect = target.get_bounding_client_rect();
+        let height = target_rect.height();
+        let width = target_rect.width();
+        let top = target_rect.top();
+        let left = target_rect.left();
+
+        if !self.visible {
+            // First pass: position at default anchor, invisible
+            self.top = top + height - 1.0;
+            self.left = left;
+            self.visible = false;
+        } else {
+            // Second pass: compute actual anchor and reposition
+            let anchor = calc_relative_position(&self.host, top, left, height, width);
+            self.anchor.set(anchor);
+            let modal_rect = self.host.get_bounding_client_rect();
+            let (new_top, new_left) = calc_anchor_position(anchor, &target_rect, &modal_rect);
+            self.top = new_top;
+            self.left = new_left;
+            self.rev_vert.set(anchor.is_rev_vert());
+        }
+    }
+
+    fn setup_blur_handler(&mut self, ctx: &Context<Self>) {
+        let on_close = {
+            let target = ctx.props().target.clone();
+            ctx.props().on_close.reform(move |_| {
+                if let Some(target) = &target {
+                    target.class_list().remove_1("modal-target").unwrap();
+                }
+            })
+        };
+
+        let closure = Closure::wrap(Box::new(move |_: FocusEvent| {
+            on_close.emit(());
+        }) as Box<dyn FnMut(FocusEvent)>);
+
+        let _ = self
+            .host
+            .add_event_listener_with_callback("blur", closure.as_ref().unchecked_ref());
+
+        self._blur_closure = Some(closure);
+    }
+}
+
+impl Component for PortalModal {
+    type Message = PortalModalMsg;
+    type Properties = PortalModalProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        let host: HtmlElement = global::document()
+            .create_element(ctx.props().tag_name)
+            .unwrap()
+            .unchecked_into();
+
+        host.style().set_property("position", "fixed").unwrap();
+        host.style().set_property("z-index", "10000").unwrap();
+        let init = ShadowRootInit::new(ShadowRootMode::Open);
+        let shadow_root = if let Some(elem) = host.shadow_root() {
+            elem
+        } else {
+            host.attach_shadow(&init).unwrap()
+        }
+        .unchecked_into::<Element>();
+
+        Self {
+            host,
+            shadow_root,
+            top: 0.0,
+            left: 0.0,
+            visible: false,
+            rev_vert: Default::default(),
+            anchor: Default::default(),
+            _blur_closure: None,
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            PortalModalMsg::Reposition => {
+                self.visible = true;
+                true
+            },
+        }
+    }
+
+    fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
+        let new_target = &ctx.props().target;
+        let old_target = &old_props.target;
+
+        match (old_target, new_target, self._blur_closure.as_ref()) {
+            (None, Some(_), Some(closure)) => {
+                self.visible = false;
+                self.host
+                    .remove_event_listener_with_callback("blur", closure.as_ref().unchecked_ref())
+                    .unwrap();
+
+                self._blur_closure = None;
+            },
+            (None, Some(_), None) => {
+                self.visible = false;
+                self._blur_closure = None;
+            },
+            (Some(_), None, _) => {
+                self.detach_from_body();
+                return true;
+            },
+            _ => {},
+        }
+
+        true
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let target = &ctx.props().target;
+        if target.is_none() {
+            return html! {};
+        }
+
+        let opacity = if self.visible { "" } else { ";opacity:0" };
+        let css = format!(
+            ":host{{top:{}px;left:{}px{}}}",
+            self.top, self.left, opacity
+        );
+
+        let portal_content = html! {
+            <>
+                <style>{ css }</style>
+                <ContextProvider<ModalOrientation> context={self.rev_vert.clone()}>
+                    <StyleProvider root={self.host.clone()}>
+                        { for ctx.props().children.iter() }
+                    </StyleProvider>
+                </ContextProvider<ModalOrientation>>
+            </>
+        };
+
+        yew::create_portal(portal_content, self.shadow_root.clone())
+    }
+
+    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
+        if let Some(target) = &ctx.props().target {
+            if !self.host.is_connected() {
+                let theme = ctx.props().theme.as_str();
+                self.host.set_attribute("theme", theme).unwrap();
+
+                // First render with a target: attach to body, position invisible
+                self.position_against_target(target);
+                self.attach_to_body();
+
+                // Propagate theme from target
+                if let Some(theme) = target.get_attribute("theme") {
+                    let _ = self.host.set_attribute("theme", &theme);
+                }
+
+                target.class_list().add_1("modal-target").unwrap();
+
+                if ctx.props().own_focus {
+                    self.host.set_attribute("tabindex", "0").unwrap();
+                    self.setup_blur_handler(ctx);
+                }
+
+                // Schedule second positioning pass
+                let link = ctx.link().clone();
+                wasm_bindgen_futures::spawn_local(async move {
+                    request_animation_frame().await;
+                    link.send_message(PortalModalMsg::Reposition);
+                });
+            } else if self.visible {
+                // Second pass: reposition with correct anchor
+                self.position_against_target(target);
+
+                if ctx.props().own_focus && self._blur_closure.is_some() {
+                    let _ = self.host.focus();
+                }
+            }
+        }
+    }
+
+    fn destroy(&mut self, ctx: &Context<Self>) {
+        if let Some(target) = &ctx.props().target {
+            target.class_list().remove_1("modal-target").unwrap();
+            if target.get_attribute("theme").is_some() {
+                let _ = self.host.remove_attribute("theme");
+            }
+
+            let event = CustomEvent::new("-perspective-close-expression").unwrap();
+            let _ = target.dispatch_event(&event);
+        }
+
+        self.detach_from_body();
+    }
+}

package/src/rust/components/render_warning.rs

@@ -13,144 +13,93 @@
 use yew::prelude::*;
 
 use super::style::LocalStyle;
-use crate::model::*;
-use crate::renderer::*;
-use crate::session::*;
-use crate::*;
+use crate::css;
+use crate::renderer::limits::RenderLimits;
 
-#[derive(Properties, PerspectiveProperties!)]
+#[derive(Properties, PartialEq)]
 pub struct RenderWarningProps {
-    // Current dimensions
-    pub dimensions: Option<(usize, usize, Option<usize>, Option<usize>)>,
+    pub dimensions: Option<RenderLimits>,
 
-    // State
-    pub renderer: Renderer,
-    pub session: Session,
+    /// Called when the user clicks "Render all points".  The parent disables
+    /// the render warning on the active plugin and re-draws.
+    pub on_dismiss: Callback<()>,
 }
 
-impl PartialEq for RenderWarningProps {
-    fn eq(&self, other: &Self) -> bool {
-        self.dimensions == other.dimensions
-    }
-}
-
-pub enum RenderWarningMsg {
-    DismissWarning,
-}
-
-pub struct RenderWarning {
-    col_warn: Option<(usize, usize)>,
-    row_warn: Option<(usize, usize)>,
-}
-
-impl RenderWarning {
-    fn update_warnings(&mut self, ctx: &Context<Self>) {
-        if let Some((num_cols, num_rows, max_cols, max_rows)) = ctx.props().dimensions {
-            let count = num_cols * num_rows;
-            if max_cols.is_some_and(|x| x < num_cols) {
-                self.col_warn = Some((max_cols.unwrap(), num_cols));
-            } else {
-                self.col_warn = None;
-            }
-
-            if max_rows.is_some_and(|x| x < num_rows) {
-                self.row_warn = Some((num_cols * max_rows.unwrap(), count));
-            } else {
-                self.row_warn = None;
-            }
+#[function_component(RenderWarning)]
+pub fn render_warning(props: &RenderWarningProps) -> Html {
+    let dimensions = props.dimensions;
+    let (col_warn, row_warn) = if let Some(limits) = dimensions {
+        let col_warn = if limits.max_cols.is_some_and(|x| x < limits.num_cols) {
+            Some((limits.max_cols.unwrap(), limits.num_cols))
         } else {
-            self.col_warn = None;
-            self.row_warn = None;
-        }
-    }
-}
-
-impl Component for RenderWarning {
-    type Message = RenderWarningMsg;
-    type Properties = RenderWarningProps;
-
-    fn create(ctx: &Context<Self>) -> Self {
-        let mut elem = Self {
-            col_warn: None,
-            row_warn: None,
+            None
         };
 
-        elem.update_warnings(ctx);
-        elem
-    }
+        let row_warn = if limits.max_rows.is_some_and(|x| x < limits.num_rows) {
+            Some((
+                limits.num_cols * limits.max_rows.unwrap(),
+                limits.num_cols * limits.num_rows,
+            ))
+        } else {
+            None
+        };
 
-    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
-        match msg {
-            RenderWarningMsg::DismissWarning => {
-                let state = ctx.props().clone_state();
-                ApiFuture::spawn(async move {
-                    state.renderer().disable_active_plugin_render_warning();
-                    let view_task = state.session().get_view();
-                    state.renderer().update(view_task).await
-                });
+        (col_warn, row_warn)
+    } else {
+        (None, None)
+    };
+
+    if col_warn.is_some() || row_warn.is_some() {
+        let warning = match (col_warn, row_warn) {
+            (Some((x, y)), Some((a, b))) => html! {
+                <span style="white-space: nowrap">
+                    { "Rendering" }
+                    { render_pair(x, y) }
+                    { "of columns and" }
+                    { render_pair(a, b) }
+                    { "of points." }
+                </span>
+            },
+            (Some((x, y)), None) => html! {
+                <span style="white-space: nowrap">
+                    { "Rendering" }
+                    { render_pair(x, y) }
+                    { "of columns." }
+                </span>
+            },
+            (None, Some((x, y))) => html! {
+                <span style="white-space: nowrap">
+                    { "Rendering" }
+                    { render_pair(x, y) }
+                    { "of points." }
+                </span>
             },
+            _ => html! { <div /> },
         };
-        true
-    }
-
-    fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
-        self.update_warnings(ctx);
-        true
-    }
 
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        if self.col_warn.is_some() || self.row_warn.is_some() {
-            let warning = match (self.col_warn, self.row_warn) {
-                (Some((x, y)), Some((a, b))) => html! {
-                    <span style="white-space: nowrap">
-                        { "Rendering" }
-                        { render_pair(x, y) }
-                        { "of columns and" }
-                        { render_pair(a, b) }
-                        { "of points." }
+        let on_dismiss = props.on_dismiss.clone();
+        let onclick = Callback::from(move |_: MouseEvent| on_dismiss.emit(()));
+        html! {
+            <>
+                <LocalStyle href={css!("render-warning")} />
+                <div
+                    class="plugin_information plugin_information--warning"
+                    id="plugin_information--size"
+                >
+                    <span class="plugin_information__icon" />
+                    <span class="plugin_information__text" id="plugin_information_count">
+                        { warning }
                     </span>
-                },
-                (Some((x, y)), None) => html! {
-                    <span style="white-space: nowrap">
-                        { "Rendering" }
-                        { render_pair(x, y) }
-                        { "of columns." }
-                    </span>
-                },
-                (None, Some((x, y))) => html! {
-                    <span style="white-space: nowrap">
-                        { "Rendering" }
-                        { render_pair(x, y) }
-                        { "of points." }
-                    </span>
-                },
-                _ => html! { <div /> },
-            };
-
-            let onclick = ctx.link().callback(|_| RenderWarningMsg::DismissWarning);
-
-            html! {
-                <>
-                    <LocalStyle href={css!("render-warning")} />
-                    <div
-                        class="plugin_information plugin_information--warning"
-                        id="plugin_information--size"
-                    >
-                        <span class="plugin_information__icon" />
-                        <span class="plugin_information__text" id="plugin_information_count">
-                            { warning }
+                    <span class="plugin_information__actions">
+                        <span class="plugin_information__action" onmousedown={onclick}>
+                            { "Render all points" }
                         </span>
-                        <span class="plugin_information__actions">
-                            <span class="plugin_information__action" onmousedown={onclick}>
-                                { "Render all points" }
-                            </span>
-                        </span>
-                    </div>
-                </>
-            }
-        } else {
-            html! {}
+                    </span>
+                </div>
+            </>
         }
+    } else {
+        html! {}
     }
 }
 

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