@perspective-dev/viewer 5.3.0 → 5.4.0

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

@@ -1,17 +1,8 @@
 /* tslint:disable */
 /* eslint-disable */
 export const memory: WebAssembly.Memory;
-export const __wbg_copydropdownmenuelement_free: (a: number, b: number) => void;
 export const __wbg_perspectivedebugpluginelement_free: (a: number, b: number) => void;
 export const __wbg_perspectiveviewerelement_free: (a: number, b: number) => void;
-export const copydropdownmenuelement___set_model: (a: number, b: number) => void;
-export const copydropdownmenuelement_connected_callback: (a: number) => void;
-export const copydropdownmenuelement_hide: (a: number, b: number) => void;
-export const copydropdownmenuelement_new: (a: number) => number;
-export const copydropdownmenuelement_open: (a: number, b: number) => void;
-export const exportdropdownmenuelement___set_model: (a: number, b: number) => void;
-export const exportdropdownmenuelement_hide: (a: number, b: number) => void;
-export const exportdropdownmenuelement_open: (a: number, b: number) => void;
 export const get_wasm_module: (a: number) => void;
 export const get_worker_url: (a: number) => void;
 export const init: (a: number, b: number) => void;
@@ -73,9 +64,6 @@ export const perspectivedebugpluginelement_delete: (a: number) => number;
 export const perspectivedebugpluginelement_resize: (a: number) => number;
 export const perspectivedebugpluginelement_min_config_columns: (a: number) => number;
 export const perspectivedebugpluginelement_restyle: (a: number) => void;
-export const exportdropdownmenuelement_new: (a: number) => number;
-export const __wbg_exportdropdownmenuelement_free: (a: number, b: number) => void;
-export const exportdropdownmenuelement_connected_callback: (a: number) => void;
 export const __wbg_client_free: (a: number, b: number) => void;
 export const __wbg_genericsqlvirtualservermodel_free: (a: number, b: number) => void;
 export const __wbg_proxysession_free: (a: number, b: number) => void;
@@ -144,8 +132,10 @@ export const view_get_min_max: (a: number, b: number, c: number) => number;
 export const view_num_columns: (a: number) => number;
 export const view_num_rows: (a: number) => number;
 export const view_on_delete: (a: number, b: number) => number;
+export const view_on_remove: (a: number, b: number) => number;
 export const view_on_update: (a: number, b: number, c: number) => number;
 export const view_remove_delete: (a: number, b: number) => number;
+export const view_remove_remove: (a: number, b: number) => number;
 export const view_remove_update: (a: number, b: number) => number;
 export const view_schema: (a: number) => number;
 export const view_set_depth: (a: number, b: number) => number;
