@kanaries/graphic-walker 0.4.0 → 0.4.2

package/src/components/pivotTable/index.tsx

@@ -1,12 +1,16 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { StoreWrapper, useGlobalStore } from '../../store';
-import { PivotTableDataProps, PivotTableStoreWrapper, usePivotTableStore } from './store';
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+import { useGlobalStore } from '../../store';
+import { buildPivotTableService } from '../../services';
+import { toWorkflow } from '../../utils/workflow';
+import { dataQueryServer } from '../../computation/serverComputation';
+import { useAppRootContext } from '../../components/appRoot';
 import { observer } from 'mobx-react-lite';
 import LeftTree from './leftTree';
 import TopTree from './topTree';
 import {
     DeepReadonly,
     DraggableFieldState,
+    IComputationFunction,
     IDarkMode,
     IRow,
     IThemeKey,
@@ -14,24 +18,10 @@ import {
     IVisualConfig,
 } from '../../interfaces';
 import { INestNode } from './inteface';
-import { buildMetricTableFromNestTree, buildNestTree } from './utils';
 import { unstable_batchedUpdates } from 'react-dom';
 import MetricTable from './metricTable';
 import { toJS } from 'mobx';
-
-// const PTStateConnector = observer(function StateWrapper (props: PivotTableProps) {
-//     const store = usePivotTableStore();
-//     const { vizStore } = useGlobalStore();
-//     const { draggableFieldState } = vizStore;
-//     const { rows, columns } = draggableFieldState;
-//     return (
-//         <PivotTable
-//             {...props}
-//             draggableFieldState={draggableFieldState}
-//             visualConfig={visualConfig}
-//         />
-//     );
-// })
+import LoadingLayer from '../loadingLayer';
 
 interface PivotTableProps {
     themeKey?: IThemeKey;
@@ -40,23 +30,31 @@ interface PivotTableProps {
     loading: boolean;
     draggableFieldState: DeepReadonly<DraggableFieldState>;
     visualConfig: DeepReadonly<IVisualConfig>;
+    computationFunction: IComputationFunction
 }
-const PivotTable: React.FC<PivotTableProps> = (props) => {
-    const { data, draggableFieldState } = props;
-    // const store = usePivotTableStore();
-    // const { vizStore } = useGlobalStore();
-    // const { draggableFieldState } = vizStore;
-    const { rows, columns } = draggableFieldState;
+
+const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableComponent (props) {
+    const { data, visualConfig, loading, computationFunction } = props;
+    const appRef = useAppRootContext();
     const [leftTree, setLeftTree] = useState<INestNode | null>(null);
     const [topTree, setTopTree] = useState<INestNode | null>(null);
     const [metricTable, setMetricTable] = useState<any[][]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+
+    const { vizStore, commonStore } = useGlobalStore();
+    const { allFields, viewFilters, viewMeasures, sort, limit, draggableFieldState } = vizStore;
+    const { rows, columns } = draggableFieldState;
+    const { showTableSummary, defaultAggregated } = visualConfig;
+    const { tableCollapsedHeaderMap } = commonStore;
+    const aggData = useRef<IRow[]>([]);
+    const [ topTreeHeaderRowNum, setTopTreeHeaderRowNum ] = useState<number>(0);
 
     const dimsInRow = useMemo(() => {
-        return rows.filter((f) => f.analyticType === 'dimension');
+        return toJS(rows).filter((f) => f.analyticType === 'dimension');
     }, [rows]);
 
     const dimsInColumn = useMemo(() => {
-        return columns.filter((f) => f.analyticType === 'dimension');
+        return toJS(columns).filter((f) => f.analyticType === 'dimension');
     }, [columns]);
 
     const measInRow = useMemo(() => {
@@ -68,51 +66,157 @@ const PivotTable: React.FC<PivotTableProps> = (props) => {
     }, [columns]);
 
     useEffect(() => {
-        if ((dimsInRow.length > 0 || dimsInColumn.length > 0) && data.length > 0) {
-            const lt = buildNestTree(
-                dimsInRow.map((d) => d.fid),
-                data
-            );
-            const tt = buildNestTree(
-                dimsInColumn.map((d) => d.fid),
-                data
-            );
-            const metric = buildMetricTableFromNestTree(lt, tt, data);
-            unstable_batchedUpdates(() => {
-                setLeftTree(lt);
-                setTopTree(tt);
-                setMetricTable(metric);
-            });
+        if (tableCollapsedHeaderMap.size > 0) {
+            // If some visual configs change, clear the collapse state
+            // As tableCollapsedHeaderMap is also listened, data will be reaggregated later.
+            commonStore.resetTableCollapsedHeader();
+            // This forces data to be reaggregated if showTableSummary is on, as aggregation will be skipped later.
+            if (showTableSummary) {
+                aggregateGroupbyData();
+            }
+        } else {
+            aggregateThenGenerate();
+        }
+    }, [data]);
+
+    useEffect(() => {
+        if (showTableSummary) {
+            // If showTableSummary is on, there is no need to generate extra queries. Directly generate new table.
+            generateNewTable();
+        } else {
+            aggregateThenGenerate();
         }
-    }, [dimsInRow, dimsInColumn, data]);
+    }, [tableCollapsedHeaderMap]);
+
+    const aggregateThenGenerate = async() => {
+        await aggregateGroupbyData();
+        generateNewTable();
+    };
+
+    const generateNewTable = () => {
+        appRef.current?.updateRenderStatus('rendering');
+        setIsLoading(true);
+        buildPivotTableService(
+            dimsInRow,
+            dimsInColumn,
+            data,
+            aggData.current,
+            Array.from(tableCollapsedHeaderMap.keys()),
+            showTableSummary
+        )
+            .then((data) => {
+                const {lt, tt, metric} = data;
+                unstable_batchedUpdates(() => {
+                    setLeftTree(lt);
+                    setTopTree(tt);
+                    setMetricTable(metric);
+                });
+                appRef.current?.updateRenderStatus('idle');
+                setIsLoading(false);
+            })
+            .catch((err) => {
+                appRef.current?.updateRenderStatus('error');
+                console.log(err);
+                setIsLoading(false);
+            })
+    };
+
+    const aggregateGroupbyData = () => {
+        if (dimsInRow.length === 0 && dimsInColumn.length === 0) return;
+        if (data.length === 0) return;
+        let groupbyCombListInRow:IViewField[][]  = [];
+        let groupbyCombListInCol:IViewField[][]  = [];
+        if (showTableSummary) {
+            groupbyCombListInRow = dimsInRow.map((dim, idx) => dimsInRow.slice(0, idx));
+            groupbyCombListInCol = dimsInColumn.map((dim, idx) => dimsInColumn.slice(0, idx));
+        } else {
+            const collapsedDimList = Array.from(tableCollapsedHeaderMap).map(([key, path]) => path[path.length - 1].key);
+            const collapsedDimsInRow = dimsInRow.filter((dim) => collapsedDimList.includes(dim.fid));
+            const collapsedDimsInColumn = dimsInColumn.filter((dim) => collapsedDimList.includes(dim.fid));
+            groupbyCombListInRow = collapsedDimsInRow.map((dim) => dimsInRow.slice(0, dimsInRow.indexOf(dim) + 1));
+            groupbyCombListInCol = collapsedDimsInColumn.map((dim) => dimsInColumn.slice(0, dimsInColumn.indexOf(dim) + 1));
+        }
+        groupbyCombListInRow.push(dimsInRow);
+        groupbyCombListInCol.push(dimsInColumn);
+        const groupbyCombList:IViewField[][] = groupbyCombListInCol.flatMap(combInCol =>
+            groupbyCombListInRow.map(combInRow => [...combInCol, ...combInRow])
+        ).slice(0, -1);
+        setIsLoading(true);
+        appRef.current?.updateRenderStatus('computing');
+        const groupbyPromises: Promise<IRow[]>[] = groupbyCombList.map((dimComb) => {
+            const workflow = toWorkflow(
+                viewFilters,
+                allFields,
+                dimComb,
+                viewMeasures,
+                defaultAggregated,
+                sort,
+                limit > 0 ? limit : undefined
+            );
+            return dataQueryServer(computationFunction, workflow, limit > 0 ? limit : undefined)
+                .catch((err) => {
+                    appRef.current?.updateRenderStatus('error');
+                    return [];
+                });
+        });
+        return new Promise<void>((resolve, reject) => {
+            Promise.all(groupbyPromises)
+                .then((result) => {
+                    setIsLoading(false);
+                    const finalizedData = [...result.flat()];
+                    aggData.current = finalizedData;
+                    resolve();
+                })
+                .catch((err) => {
+                    console.error(err);
+                    setIsLoading(false);
+                    reject();
+                });
+        })
+
+    };
 
     // const { leftTree, topTree, metricTable } = store;
     return (
-        <div className="flex">
-            <table className="border border-gray-300 border-collapse">
-                <thead className="border border-gray-300">
-                    {new Array(dimsInColumn.length + (measInColumn.length > 0 ? 1 : 0)).fill(0).map((_, i) => (
-                        <tr className="" key={i}>
-                            <td className="p-2 m-1 text-xs text-white border border-gray-300" colSpan={dimsInRow.length + (measInRow.length > 0 ? 1 : 0)}>_</td>
-                        </tr>
-                    ))}
-                </thead>
-                {leftTree && <LeftTree data={leftTree} dimsInRow={dimsInRow} measInRow={measInRow} />}
-            </table>
-            <table className="border border-gray-300 border-collapse">
-                {topTree && <TopTree data={topTree} dimsInCol={dimsInColumn} measInCol={measInColumn} />}
-                {metricTable && <MetricTable matrix={metricTable} meaInColumns={measInColumn} meaInRows={measInRow} />}
-            </table>
+        <div className="relative">
+            {(isLoading || loading) && <LoadingLayer />}
+            <div className="flex">
+                <table className="border border-gray-300 border-collapse">
+                    <thead className="border border-gray-300">
+                        {new Array(topTreeHeaderRowNum).fill(0).map((_, i) => (
+                            <tr className="" key={i}>
+                                <td className="bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 p-2 m-1 text-xs border border-gray-300" colSpan={dimsInRow.length + (measInRow.length > 0 ? 1 : 0)}>_</td>
+                            </tr>
+                        ))}
+                    </thead>
+                    {leftTree && 
+                        <LeftTree 
+                            data={leftTree} 
+                            dimsInRow={dimsInRow} 
+                            measInRow={measInRow} 
+                            onHeaderCollapse={commonStore.updateTableCollapsedHeader.bind(commonStore)}
+                        />}
+                </table>
+                <table className="border border-gray-300 border-collapse">
+                    {topTree && 
+                        <TopTree 
+                            data={topTree} 
+                            dimsInCol={dimsInColumn} 
+                            measInCol={measInColumn} 
+                            onHeaderCollapse={commonStore.updateTableCollapsedHeader.bind(commonStore)}
+                            onTopTreeHeaderRowNumChange={(num) => setTopTreeHeaderRowNum(num)}
+                        />}
+                    {metricTable && 
+                        <MetricTable 
+                            matrix={metricTable} 
+                            meaInColumns={measInColumn} 
+                            meaInRows={measInRow} 
+                        />}
+                </table>
+            </div>
         </div>
-    );
-};
 
-export default PivotTable;
+    );
+});
 
