@perspective-dev/viewer 4.0.1 → 4.1.0

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

@@ -6,7 +6,7 @@ export const __wbg_copydropdownmenuelement_free: (a: number, b: number) => void;
 export const copydropdownmenuelement_new: (a: number) => number;
 export const copydropdownmenuelement_open: (a: number, b: number) => void;
 export const copydropdownmenuelement_hide: (a: number, b: number) => void;
-export const copydropdownmenuelement_set_model: (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 __wbg_perspectivedebugpluginelement_free: (a: number, b: number) => void;
 export const perspectivedebugpluginelement_new: (a: number) => number;
@@ -18,23 +18,26 @@ export const perspectivedebugpluginelement_clear: (a: number) => number;
 export const perspectivedebugpluginelement_connectedCallback: (a: number) => void;
 export const exportdropdownmenuelement_open: (a: number, b: number) => void;
 export const exportdropdownmenuelement_hide: (a: number, b: number) => void;
-export const exportdropdownmenuelement_set_model: (a: number, b: number) => void;
+export const exportdropdownmenuelement___set_model: (a: number, b: number) => void;
 export const __wbg_filterdropdownelement_free: (a: number, b: number) => void;
 export const __wbg_functiondropdownelement_free: (a: number, b: number) => void;
 export const __wbg_perspectiveviewerelement_free: (a: number, b: number) => void;
 export const perspectiveviewerelement_new: (a: number) => number;
-export const perspectiveviewerelement_connectedCallback: (a: number) => void;
-export const perspectiveviewerelement_load: (a: number, b: number) => number;
+export const perspectiveviewerelement_connectedCallback: (a: number, b: number) => void;
+export const perspectiveviewerelement_load: (a: number, b: number, c: number) => void;
 export const perspectiveviewerelement_delete: (a: number) => number;
 export const perspectiveviewerelement_eject: (a: number) => number;
 export const perspectiveviewerelement_getView: (a: number) => number;
+export const perspectiveviewerelement_getViewConfig: (a: number) => number;
 export const perspectiveviewerelement_getTable: (a: number, b: number) => number;
+export const perspectiveviewerelement_getClient: (a: number, b: number) => number;
 export const perspectiveviewerelement_getRenderStats: (a: number, b: number) => void;
 export const perspectiveviewerelement_flush: (a: number) => number;
 export const perspectiveviewerelement_restore: (a: number, b: number) => number;
 export const perspectiveviewerelement_resetError: (a: number) => number;
-export const perspectiveviewerelement_save: (a: number, b: number, c: number) => number;
+export const perspectiveviewerelement_save: (a: number) => number;
 export const perspectiveviewerelement_download: (a: number, b: number) => number;
+export const perspectiveviewerelement_export: (a: number, b: number) => number;
 export const perspectiveviewerelement_copy: (a: number, b: number) => number;
 export const perspectiveviewerelement_reset: (a: number, b: number) => number;
 export const perspectiveviewerelement_resize: (a: number, b: number) => number;
@@ -49,7 +52,7 @@ export const perspectiveviewerelement_setThrottle: (a: number, b: number, c: num
 export const perspectiveviewerelement_toggleConfig: (a: number, b: number) => number;
 export const perspectiveviewerelement_getAllPlugins: (a: number) => number;
 export const perspectiveviewerelement_getPlugin: (a: number, b: number, c: number, d: number) => void;
-export const perspectiveviewerelement_get_model: (a: number) => number;
+export const perspectiveviewerelement___get_model: (a: number) => number;
 export const perspectiveviewerelement_toggleColumnSettings: (a: number, b: number, c: number) => number;
 export const perspectiveviewerelement_openColumnSettings: (a: number, b: number, c: number, d: number) => number;
 export const registerPlugin: (a: number, b: number) => void;
@@ -125,18 +128,34 @@ export const view_remove_delete: (a: number, b: number) => number;
 export const view_collapse: (a: number, b: number) => number;
 export const view_expand: (a: number, b: number) => number;
 export const view_set_depth: (a: number, b: number) => number;
+export const __wbg_jsvirtualdataslice_free: (a: number, b: number) => void;
+export const jsvirtualdataslice_new: () => number;
+export const jsvirtualdataslice_setCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number) => void;
+export const jsvirtualdataslice_setStringCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const jsvirtualdataslice_setIntegerCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const jsvirtualdataslice_setFloatCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const jsvirtualdataslice_setBooleanCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const jsvirtualdataslice_setDatetimeCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const __wbg_jsvirtualserver_free: (a: number, b: number) => void;
+export const jsvirtualserver_new: (a: number, b: number) => void;
+export const jsvirtualserver_handleRequest: (a: number, b: number, c: number) => number;
 export const proxysession_new: (a: number, b: number) => number;
-export const __wbindgen_export_0: (a: number, b: number) => number;
-export const __wbindgen_export_1: (a: number, b: number, c: number, d: number) => number;
-export const __wbindgen_export_2: (a: number) => void;
-export const __wbindgen_export_3: (a: number, b: number, c: number) => void;
-export const __wbindgen_export_4: WebAssembly.Table;
+export const __wasm_bindgen_func_elem_5617: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_457: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_18124: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_18117: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_17201: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_17129: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_5616: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_452: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_18145: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_18130: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_5618: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_13043: (a: number, b: number) => number;
+export const __wasm_bindgen_func_elem_12575: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_19812: (a: number, b: number, c: number, d: 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;
+export const __wbindgen_export4: (a: number, b: number, c: number) => void;
 export const __wbindgen_add_to_stack_pointer: (a: number) => number;
-export const __wbindgen_export_5: (a: number, b: number, c: number) => void;
-export const __wbindgen_export_6: (a: number, b: number, c: number) => void;
-export const __wbindgen_export_7: (a: number, b: number, c: number) => void;
-export const __wbindgen_export_8: (a: number, b: number) => number;
-export const __wbindgen_export_9: (a: number, b: number, c: number) => void;
-export const __wbindgen_export_10: (a: number, b: number) => void;
-export const __wbindgen_export_11: (a: number, b: number, c: number) => void;
-export const __wbindgen_export_12: (a: number, b: number, c: number, d: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "The `<perspective-viewer>` Custom Element, frontend for Perspective.js",
   "repository": {
     "type": "git",

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

@@ -12,7 +12,6 @@
 
 :host {
     .scroll-panel-container {
-        will-change: transform;
         width: 100%;
     }
 

package/src/less/plugin-selector.less

@@ -19,7 +19,10 @@
         }
 
         #plugin_selector_container {
-            min-height: 48px;
+            min-height: var(
+                --plugin-selector--height,
+                var(--status-bar--height, 48px)
+            );
             display: flex;
             white-space: nowrap;
             flex-direction: column;
@@ -36,7 +39,7 @@
                 min-height: 2px;
                 width: 100%;
                 background-color: var(--inactive--color, #6e6e6e);
-                margin-top: 1px;
+                margin-top: 2px;
             }
 
             .plugin-selector-options {
@@ -76,11 +79,18 @@
             .plugin-select-item {
                 // width: 48px;
                 padding-left: 9px;
-                height: 48px;
-                min-height: 48px;
+                height: var(
+                    --plugin-selector--height,
+                    var(--status-bar--height, 48px)
+                );
+                min-height: var(
+                    --plugin-selector--height,
+                    var(--status-bar--height, 48px)
+                );
                 display: flex;
                 align-items: center;
-                border-bottom: 1px solid var(--inactive--color, #6e6e6e);
+                border-bottom: 1px solid transparent;
+                box-shadow: 0px 1px var(--inactive--color, #6e6e6e);
                 cursor: pointer;
             }
 

package/src/less/status-bar.less

@@ -10,49 +10,61 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-:host {
-    #status_bar.titled {
-        padding-right: 108px;
-
-        #menu-bar {
-            opacity: 0.2;
-        }
+:host(:hover) {
+    #status_bar.settings-closed.floating {
+        opacity: 1;
+        transition: none;
     }
+}
 
+:host {
     // When settings open ...
     #main_column #status_bar,
     #main_column #status_bar.titled {
-        padding-left: 0px;
-        padding-right: 36px;
+        // padding-right: 10px;
 
         input::placeholder {
             color: var(--inactive--color);
         }
+    }
 
-        #menu-bar {
-            opacity: 1;
-        }
+    #status_bar.settings-closed {
+        padding-right: 10px;
     }
 
     #status_bar.updating {
         box-shadow: none;
     }
 
+    #status_bar.settings-closed.floating {
+        transition: opacity 0.2s;
+        opacity: 0;
+        position: absolute;
+        padding: 0px;
+        height: auto;
+        min-height: auto;
+        max-height: none;
+        gap: 6px;
+        top: calc((var(--status-bar--height, 48px) - 20px) / 2);
+        right: calc(min(48px, (var(--status-bar--height, 48px) - 20px) / 2));
+    }
+
     #status_bar {
         box-shadow: 0 13px 0 -12px var(--inactive--border-color);
         z-index: 1;
-        display: flex;
+        display: var(--status-bar--display, flex);
+        gap: 6px;
         align-items: center;
         background: var(--plugin--background);
-        padding: 0;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
+        padding: var(--status-bar--padding, 0 31px 0 8px);
+        position: relative;
         height: var(--status-bar--height, 48px);
+        min-height: var(--status-bar--height, 48px);
+        max-height: var(--status-bar--height, 48px);
         border-radius: var(--status-bar--border-radius);
         #status-bar-placeholder {
             margin: 0px;
+            margin-right: -5px;
             pointer-events: none;
         }
 
@@ -69,9 +81,9 @@
             display: inline-block;
             align-items: center;
             position: relative;
-            margin-top: 1px;
             min-width: 65px;
             overflow: hidden;
+            padding-top: 0.5px;
 
             &:after,
             input,
@@ -119,6 +131,11 @@
         .section {
             display: flex;
             align-items: center;
+            pointer-events: none;
+        }
+
+        .section > * {
+            pointer-events: all;
         }
 
         #spacer {
@@ -126,14 +143,19 @@
         }
 
         span#rows {