@@ -167,22 +157,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_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 __wasm_bindgen_func_elem_18575: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_19286: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_20199: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_4417: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_24952: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_33110: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_18694: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_19291: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7737: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7738: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7739: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_7735: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_24969: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_21238: (a: number, b: number) => number;
+export const __wasm_bindgen_func_elem_19290: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_21239: (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.3.0",
+  "version": "5.4.0",
   "description": "The `<perspective-viewer>` Custom Element, frontend for Perspective",
   "keywords": [
     "perspective",
@@ -54,14 +54,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@perspective-dev/client": "",
     "pro_self_extracting_wasm": "0.0.9",
-    "regular-layout": "=0.6.1"
+    "regular-layout": "=0.6.1",
+    "@perspective-dev/client": "^5.4.0"
   },
   "devDependencies": {
-    "@perspective-dev/esbuild-plugin": "",
-    "@perspective-dev/test": "",
-    "@perspective-dev/metadata": "",
     "lightningcss": "^1.29.0",
     "@playwright/test": "=1.58.0",
     "@playwright/experimental-ct-react": "=1.58.0",
@@ -72,7 +69,10 @@
     "ts-json-schema-generator": "^2.4.0",
     "typedoc": "^0.28.7",
     "typescript": ">=5 <6",
-    "zx": ">=8 <9"
+    "zx": ">=8 <9",
+    "@perspective-dev/esbuild-plugin": "^5.4.0",
+    "@perspective-dev/metadata": "^5.4.0",
+    "@perspective-dev/test": "^5.4.0"
   },
   "scripts": {
     "build": "node ./build.mjs",

package/src/css/_context_menu.css

@@ -11,4 +11,4 @@
  * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
  */
 
-@import "containers/context-menu.css";
+@import "ui/containers/context-menu.css";

package/src/css/_dropdown_menu.css

@@ -11,4 +11,4 @@
  * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
  */
 
-@import "containers/dropdown-menu.css";
+@import "ui/containers/dropdown-menu.css";

package/src/css/_viewer_bundle.css

@@ -11,14 +11,14 @@
  * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
  */
 
-@import "dom/checkbox.css";
-@import "dom/scrollbar.css";
-@import "dom/select.css";
+@import "ui/dom/checkbox.css";
+@import "ui/dom/scrollbar.css";
+@import "ui/dom/select.css";
 
-@import "containers/split-panel.css";
-@import "containers/scroll-panel.css";
+@import "ui/containers/split-panel.css";
+@import "ui/containers/scroll-panel.css";
 @import "containers/pairs-list.css";
-@import "containers/tabs.css";
+@import "ui/containers/tabs.css";
 
 @import "type-icon.css";
 @import "aggregate-selector.css";
@@ -31,11 +31,10 @@
 @import "column-settings-panel.css";
 @import "expression-editor.css";
 @import "plugin-selector.css";
-@import "plugin-settings-panel.css";
 @import "render-warning.css";
 @import "status-bar.css";
 
-@import "form/mirrored-textarea.css";
+@import "ui/form/mirrored-textarea.css";
 @import "form/code-editor.css";
 @import "form/debug.css";
 

package/src/css/column-dropdown.css

@@ -13,11 +13,8 @@
 
 :host {
     box-sizing: border-box;
-    position: fixed;
-    z-index: 10000;
     outline: none;
     font-size: 0.75em;
-    border: inherit;
     /* box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%); */
     user-select: none;
     background-color: var(--psp--color, #fff) !important;

package/src/css/column-selector.css

@@ -13,7 +13,10 @@
 
 :host {
     #add-expression-button:before {
-        content: var(--psp-label--add-expression-button--content, "New Column");
+        content: var(
+            --psp-label--add-expression-button--content,
+            var(--psp-missing)
+        );
         text-transform: uppercase;
         font-size: 0.8333333em;
     }
@@ -90,7 +93,7 @@
             display: inline-flex;
             -webkit-mask-size: cover;
             mask-size: cover;
-            margin-left: 9px;
+            margin-left: 6px;
             -webkit-mask-image: var(--psp-icon--add-expression--mask-image);
             mask-image: var(--psp-icon--add-expression--mask-image);
             &:before {
@@ -103,7 +106,7 @@
         /* Text label of the button e.g. "New Column" */
         & > span {
             align-self: center;
-            margin-left: 7.5px;
+            margin-left: 7px;
             text-overflow: ellipsis;
             white-space: nowrap;
             pointer-events: none;
@@ -202,7 +205,7 @@
             font-family: var(--psp-button--font-family, inherit);
             cursor: pointer;
             padding: 2px 4px 0 4px;
-            margin-right: 4px;
+            margin-right: 1px;
             margin-left: auto;
             border-radius: 3px;
             &:hover,
@@ -346,7 +349,7 @@
         top: -30px;
         display: inline-flex;
         align-items: flex-end;
-        content: var(--psp-label--all-columns--content, "All Columns");
+        content: var(--psp-label--all-columns--content, var(--psp-missing));
     }
 
     #sub-columns .scroll-panel-container {

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

@@ -113,212 +113,6 @@
             }
         }
     }
-
-    label#color-label:before {
-        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");
-    }
-
-    label#timezone-label:before {
-        content: var(--psp-label--timezone--content, "Timezone");
-    }
-
-    label#date-style-label:before {
-        content: var(--psp-label--date-style--content, "Date Style");
-    }
-
-    label#time-style-label:before {
-        content: var(--psp-label--time-style--content, "Time Style");
-    }
-
-    label#number_fg_mode-label:before {
-        content: var(--psp-label--number-fg-mode--content, "Foreground");
-    }
-
-    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-bg-mode--content, "Background");
-    }
-
-    label#bg_colors-label:before {
-        content: var(--psp-label--pos-bg-color--content, "Background");
-    }
-
-    label#datetime_color_mode-label:before {
-        content: var(--psp-label--datetime-color-mode--content, "Color");
-    }
-
-    label#string_color_mode-label:before {
-        content: var(--psp-label--string-color-mode--content, "Color");
-    }
-
-    label#chart-type-label:before,
-    label#chart_type-label:before {
-        content: var(--psp-label--chart-type--content, "Chart Type");
-    }
-
-    label#stack-label:before {
-        content: var(--psp-label--stack--content, "Stack");
-    }
-
-    label#interpolate-label:before {
-        content: var(--psp-label--interpolate--content, "Interpolate null");
-    }
-
-    label#series-label:before {
-        content: var(--psp-label--series--content, "Series");
-    }
-
-    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 {
-        content: var(--psp-label--style--content, "Style");
-    }
-
-    label#minimum-integer-digits-label:before {
-        content: var(
-            --psp-label--minimum-integer-digits--content,
-            "Minimum Integer Digits"
-        );
-    }
-
-    label#rounding-increment-label:before {
-        content: var(
-            --psp-label--rounding-increment--content,
-            "Rounding Increment"
-        );
-    }
-
-    label#notation-label:before {
-        content: var(--psp-label--notation--content, "Notation");
-    }
-
-    label#use-grouping-label:before {
-        content: var(--psp-label--use-grouping--content, "Use Grouping");
-    }
-
-    label#sign-display-label:before {
-        content: var(--psp-label--sign-display--content, "Sign Display");
-    }
-
-    label#aggregate-depth-label:before {
-        content: var(--psp-label--aggregate-depth--content, "Aggregate Depth");
-    }
-
-    label#fg_gradient-label:before {
-        content: var(--psp-label--fg-gradient--content, "Max Value");
-    }
-
-    label#bg_gradient-label:before {
-        content: var(--psp-label--bg-gradient--content, "Max Value");
-    }
-
-    label#rounding-priority-label:before {
-        content: var(
-            --psp-label--rounding-priority--content,
-            "Rounding Priority"
-        );
-    }
-
-    label#rounding-mode-label:before {
-        content: var(--psp-label--rounding-mode--content, "Rounding Mode");
-    }
-
-    label#trailing-zero-display-label:before {
-        content: var(
-            --psp-label--trailing-zero-display--content,
-            "Trailing Zero Display"
-        );
-    }
-
-    label#significant-digits-label:before {
-        content: var(
-            --psp-label--significant-digits--content,
-            "Significant Digits"
-        );
-    }
-
-    label#fractional-digits-label:before {
-        content: var(
-            --psp-label--fractional-digits--content,
-            "Fractional Digits"
-        );
-    }
-
-    label#year-label:before {
-        content: var(--psp-label--year--content, "Year");
-    }
-
-    label#month-label:before {
-        content: var(--psp-label--month--content, "Month");
-    }
-
-    label#day-label:before {
-        content: var(--psp-label--day--content, "Day");
-    }
-
-    label#weekday-label:before {
-        content: var(--psp-label--weekday--content, "Weekday");
-    }
-
-    label#hour-label:before {
-        content: var(--psp-label--hour--content, "Hour");
-    }
-
-    label#minute-label:before {
-        content: var(--psp-label--minute--content, "Minute");
-    }
-
-    label#second-label:before {
-        content: var(--psp-label--second--content, "Second");
-    }
-
-    label#fractional-seconds-label:before {
-        content: var(
-            --psp-label--fractional-seconds--content,
-            "Fractional Seconds"
-        );
-    }
-
-    label#hours-label:before {
-        content: var(--psp-label--hours--content, "12/24 Hours");
-    }
-
-    div.tab-title#Style:before {
-        content: var(--psp-label--style-tab--content, "Style");
-    }
-
-    div.tab-title#Attributes:before {
-        content: var(--psp-label--attributes-tab--content, "Expression");
-    }
-
-    div.tab-title#Window:before {
-        content: var(--psp-label--window-tab--content, "Window");
-    }
 }
 
 #window-tab {

