@perspective-dev/viewer 5.0.0 → 5.1.0

package/src/css/column-settings-panel.css

@@ -41,6 +41,7 @@
         .item_title {
             flex: 0 0 auto;
             font-size: var(--label--font-size, 0.75em);
+            margin-top: 9px;
         }
 
         input {
@@ -70,7 +71,7 @@
 
         .sidebar_header_contents {
             display: flex;
-            margin: 8px;
+            margin: 7px 8px;
             align-items: center;
             border-radius: 3px;
             outline-width: 1px;
@@ -117,6 +118,18 @@
         content: var(--psp-label--color--content, "Color");
     }
 
+    label#window-frame-label:before {
+        content: var(--psp-label--window-frame--content, "Frame");
+    }
+
+    label#window-offset-label:before {
+        content: var(--psp-label--window-offset--content, "Offset");
+    }
+
+    label#window-alpha-label:before {
+        content: var(--psp-label--window-alpha--content, "Alpha");
+    }
+
     label#format-label:before {
         content: var(--psp-label--format--content, "Format");
     }
@@ -296,6 +309,58 @@
     }
 
     div.tab-title#Attributes:before {
-        content: var(--psp-label--attributes-tab--content, "Attributes");
+        content: var(--psp-label--attributes-tab--content, "Expression");
+    }
+
+    div.tab-title#Window:before {
+        content: var(--psp-label--window-tab--content, "Window");
+    }
+}
+
+#window-tab {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+#window-editor-container .window-editor-error {
+    color: var(--error--color, #ff5942);
+    font-size: 11px;
+}
+
+:host {
+    #column_settings_sidebar {
+        .sidebar_header {
+            padding-right: 24px;
+        }
+    }
+
+    #window-order-by .column-selector-column-border {
+        padding-right: 8px;
+    }
+
+    .sidebar_pin_button {
+        position: absolute;
+        right: 6px;
+        width: 14px;
+        height: 14px;
+        z-index: 8;
+        cursor: pointer;
+        background-color: var(--psp--color);
+        opacity: 0.5;
+        background-repeat: no-repeat;
+        -webkit-mask-size: cover;
+        mask-size: cover;
+        -webkit-mask-image: var(--psp-icon--pin--mask-image);
+        mask-image: var(--psp-icon--pin--mask-image);
+        transform: rotate(45deg);
+        &:hover {
+            opacity: 1;
+        }
+
+        &.is-pinned {
+            transform: none;
+            opacity: 1;
+        }
     }
 }

package/src/css/column-style.css

@@ -13,7 +13,8 @@
 
 :host {
     #column-style-container,
-    #plugin-config-container {
+    #plugin-config-container,
+    #window-editor-container {
         outline: none;
         user-select: none;
 
@@ -81,8 +82,8 @@
         label {
             display: block;
             font-size: var(--label--font-size, 0.75em);
-            margin: 4px 0 2px 0;
             width: 100%;
+            margin: 4px 0 2px 0;
         }
 
         span.reset-default-style-disabled {
@@ -160,7 +161,7 @@
 
         .column-style-label {
             display: flex;
-            padding: 4px 0px;
+            padding: 0px;
         }
 
         .indent {

package/src/css/config-selector.css

@@ -60,7 +60,8 @@
         }
     }
 
-    #top_panel {
+    #top_panel,
+    #window-editor-slots {
         display: flex;
         flex-direction: column;
         justify-content: stretch;
@@ -176,6 +177,7 @@
                 flex: 1 1 auto;
                 align-self: stretch;
                 position: relative;
+                min-height: 24px;
                 &:before {
                     content: " ";
                     position: absolute;
@@ -215,6 +217,21 @@
             content: var(--psp-label--filter--content, "Where");
         }
 
+        #window-source label.pivot-selector-label:before {
+            content: var(--psp-label--window-source--content, "Column");
+        }
+
+        #window-order-by label.pivot-selector-label:before {
+            content: var(--psp-label--window-order-by--content, "Order By");
+        }
+
+        #window-partition-by label.pivot-selector-label:before {
+            content: var(
+                --psp-label--window-partition-by--content,
+                "Partition By"
+            );
+        }
+
         .rrow {
             display: flex;
             min-height: 24px;
@@ -341,6 +358,10 @@
         }
     }
 
