Merge pull request #3156 from perspective-dev/label-bar

Add `LabelBar` datagrid mode

Author: texodus

packages/viewer-d3fc/src/ts/plugin/plugin.ts

@@ -524,7 +524,7 @@ class HTMLPerspectiveViewerD3fcPluginElement extends HTMLElement {
      * causes non-cleared redraws duplicate column labels when calculating column name
      * resize/repositions - see `treemapLabel.js`.
      */
-    async resize(view) {
+    async resize(_view) {
         if (this.offsetParent !== null) {
             if (this._settings?.data !== undefined) {
                 this._draw();
@@ -536,13 +536,13 @@ class HTMLPerspectiveViewerD3fcPluginElement extends HTMLElement {
         }
     }
 
-    async restyle(view, _end_col, _end_row) {
+    async restyle(view) {
         let settings = this._settings;
         if (settings) {
             delete settings["colorStyles"];
             delete settings["textStyles"];
             if (this.isConnected) {
-                initialiseStyles(this._container, this._settings);
+                initialiseStyles(this._container, settings);
                 this.resize(view);
             }
         }

packages/viewer-d3fc/src/ts/tooltip/selectionEvent.ts

@@ -27,8 +27,13 @@ export const raiseEvent = (node, data, settings) => {
         [],
         [{ filter }],
     );
+
+    if (node.tagName !== "PERSPECTIVE-VIEWER") {
+        node = node.getRootNode().host.parentElement;
+    }
+
     node.dispatchEvent(
-        new CustomEvent("perspective-select", {
+        new CustomEvent("perspective-global-filter", {
             bubbles: true,
             composed: true,
             detail,

packages/viewer-datagrid/src/css/regular_table.css

@@ -97,34 +97,18 @@ perspective-viewer,
     cursor: pointer;
 }
 
-.psp-row-selected,
-:hover .psp-row-selected,
-:hover th.psp-tree-leaf.psp-row-selected,
-:hover th.psp-tree-label.psp-row-selected {
-    color: white !important;
-    background-color: var(--selected-row--background-color, #ea7319) !important;
-    border-color: var(--selected-row--background-color, #ea7319) !important;
-}
-
 regular-table.flat-group-rollup-mode.vertical-row-headers
     th.psp-tree-label:not(:last-of-type) {
     writing-mode: vertical-lr;
 }
 
-.psp-row-selected.psp-tree-label:not(:hover):before {
-    color: white;
-}
-
-regular-table:not(.flat-group-rollup-mode)
-    .psp-row-selected.psp-tree-label:not(:hover):before {
-    color: white;
-}
-
-.psp-row-subselected,
-:hover .psp-row-subselected,
-:hover th.psp-tree-leaf.psp-row-subselected,
-:hover th.psp-tree-label.psp-row-subselected {
-    background: rgba(234, 115, 25, 0.2) !important;
+.psp-select-region-inactive,
+:hover .psp-select-region-inactive,
+:hover th.psp-tree-leaf.psp-select-region-inactive,
+:hover th.psp-tree-label.psp-select-region-inactive {
+    background-color: var(--psp-inactive--color) !important;
+    color: var(--psp--background-color) !important;
+    border-color: var(--psp--background-color) !important;
 }
 
 .psp-error {
@@ -265,6 +249,7 @@ tbody th:last-of-type {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
 tbody th:empty {
     background-image: linear-gradient(
         to right,
@@ -316,12 +301,68 @@ regular-table:not(.flat-group-rollup-mode) {
 .psp-align-right {
     text-align: right;
 }
+
+.psp-color-mode-bar {
+    padding: 0 2px;
+}
+
+.psp-color-mode-label-bar {
+    position: relative;
+    padding: 0 2px;
+
+    .psp-bar {
+        isolation: isolate;
+        position: unset;
+    }
+
+    .psp-bar:after {
+        color: var(--psp-label-bar-bg);
+        content: var(--label);
+        mix-blend-mode: difference;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: inline-flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 0 5px;
+    }
+}
+
+.psp-label-bar {
+    inset: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0px;
+}
+
+.psp-label-bar-fill {
+    position: absolute;
+    top: 10%;
+    height: 80%;
+    background: var(--psp-label-bar-color);
+    pointer-events: none;
+}
+
+.psp-label-bar-text {
+    position: relative;
+    color: var(--psp-label-bar-bg);
+    mix-blend-mode: difference;
+    pointer-events: none;
+}
+
 .psp-align-left {
     text-align: left;
 }
+
 .psp-positive:not(:focus) {
     color: var(--psp-datagrid--pos-cell--color);
 }
+
 .psp-negative:not(:focus) {
     color: var(--psp-datagrid--neg-cell--color);
 }
@@ -363,6 +404,7 @@ regular-table table {
 
     th.psp-header-leaf {
         border-bottom-width: 0px;
+
         span {
             height: 23px;
             min-height: 23px;
@@ -395,18 +437,18 @@ regular-table table {
 regular-table
     tbody
     tr:hover
-    td.psp-select-region:not(.psp-row-selected):not(.psp-row-subselected),
+    td.psp-select-region:not(.psp-select-region-inactive),
 regular-table
     tbody
     tr:hover
     + tr
-    td.psp-select-region:not(.psp-row-selected):not(.psp-row-subselected) {
+    td.psp-select-region:not(.psp-select-region-inactive) {
     border-color: var(--psp--background-color) !important;
 }
 
 regular-table tbody tr:hover {
     td.psp-select-region.psp-menu-open {
-        &:not(.psp-row-selected):not(.psp-row-subselected) {
+        &:not(.psp-select-region-inactive) {
             box-shadow:
                 inset -2px 0px 0px var(--psp--background-color),
                 inset 2px 0px 0px var(--psp--background-color);
@@ -479,6 +521,7 @@ regular-table table tbody tr:hover + tr:after {
             rgba(0, 128, 255, 0.5)
         );
     }
+
     100% {
         background-color: var(
             --pulse--background-color-end,
@@ -494,6 +537,7 @@ regular-table table tbody tr:hover + tr:after {
             rgba(0, 128, 255, 0.5)
         );
     }
+
     100% {
         background-color: var(
             --pulse--background-color-end,
@@ -509,6 +553,7 @@ regular-table table tbody tr:hover + tr:after {
             rgba(255, 25, 0, 0.5)
         );
     }
+
     100% {
         background-color: var(
             --pulse--background-color-end,
@@ -524,6 +569,7 @@ regular-table table tbody tr:hover + tr:after {
             rgba(255, 25, 0, 0.5)
         );
     }
+
     100% {
         background-color: var(
             --pulse--background-color-end,

packages/viewer-datagrid/src/css/row-hover.css

@@ -14,10 +14,14 @@
 regular-table {
     tbody {
         tr:hover
-            th.psp-tree-leaf:not(.psp-row-selected):not(.psp-row-subselected),
+            th.psp-tree-leaf:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ),
         tr:hover
-            th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected),
-        tr:hover td:not(.psp-row-selected):not(.psp-row-subselected),
+            th.psp-tree-label:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ),
+        tr:hover td:not(.psp-select-region):not(.psp-select-region-inactive),
         tr:hover:after {
             border-color: var(
                 --psp-datagrid--hover--border-color,
@@ -36,7 +40,9 @@ regular-table {
         }
 
         tr:last-child:hover
-            td:not(.psp-row-selected):not(.psp-row-subselected).psp-menu-open {
+            td:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ).psp-menu-open {
             box-shadow:
                 inset -2px 0px 0px var(--psp--color),
                 inset 2px 0px 0px var(--psp--color),
@@ -46,11 +52,17 @@ regular-table {
 
         tr:hover
             + tr
-            th.psp-tree-leaf:not(.psp-row-selected):not(.psp-row-subselected),
+            th.psp-tree-leaf:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ),
         tr:hover
             + tr
-            th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected),
-        tr:hover + tr td:not(.psp-row-selected):not(.psp-row-subselected) {
+            th.psp-tree-label:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ),
+        tr:hover
+            + tr
+            td:not(.psp-select-region):not(.psp-select-region-inactive) {
             border-top-color: transparent;
         }
 
@@ -72,6 +84,7 @@ regular-table {
 
         tr:hover {
             color: inherit;
+
             th:first-child:not(:empty),
             th:first-child:empty + th:not(:empty),
             th:first-child:empty ~ th:empty + th:not(:empty),

packages/viewer-datagrid/src/css/toolbar.css

@@ -94,6 +94,10 @@
     -webkit-mask-image: var(--psp-toolbar-edit-mode-select-region--content);
 }
 
+#edit_mode[data-edit-mode="SELECT_ROW_TREE"]:before {
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-row-tree--content);
+}
+
 /* #edit_mode span:before { */
 /*     content: var(--edit-mode-toggle--content, "N/A"); */
 /* } */
@@ -124,6 +128,13 @@
     );
 }
 
+#edit_mode[data-edit-mode="SELECT_ROW_TREE"] span:before {
+    content: var(
+        --psp-label--edit-mode-select-row-tree--content,
+        "Tree Select"
+    );
+}
+
 #scroll_lock span:before {
     content: var(--psp-label--scroll-lock-toggle--content, "Free Scroll");
 }

packages/viewer-datagrid/src/ts/custom_elements/datagrid.ts

@@ -210,7 +210,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         return out.trim();
     }
 
-    async resize(): Promise<void> {
+    async resize(_view: View): Promise<void> {
         if (!this.isConnected || this.offsetParent == null) {
             return;
         }
@@ -225,25 +225,22 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         this.regular_table.clear();
     }
 
-    async save(): Promise<any> {
+    save(): any {
         return save.call(this);
     }
 
-    async restore(
-        token: DatagridPluginConfig,
-        columns_config?: ColumnsConfig,
-    ): Promise<any> {
+    restore(token: DatagridPluginConfig, columns_config?: ColumnsConfig): void {
         return restore.call(this, token, columns_config ?? {});
     }
 
-    async restyle(): Promise<void> {
+    async restyle(view: View): Promise<void> {
         // Get view from model if available, otherwise no-op
         if (this.model?._view) {
-            await this.draw(this.model._view);
+            await this.draw(view);
         }
     }
 
-    async delete(): Promise<void> {
+    delete(): void {
         this.disconnectedCallback();
         this._toolbar = undefined;
         if ((this.regular_table as any).table_model) {

packages/viewer-datagrid/src/ts/custom_elements/toolbar.ts

@@ -66,6 +66,7 @@ export class HTMLPerspectiveViewerDatagridToolbarElement extends HTMLElement {
         plugin._edit_button = this.shadowRoot!.querySelector(
             "#edit_mode",
         ) as HTMLElement;
+
         plugin._edit_button.addEventListener("click", () => {
             toggle_edit_mode.call(plugin);
             plugin.regular_table.draw();