@perspective-dev/viewer 4.5.1 → 5.0.0

package/src/css/status-bar.css

@@ -19,15 +19,8 @@
 }
 
 :host {
-    /* When settings open ... */
-    #main_column #status_bar,
-    #main_column #status_bar.titled {
-        input::placeholder {
-            color: var(--psp-inactive--color);
-        }
-    }
-
     #status_bar.settings-closed {
+        box-shadow: none;
         padding-right: 10px;
     }
 
@@ -43,86 +36,25 @@
         height: auto;
         min-height: auto;
         max-height: none;
-        gap: 6px;
-        top: calc((var(--psp-status-bar--height, 48px) - 20px) / 2);
+        top: calc((var(--psp-status-bar--height, 38px) - 20px) / 2);
         right: calc(
-            min(48px, (var(--psp-status-bar--height, 48px) - 20px) / 2)
+            min(48px, (var(--psp-status-bar--height, 38px) - 20px) / 2)
         );
     }
 
     #status_bar {
-        box-shadow: 0 13px 0 -12px var(--psp-inactive--border-color);
-        z-index: 3;
+        box-shadow: 0 1px 0 0px var(--psp-inactive--color);
+        z-index: 6;
         display: var(--psp-status-bar--display, flex);
-        gap: 6px;
+        gap: 4px;
         align-items: center;
         background: var(--psp--background-color);
-        padding: var(--psp-status-bar--padding, 0 31px 0 8px);
+        padding: var(--psp-status-bar--padding, 0 31px 0 4px);
         position: relative;
-        height: var(--psp-status-bar--height, 48px);
-        min-height: var(--psp-status-bar--height, 48px);
-        max-height: var(--psp-status-bar--height, 48px);
+        height: var(--psp-status-bar--height, 38px);
+        min-height: var(--psp-status-bar--height, 38px);
+        max-height: var(--psp-status-bar--height, 38px);
         border-radius: var(--psp-status-bar--border-radius);
