@parca/profile 0.19.17 → 0.19.18

package/dist/ProfileView/components/DashboardItems/index.js

@@ -13,27 +13,27 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // limitations under the License.
 import { Profiler } from 'react';
 import { ConditionalWrapper } from '@parca/components';
-import ProfileIcicleGraph from '../../../ProfileIcicleGraph';
+import ProfileFlameGraph from '../../../ProfileFlameGraph';
 import Sandwich from '../../../Sandwich';
 import { SourceView } from '../../../SourceView';
 import { Table } from '../../../Table';
 export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, topTableData, sourceData, profileSource, total, filtered, curPathArrow, setNewCurPathArrow, currentSearchString, setSearchString, perf, queryClient, }) => {
     switch (type) {
-        case 'icicle':
+        case 'flamegraph':
             return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
-                    id: 'icicleGraph',
+                    id: 'flameGraph',
                     onRender: perf?.onRender ?? (() => { }),
-                }, children: _jsx(ProfileIcicleGraph, { curPathArrow: curPathArrow, setNewCurPathArrow: setNewCurPathArrow, arrow: flamegraphData?.arrow, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), loading: flamegraphData.loading, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
+                }, children: _jsx(ProfileFlameGraph, { curPathArrow: curPathArrow, setNewCurPathArrow: setNewCurPathArrow, arrow: flamegraphData?.arrow, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), loading: flamegraphData.loading, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
                         ? isHalfScreen
                             ? (dimensions.width - 54) / 2
                             : dimensions.width - 16
                         : 0, metadataMappingFiles: flamegraphData.metadataMappingFiles, metadataLoading: flamegraphData.metadataLoading, profileSource: profileSource }) }));
-        case 'iciclechart':
-            return (_jsx(ProfileIcicleGraph, { curPathArrow: [], setNewCurPathArrow: () => { }, arrow: flamechartData?.arrow, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), loading: flamechartData.loading, error: flamechartData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
+        case 'flamechart':
+            return (_jsx(ProfileFlameGraph, { curPathArrow: [], setNewCurPathArrow: () => { }, arrow: flamechartData?.arrow, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), loading: flamechartData.loading, error: flamechartData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
                     ? isHalfScreen
                         ? (dimensions.width - 54) / 2
                         : dimensions.width - 16
-                    : 0, metadataMappingFiles: flamechartData.metadataMappingFiles, metadataLoading: flamechartData.metadataLoading, profileSource: profileSource, isIcicleChart: true }));
+                    : 0, metadataMappingFiles: flamechartData.metadataMappingFiles, metadataLoading: flamechartData.metadataLoading, profileSource: profileSource, isFlameChart: true }));
         case 'table':
             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 'sandwich':

package/dist/ProfileView/components/DashboardLayout/index.d.ts

@@ -6,7 +6,7 @@ interface DashboardLayoutProps {
         isHalfScreen: boolean;
     }) => JSX.Element;
     actionButtons: {
-        icicle: JSX.Element;
+        flame: JSX.Element;
         table: JSX.Element;
     };
 }

package/dist/ProfileView/components/DashboardLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/DashboardLayout/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAYzB,OAAO,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAG5D,UAAU,oBAAoB;IAC5B,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,iBAAiB,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACjG,aAAa,EAAE;QACb,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;QACpB,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB,CAAC;CACH;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2DpD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/DashboardLayout/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAYzB,OAAO,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAG5D,UAAU,oBAAoB;IAC5B,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,iBAAiB,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACjG,aAAa,EAAE;QACb,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;QACnB,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB,CAAC;CACH;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2DpD,CAAC"}

package/dist/ProfileView/components/DiffLegend.js