package/src/css/column-style.css

@@ -12,11 +12,18 @@
  */
 
 :host {
+    label.intl-label:before,
+    div.tab-title:before {
+        content: var(--psp-label--content);
+    }
+
     #column-style-container,
     #plugin-config-container,
     #window-editor-container {
         outline: none;
         user-select: none;
+        margin-right: -6px;
+        padding-right: 6px;
 
         .bool-field-desc {
             font-size: 10px;
@@ -26,6 +33,14 @@
             align-items: center;
             padding-left: 4px;
             margin: 0px;
+
+            &.enabled:before {
+                content: var(--psp-label--enabled--content, "Enabled");
+            }
+
+            &.disabled:before {
+                content: var(--psp-label--disabled--content, "Disabled");
+            }
         }
 
         .is-default-value .bool-field-container {
@@ -216,6 +231,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/config-selector.css

@@ -108,7 +108,7 @@
                 display: flex;
                 align-items: center;
                 position: relative;
-                padding-right: 8px;
+                padding-right: 3px;
 
                 .column_name {
                     display: block;
@@ -216,23 +216,25 @@
         #group_by label.pivot-selector-label:before {
             content: var(
                 --psp-label--pivot--content,
-                var(--psp-label--group-by--content, "Group By")
+                var(--psp-label--group-by--content, var(--psp-missing))
             );
         }
 
         #group_by label.pivot-selector-label:after {
-            content: "(" var(--psp-label--group-by--content, "Group By") ")";
+            content: "(" var(--psp-label--group-by--content, var(--psp-missing))
+                ")";
         }
 
         #split_by label.pivot-selector-label:before {
             content: var(
                 --psp-label--pivot--content,
-                var(--psp-label--split-by--content, "Split By")
+                var(--psp-label--split-by--content, var(--psp-missing))
             );
         }
 
         #split_by label.pivot-selector-label:after {
