@parca/profile 0.16.416 → 0.16.418

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.418](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.417...@parca/profile@0.16.418) (2024-07-29)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.16.417 (2024-07-29)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.416](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.415...@parca/profile@0.16.416) (2024-07-23)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.js

@@ -39,8 +39,9 @@ const Callgraph = ({ data, svgString, profileType, width }) => {
     //   ? true
     //   : isSearchMatch(currentSearchString, sourceNode.functionName) &&
     //     isSearchMatch(currentSearchString, targetNode.functionName);
-    const [rawDashboardItems] = useURLState({ param: 'dashboard_items' });
-    const dashboardItems = rawDashboardItems !== undefined ? rawDashboardItems : ['icicle'];
+    const [dashboardItems] = useURLState('dashboard_items', {
+        alwaysReturnArray: true,
+    });
     const isDarkMode = useAppSelector(selectDarkMode);
     const maxColor = getNewSpanColor(isDarkMode);
     const minColor = d3.scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);

package/dist/GraphTooltipArrow/Content.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Table } from 'apache-arrow';
 import { ProfileType } from '@parca/parser';
-import { type NavigateFunction } from '@parca/utilities';
 interface GraphTooltipArrowContentProps {
     table: Table<any>;
     profileType?: ProfileType;
@@ -11,8 +10,8 @@ interface GraphTooltipArrowContentProps {
     row: number | null;
     level: number;
     isFixed: boolean;
-    navigateTo: NavigateFunction;
+    compareAbsolute: boolean;
 }
-declare const GraphTooltipArrowContent: ({ table, profileType, unit, total, totalUnfiltered, row, level, isFixed, navigateTo, }: GraphTooltipArrowContentProps) => React.JSX.Element;
+declare const GraphTooltipArrowContent: ({ table, profileType, unit, total, totalUnfiltered, row, level, isFixed, compareAbsolute, }: GraphTooltipArrowContentProps) => React.JSX.Element;
 export default GraphTooltipArrowContent;
 //# sourceMappingURL=Content.d.ts.map

package/dist/GraphTooltipArrow/Content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../src/GraphTooltipArrow/Content.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAc,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAOpE,UAAU,6BAA6B;IACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAMD,QAAA,MAAM,wBAAwB,2FAU3B,6BAA6B,KAAG,KAAK,CAAC,GAAG,CAAC,OAqG5C,CAAC;AAmFF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../src/GraphTooltipArrow/Content.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,UAAU,6BAA6B;IACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAMD,QAAA,MAAM,wBAAwB,gGAU3B,6BAA6B,KAAG,KAAK,CAAC,GAAG,CAAC,OAgF5C,CAAC;AA2EF,eAAe,wBAAwB,CAAC"}

package/dist/GraphTooltipArrow/Content.js

@@ -8,7 +8,7 @@ import { useGraphTooltipMetaInfo } from './useGraphTooltipMetaInfo';
 const NoData = () => {
     return _jsx("span", { className: "rounded bg-gray-200 px-2 dark:bg-gray-800", children: "Not available" });
 };
-const GraphTooltipArrowContent = ({ table, profileType, unit, total, totalUnfiltered, row, level, isFixed, navigateTo, }) => {
+const GraphTooltipArrowContent = ({ table, profileType, unit, total, totalUnfiltered, row, level, isFixed, compareAbsolute, }) => {
     const graphTooltipData = useGraphTooltip({
         table,
         profileType,
@@ -17,19 +17,20 @@ const GraphTooltipArrowContent = ({ table, profileType, unit, total, totalUnfilt
         totalUnfiltered,
         row,
         level,
+        compareAbsolute,
     });
     if (graphTooltipData === null) {
         return _jsx(_Fragment, {});
     }
-    const { name, locationAddress, cumulativeText, cumulativePerSecondText, flatText, flatPerSecondText, diffText, diff, row: rowNumber, } = graphTooltipData;
+    const { name, locationAddress, cumulativeText, flatText, diffText, diff, row: rowNumber, } = graphTooltipData;
     return (_jsx("div", { className: `flex text-sm ${isFixed ? 'w-full' : ''}`, children: _jsx("div", { className: `m-auto w-full ${isFixed ? 'w-full' : ''}`, children: _jsxs("div", { className: "min-h-52 flex w-[500px] flex-col justify-between rounded-lg border border-gray-300 bg-gray-50 p-3 shadow-lg dark:border-gray-500 dark:bg-gray-900", children: [_jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "mx-2", children: [_jsx("div", { className: "flex h-10 items-start justify-between gap-4 break-all font-semibold", children: row === 0 ? (_jsx("p", { children: "root" })) : (_jsx("p", { children: name !== ''
                                             ? name
                                             : locationAddress !== 0n
                                                 ? hexifyAddress(locationAddress)
-                                                : 'unknown' })) }), _jsx("table", { className: "my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Cumulative" }), _jsx("td", { className: "w-3/4", children: _jsx("div", { children: cumulativeText }) })] }), (profileType?.delta ?? false) ? (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4" }), _jsx("td", { className: "w-3/4", children: _jsx("div", { children: cumulativePerSecondText }) })] })) : (_jsx(_Fragment, {})), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pt-2", children: "Flat" }), _jsx("td", { className: "w-3/4 pt-2", children: _jsx("div", { children: flatText }) })] }), (profileType?.delta ?? false) ? (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4" }), _jsx("td", { className: "w-3/4", children: _jsx("div", { children: flatPerSecondText }) })] })) : (_jsx(_Fragment, {})), diff !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pt-2", children: "Diff" }), _jsx("td", { className: "w-3/4 pt-2", children: _jsx("div", { children: diffText }) })] })), _jsx(TooltipMetaInfo, { table: table, row: rowNumber, navigateTo: navigateTo })] }) })] }) }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to show context menu" })] })] }) }) }));
+                                                : 'unknown' })) }), _jsx("table", { className: "my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Cumulative" }), _jsx("td", { className: "w-3/4", children: _jsx("div", { children: cumulativeText }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pt-2", children: "Flat" }), _jsx("td", { className: "w-3/4 pt-2", children: _jsx("div", { children: flatText }) })] }), diff !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pt-2", children: "Diff" }), _jsx("td", { className: "w-3/4 pt-2", children: _jsx("div", { children: diffText }) })] })), _jsx(TooltipMetaInfo, { table: table, row: rowNumber })] }) })] }) }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to show context menu" })] })] }) }) }));
 };
