@parca/profile 0.16.379 → 0.16.380

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.380](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.379...@parca/profile@0.16.380) (2024-06-04)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.379 (2024-06-03)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileSource.d.ts

@@ -30,6 +30,7 @@ export declare class MergedProfileSelection implements ProfileSelection {
     mergeTo: number;
     query: Query;
     filterQuery: string | undefined;
+    profileSource: ProfileSource;
     constructor(mergeFrom: number, mergeTo: number, query: Query, filterQuery?: string);
     ProfileName(): string;
     HistoryParams(): {
@@ -42,6 +43,7 @@ export declare class ProfileDiffSource implements ProfileSource {
     a: ProfileSource;
     b: ProfileSource;
     filterQuery: string | undefined;
+    profileType: ProfileType;
     constructor(a: ProfileSource, b: ProfileSource, filterQuery?: string);
     DiffSelection(): ProfileDiffSelection;
     QueryRequest(): QueryRequest;
@@ -54,6 +56,7 @@ export declare class MergedProfileSource implements ProfileSource {
     mergeTo: number;
     query: Query;
     filterQuery: string | undefined;
+    profileType: ProfileType;
     constructor(mergeFrom: number, mergeTo: number, query: Query, filterQuery?: string);
     DiffSelection(): ProfileDiffSelection;
     QueryRequest(): QueryRequest;

package/dist/ProfileSource.js

@@ -67,6 +67,7 @@ export class MergedProfileSelection {
         this.mergeTo = mergeTo;
         this.query = query;
         this.filterQuery = filterQuery;
+        this.profileSource = new MergedProfileSource(this.mergeFrom, this.mergeTo, this.query, this.filterQuery);
     }
     ProfileName() {
         return this.query.profileName();
@@ -84,7 +85,7 @@ export class MergedProfileSelection {
         return 'merge';
     }
     ProfileSource() {
-        return new MergedProfileSource(this.mergeFrom, this.mergeTo, this.query, this.filterQuery);
+        return this.profileSource;
     }
 }
 export class ProfileDiffSource {
@@ -92,6 +93,7 @@ export class ProfileDiffSource {
         this.a = a;
         this.b = b;
         this.filterQuery = filterQuery;
+        this.profileType = a.ProfileType();
     }
     DiffSelection() {
         throw new Error('Method not implemented.');
@@ -112,7 +114,7 @@ export class ProfileDiffSource {
         };
     }
     ProfileType() {
-        return this.a.ProfileType();
+        return this.profileType;
     }
     Describe() {
         return (_jsx(_Fragment, { children: _jsx("p", { children: "Browse the comparison" }) }));
@@ -132,6 +134,7 @@ export class MergedProfileSource {
         this.mergeTo = mergeTo;
         this.query = query;
         this.filterQuery = filterQuery;
+        this.profileType = ProfileType.fromString(Query.parse(this.query.toString()).profileName());
     }
     DiffSelection() {
         return {
@@ -163,7 +166,7 @@ export class MergedProfileSource {
         };
     }
     ProfileType() {
-        return ProfileType.fromString(Query.parse(this.query.toString()).profileName());
+        return this.profileType;
     }
     stringMatchers() {
         return this.query.matchers

package/dist/Table/ColumnsVisibility.d.ts

@@ -1,7 +1,7 @@
-import { type VisibilityState } from '@tanstack/react-table';
-import { ColumnDef } from '.';
+import { type ColumnDef, type VisibilityState } from '@tanstack/react-table';
+import type { Row } from './';
 declare const ColumnsVisibility: ({ columns, visibility, setVisibility, }: {
-    columns: ColumnDef[];
+    columns: Array<ColumnDef<Row>>;
     visibility: VisibilityState;
     setVisibility: (id: string, visible: boolean) => void;
 }) => React.JSX.Element;

package/dist/Table/index.d.ts

@@ -2,18 +2,29 @@ import React from 'react';
 import { Vector } from 'apache-arrow';
 import { ProfileType } from '@parca/parser';
 import { type NavigateFunction } from '@parca/utilities';
-export interface ColumnDef {
-    id: string;
-    header: string;
-    accessorKey: string;
-    footer?: string;
-    cell?: (info: any) => string | number;
-    meta?: {
-        align: 'right' | 'left';
-    };
-    invertSorting?: boolean;
-    size?: number;
+export interface DataRow {
+    id: number;
+    name: string;
+    flat: bigint;
+    flatDiff: bigint;
+    cumulative: bigint;
+    cumulativeDiff: bigint;
+    mappingFile: string;
+    functionSystemName: string;
+    functionFileName: string;
+    callers?: DataRow[];
+    callees?: DataRow[];
+    subRows?: Row[];
+    isTopSubRow?: boolean;
+    isBottomSubRow?: boolean;
 }
+interface DummyRow {
+    size: number;
+    message?: string;
+    isTopSubRow?: boolean;
+    isBottomSubRow?: boolean;
+}
+export type Row = DataRow | DummyRow;
 interface TableProps {
     data?: Uint8Array;
     total: bigint;

package/dist/Table/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -12,13 +12,17 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { tableFromIPC } from 'apache-arrow';
+import { flexRender } from '@tanstack/react-table';
+import { createColumnHelper, } from '@tanstack/table-core';
+import { tableFromIPC, vectorFromArray } from 'apache-arrow';
+import cx from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Button, Table as TableComponent, TableSkeleton, useParcaContext, useURLState, } from '@parca/components';
 import { getLastItem, isSearchMatch, parseParams, valueFormatter, } from '@parca/utilities';
 import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import { hexifyAddress } from '../utils';
 import ColumnsVisibility from './ColumnsVisibility';
+import { getTopAndBottomExpandedRowModel } from './utils/topAndBottomExpandedRowModel';
 const FIELD_MAPPING_FILE = 'mapping_file';
 const FIELD_LOCATION_ADDRESS = 'location_address';
 const FIELD_FUNCTION_NAME = 'function_name';
@@ -28,11 +32,100 @@ const FIELD_FLAT = 'flat';
 const FIELD_FLAT_DIFF = 'flat_diff';
 const FIELD_CUMULATIVE = 'cumulative';
 const FIELD_CUMULATIVE_DIFF = 'cumulative_diff';
+const FIELD_CALLERS = 'callers';
+const FIELD_CALLEES = 'callees';
+const isDummyRow = (row) => {
+    return 'size' in row;
+};
+const rowBgClassNames = (isExpanded, isSubRow) => {
+    return {
+        'bg-indigo-100 dark:bg-gray-600': isSubRow,
+        'bg-indigo-50 dark:bg-gray-700': isExpanded,
+    };
+};
+const ROW_HEIGHT = 29;
+const sizeToHeightStyle = (size) => {
+    return {
+        height: `${size * ROW_HEIGHT}px`,
+    };
+};
+const sizeToWidthStyle = (size) => {
+    return {
+        width: `${size * ROW_HEIGHT}px`,
+    };
+};
+const sizeToTopStyle = (size) => {
+    return {
+        top: `${size * ROW_HEIGHT + 10}px`,
+    };
+};
+const getCallerLabelWidthStyle = (subRows) => {
+    let callerRows = subRows.filter(row => row.isTopSubRow).length;
+    if (callerRows < 3) {
+        callerRows = 3;
+    }
+    return sizeToWidthStyle(callerRows);
+};
+const getCalleeLabelWidthStyle = (subRows) => {
+    let calleeRows = subRows.filter(row => row.isBottomSubRow).length;
+    if (calleeRows < 3) {
+        calleeRows = 3;
+    }
+    return { ...sizeToWidthStyle(calleeRows), ...sizeToTopStyle(calleeRows) };
+};
+const CustomRowRenderer = ({ row, usePointerCursor, onRowClick, onRowDoubleClick, enableHighlighting, shouldHighlightRow, rows, }) => {
+    const data = row.original;
+    const isExpanded = row.getIsExpanded();
+    const _isSubRow = isSubRow(data);
+    const bgClassNames = rowBgClassNames(isExpanded, _isSubRow);
+    if (isDummyRow(data)) {
+        return (_jsx("tr", { className: cx(bgClassNames), children: _jsx("td", { colSpan: 100, className: `text-center`, style: sizeToHeightStyle(data.size), children: data.message }) }, row.id));
+    }
+    return (_jsx("tr", { className: cx(usePointerCursor === true ? 'cursor-pointer' : 'cursor-auto', 'relative', bgClassNames, {
+            'hover:bg-[#62626212] dark:hover:bg-[#ffffff12] ': !isExpanded && !_isSubRow,
+            'hover:bg-indigo-200 dark:hover:bg-indigo-500': isExpanded || _isSubRow,
+        }), onClick: onRowClick != null ? () => onRowClick(row.original) : undefined, onDoubleClick: onRowDoubleClick != null ? () => onRowDoubleClick(row, rows) : undefined, style: enableHighlighting !== true || shouldHighlightRow === undefined
+            ? undefined
+            : { opacity: shouldHighlightRow(row.original) ? 1 : 0.5 }, children: row.getVisibleCells().map((cell, idx) => {
+            return (_jsxs("td", { className: cx('p-1.5 align-top', {
+                    /* @ts-expect-error */
+                    'text-right': cell.column.columnDef.meta?.align === 'right',
+                    /* @ts-expect-error */
+                    'text-left': cell.column.columnDef.meta?.align === 'left',
+                }), children: [idx === 0 && isExpanded ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: `absolute top-0 left-0 bg-white dark:bg-indigo-500 px-1 uppercase -rotate-90 origin-top-left z-10 text-[10px] border-l border-y border-gray-200 dark:border-gray-700 text-left `, style: getCallerLabelWidthStyle(row.originalSubRows ?? []), children: ["Callers ", '->'] }), _jsxs("div", { className: `absolute left-[18px] bg-white dark:bg-indigo-500 px-1 uppercase -rotate-90 origin-bottom-left z-10 text-[10px] border-r border-y border-gray-200 dark:border-gray-700 `, style: getCalleeLabelWidthStyle(row.originalSubRows ?? []), children: ['<-', " Callees"] })] })) : null, flexRender(cell.column.columnDef.cell, cell.getContext())] }, cell.id));
+        }) }, row.id));
+};
+const getCallerRows = (callers) => {
+    if (callers.length === 0) {
+        return [{ size: 3, message: 'No callers.', isTopSubRow: true }];
+    }
+    const rows = callers.map(row => {
+        return { ...row, isTopSubRow: true };
+    });
+    if (rows.length >= 3) {
+        return rows;
+    }
+    return [...rows, { size: 3 - rows.length, message: '', isTopSubRow: true }];
+};
+const getCalleeRows = (callees) => {
+    if (callees.length === 0) {
+        return [{ size: 3, message: 'No callees.', isBottomSubRow: true }];
+    }
+    const rows = callees.map(row => {
+        return { ...row, isBottomSubRow: true };
+    });
+    if (rows.length >= 3) {
+        return rows;
+    }
+    return [{ size: 3 - rows.length, message: '', isBottomSubRow: true }, ...rows];
+};
 export const Table = React.memo(function Table({ data, total, filtered, profileType, navigateTo, loading, currentSearchString, setActionButtons, isHalfScreen, }) {
     const router = parseParams(window?.location.search);
     const [rawDashboardItems] = useURLState({ param: 'dashboard_items' });
     const [filterByFunctionInput] = useURLState({ param: 'filter_by_function' });
     const { isDarkMode } = useParcaContext();
+    const [expanded, setExpanded] = useState({});
+    const [scrollToIndex, setScrollToIndex] = useState(undefined);
     const { compareMode } = useProfileViewContext();
     const dashboardItems = useMemo(() => {
         if (rawDashboardItems !== undefined) {
@@ -53,11 +146,11 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
         }
         return `${percentageString(value, total)} / ${percentageString(value, filtered)}`;
     };
+    const columnHelper = createColumnHelper();
     const columns = useMemo(() => {
         return [
-            {
+            columnHelper.accessor('flat', {
                 id: 'flat',
-                accessorKey: 'flat',
                 header: 'Flat',
                 cell: info => valueFormatter(info.getValue(), profileType?.sampleUnit ?? '', 2),
                 size: 80,
@@ -65,21 +158,24 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
                     align: 'right',
                 },
                 invertSorting: true,
-            },
-            {
+            }),
+            columnHelper.accessor('flat', {
                 id: 'flatPercentage',
-                accessorKey: 'flat',
                 header: 'Flat (%)',
-                cell: info => ratioString(info.getValue()),
+                cell: info => {
+                    if (isDummyRow(info.row.original)) {
+                        return '';
+                    }
+                    return ratioString(info.getValue());
+                },
                 size: 120,
                 meta: {
                     align: 'right',
                 },
                 invertSorting: true,
-            },
-            {
+            }),
+            columnHelper.accessor('flatDiff', {
                 id: 'flatDiff',
-                accessorKey: 'flatDiff',
                 header: 'Flat Diff',
                 cell: info => addPlusSign(valueFormatter(info.getValue(), profileType?.sampleUnit ?? '', 2)),
                 size: 120,
@@ -87,21 +183,24 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
                     align: 'right',
                 },
                 invertSorting: true,
-            },
-            {
+            }),
+            columnHelper.accessor('flatDiff', {
                 id: 'flatDiffPercentage',
-                accessorKey: 'flatDiff',
                 header: 'Flat Diff (%)',
-                cell: info => ratioString(info.getValue()),
+                cell: info => {
+                    if (isDummyRow(info.row.original)) {
+                        return '';
+                    }
+                    return ratioString(info.getValue());
+                },
                 size: 120,
                 meta: {
                     align: 'right',
                 },
                 invertSorting: true,
-            },
-            {
+            }),
+            columnHelper.accessor('cumulative', {
                 id: 'cumulative',
-                accessorKey: 'cumulative',
                 header: 'Cumulative',
                 cell: info => valueFormatter(info.getValue(), profileType?.sampleUnit ?? '', 2),
                 size: 150,
@@ -109,21 +208,24 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
                     align: 'right',
                 },
                 invertSorting: true,
-            },
-            {
+            }),
+            columnHelper.accessor('cumulative', {
                 id: 'cumulativePercentage',
-                accessorKey: 'cumulative',
                 header: 'Cumulative (%)',
-                cell: info => ratioString(info.getValue()),
+                cell: info => {
+                    if (isDummyRow(info.row.original)) {
+                        return '';
+                    }
+                    return ratioString(info.getValue());
+                },
                 size: 150,
                 meta: {
                     align: 'right',
                 },
                 invertSorting: true,
-            },
-            {
+            }),
+            columnHelper.accessor('cumulativeDiff', {
                 id: 'cumulativeDiff',
-                accessorKey: 'cumulativeDiff',
                 header: 'Cumulative Diff',
                 cell: info => addPlusSign(valueFormatter(info.getValue(), profileType?.sampleUnit ?? '', 2)),
                 size: 170,
@@ -131,39 +233,42 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
                     align: 'right',
                 },
                 invertSorting: true,
-            },
-            {
+            }),
+            columnHelper.accessor('cumulativeDiff', {
                 id: 'cumulativeDiffPercentage',
-                accessorKey: 'cumulativeDiff',
                 header: 'Cumulative Diff (%)',
-                cell: info => ratioString(info.getValue()),
+                cell: info => {
+                    if (isDummyRow(info.row.original)) {
+                        return '';
+                    }
+                    return ratioString(info.getValue());
+                },
                 size: 170,
                 meta: {
                     align: 'right',
                 },
                 invertSorting: true,
-            },
-            {
+            }),
+            columnHelper.accessor('name', {
                 id: 'name',
-                accessorKey: 'name',
                 header: 'Name',
                 cell: info => info.getValue(),
-            },
-            {
+            }),
+            columnHelper.accessor('functionSystemName', {
                 id: 'functionSystemName',
-                accessorKey: 'functionSystemName',
                 header: 'Function System Name',
-            },
-            {
+                cell: info => info.getValue(),
+            }),
+            columnHelper.accessor('functionFileName', {
                 id: 'functionFileName',
-                accessorKey: 'functionFileName',
                 header: 'Function File Name',
-            },
-            {
+                cell: info => info.getValue(),
+            }),
+            columnHelper.accessor('mappingFile', {
                 id: 'mappingFile',
-                accessorKey: 'mappingFile',
                 header: 'Mapping File',
-            },
+                cell: info => info.getValue(),
+            }),
         ];
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [profileType]);
@@ -192,13 +297,45 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
         }
     }, [navigateTo, router]);
     const onRowClick = useCallback((row) => {
+        if (isDummyRow(row)) {
+            return;
+        }
         // If there is only one dashboard item, we don't want to select a span
         if (dashboardItems.length <= 1) {
             return;
         }
         selectSpan(row.name);
     }, [selectSpan, dashboardItems.length]);