-            content: "(" var(--psp-label--split-by--content, "Split By") ")";
+            content: "(" var(--psp-label--split-by--content, var(--psp-missing))
+                ")";
         }
 
         #group_by label.pivot-selector-label:after,
@@ -244,25 +246,31 @@
         }
 
         #sort label.pivot-selector-label:before {
-            content: var(--psp-label--sort--content, "Order By");
+            content: var(--psp-label--sort--content, var(--psp-missing));
         }
 
         #filter label.pivot-selector-label:before {
-            content: var(--psp-label--filter--content, "Where");
+            content: var(--psp-label--filter--content, var(--psp-missing));
         }
 
         #window-source label.pivot-selector-label:before {
-            content: var(--psp-label--window-source--content, "Column");
+            content: var(
+                --psp-label--window-source--content,
+                var(--psp-missing)
+            );
         }
 
         #window-order-by label.pivot-selector-label:before {
-            content: var(--psp-label--window-order-by--content, "Order By");
+            content: var(
+                --psp-label--window-order-by--content,
+                var(--psp-missing)
+            );
         }
 
         #window-partition-by label.pivot-selector-label:before {
             content: var(
                 --psp-label--window-partition-by--content,
-                "Partition By"
+                var(--psp-missing)
             );
         }
 

package/src/css/filter-dropdown.css

@@ -12,14 +12,14 @@
  */
 
 :host {
-    position: fixed;
-    z-index: 10000;
+    background-color: var(--psp--background-color, #ffffff);
+    color: var(--psp--color, #161616);
+    border: 1px solid var(--psp-inactive--color, #ababab);
+    border-radius: 0 0 2px 2px;
     outline: none;
     font-size: 0.75em;
-    border: inherit;
-    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    box-shadow: var(--psp-dropdown--box-shadow);
     user-select: none;
-    background-color: white;
     padding: 6px;
     max-width: 300px;
     overflow: hidden;