-const TooltipMetaInfo = ({ table, row, navigateTo, }) => {
-    const { labelPairs, functionFilename, file, locationAddress, mappingFile, mappingBuildID, inlined, } = useGraphTooltipMetaInfo({ table, row, navigateTo });
+const TooltipMetaInfo = ({ table, row }) => {
+    const { labelPairs, functionFilename, file, locationAddress, mappingFile, mappingBuildID, inlined, } = useGraphTooltipMetaInfo({ table, row });
     const labels = labelPairs.map((l) => (_jsx("span", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: `${l[0]}="${l[1]}"` }, l[0])));
     const isMappingBuildIDAvailable = mappingBuildID !== null && mappingBuildID !== '';
     const inlinedText = inlined === null ? 'merged' : inlined ? 'yes' : 'no';

package/dist/GraphTooltipArrow/DockedGraphTooltip/index.d.ts

@@ -8,7 +8,8 @@ interface Props {
     level: number;
     profileType?: ProfileType;
     unit?: string;
+    compareAbsolute: boolean;
 }
-export declare const DockedGraphTooltip: ({ table, total, totalUnfiltered, row, level, profileType, unit, }: Props) => JSX.Element;
+export declare const DockedGraphTooltip: ({ table, total, totalUnfiltered, row, level, profileType, unit, compareAbsolute, }: Props) => JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/GraphTooltipArrow/DockedGraphTooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/DockedGraphTooltip/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAKnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAO1C,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAuBD,eAAO,MAAM,kBAAkB,sEAQ5B,KAAK,KAAG,GAAG,CAAC,OAkHd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/DockedGraphTooltip/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAKnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAO1C,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;CAC1B;AAuBD,eAAO,MAAM,kBAAkB,uFAS5B,KAAK,KAAG,GAAG,CAAC,OAwGd,CAAC"}

package/dist/GraphTooltipArrow/DockedGraphTooltip/index.js

@@ -25,9 +25,9 @@ const InfoSection = ({ title, value, minWidth = '', }) => {
 const NoData = () => {
     return _jsx("span", { className: "rounded bg-gray-200 px-2 dark:bg-gray-800", children: "Not available" });
 };
-export const DockedGraphTooltip = ({ table, total, totalUnfiltered, row, level, profileType, unit, }) => {
+export const DockedGraphTooltip = ({ table, total, totalUnfiltered, row, level, profileType, unit, compareAbsolute, }) => {
     let { width } = useWindowSize();
-    const { profileExplorer, navigateTo } = useParcaContext();
+    const { profileExplorer } = useParcaContext();
     const { PaddingX } = profileExplorer ?? { PaddingX: 0 };
     width = width - PaddingX - 24;
     const graphTooltipData = useGraphTooltip({
@@ -38,21 +38,20 @@ export const DockedGraphTooltip = ({ table, total, totalUnfiltered, row, level,
         totalUnfiltered,
         row,
         level,
+        compareAbsolute,
     });
-    const { labelPairs, functionFilename, file, locationAddress, mappingFile, mappingBuildID, inlined, } = useGraphTooltipMetaInfo({ table, row: row ?? 0, navigateTo });
+    const { labelPairs, functionFilename, file, locationAddress, mappingFile, mappingBuildID, inlined, } = useGraphTooltipMetaInfo({ table, row: row ?? 0 });
     if (graphTooltipData === null) {
         return _jsx(_Fragment, {});
     }
-    const { name, cumulativeText, cumulativePerSecondText, flatText, flatPerSecondText, diffText, diff, } = graphTooltipData;
+    const { name, cumulativeText, flatText, diffText, diff } = graphTooltipData;
     const labels = labelPairs.map((l) => (_jsx("span", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: `${l[0]}="${l[1]}"` }, l[0])));
     const isMappingBuildIDAvailable = mappingBuildID !== null && mappingBuildID !== '';
     const inlinedText = inlined === null ? 'merged' : inlined ? 'yes' : 'no';
     const addressText = locationAddress !== 0n ? hexifyAddress(locationAddress) : _jsx(NoData, {});
-    const cumulativeTextBoth = `${cumulativeText}\n${cumulativePerSecondText}`;
-    const flatTextBoth = `${flatText}\n${flatPerSecondText}`;
     return (_jsxs("div", { className: "fixed bottom-0 z-20 overflow-hidden rounded-t-lg border-l border-r border-t border-gray-400 bg-white bg-opacity-90 px-8 py-3 dark:border-gray-600 dark:bg-black dark:bg-opacity-80", style: { width }, children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex justify-between gap-4", children: row === 0 ? (_jsx("p", { children: "root" })) : (_jsx("p", { children: name !== ''
                                 ? name
                                 : locationAddress !== 0n
                                     ? hexifyAddress(locationAddress)
-                                    : 'unknown' })) }), _jsxs("div", { className: "flex justify-between gap-3", children: [_jsx(InfoSection, { title: "Cumulative", value: cumulativeTextBoth, minWidth: "w-44" }), _jsx(InfoSection, { title: "Flat", value: flatTextBoth, minWidth: "w-44" }), diff !== 0n ? _jsx(InfoSection, { title: "Diff", value: diffText, minWidth: "w-44" }) : null, _jsx(InfoSection, { title: "File", value: functionFilename !== '' ? truncateStringReverse(file, 45) : _jsx(NoData, {}), minWidth: 'w-[460px]' }), _jsx(InfoSection, { title: "Address", value: addressText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Inlined", value: inlinedText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Binary", value: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}), minWidth: "w-44" }), _jsx(InfoSection, { title: "Build ID", value: isMappingBuildIDAvailable ? (_jsx("div", { children: truncateString(mappingBuildID, 28) })) : (_jsx(NoData, {})) })] }), _jsx("div", { children: _jsx("div", { className: "flex h-5 gap-1", children: labels }) })] }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to show context menu" })] })] }));
+                                    : 'unknown' })) }), _jsxs("div", { className: "flex justify-between gap-3", children: [_jsx(InfoSection, { title: "Cumulative", value: cumulativeText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Flat", value: flatText, minWidth: "w-44" }), diff !== 0n ? _jsx(InfoSection, { title: "Diff", value: diffText, minWidth: "w-44" }) : null, _jsx(InfoSection, { title: "File", value: functionFilename !== '' ? truncateStringReverse(file, 45) : _jsx(NoData, {}), minWidth: 'w-[460px]' }), _jsx(InfoSection, { title: "Address", value: addressText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Inlined", value: inlinedText, minWidth: "w-44" }), _jsx(InfoSection, { title: "Binary", value: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}), minWidth: "w-44" }), _jsx(InfoSection, { title: "Build ID", value: isMappingBuildIDAvailable ? (_jsx("div", { children: truncateString(mappingBuildID, 28) })) : (_jsx(NoData, {})) })] }), _jsx("div", { children: _jsx("div", { className: "flex h-5 gap-1", children: labels }) })] }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to show context menu" })] })] }));
 };

