@parca/profile 0.16.198 → 0.16.199

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js

@@ -0,0 +1,150 @@
+import { Fragment as _Fragment, 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, { useMemo } from 'react';
+import cx from 'classnames';
+import { useKeyDown } from '@parca/components';
+import { selectBinaries, setHoveringRow, useAppDispatch, useAppSelector } from '@parca/store';
+import { isSearchMatch, scaleLinear } from '@parca/utilities';
+import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME, FIELD_MAPPING_FILE, } from './index';
+import useNodeColor from './useNodeColor';
+import { nodeLabel } from './utils';
+export const RowHeight = 26;
+export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ table, childRows, mappingColors, x, y, xScale, total, totalWidth, level, path, setCurPath, curPath, sortBy, searchString, darkMode, compareMode, }) {
+    const cumulatives = table.getChild(FIELD_CUMULATIVE);
+    if (childRows === undefined || childRows.length === 0) {
+        return _jsx(_Fragment, {});
+    }
+    childRows =
+        curPath.length === 0
+            ? childRows
+            : childRows.filter(c => nodeLabel(table, c, false) === curPath[0]);
+    let childrenCumulative = BigInt(0);
+    const childrenElements = [];
+    childRows.forEach((child, i) => {
+        const xStart = Math.floor(xScale(childrenCumulative));
+        const c = cumulatives?.get(child);
+        childrenCumulative += c;
+        childrenElements.push(_jsx(IcicleNode, { table: table, row: child, mappingColors: mappingColors, x: xStart, y: 0, totalWidth: totalWidth, height: RowHeight, path: path, setCurPath: setCurPath, level: level, curPath: curPath, total: total, xScale: xScale, sortBy: sortBy, searchString: searchString, darkMode: darkMode, compareMode: compareMode }, `node-${level}-${i}`));
+    });
+    return _jsx("g", { transform: `translate(${x}, ${y})`, children: childrenElements });
+});
+const icicleRectStyles = {
+    cursor: 'pointer',
+    transition: 'opacity .15s linear',
+};
+const fadedIcicleRectStyles = {
+    cursor: 'pointer',
+    transition: 'opacity .15s linear',
+    opacity: '0.5',
+};
+export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, mappingColors, x, y, height, setCurPath, curPath, level, path, total, totalWidth, xScale, isRoot = false, searchString, sortBy, darkMode, compareMode, }) {
+    const { isShiftDown } = useKeyDown();
+    const dispatch = useAppDispatch();
+    // get the columns to read from
+    const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
+    const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
+    const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+    const diffColumn = table.getChild(FIELD_DIFF);
+    // get the actual values from the columns
+    const mappingFile = mappingColumn?.get(row);
+    const functionName = functionNameColumn?.get(row);
+    const cumulative = cumulativeColumn?.get(row);
+    const diff = diffColumn?.get(row);
+    const childRows = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []);
+    // TODO: Maybe it's better to pass down the sorter function as prop instead of figuring this out here.
+    switch (sortBy) {
+        case FIELD_FUNCTION_NAME:
+            childRows.sort((a, b) => {
+                // TODO: Support fallthrough to comparing addresses or something
+                const afn = functionNameColumn?.get(a);
+                const bfn = functionNameColumn?.get(b);
+                return afn.localeCompare(bfn);
+            });
+            break;
+        case FIELD_CUMULATIVE:
+            childRows.sort((a, b) => {
+                const aCumulative = cumulativeColumn?.get(a);
+                const bCumulative = cumulativeColumn?.get(b);
+                return Number(bCumulative - aCumulative);
+            });
+            break;
+        case FIELD_DIFF:
+            childRows.sort((a, b) => {
+                const aDiff = diffColumn?.get(a);
+                const bDiff = diffColumn?.get(b);
+                if (aDiff !== null && bDiff !== null) {
+                    return Number(bDiff - aDiff);
+                }
+                if (aDiff === null && bDiff !== null) {
+                    return 1;
+                }
+                if (aDiff !== null && bDiff === null) {
+                    return -1;
+                }
+                // both are null
+                return 0;
+            });
+            break;
+    }
+    const binaries = useAppSelector(selectBinaries);
+    const colorResult = useNodeColor({
+        isDarkMode: darkMode,
+        compareMode,
+        cumulative,
+        diff,
+        mappingColors,
+        mappingFile,
+        functionName,
+    });
+    const name = useMemo(() => {
+        return isRoot ? 'root' : nodeLabel(table, row, binaries.length > 1);
+    }, [table, row, isRoot, binaries]);
+    const nextPath = path.concat([name]);
+    const isFaded = curPath.length > 0 && name !== curPath[curPath.length - 1];
+    const styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;
+    const nextLevel = level + 1;
+    const nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
+    const newXScale = nextCurPath.length === 0 && curPath.length === 1
+        ? scaleLinear([0n, cumulative], [0, totalWidth])
+        : xScale;
+    const width = nextCurPath.length > 0 || (nextCurPath.length === 0 && curPath.length === 1)
+        ? totalWidth
+        : xScale(cumulative);
+    const { isHighlightEnabled = false, isHighlighted = false } = useMemo(() => {
+        if (searchString === undefined || searchString === '') {
+            return { isHighlightEnabled: false };
+        }
+        return { isHighlightEnabled: true, isHighlighted: isSearchMatch(searchString, name) };
+    }, [searchString, name]);
+    if (width <= 1) {
+        return _jsx(_Fragment, { children: null });
+    }
+    const onMouseEnter = () => {
+        if (isShiftDown)
+            return;
+        dispatch(setHoveringRow({ row }));
+    };
+    const onMouseLeave = () => {
+        if (isShiftDown)
+            return;
+        dispatch(setHoveringRow(undefined));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("g", { transform: `translate(${x + 1}, ${y + 1})`, style: styles, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: () => {
+                    setCurPath(nextPath);
+                }, children: [_jsx("rect", { x: 0, y: 0, width: width, height: height, style: {
+                            fill: colorResult,
+                        }, className: cx('stroke-white dark:stroke-gray-700', {
+                            'opacity-50': isHighlightEnabled && !isHighlighted,
+                        }) }), width > 5 && (_jsx("svg", { width: width - 5, height: height, children: _jsx("text", { x: 5, y: 15, style: { fontSize: '12px' }, children: name }) }))] }), childRows.length > 0 && (_jsx(IcicleGraphNodes, { table: table, row: row, mappingColors: mappingColors, childRows: childRows, x: x, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, searchString: searchString, sortBy: sortBy, darkMode: darkMode, compareMode: compareMode }))] }));
+});

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Table } from 'apache-arrow';
+import { type NavigateFunction } from '@parca/utilities';
+export declare const FIELD_MAPPING_FILE = "mapping_file";
+export declare const FIELD_MAPPING_BUILD_ID = "mapping_build_id";
+export declare const FIELD_LOCATION_ADDRESS = "location_address";
+export declare const FIELD_FUNCTION_NAME = "function_name";
+export declare const FIELD_FUNCTION_FILE_NAME = "function_file_name";
+export declare const FIELD_CHILDREN = "children";
+export declare const FIELD_CUMULATIVE = "cumulative";
+export declare const FIELD_DIFF = "diff";
+interface IcicleGraphArrowProps {
+    table: Table<any>;
+    total: bigint;
+    filtered: bigint;
+    sampleUnit: string;
+    width?: number;
+    curPath: string[];
+    setCurPath: (path: string[]) => void;
+    navigateTo?: NavigateFunction;
+}
+export declare const IcicleGraphArrow: React.NamedExoticComponent<IcicleGraphArrowProps>;
+export default IcicleGraphArrow;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -0,0 +1,110 @@
+import { Fragment as _Fragment, 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 { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
+import { getColorForFeature, selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector, } from '@parca/store';
+import { getLastItem, scaleLinear, selectQueryParam, } from '@parca/utilities';
+import GraphTooltipArrow from '../../GraphTooltipArrow';
+import ColorStackLegend from './ColorStackLegend';
+import { IcicleNode, RowHeight } from './IcicleGraphNodes';
+import { extractFeature } from './utils';
+export const FIELD_MAPPING_FILE = 'mapping_file';
+export const FIELD_MAPPING_BUILD_ID = 'mapping_build_id';
+export const FIELD_LOCATION_ADDRESS = 'location_address';
+export const FIELD_FUNCTION_NAME = 'function_name';
+export const FIELD_FUNCTION_FILE_NAME = 'function_file_name';
+export const FIELD_CHILDREN = 'children';
+export const FIELD_CUMULATIVE = 'cumulative';
+export const FIELD_DIFF = 'diff';
+export const IcicleGraphArrow = memo(function IcicleGraphArrow({ table, total, filtered, width, setCurPath, curPath, sampleUnit, navigateTo, }) {
+    const dispatch = useAppDispatch();
+    const [colorProfile] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
+    const isDarkMode = useAppSelector(selectDarkMode);
+    const [height, setHeight] = useState(0);
+    const sortBy = FIELD_FUNCTION_NAME; // TODO: make this configurable via UI
+    const svg = useRef(null);
+    const ref = useRef(null);
+    const currentSearchString = selectQueryParam('search_string') ?? '';
+    const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+    const mappings = useMemo(() => {
+        // Read the mappings from the dictionary that contains all mapping strings.
+        // This is great, as might only have a dozen or so mappings,
+        // and don't need to read through all the rows (potentially thousands).
+        const mappingsDict = table.getChild(FIELD_MAPPING_FILE);
+        const mappings = mappingsDict?.data
+            .map(mapping => {
+            if (mapping.dictionary == null) {
+                return [];
+            }
+            const len = mapping.dictionary.length;
+            const entries = [];
+            for (let i = 0; i < len; i++) {
+                entries.push(getLastItem(mapping.dictionary.get(i)) ?? '');
+            }
+            return entries;
+        })
+            .flat() ?? [];
+        // We add a EVERYTHING ELSE mapping to the list.
+        mappings.push('');
+        // We look through the function names to find out if there's a runtime function.
+        // Again, we only read through the dictionary, which is much faster than reading through all the rows.
+        // We stop as soon as we find a runtime function.
+        const functionNamesDict = table.getChild(FIELD_FUNCTION_NAME);
+        functionNamesDict?.data.forEach(fn => {
+            if (fn.dictionary == null) {
+                return;
+            }
+            const len = fn.dictionary.length;
+            for (let i = 0; i < len; i++) {
+                const fn = functionNamesDict?.get(i);
+                if (fn?.startsWith('runtime') === true) {
+                    mappings.push('runtime');
+                    break;
+                }
+            }
+        });
+        // We sort the mappings alphabetically to make sure that the order is always the same.
+        mappings.sort((a, b) => a.localeCompare(b));
+        return mappings;
+    }, [table]);
+    // TODO: Somehow figure out how to add runtime to this, if stacks are present.
+    // Potentially read the function name dictionary and check if it contains strings starting with runtime.
+    const mappingFeatures = useMemo(() => {
+        return mappings.map(mapping => extractFeature(mapping));
+    }, [mappings]);
+    // TODO: Unify with mappingFeatures
+    const mappingColors = useMemo(() => {
+        const colors = {};
+        Object.entries(mappingFeatures).forEach(([_, feature]) => {
+            colors[feature.name] = getColorForFeature(feature.name, isDarkMode, colorProfile);
+        });
+        return colors;
+    }, [colorProfile, isDarkMode, mappingFeatures]);
+    useEffect(() => {
+        if (ref.current != null) {
+            setHeight(ref?.current.getBoundingClientRect().height);
+        }
+    }, [width]);
+    const xScale = useMemo(() => {
+        if (width === undefined) {
+            return () => 0;
+        }
+        return scaleLinear([0n, total], [0, width]);
+    }, [total, width]);
+    if (table.numRows === 0 || width === undefined) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ColorStackLegend, { mappingColors: mappingColors, navigateTo: navigateTo, compareMode: compareMode }), _jsx(GraphTooltipArrow, { table: table, unit: sampleUnit, total: total, totalUnfiltered: total + filtered, contextElement: svg.current }), _jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleNode, { table: table, row: 0, mappingColors: mappingColors, x: 0, y: 0, totalWidth: width, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode }) }) }) })] }));
+});
+export default IcicleGraphArrow;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/useNodeColor.d.ts

