@perspective-dev/viewer 5.3.1 → 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_18416: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_19123: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_20026: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_4350: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_24703: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_32844: (a: number, b: number, c: number, d: number) => void;
-export const __wasm_bindgen_func_elem_18535: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_19128: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_7657: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_7658: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_7659: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_7655: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_24720: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_21027: (a: number, b: number) => number;
-export const __wasm_bindgen_func_elem_19127: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_21028: (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.1",
+  "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,231 +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#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");
-    }
-
-    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#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,
-            "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,6 +12,11 @@
  */
 
 :host {
+    label.intl-label:before,
+    div.tab-title:before {
+        content: var(--psp-label--content);
+    }
+
     #column-style-container,
     #plugin-config-container,
     #window-editor-container {
@@ -28,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 {

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;

package/src/css/form/debug.css

@@ -12,10 +12,6 @@
  */
 
 :host {
-    div.tab-title#Debug:before {
-        content: var(--psp-label--debug-tab--content, "Debug JSON");
-    }
-
     #debug-panel-overflow {
         overflow: hidden;
         display: flex;
@@ -56,6 +52,34 @@
                     color: var(--psp--background-color);
                 }
 
+                &#debug-panel-apply:before {
+                    content: var(
+                        --psp-label--apply-button--content,
+                        var(--psp-missing)
+                    );
+                }
+
+                &#debug-panel-reset:before {
+                    content: var(
+                        --psp-label--reset-button--content,
+                        var(--psp-missing)
+                    );
+                }
+
+                &#debug-panel-copy:before {
+                    content: var(
+                        --psp-label--copy-button--content,
+                        var(--psp-missing)
+                    );
+                }
+
+                &#debug-panel-paste:before {
+                    content: var(
+                        --psp-label--paste-button--content,
+                        var(--psp-missing)
+                    );
+                }
+
                 &[disabled] {
                     cursor: not-allowed;
                     opacity: 0.2;

package/src/css/function-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;
     display: flex;
     flex-direction: column;