@perspective-dev/viewer 4.4.1 → 4.5.0

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

@@ -12,7 +12,9 @@ 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 init: () => 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;
 export const perspectivedebugpluginelement_clear: (a: number) => number;
 export const perspectivedebugpluginelement_config_column_names: (a: number) => number;
 export const perspectivedebugpluginelement_connectedCallback: (a: number) => void;
@@ -58,9 +60,9 @@ export const perspectiveviewerelement_toggleConfig: (a: number, b: number) => nu
 export const registerPlugin: (a: number, b: number) => void;
 export const perspectivedebugpluginelement_update: (a: number, b: number) => number;
 export const perspectivedebugpluginelement_min_config_columns: (a: number) => number;
+export const perspectivedebugpluginelement_restyle: (a: number) => void;
 export const perspectivedebugpluginelement_delete: (a: number) => number;
 export const perspectivedebugpluginelement_resize: (a: number) => number;
-export const perspectivedebugpluginelement_restyle: (a: number) => number;
 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;
@@ -72,6 +74,7 @@ export const __wbg_view_free: (a: number, b: number) => void;
 export const __wbg_virtualdataslice_free: (a: number, b: number) => void;
 export const __wbg_virtualserver_free: (a: number, b: number) => void;
 export const client___getClassname: (a: number, b: number) => void;
+export const client___unsafe_open_view: (a: number, b: number, c: number) => number;
 export const client_get_hosted_table_names: (a: number) => number;
 export const client_handle_error: (a: number, b: number, c: number, d: number) => number;
 export const client_handle_response: (a: number, b: number) => number;
@@ -119,6 +122,7 @@ export const table_update: (a: number, b: number, c: number) => number;
 export const table_validate_expressions: (a: number, b: number) => number;
 export const table_view: (a: number, b: number) => number;
 export const view___get_model: (a: number) => number;
+export const view___unsafe_get_name: (a: number, b: number) => void;
 export const view_collapse: (a: number, b: number) => number;
 export const view_column_paths: (a: number, b: number) => number;
 export const view_delete: (a: number) => number;
@@ -142,6 +146,7 @@ export const view_to_csv: (a: number, b: number) => number;
 export const view_to_json: (a: number, b: number) => number;
 export const view_to_json_string: (a: number, b: number) => number;
 export const view_to_ndjson: (a: number, b: number) => number;
+export const view_with_typed_arrays: (a: number, b: number, c: number) => number;
 export const virtualdataslice_fromArrowIpc: (a: number, b: number, c: number) => void;
 export const virtualdataslice_new: (a: number) => number;
 export const virtualdataslice_setBooleanCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
@@ -152,19 +157,19 @@ 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_13446: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_3157: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_16508: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_17165: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_17190: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_24303: (a: number, b: number, c: number, d: number) => void;
-export const __wasm_bindgen_func_elem_5198: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_5199: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_5196: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_16627: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_17207: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_14349: (a: number, b: number) => number;
-export const __wasm_bindgen_func_elem_17168: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_3134: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_13509: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_16653: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_17311: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_17336: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_24562: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_5265: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_5266: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_5263: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_16772: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_17353: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_14430: (a: number, b: number) => number;
+export const __wasm_bindgen_func_elem_17314: (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,20 +1,42 @@
 {
   "name": "@perspective-dev/viewer",
-  "version": "4.4.1",
-  "description": "The `<perspective-viewer>` Custom Element, frontend for Perspective.js",
+  "version": "4.5.0",
+  "description": "The `<perspective-viewer>` Custom Element, frontend for Perspective",
+  "keywords": [
+    "perspective",
+    "data",
+    "analytics",
+    "visualization",
+    "datagrid",
+    "charts",
+    "web-component",
+    "wasm",
+    "arrow"
+  ],
+  "homepage": "https://perspective.finos.org",
   "repository": {
     "type": "git",
     "url": "https://github.com/perspective-dev/perspective"
   },
   "type": "module",
   "license": "Apache-2.0",
+  "sideEffects": true,
   "unpkg": "dist/cdn/perspective-viewer.js",
   "jsdelivr": "dist/cdn/perspective-viewer.js",
   "exports": {
     ".": {
       "types": "./dist/esm/perspective-viewer.d.ts",
+      "import": "./dist/esm/perspective-viewer.js",
       "default": "./dist/esm/perspective-viewer.js"
     },
+    "./inline": {
+      "types": "./dist/esm/perspective-viewer.d.ts",
+      "import": "./dist/esm/perspective-viewer.inline.js",
+      "default": "./dist/esm/perspective-viewer.inline.js"
+    },
+    "./themes": "./dist/css/themes.css",
+    "./themes/*.css": "./dist/css/*.css",
+    "./themes/intl/*.css": "./dist/css/intl/*.css",
     "./dist/*": "./dist/*",
     "./src/*": "./src/*",
     "./test/*": "./test/*",

package/src/css/column-selector.css

@@ -334,14 +334,14 @@
         padding: var(--column_type--padding, 0px 0px 0px 0px);
         position: absolute;
         height: 28px;
-        top: -28px;
+        top: -30px;
         display: inline-flex;
         align-items: flex-end;
         content: var(--psp-label--all-columns--content, "All Columns");
     }
 
     #sub-columns .scroll-panel-container {
-        margin-top: 28px;
+        margin-top: 30px;
         margin-bottom: 4px;
     }
 
@@ -364,6 +364,7 @@
     #active-columns {
         display: flex;
         padding-bottom: 8px;
+        padding-top: 6px;
     }
 
     #active-columns,

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