-        #status-bar-placeholder {
-            margin: 0px;
-            margin-right: -5px;
-            pointer-events: none;
-        }
-
-        input {
-            font-size: 1em;
-        }
-
-        input:placeholder-shown + #status-bar-placeholder:before {
-            content: var(--psp-label--untitled--content, "untitled");
-            color: var(--psp-inactive--color);
-        }
-
-        .input-sizer {
-            display: inline-block;
-            align-items: center;
-            position: relative;
-            min-width: 65px;
-            overflow: hidden;
-            padding-top: 0.5px;
-
-            &:after,
-            input,
-            textarea {
-                width: auto;
-                grid-area: 1 / 1;
-                font-family: inherit;
-            }
-
-            input,
-            textarea {
-                position: absolute;
-                left: 0;
-                right: 0;
-                text-overflow: ellipsis;
-                padding: 0;
-                border: none;
-                background: transparent;
-                color: inherit;
-                height: 100%;
-            }
-
-            &:after {
-                content: attr(data-value) " ";
-                color: var(--psp-inactive--color, inherit);
-                visibility: hidden;
-                white-space: nowrap;
-                padding-right: 12px;
-            }
-
-            &:focus-within {
-                textarea:focus,
-                input:focus {
-                    outline: none;
-                }
-            }
-        }
-
         .section {
             display: flex;
             align-items: center;
@@ -143,7 +75,7 @@
             gap: 6px;
             flex: 0 1000 auto;
             overflow: hidden;
-            margin: 0px 10px;
+            margin: 0px 0px;
             pointer-events: none;
             span {
                 margin: 0 !important;
@@ -166,6 +98,68 @@
             align-self: stretch;
         }
 
+        /* Global-filter chips, rendered inline between the row stats and the
+           menu icons (was a dedicated strip above the panels). Shrinks/clips
+           rather than growing the fixed-height bar. */
+        #global_filter_bar {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            flex: 0 1 auto;
+            min-width: 0;
+            overflow: hidden;
+            font-size: 11px;
+
+            /* Beat the status bar's generic `span { margin: 0 14px }`. */
+            span {
+                margin: 0;
+            }
+
+            .global-filter-bar-label {
+                opacity: 0.6;
+                pointer-events: none;
+            }
+
+            .global-filter-bar-chips {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                min-width: 0;
+                overflow: hidden;
+            }
+
+            .global-filter-chip {
+                display: inline-flex;
+                align-items: center;
+                gap: 4px;
+                padding: 1px 4px 1px 6px;
+                background: var(--psp--background-color, #ffffff);
+                border: 1px solid var(--psp-inactive--color, #c8ccd0);
+                border-radius: 3px;
+                white-space: nowrap;
+            }
+
+            .global-filter-chip-remove {
+                cursor: pointer;
+                opacity: 0.5;
+                font-size: 13px;
+                line-height: 1;
+            }
+
+            .global-filter-chip-remove:hover {
+                opacity: 1;
+            }
+
+            .global-filter-bar-clear {
+                cursor: pointer;
+                opacity: 0.6;
+            }
+
+            .global-filter-bar-clear:hover {
+                opacity: 1;
+            }
+        }
+
         span {
             white-space: nowrap;
             margin: 0px 14px;
@@ -243,8 +237,8 @@
             align-items: center;
             display: flex;
             padding-right: 17px;
-            height: var(--psp-status-bar--height, 48px);
-            min-height: var(--psp-status-bar--height, 48px);
+            height: var(--psp-status-bar--height, 38px);
+            min-height: var(--psp-status-bar--height, 38px);
         }
 
         .error-dialog-stack {

package/src/css/viewer.css

@@ -16,10 +16,6 @@
     --psp--color: #ff0000;
 }
 
-/* Shift-key affordance: while the user holds Shift, any mask-image icon
- * tagged `.shift-alt-icon` recolors to advertise that a Shift-modified
- * action is available on the underlying control. `!important` is required
- * to beat per-icon ID-scoped `background-color` rules. */
 :host(.shift-active) .shift-alt-icon {
     background-color: var(
         --shift-active--color,
@@ -93,9 +89,45 @@
     pointer-events: var(--override-content-pointer-events);
 }
 
+::slotted(:not([slot^="statusbar-extra"]):not([slot^="tab-"])) {
+    position: absolute;
+    inset: 0;
+    background-color: var(--psp--background-color) !important;
+    box-shadow:
+        2.25px 2.25px 0 2.25px var(--psp--background-color),
+        /* down-right */ -2.25px 2.25px 0 2.25px var(--psp--background-color),
+        /* down-left */ 2.75px 2.75px 0 2.75px var(--psp-inactive--color),
+        -1.75px 2.75px 0 2.75px var(--psp-inactive--color);
+}
+
+.overlay ::slotted(:not([slot^="statusbar-extra"]):not([slot^="tab-"])) {
+    box-shadow:
+        2.25px 2.25px 0 2.25px var(--psp--background-color),
+        -2.25px 2.25px 0 2.25px var(--psp--background-color),
+        2.75px 2.75px 0 2.75px var(--psp-inactive--color),
+        -2.75px 2.75px 0 2.75px var(--psp-inactive--color);
+}
+
+::slotted([part="tab"].visible) {
+    box-shadow:
+        2.25px -2.25px 0 2.25px var(--psp--background-color),
+        -2.25px -2.25px 0 2.25px var(--psp--background-color),
+        3.5px -2.25px 0 2.25px var(--psp-inactive--color),
+        0 12.5px 0 -11.5px var(--psp-inactive--border-color);
+}
+
+.overlay ::slotted([part="tab"].visible) {
+    box-shadow:
+        2.25px -2.25px 0 2.25px var(--psp--background-color),
+        -2.25px -2.25px 0 2.25px var(--psp--background-color),
+        2.75px -2.75px 0 2.75px var(--psp-inactive--color),
+        -2.75px -2.75px 0 2.75px var(--psp-inactive--color),
+        0 12.5px 0 -11.5px var(--psp-inactive--border-color);
+}
+
 :host input[type="number"]::-webkit-inner-spin-button {
-    transform: scale(1.5); /* Makes the arrows 50% larger */
-    filter: invert(1);
+    transform: scale(1.5) translateX(-5px);
+    filter: var(--psp-input--filter);
 }
 
 :host .sidebar_close_button {
@@ -105,7 +137,7 @@
         (
                 var(
                         --psp-plugin-selector--height,
-                        var(--psp-status-bar--height, 48px)
+                        var(--psp-status-bar--height, 38px)
                     ) -
                     20px
             ) /
@@ -115,7 +147,7 @@
         (
                 var(
                         --psp-plugin-selector--height,
-                        var(--psp-status-bar--height, 48px)
+                        var(--psp-status-bar--height, 38px)
                     ) -
                     20px
             ) /
@@ -124,7 +156,7 @@
     z-index: 10000;
     height: var(
         --psp-plugin-selector--height,
-        var(--psp-status-bar--height, 48px)
+        var(--psp-status-bar--height, 38px)
     );
 
     &:hover {
@@ -212,11 +244,6 @@
     #menu-bar {
         opacity: 1 !important;
     }
-
-    #component_container #settings_button,
-    #component_container #settings_button.titled {
-        opacity: 1;
-    }
 }
 
 :host {
@@ -241,6 +268,14 @@
         flex-direction: column;
     }
 
+    #layout_area {
+        flex: 1 1 auto;
+        position: relative;
+        min-height: 0;
+        display: flex;
+        overflow: hidden;
+    }
+
     #app_panel {
         position: absolute;
         bottom: 0px;
@@ -274,7 +309,7 @@
     }
 
     #status_bar {
