Merge pull request #3002 from finos/aggregate-depth

Add `aggregate_depth` datagrid style config

Signed-off-by: Andrew Stein <[email protected]>

Author: texodus

.github/workflows/build.yaml

@@ -358,11 +358,11 @@ jobs:
                   PACKAGE: "perspective-rs"
 
             - name: Package
-              if: ${{ !contains(matrix.os, 'windows') }}
-              run: cargo package --allow-dirty -p perspective -p perspective-viewer -p perspective-js -p perspective-client -p perspective-server -p perspective-python
+              if: ${{ !contains(matrix.os, 'windows') && steps.config-step.outputs.FULL_RUN }}
+              run: cargo package --no-verify --allow-dirty -p perspective -p perspective-viewer -p perspective-js -p perspective-client -p perspective-server -p perspective-python
 
             - uses: actions/upload-artifact@v4
-              if: ${{ !contains(matrix.os, 'windows') }}
+              if: ${{ !contains(matrix.os, 'windows') && steps.config-step.outputs.FULL_RUN }}
               with:
                   name: perspective-rust
                   path: rust/target/package/*.crate

packages/perspective-viewer-datagrid/src/js/data_listener/index.js

@@ -82,15 +82,26 @@ export function createDataListener(viewer) {
             const path = this._column_paths[ipath];
             const path_parts = path.split("|");
             const column = columns[path] || new Array(y1 - y0).fill(null);
+            const agg_depth = Math.min(
+                regularTable[PRIVATE_PLUGIN_SYMBOL]?.[
+                    path_parts[this._config.split_by.length]
+                ]?.aggregate_depth || 0,
+                this._config.group_by.length
+            );
+
             data.push(
-                column.map((x) =>
-                    format_cell.call(
-                        this,
-                        path_parts[this._config.split_by.length],
-                        x,
-                        regularTable[PRIVATE_PLUGIN_SYMBOL]
-                    )
-                )
+                column.map((x, i) => {
+                    if (columns?.__ROW_PATH__?.[i]?.length < agg_depth) {
+                        return "";
+                    } else {
+                        return format_cell.call(
+                            this,
+                            path_parts[this._config.split_by.length],
+                            x,
+                            regularTable[PRIVATE_PLUGIN_SYMBOL]
+                        );
+                    }
+                })
             );
             metadata.push(column);
             if (is_settings_open) {

packages/perspective-viewer-datagrid/src/js/style_handlers/table_cell/boolean.js

@@ -11,13 +11,17 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 export function cell_style_boolean(plugin, td, metadata) {
-    const [hex] =
-        metadata.user === true
-            ? this._pos_fg_color
-            : metadata.user === false
-            ? this._neg_fg_color
-            : ["", 0, 0, 0, ""];
-
-    td.style.backgroundColor = "";
-    td.style.color = hex;
+    if (metadata._is_hidden_by_aggregate_depth) {
+        td.style.backgroundColor = "";
+        td.style.color = "";
+    } else {
+        const [hex] =
+            metadata.user === true
+                ? this._pos_fg_color
+                : metadata.user === false
+                ? this._neg_fg_color
+                : ["", 0, 0, 0, ""];
+        td.style.backgroundColor = "";
+        td.style.color = hex;
+    }
 }

packages/perspective-viewer-datagrid/src/js/style_handlers/table_cell/datetime.js

@@ -27,7 +27,10 @@ export function cell_style_datetime(plugin, td, metadata) {
         }
     })();
 
-    if (
+    if (metadata._is_hidden_by_aggregate_depth) {
+        td.style.backgroundColor = "";
+        td.style.color = "";
+    } else if (
         plugin?.datetime_color_mode === "foreground" &&
         metadata.user !== null
     ) {

packages/perspective-viewer-datagrid/src/js/style_handlers/table_cell/index.js

@@ -33,13 +33,26 @@ export function table_cell_style_listener(regularTable, viewer) {
     for (const tr of regularTable.children[0].children[1].children) {
         for (const td of tr.children) {
             const metadata = regularTable.getMeta(td);
+
             const column_name =
                 metadata.column_header?.[this._config.split_by.length];
 
             let type = get_psp_type.call(this, metadata);
             const plugin = plugins[column_name];
             const is_numeric = type === "integer" || type === "float";
 
+            // Check if aggregate depth hides this cell
+            metadata._is_hidden_by_aggregate_depth = ((x) =>
+                x === 0
+                    ? false
+                    : x - 1 <
+                      Math.min(
+                          this._config.group_by.length,
+                          plugin?.aggregate_depth
+                      ))(
+                metadata.row_header?.filter((x) => x !== undefined)?.length
+            );
+
             if (is_numeric) {
                 cell_style_numeric.call(
                     this,

packages/perspective-viewer-datagrid/src/js/style_handlers/table_cell/numeric.js

@@ -44,7 +44,10 @@ export function cell_style_numeric(plugin, td, metadata, is_settings_open) {
         const [hex, r, g, b, _gradhex] = bg_tuple;
 
         td.style.position = "";
-        if (plugin?.number_bg_mode === "color") {
+        if (metadata._is_hidden_by_aggregate_depth) {
+            td.style.animation = "";
+            td.style.backgroundColor = "";
+        } else if (plugin?.number_bg_mode === "color") {
             td.style.animation = "";
             td.style.backgroundColor = hex;
         } else if (plugin?.number_bg_mode === "gradient") {
@@ -99,7 +102,10 @@ export function cell_style_numeric(plugin, td, metadata, is_settings_open) {
         }
     })();
 
-    if (plugin?.number_fg_mode === "disabled") {
+    if (metadata._is_hidden_by_aggregate_depth) {
+        td.style.backgroundColor = "";
+        td.style.color = "";
+    } else if (plugin?.number_fg_mode === "disabled") {
         if (plugin?.number_bg_mode === "color") {
             const source = this._plugin_background;
             const foreground = infer_foreground_from_background(

packages/perspective-viewer-datagrid/src/js/style_handlers/table_cell/string.js

@@ -26,7 +26,13 @@ export function cell_style_string(plugin, td, metadata) {
         }
     })();
 
-    if (plugin?.string_color_mode === "foreground" && metadata.user !== null) {
+    if (metadata._is_hidden_by_aggregate_depth) {
+        td.style.backgroundColor = "";
+        td.style.color = "";
+    } else if (
+        plugin?.string_color_mode === "foreground" &&
+        metadata.user !== null
+    ) {
         td.style.color = hex;
         td.style.backgroundColor = "";
         if (plugin?.format === "link") {

rust/perspective-js/src/ts/perspective.node.ts

@@ -88,7 +88,7 @@ export function make_client(
 const CONTENT_TYPES: Record<string, string> = {
     ".js": "text/javascript",
     ".mjs": "text/javascript",
-    ".css": "text/css",
+    ".css": "text/css; charset=utf-8",
     ".json": "application/json",
     ".arrow": "arraybuffer",
     ".feather": "arraybuffer",

rust/perspective-viewer/src/less/column-dropdown.less

@@ -10,6 +10,8 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+@import "dom/scrollbar.less";
+
 @mixin icon {
     background-repeat: no-repeat;
     background-color: var(--icon--color);
@@ -35,7 +37,8 @@
     max-width: 300px;
     overflow: hidden;
     max-height: 600px;
-    overflow: scroll;
+    overflow: auto;
+    @include scrollbar;
 
     display: flex;
     flex-direction: column;

rust/perspective-viewer/src/less/column-settings-panel.less

@@ -178,6 +178,10 @@
         content: var(--sign-display-label--content, "Sign Display");
     }
 
+    label#aggregate-depth-label:before {
+        content: var(--aggregate-depth-label--content, "Aggregate Depth");
+    }
+
     label#max-value-label:before {
         content: var(--max-value-label--content, "Max Value");
     }