@perspective-dev/viewer 4.4.1 → 4.5.1

package/src/css/viewer.css

@@ -16,10 +16,88 @@
     --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,
+        var(--psp-datagrid--pos-cell--color, #1078d1)
+    ) !important;
+}
+
+:host(.shift-active) {
+    #sub-columns {
+        .is_column_active.toggle-mode {
+            -webkit-mask-image: var(--psp-icon--radio-off--mask-image);
+            mask-image: var(--psp-icon--radio-off--mask-image);
+
+            &:before {
+                content: var(--psp-icon--radio-off--mask-image);
+            }
+
+            &:hover {
+                -webkit-mask-image: var(--psp-icon--radio-hover--mask-image);
+                mask-image: var(--psp-icon--radio-hover--mask-image);
+            }
+        }
+
+        .is_column_active.select-mode {
+            -webkit-mask-image: var(--psp-icon--checkbox-off--mask-image);
+            mask-image: var(--psp-icon--checkbox-off--mask-image);
+
+            &:before {
+                content: var(--psp-icon--checkbox-off--mask-image);
+            }
+
+            &:hover {
+                -webkit-mask-image: var(--psp-icon--checkbox-hover--mask-image);
+                mask-image: var(--psp-icon--checkbox-hover--mask-image);
+            }
+        }
+    }
+
+    #active-columns {
+        .is_column_active.toggle-mode {
+            -webkit-mask-image: var(--psp-icon--radio-on--mask-image);
+            mask-image: var(--psp-icon--radio-on--mask-image);
+
+            &:before {
+                content: var(--psp-icon--radio-on--mask-image);
+            }
+
+            &:not(.required):hover {
+                -webkit-mask-image: var(--psp-icon--radio-hover--mask-image);
+                mask-image: var(--psp-icon--radio-hover--mask-image);
+            }
+        }
+
+        .is_column_active.select-mode {
+            -webkit-mask-image: var(--psp-icon--checkbox-on--mask-image);
+            mask-image: var(--psp-icon--checkbox-on--mask-image);
+
+            &:before {
+                content: var(--psp-icon--checkbox-on--mask-image);
+            }
+
+            &:not(.required):hover {
+                -webkit-mask-image: var(--psp-icon--checkbox-hover--mask-image);
+                mask-image: var(--psp-icon--checkbox-hover--mask-image);
+            }
+        }
+    }
+}
+
 ::slotted(*) {
     pointer-events: var(--override-content-pointer-events);
 }
 
+:host input[type="number"]::-webkit-inner-spin-button {
+    transform: scale(1.5); /* Makes the arrows 50% larger */
+    filter: invert(1);
+}
+
 :host .sidebar_close_button {
     position: absolute;
     top: 0;
@@ -380,15 +458,57 @@
         }
     }
 
+    .settings_tab_bar_scroll_offset {
+        margin-left: -8px;
+    }
+
+    #settings_tab_bar {
+        display: flex;
+        &:after {
+            content: " ";
+            border-bottom: 1px solid var(--psp-inactive--color);
+            background-color: #00000020;
+            flex: 1 0 auto;
+        }
+
+        .settings_tab {
+            border-right: 1px solid var(--psp-inactive--color);
+            cursor: pointer;
+            padding: 6px 8px;
+            font-size: var(--label--font-size, 0.75em);
+            text-transform: uppercase;
+            flex: 0 1 100px;
+            background-color: #00000020;
+            border-bottom: 1px solid var(--psp-inactive--color);
+            color: var(--psp-inactive--color);
+            margin-left: -1px;
+            border-left: 1px solid var(--psp-inactive--color);
+            &:hover {
+                color: inherit;
+            }
+        }
+
+        .selected_tab {
+            color: inherit;
+            background-color: transparent;
+            border-bottom: 1px solid transparent;
+            box-shadow: 0px 9px 0px -8px var(--psp-inactive--color);
+            height: calc(100% - 1px);
+        }
+    }
+
     .split-panel.orient-reverse
         > .split-panel-child:not(:last-child):not(.is-width-override) {
         max-width: 300px;
     }
 
     .sidebar_header {
-        min-height: var(
-            --psp-plugin-selector--height,
-            var(--psp-status-bar--height, 48px)
+        min-height: calc(
+            var(
+                    --psp-plugin-selector--height,
+                    var(--psp-status-bar--height, 48px)
+                ) +
+                1px
         );
         overflow: hidden;
         display: flex;
@@ -413,4 +533,24 @@
         flex-shrink: 0;
         flex-grow: 0;
     }
+
+    #query_tabbar_tab:before {
+        content: var(--psp-label--query-tab--content);
+    }
+
+    #plugin_tabbar_tab:before {
+        content: var(--psp-label--plugin-tab--content);
+    }
+
+    #debug_tabbar_tab:before {
+        content: var(--psp-label--debug-tab--content);
+    }
+
+    label#stack-label:before {
+        content: var(--psp-label--stack--content, "Stack");
+    }
+
+    label#alt_axis-label:before {
+        content: var(--psp-label--alt-axis--content, "Alt Axis");
+    }
 }

