@perspective-dev/viewer 4.5.2 → 5.1.0

package/src/rust/components/containers/sidebar.rs

@@ -11,14 +11,17 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 use perspective_client::clone;
-use web_sys::Element;
+use wasm_bindgen::JsCast;
+use wasm_bindgen::prelude::Closure;
+use web_sys::HtmlElement;
 use yew::{
-    Callback, Children, Html, Properties, function_component, html, use_effect_with, use_node_ref,
-    use_state_eq,
+    Callback, Children, Html, Properties, function_component, html, use_effect_with, use_mut_ref,
+    use_node_ref,
 };
 
 use crate::components::containers::sidebar_close_button::SidebarCloseButton;
 use crate::components::editable_header::{EditableHeader, EditableHeaderProps};
+use crate::js::{ResizeObserver, ResizeObserverEntry};
 
 #[derive(PartialEq, Clone, Properties)]
 pub struct SidebarProps {
@@ -31,6 +34,28 @@ pub struct SidebarProps {
     pub width_override: Option<i32>,
     pub selected_tab: Option<usize>,
     pub header_props: EditableHeaderProps,
+
+    /// Trap-door width shared across this sidebar's tabs: the lifted
+    /// running max of the widths this component reports through
+    /// `on_auto_width`. Held by the parent (ultimately
+    /// `PerspectiveViewer`'s geometry state, like the settings panel's
+    /// Query/Plugin/Debug trap-door) so it survives tab switches AND
+    /// sidebar re-mounts, and clears on divider reset.
+    #[prop_or_default]
+    pub auto_width: f64,
+
+    /// Fires with the sidebar's rendered width after each render; the
+    /// owner keeps the running max threaded back as `auto_width`.
+    #[prop_or_default]
+    pub on_auto_width: Callback<f64>,
+
+    /// Pinned state for the header's pin toggle; the button renders only
+    /// when `on_toggle_pin` is provided.
+    #[prop_or_default]
+    pub is_pinned: bool,
+
+    #[prop_or_default]
+    pub on_toggle_pin: Option<Callback<()>>,
 }
 
 /// Sidebars are designed to live in a
@@ -39,33 +64,85 @@ pub struct SidebarProps {
 pub fn Sidebar(p: &SidebarProps) -> Html {
     let id = &p.id_prefix;
     let noderef = use_node_ref();
-    let auto_width = use_state_eq(|| 0f64);
-
-    // this gets the last calculated width and ensures that
-    // the auto-width element is at least that big.
-    // this ensures the panel grows but does not shrink.
-    use_effect_with(p.clone(), {
-        clone!(noderef, auto_width);
-        move |p| {
-            if p.width_override.is_none() {
-                let updated_width = noderef
-                    .cast::<Element>()
-                    .map(|el| el.get_bounding_client_rect().width())
-                    .unwrap_or_default();
-                let new_auto_width = (*auto_width).max(updated_width);
-                auto_width.set(new_auto_width);
-            } else {
-                auto_width.set(0f64);
+
+    // The trap-door reports the sidebar's rendered width to its owner via
+    // a `ResizeObserver` on the sidebar element, NOT a render effect:
+    // width changes are driven by DOM mutations anywhere in the tab
+    // subtree (e.g. the window editor staging a long column name into a
+    // slot), which need not re-render this component at all. The observer
+    // sees every one. `contentRect` (not the border box) is load-bearing:
+    // the sizer below is a content child, so ratcheting the border box
+    // would feed any sidebar padding back into unbounded growth. A manual
+    // divider drag (`width_override`) disables the ratchet until the
+    // divider resets.
+    let live_props = use_mut_ref(|| (Callback::<f64>::default(), None::<i32>));
+    *live_props.borrow_mut() = (p.on_auto_width.clone(), p.width_override);
+    use_effect_with((), {
+        clone!(noderef, live_props);
+        move |_| {
+            let closure =
+                Closure::<dyn FnMut(js_sys::Array)>::new(move |entries: js_sys::Array| {
+                    let (on_auto_width, width_override) = live_props.borrow().clone();
+                    if width_override.is_none() {
+                        for entry in entries.iter() {
+                            let entry: ResizeObserverEntry = entry.unchecked_into();
+                            on_auto_width.emit(entry.content_rect().width());
+                        }
+                    }
+                });
+
+            let observer = ResizeObserver::new(closure.as_ref().unchecked_ref());
+            let elem = noderef.cast::<HtmlElement>();
+            if let Some(elem) = &elem {
+                observer.observe(elem);
+            }
+
+            move || {
+                if let Some(elem) = &elem {
+                    observer.unobserve(elem);
+                }
+
+                drop(closure);
             }
         }
     });
 
-    let width_style = format!("min-width: 200px; width: {}px", *auto_width);
+    let auto_width = if p.width_override.is_none() {
+        p.auto_width
+    } else {
+        0.0
+    };
+
+    let width_style = format!("min-width: 200px; width: {}px", auto_width);
+    let pin_button = p.on_toggle_pin.as_ref().map(|cb| {
+        let onclick = {
+            let cb = cb.clone();
+            Callback::from(move |_: web_sys::MouseEvent| cb.emit(()))
+        };
+
+        let mut class = yew::classes!("sidebar_pin_button");
+        if p.is_pinned {
+            class.push("is-pinned");
+        }
+
+        html! {
+            <span
+                id={format!("{id}_pin_button")}
+                {class}
+                title={if p.is_pinned { "Unpin" } else { "Pin" }}
+                {onclick}
+            />
+        }
+    });
+
     html! {
         <>
             <SidebarCloseButton id={format!("{id}_close_button")} on_close_sidebar={&p.on_close} />
             <div class="sidebar_column" id={format!("{id}_sidebar")} ref={noderef}>
-                <div class="sidebar_header"><EditableHeader ..p.header_props.clone() /></div>
+                <div class="sidebar_header">
+                    <EditableHeader ..p.header_props.clone() />
+                    { pin_button }
+                </div>
                 <div class="sidebar_border" id={format!("{id}_border")} />
                 { p.children.iter().collect::<Html>() }
                 <div class="sidebar-auto-width" style={width_style} />

package/src/rust/components/containers/split_panel.rs

@@ -26,11 +26,17 @@ pub struct SplitPanelProps {
     #[prop_or_default]
     pub id: Option<String>,
 
+    /// Extra classes on the root element (ignored under `no_wrap`).
+    #[prop_or_default]
+    pub class: Classes,
+
     #[prop_or_default]
     pub orientation: Orientation,
 
-    /// Whether to render `<></>` empty templates as empty child panels, or
-    /// omit them entirely.
+    /// Whether to OMIT children that render nothing (an empty fragment, or
+    /// any nesting of empty fragments — see [`is_empty_html`]) instead of
+    /// rendering them as empty panes. A skipped pane takes its divider with
+    /// it.
     #[prop_or_default]
     pub skip_empty: bool,
 
@@ -53,6 +59,50 @@ pub struct SplitPanelProps {
 
     #[prop_or_default]
     pub initial_size: Option<i32>,
+
+    /// When `true`, a divider drag does NOT apply pane sizes directly:
+    /// `MoveResizing` only emits `on_resize` with the proposed dims, and pane
+    /// 0's committed size is driven exclusively by the controlled
+    /// [`Self::size`] prop — set by the parent when it is ready (e.g. after
+    /// pre-rendering panel content at the target size). This is the presize
+    /// gate for continuous divider drags (`PRESIZE_EVERYWHERE_PLAN.md`,
+    /// P1): geometry never outruns content. Only meaningful when the
+    /// resizable pane is child 0 (as in the viewer's `app_panel`).
+    #[prop_or_default]
+    pub deferred: bool,
+
+    /// Controlled committed size for pane 0 (deferred mode). Unlike
+    /// [`Self::initial_size`] (read once at `create`), changes to this prop
+    /// re-derive pane 0's style on every `changed`.
+    #[prop_or_default]
+    pub size: Option<i32>,
+}
+
+/// `true` when `node` renders NOTHING: an empty fragment, or a fragment of
+/// nothing but empty fragments. SEMANTIC, not literal — the `html!`
+/// if-syntax (and other wrappers) nests an empty branch inside another
+/// `VList` rather than yielding a bare `<></>`, which is why a literal
+/// `x != html! { <></> }` comparison is not a usable emptiness test (see
+/// the mechanism unit test). Deliberately conservative: `VText("")` and
+/// other node kinds are NOT considered empty.
+fn is_empty_html(node: &Html) -> bool {
+    match node {
+        Html::VList(list) => list.iter().all(is_empty_html),
+        _ => false,
+    }
+}
+
+/// The fixed-size pane style for a committed size (the complement pane
+/// flex-fills).
+fn size_style(orientation: Orientation, x: i32) -> String {
+    match orientation {
+        Orientation::Horizontal => {
+            format!("max-width:{x}px;min-width:{x}px;width:{x}px")
+        },
+        Orientation::Vertical => {
+            format!("max-height:{x}px;min-height:{x}px;height:{x}px")
+        },
+    }
 }
 
 impl SplitPanelProps {
@@ -64,9 +114,12 @@ impl SplitPanelProps {
 impl PartialEq for SplitPanelProps {
     fn eq(&self, other: &Self) -> bool {
         self.id == other.id
+            && self.class == other.class
             && self.children == other.children
             && self.orientation == other.orientation
             && self.reverse == other.reverse
+            && self.size == other.size
+            && self.deferred == other.deferred
     }
 }
 
@@ -111,15 +164,8 @@ impl Component for SplitPanel {
         let refs = Vec::from_iter(std::iter::repeat_with(Default::default).take(len));
 
         let mut styles = vec![Default::default(); len];
-        if let Some(x) = &ctx.props().initial_size {
-            styles[0] = Some(match ctx.props().orientation {
-                Orientation::Horizontal => {
-                    format!("max-width:{x}px;min-width:{x}px;width:{x}px")
-                },
-                Orientation::Vertical => {
-                    format!("max-height:{x}px;min-height:{x}px;height:{x}px")
-                },
-            });
+        if let Some(x) = ctx.props().size.or(ctx.props().initial_size) {
+            styles[0] = Some(size_style(ctx.props().orientation, x));
         }
 
         Self {
@@ -155,7 +201,12 @@ impl Component for SplitPanel {
                         cb.emit(state.get_dimensions(client_offset));
                     }
 
-                    self.styles[state.index] = state.get_style(client_offset);
+                    // Deferred mode: propose only — the committed size arrives
+                    // back through the controlled `size` prop once the parent
+                    // has pre-rendered content at the target.
+                    if !ctx.props().deferred {
+                        self.styles[state.index] = state.get_style(client_offset);
+                    }
                 }
             },
         };
@@ -173,20 +224,93 @@ impl Component for SplitPanel {
         let new_len = ctx.props().children.len();
         self.refs.resize_with(new_len, Default::default);
         self.styles.resize(new_len, Default::default());
+
+        if let Some(state) = self.resize_state.as_ref() {
+            let skip_empty = ctx.props().skip_empty;
+            let still_visible = ctx
+                .props()
+                .children
+                .iter()
+                .enumerate()
+                .any(|(i, x)| i == state.index && (!skip_empty || !is_empty_html(&x)));
+
+            if !still_visible {
+                self.resize_state = None;
+            }
+        }
+
+        // Deferred mode: pane 0's style tracks the controlled `size` prop
+        // (`None` = natural width, e.g. after a divider double-click reset).
+        if ctx.props().deferred {
+            self.styles[0] = ctx
+                .props()
+                .size
+                .map(|x| size_style(ctx.props().orientation, x));
+        }
+
         true
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let iter = ctx
+        let skip_empty = ctx.props().skip_empty;
+        let orientation = ctx.props().orientation;
+
+        // Pair each *visible* pane with its ORIGINAL child index and key every
+        // pane (and divider) by that stable identity — not its post-filter
+        // position. Toggling one pane in/out (e.g. the settings sidebar) then
+        // never shifts a sibling's key, so Yew reconciles the survivor in place
+        // rather than remounting it. A `MainPanel` remount here would tear down
+        // and recreate the embedded `<regular-layout>` and the `<slot>`s
+        // projecting the plugins — the bug this avoids. Dividers are independent
+        // keyed nodes for the same reason: a divider appearing before a pane must
+        // not alter that pane's own keyed subtree.
+        let panes = ctx
             .props()
             .children
             .iter()
-            .filter(|x| !ctx.props().skip_empty || x != &html! { <></> })
             .enumerate()
+            .filter(|(_, x)| !skip_empty || !is_empty_html(x))
             .collect::<Vec<_>>();
 
-        let orientation = ctx.props().orientation;
+        let last = panes.len().saturating_sub(1);
+        let mut nodes: Vec<Html> = Vec::with_capacity(panes.len() * 2);
+        let mut prev: Option<usize> = None;
+        for (pos, (i, x)) in panes.into_iter().enumerate() {
+            // A divider precedes every visible pane except the first; it resizes
+            // the *previous* visible pane (`prev`, an original index).
+            if let Some(p) = prev {
+                nodes.push(html! {
+                    <SplitPanelDivider
+                        key={format!("divider-{i}")}
+                        i={p}
+                        {orientation}
+                        link={ctx.link().clone()}
+                    />
+                });
+            }
+
+            // The last visible pane flex-fills (rendered bare, no width
+            // override); earlier panes are `SplitPanelChild`s that can carry a
+            // dragged size.
+            nodes.push(if pos == last {
+                html! { <key={i}>{ x }</> }
+            } else {
+                html! {
+                    <SplitPanelChild
+                        key={i}
+                        style={self.styles[i].clone()}
+                        ref_={self.refs[i].clone()}
+                    >
+                        { x }
+                    </SplitPanelChild>
+                }
+            });
+
+            prev = Some(i);
+        }
+
         let mut classes = classes!("split-panel");
+        classes.extend(ctx.props().class.clone());
         if orientation == Orientation::Vertical {
             classes.push("orient-vertical");
         }
@@ -195,53 +319,7 @@ impl Component for SplitPanel {
             classes.push("orient-reverse");
         }
 
-        let count = iter.len();
-        let contents = html! {
-            <>
-                for (i, x) in iter {
-                    if i == 0 {
-                        if count == 1 {
-                            <key=0>
-                                {x}
-                            </>
-                        } else {
-                            <SplitPanelChild
-                                key=0
-                                style={self.styles[i].clone()}
-                                ref_={self.refs[i].clone()}
-                            >
-                                { x }
-                            </SplitPanelChild>
-                        }
-                    } else if i == count - 1 {
-                        <key={i}>
-                            <SplitPanelDivider
-                                i={i - 1}
-                                orientation={ctx.props().orientation}
-                                link={ctx.link().clone()}
-                            />
-                            { x }
-                        </>
-                    } else {
-                        <key={i}>
-                            <SplitPanelDivider
-                                i={i - 1}
-                                orientation={ctx.props().orientation}
-                                link={ctx.link().clone()}
-                            />
-                            <SplitPanelChild
-                                style={self.styles[i].clone()}
-                                ref_={self.refs[i].clone()}
-                            >
-                                { x }
-                            </SplitPanelChild>
-                        </>
-                    }
-                }
-            </>
-        };
-
-        // TODO consider removing this
+        let contents = html! { <>{ for nodes.into_iter() }</> };
         if ctx.props().no_wrap {
             html! { { contents } }
         } else {
@@ -490,3 +568,44 @@ impl ResizingState {
         Ok(self.body_style.set_property("cursor", &self.cursor)?)
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn html_if_empty_branch_is_not_literally_empty() {
+        let via_if: Html = html! { if false { <div /> } else { <></> } };
+        assert_ne!(via_if, html! { <></> });
+    }
+
+    #[test]
+    fn empty_fragment_is_empty() {
+        assert!(is_empty_html(&html! { <></> }));
+    }
+
+    #[test]
+    fn html_if_empty_branch_is_semantically_empty() {
+        assert!(is_empty_html(&html! { if false { <div/> } else { <></> } }));
+    }
+
+    #[test]
+    fn nested_empty_fragments_are_empty() {
+        assert!(is_empty_html(&html! { <><><></></></> }));
+    }
+
+    #[test]
+    fn tag_is_not_empty() {
+        assert!(!is_empty_html(&html! { <div/> }));
+    }
+
+    #[test]
+    fn fragment_containing_a_tag_is_not_empty() {
+        assert!(!is_empty_html(&html! { <><div/></> }));
+    }
+
+    #[test]
+    fn text_is_not_empty() {
+        assert!(!is_empty_html(&html! { { "" } }));
+    }
+}

package/src/rust/components/context_menu.rs

@@ -0,0 +1,130 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 web_sys::MouseEvent;
+use yew::prelude::*;
+
+/// A single command row in a [`ContextMenu`].
+#[derive(Clone, PartialEq)]
+pub struct ContextMenuItem {
+    pub label: String,
+    pub on_select: Callback<()>,
+    pub disabled: bool,
+}
+
+/// A row in a [`ContextMenu`]: a plain command [`ContextMenuItem`], a
+/// non-interactive group label, or a row with a hover-opened sub-menu flyout.
+#[derive(Clone, PartialEq)]
+pub enum ContextMenuEntry {
+    Item(ContextMenuItem),
+    Header(String),
+    Submenu {
+        label: String,
+
+        /// Click-through command for the parent row itself (`None` makes the
+        /// row hover-only).
+        on_select: Option<Callback<()>>,
+        entries: Vec<ContextMenuEntry>,
+    },
+}
+
+#[derive(Properties, PartialEq)]
+pub struct ContextMenuProps {
+    pub entries: Vec<ContextMenuEntry>,
+
+    /// Fired after an item is selected. Outside-click dismissal is the
+    /// enclosing `PortalModal`'s job (blur), not this component's.
+    #[prop_or_default]
+    pub on_close: Callback<()>,
+}
+
+/// The command-item list of a panel context menu. Purely presentational — the
+/// command set is supplied by the parent as plain [`Callback`]s, and
+/// positioning/dismissal/theming belong to the enclosing `PortalModal` (the
+/// same body-mounted, `theme`-attributed delivery as the Export/Copy menus).
+/// Sub-menus are CSS-only `:hover` flyouts nested inside their parent row, so
+/// they live inside the same `PortalModal` host (focus never leaves it) and
+/// selection routes through the same `on_select` + `on_close` path.
+pub struct ContextMenu;
+
+impl Component for ContextMenu {
+    type Message = ();
+    type Properties = ContextMenuProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let props = ctx.props();
+        let entries = props
+            .entries
+            .iter()
+            .map(|entry| render_entry(entry, &props.on_close));
+
+        html! { <div class="context-menu">{ for entries }</div> }
+    }
+}
+
+fn render_entry(entry: &ContextMenuEntry, on_close: &Callback<()>) -> Html {
+    match entry {
+        ContextMenuEntry::Item(item) => {
+            let disabled = item.disabled;
+            let onclick = {
+                let on_select = item.on_select.clone();
+                let on_close = on_close.clone();
+                Callback::from(move |e: MouseEvent| {
+                    e.stop_propagation();
+                    if !disabled {
+                        on_select.emit(());
+                        on_close.emit(());
+                    }
+                })
+            };
+
+            let mut class = classes!("context-menu-item");
+            if disabled {
+                class.push("disabled");
+            }
+
+            html! { <span {class} {onclick}>{ item.label.clone() }</span> }
+        },
+        ContextMenuEntry::Header(label) => {
+            html! { <span class="context-menu-header">{ label.clone() }</span> }
+        },
+        ContextMenuEntry::Submenu {
+            label,
+            on_select,
+            entries,
+        } => {
+            let onclick = {
+                let on_select = on_select.clone();
+                let on_close = on_close.clone();
+                Callback::from(move |e: MouseEvent| {
+                    e.stop_propagation();
+                    if let Some(on_select) = &on_select {
+                        on_select.emit(());
+                        on_close.emit(());
+                    }
+                })
+            };
+
+            let children = entries.iter().map(|entry| render_entry(entry, on_close));
+            html! {
+                <span class="context-menu-item has-submenu" {onclick}>
+                    { label.clone() }
+                    <div class="context-menu context-menu-submenu">{ for children }</div>
+                </span>
+            }
+        },
+    }
+}

package/src/rust/components/editable_header.rs

@@ -119,10 +119,12 @@ impl Component for EditableHeader {
                     }
                     let metadata = &ctx.props().metadata;
                     let expressions = metadata.get_expression_columns();
+                    let windows = metadata.get_window_columns();
                     let found = metadata
                         .get_table_columns()?
                         .iter()
                         .chain(expressions)
+                        .chain(windows)
                         .contains(&new_value);
                     Some(!found)
                 })()

package/src/rust/components/form/debug.rs

@@ -240,6 +240,9 @@ impl DebugPanelProps {
                         &props.session,
                         &props.renderer,
                         &props.presentation,
+                        // A user-pasted config apply — an explicit request,
+                        // same affordance as the public `restore()`.
+                        crate::tasks::RunOrigin::Public,
                         config,
                         async { Ok(()) },
                     )