@perspective-dev/viewer 5.3.0 → 5.3.1

package/package.json

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

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

@@ -217,6 +217,10 @@
         content: var(--psp-label--notation--content, "Notation");
     }
 
+    label#compact-display-label:before {
+        content: var(--psp-label--compact-display--content, "Compact Display");
+    }
+
     label#use-grouping-label:before {
         content: var(--psp-label--use-grouping--content, "Use Grouping");
     }
@@ -237,6 +241,21 @@
         content: var(--psp-label--bg-gradient--content, "Max Value");
     }
 
+    label#color-group-label:before {
+        content: var(--psp-label--group-color--content, "Color");
+    }
+
+    label#format-group-label:before {
+        content: var(--psp-label--group-format--content, "Format");
+    }
+
+    label#column_size_override-label:before {
+        content: var(
+            --psp-label--column-size-override--content,
+            "Column Width"
+        );
+    }
+
     label#rounding-priority-label:before {
         content: var(
             --psp-label--rounding-priority--content,

package/src/css/column-style.css

@@ -17,6 +17,8 @@
     #window-editor-container {
         outline: none;
         user-select: none;
+        margin-right: -6px;
+        padding-right: 6px;
 
         .bool-field-desc {
             font-size: 10px;
@@ -216,6 +218,86 @@
             padding: 0px 0;
         }
 
+        details.control-group {
+            margin: 0 -8px 0 -8px;
+            padding: 0 8px 0 8px;
+
+            &:not([open]):hover {
+                color: var(--psp--background-color);
+                background-color: var(--psp--color);
+                border-color: var(--psp--color) !important;
+            }
+
+            &[open] summary:hover {
+                color: var(--psp--color);
+            }
+
+            &:not(:first-child) {
+                border-top: 1px solid var(--psp-inactive--color);
+            }
+
+            &:last-of-type {
+                border-bottom: 1px solid var(--psp-inactive--color);
+            }
+
+            &:first-child {
+                margin-top: -12px;
+            }
+
+            > summary {
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                list-style: none;
+                margin: 0;
+                padding-right: 6px;
+                outline: none;
+
+                &::-webkit-details-marker {
+                    display: none;
+                }
+
+                > span.control-group-chevron {
+                    flex: 0 0 8px;
+                    height: 4px;
+                    background-color: currentColor;
+                    mask-image: var(--psp-icon--select-arrow--mask-image);
+                    -webkit-mask-image: var(
+                        --psp-icon--select-arrow--mask-image
+                    );
+                    -webkit-mask-repeat: no-repeat;
+                    mask-repeat: no-repeat;
+                    mask-size: cover;
+                    -webkit-mask-position: center;
+                    mask-position: center;
+                    transform: rotate(-90deg);
+                    margin-right: 2px;
+                }
+
+                label {
+                    padding-top: 8px;
+                    padding-bottom: 8px;
+                    pointer-events: none;
+                    flex: 1 1 auto;
+                    width: auto;
+                    margin: 0 0 0 6px;
+                }
+            }
+
+            &[open] > summary label {
+                padding-bottom: 8px;
+            }
+
+            &[open] > summary {
+                color: var(--psp-inactive--color);
+                margin-bottom: 2px;
+            }
+
+            &[open] > summary > span.control-group-chevron {
+                transform: none;
+            }
+        }
+
         .color-gradient-container {
             display: flex;
             align-items: center;

package/src/css/containers/tabs.css

@@ -13,13 +13,23 @@
 
 :host {
     #format-tab {
-        overflow: scroll;
+        overflow: auto;
+        scrollbar-gutter: stable;
+    }
+
+    #style-tab {
+        margin-right: -6px;
+        #column-style-container {
+            margin-right: 6px;
+        }
     }
 
     #plugin-tab {
         overflow-x: hidden;
-        overflow-y: scroll;
-        padding: 12px 0 0 0;
+        overflow-y: auto;
+        scrollbar-gutter: stable;
+        padding: 12px 0 0 8px;
+        margin-left: -8px;
     }
 
     .tab-content {

package/src/css/dom/select.css

@@ -33,6 +33,25 @@
             bottom: 0px;
             cursor: pointer;
         }
+
+        .select-arrow {
+            position: absolute;
+            pointer-events: none;
+            top: 50%;
+            right: 6px;
+            width: 6px;
+            height: 4px;
+            transform: translateY(-50%);
+            background-color: currentColor;
+            -webkit-mask-image: var(--psp-icon--select-arrow--mask-image);
+            mask-image: var(--psp-icon--select-arrow--mask-image);
+            -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+            -webkit-mask-position: center;
+            mask-position: center;
+            -webkit-mask-size: contain;
+            mask-size: contain;
+        }
     }
 
     select {
@@ -46,14 +65,6 @@
         /* font-size: 10px; */
         font-family: inherit;
         background-color: transparent;
-        background-image: var(--psp-icon--select-arrow--mask-image);
-        background-position: right 2px center;
-        background-repeat: no-repeat;
-
-        &.invert:focus-within,
-        &.invert:hover {
-            background-image: var(--psp-icon--select-arrow-hover--mask-image);
-        }
 
         option {
             color: var(--psp--color, inherit);

package/src/css/plugin-selector.css

@@ -43,6 +43,7 @@
 
             .plugin-selector-options {
                 overflow-y: auto;
+                height: 100%;
             }
 
             &.open {

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

@@ -96,4 +96,76 @@
     label#map_tile_alpha-label:before {
         content: var(--psp-label--map-tile-alpha--content);
     }
+
+    label#numeric_axes-label:before {
+        content: var(--psp-label--numeric-axes--content);
+    }
+
+    label#legend_mode-label:before {
+        content: var(--psp-label--legend-mode--content);
+    }
+
+    label#legend_size_mode-label:before {
+        content: var(--psp-label--legend-size-mode--content);
+    }
+
+    label#legend_width_px-label:before {
+        content: var(--psp-label--legend-width-px--content);
+    }
+
+    label#legend_height_px-label:before {
+        content: var(--psp-label--legend-height-px--content);
+    }
+
+    label#legend_anchor-label:before {
+        content: var(--psp-label--legend-anchor--content);
+    }
+
+    label#legend_x-label:before {
+        content: var(--psp-label--legend-x--content);
+    }
+
+    label#legend_y-label:before {
+        content: var(--psp-label--legend-y--content);
+    }
+
+    label#legend_opacity-label:before {
+        content: var(--psp-label--legend-opacity--content);
+    }
+
+    label#tooltip_max_column_px-label:before {
+        content: var(--psp-label--tooltip-max-column-px--content);
+    }
+
+    label#tooltip_opacity-label:before {
+        content: var(--psp-label--tooltip-opacity--content);
+    }
+
+    label#axes-group-label:before {
+        content: var(--psp-label--group-axes--content, "Axes");
+    }
+
+    label#facets-group-label:before {
+        content: var(--psp-label--group-facets--content, "Facets");
+    }
+
+    label#glyph-group-label:before {
+        content: var(--psp-label--group-glyph--content, "Glyphs");
+    }
+
+    label#density-group-label:before {
+        content: var(--psp-label--group-density--content, "Density");
+    }
+
+    label#basemap-group-label:before {
+        content: var(--psp-label--group-basemap--content, "Basemap");
+    }
+
+    label#legend-group-label:before {
+        content: var(--psp-label--group-legend--content, "Legend");
+    }
+
+    label#tooltip-group-label:before {
+        content: var(--psp-label--group-tooltip--content, "Tooltips");
+    }
 }

package/src/css/viewer.css

@@ -125,11 +125,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;

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()
+        },
     }
 }