-        height: var(--psp-status-bar--height, 48px);
+        height: var(--psp-status-bar--height, 38px);
     }
 
     #main_column_container {
@@ -297,15 +332,142 @@
     }
 
     #main_panel_container {
+        z-index: 0;
         position: relative;
         height: 100%;
         box-shadow: var(--plugin--box-shadow, none);
+        overflow: hidden;
+        border: var(--psp-plugin--border, none);
         background: var(
             --psp-main-column--background,
             var(--psp--background-color, none)
         );
-        overflow: hidden;
-        border: var(--psp-plugin--border, none);
+
+        /* A STAGED panel's hidden staging wrapper (`MainPanel::render` +
+           `Workspace::stage_panel`): a freshly-created panel's plugin
+           completes its first draw here, laid out at predicted final size
+           but unpainted. `visibility` (not `display`) so the plugin keeps a
+           real box and a non-null `offsetParent` — draw guards, redraw
+           subscriptions and observers behave exactly as for a visible
+           panel. */
+        & > .psp-staging {
+            position: absolute;
+            top: 0;
+            left: 0;
+            overflow: hidden;
+            visibility: hidden;
+            pointer-events: none;
+        }
+
+        & > .psp-staging ::slotted(*) {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        /* The layout engine hosting this panel's plugin fills the container. */
+        & regular-layout {
+            position: absolute;
+            inset: -4px -4px -4px -4px;
+            box-sizing: border-box;
+            padding: 0px;
+            background: var(--psp--background-color, transparent);
+
+            & > .rl-panel {
+                position: relative;
+                box-sizing: border-box;
+                background: none;
+                border: 1px solid transparent;
+                margin: var(--psp-panel--margin, 4px);
+            }
+
+            & > .rl-panel::part(container) {
+                position: relative;
+                background: var(--psp--background-color);
+                /* box-shadow: 0 0 0 4.5px var(--psp--background-color); */
+            }
+
+            & > .rl-panel::part(titlebar-track) {
+                gap: 10px;
+            }
+
+            & > .rl-panel::part(titlebar) {
+                display: flex;
+                align-items: stretch;
+                height: var(--psp-panel-titlebar--height, 26px);
+                font-family: var(--button--font-family, inherit);
+                overflow: visible;
+            }
+
+            & > .rl-panel::part(tab) {
+                display: flex;
+                flex: 1 1 auto;
+                align-items: center;
+                min-width: 0;
+                padding: 0 8px;
+                cursor: pointer;
+                font-size: 11px;
+                white-space: nowrap;
+                color: var(--psp--color, inherit);
+                background: var(--psp--background-color, #ffffff);
+            }
+
+            & > .rl-panel::part(title) {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            & > .rl-panel::part(close) {
+                flex: 0 0 auto;
+                align-self: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 16px;
+                height: 16px;
+                margin: 0 4px;
+                border: none;
+                background: none;
+                cursor: pointer;
+                opacity: 0.6;
+                color: inherit;
+            }
+
+            & > .rl-panel::part(close):hover {
+                opacity: 1;
+            }
+
+            & > .rl-panel::part(close):before {
+                content: "×";
+                font-size: 14px;
+                line-height: 1;
+            }
+
+            & > .rl-panel.single::part(close) {
+                display: none;
+            }
+
+            &:has(.overlay) > * {
+                opacity: 0.7;
+            }
+
+            &:has(.overlay) > .overlay {
+                opacity: 1;
+            }
+
+            & > .overlay {
+                /* background: var(
+                    --psp-panel-overlay--background,
+                    rgba(26, 125, 161, 0.15)
+                ); */
+
+                transition:
+                    top 0.1s ease-in-out,
+                    left 0.1s ease-in-out,
+                    width 0.1s ease-in-out,
+                    height 0.1s ease-in-out;
+            }
+        }
     }
 
     #settings_panel {
@@ -367,15 +529,6 @@
         border-right-width: 0px;
     }
 
-    #component_container > #settings_button {
-        opacity: 0;
-        position: absolute;
-        top: 0;
-        right: 0;
-        margin: var(--settings-button--margin, 10px 36px 0 0);
-        padding: 0;
-    }
-
     #close_button {
         background-color: var(--psp--background-color);
         padding: 0px;