+    #window-editor-slots .pivot-column {
+        min-height: 24px;
+    }
+
     .sort-icon {
         display: inline-flex;
         margin-left: auto;

package/src/css/containers/context-menu.css

@@ -38,12 +38,13 @@
     cursor: pointer;
     white-space: nowrap;
 
+    /* The dropdown-menu surface's inverted hover, from the same theme keys
+     * (`--psp--color`/`--psp--background-color` land on the host via the
+     * modal selector groups) — the Copy/Export pickers this menu spawns use
+     * exactly this idiom. */
     &:hover {
-        background: var(
-            --psp-context-menu--hover--background,
-            var(--psp-active--background, rgba(0, 0, 0, 0.08))
-        );
-        color: var(--psp-context-menu--hover--color, inherit);
+        background-color: var(--psp--color);
+        color: var(--psp--background-color);
     }
 
     &.disabled {
@@ -51,7 +52,7 @@
         cursor: default;
 
         &:hover {
-            background: transparent;
+            background-color: transparent;
             color: inherit;
         }
     }
@@ -86,6 +87,11 @@
     max-height: 50vh;
     overflow-y: auto;
     background-color: var(--psp--background-color, white);
+
+    /* The flyout is a CHILD of its (necessarily hovered, so inverted) parent
+     * item — un-hovered rows must not inherit the parent's inverted
+     * foreground. */
+    color: var(--psp--color);
     border: 1px solid var(--psp-inactive--color);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }

package/src/css/containers/tabs.css

@@ -28,11 +28,11 @@
         display: flex;
         flex-direction: column;
         .tab-section:last-child {
-            padding: 12px 0px 12px 8px;
+            padding: 13px 0px 12px 8px;
         }
 
         .tab-section {
-            padding: 12px 0px 0px 8px;
+            padding: 6px 0 0 8px;
             flex: 0 0 auto;
             overflow: hidden;
         }

package/src/css/viewer.css

@@ -303,6 +303,14 @@
         }
     }
 
