fix for the issue of merging nested rows

Signed-off-by: Rasmus Lundsgaard <[email protected]>

Author: Rasmus Lundsgaard

js/core/viewbasedjsonmodel.ts

@@ -60,10 +60,13 @@ export class ViewBasedJSONModel extends MutableDataModel {
 
     // Creating merged row cell groups
     let mergedRowLocations = ArrayUtils.generateRowMergedCellLocations(this);
-    if (!ArrayUtils.validateMergingHierarchy(mergedColumnLocations)) {
+    if (!ArrayUtils.validateMergingHierarchy(mergedRowLocations)) {
       mergedRowLocations = [];
     }
-    this._rowCellGroups = ArrayUtils.generateRowCellGroups(mergedRowLocations);
+    this._mergedRowCellLocations = mergedRowLocations;
+    this._rowCellGroups = ArrayUtils.generateRowCellGroups(
+      this._mergedRowCellLocations,
+    );
   }
 
   /**
@@ -606,6 +609,7 @@ export class ViewBasedJSONModel extends MutableDataModel {
   protected _dataset: DataSource;
   protected readonly _transformState: TransformStateManager;
   private _mergedColumnCellLocations: any[];
+  private _mergedRowCellLocations: any[];
   private _rowCellGroups: CellGroup[];
   private _columnCellGroups: CellGroup[];
 }

js/utils.ts

@@ -98,12 +98,22 @@ export namespace ArrayUtils {
     const retArr = [];
     let curCol = [];
 
-    let prevVal = undefined;
     for (let i = 0; i < primaryKey.length; i++) {
+      let prevVal = undefined;
       let curMergedRange: any = [];
       for (let j = 0; j < dataset.length; j++) {
         const curVal = data[primaryKey[i]][j];
-        if (curMergedRange.length == 0 || prevVal == curVal) {
+        // if (curMergedRange.length == 0 || prevVal == curVal) {
+        const [parentGroupStart, parentGroupEnd] = getParentGroupPosition(
+            retArr,
+            j,
+            i,
+          );
+        if (
+            curMergedRange.length == 0 || (prevVal == curVal) &&
+            curMergedRange[0][0] >= parentGroupStart &&
+            j <= parentGroupEnd
+          ) {
           curMergedRange.push([j, i]);
         } else {
           curCol.push(curMergedRange);
@@ -119,6 +129,33 @@ export namespace ArrayUtils {
     return retArr;
   }
 
+  /**
+   * Returns [startRow, endRow] of parent column at the same row position.
+   * The 0th row will be the top level group, and the n-th will be the last.
+   * @param retArr array of merge cellgroups in all previous columns
+   * @param rowNum current row number
+   * @param colNum current column number
+   * @returns.[startRow, endRow] of previous column
+   */
+  function getParentGroupPosition(
+    retArr: any,
+    rowNum: number,
+    colNum: number,
+  ): number[] {
+    if (colNum === 0) {return [0, rowNum]};
+    for (let i = 0; i < retArr[colNum-1].length; i++) {
+      // iterate mergegroups of previous row
+      const curMergedGroup = retArr[colNum-1][i];
+      const curMergedGroupLen = curMergedGroup.length;
+      const firstRow = curMergedGroup[0][0];
+      const lastRow = curMergedGroup[curMergedGroupLen - 1][0];
+      if (rowNum >= firstRow && rowNum <= lastRow) {
+        return [firstRow!, lastRow!];
+      }
+    }
+    return [];
+  }
+
   /**
    * Checks whether the merged cell ranges conform to a valid hierarchy.
    * @param retVal boolean

ui-tests-ipw8/tests/ipydatagrid.test.ts-snapshots/dark-datagrid-nested-hierarchies-ipynb-cell-0-linux.png

@@ -0,0 +1,69 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "30354eb9",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "import pandas as pd\n",
+    "import ipydatagrid as g\n",
+    "\n",
+    "np.random.seed(1)\n",
+    "\n",
+    "# merging of lower level row headers\n",
+    "col_top_level = [\n",
+    "    \"VeryLongValueFactors\",\n",
+    "    \"VeryLongValueFactors\",\n",
+    "    \"Even Longer Momentum Factors\",\n",
+    "    \"Even Longer Momentum Factors\",\n",
+    "]\n",
+    "col_bottom_level = [\"Factor_A\", \"Factor_B\", \"Factor_C\", \"Factor_D\"]\n",
+    "# Rows\n",
+    "row_top_level = [\"Sector 1\", \"Sector 1\", \"Sector 2\", \"Sector 2\", \"Sector 3\"]\n",
+    "row_bottom_level = [\"Security A\", \"Security B\", \"Security C\", \"Security C\", \"Security C\"]\n",
+    "\n",
+    "nested_df = pd.DataFrame(\n",
+    "    np.random.randn(5, 4).round(4),\n",
+    "    columns=pd.MultiIndex.from_arrays([col_top_level, col_bottom_level]),\n",
+    "    index=pd.MultiIndex.from_arrays(\n",
+    "        [row_top_level, row_bottom_level], names=(\"Sector\", \"Ticker\")\n",
+    "    ),\n",
+    ")\n",
+    "\n",
+    "nested_grid = g.DataGrid(\n",
+    "    nested_df,\n",
+    "    base_column_size=80,\n",
+    "    base_column_header_size=35,\n",
+    "    base_row_header_size=80,\n",
+    "    layout={\"height\": \"180px\"}\n",
+    ")\n",
+    "\n",
+    "nested_grid"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.2"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

ui-tests-ipw8/tests/ipydatagrid.test.ts-snapshots/light-datagrid-nested-hierarchies-ipynb-cell-0-linux.png

@@ -130,7 +130,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.9.9"
+   "version": "3.10.13"
   }
  },
  "nbformat": 4,