Add SELECT_ROW_TREE selection mode

Signed-off-by: Andrew Stein <steinlink@gmail.com>

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 {
@@ -318,9 +302,33 @@ regular-table:not(.flat-group-rollup-mode) {
     text-align: right;
 }
 
+.psp-color-mode-bar {
+    padding: 0 2px;
+}
+
 .psp-color-mode-label-bar {
     position: relative;
-    isolation: isolate;
+    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 {
@@ -429,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);

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;
         }
@@ -233,10 +233,10 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         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);
         }
     }
 

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();

packages/viewer-datagrid/src/ts/data_listener/format_cell.ts

@@ -58,40 +58,29 @@ export function format_cell(
             ),
         );
 
-        const anchor = (val as number) >= 0 ? "left" : "right";
+        const anchor = (val as number) >= 0 ? "" : "justify-self:flex-end;";
         const pct = (a * 100).toFixed(2);
 
         if (plugin.number_fg_mode === "bar") {
             const div = this._div_factory.get();
             div.className = "psp-bar";
             div.setAttribute(
                 "style",
-                `width:calc(${pct}% - 4px);position:absolute;${anchor}:2px;height:80%;top:10%;pointer-events:none;`,
+                `${anchor}width:${pct}%;height:80%;top:10%;pointer-events:none;background:var(--psp-label-bar-color)`,
             );
 
             return div;
         } else {
-            const wrapper = this._div_factory.get();
-            wrapper.setAttribute("style", "");
-            wrapper.className = "psp-label-bar";
-            while (wrapper.firstChild) {
-                wrapper.removeChild(wrapper.firstChild);
-            }
-            const bar = document.createElement("div");
-            bar.className = "psp-label-bar-fill";
-            bar.setAttribute(
+            const formatter = FORMAT_CACHE.get(type, plugin);
+            const label = formatter ? formatter.format(val) : (val as string);
+
+            const div = this._div_factory.get();
+            div.className = "psp-bar";
+            div.setAttribute(
                 "style",
-                `width:calc(${pct}% - 4px);${anchor}:2px;`,
+                `--label:"${label}";${anchor}width:${pct}%;height:80%;top:10%;pointer-events:none;background:var(--psp-label-bar-color)`,
             );
-            const label = document.createElement("span");
-            label.className = "psp-label-bar-text";
-            const formatter = FORMAT_CACHE.get(type, plugin);
-            label.textContent = formatter
-                ? formatter.format(val)
-                : (val as string);
-            wrapper.appendChild(bar);
-            wrapper.appendChild(label);
-            return wrapper;
+            return div;
         }
     } else if (plugin?.format === "link" && type === "string") {
         const anchor = document.createElement("a");