-// const PivotTableApp: React.FC<PivotTableProps> = (props) => {
-//     return (
-//         <PivotTableStoreWrapper {...props}>
-//             <PivotTable />
-//         </PivotTableStoreWrapper>
-//     );
-// };
+export default PivotTable;

package/src/components/pivotTable/inteface.ts

@@ -1,8 +1,12 @@
 import { IAggregator } from "../../interfaces";
 
 export interface INestNode {
-    key: string;
-    value: string;
+    key: string | number;
+    value: string | number;
+    uniqueKey: string;
     fieldKey: string;
     children: INestNode[];
+    height: number;
+    isCollapsed: boolean;
+    path: Record<INestNode["fieldKey"], INestNode["value"]>[];
 }

package/src/components/pivotTable/leftTree.tsx

@@ -1,9 +1,10 @@
 import React, { ReactNode, useMemo } from 'react';
 import { INestNode } from './inteface';
 import { IField } from '../../interfaces';
+import { MinusCircleIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
 
 function getChildCount(node: INestNode): number {
-    if (node.children.length === 0) {
+    if (node.isCollapsed || node.children.length === 0) {
         return 1;
     }
     return node.children.map(getChildCount).reduce((a, b) => a + b, 0);
@@ -17,23 +18,34 @@ function getChildCount(node: INestNode): number {
  * @param cellRows
  * @returns
  */
-function renderTree(node: INestNode, dimsInRow: IField[], depth: number, cellRows: ReactNode[][], meaNumber: number) {
+function renderTree(node: INestNode, dimsInRow: IField[], depth: number, cellRows: ReactNode[][], meaNumber: number, onHeaderCollapse: (node: INestNode) => void) {
     const childrenSize = getChildCount(node);
+    const { isCollapsed } = node;
     if (depth > dimsInRow.length) {
         return;
     }
     cellRows[cellRows.length - 1].push(
         <td
             key={`${depth}-${node.fieldKey}-${node.value}`}
-            className="whitespace-nowrap p-2 text-xs text-gray-500 m-1 border border-gray-300"
-            rowSpan={childrenSize * Math.max(meaNumber, 1)}
+            className={`bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 align-top whitespace-nowrap p-2 text-xs m-1 border border-gray-300`}
+            colSpan={isCollapsed ? node.height + 1 : 1}
+            rowSpan={isCollapsed ? Math.max(meaNumber, 1) : childrenSize * Math.max(meaNumber, 1)}
         >
-            {node.value}
+            <div className="flex">
+                <div>{node.value}</div>
+                {node.height > 0 && node.key !== "__total" && (
+                    <>
+                        {isCollapsed && <PlusCircleIcon className="w-3 ml-1 self-center cursor-pointer" onClick={() => onHeaderCollapse(node)} />}
+                        {!isCollapsed && <MinusCircleIcon className="w-3 ml-1 self-center cursor-pointer" onClick={() => onHeaderCollapse(node)} />}
+                    </>
+                )}
+            </div>
         </td>
     );
+    if (isCollapsed) return
     for (let i = 0; i < node.children.length; i++) {
         const child = node.children[i];
-        renderTree(child, dimsInRow, depth + 1, cellRows, meaNumber);
+        renderTree(child, dimsInRow, depth + 1, cellRows, meaNumber, onHeaderCollapse);
         if (i < node.children.length - 1) {
             cellRows.push([]);
         }
@@ -44,12 +56,13 @@ export interface TreeProps {
     data: INestNode;
     dimsInRow: IField[];
     measInRow: IField[];
+    onHeaderCollapse: (node: INestNode) => void;
 }
 const LeftTree: React.FC<TreeProps> = (props) => {
-    const { data, dimsInRow, measInRow } = props;
+    const { data, dimsInRow, measInRow, onHeaderCollapse } = props;
     const nodeCells: ReactNode[] = useMemo(() => {
         const cellRows: ReactNode[][] = [[]];
-        renderTree(data, dimsInRow, 0, cellRows, measInRow.length);
+        renderTree(data, dimsInRow, 0, cellRows, measInRow.length, onHeaderCollapse);
         cellRows[0].shift();
         if (measInRow.length > 0) {
             const ans: ReactNode[][] = [];
@@ -58,7 +71,7 @@ const LeftTree: React.FC<TreeProps> = (props) => {
                     ...row,
                     <td
                         key={`0-${measInRow[0].fid}-${measInRow[0].aggName}`}
-                        className="whitespace-nowrap p-2 text-xs text-gray-500 m-1 border border-gray-300"
+                        className="bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 whitespace-nowrap p-2 text-xs m-1 border border-gray-300"
                     >
                         {measInRow[0].aggName}({measInRow[0].name})
                     </td>,
@@ -67,7 +80,7 @@ const LeftTree: React.FC<TreeProps> = (props) => {
                     ans.push([
                         <td
                             key={`${j}-${measInRow[j].fid}-${measInRow[j].aggName}`}
-                            className="whitespace-nowrap p-2 text-xs text-gray-500 m-1 border border-gray-300"
+                            className="bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 whitespace-nowrap p-2 text-xs m-1 border border-gray-300"
                         >
                             {measInRow[j].aggName}({measInRow[j].name})
                         </td>,
@@ -79,7 +92,7 @@ const LeftTree: React.FC<TreeProps> = (props) => {
         return cellRows;
     }, [data, dimsInRow, measInRow]);
     return (
-        <thead className="bg-gray-50 border border-gray-300 border border-gray-300">
+        <thead className="bg-gray-50 border border-gray-300">
             {nodeCells.map((row, rIndex) => (
                 <tr className="border border-gray-300" key={rIndex}>
                     {row}

package/src/components/pivotTable/metricTable.tsx

@@ -15,11 +15,10 @@ function getCellData (cell: IRow, measure: IField) {
     }
     return cell[meaKey];
 }
-const MetricTable: React.FC<MetricTableProps> = (props) => {
+const MetricTable: React.FC<MetricTableProps> = React.memo((props) => {
     const { matrix, meaInRows, meaInColumns } = props;
-
     return (
-        <tbody className="bg-white border-r border-b border-gray-300">
+        <tbody className="bg-white dark:bg-black text-gray-800 dark:text-gray-100 border-r border-b border-gray-300">
             {matrix.map((row, rIndex) => {
                 if (meaInRows.length !== 0) {
                     return meaInRows.map((rowMea, rmIndex) => {
@@ -31,7 +30,7 @@ const MetricTable: React.FC<MetricTableProps> = (props) => {
                                         if (meaInColumns.length !== 0) {
                                             return meaInColumns.map((colMea, cmIndex) => (
                                                 <td
-                                                    className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                                    className="whitespace-nowrap p-2 text-xs"
                                                     key={`${rIndex}-${cIndex}-${rowMea.fid}-${rowMea.aggName}-${colMea.fid}-${colMea.aggName}`}
                                                 >
                                                     {getCellData(cell, rowMea)} , {getCellData(cell, colMea)}
@@ -40,7 +39,7 @@ const MetricTable: React.FC<MetricTableProps> = (props) => {
                                         }
                                         return (
                                             <td
-                                                className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                                className="whitespace-nowrap p-2 text-xs"
                                                 key={`${rIndex}-${cIndex}-${rowMea.fid}-${rowMea.aggName}`}
                                             >
                                                 {getCellData(cell, rowMea)}
@@ -59,7 +58,7 @@ const MetricTable: React.FC<MetricTableProps> = (props) => {
                             if (meaInRows.length === 0 && meaInColumns.length !== 0) {
                                 return meaInColumns.map((colMea, cmIndex) => (
                                     <td
-                                        className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                        className="whitespace-nowrap p-2 text-xs"
                                         key={`${rIndex}-${cIndex}-${cmIndex}-${colMea.fid}-${colMea.aggName}`}
                                     >
                                         {
@@ -70,7 +69,7 @@ const MetricTable: React.FC<MetricTableProps> = (props) => {
                             }else if (meaInRows.length === 0 && meaInColumns.length === 0) {
                                 return (
                                     <td
-                                        className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                        className="whitespace-nowrap p-2 text-xs"
                                         key={`${rIndex}-${cIndex}`}
                                     >
                                         {`True`}
@@ -79,12 +78,12 @@ const MetricTable: React.FC<MetricTableProps> = (props) => {
                             } else {
                                 return meaInRows.flatMap((rowMea, rmIndex) => (
                                     <td
-                                        className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                        className="whitespace-nowrap p-2 text-xs"
                                         key={`${rIndex}-${cIndex}-${rmIndex}-${rowMea.fid}-${rowMea.aggName}`}
                                     >
                                         {meaInColumns.flatMap((colMea, cmIndex) => (
                                             <td
-                                                className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                                className="whitespace-nowrap p-2 text-xs"
                                                 key={`${rIndex}-${cIndex}-${rmIndex}-${cmIndex}-${colMea.fid}-${colMea.aggName}`}
                                             >
                                                 { getCellData(cell, rowMea) } , { getCellData(cell, colMea) }
@@ -102,6 +101,12 @@ const MetricTable: React.FC<MetricTableProps> = (props) => {
             })}
         </tbody>
     );
-};
+}, function areEqual(prevProps, nextProps) {
+    if (JSON.stringify(prevProps.matrix) === JSON.stringify(nextProps.matrix)) {
+        return true;
+    }
+    
+    return false;
+});
 
 export default MetricTable;

package/src/components/pivotTable/topTree.tsx

@@ -1,9 +1,10 @@
-import React, { ReactNode, useMemo } from 'react';
+import React, { ReactNode, useEffect, useMemo } from 'react';
 import { INestNode } from './inteface';
 import { IField } from '../../interfaces';
+import { MinusCircleIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
 
 function getChildCount(node: INestNode): number {
-    if (node.children.length === 0) {
+    if (node.isCollapsed || node.children.length === 0) {
         return 1;
     }
     return node.children.map(getChildCount).reduce((a, b) => a + b, 0);
@@ -17,23 +18,34 @@ function getChildCount(node: INestNode): number {
  * @param cellRows
  * @returns
  */
-function renderTree(node: INestNode, dimsInCol: IField[], depth: number, cellRows: ReactNode[][], meaNumber: number) {
+function renderTree(node: INestNode, dimsInCol: IField[], depth: number, cellRows: ReactNode[][], meaNumber: number, onHeaderCollapse: (node: INestNode) => void) {
     const childrenSize = getChildCount(node);
+    const { isCollapsed } = node;
     if (depth > dimsInCol.length) {
         return;
     }
     cellRows[depth].push(
         <td
-            key={`${depth}-${node.fieldKey}-${node.value}`}
-            className="whitespace-nowrap p-2 text-xs text-gray-500 m-1 border border-gray-300"
-            colSpan={childrenSize * Math.max(meaNumber, 1)}
+            key={`${depth}-${node.fieldKey}-${node.value}-${cellRows[depth].length}`}
+            className="bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 align-top whitespace-nowrap p-2 text-xs m-1 border border-gray-300"
+            colSpan={isCollapsed ? Math.max(meaNumber, 1) : childrenSize * Math.max(meaNumber, 1)}
+            rowSpan={isCollapsed ? node.height + 1 : 1}
         >
-            {node.value}
+            <div className="flex">
+                <div>{node.value}</div>
+                {node.height > 0 && node.key !== "__total" && (
+                    <>
+                        {isCollapsed && <PlusCircleIcon className="w-3 ml-1 self-center cursor-pointer" onClick={() => onHeaderCollapse(node)} />}
+                        {!isCollapsed && <MinusCircleIcon className="w-3 ml-1 self-center cursor-pointer" onClick={() => onHeaderCollapse(node)} />}
+                    </>
+                )}
+            </div>
         </td>
     );
+    if (isCollapsed) return;
     for (let i = 0; i < node.children.length; i++) {
         const child = node.children[i];
-        renderTree(child, dimsInCol, depth + 1, cellRows, meaNumber);
+        renderTree(child, dimsInCol, depth + 1, cellRows, meaNumber, onHeaderCollapse);
     }
 }
 
@@ -41,19 +53,35 @@ export interface TreeProps {
     data: INestNode;
     dimsInCol: IField[];
     measInCol: IField[];
+    onHeaderCollapse: (node: INestNode) => void;
+    onTopTreeHeaderRowNumChange: (num: number) => void;
 }
 const TopTree: React.FC<TreeProps> = (props) => {
-    const { data, dimsInCol, measInCol } = props;
-    const nodeCells: ReactNode[] = useMemo(() => {
+    const { data, dimsInCol, measInCol, onHeaderCollapse, onTopTreeHeaderRowNumChange } = props;
+    const nodeCells: ReactNode[][] = useMemo(() => {
         const cellRows: ReactNode[][] = new Array(dimsInCol.length + 1).fill(0).map(() => []);
-        renderTree(data, dimsInCol, 0, cellRows, measInCol.length);
-        const totalChildrenSize = cellRows[cellRows.length - 1].length;
+        renderTree(data, dimsInCol, 0, cellRows, measInCol.length, onHeaderCollapse);
+        const totalChildrenSize = getChildCount(data);
+
+        // if all children in one layer are collapsed, then we need to reset the rowSpan of all children to 1
+        cellRows.forEach((row: ReactNode[], rowIdx: number) => {
+            const rowSpanArr = row.map(child => React.isValidElement(child) ? child.props.rowSpan : 0)
+            if (rowSpanArr.length > 0 && rowSpanArr[0] > 1 && rowSpanArr.every(v => v === rowSpanArr[0])) {
+                row.forEach((childObj, childIdx) => {
+                    if (React.isValidElement(childObj)) {
+                        const newChild = React.cloneElement(childObj, {...childObj.props, rowSpan: 1});
+                        cellRows[rowIdx][childIdx] = newChild;
+                    }
+                })
+            }
+        });
+
         cellRows.push(
-            new Array(totalChildrenSize).fill(0).flatMap(() =>
+            new Array(totalChildrenSize).fill(0).flatMap((ele, idx) =>
                 measInCol.map((m) => (
                     <td
-                        key={`${cellRows.length}-${m.fid}-${m.aggName}`}
-                        className="whitespace-nowrap p-2 text-xs text-gray-500 m-1 border border-gray-300"
+                        key={`${cellRows.length}-${m.fid}-${m.aggName}-${idx}`}
+                        className="bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 whitespace-nowrap p-2 text-xs m-1 border border-gray-300"
                     >
                         {m.aggName}({m.name})
                     </td>
@@ -63,10 +91,15 @@ const TopTree: React.FC<TreeProps> = (props) => {
         cellRows.shift();
         return cellRows;
     }, [data, dimsInCol, measInCol]);
+
+    useEffect(() => {
+        onTopTreeHeaderRowNumChange(nodeCells.filter((row) => row.length > 0).length);
+    }, [nodeCells]);
+
     return (
-        <thead className="border border-gray-300 bg-gray-50 border border-gray-300">
+        <thead className="border border-gray-300 bg-gray-50">
             {nodeCells.map((row, rIndex) => (
-                <tr className="border border-gray-300" key={rIndex}>
+                <tr className={`${row?.length > 0 ? "" : "hidden"} border border-gray-300`} key={rIndex}>
                     {row}
                 </tr>
             ))}