@parca/profile 0.18.3 → 0.19.0

package/dist/Sandwich/index.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs } 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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { tableFromIPC } from 'apache-arrow';
+import { AnimatePresence, motion } from 'framer-motion';
+import { QueryRequest_ReportType } from '@parca/client';
+import { TableSkeleton, useParcaContext, useURLState } from '@parca/components';
+import { useCurrentColorProfile } from '@parca/hooks';
+import { isSearchMatch } from '@parca/utilities';
+import useMappingList, { useFilenamesList, } from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
+import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
+import { useVisualizationState } from '../ProfileView/hooks/useVisualizationState';
+import { FIELD_FUNCTION_NAME } from '../Table';
+import { useColorManagement } from '../Table/hooks/useColorManagement';
+import { useTableConfiguration } from '../Table/hooks/useTableConfiguration';
+import { useQuery } from '../useQuery';
+import { CalleesSection } from './components/CalleesSection';
+import { CallersSection } from './components/CallersSection';
+import { TableSection } from './components/TableSection';
+import { processRowData } from './utils/processRowData';
+const Sandwich = React.memo(function Sandwich({ data, total, filtered, profileType, loading, isHalfScreen, unit, metadataMappingFiles, queryClient, profileSource, }) {
+    const currentColorProfile = useCurrentColorProfile();
+    const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
+    const { isDarkMode } = useParcaContext();
+    const [selectedRow, setSelectedRow] = useState(null);
+    const callersRef = React.useRef(null);
+    const calleesRef = React.useRef(null);
+    const callersCalleesContainerRef = useRef(null);
+    const [tableHeight, setTableHeight] = useState(undefined);
+    const { compareMode } = useProfileViewContext();
+    const { colorBy, setColorBy, curPathArrow, setCurPathArrow } = useVisualizationState();
+    const nodeTrimThreshold = useMemo(() => {
+        let width = 
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+        // subtract the padding
+        width = width - 12 - 16 - 12;
+        return (1 / width) * 100;
+    }, []);
+    const { isLoading: callersFlamegraphLoading, response: callersFlamegraphResponse, error: callersFlamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+        nodeTrimThreshold,
+        groupBy: [FIELD_FUNCTION_NAME],
+        invertCallStack: true,
+        binaryFrameFilter: [],
+        sandwichByFunction: sandwichFunctionName,
+        skip: sandwichFunctionName === undefined,
+    });
+    const { isLoading: calleesFlamegraphLoading, response: calleesFlamegraphResponse, error: calleesFlamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
+        nodeTrimThreshold,
+        groupBy: [FIELD_FUNCTION_NAME],
+        invertCallStack: false,
+        binaryFrameFilter: [],
+        sandwichByFunction: sandwichFunctionName,
+        skip: sandwichFunctionName === undefined,
+    });
+    const table = useMemo(() => {
+        if (loading || data == null) {
+            return null;
+        }
+        return tableFromIPC(data);
+    }, [data, loading]);
+    const mappingsList = useMappingList(metadataMappingFiles);
+    const filenamesList = useFilenamesList(table);
+    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');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mappingsListCount]);
+    const { colorByColors, colorByValue } = useColorManagement({
+        isDarkMode,
+        currentColorProfile,
+        mappingsList,
+        filenamesList,
+        colorBy,
+    });
+    unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
+    const tableConfig = useTableConfiguration({
+        unit,
+        total,
+        filtered,
+        compareMode,
+    });
+    const { columns, initialSorting, columnVisibility } = tableConfig;
+    const rows = useMemo(() => {
+        if (table == null || table.numRows === 0) {
+            return [];
+        }
+        return processRowData({
+            table,
+            colorByColors,
+            colorBy: colorByValue,
+        });
+    }, [table, colorByColors, colorByValue]);
+    useEffect(() => {
+        if (sandwichFunctionName !== undefined && selectedRow == null) {
+            // find the row with the sandwichFunctionName
+            const row = rows.find(row => {
+                return row.name.trim() === sandwichFunctionName.trim();
+            });
+            if (row != null) {
+                setSelectedRow(row);
+            }
+        }
+    }, [sandwichFunctionName, rows, selectedRow]);
+    // Update table height based on callers/callees container height
+    useEffect(() => {
+        const updateTableHeight = () => {
+            if (callersCalleesContainerRef.current != null) {
+                const containerHeight = callersCalleesContainerRef.current.getBoundingClientRect().height;
+                setTableHeight(containerHeight);
+            }
+        };
+        // Initial measurement
+        updateTableHeight();
+        // Update on window resize
+        window.addEventListener('resize', updateTableHeight);
+        // Use ResizeObserver if available for more accurate updates
+        let resizeObserver = null;
+        if (callersCalleesContainerRef.current != null && 'ResizeObserver' in window) {
+            resizeObserver = new ResizeObserver(updateTableHeight);
+            resizeObserver.observe(callersCalleesContainerRef.current);
+        }
+        return () => {
+            window.removeEventListener('resize', updateTableHeight);
+            if (resizeObserver != null) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, [sandwichFunctionName, callersFlamegraphResponse, calleesFlamegraphResponse]);
+    const onRowClick = useCallback((row) => {
+        setSelectedRow(row);
+        setSandwichFunctionName(row.name.trim());
+    }, [setSandwichFunctionName]);
+    const enableHighlighting = useMemo(() => {
+        return sandwichFunctionName != null && sandwichFunctionName?.length > 0;
+    }, [sandwichFunctionName]);
+    const shouldHighlightRow = useCallback((row) => {
+        if (!('name' in row)) {
+            return false;
+        }
+        const name = row.name;
+        return isSearchMatch(sandwichFunctionName, name);
+    }, [sandwichFunctionName]);
+    if (loading) {
+        return (_jsx("div", { className: "overflow-clip h-[700px] min-h-[700px]", children: _jsx(TableSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
+    }
+    if (rows.length === 0) {
+        return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
+    }
+    return (_jsx("section", { className: "flex flex-row h-full w-full", children: _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: _jsxs("div", { className: "relative flex flex-row", children: [_jsx(TableSection, { rows: rows, columns: columns, initialSorting: initialSorting, columnVisibility: columnVisibility, selectedRow: selectedRow, onRowClick: onRowClick, shouldHighlightRow: shouldHighlightRow, enableHighlighting: enableHighlighting, height: tableHeight, sandwichFunctionName: sandwichFunctionName }), sandwichFunctionName !== undefined && (_jsxs("div", { className: "w-[50%] flex flex-col", ref: callersCalleesContainerRef, children: [_jsx(CallersSection, { callersRef: callersRef, isHalfScreen: isHalfScreen, callersFlamegraphResponse: callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+                                        ? {
+                                            report: {
+                                                oneofKind: 'flamegraphArrow',
+                                                flamegraphArrow: callersFlamegraphResponse.report.flamegraphArrow,
+                                            },
+                                            total: callersFlamegraphResponse.total?.toString() ?? '0',
+                                        }
+                                        : undefined, callersFlamegraphLoading: callersFlamegraphLoading, callersFlamegraphError: callersFlamegraphError, filtered: filtered, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, metadataMappingFiles: metadataMappingFiles }), _jsx("div", { className: "h-4" }), _jsx(CalleesSection, { calleesRef: calleesRef, isHalfScreen: isHalfScreen, calleesFlamegraphResponse: calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+                                        ? {
+                                            report: {
+                                                oneofKind: 'flamegraphArrow',
+                                                flamegraphArrow: calleesFlamegraphResponse.report.flamegraphArrow,
+                                            },
+                                            total: calleesFlamegraphResponse.total?.toString() ?? '0',
+                                        }
+                                        : undefined, calleesFlamegraphLoading: calleesFlamegraphLoading, calleesFlamegraphError: calleesFlamegraphError, filtered: filtered, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, metadataMappingFiles: metadataMappingFiles })] }))] }) }, "sandwich-loaded") }) }));
+});
+export default Sandwich;