package/src/rust/components/column_dropdown.rs

@@ -91,7 +91,9 @@ impl ColumnDropDownElement {
         let width = target.get_bounding_client_rect().width();
         ApiFuture::spawn(async move {
             if !exclude.contains(&input) {
-                let is_expr = session.validate_expr(&input).await?.is_none();
+                let is_expr = crate::queries::validate_expr(&session, &input)
+                    .await?
+                    .is_none();
                 if is_expr {
                     values.push(InPlaceColumn::Expression(Expression::new(
                         None,

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

@@ -23,12 +23,11 @@ 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::dragdrop::*;
-use crate::js::plugin::*;
-use crate::presentation::ColumnLocator;
+use crate::config::ColumnSelectMode;
+use crate::presentation::{ColumnLocator, Presentation};
+use crate::queries::*;
 use crate::renderer::*;
 use crate::session::*;
-use crate::tasks::*;
 use crate::utils::*;
 
 #[derive(Clone, Properties)]
@@ -85,7 +84,7 @@ pub struct ActiveColumnProps {
 
     /// State
     pub session: Session,
-    pub dragdrop: DragDrop,
+    pub presentation: Presentation,
     pub renderer: Renderer,
 }
 
@@ -232,7 +231,7 @@ impl Component for ActiveColumn {
 
                 (
                     label.clone(),
-                    ColumnState::Named(ctx.props().dragdrop.get_drag_column().unwrap()),
+                    ColumnState::Named(ctx.props().presentation.get_drag_column().unwrap()),
                 )
             },
             ActiveColumnState {
@@ -333,10 +332,10 @@ impl Component for ActiveColumn {
                 let ondragend = &ctx.props().ondragend.reform(|_| ());
                 let ondragstart = ctx.link().callback({
                     let event_name = name.to_owned();
-                    let dragdrop = ctx.props().dragdrop.clone();
+                    let presentation = ctx.props().presentation.clone();
                     move |event: DragEvent| {
-                        dragdrop.set_drag_image(&event).unwrap();
-                        dragdrop.notify_drag_start(
+                        presentation.set_drag_image(&event).unwrap();
+                        presentation.notify_drag_start(
                             event_name.to_string(),
                             DragEffect::Move(DragTarget::Active),
                         );
@@ -352,10 +351,13 @@ impl Component for ActiveColumn {
 
                 let is_expression = ctx.props().is_expression;
                 let show_edit_btn = ctx.props().show_edit_btn;
-                let mut class = ctx.props().renderer.metadata().mode.css();
+                let mut class = ctx.props().renderer.metadata().select_mode.css();
                 if is_required {
                     class.push("required");
                 };
+                if !is_required {
+                    class.push("shift-alt-icon");
+                }
                 html! {
                     <div
                         class={outer_classes}
@@ -435,14 +437,9 @@ impl ActiveColumnProps {
     /// - `shift` whether to toggle or select this column.
     fn deactivate_column(&self, name: String, shift: bool) {
         let mut columns = self.view_config.columns.clone();
-        let max_cols = self
-            .renderer
-            .metadata()
-            .names
-            .as_ref()
-            .map_or(0, |x| x.len());
-
-        match self.renderer.metadata().mode {
+        let max_cols = self.renderer.metadata().config_column_names.len();
+
+        match self.renderer.metadata().select_mode {
             ColumnSelectMode::Toggle => {
                 let index = columns
                     .iter()
@@ -466,7 +463,7 @@ impl ActiveColumnProps {
     }
 
     fn get_is_required(&self, idx: usize) -> bool {
-        let min_cols = self.renderer.metadata().min.unwrap_or(0);
+        let min_cols = self.renderer.metadata().min_config_columns.unwrap_or(0);
         idx < min_cols
     }
 

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

@@ -27,7 +27,7 @@ use crate::components::containers::select::{Select, SelectItem};
 use crate::components::filter_dropdown::{FilterDropDownElement, FilterDropDownPortal};
 use crate::components::style::LocalStyle;
 use crate::css;
-use crate::dragdrop::*;
+use crate::presentation::Presentation;
 use crate::renderer::*;
 use crate::session::drag_drop_update::*;
 use crate::session::*;
@@ -56,7 +56,7 @@ pub struct ConfigSelectorProps {
     // State
     pub session: Session,
     pub renderer: Renderer,
-    pub dragdrop: DragDrop,
+    pub presentation: Presentation,
 }
 
 impl PartialEq for ConfigSelectorProps {
@@ -97,7 +97,7 @@ impl Component for ConfigSelector {
             .callback(|x: (String, DragTarget, DragEffect, usize)| {
                 ConfigSelectorMsg::Drop(x.0, x.1, x.2, x.3)
             });
-        let drop_sub = Rc::new(ctx.props().dragdrop.drop_received.add_listener(cb));
+        let drop_sub = Rc::new(ctx.props().presentation.drop_received.add_listener(cb));
 
         let filter_dropdown = FilterDropDownElement::new(ctx.props().session.clone());
         let column_dropdown = ColumnDropDownElement::new(ctx.props().session.clone());
@@ -112,14 +112,14 @@ impl Component for ConfigSelector {
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             ConfigSelectorMsg::DragOver(index, action) => {
-                let should_render = ctx.props().dragdrop.notify_drag_enter(action, index);
+                let should_render = ctx.props().presentation.notify_drag_enter(action, index);
                 if should_render {
                     ctx.props().ondragenter.emit(());
                 }
                 should_render
             },
             ConfigSelectorMsg::DragLeave(action) => {
-                ctx.props().dragdrop.notify_drag_leave(action);
+                ctx.props().presentation.notify_drag_leave(action);
                 true
             },
             ConfigSelectorMsg::Close(index, DragTarget::Sort) => {
@@ -569,7 +569,7 @@ impl Component for ConfigSelector {
 
     fn view(&self, ctx: &Context<Self>) -> Html {
         let ConfigSelectorProps {
-            dragdrop,
+            presentation,
             renderer,
             session,
             ..
@@ -588,8 +588,8 @@ impl Component for ConfigSelector {
         }
 
         let dragend = Callback::from({
-            let dragdrop = dragdrop.clone();
-            move |_event| dragdrop.notify_drag_end()
+            let presentation = presentation.clone();
+            move |_event| presentation.notify_drag_end()
         });
 
         let metadata = &ctx.props().metadata;
@@ -642,8 +642,8 @@ impl Component for ConfigSelector {
                             parent={ctx.link().clone()}
                             column_dropdown={column_dropdown.clone()}
                             exclude={config.group_by.iter().cloned().collect::<HashSet<_>>()}
-                            is_dragover={ctx.props().dragdrop.is_dragover(DragTarget::GroupBy)}
-                            {dragdrop}
+                            is_dragover={ctx.props().presentation.is_dragover(DragTarget::GroupBy)}
+                            {presentation}
                         >
                             { for config.group_by.iter().map(|group_by| {
                                 html_nested! {
@@ -651,7 +651,7 @@ impl Component for ConfigSelector {
                                         action={DragTarget::GroupBy}
                                         column={group_by.clone()}
                                         metadata={metadata.clone()}
-                                        {dragdrop}
+                                        {presentation}
                                         opt_session={session}
                                     >
                                     </PivotColumn>
@@ -675,8 +675,8 @@ impl Component for ConfigSelector {
                             parent={ctx.link().clone()}
                             column_dropdown={column_dropdown.clone()}
                             exclude={config.split_by.iter().cloned().collect::<HashSet<_>>()}
-                            is_dragover={dragdrop.is_dragover(DragTarget::SplitBy)}
-                            {dragdrop}
+                            is_dragover={presentation.is_dragover(DragTarget::SplitBy)}
+                            {presentation}
                         >
                             { for config.split_by.iter().map(|split_by| {
                             html_nested! {
@@ -684,7 +684,7 @@ impl Component for ConfigSelector {
                                     action={ DragTarget::SplitBy }
                                     column={ split_by.clone() }
                                     metadata={metadata.clone()}
-                                    {dragdrop}
+                                    {presentation}
                                     opt_session={session}>
                                 </PivotColumn>
                             }
@@ -698,10 +698,10 @@ impl Component for ConfigSelector {
                             parent={ctx.link().clone()}
                             column_dropdown={column_dropdown.clone()}
                             exclude={config.sort.iter().map(|x| x.0.clone()).collect::<HashSet<_>>()}
-                            is_dragover={dragdrop.is_dragover(DragTarget::Sort).map(|(index, name)| {
+                            is_dragover={presentation.is_dragover(DragTarget::Sort).map(|(index, name)| {
                             (index, Sort(name, SortDir::Asc))
                         })}
-                            {dragdrop}
+                            {presentation}
                         >
                             { for config.sort.iter().enumerate().map(|(idx, sort)| {
                             html_nested! {
@@ -710,7 +710,7 @@ impl Component for ConfigSelector {
                                     sort={ sort.clone() }
                                     view_config={config.clone()}
                                     metadata={metadata.clone()}
-                                    {dragdrop}
+                                    {presentation}
                                     {renderer}
                                     {session}>
                                 </SortColumn>
@@ -725,10 +725,10 @@ impl Component for ConfigSelector {
                             parent={ctx.link().clone()}
                             {column_dropdown}
                             exclude={config.filter.iter().map(|x| x.column().to_string()).collect::<HashSet<_>>()}
-                            is_dragover={dragdrop.is_dragover(DragTarget::Filter).map(|(index, name)| {
+                            is_dragover={presentation.is_dragover(DragTarget::Filter).map(|(index, name)| {
                             (index, Filter::new(&name, "", FilterTerm::Scalar(Scalar::Null)))
                         })}
-                            {dragdrop}
+                            {presentation}
                         >
                             { for config.filter.iter().enumerate().map(|(idx, filter)| {
                                 let filter_keydown = ctx.link()
@@ -742,7 +742,7 @@ impl Component for ConfigSelector {
                                         on_keydown={ filter_keydown }
                                         view_config={config.clone()}
                                         metadata={metadata.clone()}
-                                        {dragdrop}
+                                        {presentation}
                                         {renderer}
                                         {session}>
                                     </FilterColumn>

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

@@ -25,11 +25,11 @@ use crate::components::containers::select::*;
 use crate::components::filter_dropdown::FilterDropDownElement;
 use crate::components::style::LocalStyle;
 use crate::components::type_icon::TypeIcon;
-use crate::dragdrop::*;
+use crate::css;
+use crate::presentation::Presentation;
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::*;
-use crate::{css, maybe};
 
 #[derive(Clone, Properties)]
 pub struct FilterColumnProps {
@@ -46,7 +46,7 @@ pub struct FilterColumnProps {
     // State
     pub session: Session,
     pub renderer: Renderer,
-    pub dragdrop: DragDrop,
+    pub presentation: Presentation,
 }
 
 impl PartialEq for FilterColumnProps {
@@ -101,11 +101,11 @@ impl Component for FilterColumn {
             .unwrap_or_else(|| "".to_owned());
 
         this.filter_ops = Rc::new(
-            maybe! {
-                Some(get_filter_ops(&ctx.props().metadata, col_type?)?
+            try {
+                get_filter_ops(&ctx.props().metadata, col_type?)?
                     .into_iter()
                     .map(SelectItem::Option)
-                    .collect::<Vec<_>>())
+                    .collect::<Vec<_>>()
             }
             .unwrap_or_default(),
         );
@@ -189,11 +189,11 @@ impl Component for FilterColumn {
         if col_type != old_col_type {
             changed = true;
             self.filter_ops = Rc::new(
-                maybe! {
-                    Some(get_filter_ops(&ctx.props().metadata, col_type?)?
+                try {
+                    get_filter_ops(&ctx.props().metadata, col_type?)?
                         .into_iter()
                         .map(SelectItem::Option)
-                        .collect::<Vec<_>>())
+                        .collect::<Vec<_>>()
                 }
                 .unwrap_or_default(),
             );
@@ -240,17 +240,17 @@ impl Component for FilterColumn {
 
         let dragstart = Callback::from({
             let event_name = ctx.props().filter.column().to_owned();
-            let dragdrop = ctx.props().dragdrop.clone();
+            let presentation = ctx.props().presentation.clone();
             move |event: DragEvent| {
-                dragdrop.set_drag_image(&event).unwrap();
-                dragdrop
+                presentation.set_drag_image(&event).unwrap();
+                presentation
                     .notify_drag_start(event_name.to_string(), DragEffect::Move(DragTarget::Filter))
             }
         });
 
         let dragend = Callback::from({
-            let dragdrop = ctx.props().dragdrop.clone();
-            move |_event| dragdrop.notify_drag_end()
+            let presentation = ctx.props().presentation.clone();
+            move |_event| presentation.notify_drag_end()
         });
 
         let type_class = match col_type {

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

@@ -18,9 +18,8 @@ use yew::prelude::*;
 
 use super::expr_edit_button::*;
 use crate::components::type_icon::TypeIcon;
-use crate::dragdrop::*;
-use crate::js::plugin::*;
-use crate::presentation::ColumnLocator;
+use crate::config::ColumnSelectMode;
+use crate::presentation::{ColumnLocator, Presentation};
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::*;
@@ -61,7 +60,7 @@ pub struct InactiveColumnProps {
     pub on_open_expr_panel: Callback<ColumnLocator>,
 
     // State
-    pub dragdrop: DragDrop,
+    pub presentation: Presentation,
     pub session: Session,
     pub renderer: Renderer,
 }
@@ -135,10 +134,10 @@ impl Component for InactiveColumn {
         let ondragend = ctx.props().ondragend.reform(|_| {});
         let ondragstart = ctx.link().callback({
             let event_name = ctx.props().name.to_owned();
-            let dragdrop = ctx.props().dragdrop.clone();
+            let presentation = ctx.props().presentation.clone();
             move |event: DragEvent| {
-                dragdrop.set_drag_image(&event).unwrap();
-                dragdrop.notify_drag_start(event_name.to_string(), DragEffect::Copy);
+                presentation.set_drag_image(&event).unwrap();
+                presentation.notify_drag_start(event_name.to_string(), DragEffect::Copy);
                 MouseLeave(true)
             }
         });
@@ -150,7 +149,8 @@ impl Component for InactiveColumn {
 
         let is_expression = ctx.props().is_expression;
 
-        let is_active_class = ctx.props().renderer.metadata().mode.css();
+        let mut is_active_class = ctx.props().renderer.metadata().select_mode.css();
+        is_active_class.push("shift-alt-icon");
         let mut class = classes!("column-selector-column");
         if !ctx.props().visible {
             class.push("column-selector-column-hidden");
@@ -199,19 +199,14 @@ impl InactiveColumnProps {
     /// - `shift` whether to toggle or select this column.
     pub fn activate_column(&self, name: String, shift: bool) {
         let mut columns = self.view_config.columns.clone();
-        let max_cols = self
-            .renderer
-            .metadata()
-            .names
-            .as_ref()
-            .map_or(0, |x| x.len());
+        let max_cols = self.renderer.metadata().config_column_names.len();
 
         // Don't treat `None` at the end of the column list as columns, we'll refill
         // these later
         if let Some(last_filled) = columns.iter().rposition(|x| !x.is_none()) {
             columns.truncate(last_filled + 1);
 
-            let mode = self.renderer.metadata().mode;
+            let mode = self.renderer.metadata().select_mode;
             if (mode == ColumnSelectMode::Select) ^ shift {
                 columns.clear();
             } else {

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

@@ -16,7 +16,7 @@ use yew::prelude::*;
 
 use crate::components::containers::dragdrop_list::*;
 use crate::components::type_icon::TypeIcon;
-use crate::dragdrop::*;
+use crate::presentation::Presentation;
 use crate::session::*;
 use crate::utils::*;
 
@@ -38,7 +38,7 @@ pub struct PivotColumnProps {
     // State
     #[prop_or_default]
     pub opt_session: Option<Session>,
-    pub dragdrop: DragDrop,
+    pub presentation: Presentation,
 }
 
 impl PartialEq for PivotColumnProps {
@@ -70,17 +70,17 @@ impl Component for PivotColumn {
     fn view(&self, ctx: &Context<Self>) -> Html {
         let dragstart = Callback::from({
             let event_name = ctx.props().column.to_owned();
-            let dragdrop = ctx.props().dragdrop.clone();
+            let presentation = ctx.props().presentation.clone();
             let action = ctx.props().action;
             move |event: DragEvent| {
-                dragdrop.set_drag_image(&event).unwrap();
-                dragdrop.notify_drag_start(event_name.to_string(), DragEffect::Move(action))
+                presentation.set_drag_image(&event).unwrap();
+                presentation.notify_drag_start(event_name.to_string(), DragEffect::Move(action))
             }
         });
 
         let dragend = Callback::from({
-            let dragdrop = ctx.props().dragdrop.clone();
-            move |_event| dragdrop.notify_drag_end()
+            let presentation = ctx.props().presentation.clone();
+            move |_event| presentation.notify_drag_end()
         });
 
         let col_type = ctx.props().column_type.unwrap_or_else(|| {

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

@@ -17,7 +17,7 @@ use yew::prelude::*;
 
 use crate::components::containers::dragdrop_list::*;
 use crate::components::type_icon::TypeIcon;
-use crate::dragdrop::*;
+use crate::presentation::Presentation;
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::*;
@@ -36,7 +36,7 @@ pub struct SortColumnProps {
     // State
     pub session: Session,
     pub renderer: Renderer,
-    pub dragdrop: DragDrop,
+    pub presentation: Presentation,
 }
 
 impl PartialEq for SortColumnProps {
@@ -105,17 +105,17 @@ impl Component for SortColumn {
 
         let dragstart = Callback::from({
             let event_name = ctx.props().sort.0.to_owned();
-            let dragdrop = ctx.props().dragdrop.clone();
+            let presentation = ctx.props().presentation.clone();
             move |event: DragEvent| {
-                dragdrop.set_drag_image(&event).unwrap();
-                dragdrop
+                presentation.set_drag_image(&event).unwrap();
+                presentation
                     .notify_drag_start(event_name.to_string(), DragEffect::Move(DragTarget::Sort))
             }
         });
 
         let dragend = Callback::from({
-            let dragdrop = ctx.props().dragdrop.clone();
-            move |_event| dragdrop.notify_drag_end()
+            let presentation = ctx.props().presentation.clone();
+            move |_event| presentation.notify_drag_end()
         });
 
         let col_type = ctx