+    const onRowDoubleClick = useCallback((row, rows) => {
+        if (isDummyRow(row.original)) {
+            return;
+        }
+        if (!isSubRow(row.original)) {
+            row.toggleExpanded();
+            return;
+        }
+        // find the original row for this subrow and toggle it
+        const newRow = rows.find(r => !isDummyRow(r.original) &&
+            !isDummyRow(row.original) &&
+            r.original.name === row.original.name &&
+            !isSubRow(r.original));
+        const parentRow = rows.find(r => {
+            const parent = row.getParentRow();
+            if (isDummyRow(parent.original) || isDummyRow(r.original)) {
+                return false;
+            }
+            return r.original.name === parent.original.name;
+        });
+        if (parentRow == null || newRow == null) {
+            return;
+        }
+        newRow.toggleExpanded();
+        setScrollToIndex(getScrollTargetIndex(rows, parentRow, newRow));
+    }, []);
     const shouldHighlightRow = useCallback((row) => {
+        if (!('name' in row)) {
+            return false;
+        }
         const name = row.name;
         return isSearchMatch(currentSearchString, name);
     }, [currentSearchString]);
@@ -234,44 +371,80 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
             },
         ];
     }, [compareMode]);
-    if (loading)
+    const table = useMemo(() => {
+        if (loading || data == null) {
+            return null;
+        }
+        return tableFromIPC(data);
+    }, [data, loading]);
+    const rows = useMemo(() => {
+        if (table == null || table.numRows === 0) {
+            return [];
+        }
+        const flatColumn = table.getChild(FIELD_FLAT);
+        const flatDiffColumn = table.getChild(FIELD_FLAT_DIFF);
+        const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+        const cumulativeDiffColumn = table.getChild(FIELD_CUMULATIVE_DIFF);
+        const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
+        const functionSystemNameColumn = table.getChild(FIELD_FUNCTION_SYSTEM_NAME);
+        const functionFileNameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
+        const mappingFileColumn = table.getChild(FIELD_MAPPING_FILE);
+        const locationAddressColumn = table.getChild(FIELD_LOCATION_ADDRESS);
+        const callersColumn = table.getChild(FIELD_CALLERS);
+        const calleesColumn = table.getChild(FIELD_CALLEES);
+        const getRow = (i) => {
+            const flat = flatColumn?.get(i) ?? 0n;
+            const flatDiff = flatDiffColumn?.get(i) ?? 0n;
+            const cumulative = cumulativeColumn?.get(i) ?? 0n;
+            const cumulativeDiff = cumulativeDiffColumn?.get(i) ?? 0n;
+            const functionSystemName = functionSystemNameColumn?.get(i) ?? '';
+            const functionFileName = functionFileNameColumn?.get(i) ?? '';
+            const mappingFile = mappingFileColumn?.get(i) ?? '';
+            return {
+                id: i,
+                name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
+                flat,
+                flatDiff,
+                cumulative,
+                cumulativeDiff,
+                functionSystemName,
+                functionFileName,
+                mappingFile,
+            };
+        };
+        const rows = [];
+        for (let i = 0; i < table.numRows; i++) {
+            const row = getRow(i);
+            const callerIndices = callersColumn?.get(i) ?? vectorFromArray([]);
+            const callers = Array.from(callerIndices.toArray().values()).map(rowIdx => {
+                return getRow(Number(rowIdx));
+            });
+            const calleeIndices = calleesColumn?.get(i) ?? vectorFromArray([]);
+            const callees = Array.from(calleeIndices.toArray().values()).map(rowIdx => {
+                return getRow(Number(rowIdx));
+            });
+            row.callers = callers;
+            row.callees = callees;
+            row.subRows = [...getCallerRows(callers), ...getCalleeRows(callees)];
+            rows.push(row);
+        }
+        return rows;
+    }, [table]);
+    if (loading) {
         return (_jsx("div", { className: "overflow-clip h-[700px] min-h-[700px]", children: _jsx(TableSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
-    if (data === undefined)
-        return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
-    const table = tableFromIPC(data);
-    if (table.numRows === 0)
+    }
+    if (rows.length === 0) {
         return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
-    const flatColumn = table.getChild(FIELD_FLAT);
-    const flatDiffColumn = table.getChild(FIELD_FLAT_DIFF);
-    const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
-    const cumulativeDiffColumn = table.getChild(FIELD_CUMULATIVE_DIFF);
-    const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
-    const functionSystemNameColumn = table.getChild(FIELD_FUNCTION_SYSTEM_NAME);
-    const functionFileNameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
-    const mappingFileColumn = table.getChild(FIELD_MAPPING_FILE);
-    const locationAddressColumn = table.getChild(FIELD_LOCATION_ADDRESS);
-    const rows = [];
-    // TODO: Figure out how to only read the data of the columns we need for the virtualized table
-    for (let i = 0; i < table.numRows; i++) {
-        const flat = flatColumn?.get(i) ?? 0n;
-        const flatDiff = flatDiffColumn?.get(i) ?? 0n;
-        const cumulative = cumulativeColumn?.get(i) ?? 0n;
-        const cumulativeDiff = cumulativeDiffColumn?.get(i) ?? 0n;
-        const functionSystemName = functionSystemNameColumn?.get(i) ?? '';
-        const functionFileName = functionFileNameColumn?.get(i) ?? '';
-        const mappingFile = mappingFileColumn?.get(i) ?? '';
-        rows.push({
-            name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
-            flat,
-            flatDiff,
-            cumulative,
-            cumulativeDiff,
-            functionSystemName,
-            functionFileName,
-            mappingFile,
-        });
     }
-    return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "h-full w-full", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: _jsx("div", { className: "relative", children: _jsx("div", { className: "font-robotoMono h-[80vh] w-full", children: _jsx(TableComponent, { data: rows, columns: columns, initialSorting: initialSorting, columnVisibility: columnVisibility, onRowClick: onRowClick, enableHighlighting: enableHighlighting, shouldHighlightRow: shouldHighlightRow, usePointerCursor: dashboardItems.length > 1 }) }) }) }, "table-loaded") }));
+    return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "h-full w-full", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: _jsx("div", { className: "relative", children: _jsx("div", { className: "font-robotoMono h-[80vh] w-full", children: _jsx(TableComponent, { data: rows, columns: columns, initialSorting: initialSorting, columnVisibility: columnVisibility, onRowClick: onRowClick, enableHighlighting: enableHighlighting, shouldHighlightRow: shouldHighlightRow, usePointerCursor: dashboardItems.length > 1, onRowDoubleClick: onRowDoubleClick, getSubRows: row => (isDummyRow(row) ? [] : row.subRows ?? []), getCustomExpandedRowModel: getTopAndBottomExpandedRowModel, expandedState: expanded, onExpandedChange: getNewState => {
+                            // We only want the new expanded row so passing the exisitng state as empty
+                            // @ts-expect-error
+                            let newState = getNewState({});
+                            if (Object.keys(newState)[0] === Object.keys(expanded)[0]) {
+                                newState = {};
+                            }
+                            setExpanded(newState);
+                        }, CustomRowRenderer: CustomRowRenderer, scrollToIndex: scrollToIndex, estimatedRowHeight: ROW_HEIGHT }) }) }) }, "table-loaded") }));
 });
 const addPlusSign = (num) => {
     if (num.charAt(0) === '0' || num.charAt(0) === '-') {
@@ -297,4 +470,30 @@ export const RowName = (mappingFileColumn, locationAddressColumn, functionNameCo
     const address = locationAddressColumn?.get(row) ?? 0;
     return hexifyAddress(address);
 };
+const getRowsCount = (rows) => {
+    if (rows.length < 6) {
+        return 6;
+    }
+    return rows.length;
+};
+function getScrollTargetIndex(rows, parentRow, newRow) {
+    const parentIndex = rows.indexOf(parentRow);
+    const newRowIndex = rows.indexOf(newRow);
+    let targetIndex = newRowIndex;
+    if (parentIndex > newRowIndex) {
+        // Adjusting the number of subs rows to scroll to the main row after expansion.
+        targetIndex -= getRowsCount(newRow.subRows);
+    }
+    if (parentIndex < newRowIndex) {
+        // If the parent row is above the new row, we need to adjust the number of subrows of the parent.
+        targetIndex += getRowsCount(parentRow.subRows);
+    }
+    if (targetIndex < 0) {
+        targetIndex = 0;
+    }
+    return targetIndex;
+}
+function isSubRow(row) {
+    return row.isTopSubRow === true || row.isBottomSubRow === true;
+}
 export default Table;

package/dist/Table/utils/topAndBottomExpandedRowModel.d.ts

@@ -0,0 +1,3 @@
+import { type RowData, type RowModel, type Table } from '@tanstack/table-core';
+export declare function getTopAndBottomExpandedRowModel<TData extends RowData>(): (table: Table<TData>) => () => RowModel<TData>;
+export declare function expandRows<TData extends RowData>(rowModel: RowModel<TData>): RowModel<TData>;