package/dist/Sandwich/utils/processRowData.d.ts

@@ -0,0 +1,11 @@
+import { type Table } from 'apache-arrow';
+import { type colorByColors } from '../../ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes';
+import { type DataRow } from '../../Table/utils/functions';
+interface ProcessRowDataProps {
+    table: Table | null;
+    colorByColors: colorByColors;
+    colorBy: string;
+}
+export declare function processRowData({ table, colorByColors, colorBy }: ProcessRowDataProps): DataRow[];
+export {};
+//# sourceMappingURL=processRowData.d.ts.map

package/dist/Sandwich/utils/processRowData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"processRowData.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/utils/processRowData.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,KAAK,EAAC,MAAM,cAAc,CAAC;AAExC,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,4DAA4D,CAAC;AAY9F,OAAO,EAAuB,KAAK,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAE/E,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,cAAc,CAAC,EAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAC,EAAE,mBAAmB,GAAG,OAAO,EAAE,CA0C9F"}

package/dist/Sandwich/utils/processRowData.js

@@ -0,0 +1,53 @@
+// 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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { FIELD_CUMULATIVE, FIELD_CUMULATIVE_DIFF, FIELD_FLAT, FIELD_FLAT_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_FUNCTION_SYSTEM_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../Table';
+import { RowName, getRowColor } from '../../Table/utils/functions';
+export function processRowData({ table, colorByColors, colorBy }) {
+    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 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,
+            colorProperty: {
+                color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
+                mappingFile,
+            },
+            name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
+            flat,
+            flatDiff,
+            cumulative,
+            cumulativeDiff,
+            functionSystemName,
+            functionFileName,
+            mappingFile,
+        };
+    };
+    return Array.from({ length: table.numRows }, (_, i) => getRow(i));
+}

