@perspective-dev/viewer 4.4.1 → 4.5.1

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_3150: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_13605: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_16753: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_17412: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_17437: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_24661: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_5312: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_5313: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_5310: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_16872: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_17454: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_14526: (a: number, b: number) => number;
+export const __wasm_bindgen_func_elem_17415: (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.1",
+  "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

@@ -75,20 +75,22 @@
             border-radius: 3px;
             outline-width: 1px;
             outline-color: var(--psp-inactive--color);
+            padding-left: 4px;
 
             &.editable {
+                outline-style: dashed;
                 &:hover {
                     outline-style: solid;
                     cursor: text;
                 }
             }
-            &:focus {
+            &.editable:focus {
                 outline-style: solid;
                 background: var(--psp--background-color);
             }
-            &.edited {
+            /* &.edited {
                 outline-style: dashed;
-            }
+            } */
             &.invalid {
                 outline-color: var(--psp-error--color);
             }
@@ -131,12 +133,41 @@
         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#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#background-label:before {
-        content: var(--psp-label--background--content, "Background");
+    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 {
@@ -181,8 +212,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,39 @@
  */
 
 :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;
+        }
+
+        .is-default-value .bool-field-container {
+            background-color: var(--psp--background-color);
+            border: 1px solid var(--psp-inactive--color);
+        }
+
+        .bool-field-container {
+            display: flex;
+            border: 1px dashed var(--psp-inactive--color);
+            border-radius: 3px;
+            align-items: center;
+            padding: 0 6px;
+            width: 100%;
+            cursor: pointer;
+            label {
+                cursor: pointer;
+            }
+        }
+
         &.no-style {
             font-style: italic;
             background-color: var(--psp-placeholder--background);
@@ -57,7 +86,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 +96,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 +247,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

@@ -19,7 +19,7 @@
         padding: 0px;
         cursor: pointer;
         outline: none;
-        margin: 0 5px;
+        margin: 0;
         display: inline-block;
         background-repeat: no-repeat;
         background-color: var(--psp--color, #ccc);
@@ -86,11 +86,7 @@
             opacity: 0.2s;
         }
 
-        &:hover {
-            background-color: transparent;
-        }
-
-        &:hover {
+        &:not(.alternate):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);
+    }
+}