@@ -0,0 +1,14 @@
+interface mappingColors {
+    [key: string]: string;
+}
+interface Props {
+    isDarkMode: boolean;
+    compareMode: boolean;
+    cumulative: bigint;
+    diff: bigint | null;
+    mappingColors: mappingColors;
+    functionName: string | null;
+    mappingFile: string | null;
+}
+declare const useNodeColor: ({ isDarkMode, compareMode, cumulative, diff, mappingColors, functionName, mappingFile, }: Props) => string;
+export default useNodeColor;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/useNodeColor.js

@@ -0,0 +1,26 @@
+// 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 { EVERYTHING_ELSE } from '@parca/store';
+import { diffColor, getLastItem } from '@parca/utilities';
+const useNodeColor = ({ isDarkMode, compareMode, cumulative, diff, mappingColors, functionName, mappingFile, }) => {
+    if (compareMode) {
+        return diffColor(diff ?? 0n, cumulative, isDarkMode);
+    }
+    // To get the color we first check if the function name starts with 'runtime'.
+    // If it does, we color it as runtime. Otherwise, we check the mapping file.
+    // If there is no mapping file, we color it as 'everything else'.
+    return functionName?.startsWith('runtime') === true
+        ? mappingColors.runtime
+        : mappingColors[getLastItem(mappingFile ?? '') ?? EVERYTHING_ELSE];
+};
+export default useNodeColor;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.d.ts