package/dist/Table/ColorCell.d.ts

@@ -0,0 +1,7 @@
+interface ColorCellProps {
+    color: string;
+    mappingFile: string;
+}
+export declare const ColorCell: ({ color, mappingFile }: ColorCellProps) => JSX.Element;
+export {};
+//# sourceMappingURL=ColorCell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorCell.d.ts","sourceRoot":"","sources":["../../src/Table/ColorCell.tsx"],"names":[],"mappings":"AAaA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,2BAA0B,cAAc,KAAG,GAAG,CAAC,OAOpE,CAAC"}

package/dist/Table/ColorCell.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ColorCell = ({ color, mappingFile }) => (_jsx("div", { className: "w-4 h-4 rounded-[4px]", style: { backgroundColor: color }, "data-tooltip-id": "table-color-tooltip", "data-tooltip-content": mappingFile }));

package/dist/Table/MoreDropdown.d.ts

@@ -0,0 +1,5 @@
+declare const MoreDropdown: ({ functionName }: {
+    functionName: string;
+}) => React.JSX.Element;
+export default MoreDropdown;
+//# sourceMappingURL=MoreDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MoreDropdown.d.ts","sourceRoot":"","sources":["../../src/Table/MoreDropdown.tsx"],"names":[],"mappings":"AAkBA,QAAA,MAAM,YAAY,qBAAoB;IAAC,YAAY,EAAE,MAAM,CAAA;CAAC,KAAG,KAAK,CAAC,GAAG,CAAC,OAsDxE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Table/MoreDropdown.js