@@ -388,7 +541,6 @@
         border-radius: 5px;
         font-size: 10px;
         font-weight: normal;
-
         &:hover {
             color: var(--psp--background-color, inherit);
             background-color: var(--psp--color);
@@ -415,49 +567,6 @@
         }
     }
 
-    #settings_button {
-        background-color: var(--psp--background-color);
-        padding: 0;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 3;
-        border: 1px solid var(--psp-inactive--color);
-        border-radius: 5px;
-        font-size: 10px;
-        font-weight: normal;
-
-        &:hover {
-            color: var(--psp--background-color, inherit);
-            background-color: var(--psp--color);
-            cursor: pointer;
-        }
-
-        &:hover .icon {
-            background-color: var(--psp--background-color);
-        }
-
-        .icon {
-            display: inline-flex;
-            mask-size: cover;
-            -webkit-mask-size: cover;
-            background-repeat: no-repeat;
-            background-color: var(--psp--color);
-            mask-image: var(--psp-icon--drawer-tab-inverted--mask-image);
-            -webkit-mask-image: var(
-                --psp-icon--drawer-tab-inverted--mask-image
-            );
-
-            &:before {
-                line-height: 0;
-                display: inline-flex;
-                content: var(--psp-icon--drawer-tab-inverted--mask-image);
-                visibility: hidden;
-            }
-        }
-    }
-
     .settings_tab_bar_scroll_offset {
         margin-left: -8px;
     }
@@ -506,10 +615,11 @@
         min-height: calc(
             var(
                     --psp-plugin-selector--height,
-                    var(--psp-status-bar--height, 48px)
+                    var(--psp-status-bar--height, 38px)
                 ) +
                 1px
         );
+        z-index: 7;
         overflow: hidden;
         display: flex;
         flex-direction: column;

package/src/rust/components/column_dropdown.rs