package/dist/GraphTooltipArrow/useGraphTooltip/index.d.ts

@@ -6,6 +6,7 @@ interface Props {
     unit?: string;
     total: bigint;
     totalUnfiltered: bigint;
+    compareAbsolute: boolean;
     row: number | null;
     level: number;
 }
@@ -13,13 +14,11 @@ interface GraphTooltipData {
     name: string;
     locationAddress: bigint;
     cumulativeText: string;
-    cumulativePerSecondText: string;
     flatText: string;
-    flatPerSecondText: string;
     diffText: string;
     diff: bigint;
     row: number;
 }
-export declare const useGraphTooltip: ({ table, profileType, unit, total, totalUnfiltered, row, level, }: Props) => GraphTooltipData | null;
+export declare const useGraphTooltip: ({ table, profileType, unit, compareAbsolute, total, totalUnfiltered, row, level, }: Props) => GraphTooltipData | null;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/GraphTooltipArrow/useGraphTooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltip/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAkB1C,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,uBAAuB,EAAE,MAAM,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,eAAe,sEAQzB,KAAK,KAAG,gBAAgB,GAAG,IAkE7B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltip/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAW1C,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,eAAe,uFASzB,KAAK,KAAG,gBAAgB,GAAG,IAyC7B,CAAC"}

package/dist/GraphTooltipArrow/useGraphTooltip/index.js