+            display: flex;
+            align-items: flex-end;
+            gap: 6px;
             flex: 0 1000 auto;
             overflow: hidden;
-            margin: 0px 14px;
+            margin: 0px 10px;
+            pointer-events: none;
             span {
                 margin: 0 !important;
             }
 
-            span {
+            span.x,
+            span.total {
                 color: var(--inactive--color);
             }
         }
@@ -187,10 +209,12 @@
             background-repeat: no-repeat;
             background-color: var(--icon--color);
             content: "";
-            -webkit-mask-size: cover;
-            mask-size: cover;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            mask-position: center;
             pointer-events: none;
             image-rendering: pixelated;
+            margin: 0 5px;
         }
 
         // span#status_updating
@@ -251,11 +275,35 @@
 
         div#status_reconnect {
             z-index: 2;
-            display: flex;
+            display: var(--status-indicator--display, flex);
             align-items: center;
-            border-radius: var(--status-bar--border-radius);
-            height: var(--status-bar--height, 48px);
+            border-radius: 3px;
+            margin: 0;
+            height: auto; //var(--status-bar--height, 48px);
+            border: 1px solid var(--status-ok-icon--border-color, transparent);
+            cursor: var(--status-ok-icon--cursor);
+            pointer-events: var(--status-indicator--pointer-events, none);
+            &:hover {
+                background-color: var(
+                    --status-ok-icon--hover--background-color,
+                    transparent
+                );
+                border-color: var(
+                    --status-ok-icon--hover--border-color,
+                    transparent
+                );
+                span#status {
+                    background-color: var(
+                        --status-ok-icon--hover--color,
+                        var(--icon--color)
+                    );
+                }
+                // color: var(--status-ok-icon--hover--background-color);
+            }
+
             &.errored {
+                pointer-events: all;
+                display: flex;
                 cursor: pointer;
             }
 