@@ -0,0 +1,39 @@
+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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { Menu } from '@headlessui/react';
+import { Icon } from '@iconify/react';
+import { useURLState } from '@parca/components';
+const MoreDropdown = ({ functionName }) => {
+    const [_, setSandwichFunctionName] = useURLState('sandwich_function_name');
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
+        alwaysReturnArray: true,
+    });
+    const onSandwichViewSelect = () => {
+        setSandwichFunctionName(functionName.trim());
+        setDashboardItems(['sandwich']);
+    };
+    const menuItems = [
+        {
+            label: 'Show in Sandwich view',
+            action: () => onSandwichViewSelect(),
+        },
+    ];
+    return (_jsx("div", { children: _jsx(Menu, { children: ({ open, close }) => (_jsxs(_Fragment, { children: [_jsx(Menu.Button, { onClick: () => {
+                            if (open) {
+                                close();
+                            }
+                        }, className: "inline-flex font-sans dark:bg-gray-900 dark:border-gray-600 justify-center w-full text-sm font-normal text-gray-600 dark:text-gray-200 bg-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75", children: _jsx(Icon, { icon: "mdi:dots-horizontal" }) }), open && (_jsxs(Menu.Items, { className: "font-sans absolute z-30 left-0 w-56 mt-2 py-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600", children: [_jsx("span", { className: "text-xs text-gray-400 capitalize px-4 py-3", children: "actions" }), menuItems.map(item => (_jsx(Menu.Button, { className: "group mb-px flex w-full items-center rounded-md px-4 py-2 text-sm text-gray-900 dark:text-white hover:bg-indigo-500 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500", onClick: item.action, children: item.label }, item.label)))] }))] })) }) }));
+};
+export default MoreDropdown;

package/dist/Table/hooks/useColorManagement.d.ts

@@ -0,0 +1,14 @@
+import { type ColorConfig } from '@parca/utilities';
+interface UseColorManagementProps {
+    isDarkMode: boolean;
+    currentColorProfile: ColorConfig;
+    mappingsList: string[];
+    filenamesList: string[];
+    colorBy: string;
+}
+export declare function useColorManagement({ isDarkMode, currentColorProfile, mappingsList, filenamesList, colorBy, }: UseColorManagementProps): {
+    colorByColors: Record<string, string>;
+    colorByValue: string;
+};
+export {};
+//# sourceMappingURL=useColorManagement.d.ts.map

package/dist/Table/hooks/useColorManagement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorManagement.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useColorManagement.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAIlD,UAAU,uBAAuB;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,EAAE,WAAW,CAAC;IACjC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,OAAO,GACR,EAAE,uBAAuB,GAAG;IAC3B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,YAAY,EAAE,MAAM,CAAC;CACtB,CAqBA"}

package/dist/Table/hooks/useColorManagement.js

@@ -0,0 +1,32 @@
+// 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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { useMemo } from 'react';
+import { getFilenameColors, getMappingColors } from '../../ProfileIcicleGraph/IcicleGraphArrow';
+export function useColorManagement({ isDarkMode, currentColorProfile, mappingsList, filenamesList, colorBy, }) {
+    const filenameColors = useMemo(() => {
+        return getFilenameColors(filenamesList, isDarkMode, currentColorProfile);
+    }, [isDarkMode, filenamesList, currentColorProfile]);
+    const mappingColors = useMemo(() => {
+        return getMappingColors(mappingsList, isDarkMode, currentColorProfile);
+    }, [isDarkMode, mappingsList, currentColorProfile]);
+    const colorByList = {
+        filename: filenameColors,
+        binary: mappingColors,
+    };
+    const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : colorBy;
+    const colorByColors = colorByList[colorByValue];
+    return {
+        colorByColors,
+        colorByValue,
+    };
+}

package/dist/Table/hooks/useTableConfiguration.d.ts

