@perspective-dev/viewer 5.2.0 → 5.3.0

package/dist/wasm/perspective-viewer.wasm.d.ts

@@ -46,6 +46,7 @@ export const perspectiveviewerelement_getPlugin: (a: number, b: number, c: numbe
 export const perspectiveviewerelement_getRenderStats: (a: number, b: number, c: number) => void;
 export const perspectiveviewerelement_getSelection: (a: number, b: number, c: number) => void;
 export const perspectiveviewerelement_getTable: (a: number, b: number) => number;
+export const perspectiveviewerelement_getThemes: (a: number) => number;
 export const perspectiveviewerelement_getView: (a: number, b: number) => number;
 export const perspectiveviewerelement_getViewConfig: (a: number, b: number) => number;
 export const perspectiveviewerelement_load: (a: number, b: number, c: number) => void;
@@ -59,7 +60,7 @@ export const perspectiveviewerelement_restore: (a: number, b: number, c: number)
 export const perspectiveviewerelement_restoreWorkspace: (a: number, b: number) => number;
 export const perspectiveviewerelement_restyleElement: (a: number) => number;
 export const perspectiveviewerelement_save: (a: number, b: number) => number;
-export const perspectiveviewerelement_saveWorkspace: (a: number) => number;
+export const perspectiveviewerelement_saveWorkspace: (a: number, b: number) => number;
 export const perspectiveviewerelement_setActivePanel: (a: number, b: number, c: number) => number;
 export const perspectiveviewerelement_setAutoPause: (a: number, b: number) => number;
 export const perspectiveviewerelement_setAutoSize: (a: number, b: number) => void;
@@ -99,7 +100,7 @@ export const client_table: (a: number, b: number, c: number) => number;
 export const client_terminate: (a: number, b: number) => void;
 export const genericsqlvirtualservermodel_getHostedTables: (a: number, b: number) => void;
 export const genericsqlvirtualservermodel_new: (a: number, b: number) => void;
-export const genericsqlvirtualservermodel_tableMakeView: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const genericsqlvirtualservermodel_tableMakeView: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void;
 export const genericsqlvirtualservermodel_tableSchema: (a: number, b: number, c: number, d: number) => void;
 export const genericsqlvirtualservermodel_tableSize: (a: number, b: number, c: number, d: number) => void;
 export const genericsqlvirtualservermodel_tableValidateExpression: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
@@ -166,21 +167,22 @@ export const virtualdataslice_setIntegerCol: (a: number, b: number, c: number, d
 export const virtualdataslice_setStringCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
 export const virtualserver_handleRequest: (a: number, b: number, c: number) => number;
 export const virtualserver_new: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_17003: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_17713: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_18571: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_3989: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_23208: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_31328: (a: number, b: number, c: number, d: number) => void;
-export const __wasm_bindgen_func_elem_17122: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_17718: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_6981: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_6982: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_6983: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_6979: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_23225: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_19569: (a: number, b: number) => number;
-export const __wasm_bindgen_func_elem_17717: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_17916: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_18625: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_19491: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_4310: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_24164: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_32290: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_18035: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_18630: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7520: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7521: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7522: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7518: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_24181: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_20501: (a: number, b: number) => number;
+export const __wasm_bindgen_func_elem_18629: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_20502: (a: number, b: number) => void;
 export const __wbindgen_export: (a: number, b: number) => number;
 export const __wbindgen_export2: (a: number, b: number, c: number, d: number) => number;
 export const __wbindgen_export3: (a: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "The `<perspective-viewer>` Custom Element, frontend for Perspective",
   "keywords": [
     "perspective",

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

@@ -150,15 +150,15 @@
         content: var(--psp-label--number-fg-mode--content, "Foreground");
     }
 
-    label#pos_fg_color-label:before {
+    label#fg_colors-label:before {
         content: var(--psp-label--number-fg-mode--content, "Foreground");
     }
 
     label#number_bg_mode-label:before {
-        content: var(--psp-label--number-fg-mode--content, "Background");
+        content: var(--psp-label--number-bg-mode--content, "Background");
     }
 
-    label#pos_bg_color-label:before {
+    label#bg_colors-label:before {
         content: var(--psp-label--pos-bg-color--content, "Background");
     }
 
@@ -187,8 +187,12 @@
         content: var(--psp-label--series--content, "Series");
     }
 
-    label#color-range-label:before {
-        content: var(--psp-label--color-range--content, "Color Range");
+    label#palette-label:before {
+        content: var(--psp-label--palette--content, "Palette");
+    }
+
+    label#gradient-label:before {
+        content: var(--psp-label--gradient--content, "Gradient");
     }
 
     label#style-label:before {

package/src/css/column-style.css

@@ -221,34 +221,224 @@
             align-items: center;
             flex-wrap: nowrap;
             flex: 1 1 100%;
