@perspective-dev/viewer 4.5.1 → 5.0.0

package/src/rust/components/status_bar.rs

@@ -10,17 +10,19 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+use perspective_client::config::Filter;
 use wasm_bindgen_futures::spawn_local;
 use web_sys::*;
 use yew::prelude::*;
 
 use super::status_indicator::StatusIndicator;
-use super::style::LocalStyle;
 use crate::components::containers::select::*;
 use crate::components::copy_dropdown::CopyDropDownMenu;
 use crate::components::export_dropdown::ExportDropDownMenu;
+use crate::components::global_filter_bar::GlobalFilterBar;
 use crate::components::portal::PortalModal;
 use crate::components::status_bar_counter::StatusBarRowsCounter;
+use crate::components::style::StyleSurface;
 use crate::config::*;
 use crate::js::*;
 use crate::presentation::{Presentation, PresentationProps};
@@ -28,6 +30,7 @@ use crate::renderer::*;
 use crate::session::*;
 use crate::tasks::*;
 use crate::utils::*;
+use crate::workspace::Workspace;
 use crate::*;
 
 #[derive(Clone, Properties)]
@@ -38,10 +41,6 @@ pub struct StatusBarProps {
     /// Fired when the reset button is clicked.
     pub on_reset: Callback<bool>,
 
-    /// Fires when the settings button is clicked
-    #[prop_or_default]
-    pub on_settings: Option<Callback<()>>,
-
     /// Snapshots threaded from root.  Component reads `has_table`, `stats`,
     /// `error`, `title` from session_props; `selected_theme`,
     /// `available_themes`, `is_workspace` from presentation_props.
@@ -56,10 +55,25 @@ pub struct StatusBarProps {
     /// In-flight render counter, threaded to `StatusIndicator`.
     pub update_count: u32,
 
+    /// Element-level global filters (fed by master/detail selection); rendered
+    /// as removable chips between the row stats and the menu icons.
+    pub global_filters: Vec<Filter>,
+
+    /// Remove the global filter at this index (a chip's ×).
+    pub on_remove_global_filter: Callback<usize>,
+
+    /// Clear all global filters (the "Clear" affordance).
+    pub on_clear_global_filters: Callback<()>,
+
     // State
     pub session: Session,
     pub renderer: Renderer,
     pub presentation: Presentation,
+
+    /// The multi-panel model, so a theme change can restyle EVERY panel (not
+    /// just the active one this status bar targets) — non-active panels that
+    /// inherit the host theme otherwise render stale CSS until they redraw.
+    pub workspace: Workspace,
 }
 
 impl PartialEq for StatusBarProps {
@@ -69,6 +83,7 @@ impl PartialEq for StatusBarProps {
             && self.presentation_props == other.presentation_props
             && self.is_settings_open == other.is_settings_open
             && self.update_count == other.update_count
+            && self.global_filters == other.global_filters
     }
 }
 
@@ -78,25 +93,17 @@ pub enum StatusBarMsg {
     Copy,
     CloseExport,
     CloseCopy,
-    Noop,
     Eject,
     SetTheme(String),
     ResetTheme,
     PointerEvent(web_sys::PointerEvent),
-    TitleInputEvent,
-    TitleChangeEvent,
 }
 
 /// A toolbar with buttons, and `Table` & `View` status information.
 pub struct StatusBar {
     copy_ref: NodeRef,
     export_ref: NodeRef,
-    input_ref: NodeRef,
     statusbar_ref: NodeRef,
-    /// Local title tracks the live `<input>` value before the user commits the
-    /// change (blur / Enter).  Reset to the prop value whenever the prop
-    /// changes.
-    title: Option<String>,
     copy_target: Option<HtmlElement>,
     export_target: Option<HtmlElement>,
 }
@@ -105,127 +112,76 @@ impl Component for StatusBar {
     type Message = StatusBarMsg;
     type Properties = StatusBarProps;
 
-    fn create(ctx: &Context<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         Self {
             copy_ref: NodeRef::default(),
             export_ref: NodeRef::default(),
-            input_ref: NodeRef::default(),
             statusbar_ref: NodeRef::default(),
-            title: ctx.props().session_props.title.clone(),
             copy_target: None,
             export_target: None,
         }
     }
 
-    fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
-        // Keep the local title in sync with the prop whenever the session title
-        // changes externally (e.g. restore() call) or the settings panel opens /
-        // closes (which resets the input element).
-        if ctx.props().session_props.title != old_props.session_props.title
-            || ctx.props().is_settings_open != old_props.is_settings_open
-        {
-            self.title = ctx.props().session_props.title.clone();
-        }
-        true
-    }
-
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
-        let r: ApiResult<bool> = (|| {
-            Ok(match msg {
-                StatusBarMsg::Reset(event) => {
-                    let all = event.shift_key();
-                    ctx.props().on_reset.emit(all);
-                    false
-                },
-                StatusBarMsg::ResetTheme => {
-                    update_theme(
-                        &ctx.props().session,
-                        &ctx.props().renderer,
-                        &ctx.props().presentation,
-                        None,
-                    );
-                    true
-                },
-                StatusBarMsg::SetTheme(theme_name) => {
-                    update_theme(
-                        &ctx.props().session,
-                        &ctx.props().renderer,
-                        &ctx.props().presentation,
-                        Some(theme_name),
-                    );
-                    false
-                },
-                StatusBarMsg::Export => {
-                    self.export_target = self.export_ref.cast::<HtmlElement>();
-                    true
-                },
-                StatusBarMsg::Copy => {
-                    self.copy_target = self.copy_ref.cast::<HtmlElement>();
-                    true
-                },
-                StatusBarMsg::CloseExport => {
-                    self.export_target = None;
-                    true
-                },
-                StatusBarMsg::CloseCopy => {
-                    self.copy_target = None;
-                    true
-                },
-                StatusBarMsg::Eject => {
-                    ctx.props().presentation.on_eject.emit(());
-                    false
-                },
-                StatusBarMsg::Noop => {
-                    self.title = ctx.props().session_props.title.clone();
-                    true
-                },
-                StatusBarMsg::TitleInputEvent => {
-                    let elem = self.input_ref.cast::<HtmlInputElement>().into_apierror()?;
-                    let title = elem.value();
-                    let title = if title.trim().is_empty() {
-                        None
-                    } else {
-                        Some(title)
-                    };
-
-                    self.title = title;
-                    true
-                },
-                StatusBarMsg::TitleChangeEvent => {
-                    let elem = self.input_ref.cast::<HtmlInputElement>().into_apierror()?;
-                    let title = elem.value();
-                    let title = if title.trim().is_empty() {
-                        None
-                    } else {
-                        Some(title)
-                    };
-
-                    ctx.props().session.set_title(title);
-                    false
-                },
-                StatusBarMsg::PointerEvent(event) => {
-                    if event.target().map(JsValue::from)
-                        == self.statusbar_ref.cast::<HtmlElement>().map(JsValue::from)
-                    {
-                        ctx.props().presentation.statusbar_pointer_event.emit(event);
-                    }
+        match msg {
+            StatusBarMsg::Reset(event) => {
+                let all = event.shift_key();
+                ctx.props().on_reset.emit(all);
+                false
+            },
+            StatusBarMsg::ResetTheme => {
+                update_theme(
+                    &ctx.props().renderer,
+                    &ctx.props().presentation,
+                    &ctx.props().workspace,
+                    None,
+                );
+                true
+            },
+            StatusBarMsg::SetTheme(theme_name) => {
+                update_theme(
+                    &ctx.props().renderer,
+                    &ctx.props().presentation,
+                    &ctx.props().workspace,
+                    Some(theme_name),
+                );
+                false
+            },
+            StatusBarMsg::Export => {
+                self.export_target = self.export_ref.cast::<HtmlElement>();
+                true
+            },
+            StatusBarMsg::Copy => {
+                self.copy_target = self.copy_ref.cast::<HtmlElement>();
+                true
+            },
+            StatusBarMsg::CloseExport => {
+                self.export_target = None;
+                true
+            },
+            StatusBarMsg::CloseCopy => {
+                self.copy_target = None;
+                true
+            },
+            StatusBarMsg::Eject => {
+                ctx.props().presentation.on_eject.emit(());
+                false
+            },
+            StatusBarMsg::PointerEvent(event) => {
+                if event.target().map(JsValue::from)
+                    == self.statusbar_ref.cast::<HtmlElement>().map(JsValue::from)
+                {
+                    ctx.props().presentation.statusbar_pointer_event.emit(event);
+                }
 
-                    false
-                },
-            })
-        })();
-        r.unwrap_or_else(|e| {
-            web_sys::console::warn_1(&e.into());
-            Default::default()
-        })
+                false
+            },
+        }
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
         let Self::Properties {
-            presentation,
-            renderer,
-            session,
-            ..
+            renderer, session, ..
         } = ctx.props();
 
         let has_table = ctx.props().session_props.has_table.clone();
@@ -234,12 +190,8 @@ impl Component for StatusBar {
         let title = &ctx.props().session_props.title;
 
         let mut is_updating_class_name = classes!();
-        if title.is_some() {
-            is_updating_class_name.push("titled");
-        };
-
         if !is_settings_open {
-            is_updating_class_name.push(["settings-closed", "titled"]);
+            is_updating_class_name.push("settings-closed");
         };
 
         if !matches!(has_table, Some(TableLoadState::Loaded)) {
@@ -247,34 +199,31 @@ impl Component for StatusBar {
         }
 
         // TODO Memoizing these would reduce some vdom diffing later on
-        let onblur = ctx.link().callback(|_| StatusBarMsg::Noop);
         let onclose = ctx.link().callback(|_| StatusBarMsg::Eject);
         let onpointerdown = ctx.link().callback(StatusBarMsg::PointerEvent);
         let onexport = ctx.link().callback(|_: MouseEvent| StatusBarMsg::Export);
         let oncopy = ctx.link().callback(|_: MouseEvent| StatusBarMsg::Copy);
         let onreset = ctx.link().callback(StatusBarMsg::Reset);
-        let onchange = ctx
-            .link()
-            .callback(|_: Event| StatusBarMsg::TitleChangeEvent);
-
-        let oninput = ctx
-            .link()
-            .callback(|_: InputEvent| StatusBarMsg::TitleInputEvent);
-
-        let is_menu = matches!(has_table, Some(TableLoadState::Loaded))
-            && ctx.props().on_settings.as_ref().is_none();
-        let is_title = is_menu
-            || ctx.props().presentation_props.is_workspace
-            || title.is_some()
-            || is_errored
-            || presentation.is_active(&self.input_ref.cast::<Element>());
-
-        let is_settings = title.is_some()
-            || ctx.props().presentation_props.is_workspace
-            || !matches!(has_table, Some(TableLoadState::Loaded))
-            || is_errored
-            || is_settings_open
-            || presentation.is_active(&self.input_ref.cast::<Element>());
+
+        // Project only the *active* panel's plugin toolbar into the shared status
+        // bar. Each panel's toolbar slots into `statusbar-extra-{its-panel-id}`
+        // (see datagrid `toolbar.ts`); the active panel's id comes from the
+        // active renderer this status bar is bound to.
+        let extra_slot = ctx
+            .props()
+            .renderer
+            .slot_name()
+            .map(|id| format!("statusbar-extra-{id}"))
+            .unwrap_or_else(|| "statusbar-extra".to_owned());
+        let is_menu = matches!(has_table, Some(TableLoadState::Loaded)) && is_settings_open;
+        // The editable title moved to the per-panel `<PanelTab>` headers; the
+        // status bar no longer hosts an `<input>`, so its `is_active` factor is
+        // gone. `is_title` now only gates the row counter.
+        let is_title =
+            is_menu || ctx.props().presentation_props.is_workspace || title.is_some() || is_errored;
+
+        let is_settings =
+            !matches!(has_table, Some(TableLoadState::Loaded)) || is_errored || is_settings_open;
 
         let on_copy_select = {
             let props = ctx.props().clone();
@@ -332,7 +281,6 @@ impl Component for StatusBar {
         if is_settings {
             html! {
                 <>
-                    <LocalStyle href={css!("status-bar")} />
                     <div
                         ref={&self.statusbar_ref}
                         id={ctx.props().id.clone()}
@@ -345,26 +293,18 @@ impl Component for StatusBar {
                             update_count={ctx.props().update_count}
                             session_props={ctx.props().session_props.clone()}
                         />
-                        if is_title {
-                            <label
-                                class="input-sizer"
-                                data-value={self.title.clone().unwrap_or_default()}
-                            >
-                                <input
-                                    ref={&self.input_ref}
-                                    placeholder=""
-                                    value={self.title.clone().unwrap_or_default()}
-                                    size="10"
-                                    {onblur}
-                                    {onchange}
-                                    {oninput}
-                                />
-                                <span id="status-bar-placeholder" />
-                            </label>
-                        }
                         if is_title {
                             <StatusBarRowsCounter stats={ctx.props().session_props.stats.clone()} />
                         }
+                        // Global-filter chips sit between the row stats and the
+                        // menu icons (rendered only when there are filters).
+                        if !ctx.props().global_filters.is_empty() {
+                            <GlobalFilterBar
+                                filters={ctx.props().global_filters.clone()}
+                                on_remove={ctx.props().on_remove_global_filter.clone()}
+                                on_clear={ctx.props().on_clear_global_filters.clone()}
+                            />
+                        }
                         <div id="spacer" />
                         if is_menu {
                             <div id="menu-bar" class="section">
@@ -374,7 +314,7 @@ impl Component for StatusBar {
                                     on_change={ctx.link().callback(StatusBarMsg::SetTheme)}
                                     on_reset={ctx.link().callback(|_| StatusBarMsg::ResetTheme)}
                                 />
-                                <div id="plugin-settings"><slot name="statusbar-extra" /></div>
+                                <div id="plugin-settings"><slot name={extra_slot} /></div>
                                 <span class="hover-target">
                                     <span id="reset" class="button" onmousedown={&onreset}>
                                         <span class="icon shift-alt-icon" />
@@ -403,14 +343,7 @@ impl Component for StatusBar {
                                 </span>
                             </div>
                         }
-                        if let Some(x) = ctx.props().on_settings.as_ref() {
-                            <div
-                                id="settings_button"
-                                class="noselect"
-                                onmousedown={x.reform(|_| ())}
-                            >
-                                <span class="icon" />
-                            </div>
+                        if !is_settings_open {
                             <div id="close_button" class="noselect" onmousedown={onclose}>
                                 <span class="icon" />
                             </div>
@@ -418,6 +351,7 @@ impl Component for StatusBar {
                     </div>
                     <PortalModal
                         tag_name="perspective-copy-menu"
+                        surface={StyleSurface::DropdownMenu}
                         target={self.copy_target.clone()}
                         own_focus=true
                         on_close={on_close_copy}
@@ -427,6 +361,7 @@ impl Component for StatusBar {
                     </PortalModal>
                     <PortalModal
                         tag_name="perspective-export-menu"
+                        surface={StyleSurface::DropdownMenu}
                         target={self.export_target.clone()}
                         own_focus=true
                         on_close={on_close_export}
@@ -440,18 +375,16 @@ impl Component for StatusBar {
                     </PortalModal>
                 </>
             }
-        } else if let Some(x) = ctx.props().on_settings.as_ref() {
+        } else {
+            // Settings closed + loaded: no docked status bar. The open-settings
+            // affordance lives on the `PanelTab`s; only the (default-hidden)
+            // eject button floats here.
             let class = classes!(is_updating_class_name, "floating");
             html! {
                 <div id={ctx.props().id.clone()} {class}>
-                    <div id="settings_button" class="noselect" onmousedown={x.reform(|_| ())}>
-                        <span class="icon" />
-                    </div>
                     <div id="close_button" class="noselect" onmousedown={&onclose} />
                 </div>
             }
-        } else {
-            html! {}
         }
     }
 }

package/src/rust/components/status_indicator.rs

@@ -17,18 +17,20 @@ use yew::prelude::*;
 
 use crate::renderer::Renderer;
 use crate::session::{Session, SessionProps, TableLoadState};
+use crate::tasks::apply_and_render;
 use crate::utils::*;
 
 /// Value-prop version: no PubSub subscriptions, no reducer.
 /// The parent (`StatusBar`) re-renders this component whenever
 /// `session_props.error/has_table/stats` or `update_count` change (via
-/// root's `IncrementUpdateCount` / `DecrementUpdateCount` / `UpdateSession`
-/// messages).
+/// root's `UpdateInFlight` / `UpdateSession` messages).
 #[derive(PartialEq, Properties)]
 pub struct StatusIndicatorProps {
     pub renderer: Renderer,
     pub session: Session,
-    /// Number of in-flight renders (>0 → "updating" spinner).
+    /// Number of in-flight CONFIG-DRIVEN runs (>0 → "updating" spinner) —
+    /// a level-triggered snapshot of `Session::in_flight_config_runs`
+    /// (RAII-settled; see `UPDATE_COUNT_REGRESSION_PLAN.md`).
     pub update_count: u32,
     /// Snapshot of session value props — read for `error`, `has_table`,
     /// `stats` to derive the icon state.
@@ -81,12 +83,7 @@ pub fn StatusIndicator(props: &StatusIndicatorProps) -> Html {
             match &state {
                 StatusIconState::Errored(..) => {
                     session.reconnect().await?;
-                    let cfg = ViewConfigUpdate::default();
-                    session.update_view_config(cfg)?;
-                    renderer.apply_pending_plugin()?;
-                    renderer
-                        .draw(session.validate().await?.create_view())
-                        .await?;
+                    apply_and_render(session, renderer, ViewConfigUpdate::default())?.await?;
                 },
                 StatusIconState::Normal => {
                     session.status_indicator_clicked.emit(());

package/src/rust/components/string_column_style.rs

@@ -13,10 +13,8 @@
 use yew::prelude::*;
 
 use super::modal::{ModalLink, SetModalLink};
-use super::style::LocalStyle;
 use crate::components::form::select_enum_field::SelectEnumField;
 use crate::config::*;
-use crate::css;
 use crate::utils::WeakScope;
 
 /// Format-only widget for [`String`] columns. Renders the `format` enum
@@ -91,7 +89,6 @@ impl Component for StringColumnStyle {
         let format_mode_changed = ctx.link().callback(StringColumnStyleMsg::FormatChanged);
         html! {
             <>
-                <LocalStyle href={css!("column-style")} />
                 <div id="column-style-container" class="string-column-style-container">
                     <SelectEnumField<FormatMode>
                         label="format"

package/src/rust/components/style/mod.rs

@@ -10,43 +10,81 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-//! A micro-framework for associating local CSS snippets with `yew::Component`s
-//! in a Custom Element's `ShadowRoot`.
+//! Associates a single, build-time CSS bundle with a `yew::Component` tree
+//! rendered into a Custom Element's `ShadowRoot`.
 //!
-//! Embedding a `<LocalStyle>` element will only create the underlying `<style>`
-//! tag once (when `Component::view()` is called the first time), even if
-//! multiple copies of the `Component` exist in the tree.
+//! Each `src/css` file is inlined and minified by `lightningcss` (see
+//! `build.rs` + the `_viewer_bundle.css` and per-popup `_column_dropdown.css`
+//! / `_filter_dropdown.css` / `_function_dropdown.css` / `_dropdown_menu.css`
+//! entrypoints) into one stylesheet per "surface". A `<StyleProvider>` at the
+//! root of a shadow tree adopts its surface's stylesheet exactly once;
+//! constructed `CSSStyleSheet`s are cheap and shared across every viewer
+//! instance.
 //!
 //! # Example
 //!
-//! ```
+//! ```ignore
 //! html! {
-//!     <StyleProvider>
-//!         <LocalStyle href={ css!("my-style") } />
+//!     <StyleProvider root={host} surface={StyleSurface::Viewer}>
 //!         <h1>{ "I am styled!" }</h1>
 //!     </StyleProvider>
 //! }
 //! ```
 
-mod local_style;
-mod style_cache;
 mod style_provider;
 
-pub use local_style::LocalStyle;
-pub use style_provider::StyleProvider;
-
-#[macro_export]
-macro_rules! css {
-    ($name:expr) => {{
-        (
-            $name,
-            include_str!(concat!(env!("OUT_DIR"), "/css/", $name, ".css")),
-        )
-    }};
-    ($path:expr, $name:expr) => {{
-        (
-            $name,
-            include_str!(concat!(env!("OUT_DIR"), "/", $path, "/", $name, ".css")),
-        )
-    }};
+pub use style_provider::{StyleProvider, StyleSurface};
+
+/// The viewer-surface bundle: every `src/css` file except the floating-popup
+/// sheets. Adopted into the `<perspective-viewer>` ShadowRoot.
+fn viewer_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_viewer_bundle.css"))
+}
+
+/// Per-popup-surface bundles. Each floating popup root adopts exactly its own
+/// self-contained sheet (mirroring the pre-bundle behavior where every popup
+/// instance carried only its own CSS) so the four popup styles never collide —
+/// in particular `column-dropdown.css`'s `!important` inverted rules stay
+/// confined to the column-name completion dropdown.
+fn column_dropdown_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_column_dropdown.css"))
+}
+fn filter_dropdown_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_filter_dropdown.css"))
+}
+fn function_dropdown_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_function_dropdown.css"))
+}
+fn dropdown_menu_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_dropdown_menu.css"))
+}
+fn context_menu_bundle() -> &'static str {
+    include_str!(concat!(env!("OUT_DIR"), "/css/_context_menu.css"))
+}
+
+thread_local! {
+    static VIEWER_SHEET: web_sys::CssStyleSheet = make_sheet(viewer_bundle());
+    static COLUMN_DROPDOWN_SHEET: web_sys::CssStyleSheet = make_sheet(column_dropdown_bundle());
+    static FILTER_DROPDOWN_SHEET: web_sys::CssStyleSheet = make_sheet(filter_dropdown_bundle());
+    static FUNCTION_DROPDOWN_SHEET: web_sys::CssStyleSheet = make_sheet(function_dropdown_bundle());
+    static DROPDOWN_MENU_SHEET: web_sys::CssStyleSheet = make_sheet(dropdown_menu_bundle());
+    static CONTEXT_MENU_SHEET: web_sys::CssStyleSheet = make_sheet(context_menu_bundle());
+}
+
+fn make_sheet(css: &str) -> web_sys::CssStyleSheet {
+    let sheet = web_sys::CssStyleSheet::new().unwrap();
+    sheet.replace_sync(css).unwrap();
+    sheet
+}
+
+/// The memoized, shared `CSSStyleSheet` for a given [`StyleSurface`].
+pub(crate) fn surface_sheet(surface: StyleSurface) -> web_sys::CssStyleSheet {
+    match surface {
+        StyleSurface::Viewer => VIEWER_SHEET.with(|x| x.clone()),
+        StyleSurface::ColumnDropdown => COLUMN_DROPDOWN_SHEET.with(|x| x.clone()),
+        StyleSurface::FilterDropdown => FILTER_DROPDOWN_SHEET.with(|x| x.clone()),
+        StyleSurface::FunctionDropdown => FUNCTION_DROPDOWN_SHEET.with(|x| x.clone()),
+        StyleSurface::DropdownMenu => DROPDOWN_MENU_SHEET.with(|x| x.clone()),
+        StyleSurface::ContextMenu => CONTEXT_MENU_SHEET.with(|x| x.clone()),
+    }
 }