@@ -131,12 +131,37 @@
         content: var(--psp-label--time-style--content, "Time Style");
     }
 
-    label#foreground-label:before {
-        content: var(--psp-label--foreground--content, "Foreground");
+    label#number_fg_mode-label:before {
+        content: var(--psp-label--number-fg-mode--content, "Foreground");
     }
 
-    label#background-label:before {
-        content: var(--psp-label--background--content, "Background");
+    label#pos_fg_color-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");
+    }
+
+    label#pos_bg_color-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#series-label:before {
@@ -181,8 +206,12 @@
         content: var(--psp-label--aggregate-depth--content, "Aggregate Depth");
     }
 
-    label#max-value-label:before {
-        content: var(--psp-label--max-value--content, "Max Value");
+    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 {

package/src/css/column-style.css

@@ -12,10 +12,31 @@
  */
 
 :host {
-    #column-style-container {
+    #column-style-container,
+    #plugin-config-container {
         outline: none;
         user-select: none;
 
+        .bool-field-desc {
+            font-size: 10px;
+            flex: 1 1 auto;
+            height: 22px;
+            display: flex;
+            align-items: center;
+            padding-left: 4px;
+            margin: 0px;
+        }
+
+        .bool-field-container {
+            display: flex;
+            border: 1px solid var(--psp-inactive--color);
+            border-radius: 3px;
+            align-items: center;
+            padding: 0 6px;
+            width: 100%;
+            cursor: pointer;
+        }
+
         &.no-style {
             font-style: italic;
             background-color: var(--psp-placeholder--background);
@@ -57,7 +78,9 @@
         }
 
         span.reset-default-style-disabled {
+            flex: 0 0 14px;
             margin-left: 4px;
+            margin-right: 4px;
             width: 14px;
             height: 14px;
             border: 1px solid var(--psp-inactive--border-color);
@@ -65,10 +88,11 @@
         }
 
         span.reset-default-style {
+            flex: 0 0 22px;
             cursor: pointer;
             width: 22px;
             height: 22px;
-            margin-right: -4px;
+            /* margin-right: -4px; */
             display: inline-block;
             background-repeat: no-repeat;
             background-color: var(--psp--color);
@@ -215,6 +239,7 @@
                 height: 24px;
                 text-align: center;
                 z-index: 1;
+                pointer-events: none;
             }
         }
 

package/src/css/containers/scroll-panel.css

@@ -18,7 +18,8 @@
 
     .scroll-panel-auto-width {
         height: 1px;
-        margin-top: -1px;
+        /* margin-left: 6px; */
+        /* margin-top: -1px; */
     }
 
     .scroll-panel-content {

package/src/css/containers/tabs.css

@@ -12,71 +12,27 @@
  */
 
 :host {
-    .tab-gutter {
-        border-color: var(--psp-inactive--color, #6e6e6e);
-        display: flex;
-
-        .tab.tab-padding {
-            flex: 1;
-            cursor: unset;
-            .tab-title {
-                border-right: none;
-            }
-            .tab-border {
-                border-right: none;
-            }
-        }
-
-        .tab {
-            /* TODO: This needs to be a variable color. Which one? */
-            background: rgba(0, 0, 0, 0.125);
-            border-right: 1px solid var(--psp-inactive--color, #6e6e6e);
-            user-select: none;
-            cursor: pointer;
-
-            .tab-title {
-                font-size: 10px;
-                padding: 10px;
-                border-bottom: 1px solid var(--psp-inactive--color, #6e6e6e);
-            }
-            .tab-border {
-                height: 2px;
-                width: 100%;
-                background-color: var(--psp-inactive--color, #6e6e6e);
-                margin-top: 1px;
-            }
-
-            &.selected {
-                background: unset;
-                border-bottom: 1px transparent;
-
-                .tab-title {
-                    border-bottom: 1px transparent;
-                    border-right: none;
-                }
-                .tab-border {
-                    background-color: transparent;
-                    border-right: none;
-                }
-            }
-        }
-    }
-
     #format-tab {
         overflow: scroll;
     }
 
+    #plugin-tab {
+        overflow-x: hidden;
+        overflow-y: scroll;
+        padding: 12px 0 0 0;
+    }
+
     .tab-content {
         flex: 1 1 auto;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         .tab-section:last-child {
-            padding: 12px 8px 12px 8px;
+            padding: 12px 0px 12px 8px;
         }
 
         .tab-section {
-            padding: 12px 8px 0px 8px;
+            padding: 12px 0px 0px 8px;
             flex: 0 0 auto;
             overflow: hidden;
         }

package/src/css/dom/checkbox.css

@@ -86,10 +86,6 @@
             opacity: 0.2s;
         }
 
-        &:hover {
-            background-color: transparent;
-        }
-
         &:hover {
             -webkit-mask-image: var(--psp-icon--checkbox-hover--mask-image);
             mask-image: var(--psp-icon--checkbox-hover--mask-image);

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

@@ -106,6 +106,7 @@
 
         #textarea_editable {
             position: absolute;
+            overscroll-behavior: none;
             width: 100%;
             height: 100%;
             font-family: var(--psp-interface-monospace--font-family, monospace);

package/src/css/form/debug.css

@@ -21,14 +21,6 @@
         display: flex;
     }
 
-    .tab-padding {
-        border-right: none;
-    }
-
-    .tab-title {
-        height: 36px;
-    }
-
     #debug-panel {
         display: flex;
         min-width: 150px;
@@ -42,7 +34,7 @@
             display: flex;
             flex: 0 0 auto;
             gap: 0.333333em;
-            padding: 0px 8px 12px 8px;
+            padding: 12px 8px 0px 0px;
             align-items: center;
             button {
                 appearance: none;
@@ -76,13 +68,14 @@
             flex-direction: column;
             flex: 0 1 auto;
             overflow: hidden;
-            padding: 12px 8px 12px 8px;
+            padding: 8px 8px 8px 0;
         }
 
         #editor {
             background-color: var(--psp--background-color);
             border: 1px solid var(--psp-inactive--color);
             border-radius: 2px;
+            font-size: 0.8em;
             /* height: 100%; */
         }
     }

package/src/css/plugin-selector.css

@@ -131,6 +131,17 @@
                 }
             }
 
+            .plugin-select-item[data-plugin="Density"] > .icon {
+                -webkit-mask-image: var(
+                    --psp-plugin-selector--density--content
+                );
+                mask-image: var(--psp-plugin-selector--density--content);
+                &:before {
+                    content: var(--psp-plugin-selector--density--content);
+                    visibility: hidden;
+                }
+            }
+
             .plugin-select-item[data-plugin="Map Scatter"] > .icon {
                 -webkit-mask-image: var(
                     --psp-plugin-selector--map-scatter--content
@@ -142,6 +153,28 @@
                 }
             }
 
+            .plugin-select-item[data-plugin="Map Line"] > .icon {
+                -webkit-mask-image: var(
+                    --psp-plugin-selector--map-line--content
+                );
+                mask-image: var(--psp-plugin-selector--map-line--content);
+                &:before {
+                    content: var(--psp-plugin-selector--map-line--content);
+                    visibility: hidden;
+                }
+            }
+
+            .plugin-select-item[data-plugin="Map Density"] > .icon {
+                -webkit-mask-image: var(
+                    --psp-plugin-selector--map-density--content
+                );
+                mask-image: var(--psp-plugin-selector--map-density--content);
+                &:before {
+                    content: var(--psp-plugin-selector--map-density--content);
+                    visibility: hidden;
+                }
+            }
+
             .plugin-select-item[data-plugin="OHLC"] > .icon {
                 -webkit-mask-image: var(--psp-plugin-selector--ohlc--content);
                 mask-image: var(--psp-plugin-selector--ohlc--content);

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

@@ -0,0 +1,99 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+:host {
+    label#edit_mode-label:before {
+        content: var(--psp-label--edit-mode--content);
+    }
+
+    label#scroll_lock-label:before {
+        content: var(--psp-label--scroll-lock--content);
+    }
+
+    label#chart_type-label:before {
+        content: var(--psp-label--chart-type--content);
+    }
+
+    /* viewer-charts plugin_config controls */
+    label#auto_alt_y_axis-label:before {
+        content: var(--psp-label--auto-alt-y-axis--content);
+    }
+
+    label#facet_mode-label:before {
+        content: var(--psp-label--facet-mode--content);
+    }
+
+    label#facet_zoom_mode-label:before {
+        content: var(--psp-label--facet-zoom-mode--content);
+    }
+
+    label#series_zoom_mode-label:before {
+        content: var(--psp-label--series-zoom-mode--content);
+    }
+
+    label#line_width_px-label:before {
+        content: var(--psp-label--line-width-px--content);
+    }
+
+    label#point_size_px-label:before {
+        content: var(--psp-label--point-size-px--content);
+    }
+
+    label#band_inner_frac-label:before {
+        content: var(--psp-label--band-inner-frac--content);
+    }
+
+    label#bar_inner_pad-label:before {
+        content: var(--psp-label--bar-inner-pad--content);
+    }
+
+    label#wick_width_px-label:before {
+        content: var(--psp-label--wick-width-px--content);
+    }
+
+    label#ohlc_line_width_px-label:before {
+        content: var(--psp-label--ohlc-line-width-px--content);
+    }
+
+    label#include_zero-label:before {
+        content: var(--psp-label--include-zero--content);
+    }
+
+    label#domain_mode-label:before {
+        content: var(--psp-label--domain-mode--content);
+    }
+
+    label#gradient_color_mode-label:before {
+        content: var(--psp-label--gradient-color-mode--content);
+    }
+
+    label#gradient_radius_px-label:before {
+        content: var(--psp-label--gradient-radius-px--content);
+    }
+
+    label#gradient_intensity-label:before {
+        content: var(--psp-label--gradient-intensity--content);
+    }
+
+    label#gradient_heat_max-label:before {
+        content: var(--psp-label--gradient-heat-max--content);
+    }
+
+    label#map_tile_provider-label:before {
+        content: var(--psp-label--map-tile-provider--content);
+    }
+
+    label#map_tile_alpha-label:before {
+        content: var(--psp-label--map-tile-alpha--content);
+    }
+}