@@ -11,9 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { divide, valueFormatter } from '@parca/utilities';
-import { FIELD_CUMULATIVE, FIELD_CUMULATIVE_PER_SECOND, FIELD_DIFF, FIELD_DIFF_PER_SECOND, FIELD_FLAT, FIELD_FLAT_PER_SECOND, FIELD_LOCATION_ADDRESS, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
-import { getTextForCumulative, getTextForCumulativePerSecond, nodeLabel, } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
-export const useGraphTooltip = ({ table, profileType, unit, total, totalUnfiltered, row, level, }) => {
+import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FLAT, FIELD_LOCATION_ADDRESS, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
+import { getTextForCumulative, nodeLabel } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+export const useGraphTooltip = ({ table, profileType, unit, compareAbsolute, total, totalUnfiltered, row, level, }) => {
     if (row === null || profileType === undefined) {
         return null;
     }
@@ -22,46 +22,25 @@ export const useGraphTooltip = ({ table, profileType, unit, total, totalUnfilter
     const cumulative = table.getChild(FIELD_CUMULATIVE)?.get(row) !== null
         ? BigInt(table.getChild(FIELD_CUMULATIVE)?.get(row))
         : 0n;
-    const cumulativePerSecond = table.getChild(FIELD_CUMULATIVE_PER_SECOND)?.get(row) !== null
-        ? table.getChild(FIELD_CUMULATIVE_PER_SECOND)?.get(row)
-        : 0;
     const flat = table.getChild(FIELD_FLAT)?.get(row) !== null
         ? BigInt(table.getChild(FIELD_FLAT)?.get(row))
         : 0n;
-    const flatPerSecond = table.getChild(FIELD_FLAT_PER_SECOND)?.get(row) !== null
-        ? table.getChild(FIELD_FLAT_PER_SECOND)?.get(row)
-        : 0;
     const diff = table.getChild(FIELD_DIFF)?.get(row) !== null
         ? BigInt(table.getChild(FIELD_DIFF)?.get(row))
         : 0n;
-    const diffPerSecond = table.getChild(FIELD_DIFF_PER_SECOND)?.get(row) !== null
-        ? table.getChild(FIELD_DIFF_PER_SECOND)?.get(row)
-        : 0;
     let diffText = '';
-    if (profileType?.delta ?? false) {
-        const prevValue = cumulativePerSecond - diffPerSecond;
-        const diffRatio = diffPerSecond !== 0 ? diffPerSecond / prevValue : 0;
-        const diffSign = diffPerSecond > 0 ? '+' : '';
-        const diffValueText = diffSign + valueFormatter(diffPerSecond, 'CPU Cores', 5);
-        const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
-        diffText = `${diffValueText} (${diffPercentageText})`;
-    }
-    else {
-        const prevValue = cumulative - diff;
-        const diffRatio = diff !== 0n ? divide(diff, prevValue) : 0;
-        const diffSign = diff > 0 ? '+' : '';
-        const diffValueText = diffSign + valueFormatter(diff, unit, 1);
-        const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
-        diffText = `${diffValueText} (${diffPercentageText})`;
-    }
+    const prevValue = cumulative - diff;
+    const diffRatio = diff !== 0n ? divide(diff, prevValue) : 0;
+    const diffSign = diff > 0 ? '+' : '';
+    const diffValueText = diffSign + valueFormatter(diff, unit, 1);
+    const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
+    diffText = compareAbsolute ? `${diffValueText} (${diffPercentageText})` : diffPercentageText;
     const name = nodeLabel(table, row, level, false);
     return {
         name,
         locationAddress,
         cumulativeText: getTextForCumulative(cumulative, totalUnfiltered, total, unit ?? ''),
-        cumulativePerSecondText: getTextForCumulativePerSecond(cumulativePerSecond, unit ?? 'CPU Cores'),
         flatText: getTextForCumulative(flat, totalUnfiltered, total, unit ?? ''),
-        flatPerSecondText: getTextForCumulativePerSecond(flatPerSecond, unit ?? 'CPU Cores'),
         diffText,
         diff,
         row,

package/dist/GraphTooltipArrow/useGraphTooltipMetaInfo/index.d.ts

@@ -1,9 +1,7 @@
 import { Table } from 'apache-arrow';
-import type { NavigateFunction } from '@parca/utilities';
 interface Props {
     table: Table<any>;
     row: number;
-    navigateTo: NavigateFunction;
 }
 interface GraphTooltipMetaInfoData {
     labelPairs: Array<[string, string]>;
@@ -17,6 +15,6 @@ interface GraphTooltipMetaInfoData {
     mappingBuildID: string | null;
     inlined: boolean | null;
 }
-export declare const useGraphTooltipMetaInfo: ({ table, row, navigateTo, }: Props) => GraphTooltipMetaInfoData;
+export declare const useGraphTooltipMetaInfo: ({ table, row }: Props) => GraphTooltipMetaInfoData;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/GraphTooltipArrow/useGraphTooltipMetaInfo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAInC,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAiBvD,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,uBAAuB,gCAIjC,KAAK,KAAG,wBAwGV,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAoBnC,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,uBAAuB,mBAAkB,KAAK,KAAG,wBA8F7D,CAAC"}

package/dist/GraphTooltipArrow/useGraphTooltipMetaInfo/index.js

@@ -16,7 +16,7 @@ import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_START_LINE, FIELD_FUNCTION_SYS
 import { arrowToString } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
 import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
 import { useQuery } from '../../useQuery';
-export const useGraphTooltipMetaInfo = ({ table, row, navigateTo, }) => {
+export const useGraphTooltipMetaInfo = ({ table, row }) => {
     const mappingFile = arrowToString(table.getChild(FIELD_MAPPING_FILE)?.get(row));
     const mappingBuildID = arrowToString(table.getChild(FIELD_MAPPING_BUILD_ID)?.get(row));
     const locationAddress = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row) ?? 0n;
@@ -54,25 +54,15 @@ export const useGraphTooltipMetaInfo = ({ table, row, navigateTo, }) => {
         arrowToString(table.getChild(field.name)?.get(row)) ?? '',
     ])
         .filter(value => value[1] !== '');
-    const [dashboardItems, setDashboardItems] = useURLState({
-        param: 'dashboard_items',
-        navigateTo,
+    const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
+        alwaysReturnArray: true,
     });
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [unusedBuildId, setSourceBuildId] = useURLState({
-        param: 'source_buildid',
-        navigateTo,
-    });
+    const [unusedBuildId, setSourceBuildId] = useURLState('source_buildid');
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [unusedFilename, setSourceFilename] = useURLState({
-        param: 'source_filename',
-        navigateTo,
-    });
+    const [unusedFilename, setSourceFilename] = useURLState('source_filename');
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [unusedLine, setSourceLine] = useURLState({
-        param: 'source_line',
-        navigateTo,
-    });
+    const [unusedLine, setSourceLine] = useURLState('source_line');
     const openFile = () => {
         setDashboardItems([dashboardItems[0], 'source']);
         if (mappingBuildID != null) {

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileExplorerCompare.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerCompare.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAGjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAoB,gBAAgB,EAAsB,MAAM,IAAI,CAAC;AAC5E,OAAwB,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAEnE,UAAU,2BAA2B;IACnC,WAAW,EAAE,kBAAkB,CAAC;IAEhC,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAClC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAClC,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD,cAAc,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,QAAA,MAAM,sBAAsB,+IAYzB,2BAA2B,KAAG,GAAG,CAAC,OAwEpC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"ProfileExplorerCompare.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerCompare.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAGjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAoB,gBAAgB,EAAsB,MAAM,IAAI,CAAC;AAC5E,OAAwB,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAEnE,UAAU,2BAA2B;IACnC,WAAW,EAAE,kBAAkB,CAAC;IAEhC,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAClC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAClC,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD,cAAc,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,QAAA,MAAM,sBAAsB,+IAYzB,2BAA2B,KAAG,GAAG,CAAC,OAuEpC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/ProfileExplorer/ProfileExplorerCompare.js

@@ -10,8 +10,8 @@ const ProfileExplorerCompare = ({ queryClient, queryA, queryB, profileA, profile
     const closeProfileB = () => {
         closeProfile('B');
     };
-    const [compareAbsolute] = useURLState({ param: 'compare_absolute', navigateTo });
-    const [functionFilter] = useURLState({ param: 'filter_by_function', navigateTo });
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryA, profileSelection: profileA, selectProfile: selectProfileA, selectQuery: selectQueryA, closeProfile: closeProfileA, enforcedProfileName: '', comparing: true, navigateTo: navigateTo, suffix: "_a" }) }), _jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryB, profileSelection: profileB, selectProfile: selectProfileB, selectQuery: selectQueryB, closeProfile: closeProfileB, enforcedProfileName: Query.parse(queryA.expression).profileName(), comparing: true, navigateTo: navigateTo, suffix: "_b" }) })] }), _jsx("div", { className: "grid grid-cols-1", children: profileA != null && profileB != null ? (_jsx("div", { children: _jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileViewWithData, { navigateTo: navigateTo, queryClient: queryClient, profileSource: new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource(), Array.isArray(functionFilter) ? functionFilter[0] : functionFilter, compareAbsolute === 'true') }) }) })) : (_jsx("div", { children: _jsx("div", { className: "my-20 text-center", children: _jsx("p", { children: "Select a profile on both sides." }) }) })) })] }));
+    const [compareAbsolute] = useURLState('compare_absolute');
+    const [functionFilter] = useURLState('filter_by_function');
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryA, profileSelection: profileA, selectProfile: selectProfileA, selectQuery: selectQueryA, closeProfile: closeProfileA, enforcedProfileName: '', comparing: true, navigateTo: navigateTo, suffix: "_a" }) }), _jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryB, profileSelection: profileB, selectProfile: selectProfileB, selectQuery: selectQueryB, closeProfile: closeProfileB, enforcedProfileName: Query.parse(queryA.expression).profileName(), comparing: true, navigateTo: navigateTo, suffix: "_b" }) })] }), _jsx("div", { className: "grid grid-cols-1", children: profileA != null && profileB != null ? (_jsx("div", { children: _jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource(), Array.isArray(functionFilter) ? functionFilter[0] : functionFilter, compareAbsolute === 'true') }) }) })) : (_jsx("div", { children: _jsx("div", { className: "my-20 text-center", children: _jsx("p", { children: "Select a profile on both sides." }) }) })) })] }));
 };
 export default ProfileExplorerCompare;

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileExplorerSingle.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerSingle.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAC,gBAAgB,EAAsB,MAAM,IAAI,CAAC;AACzD,OAAwB,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAEnE,UAAU,0BAA0B;IAClC,WAAW,EAAE,kBAAkB,CAAC;IAChC,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,QAAA,MAAM,qBAAqB,6EAOxB,0BAA0B,KAAG,GAAG,CAAC,OA8BnC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ProfileExplorerSingle.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerSingle.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAC,gBAAgB,EAAsB,MAAM,IAAI,CAAC;AACzD,OAAwB,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAEnE,UAAU,0BAA0B;IAClC,WAAW,EAAE,kBAAkB,CAAC;IAChC,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,QAAA,MAAM,qBAAqB,6EAOxB,0BAA0B,KAAG,GAAG,CAAC,OA0BnC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/ProfileExplorer/ProfileExplorerSingle.js

