@perspective-dev/viewer 4.5.1 → 5.0.0

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

@@ -19,9 +19,6 @@ use web_sys::HtmlElement;
 use yew::html::Scope;
 use yew::prelude::*;
 
-use crate::components::style::LocalStyle;
-use crate::css;
-
 #[derive(Properties, Default)]
 pub struct SplitPanelProps {
     pub children: Children,
@@ -32,8 +29,10 @@ pub struct SplitPanelProps {
     #[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,
 
@@ -56,6 +55,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 {
@@ -70,6 +113,8 @@ impl PartialEq for SplitPanelProps {
             && self.children == other.children
             && self.orientation == other.orientation
             && self.reverse == other.reverse
+            && self.size == other.size
+            && self.deferred == other.deferred
     }
 }
 
@@ -114,15 +159,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 {
@@ -158,7 +196,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);
+                    }
                 }
             },
         };
@@ -176,19 +219,91 @@ 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");
         if orientation == Orientation::Vertical {
             classes.push("orient-vertical");
@@ -198,54 +313,7 @@ impl Component for SplitPanel {
             classes.push("orient-reverse");
         }
 
-        let count = iter.len();
-        let contents = html! {
-            <>
-                <LocalStyle href={css!("containers/split-panel")} />
-                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 {
@@ -494,3 +562,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/containers/tab_list.rs

@@ -12,8 +12,6 @@
 
 use yew::{Callback, Children, Component, Html, Properties, classes, html};
 
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::presentation::ColumnTab;
 
 #[derive(Properties, Debug, PartialEq)]
@@ -87,7 +85,6 @@ impl<T: ColumnTab> Component for TabList<T> {
 
         html! {
             <>
-                <LocalStyle href={css!("containers/tabs")} />
                 <div id="settings_tab_bar">{ for gutter_tabs }</div>
                 <div id="format-tab" class="tab-content scrollable">
                     { ctx.props().children.iter().nth(self.selected_idx) }

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/datetime_column_style.rs

@@ -23,12 +23,10 @@ use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
 use super::modal::{ModalLink, SetModalLink};
-use super::style::LocalStyle;
 use crate::components::datetime_column_style::custom::DatetimeStyleCustom;
 use crate::components::datetime_column_style::simple::DatetimeStyleSimple;
 use crate::components::form::select_value_field::SelectValueField;
 use crate::config::*;
-use crate::css;
 use crate::utils::WeakScope;
 
 /// Format-only widget for `datetime` columns. Renders the `date_format`
@@ -126,7 +124,6 @@ impl Component for DatetimeColumnStyle {
     fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <>
-                <LocalStyle href={css!("column-style")} />
                 <div id="column-style-container" class="datetime-column-style-container">
                     if ctx.props().enable_time_config {
                         <SelectValueField<String>

package/src/rust/components/empty_row.rs

@@ -20,8 +20,6 @@ use web_sys::*;
 use yew::prelude::*;
 
 use crate::components::filter_dropdown::FilterDropDownElement;
-use crate::components::style::LocalStyle;
-use crate::css;
 
 #[derive(Properties, Derivative)]
 #[derivative(Debug)]
@@ -87,7 +85,6 @@ impl Component for EmptyRow {
 
         html! {
             <div class="pivot-column column-empty">
-                <LocalStyle href={css!("empty-column")} />
                 <input
                     spellcheck="false"
                     ref={self.input_ref.clone()}

package/src/rust/components/expression_editor.rs

@@ -16,10 +16,8 @@ use perspective_client::{ExprValidationError, clone};
 use yew::prelude::*;
 
 use super::form::code_editor::*;
-use super::style::LocalStyle;
 use crate::session::{Session, SessionMetadata, SessionMetadataRc};
 use crate::tasks::{ExprValidation, validate_expression};
-use crate::*;
 
 #[derive(Properties, PartialEq, Clone)]
 pub struct ExpressionEditorProps {
@@ -54,10 +52,12 @@ pub struct ExpressionEditor {
     expr: Rc<String>,
     error: Option<ExprValidationError>,
     oninput: Callback<Rc<String>>,
+
     /// Monotonically increasing request id used to drop stale
     /// validation results when the user types faster than the engine
     /// can validate.
     validation_req_id: u64,
+
     /// The id of the most recently dispatched validation; the result
     /// is only applied when its echoed id matches.
     last_dispatched_req_id: u64,
@@ -131,7 +131,6 @@ impl Component for ExpressionEditor {
         clone!(ctx.props().disabled);
         html! {
             <>
-                <LocalStyle href={css!("expression-editor")} />
                 <label class="item_title">{ "Expression" }</label>
                 <div id="editor-container" class={disabled_class}>
                     <CodeEditor

package/src/rust/components/filter_dropdown.rs

@@ -20,12 +20,11 @@ use yew::html::ImplicitClone;
 use yew::prelude::*;
 
 use super::portal::PortalModal;
+use super::style::StyleSurface;
 use crate::session::Session;
 use crate::utils::*;
 use crate::*;
 
-static CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/css/filter-dropdown.css"));
-
 #[derive(Default)]
 struct FilterDropDownState {
     values: Vec<String>,
@@ -220,6 +219,7 @@ impl Component for FilterDropDownPortal {
             html! {
                 <PortalModal
                     tag_name="perspective-dropdown"
+                    surface={StyleSurface::FilterDropdown}
                     {target}
                     own_focus=false
                     {on_close}
@@ -267,7 +267,7 @@ fn FilterDropDownView(props: &FilterDropDownViewProps) -> Html {
         }
     };
 
-    html! { <><style>{ CSS }</style>{ body }</> }
+    html! { <>{ body }</> }
 }
 
 fn filter_values(

package/src/rust/components/font_loader.rs

@@ -154,12 +154,12 @@ impl FontLoaderProps {
                 }
             }
 
-            let fut = async { select_all(block_fonts.into_iter()).await.0 };
+            let fut = async { select_all(block_fonts).await.0 };
             block_promises.push(ApiFuture::new(fut))
         }
 
         if block_promises.len() != preload_fonts.len() {
-            web_sys::console::warn_1(&format!("Missing preload fonts {:?}", &preload_fonts).into());
+            web_sys::console::warn_1(&format!("Missing preload fonts {:?}", preload_fonts).into());
         }
 
         let res = join_all(block_promises)

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

@@ -19,8 +19,6 @@ use yew::prelude::*;
 
 use crate::components::form::highlight::highlight;
 use crate::components::function_dropdown::{FunctionDropDownElement, FunctionDropDownPortal};
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::exprtk::{Cursor, tokenize};
 use crate::utils::*;
 
@@ -174,7 +172,6 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
     clone!(props.disabled);
     html! {
         <>
-            <LocalStyle href={css!("form/code-editor")} />
             <div id="editor" {class}>
                 <div id="line_numbers" ref={lineno_ref}>{ line_numbers }</div>
                 <div id="editor-inner" {class}>

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

@@ -18,8 +18,6 @@ use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
 use crate::components::form::code_editor::CodeEditor;
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::js::{MimeType, copy_to_clipboard, paste_from_clipboard};
 use crate::presentation::*;
 use crate::renderer::*;
@@ -166,8 +164,6 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
 
     html! {
         <>
-            <LocalStyle href={css!("containers/tabs")} />
-            <LocalStyle href={css!("form/debug")} />
             <div id="debug-panel-overflow">
                 <div id="debug-panel" class="sidebar_column" ref={sizer}>
                     <div id="debug-panel-controls">
@@ -244,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(()) },
                     )

package/src/rust/components/function_dropdown.rs

@@ -20,10 +20,9 @@ use yew::html::ImplicitClone;
 use yew::prelude::*;
 
 use super::portal::PortalModal;
+use super::style::StyleSurface;
 use crate::utils::*;
 
-static CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/css/function-dropdown.css"));
-
 #[derive(Default)]
 struct FunctionDropDownState {
     values: Vec<CompletionItemSuggestion>,
@@ -158,6 +157,7 @@ impl Component for FunctionDropDownPortal {
             html! {
                 <PortalModal
                     tag_name="perspective-dropdown"
+                    surface={StyleSurface::FunctionDropdown}
                     {target}
                     own_focus=false
                     {on_close}
@@ -211,7 +211,7 @@ fn FunctionDropDownView(props: &FunctionDropDownViewProps) -> Html {
         }
     };
 
-    html! { <><style>{ CSS }</style>{ body }</> }
+    html! { <>{ body }</> }
 }
 
 fn filter_values(input: &str) -> Vec<CompletionItemSuggestion> {