package/src/css/viewer.css

@@ -380,15 +380,57 @@
         }
     }
 
+    .settings_tab_bar_scroll_offset {
+        margin-left: -8px;
+    }
+
+    #settings_tab_bar {
+        display: flex;
+        &:after {
+            content: " ";
+            border-bottom: 1px solid var(--psp-inactive--color);
+            background-color: #00000020;
+            flex: 1 0 auto;
+        }
+
+        .settings_tab {
+            border-right: 1px solid var(--psp-inactive--color);
+            cursor: pointer;
+            padding: 6px 8px;
+            font-size: var(--label--font-size, 0.75em);
+            flex: 0 1 100px;
+            background-color: #00000020;
+            border-bottom: 1px solid var(--psp-inactive--color);
+            color: var(--psp-inactive--color);
+            margin-left: -1px;
+            border-left: 1px solid var(--psp-inactive--color);
+
+            &:hover {
+                color: inherit;
+            }
+        }
+
+        .selected_tab {
+            color: inherit;
+            background-color: transparent;
+            border-bottom: 1px solid transparent;
+            box-shadow: 0px 9px 0px -8px var(--psp-inactive--color);
+            height: calc(100% - 1px);
+        }
+    }
+
     .split-panel.orient-reverse
         > .split-panel-child:not(:last-child):not(.is-width-override) {
         max-width: 300px;
     }
 
     .sidebar_header {
-        min-height: var(
-            --psp-plugin-selector--height,
-            var(--psp-status-bar--height, 48px)
+        min-height: calc(
+            var(
+                    --psp-plugin-selector--height,
+                    var(--psp-status-bar--height, 48px)
+                ) +
+                1px
         );
         overflow: hidden;
         display: flex;
@@ -413,4 +455,24 @@
         flex-shrink: 0;
         flex-grow: 0;
     }
+
+    #query_tabbar_tab:before {
+        content: var(--psp-label--query-tab--content);
+    }
+
+    #plugin_tabbar_tab:before {
+        content: var(--psp-label--plugin-tab--content);
+    }
+
+    #debug_tabbar_tab:before {
+        content: var(--psp-label--debug-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");
+    }
 }

package/src/rust/components/column_dropdown.rs

@@ -91,7 +91,9 @@ impl ColumnDropDownElement {
         let width = target.get_bounding_client_rect().width();
         ApiFuture::spawn(async move {
             if !exclude.contains(&input) {
-                let is_expr = session.validate_expr(&input).await?.is_none();
+                let is_expr = crate::queries::validate_expr(&session, &input)
+                    .await?
+                    .is_none();
                 if is_expr {
                     values.push(InPlaceColumn::Expression(Expression::new(
                         None,