@@ -3,6 +3,6 @@ import { Card } from '@parca/components';
 import { ProfileViewWithData } from '..';
 import ProfileSelector from '../ProfileSelector';
 const ProfileExplorerSingle = ({ queryClient, query, selectQuery, selectProfile, profile, navigateTo, }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: query, selectQuery: selectQuery, selectProfile: selectProfile, closeProfile: () => { }, profileSelection: profile, comparing: false, enforcedProfileName: '', navigateTo: navigateTo, suffix: "_a" }) }), profile != null ? (_jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profile.ProfileSource(), navigateTo: navigateTo }) })) : (_jsx(_Fragment, {}))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: query, selectQuery: selectQuery, selectProfile: selectProfile, closeProfile: () => { }, profileSelection: profile, comparing: false, enforcedProfileName: '', navigateTo: navigateTo, suffix: "_a" }) }), profile != null ? (_jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profile.ProfileSource() }) })) : (_jsx(_Fragment, {}))] }));
 };
 export default ProfileExplorerSingle;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAGjD,OAAO,EAA4B,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAQlF,UAAU,oBAAoB;IAC5B,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,GAAG,CAAC;IACjB,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAaD,eAAO,MAAM,sBAAsB,eAAgB,MAAM,GAAG,EAAE,KAAG,MAGhE,CAAC;AAyWF,QAAA,MAAM,eAAe,8CAIlB,oBAAoB,KAAG,GAAG,CAAC,OAkB7B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAGjD,OAAO,EAA4B,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAQlF,UAAU,oBAAoB;IAC5B,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,GAAG,CAAC;IACjB,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAaD,eAAO,MAAM,sBAAsB,eAAgB,MAAM,GAAG,EAAE,KAAG,MAGhE,CAAC;AAiWF,QAAA,MAAM,eAAe,8CAIlB,oBAAoB,KAAG,GAAG,CAAC,OAkB7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileExplorer/index.js