@@ -0,0 +1,4 @@
+import { Table } from 'apache-arrow';
+import { type Feature } from '@parca/store';
+export declare function nodeLabel(table: Table<any>, row: number, showBinaryName: boolean): string;
+export declare const extractFeature: (mapping: string) => Feature;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.js

@@ -0,0 +1,42 @@
+// 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 { EVERYTHING_ELSE, FEATURE_TYPES } from '@parca/store';
+import { getLastItem } from '@parca/utilities';
+import { hexifyAddress } from '../../utils';
+import { FIELD_FUNCTION_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE } from './index';
+export function nodeLabel(table, row, showBinaryName) {
+    const functionName = table.getChild(FIELD_FUNCTION_NAME)?.get(row);
+    if (functionName !== null && functionName !== '') {
+        return functionName;
+    }
+    let mappingString = '';
+    if (showBinaryName) {
+        const mappingFile = table.getChild(FIELD_MAPPING_FILE)?.get(row) ?? '';
+        const binary = getLastItem(mappingFile ?? undefined);
+        if (binary != null)
+            mappingString = `[${binary}]`;
+    }
+    const addressBigInt = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row);
+    const address = hexifyAddress(addressBigInt);
+    const fallback = `${mappingString}${address}`;
+    return fallback === '' ? '<unknown>' : fallback;
+}
+export const extractFeature = (mapping) => {
+    if (mapping.startsWith('runtime') || mapping === 'root') {
+        return { name: 'runtime', type: FEATURE_TYPES.Runtime };
+    }
+    if (mapping != null && mapping !== '') {
+        return { name: mapping, type: FEATURE_TYPES.Binary };
+    }
+    return { name: EVERYTHING_ELSE, type: FEATURE_TYPES.Misc };
+};

