@parca/profile 0.16.443 → 0.16.445

package/dist/ProfileView/index.js

@@ -12,7 +12,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Profiler, useCallback, useEffect, useState } from 'react';
+import { Profiler, useCallback, useEffect, useMemo, useState } from 'react';
+import { tableFromIPC } from 'apache-arrow';
 import cx from 'classnames';
 import { scaleLinear } from 'd3';
 import graphviz from 'graphviz-wasm';
@@ -25,9 +26,11 @@ import { Callgraph } from '../';
 import { jsonToDot } from '../Callgraph/utils';
 import ProfileIcicleGraph from '../ProfileIcicleGraph';
 import { FIELD_FUNCTION_NAME } from '../ProfileIcicleGraph/IcicleGraphArrow';
+import useMappingList, { useFilenamesList, } from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
 import { SourceView } from '../SourceView';
 import { Table } from '../Table';
-import VisualisationToolbar from '../components/VisualisationToolbar';
+import VisualisationToolbar, { IcicleGraphToolbar, TableToolbar, } from '../components/VisualisationToolbar';
+import ColorStackLegend from './ColorStackLegend';
 import { ProfileViewContextProvider } from './ProfileViewContext';
 import { VisualizationPanel } from './VisualizationPanel';
 function arrayEquals(a, b) {
@@ -46,8 +49,17 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
     const [graphvizLoaded, setGraphvizLoaded] = useState(false);
     const [callgraphSVG, setCallgraphSVG] = useState(undefined);
     const [currentSearchString, setSearchString] = useURLState('search_string');
+    const [colorStackLegend] = useURLState('color_stack_legend');
+    const [colorBy] = useURLState('color_by');
+    const isColorStackLegendEnabled = colorStackLegend === 'true';
+    const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : colorBy;
     const isDarkMode = useAppSelector(selectDarkMode);
     const isMultiPanelView = dashboardItems.length > 1;
+    const table = useMemo(() => {
+        return flamegraphData.arrow !== undefined ? tableFromIPC(flamegraphData.arrow.record) : null;
+    }, [flamegraphData.arrow]);
+    const mappingsList = useMappingList(flamegraphData.metadataMappingFiles);
+    const filenamesList = useFilenamesList(table);
     const { perf, profileViewExternalMainActions } = useParcaContext();
     useEffect(() => {
         // Reset the current path when the profile source changes
@@ -92,15 +104,15 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
             setCurPath(path);
         }
     };
-    const getDashboardItemByType = ({ type, isHalfScreen, setActionButtons, }) => {
+    const getDashboardItemByType = ({ type, isHalfScreen, }) => {
         switch (type) {
             case 'icicle': {
                 return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
                         id: 'icicleGraph',
                         onRender: perf?.onRender,
-                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamegraphData?.arrow, graph: flamegraphData?.data, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), loading: flamegraphData.loading, setActionButtons: setActionButtons, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
+                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamegraphData?.arrow, graph: flamegraphData?.data, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), loading: flamegraphData.loading, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
                             ? isHalfScreen
-                                ? (dimensions.width - 40) / 2
+                                ? (dimensions.width - 54) / 2
                                 : dimensions.width - 16
                             : 0, metadataMappingFiles: flamegraphData.metadataMappingFiles, metadataLoading: flamegraphData.metadataLoading }) }));
             }
@@ -110,10 +122,10 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                     dimensions?.width !== undefined ? (_jsx(Callgraph, { data: callgraphData.data, svgString: callgraphSVG, profileType: profileSource?.ProfileType(), width: isHalfScreen ? dimensions?.width / 2 : dimensions?.width })) : (_jsx(_Fragment, {}));
             }
             case 'table': {
-                return topTableData != null ? (_jsx(Table, { total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, unit: topTableData.unit, profileType: profileSource?.ProfileType(), setActionButtons: setActionButtons, currentSearchString: currentSearchString, setSearchString: setSearchString, isHalfScreen: isHalfScreen })) : (_jsx(_Fragment, {}));
+                return topTableData != null ? (_jsx(Table, { total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, unit: topTableData.unit, profileType: profileSource?.ProfileType(), currentSearchString: currentSearchString, setSearchString: setSearchString, isHalfScreen: isHalfScreen, metadataMappingFiles: flamegraphData.metadataMappingFiles })) : (_jsx(_Fragment, {}));
             }
             case 'source': {
-                return sourceData != null ? (_jsx(SourceView, { loading: sourceData.loading, data: sourceData.data, total: total, filtered: filtered, setActionButtons: setActionButtons })) : (_jsx(_Fragment, {}));
+                return sourceData != null ? (_jsx(SourceView, { loading: sourceData.loading, data: sourceData.data, total: total, filtered: filtered })) : (_jsx(_Fragment, {}));
             }
             default: {
                 return _jsx(_Fragment, {});
@@ -155,6 +167,15 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
     }, [groupBy, setGroupBy]);
     const showDivider = hasProfileSource &&
         (profileViewExternalMainActions === null || profileViewExternalMainActions === undefined);