@@ -28,7 +28,6 @@ export const getExpressionAsAString = (expression) => {
     const x = Array.isArray(expression) ? expression.join() : expression;
     return x;
 };
-const DEFAULT_DASHBOARD_ITEMS = ['icicle'];
 /* eslint-disable @typescript-eslint/naming-convention */
 const sanitizeDateRange = (time_selection_a, from_a, to_a) => {
     const range = DateTimeRange.fromRangeKey(time_selection_a, from_a, to_a);
@@ -80,7 +79,7 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
         }
     }, [profileTypesError, onError]);
     /* eslint-disable @typescript-eslint/naming-convention */
-    let { from_a, to_a, merge_from_a, merge_to_a, time_selection_a, compare_a, sum_by_a, from_b, to_b, merge_from_b, merge_to_b, time_selection_b, compare_b, sum_by_b, filter_by_function, dashboard_items, } = queryParams;
+    let { from_a, to_a, merge_from_a, merge_to_a, time_selection_a, compare_a, sum_by_a, from_b, to_b, merge_from_b, merge_to_b, time_selection_b, compare_b, sum_by_b, filter_by_function, } = queryParams;
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const expression_a = getExpressionAsAString(queryParams.expression_a);
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -136,7 +135,6 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
         return navigateTo('/', {
             ...queryParams,
             ...SuffixParams(p.HistoryParams(), suffix),
-            dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
         });
     };
     const selectProfileA = (p) => {
@@ -173,7 +171,6 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
                     to_a: q.to.toString(),
                     time_selection_a: q.timeSelection,
                     sum_by_a: sumByToParam(q.sumBy),
-                    dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
                     ...mergeParams,
                 },
             }));
@@ -183,7 +180,6 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
             return navigateTo('/', {
                 ...queryParams,
                 ...SuffixParams(p.HistoryParams(), '_a'),
-                dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
             });
         };
         return (_jsx(ProfileExplorerSingle, { queryClient: queryClient, query: queryA, profile: profileA, selectQuery: selectQuery, selectProfile: selectProfile, navigateTo: navigateTo }));