package/dist/ProfileIcicleGraph/index.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="react" />
+import { Table } from 'apache-arrow';
 import { Flamegraph } from '@parca/client';
 import { type NavigateFunction } from '@parca/utilities';
 export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
     width?: number;
-    graph: Flamegraph | undefined;
+    graph?: Flamegraph;
+    table?: Table<any>;
     total: bigint;
     filtered: bigint;
     sampleUnit: string;
@@ -14,5 +15,5 @@ interface ProfileIcicleGraphProps {
     loading: boolean;
     setActionButtons?: (buttons: JSX.Element) => void;
 }
-declare const ProfileIcicleGraph: ({ graph, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, table, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;

package/dist/ProfileIcicleGraph/index.js

@@ -16,16 +16,18 @@ import { Button } from '@parca/components';
 import { useContainerDimensions } from '@parca/hooks';
 import { divide, selectQueryParam } from '@parca/utilities';
 import DiffLegend from '../components/DiffLegend';
-import { IcicleGraph } from './IcicleGraph';
+import IcicleGraph from './IcicleGraph';
+import IcicleGraphArrow from './IcicleGraphArrow';
 const numberFormatter = new Intl.NumberFormat('en-US');
-const ProfileIcicleGraph = ({ graph, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, }) => {
+const ProfileIcicleGraph = ({ graph, table, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, }) => {
     const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
     const { ref, dimensions } = useContainerDimensions();
     const [totalFormatted, totalUnfilteredFormatted, isTrimmed, trimmedFormatted, trimmedPercentage, isFiltered, filteredPercentage,] = useMemo(() => {
         if (graph === undefined) {
             return ['0', '0', false, '0', '0', false, '0', '0'];
         }
-        const trimmed = graph.trimmed;
+        // const trimmed = graph.trimmed;
+        const trimmed = 0n;
         const totalUnfiltered = total + filtered;
         // safeguard against division by zero
         const totalUnfilteredDivisor = totalUnfiltered > 0 ? totalUnfiltered : 1n;
@@ -45,13 +47,13 @@ const ProfileIcicleGraph = ({ graph, total, filtered, curPath, setNewCurPath, sa
         }
         setActionButtons(_jsx(_Fragment, { children: _jsx(Button, { color: "neutral", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, variant: "neutral", children: "Reset View" }) }));
     }, [setNewCurPath, curPath, setActionButtons]);
-    if (graph === undefined)
+    if (graph === undefined && table === undefined)
         return _jsx("div", { children: "no data..." });
     if (total === 0n && !loading)
         return _jsx(_Fragment, { children: "Profile has no samples" });
     if (isTrimmed) {
         console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
     }
-    return (_jsxs("div", { className: "relative", children: [compareMode && _jsx(DiffLegend, {}), _jsx("div", { ref: ref, children: _jsx(IcicleGraph, { width: dimensions?.width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo }) }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }));
+    return (_jsxs("div", { className: "relative", children: [compareMode && _jsx(DiffLegend, {}), _jsxs("div", { ref: ref, children: [graph !== undefined && (_jsx(IcicleGraph, { width: dimensions?.width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo })), table !== undefined && (_jsx(IcicleGraphArrow, { width: dimensions?.width, table: table, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }));
 };
 export default ProfileIcicleGraph;

package/dist/ProfileMetricsGraph/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { Label, QueryRangeResponse, QueryServiceClient } from '@parca/client';
 import { DateTimeRange } from '@parca/components';

package/dist/ProfileSelector/CompareButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const CompareButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileTypesResponse, QueryServiceClient } from '@parca/client';
 import { ProfileSelection } from '..';

package/dist/ProfileSource.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Label, ProfileDiffSelection, QueryRequest } from '@parca/client';
 import { ProfileType, Query } from '@parca/parser';
 export interface ProfileSource {

package/dist/ProfileTypeSelector/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileType, ProfileTypesResponse } from '@parca/client';
 import { type SelectElement } from '@parca/components';

package/dist/ProfileView/FilterByFunctionButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { NavigateFunction } from '@parca/utilities';
 declare const FilterByFunctionButton: ({ navigateTo, }: {
     navigateTo: NavigateFunction | undefined;

package/dist/ProfileView/ViewSelector.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { NavigateFunction } from '@parca/utilities';
 interface Props {
     position: number;

package/dist/ProfileView/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { Table } from 'apache-arrow';
 import { Callgraph as CallgraphType, Flamegraph, QueryServiceClient, Top } from '@parca/client';
 import { ProfileSource } from '../ProfileSource';
 type NavigateFunction = (path: string, queryParams: any, options?: {
@@ -7,6 +7,7 @@ type NavigateFunction = (path: string, queryParams: any, options?: {
 export interface FlamegraphData {
     loading: boolean;
     data?: Flamegraph;
+    table?: Table<any>;
     total?: bigint;
     filtered?: bigint;
     error?: any;

package/dist/ProfileView/index.js

@@ -124,10 +124,10 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
     const getDashboardItemByType = ({ type, isHalfScreen, setActionButtons, }) => {
         switch (type) {
             case 'icicle': {
-                return flamegraphData?.data != null ? (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
+                return flamegraphData?.table !== undefined || flamegraphData.data !== undefined ? (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
                         id: 'icicleGraph',
                         onRender: perf?.onRender,
-                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, total: total, filtered: filtered, sampleUnit: sampleUnit, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons }) })) : (_jsx(_Fragment, { children: " " }));
+                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, table: flamegraphData.table, graph: flamegraphData.data, total: total, filtered: filtered, sampleUnit: sampleUnit, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons }) })) : (_jsx(_Fragment, { children: " " }));
             }
             case 'callgraph': {
                 return callgraphData?.data !== undefined &&

package/dist/ProfileViewWithData.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { type NavigateFunction } from '@parca/utilities';
 import { ProfileSource } from './ProfileSource';

package/dist/ProfileViewWithData.js

@@ -12,9 +12,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useEffect, useMemo, useState } from 'react';
+import { tableFromIPC } from 'apache-arrow';
 import { QueryRequest_ReportType } from '@parca/client';
 import { useGrpcMetadata, useParcaContext, useURLState } from '@parca/components';
-import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
+import { USER_PREFERENCES, useUIFeatureFlag, useUserPreference } from '@parca/hooks';
 import { saveAsBlob } from '@parca/utilities';
 import { ProfileView } from './ProfileView';
 import { useQuery } from './useQuery';
@@ -23,6 +24,7 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
     const metadata = useGrpcMetadata();
     const [dashboardItems] = useURLState({ param: 'dashboard_items', navigateTo });
     const [enableTrimming] = useUserPreference(USER_PREFERENCES.ENABLE_GRAPH_TRIMMING.key);
+    const [arrowFlamegraphEnabled] = useUIFeatureFlag('flamegraph-arrow');
     const [pprofDownloading, setPprofDownloading] = useState(false);
     const nodeTrimThreshold = useMemo(() => {
         if (!enableTrimming) {
@@ -35,7 +37,10 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
         width = width - 12 - 16 - 12;
         return (1 / width) * 100;
     }, [enableTrimming]);
-    const { isLoading: flamegraphLoading, response: flamegraphResponse, error: flamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_TABLE, {
+    const reportType = arrowFlamegraphEnabled
+        ? QueryRequest_ReportType.FLAMEGRAPH_ARROW
+        : QueryRequest_ReportType.FLAMEGRAPH_TABLE;
+    const { isLoading: flamegraphLoading, response: flamegraphResponse, error: flamegraphError, } = useQuery(queryClient, profileSource, reportType, {
         skip: !dashboardItems.includes('icicle'),
         nodeTrimThreshold,
     });
@@ -47,14 +52,15 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
         skip: !dashboardItems.includes('callgraph'),
     });
     useEffect(() => {
-        if (!flamegraphLoading && flamegraphResponse?.report.oneofKind === 'flamegraph') {
-            perf?.markInteraction('Flamegraph render', flamegraphResponse.report.flamegraph.total);
+        if ((!flamegraphLoading && flamegraphResponse?.report.oneofKind === 'flamegraph') ||
+            flamegraphResponse?.report.oneofKind === 'flamegraphArrow') {
+            perf?.markInteraction('Flamegraph render', flamegraphResponse.total);
         }
         if (!topTableLoading && topTableResponse?.report.oneofKind === 'top') {
-            perf?.markInteraction('Top table render', topTableResponse?.report?.top.total);
+            perf?.markInteraction('Top table render', topTableResponse.total);
         }
         if (!callgraphLoading && callgraphResponse?.report.oneofKind === 'callgraph') {
-            perf?.markInteraction('Callgraph render', callgraphResponse?.report?.callgraph.cumulative);
+            perf?.markInteraction('Callgraph render', callgraphResponse.total);
         }
     }, [
         flamegraphLoading,
@@ -102,6 +108,9 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
             data: flamegraphResponse?.report.oneofKind === 'flamegraph'
                 ? flamegraphResponse?.report?.flamegraph
                 : undefined,
+            table: flamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+                ? tableFromIPC(flamegraphResponse?.report?.flamegraphArrow.record)
+                : undefined,
             total: BigInt(flamegraphResponse?.total ?? '0'),
             filtered: BigInt(flamegraphResponse?.filtered ?? '0'),
             error: flamegraphError,

package/dist/components/DiffLegend.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const DiffLegend: () => JSX.Element;
 export default DiffLegend;

package/dist/components/ProfileShareButton/ResultBox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Props {
     value: string;
     className?: string;

package/dist/components/ProfileShareButton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryRequest, QueryServiceClient } from '@parca/client';
 interface Props {
     queryRequest: QueryRequest;