+    const clearSelection = useCallback(() => {
+        setSearchString?.('');
+    }, [setSearchString]);
+    const getActionButtonsWithMultiPanelView = () => {
+        return {
+            icicle: _jsx(IcicleGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath }),
+            table: (_jsx(TableToolbar, { profileType: profileSource?.ProfileType(), total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })),
+        };
+    };
     return (_jsx(KeyDownProvider, { children: _jsxs(ProfileViewContextProvider, { value: { profileSource, compareMode }, children: [showDivider ? (_jsx(_Fragment, { children: _jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 h-[1px] w-full pb-4" }) })) : null, _jsx("div", { className: cx('flex w-full', hasProfileSource || profileViewExternalMainActions != null
                         ? 'justify-start'
                         : 'justify-end', {
@@ -162,10 +183,12 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                         'items-center mb-2': hasProfileSource,
                     }), children: _jsxs("div", { children: [hasProfileSource && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "text-xs font-medium", children: headerParts.length > 0 ? headerParts[0].replace(/"/g, '') : '' }), _jsx("div", { className: "text-xs font-medium", children: headerParts.length > 1
                                             ? headerParts[headerParts.length - 1].replace(/"/g, '')
-                                            : '' })] })), profileViewExternalMainActions != null ? profileViewExternalMainActions : null] }) }), _jsx(VisualisationToolbar, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, hasProfileSource: hasProfileSource, pprofdownloading: pprofDownloading, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: onDownloadPProf, isMultiPanelView: isMultiPanelView, dashboardItems: dashboardItems, curPath: curPath, setNewCurPath: setNewCurPath, profileType: profileSource?.ProfileType(), total: total, filtered: filtered, currentSearchString: currentSearchString, setSearchString: setSearchString, groupByLabels: flamegraphData.metadataLabels ?? [] }), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'), ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {
+                                            : '' })] })), profileViewExternalMainActions != null ? profileViewExternalMainActions : null] }) }), _jsx(VisualisationToolbar, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, hasProfileSource: hasProfileSource, pprofdownloading: pprofDownloading, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: onDownloadPProf, isMultiPanelView: isMultiPanelView, dashboardItems: dashboardItems, curPath: curPath, setNewCurPath: setNewCurPath, profileType: profileSource?.ProfileType(), total: total, filtered: filtered, currentSearchString: currentSearchString, setSearchString: setSearchString, groupByLabels: flamegraphData.metadataLabels ?? [] }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { compareMode: compareMode, mappings: colorByValue === 'binary' ? mappingsList : filenamesList, loading: flamegraphData.metadataLoading })), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'), ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {
                                     return (_jsx(Draggable, { draggableId: dashboardItem, index: index, isDragDisabled: !isMultiPanelView, children: (provided, snapshot) => (_createElement("div", { ref: provided.innerRef, ...provided.draggableProps, key: dashboardItem, className: cx('w-full min-h-96', snapshot.isDragging
                                                 ? 'bg-gray-200 dark:bg-gray-500'
-                                                : 'bg-white dark:bg-gray-900') },
-                                            _jsx(VisualizationPanel, { handleClosePanel: handleClosePanel, isMultiPanelView: isMultiPanelView, dashboardItem: dashboardItem, getDashboardItemByType: getDashboardItemByType, dragHandleProps: provided.dragHandleProps, index: index }))) }, dashboardItem));
+                                                : 'bg-white dark:bg-gray-900', isMultiPanelView
+                                                ? 'border-2 border-gray-100 dark:border-gray-700 rounded-md p-3'
+                                                : '') },
+                                            _jsx(VisualizationPanel, { handleClosePanel: handleClosePanel, isMultiPanelView: isMultiPanelView, dashboardItem: dashboardItem, getDashboardItemByType: getDashboardItemByType, dragHandleProps: provided.dragHandleProps, index: index, actionButtons: getActionButtonsWithMultiPanelView() }))) }, dashboardItem));
                                 }) })) }) }) })] }) }));
 };