@@ -218,7 +214,6 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
                 time_selection_a: q.timeSelection,
                 sum_by_a: sumByToParam(q.sumBy),
                 filter_by_function: filter_by_function ?? '',
-                dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
                 ...mergeParams,
             },
         }));
@@ -246,7 +241,6 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
                 time_selection_b: q.timeSelection,
                 sum_by_b: sumByToParam(q.sumBy),
                 filter_by_function: filter_by_function ?? '',
-                dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
                 ...mergeParams,
             },
         }));

package/dist/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.d.ts

@@ -1,8 +1,6 @@
-import type { NavigateFunction } from '@parca/utilities';
 interface Props {
-    navigateTo?: NavigateFunction;
     compareMode?: boolean;
 }
-declare const ColorStackLegend: ({ navigateTo, compareMode }: Props) => JSX.Element;
+declare const ColorStackLegend: ({ compareMode }: Props) => JSX.Element;
 export default ColorStackLegend;
 //# sourceMappingURL=ColorStackLegend.d.ts.map

package/dist/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,gCAAuC,KAAK,KAAG,GAAG,CAAC,OAgExE,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.tsx"],"names":[],"mappings":"AAsBA,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,oBAA2B,KAAK,KAAG,GAAG,CAAC,OAgE5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.js

@@ -17,9 +17,9 @@ import cx from 'classnames';
 import { useURLState } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
 import { EVERYTHING_ELSE, selectStackColors, useAppSelector } from '@parca/store';
-const ColorStackLegend = ({ navigateTo, compareMode = false }) => {
+const ColorStackLegend = ({ compareMode = false }) => {
     const [colorProfileName] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
-    const [currentSearchString, setSearchString] = useURLState({ param: 'search_string', navigateTo });
+    const [currentSearchString, setSearchString] = useURLState('search_string');
     const stackColors = useAppSelector(selectStackColors);
     const stackColorArray = useMemo(() => {
         return Object.entries(stackColors).sort(([featureA], [featureB]) => {

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

@@ -1,6 +1,5 @@
 import { Flamegraph } from '@parca/client';
 import { ProfileType } from '@parca/parser';
-import { type NavigateFunction } from '@parca/utilities';
 interface IcicleGraphProps {
     graph: Flamegraph;
     total: bigint;
@@ -9,7 +8,6 @@ interface IcicleGraphProps {
     width?: number;
     curPath: string[];
     setCurPath: (path: string[]) => void;
-    navigateTo?: NavigateFunction;
 }
 export declare const IcicleGraph: import("react").NamedExoticComponent<IcicleGraphProps>;
 export default IcicleGraph;

package/dist/ProfileIcicleGraph/IcicleGraph/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AACzC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAgC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAQtF,UAAU,gBAAgB;IACxB,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,wDAsFtB,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAU1C,UAAU,gBAAgB;IACxB,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,WAAW,wDAmFtB,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraph/index.js

@@ -12,6 +12,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { useURLState } from '@parca/components';
 import { setHoveringNode, useAppDispatch } from '@parca/store';
 import { scaleLinear, selectQueryParam } from '@parca/utilities';
 import GraphTooltip from '../../GraphTooltip';
@@ -19,13 +20,13 @@ import { useProfileViewContext } from '../../ProfileView/ProfileViewContext';
 import ColorStackLegend from './ColorStackLegend';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
 import useColoredGraph from './useColoredGraph';
-export const IcicleGraph = memo(function IcicleGraph({ graph, total, filtered, width, setCurPath, curPath, profileType, navigateTo, }) {
+export const IcicleGraph = memo(function IcicleGraph({ graph, total, filtered, width, setCurPath, curPath, profileType, }) {
     const dispatch = useAppDispatch();
     const [height, setHeight] = useState(0);
     const svg = useRef(null);
     const ref = useRef(null);
     const coloredGraph = useColoredGraph(graph);
-    const currentSearchString = selectQueryParam('search_string') ?? '';
+    const [currentSearchString] = useURLState('search_string');
     const { compareMode } = useProfileViewContext();
     const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
     useEffect(() => {
@@ -42,6 +43,6 @@ export const IcicleGraph = memo(function IcicleGraph({ graph, total, filtered, w
     if (coloredGraph.root === undefined || width === undefined) {
         return _jsx(_Fragment, {});
     }
-    return (_jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [isColorStackLegendEnabled && (_jsx(ColorStackLegend, { navigateTo: navigateTo, compareMode: compareMode })), _jsx(GraphTooltip, { unit: profileType?.sampleUnit ?? '', total: total, totalUnfiltered: total + filtered, contextElement: svg.current, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function }), _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, { x: 0, y: 0, totalWidth: width, height: RowHeight, setCurPath: setCurPath, curPath: curPath, data: coloredGraph.root, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, compareMode: compareMode }) }) }) })] }));
+    return (_jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [isColorStackLegendEnabled && _jsx(ColorStackLegend, { compareMode: compareMode }), _jsx(GraphTooltip, { unit: profileType?.sampleUnit ?? '', total: total, totalUnfiltered: total + filtered, contextElement: svg.current, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function }), _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, { x: 0, y: 0, totalWidth: width, height: RowHeight, setCurPath: setCurPath, curPath: curPath, data: coloredGraph.root, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, compareMode: compareMode }) }) }) })] }));
 });
 export default IcicleGraph;

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