-            .color-thermometer {
+        }
+
+        .palette-selector {
+            .palette-swatches {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                gap: 4px;
                 flex: 1 1 auto;
+                width: 0px;
+                max-height: 84px;
+                overflow-y: auto;
+                overflow-x: hidden;
+                padding: 0px 0 4px 0;
+            }
+
+            .palette-swatch {
+                position: relative;
+                width: 24px;
                 height: 24px;
+                touch-action: none;
+
+                input[type="color"] {
+                    width: 24px;
+                    height: 24px;
+                    border-radius: 3px;
+                }
+
+                &.dragging {
+                    opacity: 0.5;
+                    outline: 1px dashed var(--psp--color);
+                    outline-offset: -1px;
+                    border-radius: 3px;
+                }
+
+                .palette-swatch-remove {
+                    position: absolute;
+                    top: -2px;
+                    right: -7px;
+                    width: 14px;
+                    height: 14px;
+                    cursor: pointer;
+                    display: none;
+                    background-color: var(--psp--color);
+                    -webkit-mask-size: cover;
+                    mask-size: cover;
+                    -webkit-mask-image: var(--psp-icon--close--mask-image);
+                    mask-image: var(--psp-icon--close--mask-image);
+                }
+
+                &:hover .palette-swatch-remove {
+                    display: inline-block;
+                }
+            }
+
+            .palette-swatches.reordering .palette-swatch-remove {
+                display: none;
+            }
+
+            .palette-add {
+                width: 22px;
+                height: 22px;
+                border: 1px dashed var(--psp-inactive--color);
+                border-radius: 3px;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                &:before {
+                    content: "+";
+                    font-size: 14px;
+                    line-height: 1;
+                    color: var(--psp-inactive--color);
+                }
+
+                &:hover {
+                    border-color: var(--psp--color);
+
+                    &:before {
+                        color: var(--psp--color);
+                    }
+                }
             }
         }
 