package/dist/ProfileViewWithData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileViewWithData.d.ts","sourceRoot":"","sources":["../src/ProfileViewWithData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAK1E,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAK9C,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,mBAAmB,oCAG7B,wBAAwB,KAAG,GAAG,CAAC,OAmNjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ProfileViewWithData.d.ts","sourceRoot":"","sources":["../src/ProfileViewWithData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAK1E,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAK9C,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,mBAAmB,oCAG7B,wBAAwB,KAAG,GAAG,CAAC,OAiNjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/ProfileViewWithData.js

@@ -53,15 +53,13 @@ export const ProfileViewWithData = ({ queryClient, profileSource, }) => {
         binaryFrameFilter,
     });
     const { isLoading: profileMetadataLoading, response: profileMetadataResponse } = useQuery(queryClient, profileSource, QueryRequest_ReportType.PROFILE_METADATA, {
-        skip: !dashboardItems.includes('icicle'),
         nodeTrimThreshold,
         groupBy,
-        invertCallStack,
-        binaryFrameFilter: undefined,
     });
     const { perf } = useParcaContext();
     const { isLoading: tableLoading, response: tableResponse, error: tableError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TABLE_ARROW, {
         skip: !dashboardItems.includes('table'),
+        binaryFrameFilter,
     });
     const { isLoading: callgraphLoading, response: callgraphResponse, error: callgraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
         skip: !dashboardItems.includes('callgraph'),

package/dist/Table/index.d.ts

@@ -1,28 +1,6 @@
 import React from 'react';
-import { Vector } from 'apache-arrow';
 import { ProfileType } from '@parca/parser';
-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;
-}
+import { DataRow, DummyRow } from './utils/functions';
 export type Row = DataRow | DummyRow;
 export declare const isDummyRow: (row: Row) => row is DummyRow;
 interface TableProps {
@@ -36,13 +14,8 @@ interface TableProps {
     setActionButtons?: (buttons: React.JSX.Element) => void;
     isHalfScreen: boolean;
     unit?: string;
+    metadataMappingFiles?: string[];
 }
-export type ColumnName = 'flat' | 'flatPercentage' | 'flatDiff' | 'flatDiffPercentage' | 'cumulative' | 'cumulativePercentage' | 'cumulativeDiff' | 'cumulativeDiffPercentage' | 'name' | 'functionSystemName' | 'functionFileName' | 'mappingFile';
-export declare const getPercentageString: (value: bigint | number, total: bigint | number) => string;
-export declare const getRatioString: (value: bigint | number, total: bigint, filtered: bigint) => string;
-export declare const possibleColumns: string[];
 export declare const Table: React.NamedExoticComponent<TableProps>;
-export declare const addPlusSign: (num: string) => string;
-export declare const RowName: (mappingFileColumn: Vector | null, locationAddressColumn: Vector | null, functionNameColumn: Vector | null, row: number) => string;
 export default Table;
 //# sourceMappingURL=index.d.ts.map

package/dist/Table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAU/E,OAAO,EAAQ,MAAM,EAAgC,MAAM,cAAc,CAAC;AAW1E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAmB1C,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,GAAG,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErC,eAAO,MAAM,UAAU,QAAS,GAAG,KAAG,GAAG,IAAI,QAE5C,CAAC;AAIF,UAAU,UAAU;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,gBAAgB,GAChB,UAAU,GACV,oBAAoB,GACpB,YAAY,GACZ,sBAAsB,GACtB,gBAAgB,GAChB,0BAA0B,GAC1B,MAAM,GACN,oBAAoB,GACpB,kBAAkB,GAClB,aAAa,CAAC;AA4LlB,eAAO,MAAM,mBAAmB,UAAW,MAAM,GAAG,MAAM,SAAS,MAAM,GAAG,MAAM,KAAG,MAOpF,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,MAAM,GAAG,MAAM,SAAS,MAAM,YAAY,MAAM,KAAG,MAMxF,CAAC;AAEF,eAAO,MAAM,eAAe,UAa3B,CAAC;AAEF,eAAO,MAAM,KAAK,wCAoZhB,CAAC;AAEH,eAAO,MAAM,WAAW,QAAS,MAAM,KAAG,MAMzC,CAAC;AAEF,eAAO,MAAM,OAAO,sBACC,MAAM,GAAG,IAAI,yBACT,MAAM,GAAG,IAAI,sBAChB,MAAM,GAAG,IAAI,OAC5B,MAAM,KACV,MAoBF,CAAC;AAgDF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAsB/E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAS1C,OAAO,EAEL,OAAO,EACP,QAAQ,EAgBT,MAAM,mBAAmB,CAAC;AAe3B,MAAM,MAAM,GAAG,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErC,eAAO,MAAM,UAAU,QAAS,GAAG,KAAG,GAAG,IAAI,QAE5C,CAAC;AAIF,UAAU,UAAU;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAkID,eAAO,MAAM,KAAK,wCA6bhB,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/Table/index.js

@@ -18,9 +18,12 @@ import { tableFromIPC, vectorFromArray } from 'apache-arrow';
 import cx from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Table as TableComponent, TableSkeleton, useParcaContext, useURLState, } from '@parca/components';