@@ -1,11 +1,9 @@
 import React from 'react';
-import { type NavigateFunction } from '@parca/utilities';
 interface Props {
     mappings?: string[];
     loading?: boolean;
-    navigateTo?: NavigateFunction;
     compareMode?: boolean;
 }
-declare const ColorStackLegend: ({ mappings, navigateTo, compareMode, loading, }: Props) => React.JSX.Element;
+declare const ColorStackLegend: ({ mappings, compareMode, loading }: Props) => React.JSX.Element;
 export default ColorStackLegend;
 //# sourceMappingURL=ColorStackLegend.d.ts.map

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAQrC,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAKvD,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,oDAKnB,KAAK,KAAG,KAAK,CAAC,GAAG,CAAC,OA0GpB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAYrC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,uCAA8C,KAAK,KAAG,KAAK,CAAC,GAAG,CAAC,OA8FrF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.js

@@ -19,13 +19,13 @@ import { USER_PREFERENCES, useCurrentColorProfile, useUserPreference } from '@pa
 import { EVERYTHING_ELSE, selectDarkMode, useAppSelector } from '@parca/store';
 import { getMappingColors } from '.';
 import useMappingList from './useMappingList';
-const ColorStackLegend = ({ mappings, navigateTo, compareMode = false, loading, }) => {
+const ColorStackLegend = ({ mappings, compareMode = false, loading }) => {
     const isDarkMode = useAppSelector(selectDarkMode);
     const currentColorProfile = useCurrentColorProfile();
     const [colorProfileName] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
-    const [currentSearchString, setSearchString] = useURLState({
-        param: 'binary_frame_filter',
-        navigateTo,
+    const [currentSearchString, setSearchString] = useURLState('binary_frame_filter', {
+        alwaysReturnArray: true,
+        defaultValue: [],
     });
     const mappingsList = useMappingList(mappings);
     const mappingColors = useMemo(() => {
@@ -52,10 +52,10 @@ const ColorStackLegend = ({ mappings, navigateTo, compareMode = false, loading,
     if (colorProfileName === 'default' || compareMode) {
         return _jsx(_Fragment, {});
     }
-    return (_jsx("div", { className: "my-4 flex w-full flex-wrap justify-start", children: stackColorArray.map(([feature, color]) => {
+    return (_jsx("div", { className: "my-4 flex w-full flex-wrap justify-start column-gap-2", children: stackColorArray.map(([feature, color]) => {
             const filteringAllowed = feature !== EVERYTHING_ELSE;
             const isHighlighted = currentSearchString !== undefined ? currentSearchString.includes(feature) : false;
-            return (_jsxs("div", { className: cx('flex-no-wrap mb-1 flex w-1/5 items-center justify-between text-ellipsis p-1', {
+            return (_jsxs("div", { className: cx('flex-no-wrap mb-1 flex w-[19.25%] items-center justify-between text-ellipsis p-1', {
                     'cursor-pointer': filteringAllowed,
                     'bg-gray-200 dark:bg-gray-800': isHighlighted,
                 }), onClick: () => {
@@ -63,23 +63,11 @@ const ColorStackLegend = ({ mappings, navigateTo, compareMode = false, loading,
                         return;
                     }
                     // Check if the current search string is defined and an array
-                    const updatedSearchString = Array.isArray(currentSearchString)
-                        ? [...currentSearchString, feature] // If array, append the feature
-                        : // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-                            currentSearchString // If not array, preserve current value
-                                ? currentSearchString.split(',') // If string, split by commas
-                                : [feature]; // If undefined, initialize array with feature
+                    const updatedSearchString = [...currentSearchString, feature]; // If array, append the feature
                     setSearchString(updatedSearchString);
                 }, children: [_jsxs("div", { className: "flex w-11/12 items-center justify-start", children: [_jsx("div", { className: "flex w-5 items-center", children: _jsx("div", { className: "mr-1 inline-block h-4 w-4", style: { backgroundColor: color } }) }), _jsx("div", { className: "shrink overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:whitespace-normal", children: feature })] }), _jsx("div", { className: "flex w-1/12 justify-end", children: isHighlighted && (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: e => {
-                                let searchString = [];
-                                if (typeof currentSearchString === 'string') {
-                                    searchString.push(currentSearchString);
-                                }
-                                else {
-                                    searchString = currentSearchString;
-                                }
                                 // remove the current feature from the search string array of strings
-                                setSearchString(searchString.filter((f) => f !== feature));
+                                setSearchString(currentSearchString.filter((f) => f !== feature));
                                 e.stopPropagation();
                             } })) })] }, feature));
         }) }));