@perspective-dev/viewer 5.3.0 → 5.4.0

package/src/css/viewer.css

@@ -14,6 +14,7 @@
 :host {
     --settings-panel-z-index: 10;
     --psp--color: #ff0000;
+    --psp-missing: "__MISSING__";
 }
 
 :host(.shift-active) .shift-alt-icon {
@@ -89,7 +90,9 @@
     pointer-events: var(--override-content-pointer-events);
 }
 
-::slotted(:not([slot^="statusbar-extra"]):not([slot^="tab-"])) {
+::slotted(
+    :not([slot^="statusbar-extra"]):not([slot^="tab-"]):not([slot="modal"])
+) {
     position: absolute;
     inset: 0;
     background-color: var(--psp--background-color) !important;
@@ -100,7 +103,10 @@
         -1.75px 2.75px 0 2.75px var(--psp-inactive--color);
 }
 
-.overlay ::slotted(:not([slot^="statusbar-extra"]):not([slot^="tab-"])) {
+.overlay
+    ::slotted(
+        :not([slot^="statusbar-extra"]):not([slot^="tab-"]):not([slot="modal"])
+    ) {
     box-shadow:
         2.25px 2.25px 0 2.25px var(--psp--background-color),
         -2.25px 2.25px 0 2.25px var(--psp--background-color),
@@ -125,11 +131,6 @@
         0 12.5px 0 -11.5px var(--psp-inactive--border-color);
 }
 
-:host input[type="number"]::-webkit-inner-spin-button {
-    transform: scale(1.5) translateX(-5px);
-    filter: var(--psp-input--filter);
-}
-
 :host .sidebar_close_button {
     position: absolute;
     top: 0;
@@ -343,7 +344,6 @@
         z-index: 0;
         position: relative;
         height: 100%;
-        box-shadow: var(--plugin--box-shadow, none);
         overflow: hidden;
         border: var(--psp-plugin--border, none);
         background: var(
@@ -492,8 +492,9 @@
         }
 
         & > .split-panel-divider {
+            background-color: #00000020;
             border-top: 1px solid var(--psp-inactive--color, #6e6e6e);
-            border-bottom: 2px solid var(--psp-inactive--color, #6e6e6e);
+            border-bottom: 1px solid var(--psp-inactive--color, #6e6e6e);
             margin-left: -9px;
             margin-right: 0px;
             flex: 0 0 4px;
@@ -589,9 +590,11 @@
         }
 
         .settings_tab {
+            overflow: hidden;
+            text-overflow: ellipsis;
             border-right: 1px solid var(--psp-inactive--color);
             cursor: pointer;
-            padding: 6px 8px;
+            padding: 5px 8px 7px 8px;
             font-size: var(--label--font-size, 0.75em);
             text-transform: uppercase;
             flex: 0 1 100px;
@@ -610,7 +613,7 @@
             background-color: transparent;
             border-bottom: 1px solid transparent;
             box-shadow: 0px 9px 0px -8px var(--psp-inactive--color);
-            height: calc(100% - 1px);
+            height: 23px;
         }
     }
 
@@ -644,36 +647,28 @@
     }
 
     .sidebar_border {
-        height: 2px;
+        height: 3px;
+        border-bottom: 1px solid var(--psp-inactive--color, #6e6e6e);
         width: 100%;
-        background-color: var(--psp-inactive--color, #6e6e6e);
-        margin-top: 1px;
+        background-color: rgba(0, 0, 0, 0.15);
         flex-shrink: 0;
         flex-grow: 0;
     }
 
     #query_tabbar_tab:before {
-        content: var(--psp-label--query-tab--content);
+        content: var(--psp-label--query-tab--content, var(--psp-missing));
     }
 
     #plugin_tabbar_tab:before {
-        content: var(--psp-label--plugin-tab--content);
+        content: var(--psp-label--plugin-tab--content, var(--psp-missing));
     }
 
     #debug_tabbar_tab:before {
-        content: var(--psp-label--debug-tab--content);
+        content: var(--psp-label--debug-tab--content, var(--psp-missing));
     }
 
     #chat_tabbar_tab:before {
-        content: var(--psp-label--chat-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");
+        content: var(--psp-label--chat-tab--content, var(--psp-missing));
     }
 }
 
@@ -858,7 +853,10 @@
             user-select: none;
             &:before {
                 text-transform: uppercase;
-                content: var(--psp-label--chat-reasoning--content);
+                content: var(
+                    --psp-label--chat-reasoning--content,
+                    var(--psp-missing)
+                );
                 font-size: var(--psp-label--font-size, 0.75em);
             }
         }
@@ -903,7 +901,7 @@
         align-items: flex-end;
 
         /* The prompt is a `MirroredTextarea` (see
-         * `form/mirrored-textarea.css`): it is exactly as tall as its
+         * `ui/form/mirrored-textarea.css`): it is exactly as tall as its
          * text, so this wrapper owns the visible box and caps how far
          * that growth goes before it scrolls instead. */
         #chat_input_scroll {
@@ -938,7 +936,10 @@
                      * `placeholder` attribute is untranslatable and is
                      * kept only for assistive tech. */
                     &.is-empty:before {
-                        content: var(--psp-label--chat-placeholder--content);
+                        content: var(
+                            --psp-label--chat-placeholder--content,
+                            var(--psp-missing)
+                        );
                         color: var(--psp-inactive--color, #6e6e6e);
                     }
                 }
@@ -970,11 +971,11 @@
         }
 
         #chat_send_button:before {