-import { getLastItem, isSearchMatch, valueFormatter } from '@parca/utilities';
+import { useCurrentColorProfile } from '@parca/hooks';
+import { isSearchMatch, valueFormatter } from '@parca/utilities';
+import { getFilenameColors, getMappingColors } from '../ProfileIcicleGraph/IcicleGraphArrow/';
+import useMappingList, { useFilenamesList, } from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
 import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
-import { hexifyAddress } from '../utils';
+import { ROW_HEIGHT, RowName, addPlusSign, getCalleeRows, getCallerRows, getRowColor, getScrollTargetIndex, isFirstSubRow, isLastSubRow, isSubRow, ratioString, rowBgClassNames, sizeToBottomStyle, sizeToHeightStyle, sizeToWidthStyle, } from './utils/functions';
 import { getTopAndBottomExpandedRowModel } from './utils/topAndBottomExpandedRowModel';
 const FIELD_MAPPING_FILE = 'mapping_file';
 const FIELD_LOCATION_ADDRESS = 'location_address';
@@ -37,29 +40,6 @@ export const isDummyRow = (row) => {
     return 'size' in row;
 };
 let doubleClickTimer = null;
-const rowBgClassNames = (isExpanded, isSubRow) => {
-    return {
-        relative: true,
-        '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 sizeToBottomStyle = (size) => {
-    return {
-        bottom: `-${size * ROW_HEIGHT}px`,
-    };
-};
 const CustomRowRenderer = ({ row, usePointerCursor, onRowClick, onRowDoubleClick, enableHighlighting, shouldHighlightRow, rows, }) => {
     const data = row.original;
     const isExpanded = row.getIsExpanded();
@@ -121,85 +101,62 @@ const CustomRowRenderer = ({ row, usePointerCursor, onRowClick, onRowDoubleClick
                                 }, children: ['<-', " Callees"] })] })) : null, idx === 0 && _isSubRow ? paddingElement : 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 getPercentageString = (value, total) => {
-    if (total === 0n) {
-        return '0%';
-    }
-    const percentage = (Number(value) / Number(total)) * 100;
-    return `${percentage.toFixed(2)}%`;
-};
-export const getRatioString = (value, total, filtered) => {
-    if (filtered === 0n) {
-        return ` ${getPercentageString(value, total)}`;
-    }
-    return `${getPercentageString(value, total)} / ${getPercentageString(value, filtered)}`;
-};
-export const possibleColumns = [
-    'flat',
-    'flatPercentage',
-    'flatDiff',
-    'flatDiffPercentage',
-    'cumulative',
-    'cumulativePercentage',
-    'cumulativeDiff',
-    'cumulativeDiffPercentage',
-    'name',
-    'functionSystemName',
-    'functionFileName',
-    'mappingFile',
-];
-export const Table = React.memo(function Table({ data, total, filtered, profileType, loading, currentSearchString, setSearchString = () => { }, isHalfScreen, unit, }) {
+export const Table = React.memo(function Table({ data, total, filtered, profileType, loading, currentSearchString, setSearchString = () => { }, isHalfScreen, unit, metadataMappingFiles, }) {
+    const currentColorProfile = useCurrentColorProfile();
     const [dashboardItems] = useURLState('dashboard_items', {
         alwaysReturnArray: true,
     });
     const [tableColumns] = useURLState('table_columns', {
         alwaysReturnArray: true,
     });
+    const [colorBy, setColorBy] = useURLState('color_by');
     const { isDarkMode } = useParcaContext();
     const [expanded, setExpanded] = useState({});
     const [scrollToIndex, setScrollToIndex] = useState(undefined);
     const { compareMode } = useProfileViewContext();
-    const percentageString = (value, total) => {
-        if (total === 0n) {
-            return '0%';
+    const table = useMemo(() => {
+        if (loading || data == null) {
+            return null;
         }
-        const percentage = (Number(value) / Number(total)) * 100;
-        return `${percentage.toFixed(2)}%`;
-    };
-    const ratioString = (value) => {
-        if (filtered === 0n) {
-            return ` ${percentageString(value, total)}`;
+        return tableFromIPC(data);
+    }, [data, loading]);
+    const mappingsList = useMappingList(metadataMappingFiles);
+    const filenamesList = useFilenamesList(table);
+    const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : colorBy;
+    const mappingsListCount = useMemo(() => mappingsList.filter(m => m !== '').length, [mappingsList]);
+    // If there is only one mapping file, we want to color by filename by default.
+    useEffect(() => {
+        if (mappingsListCount === 1 && colorBy !== 'filename') {
+            setColorBy('filename');
         }
-        return `${percentageString(value, total)} / ${percentageString(value, filtered)}`;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mappingsListCount]);
+    const filenameColors = useMemo(() => {
+        const colors = getFilenameColors(filenamesList, isDarkMode, currentColorProfile);
+        return colors;
+    }, [isDarkMode, filenamesList, currentColorProfile]);
+    const mappingColors = useMemo(() => {
+        const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
+        return colors;
+    }, [isDarkMode, mappingsList, currentColorProfile]);
+    const colorByList = {
+        filename: filenameColors,
+        binary: mappingColors,
     };
+    const colorByColors = colorByList[colorByValue];
     const columnHelper = createColumnHelper();
     unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
     const columns = useMemo(() => {
         return [
+            columnHelper.accessor('color', {
+                id: 'color',
+                header: '',
+                cell: info => {
+                    const color = info.getValue();
+                    return _jsx("div", { className: "w-4 h-4 rounded-[4px]", style: { backgroundColor: color } });
+                },
+                size: 10,
+            }),
             columnHelper.accessor('flat', {
                 id: 'flat',
                 header: 'Flat',
@@ -217,7 +174,7 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
                     if (isDummyRow(info.row.original)) {
                         return '';
                     }
-                    return ratioString(info.getValue());
+                    return ratioString(info.getValue(), total, filtered);
                 },
                 size: 120,
                 meta: {
@@ -242,7 +199,7 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
                     if (isDummyRow(info.row.original)) {
                         return '';
                     }
-                    return ratioString(info.getValue());
+                    return ratioString(info.getValue(), total, filtered);
                 },
                 size: 120,
                 meta: {
@@ -267,7 +224,7 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
                     if (isDummyRow(info.row.original)) {
                         return '';
                     }
-                    return ratioString(info.getValue());
+                    return ratioString(info.getValue(), total, filtered);
                 },
                 size: 150,
                 meta: {
@@ -292,7 +249,7 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
                     if (isDummyRow(info.row.original)) {
                         return '';
                     }
-                    return ratioString(info.getValue());
+                    return ratioString(info.getValue(), total, filtered);
                 },
                 size: 170,
                 meta: {
@@ -325,6 +282,7 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
     }, [profileType, unit]);
     const [columnVisibility, setColumnVisibility] = useState(() => {
         return {
+            color: true,
             flat: true,
             flatPercentage: false,
             flatDiff: compareMode,
@@ -388,7 +346,7 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
         }
         newRow.toggleExpanded();
         setScrollToIndex(getScrollTargetIndex(rows, parentRow, newRow));
-    }, []);
+    }, [setScrollToIndex]);
     const shouldHighlightRow = useCallback((row) => {
         if (!('name' in row)) {
             return false;
@@ -407,12 +365,6 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
             },
         ];
     }, [compareMode]);
-    const table = useMemo(() => {
-        if (loading || data == null) {
-            return null;
-        }
-        return tableFromIPC(data);
-    }, [data, loading]);
     const rows = useMemo(() => {
         if (table == null || table.numRows === 0) {
             return [];
@@ -438,6 +390,7 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
             const mappingFile = mappingFileColumn?.get(i) ?? '';
             return {
                 id: i,
+                color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
                 name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
                 flat,
                 flatDiff,
@@ -465,7 +418,7 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
             rows.push(row);
         }
         return rows;
-    }, [table]);
+    }, [table, colorByColors, colorBy]);
     if (loading) {
         return (_jsx("div", { className: "overflow-clip h-[700px] min-h-[700px]", children: _jsx(TableSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
     }
@@ -482,64 +435,4 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
                             setExpanded(newState);
                         }, CustomRowRenderer: CustomRowRenderer, scrollToIndex: scrollToIndex, estimatedRowHeight: ROW_HEIGHT }) }) }) }, "table-loaded") }));
 });