@@ -0,0 +1,21 @@
+import { type ColumnDef } from '@tanstack/table-core';
+import { type Row } from '..';
+import { type ColumnName } from '../utils/functions';
+interface UseTableConfigurationProps {
+    unit?: string;
+    total: bigint;
+    filtered: bigint;
+    compareMode: boolean;
+    isSandwich?: boolean;
+}
+interface TableConfiguration {
+    columns: Array<ColumnDef<Row>>;
+    initialSorting: Array<{
+        id: string;
+        desc: boolean;
+    }>;
+    columnVisibility: Record<ColumnName, boolean>;
+}
+export declare function useTableConfiguration({ unit, total, filtered, compareMode, }: UseTableConfigurationProps): TableConfiguration;
+export {};
+//# sourceMappingURL=useTableConfiguration.d.ts.map

package/dist/Table/hooks/useTableConfiguration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableConfiguration.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useTableConfiguration.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAqB,KAAK,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAKxE,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,IAAI,CAAC;AAG5B,OAAO,EAA2B,KAAK,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAE7E,UAAU,0BAA0B;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,kBAAkB;IAC1B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/B,cAAc,EAAE,KAAK,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAC,CAAC,CAAC;IACnD,gBAAgB,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAC/C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAW,GACZ,EAAE,0BAA0B,GAAG,kBAAkB,CAgMjD"}

package/dist/Table/hooks/useTableConfiguration.js