@@ -22,12 +22,11 @@ use yew::prelude::*;
 
 use super::column_selector::InPlaceColumn;
 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/column-dropdown.css"));
-
 /// Shared state for the column dropdown, updated imperatively.
 #[derive(Default)]
 pub struct ColumnDropDownState {
@@ -71,50 +70,60 @@ impl ColumnDropDownElement {
         callback: Callback<InPlaceColumn>,
     ) -> Option<()> {
         let input = target.value();
-        let metadata = self.session.metadata();
-        let mut values: Vec<InPlaceColumn> = vec![];
         let small_input = input.to_lowercase();
-        for col in metadata.get_table_columns()? {
-            if !exclude.contains(col) && col.to_lowercase().contains(&small_input) {
-                values.push(InPlaceColumn::Column(col.to_owned()));
+        let mut values: Vec<InPlaceColumn> = vec![];
+        {
+            let metadata = self.session.metadata();
+            for col in metadata.get_table_columns()? {
+                if !exclude.contains(col) && col.to_lowercase().contains(&small_input) {
+                    values.push(InPlaceColumn::Column(col.to_owned()));
+                }
             }
-        }
 
-        for col in self.session.metadata().get_expression_columns() {
-            if !exclude.contains(col) && col.to_lowercase().contains(&small_input) {
-                values.push(InPlaceColumn::Column(col.to_owned()));
+            for col in metadata.get_expression_columns() {
+                if !exclude.contains(col) && col.to_lowercase().contains(&small_input) {
+                    values.push(InPlaceColumn::Column(col.to_owned()));
+                }
             }
         }
 
-        clone!(self.state, self.session, self.notify);
-        let target_elem: HtmlElement = target.clone().into();
         let width = target.get_bounding_client_rect().width();
-        ApiFuture::spawn(async move {
-            if !exclude.contains(&input) {
+        let target_elem: HtmlElement = target.clone().into();
+
+        // Publish the synchronous matches immediately, *before* any async
+        // work, so the dropdown and `item_select` always reflect the latest
+        // keystroke rather than whichever async continuation happens to
+        // resolve last.
+        {
+            let mut s = self.state.borrow_mut();
+            s.values = values;
+            s.selected = 0;
+            s.width = width;
+            s.on_select = Some(callback);
+            s.target = Some(target_elem);
+            s.no_results = s.values.is_empty();
+        }
+        self.notify.emit(());
+
+        if !exclude.contains(&input) {
+            clone!(self.state, self.session, self.notify);
+            ApiFuture::spawn(async move {
                 let is_expr = crate::queries::validate_expr(&session, &input)
                     .await?
                     .is_none();
-                if is_expr {
-                    values.push(InPlaceColumn::Expression(Expression::new(
+                if is_expr && target.value() == input {
+                    let mut s = state.borrow_mut();
+                    s.values.push(InPlaceColumn::Expression(Expression::new(
                         None,
                         input.into(),
                     )));
+                    s.no_results = false;
+                    drop(s);
+                    notify.emit(());
                 }
-            }
-
-            let no_results = values.is_empty();
-            {
-                let mut s = state.borrow_mut();
-                s.values = values;
-                s.selected = 0;
-                s.width = width;
-                s.on_select = Some(callback);
-                s.target = Some(target_elem);
-                s.no_results = no_results;
-            }
-            notify.emit(());
-            Ok(())
-        });
+                Ok(())
+            });
+        }
 
         Some(())
     }
@@ -207,6 +216,7 @@ impl Component for ColumnDropDownPortal {
             html! {
                 <PortalModal
                     tag_name="perspective-dropdown"
+                    surface={StyleSurface::ColumnDropdown}
                     {target}
                     own_focus=false
                     {on_close}
@@ -270,5 +280,5 @@ fn ColumnDropDownView(props: &ColumnDropDownViewProps) -> Html {
         props.width, props.width
     );
 
-    html! { <><style>{ CSS }</style><style>{ position }</style>{ body }</> }
+    html! { <><style>{ position }</style>{ body }</> }
 }