-            content: var(--psp-label--chat-send--content);
+            content: var(--psp-label--chat-send--content, var(--psp-missing));
         }
 
         #chat_stop_button:before {
-            content: var(--psp-label--chat-stop--content);
+            content: var(--psp-label--chat-stop--content, var(--psp-missing));
         }
     }
 

package/src/rust/agent/tools.rs

@@ -679,7 +679,7 @@ fn control_schema_entries(spec: &ControlSpec) -> Vec<(String, Value)> {
                 }),
             )]
         },
-        ControlSpec::DatetimeFormat => vec![(
+        ControlSpec::DatetimeFormat { .. } => vec![(
             "date_format".to_owned(),
             json!({ "description": "Datetime display format: a style preset or custom format fields" }),
         )],
@@ -701,7 +701,7 @@ fn control_schema_entries(spec: &ControlSpec) -> Vec<(String, Value)> {
             "symbols".to_owned(),
             json!({ "type": "object", "description": "Map of column values to symbol names" }),
         )],
-        ControlSpec::NumberFormat => vec![(
+        ControlSpec::NumberFormat { .. } => vec![(
             "number_format".to_owned(),
             json!({ "type": "object", "description": "Intl.NumberFormat-style options" }),
         )],
@@ -709,6 +709,9 @@ fn control_schema_entries(spec: &ControlSpec) -> Vec<(String, Value)> {
             "aggregate_depth".to_owned(),
             json!({ "type": "integer", "description": "Group-by rollup depth override" }),
         )],
+        ControlSpec::Group { fields, .. } => {
+            fields.iter().flat_map(control_schema_entries).collect()
+        },
     }
 }
 

package/src/rust/components/chat_panel.rs

@@ -18,7 +18,7 @@
 use yew::prelude::*;
 
 use crate::agent::{AgentSlot, ChatEntry, render_markdown};