-        .color-selector {
-            display: grid;
+        .gradient-stops-selector {
+            padding: 12px 0 16px 0;
 
-            input {
-                grid-column: 1;
-                grid-row: 1;
+            .gradient-stops-bar {
+                cursor: copy;
+                position: relative;
+                flex: 1 1 auto;
+                height: 24px;
+                border-radius: 2px;
             }
-            .color-label {
+
+            .gradient-stops-bar.discrete {
+                cursor: auto;
+                position: relative;
+                flex: 1 1 auto;
+                height: 24px;
+                border-radius: 2px;
+            }
+
+            .gradient-stop-handle {
+                position: absolute;
+                top: 0;
+                transform: translateX(-50%);
                 display: flex;
-                justify-content: center;
+                flex-direction: column;
                 align-items: center;
-                font-size: 14px;
-                grid-column: 1;
-                grid-row: 1;
-                margin: 0;
-                font-family: var(--psp-button--font-family, inherit);
-                color: var(--sign--color, white);
-                width: 36px;
+                width: 14px;
+            }
+
+            .gradient-stop-grip {
+                width: 14px;
                 height: 24px;
-                text-align: center;
-                z-index: 1;
-                pointer-events: none;
+                cursor: ew-resize;
+                touch-action: none;
+
+                &.disabled {
+                    cursor: default;
+                }
+
+                &:before {
+                    content: "";
+                    display: block;
+                    width: 0px;
+                    height: 100%;
+                    margin: 0 auto;
+                    border: 1px solid var(--psp--background-color, #fff);
+                }
+            }
+
+            .gradient-stop-remove {
+                position: absolute;
+                top: -14px;
+                width: 14px;
+                height: 13px;
+                cursor: pointer;
+                display: inline-block;
+                background-color: var(--psp--color);
+                -webkit-mask-size: cover;
+                mask-size: cover;
+                -webkit-mask-image: var(--psp-icon--close--mask-image);
+                mask-image: var(--psp-icon--close--mask-image);
+
+                &.disabled {
+                    cursor: default;
+                    background-color: var(--psp-inactive--color);
+                }
+            }
+
+            .gradient-stop-lock {
+                position: absolute;
+                top: -14px;
+                width: 14px;
+                height: 13px;
+                display: inline-block;
+                background-color: var(--psp--color);
+                -webkit-mask-size: cover;
+                mask-size: cover;
+                -webkit-mask-image: var(--psp-icon--lock--mask-image);
+                mask-image: var(--psp-icon--lock--mask-image);
+            }
+
+            .gradient-stop-handle input[type="color"] {
+                width: 14px;
+                height: 14px;
+                margin-top: 2px;
+                border-radius: 3px;
+            }
+        }
+
+        .named-value-controls {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            gap: 10px;
+            flex: 1 1 100%;
+            height: 0;
+            margin-top: 10px;
+            margin-bottom: -10px;
+            margin-right: 24px;
+            position: relative;
+            z-index: 1;
+            font-size: var(--label--font-size, 0.75em);
+            color: var(--psp-inactive--color);
+
+            select.named-value-select {
+                height: 15px;
+                padding: 0;
+                font-size: var(--label--font-size, 0.75em);
+                color: inherit;
+                background: none;
+                border: none;
+                cursor: pointer;
+
+                &:hover {
+                    color: var(--psp--color, inherit);
+                }
+            }
+
+            .named-value-pin {
+                cursor: pointer;
+                user-select: none;
+                line-height: 15px;
+
+                &:before {
+                    font-family: var(--psp-button--font-family, inherit);
+                    color: var(--psp-inactive--color, #666);
+                    content: var(--psp-label--pin-button--content, "Save");
+                }
+
+                &:hover:before {
+                    color: var(--psp--color, inherit);
+                }
             }
         }
 
@@ -259,23 +449,11 @@
             padding: 0;
             font-family: inherit;
             overflow: hidden;
-            border-radius: 12px;
+            border-radius: 3px;
 
             &:hover {
                 opacity: 0.8;
             }
-
-            &.pos-color-param {
-                width: 36px;
-                border-radius: 12px 0 0 12px;
-                margin: 0 1px 0 0;
-            }
-
-            &.neg-color-param {
-                width: 36px;
-                border-radius: 0 12px 12px 0;
-                margin: 0 0 0 1px;
-            }
         }
 
         ::-webkit-color-swatch-wrapper {

package/src/css/dom/select.css

@@ -16,12 +16,13 @@
         position: relative;
         flex: 1 1 auto;
         height: 100%;
+        font-size: 12px;
 
         &:after {
             content: attr(data-value) " ";
             visibility: hidden;
             white-space: nowrap;
-            padding-right: 17px;
+            padding-right: 20px;
         }
 
         select {

package/src/css/form/code-editor.css

@@ -12,6 +12,10 @@
  */
 
 :host {
+    #editor.contained {
+        contain: inline-size;
+    }
+
     #editor {
         display: flex;
         flex: 1 1 auto;
@@ -65,10 +69,6 @@
             white-space: pre;
             overflow: hidden;
 
-            span {
-                /* display: contents; */
-            }
-
             .comment {
                 color: var(--psp-code-editor--comment--color, orange);
             }

package/src/rust/agent/tools.rs

@@ -630,24 +630,55 @@ fn control_schema_entries(spec: &ControlSpec) -> Vec<(String, Value)> {
         },
         ControlSpec::Color { key, default } => vec![(
             key.clone(),
-            json!({ "type": "string", "format": "color", "default": default }),
+            json!({
+                "type": "string",
+                "description": "A CSS color (`#rrggbb`, `rgb()`), or a host-defined named color `var(--psp-user--color-<name>)`",
+                "default": default,
+            }),
         )],
-        ControlSpec::ColorRange {
-            key_pos,
-            key_neg,
-            default_pos,
-            default_neg,
-            ..
-        } => vec![
-            (
-                key_pos.clone(),
-                json!({ "type": "string", "format": "color", "default": default_pos }),
-            ),
-            (
-                key_neg.clone(),
-                json!({ "type": "string", "format": "color", "default": default_neg }),
-            ),
-        ],
+        ControlSpec::Palette { key, default, max } => {
+            let mut description = "Ordered discrete color palette, cycled over the column's \
+                                   categories/series: a CSS `linear-gradient(to right, #rrggbb, \
+                                   #rrggbb, …)` of N colors WITHOUT positions, or a host-defined \
+                                   named palette `var(--psp-user--palette-<name>)`"
+                .to_owned();
+            if let Some(max) = max {
+                description.push_str(&format!(" (at most {max} colors)"));
+            }
+
+            vec![(
+                key.clone(),
+                json!({
+                    "type": "string",
+                    "description": description,
+                    "default": default,
+                }),
+            )]
+        },
+        ControlSpec::GradientStops {
+            key,
+            default,
+            discrete,
+        } => {
+            let mut description = "Multi-stop color gradient: a CSS `linear-gradient(to right, \
+                                   #rrggbb P%, …)` with positioned stops (direction normalized to \
+                                   `to right`; stops[0] maps to the most negative value), or a \
+                                   host-defined named gradient `var(--psp-user--gradient-<name>)`"
+                .to_owned();
+
+            if *discrete {
+                description.push_str(" — exactly 2 stops (the negative and positive colors)");
+            }
+
+            vec![(
+                key.clone(),
+                json!({
+                    "type": "string",
+                    "description": description,
+                    "default": default,
+                }),
+            )]
+        },
         ControlSpec::DatetimeFormat => vec![(
             "date_format".to_owned(),
             json!({ "description": "Datetime display format: a style preset or custom format fields" }),

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

@@ -23,7 +23,7 @@ use super::expr_edit_button::*;
 use crate::components::column_dropdown::ColumnDropDownElement;
 use crate::components::column_selector::{EmptyColumn, InvalidColumn};
 use crate::config::ColumnSelectMode;
-use crate::presentation::{ColumnLocator, Presentation};
+use crate::presentation::{ColumnSettingsTarget, Presentation};
 use crate::queries::*;
 use crate::renderer::*;
 use crate::session::*;
@@ -51,7 +51,7 @@ pub struct ActiveColumnProps {
     pub onselect: Callback<()>,
 
     /// Fires when this component's expression/config button is clicked.
-    pub on_open_expr_panel: Callback<ColumnLocator>,
+    pub on_open_expr_panel: Callback<ColumnSettingsTarget>,
 
     /// Is this column in a grouped context (does the aggregate selector
     /// need to be visible)?

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

@@ -12,12 +12,12 @@
 
 use yew::prelude::*;
 
-use super::ColumnLocator;
+use super::{ColumnLocator, ColumnSettingsTarget};
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct AddExpressionButtonProps {
     // Fires when this button is clicked.
-    pub on_open_expr_panel: Callback<ColumnLocator>,
+    pub on_open_expr_panel: Callback<ColumnSettingsTarget>,
 
     /// The column this butotn will open configuration for.
     pub selected_column: Option<ColumnLocator>,
@@ -47,7 +47,7 @@ pub fn AddExpressionButton(p: &AddExpressionButtonProps) -> Html {
 
     let onmousedown = p
         .on_open_expr_panel
-        .reform(|_| ColumnLocator::NewExpression);
+        .reform(|_| ColumnSettingsTarget::NewExpression);
 
     let class = if *is_mouseover || matches!(p.selected_column, Some(ColumnLocator::NewExpression))
     {

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

@@ -10,9 +10,9 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use std::collections::HashSet;
 use std::rc::Rc;
 
+use itertools::Itertools;
 use perspective_client::config::*;
 use yew::prelude::*;
 
@@ -163,8 +163,7 @@ impl AggregateSelector {
                 Aggregate::MultiAggregate(x, _) => Some(x),
                 _ => None,
             })
-            .collect::<HashSet<_>>()
-            .into_iter()
+            .unique()
             .map(|x| {
                 SelectItem::OptGroup(
                     x.clone().into(),

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

@@ -279,6 +279,14 @@ impl Component for ConfigSelector {
                     ctx.props().metadata.get_features().unwrap(),
                 );
 
+                super::close_column_settings_if_displaced(
+                    &ctx.props().presentation,
+                    &ctx.props().renderer,
+                    &ctx.props().metadata,
+                    &ctx.props().view_config,
+                    &update,
+                );
+
                 {
                     let session = ctx.props().session.clone();
                     let renderer = ctx.props().renderer.clone();

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

@@ -12,7 +12,7 @@
 
 use yew::prelude::*;
 
-use super::ColumnLocator;
+use super::ColumnSettingsTarget;
 
 #[derive(PartialEq, Clone, Properties)]
 pub struct ExprEditButtonProps {
@@ -27,7 +27,7 @@ pub struct ExprEditButtonProps {
     pub is_window: bool,
 
     /// Fires when the config/expresison button is clicked.
-    pub on_open_expr_panel: Callback<ColumnLocator>,
+    pub on_open_expr_panel: Callback<ColumnSettingsTarget>,
 
     /// Is the expression/config panel open?
     pub is_editing: bool,
@@ -42,14 +42,8 @@ pub struct ExprEditButtonProps {
 #[function_component]
 pub fn ExprEditButton(p: &ExprEditButtonProps) -> Html {
     let onmousedown = yew::use_callback(p.clone(), |_, p| {
-        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())
-        };
-        p.on_open_expr_panel.emit(name)
+        p.on_open_expr_panel
+            .emit(ColumnSettingsTarget::Column(p.name.clone()))
     });
 
     let class = if p.is_disabled {

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

@@ -18,7 +18,7 @@ use yew::prelude::*;
 use super::expr_edit_button::*;
 use crate::components::type_icon::TypeIcon;
 use crate::config::ColumnSelectMode;
-use crate::presentation::{ColumnLocator, Presentation};
+use crate::presentation::{ColumnSettingsTarget, Presentation};
 use crate::renderer::*;
 use crate::session::*;
 use crate::tasks::apply_and_render;
@@ -61,7 +61,7 @@ pub struct InactiveColumnProps {
     pub onselect: Callback<()>,
 
     /// Fires when this column's expression/config button is clicked.
-    pub on_open_expr_panel: Callback<ColumnLocator>,
+    pub on_open_expr_panel: Callback<ColumnSettingsTarget>,
 
     // State
     pub presentation: Presentation,