+    #modal_panel.pinned {
+        position: static;
+        flex: 0 0 auto;
+        width: auto;
+        pointer-events: all;
+        overflow: visible;
+    }
+
     #modal_panel > .split-panel-divider {
         border-left: 1px solid var(--psp-inactive--color, #6e6e6e);
         margin-right: -5px;

package/src/rust/components/column_selector/active_column.rs

@@ -18,10 +18,10 @@ use yew::prelude::*;
 
 use super::InPlaceColumn;
 use super::aggregate_selector::*;
+use super::column_selector_column_row::ColumnSelectorColumnRow;
 use super::expr_edit_button::*;
 use crate::components::column_dropdown::ColumnDropDownElement;
 use crate::components::column_selector::{EmptyColumn, InvalidColumn};
-use crate::components::type_icon::TypeIcon;
 use crate::config::ColumnSelectMode;
 use crate::presentation::{ColumnLocator, Presentation};
 use crate::queries::*;
@@ -66,6 +66,10 @@ pub struct ActiveColumnProps {
     #[prop_or_default]
     pub is_expression: bool,
 
+    /// Whether this column is a window column.
+    #[prop_or_default]
+    pub is_window: bool,
+
     /// Whether the expression/config edit button should be shown.  Computed
     /// by the parent (`is_expression || can_render_column_styles`).
     #[prop_or_default]
@@ -95,6 +99,7 @@ impl PartialEq for ActiveColumnProps {
             && self.is_aggregated == rhs.is_aggregated
             && self.is_editing == rhs.is_editing
             && self.is_expression == rhs.is_expression
+            && self.is_window == rhs.is_window
             && self.show_edit_btn == rhs.show_edit_btn
             && self.col_type == rhs.col_type
             && self.metadata == rhs.metadata
@@ -204,10 +209,7 @@ impl Component for ActiveColumn {
             Named(String),
         }
 
-        let mut classes = classes!["column-selector-draggable"];
-        if ctx.props().is_aggregated {
-            classes.push("show-aggregate");
-        };
+        let mut classes = classes![];
 
         let mut outer_classes = classes!["column-selector-column"];
         if self.mouseover {
@@ -344,6 +346,7 @@ impl Component for ActiveColumn {
                     .callback(|event: MouseEvent| MouseEnter(event.which() == 0));
 
                 let is_expression = ctx.props().is_expression;
+                let is_window = ctx.props().is_window;
                 let show_edit_btn = ctx.props().show_edit_btn;
                 let mut class = ctx.props().renderer.metadata().select_mode.css();
                 if is_required {
@@ -363,17 +366,14 @@ impl Component for ActiveColumn {
                         ondragenter={ondragenter.clone()}
                     >
                         <span {class} onmousedown={remove_column} />
-                        <div
-                            class={classes}
-                            ref={&self.add_expression_ref}
-                            draggable="true"
-                            {ondragstart}
-                            {ondragend}
-                        >
-                            <div class="column-selector-column-border">
-                                <span class="drag-handle icon" />
-                                <TypeIcon ty={col_type} />
-                                if ctx.props().is_aggregated {
+                        <ColumnSelectorColumnRow
+                            name={name.clone()}
+                            col_type={Some(col_type)}
+                            wrapper_class={classes}
+                            wrapper_ref={&self.add_expression_ref}
+                            ondragstart={Some(ondragstart)}
+                            ondragend={Some(ondragend.clone())}
+                            aggregate={ctx.props().is_aggregated.then(|| html! {
                                     <AggregateSelector
                                         column={name.clone()}
                                         aggregate={ctx.props().get_aggregate(&name)}
@@ -382,24 +382,18 @@ impl Component for ActiveColumn {
                                         renderer={&ctx.props().renderer}
                                         session={&ctx.props().session}
                                     />
-                                }
-                                <span
-                                    class="column_name"
-                                >
-                                    { name.clone() }
-                                </span>
-                                if !ctx.props().is_aggregated {
-                                    <span class="column-selector--spacer" />
-                                }
+                                })}
+                            trailing={html! {
                                 <ExprEditButton
+                                    {is_window}
                                     name={name.clone()}
                                     on_open_expr_panel={&ctx.props().on_open_expr_panel}
                                     {is_expression}
                                     is_disabled={!show_edit_btn}
                                     is_editing={ctx.props().is_editing}
                                 />
-                            </div>
-                        </div>
+                            }}
+                        />
                     </div>
                 }
             },

package/src/rust/components/column_selector/column_selector_column_row.rs

@@ -0,0 +1,73 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 perspective_client::config::ColumnType;
+use web_sys::DragEvent;
+use yew::prelude::*;
+
+use crate::components::type_icon::TypeIcon;
+
+/// The draggable row of a `column-selector-column`
+#[derive(Clone, PartialEq, Properties)]
+pub struct ColumnSelectorColumnRowProps {
+    pub name: String,
+
+    #[prop_or_default]
+    pub col_type: Option<ColumnType>,
+
+    #[prop_or_default]
+    pub aggregate: Option<Html>,
+
+    /// Trailing affordance (e.g. the edit button in the active list).
+    #[prop_or_default]
+    pub trailing: Html,
+
+    #[prop_or_default]
+    pub wrapper_class: Classes,
+
+    #[prop_or_default]
+    pub wrapper_ref: NodeRef,
+
+    #[prop_or_default]
+    pub ondragstart: Option<Callback<DragEvent>>,
+
+    #[prop_or_default]
+    pub ondragend: Option<Callback<DragEvent>>,
+}
+
+#[function_component]
+pub fn ColumnSelectorColumnRow(p: &ColumnSelectorColumnRowProps) -> Html {
+    let mut classes = classes!["column-selector-draggable"];
+    if p.aggregate.is_some() {
+        classes.push("show-aggregate");
+    }
+
+    classes.extend(p.wrapper_class.clone());
+    html! {
+        <div
+            class={classes}
+            ref={&p.wrapper_ref}
+            draggable={p.ondragstart.is_some().then_some("true")}
+            ondragstart={p.ondragstart.clone()}
+            ondragend={p.ondragend.clone()}
+        >
+            <div class="column-selector-column-border">
+                <span class="drag-handle icon" />
+                <TypeIcon ty={p.col_type.unwrap_or(ColumnType::String)} />
+                if let Some(aggregate) = &p.aggregate { { aggregate.clone() } }
+                <span class="column_name">{ p.name.clone() }</span>
+                if p.aggregate.is_none() { <span class="column-selector--spacer" /> }
+                { p.trailing.clone() }
+            </div>
+        </div>
+    }
+}

package/src/rust/components/column_selector/config_selector.rs

@@ -235,7 +235,7 @@ impl Component for ConfigSelector {
             },
             ConfigSelectorMsg::Close(..) => false,
             ConfigSelectorMsg::Drop(column, action, effect, index)
-                if action != DragTarget::Active =>
+                if action != DragTarget::Active && !action.is_staged() =>
             {
                 let col_type = ctx
                     .props()
@@ -369,6 +369,12 @@ impl Component for ConfigSelector {
                 ctx.props().onselect.emit(());
                 false
             },
+            ConfigSelectorMsg::New(
+                DragTarget::WindowSource
+                | DragTarget::WindowOrderBy
+                | DragTarget::WindowPartitionBy,
+                _,
+            ) => false,
             ConfigSelectorMsg::New(DragTarget::Filter, InPlaceColumn::Column(column)) => {
                 let mut view_config = (*ctx.props().view_config).clone();
                 let op = ctx.props().default_op(column.as_str()).unwrap_or_default();

package/src/rust/components/column_selector/expr_edit_button.rs

@@ -22,6 +22,10 @@ pub struct ExprEditButtonProps {
     /// Is this an expression column?
     pub is_expression: bool,
 
+    /// Is this a window column?
+    #[prop_or_default]
+    pub is_window: bool,
+
     /// Fires when the config/expresison button is clicked.
     pub on_open_expr_panel: Callback<ColumnLocator>,
 
@@ -38,7 +42,9 @@ pub struct ExprEditButtonProps {
 #[function_component]
 pub fn ExprEditButton(p: &ExprEditButtonProps) -> Html {
     let onmousedown = yew::use_callback(p.clone(), |_, p| {
-        let name = if p.is_expression {
+        let name = if p.is_window {
+            ColumnLocator::Window(p.name.clone())
+        } else if p.is_expression {
             ColumnLocator::Expression(p.name.clone())
         } else {
             ColumnLocator::Table(p.name.clone())

package/src/rust/components/column_selector/inactive_column.rs

@@ -43,6 +43,10 @@ pub struct InactiveColumnProps {
     #[prop_or_default]
     pub is_expression: bool,
 
+    /// Whether this column is a window column.
+    #[prop_or_default]
+    pub is_window: bool,
+
     /// Session metadata snapshot — threaded from `SessionProps`.
     pub metadata: SessionMetadataRc,
 
@@ -72,6 +76,7 @@ impl PartialEq for InactiveColumnProps {
             && self.name == rhs.name
             && self.is_editing == rhs.is_editing
             && self.is_expression == rhs.is_expression
+            && self.is_window == rhs.is_window
             && self.metadata == rhs.metadata
             && self.view_config == rhs.view_config
     }
@@ -148,6 +153,7 @@ impl Component for InactiveColumn {
             .callback(|event: MouseEvent| MouseEnter(event.which() == 0));
 
         let is_expression = ctx.props().is_expression;
+        let is_window = ctx.props().is_window;
 
         let mut is_active_class = ctx.props().renderer.metadata().select_mode.css();
         is_active_class.push("shift-alt-icon");
@@ -179,7 +185,8 @@ impl Component for InactiveColumn {
                             name={ctx.props().name.clone()}
                             on_open_expr_panel={&ctx.props().on_open_expr_panel}
                             {is_expression}
-                            is_disabled={!is_expression}
+                            {is_window}
+                            is_disabled={!(is_expression || is_window)}
                             is_editing={ctx.props().is_editing}
                         />
                     </div>

package/src/rust/components/column_selector.rs

@@ -13,6 +13,7 @@
 mod active_column;
 mod add_expression_button;
 mod aggregate_selector;
+mod column_selector_column_row;
 mod config_selector;
 mod empty_column;
 mod expr_edit_button;
@@ -25,6 +26,7 @@ mod sort_column;
 use std::iter::*;
 use std::rc::Rc;
 
+pub use column_selector_column_row::*;
 pub use empty_column::*;
 pub use invalid_column::*;
 use perspective_client::config::ViewConfig;
@@ -367,7 +369,9 @@ impl Component for ColumnSelector {
                 let column_dropdown = self.column_dropdown.clone();
                 let is_editing = matches!(
                     &ctx.props().selected_column,
-                    Some(ColumnLocator::Table(x)) | Some(ColumnLocator::Expression(x))
+                    Some(ColumnLocator::Table(x))
+                        | Some(ColumnLocator::Expression(x))
+                        | Some(ColumnLocator::Window(x))
                 if x == &key );
 
                 // Compute metadata-derived props here so that changes to
@@ -392,10 +396,15 @@ impl Component for ColumnSelector {
                     .map(|n| metadata.is_column_expression(n))
                     .unwrap_or(false);
 
+                let is_window = name
+                    .get_name()
+                    .map(|n| metadata.is_column_window(n))
+                    .unwrap_or(false);
+
                 let can_render_styles =
                     name.get_name().is_some() && renderer.can_render_column_styles();
 
-                let show_edit_btn = is_expression || can_render_styles;
+                let show_edit_btn = is_expression || is_window || can_render_styles;
                 let on_open_expr_panel = &ctx.props().on_open_expr_panel;
                 html_nested! {
                     <ScrollPanelItem {key} {size_hint}>
@@ -405,6 +414,7 @@ impl Component for ColumnSelector {
                             {is_aggregated}
                             {is_editing}
                             {is_expression}
+                            {is_window}
                             {show_edit_btn}
                             {col_type}
                             view_config={config.clone()}
@@ -425,12 +435,18 @@ impl Component for ColumnSelector {
 
         let mut inactive_children: Vec<_> = columns_iter
             .expression()
+            .chain(columns_iter.window())
             .chain(columns_iter.inactive())
             .enumerate()
             .map(|(idx, vc)| {
                 let selected_column = ctx.props().selected_column.as_ref();
-                let is_editing = matches!(selected_column, Some(ColumnLocator::Expression(x)) if x.as_str() == vc.name);
+                let is_editing = matches!(
+                    selected_column,
+                    Some(ColumnLocator::Expression(x)) | Some(ColumnLocator::Window(x))
+                        if x.as_str() == vc.name
+                );
                 let is_expression = metadata.is_column_expression(vc.name);
+                let is_window = metadata.is_column_window(vc.name);
                 html_nested! {
                     <ScrollPanelItem key={vc.name} size_hint=28.0>
                         <InactiveColumn
@@ -439,6 +455,7 @@ impl Component for ColumnSelector {
                             name={vc.name.to_owned()}
                             {is_editing}
                             {is_expression}
+                            {is_window}
                             view_config={config.clone()}
                             metadata={metadata.clone()}
                             onselect={&onselect}

package/src/rust/components/column_settings_sidebar/style_tab.rs

@@ -326,7 +326,8 @@ pub fn StyleTab(props: &StyleTabProps) -> Html {
                     },
                 };
 
-                Some(html! { <fieldset class="style-control">{ component }</fieldset> })
+                let key = format!("{}::{}", props.column_name, keys.join("+"));
+                Some(html! { <fieldset class="style-control" {key}>{ component }</fieldset> })
             })
             .collect_vec()
     })

package/src/rust/components/column_settings_sidebar/window_tab.rs

@@ -0,0 +1,34 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 yew::prelude::*;
+
+use super::save_settings::{SaveSettings, SaveSettingsProps};
+use crate::components::window_editor::{WindowEditor, WindowEditorProps};
+
+#[derive(PartialEq, Properties, Clone)]
+pub struct WindowTabProps {
+    pub editor: WindowEditorProps,
+    pub save_section: SaveSettingsProps,
+}
+
+#[function_component]
+pub fn WindowTab(p: &WindowTabProps) -> Html {
+    html! {
+        <div id="window-tab">
+            <div class="tab-section" id="window-editor-section">
+                <WindowEditor ..p.editor.clone() />
+            </div>
+            <div class="tab-section"><SaveSettings ..p.save_section.clone() /></div>
+        </div>
+    }
+}