Merge pull request #2862 from finos/workspaces-fixes

Remove `workspace-layout-update` event debounce

Author: texodus

examples/blocks/src/superstore/index.html

@@ -6,17 +6,12 @@
         <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/pro.css" />
         <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-workspace/dist/css/pro.css" />
         <style>
-            body {
-                display: flex;
-                flex-direction: column;
+            perspective-workspace {
                 position: absolute;
                 top: 0;
+                bottom: 0;
                 left: 0;
                 right: 0;
-                bottom: 0;
-                margin: 0;
-                padding: 0;
-                overflow: hidden;
             }
         </style>
     </head>

packages/perspective-viewer-datagrid/src/less/row-hover.less

@@ -20,15 +20,12 @@ regular-table {
         tr:hover:after {
             border-color: var(--rt-hover--border-color, #c5c9d080) !important;
             background-color: transparent;
-            box-shadow: 0px 1px 0px var(--rt-hover--border-color, #c5c9d080),
-                0px 3px 0px rgba(0, 0, 0, 0.05), 0px 5px 0px rgba(0, 0, 0, 0.01);
+            box-shadow: 0px 1px 0px var(--rt-hover--border-color, #c5c9d080);
 
             &.psp-menu-open {
                 box-shadow: inset -2px 0px 0px var(--icon--color),
                     inset 2px 0px 0px var(--icon--color),
-                    0px 1px 0px var(--rt-hover--border-color, #c5c9d080),
-                    0px 3px 0px rgba(0, 0, 0, 0.05),
-                    0px 5px 0px rgba(0, 0, 0, 0.01);
+                    0px 1px 0px var(--rt-hover--border-color, #c5c9d080);
             }
         }
 
@@ -37,8 +34,7 @@ regular-table {
             box-shadow: inset -2px 0px 0px var(--icon--color),
                 inset 2px 0px 0px var(--icon--color),
                 inset 0px -2px 0px var(--icon--color),
-                0px 1px 0px var(--rt-hover--border-color, #c5c9d080),
-                0px 3px 0px rgba(0, 0, 0, 0.05), 0px 5px 0px rgba(0, 0, 0, 0.01);
+                0px 1px 0px var(--rt-hover--border-color, #c5c9d080);
         }
 
         tr:hover

packages/perspective-workspace/build.js

@@ -143,6 +143,8 @@ async function build_all() {
         pro_dark.compile().get("output.css")
     );
 
+    await Promise.all(BUILD.map(build)).catch(() => process.exit(1));
+
     try {
         await $`npx tsc --project ./tsconfig.json`.stdio(
             "inherit",
@@ -152,8 +154,6 @@ async function build_all() {
     } catch (e) {
         process.exit(1);
     }
-
-    await Promise.all(BUILD.map(build)).catch(() => process.exit(1));
 }
 
 build_all();

packages/perspective-workspace/src/less/menu.less

@@ -12,6 +12,10 @@
 
 @import "@lumino/widgets/style/menu.css";
 
+:host {
+    position: absolute;
+}
+
 .lm-Menu {
     font-size: 12px;
     padding: 8px;

packages/perspective-workspace/src/less/viewer.less

@@ -64,7 +64,7 @@
     }
 }
 
-perspective-viewer {
+::slotted(perspective-viewer) {
     flex: 1;
     position: relative;
     display: block;
@@ -76,10 +76,11 @@ perspective-viewer {
     overflow: visible !important;
 }
 
-.lm-mod-override-cursor {
+:host-context(.lm-mod-override-cursor) {
     cursor: grabbing !important;
 }
 
-.lm-mod-override-cursor perspective-viewer > * {
-    pointer-events: none;
+:host-context(.lm-mod-override-cursor) ::slotted(perspective-viewer),
+.context-menu ::slotted(perspective-viewer) {
+    --override-content-pointer-events: none;
 }

packages/perspective-workspace/src/less/workspace.less

@@ -21,15 +21,17 @@
 @import "@lumino/widgets/style/tabbar.css";
 @import "@lumino/widgets/style/tabpanel.css";
 
+@import "./injected.less";
+
 :host {
     @import "./tabbar.less";
     @import "./dockpanel.less";
     @import "./widget.less";
 
     background-color: hsl(210deg 18% 90%);
 
-    width: 100%;
-    height: 100%;
+    // width: 100%;
+    // height: 100%;
 
     .workspace {
         width: 100%;

packages/perspective-workspace/src/themes/pro-dark.less

@@ -22,7 +22,7 @@ perspective-indicator[theme="Pro Dark"] {
     --theme-name: "Pro Dark";
 }
 
-.lm-Menu {
+perspective-workspace-menu {
     @include perspective-viewer-pro-dark--colors;
 }
 
@@ -62,7 +62,7 @@ perspective-viewer[theme="Pro Dark"].workspace-master-widget {
     --plugin--background: @grey800;
 }
 
-.lm-Menu {
+perspective-workspace-menu {
     font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
         "Consolas", "Liberation Mono", monospace;
     font-weight: 300;

packages/perspective-workspace/src/themes/pro.less

@@ -24,7 +24,7 @@ perspective-workspace {
     background-color: #dadada;
 }
 
-.lm-Menu {
+perspective-workspace-menu {
     @include perspective-viewer-pro--colors;
     background-color: #ffffff;
 }
@@ -84,7 +84,7 @@ perspective-viewer[theme="Pro Light"].workspace-master-widget {
     --workspace-tabbar-tab--border-width: 1px 1px 0px 1px;
 }
 
-.lm-Menu {
+perspective-workspace-menu {
     font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
         "Consolas", "Liberation Mono", monospace;
     font-weight: 300;

packages/perspective-workspace/src/ts/perspective-workspace.ts

@@ -27,7 +27,6 @@ import {
 import { bindTemplate, CustomElementProto } from "./utils/custom_elements";
 import style from "../../build/css/workspace.css";
 import template from "../html/workspace.html";
-import injectedStyles from "../../build/css/injected.css";
 
 /**
  * A Custom Element for coordinating a set of `<perspective-viewer>` light DOM
@@ -52,13 +51,10 @@ import injectedStyles from "../../build/css/injected.css";
  *         name="View One"
  *         table="superstore">
  *     </perspective-viewer>
- *
  *     <perspective-viewer
- *         row-pivots='["State"]'
  *         name="View Two"
  *         table="superstore">
  *     </perspective-viewer>
- *
  * </perspective-workspace>
  * ```
  *
@@ -295,11 +291,6 @@ export class HTMLPerspectiveWorkspaceElement extends HTMLElement {
     }
 }
 
-const _injectStyle = document.createElement("style");
-_injectStyle.toggleAttribute("injected", true);
-_injectStyle.innerHTML = injectedStyles;
-document.head.appendChild(_injectStyle);
-
 bindTemplate(
     template,
     style

packages/perspective-workspace/src/ts/utils/custom_elements.ts

@@ -51,14 +51,9 @@ export function registerElement(
             `<style>${styleString.toString()}</style>` + template.innerHTML;
     }
 
-    template.innerHTML =
-        `<style id="psp_styles" scope="${template.getAttribute(
-            "id"
-        )}">test{}</style>` + template.innerHTML;
-
     const _perspective_element = class extends proto {
-        _initialized: boolean;
-        _initializing: boolean;
+        private _initialized: boolean;
+        private _initializing: boolean;
 
         constructor() {
             super();