-export const addPlusSign = (num) => {
-    if (num.charAt(0) === '0' || num.charAt(0) === '-') {
-        return num;
-    }
-    return `+${num}`;
-};
-export const RowName = (mappingFileColumn, locationAddressColumn, functionNameColumn, row) => {
-    if (mappingFileColumn === null) {
-        console.error('mapping_file column not found');
-        return '';
-    }
-    const mappingFile = mappingFileColumn?.get(row);
-    let mapping = '';
-    // Show the last item in the mapping file only if there are more than 1 mappings
-    if (mappingFile != null && mappingFileColumn.data.length > 1) {
-        mapping = `[${getLastItem(mappingFile) ?? ''}]`;
-    }
-    const functionName = functionNameColumn?.get(row) ?? '';
-    if (functionName !== null && functionName !== '') {
-        return `${mapping} ${functionName}`;
-    }
-    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;
-}
-function isLastSubRow(row, rows) {
-    const index = rows.indexOf(row);
-    const nextRow = rows[index + 1];
-    return nextRow == null || (!isSubRow(nextRow.original) && !nextRow.getIsExpanded());
-}
-function isFirstSubRow(row, rows) {
-    const index = rows.indexOf(row);
-    const prevRow = rows[index - 1];
-    return prevRow == null || (!isSubRow(prevRow.original) && !prevRow.getIsExpanded());
-}
 export default Table;

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