@@ -45,6 +45,6 @@ const DiffLegend = () => {
     const handleMouseLeave = () => {
         setShowLegendTooltip(false);
     };
-    return (_jsxs("div", { className: "mt-1 mb-2 hidden md:block", id: "h-diff-legend", children: [_jsxs("div", { ref: setReferenceElement, className: "flex items-center justify-center", children: [_jsx("span", { children: "Better" }), _jsx(DiffLegendBar, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }), _jsx("span", { children: "Worse" })] }), _jsx(Popover, { className: "relative", children: () => (_jsx(Transition, { show: showLegendTooltip, as: Fragment, enter: "transition ease-out duration-200", enterFrom: "opacity-0 translate-y-1", enterTo: "opacity-100 translate-y-0", leave: "transition ease-in duration-150", leaveFrom: "opacity-100 translate-y-0", leaveTo: "opacity-0 translate-y-1", children: _jsx(Popover.Panel, { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: _jsx("div", { className: "overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "bg-gray-50 p-4 dark:bg-gray-800", children: [_jsx("div", { className: "flex items-center justify-center" }), _jsx("span", { className: "block text-sm text-gray-500 dark:text-gray-50", children: "This is a differential icicle graph, where a purple-colored node means unchanged, and the darker the red, the worse the node got, and the darker the green, the better the node got." })] }) }) }) })) })] }));
+    return (_jsxs("div", { className: "mt-1 mb-2 hidden md:block", id: "h-diff-legend", children: [_jsxs("div", { ref: setReferenceElement, className: "flex items-center justify-center", children: [_jsx("span", { children: "Better" }), _jsx(DiffLegendBar, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }), _jsx("span", { children: "Worse" })] }), _jsx(Popover, { className: "relative", children: () => (_jsx(Transition, { show: showLegendTooltip, as: Fragment, enter: "transition ease-out duration-200", enterFrom: "opacity-0 translate-y-1", enterTo: "opacity-100 translate-y-0", leave: "transition ease-in duration-150", leaveFrom: "opacity-100 translate-y-0", leaveTo: "opacity-0 translate-y-1", children: _jsx(Popover.Panel, { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: _jsx("div", { className: "overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "bg-gray-50 p-4 dark:bg-gray-800", children: [_jsx("div", { className: "flex items-center justify-center" }), _jsx("span", { className: "block text-sm text-gray-500 dark:text-gray-50", children: "This is a differential flame graph, where a purple-colored node means unchanged, and the darker the red, the worse the node got, and the darker the green, the better the node got." })] }) }) }) })) })] }));
 };
 export default DiffLegend;

package/dist/ProfileView/components/GroupByLabelsDropdown/index.js

@@ -12,7 +12,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import Select from 'react-select';
-import { FIELD_LABELS } from '../../../ProfileIcicleGraph/IcicleGraphArrow';
+import { FIELD_LABELS } from '../../../ProfileFlameGraph/FlameGraphArrow';
 const GroupByLabelsDropdown = ({ labels, groupBy, setGroupByLabels }) => {
     return (_jsxs("div", { children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("label", { className: "text-sm", children: "Group by" }) }), _jsx(Select, { id: "h-group-by-labels-selector", isMulti: true, defaultMenuIsOpen: false, defaultValue: undefined, name: "labels", options: labels.map(label => ({ label, value: `${FIELD_LABELS}.${label}` })), className: "parca-select-container text-sm w-full rounded-md bg-white", classNamePrefix: "parca-select", value: groupBy
                     .filter(l => l.startsWith(FIELD_LABELS))

package/dist/ProfileView/components/Toolbars/MultiLevelDropdown.js

@@ -17,7 +17,7 @@ import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import { useURLState } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
-import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../../ProfileIcicleGraph/IcicleGraphArrow';
+import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../../ProfileFlameGraph/FlameGraphArrow';
 import { useProfileViewContext } from '../../context/ProfileViewContext';
 import SwitchMenuItem from './SwitchMenuItem';
 const MenuItem = ({ label, items, onclick, onSelect, path = [], id, closeDropdown, isNested = false, activeValueForSortBy, activeValueForColorBy, activeValuesForLevel, value, disabled = false, icon, customSubmenu, renderAsDiv = false, }) => {

package/dist/ProfileView/components/Toolbars/index.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { QueryServiceClient } from '@parca/client';
 import { ProfileType } from '@parca/parser';
-import { CurrentPathFrame } from '../../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import { CurrentPathFrame } from '../../../ProfileFlameGraph/FlameGraphArrow/utils';
 import { ProfileSource } from '../../../ProfileSource';
 export interface VisualisationToolbarProps {
     groupBy: string[];
@@ -33,16 +33,16 @@ export interface TableToolbarProps {
     clearSelection: () => void;
     currentSearchString?: string;
 }
-export interface IcicleGraphToolbarProps {
+export interface FlameGraphToolbarProps {
     curPath: CurrentPathFrame[];
     setNewCurPath: (path: CurrentPathFrame[]) => void;
 }
-export interface SandwichIcicleGraphToolbarProps {
+export interface SandwichFlameGraphToolbarProps {
     resetSandwichFunctionName: () => void;
     sandwichFunctionName?: string;
 }
 export declare const TableToolbar: FC<TableToolbarProps>;
-export declare const IcicleGraphToolbar: FC<IcicleGraphToolbarProps>;
-export declare const SandwichIcicleGraphToolbar: FC<SandwichIcicleGraphToolbarProps>;
+export declare const FlameGraphToolbar: FC<FlameGraphToolbarProps>;
+export declare const SandwichFlameGraphToolbar: FC<SandwichFlameGraphToolbarProps>;
 export declare const VisualisationToolbar: FC<VisualisationToolbarProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/ProfileView/components/Toolbars/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,oDAAoD,CAAC;AACpF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAUrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,+BAA+B;IAC9C,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAwB9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAiB1D,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,+BAA+B,CAmB1E,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA+F9D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAUrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,8BAA8B;IAC7C,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAwB9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAiBxD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,8BAA8B,CAmBxE,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA+F9D,CAAC"}

package/dist/ProfileView/components/Toolbars/index.js

@@ -12,10 +12,10 @@ import TableColumnsDropdown from './TableColumnsDropdown';
 export const TableToolbar = ({ profileType, total, filtered, clearSelection, currentSearchString, }) => {
     return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex w-full gap-2 items-end", children: [_jsx(TableColumnsDropdown, { profileType: profileType, total: total, filtered: filtered }), _jsx(Button, { color: "neutral", onClick: clearSelection, className: "w-auto", variant: "neutral", disabled: currentSearchString === undefined || currentSearchString.length === 0, children: "Clear selection" })] }) }));
 };
-export const IcicleGraphToolbar = ({ curPath, setNewCurPath }) => {
+export const FlameGraphToolbar = ({ curPath, setNewCurPath }) => {
     return (_jsx(_Fragment, { children: _jsx("div", { className: "flex w-full gap-2 items-end", children: _jsxs(Button, { variant: "neutral", className: "gap-2 w-max h-fit", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, id: "h-reset-graph", children: ["Reset graph", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }) }) }));
 };
-export const SandwichIcicleGraphToolbar = ({ resetSandwichFunctionName, sandwichFunctionName, }) => {
+export const SandwichFlameGraphToolbar = ({ resetSandwichFunctionName, sandwichFunctionName, }) => {
     return (_jsx(_Fragment, { children: _jsx("div", { className: "flex w-full gap-2 items-end justify-between", children: _jsx(Button, { color: "neutral", onClick: () => resetSandwichFunctionName(), className: "w-auto", variant: "neutral", disabled: sandwichFunctionName === undefined || sandwichFunctionName.length === 0, children: "Reset view" }) }) }));
 };
 const Divider = () => (_jsx("div", { className: "border-t mt-4 border-gray-200 dark:border-gray-700 h-[1px] w-full pb-4" }));
@@ -23,7 +23,7 @@ export const VisualisationToolbar = ({ groupBy, toggleGroupBy, groupByLabels, se
     const { dashboardItems } = useDashboard();
     const isTableViz = dashboardItems?.includes('table');
     const isTableVizOnly = dashboardItems?.length === 1 && isTableViz;
-    const isGraphViz = dashboardItems?.includes('icicle');
+    const isGraphViz = dashboardItems?.includes('flamegraph');
     const isGraphVizOnly = dashboardItems?.length === 1 && isGraphViz;
     const req = profileSource?.QueryRequest();
     if (req !== null && req !== undefined) {
@@ -31,5 +31,5 @@ export const VisualisationToolbar = ({ groupBy, toggleGroupBy, groupByLabels, se
             fields: groupBy ?? [],
         };
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsxs("div", { className: "flex gap-3 items-end", children: [isGraphViz && (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(InvertCallStack, {})] })), _jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(MultiLevelDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, profileType: profileType, onSelect: () => { }, isTableVizOnly: isTableVizOnly }), _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: req, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, { profileSource: profileSource }) : null] })] }), isGraphVizOnly && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(IcicleGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableVizOnly && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsxs("div", { className: "flex gap-3 items-end", children: [isGraphViz && (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(InvertCallStack, {})] })), _jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(MultiLevelDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, profileType: profileType, onSelect: () => { }, isTableVizOnly: isTableVizOnly }), _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: req, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, { profileSource: profileSource }) : null] })] }), isGraphVizOnly && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(FlameGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableVizOnly && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })] }))] }));
 };

package/dist/ProfileView/components/ViewSelector/Dropdown.d.ts

@@ -16,7 +16,7 @@ export interface InnerAction {
     isDisabled?: boolean;
 }
 export declare function contructItemsFromArray(items: any[]): DropdownItem[];
-declare const Dropdown: ({ items, selectedKey, onSelection, placeholder, width, className, loading, primary, disabled, icon, id, }: {
+declare const Dropdown: ({ items, selectedKey, onSelection, placeholder, width, className, loading, primary, disabled, icon, id, optionsClassName, }: {
     items: DropdownItem[];
     selectedKey: string | undefined;
     onSelection: (value: string) => void;
@@ -28,6 +28,7 @@ declare const Dropdown: ({ items, selectedKey, onSelection, placeholder, width,
     disabled?: boolean;
     icon?: JSX.Element;
     id?: string;
+    optionsClassName?: string;
 }) => JSX.Element;
 export default Dropdown;
 //# sourceMappingURL=Dropdown.d.ts.map

package/dist/ProfileView/components/ViewSelector/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/Dropdown.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAMnE;AAED,QAAA,MAAM,QAAQ,GAAI,2GAYf;IACD,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,KAAG,GAAG,CAAC,OAuDP,CAAC;AAwEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/Dropdown.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAMnE;AAED,QAAA,MAAM,QAAQ,GAAI,6HAaf;IACD,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,KAAG,GAAG,CAAC,OA4DP,CAAC;AAwEF,eAAe,QAAQ,CAAC"}

package/dist/ProfileView/components/ViewSelector/Dropdown.js

@@ -23,7 +23,7 @@ export function contructItemsFromArray(items) {
         innerAction: item.innerAction,
     }));
 }
-const Dropdown = ({ items, selectedKey, onSelection, placeholder, width, className = '', loading, primary = false, disabled = false, icon, id, }) => {
+const Dropdown = ({ items, selectedKey, onSelection, placeholder, width, className = '', loading, primary = false, disabled = false, icon, id, optionsClassName = '', }) => {
     const selection = items.find(v => v.key === selectedKey) ?? {
         key: selectedKey,
         element: { active: _jsx(_Fragment, { children: selectedKey }), expanded: _jsx(_Fragment, { children: selectedKey }) },
@@ -32,7 +32,7 @@ const Dropdown = ({ items, selectedKey, onSelection, placeholder, width, classNa
     const styles = 'relative border rounded-md shadow-sm px-4 py-2 text-left cursor-default focus:outline-none focus:ring-1 items-center focus:ring-indigo-500 focus:border-indigo-500 text-sm flex gap-2 flex items-center justify-between';
     const defaultStyles = 'bg-white dark:bg-gray-900 dark:border-gray-600';
     const primaryStyles = 'text-gray-100 dark:gray-900 bg-indigo-600 border-indigo-500 font-medium py-2 px-4';
-    return (_jsx(Listbox, { value: selectedKey, onChange: onSelection, children: ({ open }) => (_jsxs("div", { className: "relative", children: [_jsx("div", { id: id, children: _jsxs(Listbox.Button, { className: cx(styles, width !== undefined ? `w-${width}` : 'w-full', disabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : '', primary ? primaryStyles : defaultStyles, { [className]: className.length > 0 }), children: [_jsx("div", { className: cx(icon != null ? '' : 'block overflow-x-hidden text-ellipsis'), children: selection?.key !== '' ? selection.element.active : placeholder }), _jsx("div", { className: cx(icon != null ? '' : 'pointer-events-none text-gray-400'), children: icon ?? _jsx(Icon, { icon: "heroicons:chevron-up-down-20-solid", "aria-hidden": "true" }) })] }) }), _jsx(Transition, { show: open, as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Listbox.Options, { className: "absolute w-[246px] right-0 z-50 mt-1 max-h-[50vh] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: loading === true ? (_jsx("div", { className: "w-[270px]", children: loader })) : (items.length > 0 &&
+    return (_jsx(Listbox, { value: selectedKey, onChange: onSelection, children: ({ open }) => (_jsxs("div", { className: "relative", children: [_jsx("div", { id: id, children: _jsxs(Listbox.Button, { className: cx(styles, width !== undefined ? `w-${width}` : 'w-full', disabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : '', primary ? primaryStyles : defaultStyles, { [className]: className.length > 0 }), children: [_jsx("div", { className: cx(icon != null ? '' : 'block overflow-x-hidden text-ellipsis'), children: selection?.key !== '' ? selection.element.active : placeholder }), _jsx("div", { className: cx(icon != null ? '' : 'pointer-events-none text-gray-400'), children: icon ?? _jsx(Icon, { icon: "heroicons:chevron-up-down-20-solid", "aria-hidden": "true" }) })] }) }), _jsx(Transition, { show: open, as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Listbox.Options, { className: cx(optionsClassName, 'absolute w-[246px] right-0 z-50 mt-1 max-h-[50vh] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm'), children: loading === true ? (_jsx("div", { className: "w-[270px]", children: loader })) : (items.length > 0 &&
                             items.map(option => _jsx(DropdownOption, { option: option }, option.key))) }) })] })) }));
 };
 const DropdownOption = ({ option }) => {

package/dist/ProfileView/components/ViewSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,GAAI,mBAAiB,KAAK,KAAG,GAAG,CAAC,OAqJlD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,GAAI,mBAAiB,KAAK,KAAG,GAAG,CAAC,OA0JlD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/ProfileView/components/ViewSelector/index.js

@@ -2,20 +2,24 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useParcaContext, useURLState } from '@parca/components';
 import Dropdown from './Dropdown';
 const ViewSelector = ({ profileSource }) => {
-    const [dashboardItems = ['icicle'], setDashboardItems] = useURLState('dashboard_items', {
+    const [dashboardItems = ['flamegraph'], setDashboardItems] = useURLState('dashboard_items', {
         alwaysReturnArray: true,
     });
     const [, setSandwichFunctionName] = useURLState('sandwich_function_name');
     const { enableSourcesView, enableSandwichView } = useParcaContext();
     const allItems = [
-        { key: 'icicle', label: 'icicle', canBeSelected: !dashboardItems.includes('icicle') },
+        {
+            key: 'flamegraph',
+            label: 'Flame Graph',
+            canBeSelected: !dashboardItems.includes('flamegraph'),
+        },
         { key: 'table', label: 'Table', canBeSelected: !dashboardItems.includes('table') },
         {
-            key: 'iciclechart',
-            label: (_jsxs("span", { className: "relative", children: ["Iciclechart", _jsx("span", { className: "absolute top-[-2px] text-xs lowercase text-red-500", children: "\u00A0alpha" })] })),
-            canBeSelected: !dashboardItems.includes('iciclechart') && profileSource?.ProfileType().delta === true,
-            disabledText: !dashboardItems.includes('iciclechart') && profileSource?.ProfileType().delta !== true
-                ? 'Iciclechart is not available for non-delta profiles'
+            key: 'flamechart',
+            label: (_jsxs("span", { className: "relative", children: ["Flame Chart", _jsx("span", { className: "absolute top-[-2px] text-xs lowercase text-red-500", children: "\u00A0alpha" })] })),
+            canBeSelected: !dashboardItems.includes('flamechart') && profileSource?.ProfileType().delta === true,
+            disabledText: !dashboardItems.includes('flamechart') && profileSource?.ProfileType().delta !== true
+                ? 'Flamechart is not available for non-delta profiles'
                 : undefined,
         },
     ];
@@ -86,6 +90,6 @@ const ViewSelector = ({ profileSource }) => {
         const newDashboardItems = [dashboardItems[0], value];
         setDashboardItems(newDashboardItems);
     };
-    return (_jsx(Dropdown, { className: "h-view-selector", items: items, selectedKey: dashboardItems.length >= 2 ? 'Multiple' : dashboardItems[0], onSelection: onSelection, placeholder: 'Select view type...', id: "h-view-selector" }));
+    return (_jsx(Dropdown, { className: "h-view-selector", items: items, selectedKey: dashboardItems.length >= 2 ? 'Multiple' : dashboardItems[0], onSelection: onSelection, placeholder: 'Select view type...', id: "h-view-selector", optionsClassName: "min-w-[260px]" }));
 };
 export default ViewSelector;

package/dist/ProfileView/components/VisualizationContainer/index.d.ts

@@ -12,7 +12,7 @@ interface VisualizationContainerProps {
     isMultiPanelView: boolean;
     index: number;
     actionButtons: {
-        icicle: JSX.Element;
+        flame: JSX.Element;
         table: JSX.Element;
     };
 }

package/dist/ProfileView/components/VisualizationContainer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/VisualizationContainer/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAGzB,OAAO,KAAK,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAGnF,OAAO,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAG5D,UAAU,2BAA2B;IACnC,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,aAAa,EAAE,iBAAiB,CAAC;IACjC,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,iBAAiB,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACjG,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE;QACb,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;QACpB,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB,CAAC;CACH;AAED,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAgClE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/VisualizationContainer/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAGzB,OAAO,KAAK,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAGnF,OAAO,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAG5D,UAAU,2BAA2B;IACnC,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,aAAa,EAAE,iBAAiB,CAAC;IACjC,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,iBAAiB,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACjG,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE;QACb,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;QACnB,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB,CAAC;CACH;AAED,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAgClE,CAAC"}

package/dist/ProfileView/components/VisualizationPanel.d.ts

@@ -12,7 +12,7 @@ interface Props {
         isHalfScreen: boolean;
     }) => JSX.Element;
     actionButtons: {
-        icicle: JSX.Element;
+        flame: JSX.Element;
         table: JSX.Element;
     };
 }

package/dist/ProfileView/components/VisualizationPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisualizationPanel.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/VisualizationPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAC,gCAAgC,EAAC,MAAM,qBAAqB,CAAC;AAK1E,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAEzD,UAAU,KAAK;IACb,aAAa,EAAE,iBAAiB,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,CAAC,aAAa,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7D,eAAe,EAAE,gCAAgC,GAAG,IAAI,GAAG,SAAS,CAAC;IACrE,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,iBAAiB,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACjG,aAAa,EAAE;QACb,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;QACpB,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB,CAAC;CACH;AAED,eAAO,MAAM,kBAAkB,mCAyD7B,CAAC"}
+{"version":3,"file":"VisualizationPanel.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/VisualizationPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAC,gCAAgC,EAAC,MAAM,qBAAqB,CAAC;AAK1E,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAEzD,UAAU,KAAK;IACb,aAAa,EAAE,iBAAiB,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,CAAC,aAAa,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7D,eAAe,EAAE,gCAAgC,GAAG,IAAI,GAAG,SAAS,CAAC;IACrE,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,iBAAiB,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACjG,aAAa,EAAE;QACb,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;QACnB,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;KACpB,CAAC;CACH;AAED,eAAO,MAAM,kBAAkB,mCAyD7B,CAAC"}

package/dist/ProfileView/components/VisualizationPanel.js

@@ -18,7 +18,7 @@ import { IconButton, useParcaContext } from '@parca/components';
 import { CloseIcon } from '@parca/icons';
 export const VisualizationPanel = React.memo(function VisualizationPanel({ dashboardItem, isMultiPanelView, handleClosePanel, dragHandleProps, getDashboardItemByType, actionButtons, }) {
     const { flamegraphHint } = useParcaContext();
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-center justify-end gap-2 pb-2", children: [_jsxs("div", { className: cx('flex w-full justify-between flex-col-reverse md:flex-row', isMultiPanelView && dashboardItem === 'icicle' ? 'items-end gap-x-2' : 'items-end'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cx(isMultiPanelView ? '' : 'hidden', 'flex items-center'), ...dragHandleProps, children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) }), isMultiPanelView ? (_jsx("div", { className: "flex gap-2", children: actionButtons[dashboardItem] })) : null] }), _jsx("div", { className: cx('flex flex-row items-center gap-4', isMultiPanelView && dashboardItem === 'icicle' && 'pb-[10px]'), children: dashboardItem === 'icicle' && flamegraphHint != null ? (_jsx("div", { className: "px-2", children: flamegraphHint })) : null })] }), isMultiPanelView && (_jsx(IconButton, { className: "py-0", onClick: () => handleClosePanel(dashboardItem), icon: _jsx(CloseIcon, {}) }))] }), getDashboardItemByType({
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-center justify-end gap-2 pb-2", children: [_jsxs("div", { className: cx('flex w-full justify-between flex-col-reverse md:flex-row', isMultiPanelView && dashboardItem === 'flamegraph' ? 'items-end gap-x-2' : 'items-end'), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cx(isMultiPanelView ? '' : 'hidden', 'flex items-center'), ...dragHandleProps, children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) }), isMultiPanelView ? (_jsx("div", { className: "flex gap-2", children: actionButtons[dashboardItem] })) : null] }), _jsx("div", { className: cx('flex flex-row items-center gap-4', isMultiPanelView && dashboardItem === 'flamegraph' && 'pb-[10px]'), children: dashboardItem === 'flamegraph' && flamegraphHint != null ? (_jsx("div", { className: "px-2", children: flamegraphHint })) : null })] }), isMultiPanelView && (_jsx(IconButton, { className: "py-0", onClick: () => handleClosePanel(dashboardItem), icon: _jsx(CloseIcon, {}) }))] }), getDashboardItemByType({
                 type: dashboardItem,
                 isHalfScreen: isMultiPanelView,
             })] }));

package/dist/ProfileView/hooks/useProfileMetadata.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { useMemo } from 'react';
 import { tableFromIPC } from 'apache-arrow';
-import useMappingList, { useFilenamesList, } from '../../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
+import useMappingList, { useFilenamesList, } from '../../ProfileFlameGraph/FlameGraphArrow/useMappingList';
 export const useProfileMetadata = ({ flamegraphArrow, metadataMappingFiles, metadataLoading, colorBy, }) => {
     const table = useMemo(() => {
         return flamegraphArrow !== undefined ? tableFromIPC(flamegraphArrow.record) : null;

package/dist/ProfileView/hooks/useVisualizationState.d.ts

@@ -1,4 +1,4 @@
-import { CurrentPathFrame } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import { CurrentPathFrame } from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 export declare const useVisualizationState: () => {
     curPath: string[];
     setCurPath: (path: string[]) => void;

package/dist/ProfileView/hooks/useVisualizationState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AAEjF,eAAO,MAAM,qBAAqB,QAAO;IACvC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;CAkFvC,CAAC"}
+{"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAC,gBAAgB,EAAC,MAAM,+CAA+C,CAAC;AAE/E,eAAO,MAAM,qBAAqB,QAAO;IACvC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;CAkFvC,CAAC"}

package/dist/ProfileView/hooks/useVisualizationState.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { useCallback, useMemo, useState } from 'react';
 import { JSONParser, JSONSerializer, useURLState, useURLStateCustom } from '@parca/components';
-import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
+import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../ProfileFlameGraph/FlameGraphArrow';
 export const useVisualizationState = () => {
     const [curPath, setCurPath] = useState([]);
     const [curPathArrow, setCurPathArrow] = useURLStateCustom('cur_path', {

package/dist/ProfileView/index.js

@@ -18,7 +18,7 @@ import ColorStackLegend from './components/ColorStackLegend';
 import { getDashboardItem } from './components/DashboardItems';
 import { DashboardLayout } from './components/DashboardLayout';
 import { ProfileHeader } from './components/ProfileHeader';
-import { IcicleGraphToolbar, SandwichIcicleGraphToolbar, TableToolbar, VisualisationToolbar, } from './components/Toolbars';
+import { FlameGraphToolbar, SandwichFlameGraphToolbar, TableToolbar, VisualisationToolbar, } from './components/Toolbars';
 import { DashboardProvider } from './context/DashboardContext';
 import { ProfileViewContextProvider } from './context/ProfileViewContext';
 import { useProfileMetadata } from './hooks/useProfileMetadata';
@@ -59,9 +59,9 @@ export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, t
         });
     };
     const actionButtons = {
-        icicle: _jsx(IcicleGraphToolbar, { curPath: curPathArrow, setNewCurPath: setCurPathArrow }),
+        flame: _jsx(FlameGraphToolbar, { curPath: curPathArrow, setNewCurPath: setCurPathArrow }),
         table: (_jsx(TableToolbar, { profileType: profileSource?.ProfileType(), total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })),
-        sandwich: (_jsx(SandwichIcicleGraphToolbar, { resetSandwichFunctionName: resetSandwichFunctionName, sandwichFunctionName: sandwichFunctionName })),
+        sandwich: (_jsx(SandwichFlameGraphToolbar, { resetSandwichFunctionName: resetSandwichFunctionName, sandwichFunctionName: sandwichFunctionName })),
     };
     const hasProfileSource = profileSource !== undefined && profileSource.toString(timezone) !== '';
     return (_jsx(KeyDownProvider, { children: _jsx(ProfileViewContextProvider, { value: { profileSource, compareMode }, children: _jsxs(DashboardProvider, { children: [_jsx(ProfileHeader, { profileSourceString: profileSource?.toString(timezone), hasProfileSource: hasProfileSource, externalMainActions: profileViewExternalMainActions }), _jsx(VisualisationToolbar, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, hasProfileSource: hasProfileSource, pprofdownloading: pprofDownloading, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: onDownloadPProf, curPath: curPathArrow, setNewCurPath: setCurPathArrow, profileType: profileSource?.ProfileType(), total: total, filtered: filtered, currentSearchString: currentSearchString, setSearchString: setSearchString, groupByLabels: flamegraphData.metadataLabels ?? [], preferencesModal: preferencesModal, profileViewExternalSubActions: profileViewExternalSubActions, clearSelection: clearSelection, setGroupByLabels: setGroupByLabels, showVisualizationSelector: showVisualizationSelector, sandwichFunctionName: sandwichFunctionName }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { compareMode: compareMode, mappings: colorMappings, loading: flamegraphData.metadataLoading })), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DashboardLayout, { getDashboardItemByType: getDashboardItemByType, actionButtons: actionButtons }) })] }) }) }));

package/dist/ProfileView/types/visualization.d.ts

@@ -31,7 +31,7 @@ export interface SourceData {
     data?: Source;
     error?: any;
 }
-export type VisualizationType = 'icicle' | 'callgraph' | 'table' | 'source' | 'iciclechart' | 'sandwich';
+export type VisualizationType = 'flamegraph' | 'callgraph' | 'table' | 'source' | 'flamechart' | 'sandwich';
 export interface ProfileViewProps {
     total: bigint;
     filtered: bigint;

package/dist/ProfileView/types/visualization.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/types/visualization.ts"],"names":[],"mappings":"AAaA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,MAAM,iBAAiB,GACzB,QAAQ,GACR,WAAW,GACX,OAAO,GACP,QAAQ,GACR,aAAa,GACb,UAAU,CAAC;AAEf,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC"}
+{"version":3,"file":"visualization.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/types/visualization.ts"],"names":[],"mappings":"AAaA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,MAAM,iBAAiB,GACzB,YAAY,GACZ,WAAW,GACX,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,UAAU,CAAC;AAEf,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC"}

package/dist/ProfileViewWithData.js

@@ -15,8 +15,8 @@ import { useEffect, useMemo, useState } from 'react';
 import { QueryRequest_ReportType } from '@parca/client';
 import { useGrpcMetadata, useParcaContext, useURLState } from '@parca/components';
 import { saveAsBlob } from '@parca/utilities';
-import { validateIcicleChartQuery } from './ProfileIcicleGraph';
-import { FIELD_FUNCTION_NAME } from './ProfileIcicleGraph/IcicleGraphArrow';
+import { validateFlameChartQuery } from './ProfileFlameGraph';
+import { FIELD_FUNCTION_NAME } from './ProfileFlameGraph/FlameGraphArrow';
 import { ProfileView } from './ProfileView';
 import { useQuery } from './useQuery';
 import { downloadPprof } from './utils';
@@ -39,21 +39,21 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
         : binaryFrameFilterStr;
     const [pprofDownloading, setPprofDownloading] = useState(false);
     useEffect(() => {
-        // If profile type is not delta, remove iciclechart from the dashboard items
-        // and set it to icicle if no other items are selected.
+        // If profile type is not delta, remove flamechart from the dashboard items
+        // and set it to flame if no other items are selected.
         if (profileSource == null) {
             return;
         }
         const profileType = profileSource.ProfileType();
         let newDashboardItems = dashboardItems;
-        if (dashboardItems.includes('iciclechart') && !profileType.delta) {
-            newDashboardItems = dashboardItems.filter(item => item !== 'iciclechart');
+        if (dashboardItems.includes('flamechart') && !profileType.delta) {
+            newDashboardItems = dashboardItems.filter(item => item !== 'flamechart');
         }
         else {
             return;
         }
         if (newDashboardItems.length === 0) {
-            newDashboardItems = ['icicle'];
+            newDashboardItems = ['flamegraph'];
         }
         setDashboardItems(newDashboardItems);
     }, [profileSource, dashboardItems, setDashboardItems]);
@@ -66,15 +66,15 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
         return (1 / width) * 100;
     }, []);
     const { isLoading: flamegraphLoading, response: flamegraphResponse, error: flamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
-        skip: !dashboardItems.includes('icicle'),
+        skip: !dashboardItems.includes('flamegraph'),
         nodeTrimThreshold,
         groupBy,
         invertCallStack,
         binaryFrameFilter,
     });
     const { isLoading: flamechartLoading, response: flamechartResponse, error: flamechartError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMECHART, {
-        skip: !(dashboardItems.includes('iciclechart') &&
-            validateIcicleChartQuery(profileSource).isValid),
+        skip: !(dashboardItems.includes('flamechart') &&
+            validateFlameChartQuery(profileSource).isValid),
         nodeTrimThreshold,
         groupBy,
         invertCallStack,

package/dist/Sandwich/components/CalleesSection.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type FlamegraphArrow } from '@parca/client';
-import { type CurrentPathFrame } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import { type CurrentPathFrame } from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 import { type ProfileSource } from '../../ProfileSource';
 interface CalleesSectionProps {
     calleesRef: React.RefObject<HTMLDivElement>;

package/dist/Sandwich/components/CalleesSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalleesSection.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/components/CalleesSection.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,eAAe,CAAC;AAGnD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAEvD,UAAU,mBAAmB;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,yBAAyB,CAAC,EAAE;QAC1B,MAAM,EAAE;YACN,SAAS,EAAE,MAAM,CAAC;YAClB,eAAe,CAAC,EAAE,eAAe,CAAC;SACnC,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,GAAG,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,yBAAyB,EACzB,wBAAwB,EACxB,sBAAsB,EACtB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,eAAe,EACf,oBAAoB,GACrB,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CA+BnC"}
+{"version":3,"file":"CalleesSection.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/components/CalleesSection.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,eAAe,CAAC;AAGnD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAEvD,UAAU,mBAAmB;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,yBAAyB,CAAC,EAAE;QAC1B,MAAM,EAAE;YACN,SAAS,EAAE,MAAM,CAAC;YAClB,eAAe,CAAC,EAAE,eAAe,CAAC;SACnC,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,GAAG,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,yBAAyB,EACzB,wBAAwB,EACxB,sBAAsB,EACtB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,eAAe,EACf,oBAAoB,GACrB,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CA+BnC"}

package/dist/Sandwich/components/CalleesSection.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import ProfileIcicleGraph from '../../ProfileIcicleGraph';
+import ProfileFlameGraph from '../../ProfileFlameGraph';
 export function CalleesSection({ calleesRef, calleesFlamegraphResponse, calleesFlamegraphLoading, calleesFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, }) {
-    return (_jsxs("div", { className: "flex relative items-start flex-row", ref: calleesRef, children: [_jsxs("div", { className: "[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left", children: ['<-', " Callees"] }), _jsx(ProfileIcicleGraph, { arrow: calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+    return (_jsxs("div", { className: "flex relative items-start flex-row", ref: calleesRef, children: [_jsxs("div", { className: "[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left", children: ['<-', " Callees"] }), _jsx(ProfileFlameGraph, { arrow: calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
                     ? calleesFlamegraphResponse?.report?.flamegraphArrow
-                    : undefined, total: BigInt(calleesFlamegraphResponse?.total ?? '0'), filtered: filtered, profileType: profileSource?.ProfileType(), loading: calleesFlamegraphLoading, error: calleesFlamegraphError, isHalfScreen: true, width: calleesRef.current != null ? calleesRef.current.getBoundingClientRect().width - 25 : 0, metadataMappingFiles: metadataMappingFiles, metadataLoading: false, isSandwichIcicleGraph: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, profileSource: profileSource, tooltipId: "callees" })] }));
+                    : undefined, total: BigInt(calleesFlamegraphResponse?.total ?? '0'), filtered: filtered, profileType: profileSource?.ProfileType(), loading: calleesFlamegraphLoading, error: calleesFlamegraphError, isHalfScreen: true, width: calleesRef.current != null ? calleesRef.current.getBoundingClientRect().width - 25 : 0, metadataMappingFiles: metadataMappingFiles, metadataLoading: false, isInSandwichView: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, profileSource: profileSource, tooltipId: "callees" })] }));
 }

package/dist/Sandwich/components/CallersSection.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type FlamegraphArrow } from '@parca/client';
-import { type CurrentPathFrame } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import { type CurrentPathFrame } from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 import { type ProfileSource } from '../../ProfileSource';
 interface CallersSectionProps {
     callersRef: React.RefObject<HTMLDivElement>;

package/dist/Sandwich/components/CallersSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallersSection.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/components/CallersSection.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAKrC,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,eAAe,CAAC;AAInD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAevD,UAAU,mBAAmB;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,yBAAyB,CAAC,EAAE;QAC1B,MAAM,EAAE;YACN,SAAS,EAAE,MAAM,CAAC;YAClB,eAAe,CAAC,EAAE,eAAe,CAAC;SACnC,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,GAAG,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,yBAAyB,EACzB,wBAAwB,EACxB,sBAAsB,EACtB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,eAAe,EACf,oBAAoB,EACpB,UAAU,EACV,aAAa,EACb,gBAAgB,GACjB,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAwEnC"}
+{"version":3,"file":"CallersSection.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/components/CallersSection.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAKrC,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,eAAe,CAAC;AAInD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAevD,UAAU,mBAAmB;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,yBAAyB,CAAC,EAAE;QAC1B,MAAM,EAAE;YACN,SAAS,EAAE,MAAM,CAAC;YAClB,eAAe,CAAC,EAAE,eAAe,CAAC;SACnC,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,GAAG,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,yBAAyB,EACzB,wBAAwB,EACxB,sBAAsB,EACtB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,eAAe,EACf,oBAAoB,EACpB,UAAU,EACV,aAAa,EACb,gBAAgB,GACjB,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAwEnC"}

package/dist/Sandwich/components/CallersSection.js

@@ -15,7 +15,7 @@ import { useMemo } from 'react';
 import { tableFromIPC } from 'apache-arrow';
 import { Tooltip } from 'react-tooltip';
 import { Button } from '@parca/components';
-import ProfileIcicleGraph from '../../ProfileIcicleGraph';
+import ProfileFlameGraph from '../../ProfileFlameGraph';
 const FIELD_DEPTH = 'depth';
 function getMaxDepth(depthColumn) {
     if (depthColumn === null)
@@ -41,7 +41,7 @@ export function CallersSection({ callersRef, callersFlamegraphResponse, callersF
     const shouldShowButton = maxDepth > defaultMaxFrames;
     return (_jsxs(_Fragment, { children: [shouldShowButton && (_jsxs(Button, { variant: "neutral", onClick: () => setIsExpanded(!isExpanded), className: "absolute right-8 top-[-46px] z-10", type: "button", children: [_jsx("span", { "data-tooltip-content": !isExpanded
                             ? `This profile has ${maxDepth} frames, showing only the top ${defaultMaxFrames} frames. Click to show more frames.`
-                            : `This profile has ${maxDepth} frames, showing all frames. Click to hide frames.`, "data-tooltip-id": "show-more-frames", children: isExpanded ? 'Hide frames' : 'Show more frames' }), _jsx(Tooltip, { id: "show-more-frames" })] })), _jsxs("div", { className: "flex relative flex-row overflow-hidden", ref: callersRef, children: [_jsxs("div", { className: "[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left flex-shrink-0", children: ["Callers ", '->'] }), _jsx("div", { className: "flex-1 overflow-hidden relative", children: _jsx(ProfileIcicleGraph, { arrow: callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
+                            : `This profile has ${maxDepth} frames, showing all frames. Click to hide frames.`, "data-tooltip-id": "show-more-frames", children: isExpanded ? 'Hide frames' : 'Show more frames' }), _jsx(Tooltip, { id: "show-more-frames" })] })), _jsxs("div", { className: "flex relative flex-row overflow-hidden", ref: callersRef, children: [_jsxs("div", { className: "[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left flex-shrink-0", children: ["Callers ", '->'] }), _jsx("div", { className: "flex-1 overflow-hidden relative", children: _jsx(ProfileFlameGraph, { arrow: callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
                                 ? callersFlamegraphResponse?.report?.flamegraphArrow
-                                : undefined, total: BigInt(callersFlamegraphResponse?.total ?? '0'), filtered: filtered, profileType: profileSource?.ProfileType(), loading: callersFlamegraphLoading, error: callersFlamegraphError, isHalfScreen: true, width: callersRef.current != null ? callersRef.current.getBoundingClientRect().width - 25 : 0, metadataMappingFiles: metadataMappingFiles, metadataLoading: false, isSandwichIcicleGraph: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, isFlamegraph: true, profileSource: profileSource, tooltipId: "callers", maxFrameCount: defaultMaxFrames, isExpanded: isExpanded }) })] })] }));
+                                : undefined, total: BigInt(callersFlamegraphResponse?.total ?? '0'), filtered: filtered, profileType: profileSource?.ProfileType(), loading: callersFlamegraphLoading, error: callersFlamegraphError, isHalfScreen: true, width: callersRef.current != null ? callersRef.current.getBoundingClientRect().width - 25 : 0, metadataMappingFiles: metadataMappingFiles, metadataLoading: false, isInSandwichView: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, isRenderedAsFlamegraph: true, profileSource: profileSource, tooltipId: "callers", maxFrameCount: defaultMaxFrames, isExpanded: isExpanded }) })] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Sandwich/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAMlE,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAG1E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAK1C,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAU/C,UAAU,KAAK;IACb,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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,mCA2MZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Sandwich/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAMlE,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAG1E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAK1C,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAU/C,UAAU,KAAK;IACb,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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,mCAiNZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/Sandwich/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -17,7 +17,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { QueryRequest_ReportType } from '@parca/client';
 import { useParcaContext, useURLState } from '@parca/components';
 import { useCurrentColorProfile } from '@parca/hooks';
-import useMappingList, { useFilenamesList, } from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
+import useMappingList, { useFilenamesList, } from '../ProfileFlameGraph/FlameGraphArrow/useMappingList';
 import { useDashboard } from '../ProfileView/context/DashboardContext';
 import { useVisualizationState } from '../ProfileView/hooks/useVisualizationState';
 import { FIELD_FUNCTION_NAME } from '../Table';
@@ -123,8 +123,6 @@ const Sandwich = React.memo(function Sandwich({ data, filtered, profileType, loa
                                         },
                                         total: calleesFlamegraphResponse.total?.toString() ?? '0',
                                     }
-                                    : undefined, calleesFlamegraphLoading: calleesFlamegraphLoading, calleesFlamegraphError: calleesFlamegraphError, filtered: filtered, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, metadataMappingFiles: metadataMappingFiles })] })) : (_jsx("div", { className: "items-center justify-center flex h-full w-full", children: _jsx("p", { className: "text-sm", children: dashboardItems.includes('table')
-                                ? 'Please select a function to view its callers and callees.'
-                                : 'Use the right-click menu on the flame graph to choose a function to view its callers and callees.' }) })) }) }, "sandwich-loaded") }) }));
+                                    : undefined, calleesFlamegraphLoading: calleesFlamegraphLoading, calleesFlamegraphError: calleesFlamegraphError, filtered: filtered, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, metadataMappingFiles: metadataMappingFiles })] })) : (_jsx("div", { className: "items-center justify-center flex h-full w-full", children: _jsx("p", { className: "text-sm", children: dashboardItems.includes('table') ? ('Please select a function to view its callers and callees.') : (_jsxs(_Fragment, { children: ["Use the right-click menu on the Flame", ' ', dashboardItems.includes('flamegraph') ? 'Graph' : 'Chart', " to choose a function to view its callers and callees."] })) }) })) }) }, "sandwich-loaded") }) }));
 });
 export default Sandwich;

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

@@ -1,5 +1,5 @@
 import { type Table } from 'apache-arrow';
-import { type colorByColors } from '../../ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes';
+import { type colorByColors } from '../../ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes';
 import { type DataRow } from '../../Table/utils/functions';
 interface ProcessRowDataProps {
     table: Table | null;

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

@@ -1 +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"}
+{"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,yDAAyD,CAAC;AAY3F,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"}