@@ -269,9 +317,9 @@
                 align-items: center;
                 justify-content: center;
                 height: 20px;
+                height: 20px;
                 border-radius: 10px;
                 color: var(--plugin--background);
-                height: 20px;
                 // pointer-events: all;
                 // mask-image: url(../svg/status_error.svg);
                 // -webkit-mask-image: url(../svg/status_error.svg);

package/src/less/viewer.less

@@ -22,24 +22,43 @@
 :host .sidebar_close_button {
     position: absolute;
     top: 0;
-    padding-top: 15px;
-    padding-bottom: 15px;
+    padding-top: calc(
+        (
+                var(
+                        --plugin-selector--height,
+                        var(--status-bar--height, 48px)
+                    ) -
+                    20px
+            ) /
+            2
+    );
+    padding-bottom: calc(
+        (
+                var(
+                        --plugin-selector--height,
+                        var(--status-bar--height, 48px)
+                    ) -
+                    20px
+            ) /
+            2
+    );
     z-index: 10000;
-    height: 48px;
+    height: var(--plugin-selector--height, var(--status-bar--height, 48px));
+
     &:hover {
         cursor: pointer;
     }
 
     .sidebar_close_button_inner {
         border-radius: 5px 0 0 5px;
-        height: 18px;
+        height: 20px;
         background-color: var(--plugin--background);
     }
 
     .sidebar_close_button_inner:before {
         display: inline-block;
-        height: 18px;
-        width: 26px;
+        height: 20px;
+        width: 20px;
         content: "";
         mask-size: cover;
         -webkit-mask-size: cover;
@@ -57,7 +76,7 @@
 
 :host #settings_close_button,
 :host #column_settings_close_button {
-    left: -26px;
+    left: -21px;
 }
 
 :host #debug_close_button.sidebar_close_button .sidebar_close_button_inner {
@@ -81,6 +100,7 @@
 :host #debug_open_button.sidebar_close_button {
     right: 0px;
     cursor: pointer;
+
     .sidebar_close_button_inner {
         background-color: transparent;
     }
@@ -107,8 +127,8 @@
         opacity: 1 !important;
     }
 