@@ -0,0 +1,204 @@
+import { jsx as _jsx } 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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { useEffect, useMemo, useState } from 'react';
+import { createColumnHelper } from '@tanstack/table-core';
+import { useURLState } from '@parca/components';
+import { valueFormatter } from '@parca/utilities';
+import { ColorCell } from '../ColorCell';
+import MoreDropdown from '../MoreDropdown';
+import { addPlusSign, ratioString } from '../utils/functions';
+export function useTableConfiguration({ unit = '', total, filtered, compareMode, }) {
+    const columnHelper = createColumnHelper();
+    const [tableColumns] = useURLState('table_columns', {
+        alwaysReturnArray: true,
+    });
+    const [dashboardItems] = useURLState('dashboard_items', {
+        alwaysReturnArray: true,
+    });
+    const [columnVisibility, setColumnVisibility] = useState(() => {
+        return {
+            color: true,
+            flat: true,
+            flatPercentage: false,
+            flatDiff: compareMode,
+            flatDiffPercentage: false,
+            cumulative: true,
+            cumulativePercentage: false,
+            cumulativeDiff: compareMode,
+            cumulativeDiffPercentage: false,
+            name: true,
+            functionSystemName: false,
+            functionFileName: false,
+            mappingFile: false,
+        };
+    });
+    useEffect(() => {
+        if (Array.isArray(tableColumns)) {
+            setColumnVisibility(prevState => {
+                const newState = { ...prevState };
+                Object.keys(newState).forEach(column => {
+                    newState[column] = tableColumns.includes(column);
+                });
+                return newState;
+            });
+        }
+    }, [tableColumns]);
+    const columns = useMemo(() => {
+        const baseColumns = [
+            columnHelper.accessor('colorProperty', {
+                id: 'color',
+                header: '',
+                cell: info => {
+                    const color = info.getValue();
+                    return _jsx(ColorCell, { color: color.color, mappingFile: color.mappingFile });
+                },
+                size: 10,
+                enableSorting: false,
+            }),
+            columnHelper.accessor('flat', {
+                id: 'flat',
+                header: 'Flat',
+                cell: info => valueFormatter(info.getValue(), unit, 2),
+                size: 80,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('flat', {
+                id: 'flatPercentage',
+                header: 'Flat (%)',
+                cell: info => {
+                    return ratioString(info.getValue(), total, filtered);
+                },
+                size: 120,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('flatDiff', {
+                id: 'flatDiff',
+                header: 'Flat Diff',
+                cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
+                size: 120,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('flatDiff', {
+                id: 'flatDiffPercentage',
+                header: 'Flat Diff (%)',
+                cell: info => {
+                    return ratioString(info.getValue(), total, filtered);
+                },
+                size: 120,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('cumulative', {
+                id: 'cumulative',
+                header: 'Cumulative',
+                cell: info => valueFormatter(info.getValue(), unit, 2),
+                size: 150,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('cumulative', {
+                id: 'cumulativePercentage',
+                header: 'Cumulative (%)',
+                cell: info => {
+                    return ratioString(info.getValue(), total, filtered);
+                },
+                size: 150,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('cumulativeDiff', {
+                id: 'cumulativeDiff',
+                header: 'Cumulative Diff',
+                cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
+                size: 170,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('cumulativeDiff', {
+                id: 'cumulativeDiffPercentage',
+                header: 'Cumulative Diff (%)',
+                cell: info => {
+                    return ratioString(info.getValue(), total, filtered);
+                },
+                size: 170,
+                meta: {
+                    align: 'right',
+                },
+                invertSorting: true,
+            }),
+            columnHelper.accessor('name', {
+                id: 'name',
+                header: 'Name',
+                cell: info => info.getValue(),
+            }),
+            columnHelper.accessor('functionSystemName', {
+                id: 'functionSystemName',
+                header: 'Function System Name',
+                cell: info => info.getValue(),
+            }),
+            columnHelper.accessor('functionFileName', {
+                id: 'functionFileName',
+                header: 'Function File Name',
+                cell: info => info.getValue(),
+            }),
+            columnHelper.accessor('mappingFile', {
+                id: 'mappingFile',
+                header: 'Mapping File',
+                cell: info => info.getValue(),
+            }),
+        ];
+        if (dashboardItems.length === 1 && dashboardItems[0] === 'table') {
+            baseColumns.unshift(columnHelper.accessor('moreActions', {
+                id: 'moreActions',
+                header: '',
+                cell: info => {
+                    return _jsx(MoreDropdown, { functionName: info.row.original.name });
+                },
+                size: 10,
+                enableSorting: false,
+            }));
+        }
+        return baseColumns;
+    }, [unit, total, filtered, columnHelper, dashboardItems]);
+    const initialSorting = useMemo(() => {
+        return [
+            {
+                id: compareMode ? 'flatDiff' : 'flat',
+                desc: false,
+            },
+        ];
+    }, [compareMode]);
+    return {
+        columns,
+        initialSorting,
+        columnVisibility,
+    };
+}

package/dist/Table/index.d.ts

@@ -1,9 +1,19 @@
 import React from 'react';
 import { ProfileType } from '@parca/parser';
-import { DataRow, DummyRow } from './utils/functions';
-export type Row = DataRow | DummyRow;
-export declare const isDummyRow: (row: Row) => row is DummyRow;
-interface TableProps {
+import { DataRow } from './utils/functions';
+export declare const FIELD_MAPPING_FILE = "mapping_file";
+export declare const FIELD_LOCATION_ADDRESS = "location_address";
+export declare const FIELD_FUNCTION_NAME = "function_name";
+export declare const FIELD_FUNCTION_SYSTEM_NAME = "function_system_name";
+export declare const FIELD_FUNCTION_FILE_NAME = "function_file_name";
+export declare const FIELD_FLAT = "flat";
+export declare const FIELD_FLAT_DIFF = "flat_diff";
+export declare const FIELD_CUMULATIVE = "cumulative";
+export declare const FIELD_CUMULATIVE_DIFF = "cumulative_diff";
+export declare const FIELD_CALLERS = "callers";
+export declare const FIELD_CALLEES = "callees";
+export type Row = DataRow;
+export interface TableProps {
     data?: Uint8Array;
     total: bigint;
     filtered: bigint;

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;AAuB/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,wCAydhB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAYvE,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAS1C,OAAO,EAAC,OAAO,EAAmC,MAAM,mBAAmB,CAAC;AAE5E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,qBAAqB,oBAAoB,CAAC;AACvD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,MAAM,MAAM,GAAG,GAAG,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACzB,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;AAED,eAAO,MAAM,KAAK,wCA6MhB,CAAC;AAEH,eAAe,KAAK,CAAC"}