@@ -0,0 +1,49 @@
+import { type Row as RowType } from '@tanstack/table-core';
+import { Vector } from 'apache-arrow';
+import { colorByColors } from '../../ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes';
+export interface DataRow {
+    id: number;
+    color: string;
+    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;
+}
+export interface DummyRow {
+    size: number;
+    message?: string;
+    isTopSubRow?: boolean;
+    isBottomSubRow?: boolean;
+}
+export type Row = DataRow | DummyRow;
+export declare const addPlusSign: (num: string) => string;
+export declare const getRowColor: (colorByColors: colorByColors, mappingFileColumn: Vector | null, row: number, functionFileNameColumn: Vector | null, colorBy: string) => string;
+export declare const RowName: (mappingFileColumn: Vector | null, locationAddressColumn: Vector | null, functionNameColumn: Vector | null, row: number) => string;
+export declare const getRowsCount: (rows: Array<RowType<Row>>) => number;
+export declare function getScrollTargetIndex(rows: Array<RowType<Row>>, parentRow: RowType<Row>, newRow: RowType<Row>): number;
+export declare function isSubRow(row: Row): boolean;
+export declare function isLastSubRow(row: RowType<Row>, rows: Array<RowType<Row>>): boolean;
+export declare function isFirstSubRow(row: RowType<Row>, rows: Array<RowType<Row>>): boolean;
+export type ColumnName = 'flat' | 'flatPercentage' | 'flatDiff' | 'flatDiffPercentage' | 'cumulative' | 'cumulativePercentage' | 'cumulativeDiff' | 'cumulativeDiffPercentage' | 'name' | 'functionSystemName' | 'functionFileName' | 'mappingFile';
+export declare const rowBgClassNames: (isExpanded: boolean, isSubRow: boolean) => Record<string, boolean>;
+export declare const ROW_HEIGHT = 29;
+export declare const sizeToHeightStyle: (size: number) => Record<string, string>;
+export declare const sizeToWidthStyle: (size: number) => Record<string, string>;
+export declare const sizeToBottomStyle: (size: number) => Record<string, string>;
+export declare const getCallerRows: (callers: DataRow[]) => Row[];
+export declare const getCalleeRows: (callees: DataRow[]) => Row[];
+export declare const getPercentageString: (value: bigint | number, total: bigint | number) => string;
+export declare const getRatioString: (value: bigint | number, total: bigint, filtered: bigint) => string;
+export declare const possibleColumns: string[];
+export declare const percentageString: (value: bigint | number, total: bigint | number) => string;
+export declare const ratioString: (value: bigint | number, total: bigint, filtered: bigint) => string;
+//# sourceMappingURL=functions.d.ts.map