-use crate::components::form::mirrored_textarea::MirroredTextarea;
+use crate::ui::MirroredTextarea;
 
 #[derive(Properties, PartialEq)]
 struct ChatReasoningProps {

package/src/rust/components/{form/code_editor.rs → code_editor.rs}

@@ -10,6 +10,8 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+mod highlight;
+
 use std::rc::Rc;
 
 use perspective_client::ExprValidationError;
@@ -17,10 +19,10 @@ use wasm_bindgen::JsCast;
 use web_sys::*;
 use yew::prelude::*;
 
-use crate::components::form::highlight::highlight;
-use crate::components::form::mirrored_textarea::MirroredTextarea;
+use self::highlight::highlight;
 use crate::components::function_dropdown::{FunctionDropDownElement, FunctionDropDownPortal};
 use crate::exprtk::{Cursor, tokenize};
+use crate::ui::MirroredTextarea;
 use crate::utils::*;
 
 #[derive(Properties, PartialEq)]

package/src/rust/components/column_dropdown.rs

@@ -21,9 +21,9 @@ use yew::html::ImplicitClone;
 use yew::prelude::*;
 
 use super::column_selector::InPlaceColumn;
-use super::portal::PortalModal;
 use super::style::StyleSurface;
 use crate::session::Session;
+use crate::ui::PortalModal;
 use crate::utils::*;
 use crate::*;
 
@@ -216,7 +216,7 @@ impl Component for ColumnDropDownPortal {
             html! {
                 <PortalModal
                     tag_name="perspective-dropdown"
-                    surface={StyleSurface::ColumnDropdown}
+                    sheet={StyleSurface::ColumnDropdown.sheet()}
                     {target}
                     own_focus=false
                     {on_close}

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

@@ -70,6 +70,9 @@ pub struct ActiveColumnProps {
     #[prop_or_default]
     pub is_window: bool,
 
+    #[prop_or_default]
+    pub is_last_column: bool,
+
     /// Whether the expression/config edit button should be shown.  Computed
     /// by the parent (`is_expression || can_render_column_styles`).
     #[prop_or_default]
@@ -287,7 +290,7 @@ impl Component for ActiveColumn {
                     <div
                         class={outer_classes}
                         data-label={label}
-                        style={format!("--default-column-title:var(--column-selector-column-{path}--content)")}
+                        style={format!("--default-column-title:var(--psp-label--column-{path}--content)")}
                         data-index={ctx.props().idx.to_string()}
                         ondragenter={ondragenter.clone()}
                     >
@@ -301,7 +304,7 @@ impl Component for ActiveColumn {
                     <div
                         class={outer_classes}
                         data-label={label}
-                        style={format!("--default-column-title:var(--column-selector-column-{path}--content)")}
+                        style={format!("--default-column-title:var(--psp-label--column-{path}--content)")}
                         data-index={ctx.props().idx.to_string()}
                         ondragenter={ondragenter.clone()}
                     >
@@ -310,7 +313,9 @@ impl Component for ActiveColumn {
                 }
             },
             ((label, ColumnState::Named(name)), Some(col_type)) => {
-                let is_required = ctx.props().get_is_required(ctx.props().idx);
+                let is_required =
+                    ctx.props().is_last_column || ctx.props().get_is_required(ctx.props().idx);
+
                 let remove_column = if is_required {
                     None
                 } else {
@@ -330,11 +335,12 @@ impl Component for ActiveColumn {
                     let event_name = name.to_owned();
                     let presentation = ctx.props().presentation.clone();
                     move |event: DragEvent| {
-                        presentation.set_drag_image(&event).unwrap();
-                        presentation.notify_drag_start(
-                            event_name.to_string(),
-                            DragEffect::Move(DragTarget::Active),
-                        );
+                        if presentation.set_drag_image(&event) {
+                            presentation.notify_drag_start(
+                                event_name.to_string(),
+                                DragEffect::Move(DragTarget::Active),
+                            );
+                        }
 
                         MouseLeave(false)
                     }
@@ -359,7 +365,7 @@ impl Component for ActiveColumn {
                     <div
                         class={outer_classes}
                         data-label={label}
-                        style={format!("--default-column-title:var(--column-selector-column-{path}--content)")}
+                        style={format!("--default-column-title:var(--psp-label--column-{path}--content)")}
                         data-index={ctx.props().idx.to_string()}
                         {onmouseover}
                         {onmouseout}

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

@@ -16,10 +16,10 @@ use itertools::Itertools;
 use perspective_client::config::*;
 use yew::prelude::*;
 
-use crate::components::containers::select::*;
 use crate::renderer::*;
 use crate::session::*;
 use crate::tasks::apply_and_render;
+use crate::ui::{Select, SelectItem};
 use crate::utils::{PtrEqRc, spawn_owned};
 
 #[derive(Properties)]

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

@@ -21,8 +21,7 @@ use super::filter_column::*;
 use super::pivot_column::*;
 use super::sort_column::*;
 use crate::components::column_dropdown::{ColumnDropDownElement, ColumnDropDownPortal};
-use crate::components::containers::dragdrop_list::*;
-use crate::components::containers::select::{Select, SelectItem};
+use crate::components::dragdrop_list::*;
 use crate::components::filter_dropdown::{FilterDropDownElement, FilterDropDownPortal};
 use crate::config::PluginStaticConfig;
 use crate::presentation::Presentation;
@@ -30,6 +29,7 @@ use crate::renderer::*;
 use crate::session::drag_drop_update::*;
 use crate::session::*;
 use crate::tasks::apply_and_render;
+use crate::ui::{Select, SelectItem};
 use crate::utils::*;
 
 #[derive(Clone, Properties)]

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

@@ -19,14 +19,14 @@ use wasm_bindgen::JsCast;
 use web_sys::*;
 use yew::prelude::*;
 
-use crate::components::containers::dragdrop_list::*;
-use crate::components::containers::select::*;
+use crate::components::dragdrop_list::*;
 use crate::components::filter_dropdown::FilterDropDownElement;
 use crate::components::type_icon::TypeIcon;
 use crate::presentation::Presentation;
 use crate::renderer::*;
 use crate::session::*;
 use crate::tasks::apply_and_render;
+use crate::ui::{Select, SelectItem};
 use crate::utils::*;
 
 #[derive(Clone, Properties)]
@@ -240,9 +240,12 @@ impl Component for FilterColumn {
             let event_name = ctx.props().filter.column().to_owned();
             let presentation = ctx.props().presentation.clone();
             move |event: DragEvent| {
-                presentation.set_drag_image(&event).unwrap();
-                presentation
-                    .notify_drag_start(event_name.to_string(), DragEffect::Move(DragTarget::Filter))
+                if presentation.set_drag_image(&event) {
+                    presentation.notify_drag_start(
+                        event_name.to_string(),
+                        DragEffect::Move(DragTarget::Filter),
+                    )
+                }
             }
         });
 

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

@@ -141,8 +141,10 @@ impl Component for InactiveColumn {
             let event_name = ctx.props().name.to_owned();
             let presentation = ctx.props().presentation.clone();
             move |event: DragEvent| {
-                presentation.set_drag_image(&event).unwrap();
-                presentation.notify_drag_start(event_name.to_string(), DragEffect::Copy);
+                if presentation.set_drag_image(&event) {
+                    presentation.notify_drag_start(event_name.to_string(), DragEffect::Copy);
+                }
+
                 MouseLeave(true)
             }
         });

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

@@ -14,7 +14,7 @@ use perspective_client::config::ColumnType;
 use web_sys::*;
 use yew::prelude::*;
 
-use crate::components::containers::dragdrop_list::*;
+use crate::components::dragdrop_list::*;
 use crate::components::type_icon::TypeIcon;
 use crate::presentation::Presentation;
 use crate::session::*;
@@ -73,8 +73,9 @@ impl Component for PivotColumn {
             let presentation = ctx.props().presentation.clone();
             let action = ctx.props().action;
             move |event: DragEvent| {
-                presentation.set_drag_image(&event).unwrap();
-                presentation.notify_drag_start(event_name.to_string(), DragEffect::Move(action))
+                if presentation.set_drag_image(&event) {
+                    presentation.notify_drag_start(event_name.to_string(), DragEffect::Move(action))
+                }
             }
         });
 

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

@@ -14,7 +14,7 @@ use perspective_client::config::*;
 use web_sys::*;
 use yew::prelude::*;
 
-use crate::components::containers::dragdrop_list::*;
+use crate::components::dragdrop_list::*;
 use crate::components::type_icon::TypeIcon;
 use crate::presentation::Presentation;
 use crate::renderer::*;
@@ -104,9 +104,12 @@ impl Component for SortColumn {
             let event_name = ctx.props().sort.0.to_owned();
             let presentation = ctx.props().presentation.clone();
             move |event: DragEvent| {
-                presentation.set_drag_image(&event).unwrap();
-                presentation
-                    .notify_drag_start(event_name.to_string(), DragEffect::Move(DragTarget::Sort))
+                if presentation.set_drag_image(&event) {
+                    presentation.notify_drag_start(
+                        event_name.to_string(),
+                        DragEffect::Move(DragTarget::Sort),
+                    )
+                }
             }
         });
 

package/src/rust/components/column_selector.rs

@@ -38,10 +38,7 @@ use self::active_column::*;
 use self::add_expression_button::AddExpressionButton;
 use self::config_selector::ConfigSelector;
 use self::inactive_column::*;
-use super::containers::scroll_panel::*;
-use super::containers::split_panel::{Orientation, SplitPanel};
 use crate::components::column_dropdown::{ColumnDropDownElement, ColumnDropDownPortal};
-use crate::components::containers::scroll_panel_item::ScrollPanelItem;
 use crate::config::PluginStaticConfig;
 use crate::presentation::{ColumnLocator, ColumnSettingsTarget, DragDropContainer, Presentation};
 use crate::queries::{
@@ -51,6 +48,7 @@ use crate::renderer::*;
 use crate::session::drag_drop_update::*;
 use crate::session::*;
 use crate::tasks::apply_and_render;
+use crate::ui::{Orientation, ScrollPanel, ScrollPanelItem, SplitPanel};
 use crate::utils::*;
 
 #[derive(Properties)]
@@ -333,6 +331,7 @@ impl Component for ColumnSelector {
             prop_config.clone()
         };
 
+        let is_last_column = config.columns.len() == 1;
         let is_aggregated = config.is_aggregated();
         let columns_iter = ColumnsIteratorSet::new(&config, metadata, renderer, presentation);
         let onselect = ctx.link().callback(|()| Redraw);
@@ -468,6 +467,7 @@ impl Component for ColumnSelector {
                             {is_window}
                             {show_edit_btn}
                             {col_type}
+                            {is_last_column}
                             view_config={config.clone()}
                             metadata={metadata.clone()}
                             {name}

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

@@ -13,8 +13,8 @@
 use perspective_client::clone;
 use yew::{Callback, Html, Properties, function_component, html};
 
-use crate::components::form::number_field::NumberField;
 use crate::config::ColumnConfigFieldUpdate;
+use crate::ui::NumberField;
 
 // ░░░█▀█░█▀▄░█▀█░█▀█░█▀▀░█▀▄░▀█▀░▀█▀░█▀▀░█▀▀░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 // ░░░█▀▀░█▀▄░█░█░█▀▀░█▀▀░█▀▄░░█░░░█░░█▀▀░▀▀█░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░

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

@@ -26,17 +26,14 @@ use wasm_bindgen::JsCast;
 use web_sys::{HtmlInputElement, MouseEvent};
 use yew::{Callback, Html, Properties, function_component, html, use_callback};
 
-use crate::components::containers::select::{Select, SelectItem};
-use crate::components::form::color_selector::ColorSelector;
-use crate::components::form::multi_stop_gradient_selector::MultiStopGradientSelector;
-use crate::components::form::named_value_picker::NamedValuePicker;
-use crate::components::form::number_field::NumberField;
-use crate::components::form::optional_field::OptionalField;
-use crate::components::form::palette_selector::PaletteSelector;
-use crate::config::{
-    ColumnConfigFieldUpdate, CssColor, CssGradient, CssKind, CssPalette, EnumVariant,
-    GradientStopSpec, NamedValue, canonicalize_css_color, discrete_pair, gradient_to_css,
-    palette_name_for,
+use crate::config::{ColumnConfigFieldUpdate, EnumVariant, discrete_pair};
+use crate::ui::{
+    ColorSelector, MultiStopGradientSelector, NamedValuePicker, NumberField, OptionalField,
+    PaletteSelector, Select, SelectItem,
+};
+use crate::utils::{
+    CssColor, CssGradient, CssKind, CssPalette, GradientStopSpec, NamedValue,
+    canonicalize_css_color, gradient_to_css, palette_name_for,
 };
 
 fn emit(on_change: &Callback<ColumnConfigFieldUpdate>, key: &str, value: Option<Value>) {
@@ -150,9 +147,10 @@ pub fn BoolField(props: &BoolFieldProps) -> Html {
                         checked={current}
                         {oninput}
                     />
-                    <label for={format!("{}-checkbox", props.field_key)} class="bool-field-desc">
-                        { if current { "Enabled" } else { "Disabled" } }
-                    </label>
+                    <label
+                        for={format!("{}-checkbox", props.field_key)}
+                        class={if current { "bool-field-desc enabled" } else { "bool-field-desc disabled" }}
+                    />
                 </div>
             </OptionalField>
         </div>
@@ -346,7 +344,7 @@ pub fn PaletteField(props: &PaletteFieldProps) -> Html {
                 on_change={on_change_palette}
                 {on_reset}
                 {is_modified}
-                title={Some(format!("{}-label", props.field_key))}
+                label={Some(props.field_key.clone())}
             />
         </div>
     }
@@ -459,7 +457,7 @@ pub fn GradientStopsField(props: &GradientStopsFieldProps) -> Html {
                 on_change={on_change_stops}
                 {on_reset}
                 {is_modified}
-                title={Some(format!("{}-label", props.field_key))}
+                label={Some(props.field_key.clone())}
             />
         </div>
     }
@@ -555,7 +553,7 @@ pub fn ColorField(props: &ColorFieldProps) -> Html {
                 {on_color}
                 {on_reset}
                 {is_modified}
-                title={Some(format!("{}-label", props.field_key))}
+                label={Some(props.field_key.clone())}
             />
         </div>
     }

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

@@ -13,7 +13,7 @@
 use itertools::Itertools;
 use yew::{Callback, Html, Properties, function_component, html};
 
-use crate::components::containers::select::{Select, SelectItem};
+use crate::ui::{Select, SelectItem};
 use crate::utils::PtrEqRc;
 
 #[derive(Properties, PartialEq)]