-    #settings_button,
-    #settings_button.titled {
+    #component_container #settings_button,
+    #component_container #settings_button.titled {
         opacity: 1;
     }
 }
@@ -125,6 +145,16 @@
         line-height: 1.25;
     }
 
+    #component_container {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
     #app_panel {
         position: absolute;
         bottom: 0px;
@@ -140,9 +170,16 @@
     }
 
     #modal_panel {
-        flex: 1 1 auto;
-        margin: var(--modal-panel--margin);
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
         overflow: hidden;
+        pointer-events: none;
+        & > * {
+            pointer-events: all;
+        }
     }
 
     #modal_panel > .split-panel-divider {
@@ -151,16 +188,20 @@
     }
 
     #status_bar {
-        // position: absolute;
-        // bottom: 0;
-        // left: 0;
-        // right: 0;
         height: var(--status-bar--height, 48px);
     }
 
+    #main_column_container {
+        position: relative;
+        display: flex;
+        flex: 1 1 auto;
+        overflow: hidden;
+    }
+
     #main_column {
         display: flex;
         flex: 1 1 auto;
+        overflow: hidden;
         flex-direction: column;
         position: relative;
         margin: var(--main-column--margin);
@@ -170,27 +211,12 @@
     }
 
     #main_panel_container {
-        position: absolute;
-        top: var(--status-bar--height, 48px);
-        bottom: 0;
-        left: 0;
-        right: 0;
+        position: relative;
+        height: 100%;
         box-shadow: var(--plugin--box-shadow, none);
         background: var(--plugin--background, none);
         overflow: hidden;
         border: var(--plugin--border, none);
-
-        &.settings-closed.titled {
-            top: var(--status-bar--height, 48px);
-        }
-
-        &.settings-closed {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-        }
     }
 
     #settings_panel {
@@ -262,30 +288,29 @@
         border-right-width: 0px;
     }
 
-    #settings_button {
+    #component_container > #settings_button {
         opacity: 0;
-    }
-
-    #settings_button.titled {
-        opacity: 0.2;
-    }
-
-    #settings_button {
         position: absolute;
         top: 0;
         right: 0;