package/dist/Table/utils/functions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../../src/Table/utils/functions.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,GAAG,IAAI,OAAO,EAAC,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAIpC,OAAO,EAAC,aAAa,EAAC,MAAM,4DAA4D,CAAC;AAGzF,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,MAAM,GAAG,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErC,eAAO,MAAM,WAAW,QAAS,MAAM,KAAG,MAMzC,CAAC;AAEF,eAAO,MAAM,WAAW,kBACP,aAAa,qBACT,MAAM,GAAG,IAAI,OAC3B,MAAM,0BACa,MAAM,GAAG,IAAI,WAC5B,MAAM,KACd,MAwBF,CAAC;AAEF,eAAO,MAAM,OAAO,sBACC,MAAM,GAAG,IAAI,yBACT,MAAM,GAAG,IAAI,sBAChB,MAAM,GAAG,IAAI,OAC5B,MAAM,KACV,MAoBF,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAG,MAMxD,CAAC;AAEF,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EACzB,SAAS,EAAE,OAAO,CAAC,GAAG,CAAC,EACvB,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,GACnB,MAAM,CAgBR;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAE1C;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAIlF;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAInF;AAED,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,gBAAgB,GAChB,UAAU,GACV,oBAAoB,GACpB,YAAY,GACZ,sBAAsB,GACtB,gBAAgB,GAChB,0BAA0B,GAC1B,MAAM,GACN,oBAAoB,GACpB,kBAAkB,GAClB,aAAa,CAAC;AAElB,eAAO,MAAM,eAAe,eACd,OAAO,YACT,OAAO,KAChB,MAAM,CAAC,MAAM,EAAE,OAAO,CAMxB,CAAC;AAEF,eAAO,MAAM,UAAU,KAAK,CAAC;AAE7B,eAAO,MAAM,iBAAiB,SAAU,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAIrE,CAAC;AAEF,eAAO,MAAM,gBAAgB,SAAU,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAIpE,CAAC;AAEF,eAAO,MAAM,iBAAiB,SAAU,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAIrE,CAAC;AAEF,eAAO,MAAM,aAAa,YAAa,OAAO,EAAE,KAAG,GAAG,EAarD,CAAC;AAEF,eAAO,MAAM,aAAa,YAAa,OAAO,EAAE,KAAG,GAAG,EAarD,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAAW,MAAM,GAAG,MAAM,SAAS,MAAM,GAAG,MAAM,KAAG,MAOpF,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,MAAM,GAAG,MAAM,SAAS,MAAM,YAAY,MAAM,KAAG,MAMxF,CAAC;AAEF,eAAO,MAAM,eAAe,UAa3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,MAAM,GAAG,MAAM,SAAS,MAAM,GAAG,MAAM,KAAG,MAOjF,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,GAAG,MAAM,SAAS,MAAM,YAAY,MAAM,KAAG,MAMrF,CAAC"}