-        margin: var(--settings-button--margin, 14px 0 0 0);
+        margin: var(--settings-button--margin, 10px 36px 0 0);
         padding: 0;
+    }
+
+    // #settings_button.titled {
+    //     opacity: 0.2;
+    // }
+
+    #close_button {
         background-color: var(--plugin--background);
-        margin-right: 14px;
-        padding: 2px 12px;
+        padding: 0px;
         overflow: hidden;
-        display: flex;
+        display: var(--close-button--display, none);
         align-items: center;
         justify-content: center;
         z-index: 10000;
         border: 1px solid var(--inactive--color);
-        border-radius: 2px;
+        border-radius: 5px;
         font-size: 10px;
         font-weight: normal;
 
@@ -295,34 +320,88 @@
             cursor: pointer;
         }
 
+        &:hover:before {
+            background-color: var(--plugin--background);
+        }
+
         &:before {
-            font-feature-settings: "liga";
-            content: var(--config-button-icon--content, "Configure");
+            // font-feature-settings: "liga";
+            // content: var(--config-button-icon--content, "Configure");
+            display: inline-block;
+            height: 20px;
+            width: 20px;
+            content: "";
+            mask-size: cover;
+            -webkit-mask-size: cover; //40px 35px;
+            background-repeat: no-repeat;
+            background-color: var(--icon--color);
+            mask-image: var(--close-icon--mask-image);
+            -webkit-mask-image: var(--close-icon--mask-image);
         }
     }
 
-    #main_column #settings_button {
-        border: none;
-        opacity: 1;
-        background-color: transparent;
-        margin-right: 0px;
+    #settings_button {
+        background-color: var(--plugin--background);
         padding: 0;
-        border-radius: 0px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10000;
+        border: 1px solid var(--inactive--color);
+        border-radius: 5px;
+        font-size: 10px;
+        font-weight: normal;
+        z-index: 3;
+
+        &:hover {
+            color: var(--plugin--background, inherit);
+            background-color: var(--icon--color);
+            cursor: pointer;
+        }
+
+        &:hover:before {
+            background-color: var(--plugin--background);
+        }
 
         &:before {
+            // font-feature-settings: "liga";
+            // content: var(--config-button-icon--content, "Configure");
             display: inline-block;
-            height: 18px;
-            width: 26px;
+            height: 20px;
+            width: 20px;
             content: "";
             mask-size: cover;
             -webkit-mask-size: cover; //40px 35px;
             background-repeat: no-repeat;
             background-color: var(--icon--color);
-            mask-image: var(--drawer-tab-icon--mask-image);
-            -webkit-mask-image: var(--drawer-tab-icon--mask-image);
+            mask-image: var(--drawer-tab-inverted-icon--mask-image);
+            -webkit-mask-image: var(--drawer-tab-inverted-icon--mask-image);
         }
     }
 
+    // #settings_button.floating {
+    //     border: none;
+    //     opacity: 1;
+    //     background-color: transparent;
+    //     margin-right: 0px;
+    //     padding: 0;
+    //     border-radius: 0px;
+
+    //     &:before {
+    //         display: inline-block;
+    //         height: 18px;
+    //         width: 26px;
+    //         content: "";
+    //         mask-size: cover;
+    //         -webkit-mask-size: cover; //40px 35px;
+    //         background-repeat: no-repeat;
+    //         background-color: var(--icon--color);
+    //         mask-image: var(--drawer-tab-icon--mask-image);
+    //         -webkit-mask-image: var(--drawer-tab-icon--mask-image);
+    //     }
+    // }
+
     .split-panel.orient-reverse
         > .split-panel-child:not(:last-child):not(.is-width-override) {
         max-width: 300px;
@@ -330,7 +409,10 @@
 
     #expr_panel_header,
     .sidebar_header {
-        min-height: 48px;
+        min-height: var(
+            --plugin-selector--height,
+            var(--status-bar--height, 48px)
+        );
         overflow: hidden;
         display: flex;
         flex-direction: column;