@parca/profile 0.16.359 → 0.16.361

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.361](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.360...@parca/profile@0.16.361) (2024-04-26)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.16.360 (2024-04-25)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.359 (2024-04-15)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/utils.d.ts

@@ -2,12 +2,12 @@ import { CallgraphEdge, CallgraphNode } from '@parca/client';
 export declare const pixelsToInches: (pixels: number) => number;
 export declare const getCurvePoints: ({ pos, xScale, yScale, source, target, offset, isSelfLoop, }: {
     pos: string;
-    xScale?: ((pos: number) => number) | undefined;
-    yScale?: ((pos: number) => number) | undefined;
-    source?: number[] | undefined;
-    target?: number[] | undefined;
-    isSelfLoop?: boolean | undefined;
-    offset?: number | undefined;
+    xScale?: (pos: number) => number;
+    yScale?: (pos: number) => number;
+    source?: number[];
+    target?: number[];
+    isSelfLoop?: boolean;
+    offset?: number;
 }) => number[];
 export declare const jsonToDot: ({ graph, colorRange, }: {
     graph: {

package/dist/GraphTooltip/index.d.ts

@@ -31,11 +31,11 @@ export declare const GraphTooltipContent: ({ hoveringNode, unit, total, totalUnf
     total: bigint;
     totalUnfiltered: bigint;
     isFixed: boolean;
-    strings?: string[] | undefined;
-    mappings?: Mapping[] | undefined;
-    locations?: Location[] | undefined;
-    functions?: ParcaFunction[] | undefined;
-    type?: string | undefined;
+    strings?: string[];
+    mappings?: Mapping[];
+    locations?: Location[];
+    functions?: ParcaFunction[];
+    type?: string;
 }) => JSX.Element;
 declare const GraphTooltip: ({ x, y, unit, total, totalUnfiltered, hoveringNode: hoveringNodeProp, contextElement, isFixed, virtualContextElement, strings, mappings, locations, functions, type, }: GraphTooltipProps) => JSX.Element;
 export default GraphTooltip;

package/dist/GraphTooltipArrow/Content.js

@@ -20,12 +20,13 @@ const GraphTooltipArrowContent = ({ table, unit, total, totalUnfiltered, row, le
     if (graphTooltipData === null) {
         return _jsx(_Fragment, {});
     }
-    const { name, locationAddress, cumulativeText, diffText, diff, row: rowNumber } = graphTooltipData;
+    const { name, locationAddress, cumulativeText, cumulativePerSecondText, diffText, diff, row: rowNumber, } = graphTooltipData;
+    const delta = unit === 'nanoseconds';
     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 }) })] }), diff !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Diff" }), _jsx("td", { className: "w-3/4", 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: [delta ? (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Per Second" }), _jsx("td", { className: "w-3/4", children: _jsx("div", { children: cumulativePerSecondText }) })] })) : (_jsx(_Fragment, {})), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Cumulative" }), _jsx("td", { className: "w-3/4", children: _jsx("div", { children: cumulativeText }) })] }), diff !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Diff" }), _jsx("td", { className: "w-3/4", 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" })] })] }) }) }));
 };
 const TooltipMetaInfo = ({ table, row, navigateTo, }) => {
     const { labelPairs, functionFilename, file, locationAddress, mappingFile, mappingBuildID, inlined, } = useGraphTooltipMetaInfo({ table, row, navigateTo });

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

@@ -11,6 +11,7 @@ interface GraphTooltipData {
     name: string;
     locationAddress: bigint;
     cumulativeText: string;
+    cumulativePerSecondText: string;
     diffText: string;
     diff: bigint;
     row: number;

package/dist/GraphTooltipArrow/useGraphTooltip/index.js

@@ -11,8 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { divide, valueFormatter } from '@parca/utilities';
-import { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_LOCATION_ADDRESS, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
-import { getTextForCumulative, nodeLabel } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import { FIELD_CUMULATIVE, FIELD_CUMULATIVE_PER_SECOND, FIELD_DIFF, FIELD_DIFF_PER_SECOND, FIELD_LOCATION_ADDRESS, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
+import { getTextForCumulative, getTextForCumulativePerSecond, nodeLabel, } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
 export const useGraphTooltip = ({ table, unit, total, totalUnfiltered, row, level, }) => {
     if (row === null) {
         return null;
@@ -21,20 +21,39 @@ export const useGraphTooltip = ({ table, unit, total, totalUnfiltered, row, leve
     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 diff = table.getChild(FIELD_DIFF)?.get(row) !== null
         ? BigInt(table.getChild(FIELD_DIFF)?.get(row))
         : 0n;
-    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) + '%';
-    const diffText = `${diffValueText} (${diffPercentageText})`;
+    const diffPerSecond = table.getChild(FIELD_DIFF_PER_SECOND)?.get(row) !== null
+        ? table.getChild(FIELD_DIFF_PER_SECOND)?.get(row)
+        : 0;
+    const delta = unit === 'nanoseconds';
+    let diffText = '';
+    if (delta) {
+        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 name = nodeLabel(table, row, level, false);
     return {
         name,
         locationAddress,
         cumulativeText: getTextForCumulative(cumulative, totalUnfiltered, total, unit),
+        cumulativePerSecondText: getTextForCumulativePerSecond(cumulativePerSecond, unit),
         diffText,
         diff,
         row,

package/dist/MetricsGraph/MetricsTooltip/index.js

@@ -14,9 +14,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from 'react';
 import { Icon } from '@iconify/react';
 import { usePopper } from 'react-popper';
-import { TextWithTooltip } from '@parca/components';
-import { formatDate, valueFormatter } from '@parca/utilities';
-import { timeFormat } from '../../';
+import { TextWithTooltip, useParcaContext } from '@parca/components';
+import { formatDate, timePattern, valueFormatter } from '@parca/utilities';
 const virtualElement = {
     getBoundingClientRect: () => {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -44,6 +43,7 @@ function generateGetBoundingClientRect(contextElement, x = 0, y = 0) {
     });
 }
 const MetricsTooltip = ({ x, y, highlighted, contextElement, sampleUnit, delta, }) => {
+    const { timezone } = useParcaContext();
     const [popperElement, setPopperElement] = useState(null);
     const { styles, attributes, ...popperProps } = usePopper(virtualElement, popperElement, {
         placement: 'auto-start',
@@ -73,7 +73,7 @@ const MetricsTooltip = ({ x, y, highlighted, contextElement, sampleUnit, delta,
     }, [x, y, contextElement, update]);
     const nameLabel = highlighted?.labels.find(e => e.name === '__name__');
     const highlightedNameLabel = nameLabel !== undefined ? nameLabel : { name: '', value: '' };
-    return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-10", children: _jsx("div", { className: "flex max-w-md", children: _jsx("div", { className: "m-auto", children: _jsx("div", { className: "rounded-lg border-gray-300 bg-gray-50 p-3 opacity-90 shadow-lg dark:border-gray-500 dark:bg-gray-900", style: { borderWidth: 1 }, children: _jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "ml-2 mr-6", children: [_jsx("span", { className: "font-semibold", children: highlightedNameLabel.value }), _jsx("span", { className: "my-2 block text-gray-700 dark:text-gray-300", children: _jsx("table", { className: "table-auto", children: _jsxs("tbody", { children: [delta ? (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Per Second" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit === 'nanoseconds' ? 'CPU Cores' : sampleUnit, 5) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Total" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.value, sampleUnit, 2) })] })] })) : (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Value" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) })] })), highlighted.duration > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Duration" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.duration, 'nanoseconds', 2) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(highlighted.timestamp, timeFormat) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", children: highlighted.labels
+    return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-10", children: _jsx("div", { className: "flex max-w-md", children: _jsx("div", { className: "m-auto", children: _jsx("div", { className: "rounded-lg border-gray-300 bg-gray-50 p-3 opacity-90 shadow-lg dark:border-gray-500 dark:bg-gray-900", style: { borderWidth: 1 }, children: _jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "ml-2 mr-6", children: [_jsx("span", { className: "font-semibold", children: highlightedNameLabel.value }), _jsx("span", { className: "my-2 block text-gray-700 dark:text-gray-300", children: _jsx("table", { className: "table-auto", children: _jsxs("tbody", { children: [delta ? (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Per Second" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit === 'nanoseconds' ? 'CPU Cores' : sampleUnit, 5) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Total" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.value, sampleUnit, 2) })] })] })) : (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Value" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) })] })), highlighted.duration > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Duration" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.duration, 'nanoseconds', 2) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(highlighted.timestamp, timePattern(timezone), timezone) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", children: highlighted.labels
                                         .filter((label) => label.name !== '__name__')
                                         .map((label) => (_jsx("div", { 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: _jsx(TextWithTooltip, { text: `${label.name}="${label.value}"`, maxTextLength: 37, id: `tooltip-${label.name}-${label.value}` }) }, label.name))) }), _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 add labels to query." })] })] }) }) }) }) }) }));
 };

package/dist/MetricsGraph/index.js

@@ -16,7 +16,7 @@ import * as d3 from 'd3';
 import { pointer } from 'd3-selection';
 import throttle from 'lodash.throttle';
 import { useContextMenu } from 'react-contexify';
-import { DateTimeRange } from '@parca/components';
+import { DateTimeRange, useParcaContext } from '@parca/components';
 import { formatDate, formatForTimespan, getPrecision, sanitizeHighlightedValues, valueFormatter, } from '@parca/utilities';
 import MetricsCircle from '../MetricsCircle';
 import MetricsSeries from '../MetricsSeries';
@@ -37,6 +37,7 @@ export const parseValue = (value) => {
 const lineStroke = '1px';
 const lineStrokeHover = '2px';
 export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLabelMatcher, setTimeRange, width, height = 50, margin = 0, sampleUnit, }) => {
+    const { timezone } = useParcaContext();
     const graph = useRef(null);
     const [dragging, setDragging] = useState(false);
     const [hovering, setHovering] = useState(false);
@@ -265,7 +266,7 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
                                                         transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsx("text", { fill: "currentColor", x: -9, dy: '0.32em', children: valueFormatter(d, yAxisUnit, decimals) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: yScale(d), y2: yScale(d) }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`));
                                         }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: 0, y1: 0, y2: height - margin }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(to), x2: xScale(to), y1: 0, y2: height - margin }), _jsx("g", { transform: `translate(${-margin}, ${(height - margin) / 2}) rotate(270)`, children: _jsx("text", { fill: "currentColor", dy: "-0.7em", className: "text-sm capitalize", textAnchor: "middle", children: yAxisLabel }) })] }), _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
                                                     /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                                                    transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-500" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to)) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: 0, y2: 0 }), _jsx("g", { transform: `translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`, children: _jsx("text", { fill: "currentColor", dy: ".71em", y: 5, className: "text-sm", children: "Time" }) })] }), _jsx("g", { className: "lines fill-transparent", children: series.map((s, i) => (_jsx("g", { className: "line", children: _jsx(MetricsSeries, { data: s, line: l, color: color(i.toString()), strokeWidth: hovering && highlighted != null && i === highlighted.seriesIndex
+                                                    transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-500" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to), timezone) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: 0, y2: 0 }), _jsx("g", { transform: `translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`, children: _jsx("text", { fill: "currentColor", dy: ".71em", y: 5, className: "text-sm", children: "Time" }) })] }), _jsx("g", { className: "lines fill-transparent", children: series.map((s, i) => (_jsx("g", { className: "line", children: _jsx(MetricsSeries, { data: s, line: l, color: color(i.toString()), strokeWidth: hovering && highlighted != null && i === highlighted.seriesIndex
                                                 ? lineStrokeHover
                                                 : lineStroke, xScale: xScale, yScale: yScale }) }, i))) }), hovering && highlighted != null && (_jsx("g", { className: "circle-group", ref: metricPointRef, style: { fill: color(highlighted.seriesIndex.toString()) }, children: _jsx(MetricsCircle, { cx: highlighted.x, cy: highlighted.y }) })), selected != null && (_jsx("g", { className: "circle-group", style: selected?.seriesIndex != null
                                         ? { fill: color(selected.seriesIndex.toString()) }

package/dist/ProfileIcicleGraph/ActionButtons/GroupByDropdown.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const GroupByDropdown: ({ groupBy, toggleGroupBy, }: {
     groupBy: string[];
     toggleGroupBy: (key: string) => void;

package/dist/ProfileIcicleGraph/ActionButtons/RuntimeFilterDropdown.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const RuntimeFilterDropdown: ({ showRuntimeRuby, toggleShowRuntimeRuby, showRuntimePython, toggleShowRuntimePython, showInterpretedOnly, toggleShowInterpretedOnly, }: {
     showRuntimeRuby: boolean;
     toggleShowRuntimeRuby: () => void;

package/dist/ProfileIcicleGraph/ActionButtons/SortBySelect.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const SortBySelect: ({ sortBy, setSortBy, compareMode, }: {
     sortBy: string;
     setSortBy: (key: string) => void;

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

@@ -22,6 +22,7 @@ interface IcicleGraphNodesProps {
     sortBy: string;
     darkMode: boolean;
     compareMode: boolean;
+    delta: boolean;
     isContextMenuOpen: boolean;
     hoveringName: string | null;
     setHoveringName: (name: string | null) => void;
@@ -54,6 +55,7 @@ interface IcicleNodeProps {
     sortBy: string;
     darkMode: boolean;
     compareMode: boolean;
+    delta: boolean;
     isContextMenuOpen: boolean;
     hoveringName: string | null;
     setHoveringName: (name: string | null) => void;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js

@@ -16,11 +16,11 @@ import cx from 'classnames';
 import { selectBinaries, useAppSelector } from '@parca/store';
 import { isSearchMatch, scaleLinear } from '@parca/utilities';
 import 'react-contexify/dist/ReactContexify.css';
-import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_NAME, FIELD_MAPPING_FILE, } from './index';
+import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_CUMULATIVE_PER_SECOND, FIELD_DIFF, FIELD_DIFF_PER_SECOND, FIELD_FUNCTION_NAME, FIELD_MAPPING_FILE, } from './index';
 import useNodeColor from './useNodeColor';
 import { arrowToString, nodeLabel } from './utils';
 export const RowHeight = 26;
-export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ table, childRows, mappingColors, x, y, xScale, total, totalWidth, level, path, setCurPath, setHoveringRow, setHoveringLevel, curPath, sortBy, searchString, darkMode, compareMode, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, }) {
+export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ table, childRows, mappingColors, x, y, xScale, total, totalWidth, level, path, setCurPath, setHoveringRow, setHoveringLevel, curPath, sortBy, searchString, darkMode, compareMode, delta, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, }) {
     const cumulatives = table.getChild(FIELD_CUMULATIVE);
     if (childRows === undefined || childRows.length === 0) {
         return _jsx(_Fragment, {});
@@ -35,7 +35,7 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ tab
         const xStart = Math.floor(xScale(BigInt(childrenCumulative)));
         const c = BigInt(cumulatives?.get(child));
         childrenCumulative += c;
-        childrenElements.push(_jsx(IcicleNode, { table: table, row: child, mappingColors: mappingColors, x: xStart, y: 0, totalWidth: totalWidth, height: RowHeight, path: path, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, level: level, curPath: curPath, total: total, xScale: xScale, sortBy: sortBy, searchString: searchString, darkMode: darkMode, compareMode: compareMode, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }, `node-${level}-${i}`));
+        childrenElements.push(_jsx(IcicleNode, { table: table, row: child, mappingColors: mappingColors, x: xStart, y: 0, totalWidth: totalWidth, height: RowHeight, path: path, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, level: level, curPath: curPath, total: total, xScale: xScale, sortBy: sortBy, searchString: searchString, darkMode: darkMode, compareMode: compareMode, delta: delta, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }, `node-${level}-${i}`));
     });
     return _jsx("g", { transform: `translate(${x}, ${y})`, children: childrenElements });
 });
@@ -48,17 +48,21 @@ const fadedIcicleRectStyles = {
     transition: 'opacity .15s linear',
     opacity: '0.5',
 };
-export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, mappingColors, x, y, height, setCurPath, curPath, level, path, total, totalWidth, xScale, isRoot = false, searchString, setHoveringRow, setHoveringLevel, sortBy, darkMode, compareMode, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, }) {
+export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, mappingColors, x, y, height, setCurPath, curPath, level, path, total, totalWidth, xScale, isRoot = false, searchString, setHoveringRow, setHoveringLevel, sortBy, darkMode, compareMode, delta, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, }) {
     // get the columns to read from
     const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
     const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
     const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+    const cumulativePerSecondColumn = table.getChild(FIELD_CUMULATIVE_PER_SECOND);
     const diffColumn = table.getChild(FIELD_DIFF);
+    const diffPerSecondColumn = table.getChild(FIELD_DIFF_PER_SECOND);
     // get the actual values from the columns
     const mappingFile = arrowToString(mappingColumn?.get(row));
     const functionName = arrowToString(functionNameColumn?.get(row));
     const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
+    const cumulativePerSecond = cumulativePerSecondColumn?.get(row) != null ? cumulativePerSecondColumn.get(row) : 0;
     const diff = diffColumn?.get(row) !== null ? BigInt(diffColumn?.get(row)) : null;
+    const diffPerSecond = diffPerSecondColumn?.get(row) != null ? diffPerSecondColumn.get(row) : null;
     const childRows = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []);
     const highlightedNodes = useMemo(() => {
         if (!highlightSimilarStacksPreference) {
@@ -93,6 +97,14 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
             });
             break;
         case FIELD_CUMULATIVE:
+            if (delta) {
+                childRows.sort((a, b) => {
+                    const aCumulativePerSecond = cumulativePerSecondColumn?.get(a);
+                    const bCumulativePerSecond = cumulativePerSecondColumn?.get(b);
+                    return bCumulativePerSecond - aCumulativePerSecond;
+                });
+                break;
+            }
             childRows.sort((a, b) => {
                 const aCumulative = cumulativeColumn?.get(a);
                 const bCumulative = cumulativeColumn?.get(b);
@@ -101,15 +113,54 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
             break;
         case FIELD_DIFF:
             childRows.sort((a, b) => {
+                if (delta) {
+                    let aRatio = null;
+                    let bRatio = null;
+                    const aDiff = diffPerSecondColumn?.get(a);
+                    if (aDiff !== null) {
+                        const cumulative = cumulativePerSecondColumn?.get(a);
+                        const prev = cumulative - aDiff;
+                        aRatio = aDiff / prev;
+                    }
+                    const bDiff = diffPerSecondColumn?.get(b);
+                    if (bDiff !== null) {
+                        const cumulative = cumulativePerSecondColumn?.get(b);
+                        const prev = cumulative - bDiff;
+                        bRatio = bDiff / prev;
+                    }
+                    if (aRatio !== null && bRatio !== null) {
+                        return bRatio - aRatio;
+                    }
+                    if (aRatio === null && bRatio !== null) {
+                        return -1;
+                    }
+                    if (aRatio !== null && bRatio === null) {
+                        return 1;
+                    }
+                    // both are null
+                    return 0;
+                }
+                let aRatio = null;
                 const aDiff = diffColumn?.get(a);
+                if (aDiff !== null) {
+                    const cumulative = cumulativeColumn?.get(a) ?? 0n;
+                    const prev = cumulative - aDiff;
+                    aRatio = Number(aDiff) / Number(prev);
+                }
+                let bRatio = null;
                 const bDiff = diffColumn?.get(b);
-                if (aDiff !== null && bDiff !== null) {
-                    return Number(bDiff - aDiff);
+                if (bDiff !== null) {
+                    const cumulative = cumulativeColumn?.get(b) ?? 0n;
+                    const prev = cumulative - bDiff;
+                    bRatio = Number(bDiff) / Number(prev);
+                }
+                if (aRatio !== null && bRatio !== null) {
+                    return bRatio - aRatio;
                 }
-                if (aDiff === null && bDiff !== null) {
+                if (aRatio === null && bRatio !== null) {
                     return -1;
                 }
-                if (aDiff !== null && bDiff === null) {
+                if (aRatio !== null && bRatio === null) {
                     return 1;
                 }
                 // both are null
@@ -122,7 +173,9 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
         isDarkMode: darkMode,
         compareMode,
         cumulative,
+        cumulativePerSecond,
         diff,
+        diffPerSecond,
         mappingColors,
         mappingFile,
         functionName,
@@ -172,5 +225,5 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, map
                             ? `${colorForSimilarNodes} stroke-[3] [stroke-dasharray:6,4] [stroke-linecap:round] [stroke-linejoin:round] h-6`
                             : 'stroke-white dark:stroke-gray-700', {
                             'opacity-50': isHighlightEnabled && !isHighlighted,
-                        }) }), width > 5 && (_jsx("svg", { width: width - 5, height: height, children: _jsx("text", { x: 5, y: 15, style: { fontSize: '12px' }, children: name }) }))] }), childRows.length > 0 && (_jsx(IcicleGraphNodes, { table: table, row: row, mappingColors: mappingColors, childRows: childRows, x: x, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, searchString: searchString, sortBy: sortBy, darkMode: darkMode, compareMode: compareMode, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }))] }));
+                        }) }), width > 5 && (_jsx("svg", { width: width - 5, height: height, children: _jsx("text", { x: 5, y: 15, style: { fontSize: '12px' }, children: name }) }))] }), childRows.length > 0 && (_jsx(IcicleGraphNodes, { table: table, row: row, mappingColors: mappingColors, childRows: childRows, x: x, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, searchString: searchString, sortBy: sortBy, darkMode: darkMode, delta: delta, compareMode: compareMode, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }))] }));
 });

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

@@ -14,7 +14,9 @@ export declare const FIELD_FUNCTION_START_LINE = "function_startline";
 export declare const FIELD_CHILDREN = "children";
 export declare const FIELD_LABELS = "labels";
 export declare const FIELD_CUMULATIVE = "cumulative";
+export declare const FIELD_CUMULATIVE_PER_SECOND = "cumulative_per_second";
 export declare const FIELD_DIFF = "diff";
+export declare const FIELD_DIFF_PER_SECOND = "diff_per_second";
 interface IcicleGraphArrowProps {
     arrow: FlamegraphArrow;
     total: bigint;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -38,7 +38,9 @@ export const FIELD_FUNCTION_START_LINE = 'function_startline';
 export const FIELD_CHILDREN = 'children';
 export const FIELD_LABELS = 'labels';
 export const FIELD_CUMULATIVE = 'cumulative';
+export const FIELD_CUMULATIVE_PER_SECOND = 'cumulative_per_second';
 export const FIELD_DIFF = 'diff';
+export const FIELD_DIFF_PER_SECOND = 'diff_per_second';
 export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, sampleUnit, navigateTo, sortBy, }) {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const dispatch = useAppDispatch();
@@ -139,13 +141,14 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
     };
     // useMemo for the root graph as it otherwise renders the whole graph if the hoveringRow changes.
     const root = useMemo(() => {
-        return (_jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, onContextMenu: displayMenu, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleNode, { table: table, row: 0, mappingColors: mappingColors, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }) }) }) }));
+        return (_jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, onContextMenu: displayMenu, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleNode, { table: table, row: 0, mappingColors: mappingColors, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, delta: sampleUnit === 'nanoseconds', isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }) }) }) }));
     }, [
         compareMode,
         curPath,
         currentSearchString,
         height,
         isDarkMode,
+        sampleUnit,
         mappingColors,
         setCurPath,
         sortBy,

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

@@ -5,10 +5,12 @@ interface Props {
     isDarkMode: boolean;
     compareMode: boolean;
     cumulative: bigint;
+    cumulativePerSecond: number | null;
     diff: bigint | null;
+    diffPerSecond: number | null;
     mappingColors: mappingColors;
     functionName: string | null;
     mappingFile: string | null;
 }
-declare const useNodeColor: ({ isDarkMode, compareMode, cumulative, diff, mappingColors, functionName, mappingFile, }: Props) => string;
+declare const useNodeColor: ({ isDarkMode, compareMode, cumulative, cumulativePerSecond, diff, diffPerSecond, mappingColors, functionName, mappingFile, }: Props) => string;
 export default useNodeColor;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/useNodeColor.js

@@ -11,9 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { EVERYTHING_ELSE } from '@parca/store';
-import { diffColor, getLastItem } from '@parca/utilities';
-const useNodeColor = ({ isDarkMode, compareMode, cumulative, diff, mappingColors, functionName, mappingFile, }) => {
+import { diffColor, diffColorPerSecond, getLastItem } from '@parca/utilities';
+const useNodeColor = ({ isDarkMode, compareMode, cumulative, cumulativePerSecond, diff, diffPerSecond, mappingColors, functionName, mappingFile, }) => {
     if (compareMode) {
+        if (cumulativePerSecond !== null && diffPerSecond !== null) {
+            return diffColorPerSecond(diffPerSecond, cumulativePerSecond, isDarkMode);
+        }
         return diffColor(diff ?? 0n, cumulative, isDarkMode);
     }
     // To get the color we first check if the function name starts with 'runtime'.

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

@@ -3,4 +3,5 @@ import { type Feature } from '@parca/store';
 export declare function nodeLabel(table: Table<any>, row: number, level: number, showBinaryName: boolean): string;
 export declare const extractFeature: (mapping: string) => Feature;
 export declare const getTextForCumulative: (hoveringNodeCumulative: bigint, totalUnfiltered: bigint, total: bigint, unit: string) => string;
+export declare const getTextForCumulativePerSecond: (hoveringNodeCumulative: number, unit: string) => string;
 export declare const arrowToString: (buffer: any) => string | null;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.js

@@ -60,6 +60,9 @@ export const getTextForCumulative = (hoveringNodeCumulative, totalUnfiltered, to
     return `${valueFormatter(hoveringNodeCumulative, unit, 2)}
     (${(100 * divide(hoveringNodeCumulative, totalUnfiltered)).toFixed(2)}%${filtered})`;
 };
+export const getTextForCumulativePerSecond = (hoveringNodeCumulative, unit) => {
+    return `${valueFormatter(hoveringNodeCumulative, unit === 'nanoseconds' ? 'CPU Cores' : unit, 5)}`;
+};
 export const arrowToString = (buffer) => {
     if (buffer == null || typeof buffer === 'string') {
         return buffer;

package/dist/ProfileSource.d.ts

@@ -5,8 +5,7 @@ export interface ProfileSource {
     QueryRequest: () => QueryRequest;
     ProfileType: () => ProfileType;
     DiffSelection: () => ProfileDiffSelection;
-    Describe: () => JSX.Element;
-    toString: () => string;
+    toString: (timezone?: string) => string;
 }
 export interface ProfileSelection {
     ProfileName: () => string;
@@ -16,7 +15,6 @@ export interface ProfileSelection {
     ProfileSource: () => ProfileSource;
     Type: () => string;
 }
-export declare const timeFormat = "yyyy-MM-dd HH:mm:ss '(UTC)'";
 export declare function ParamsString(params: {
     [key: string]: string;
 }): string;
@@ -60,7 +58,6 @@ export declare class MergedProfileSource implements ProfileSource {
     DiffSelection(): ProfileDiffSelection;
     QueryRequest(): QueryRequest;
     ProfileType(): ProfileType;
-    Describe(): JSX.Element;
     stringMatchers(): string[];
-    toString(): string;
+    toString(timezone?: string): string;
 }

package/dist/ProfileSource.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, 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.
@@ -14,7 +14,12 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { ProfileDiffSelection_Mode, QueryRequest_Mode, QueryRequest_ReportType, Timestamp, } from '@parca/client';
 import { ProfileType, Query } from '@parca/parser';
 import { formatDate } from '@parca/utilities';
-export const timeFormat = "yyyy-MM-dd HH:mm:ss '(UTC)'";
+const timeFormat = (timezone) => {
+    if (timezone !== undefined) {
+        return 'yyyy-MM-dd HH:mm:ss';
+    }
+    return "yyyy-MM-dd HH:mm:ss '(UTC)'";
+};
 export function ParamsString(params) {
     return Object.keys(params)
         .map(function (key) {
@@ -153,15 +158,12 @@ export class MergedProfileSource {
     ProfileType() {
         return ProfileType.fromString(Query.parse(this.query.toString()).profileName());
     }
-    Describe() {
-        return (_jsxs("a", { children: ["Merge of \"", this.query.toString(), "\" from ", formatDate(this.mergeFrom, timeFormat), ' ', "to ", formatDate(this.mergeTo, timeFormat)] }));
-    }
     stringMatchers() {
         return this.query.matchers
             .filter((m) => m.key !== '__name__')
             .map((m) => `${m.key}=${m.value}`);
     }
-    toString() {
-        return `merged profiles of query "${this.query.toString()}" from ${formatDate(this.mergeFrom, timeFormat)} to ${formatDate(this.mergeTo, timeFormat)}`;
+    toString(timezone) {
+        return `merged profiles of query "${this.query.toString()}" from ${formatDate(this.mergeFrom, timeFormat(timezone), timezone)} to ${formatDate(this.mergeTo, timeFormat(timezone), timezone)}`;
     }
 }

package/dist/ProfileView/ProfileViewContext.d.ts

@@ -9,7 +9,7 @@ export declare const defaultValue: Props;
 declare const ProfileViewContext: import("react").Context<Props>;
 export declare const ProfileViewContextProvider: ({ children, value, }: {
     children: ReactNode;
-    value?: Props | undefined;
+    value?: Props;
 }) => JSX.Element;
 export declare const useProfileViewContext: () => Props;
 export default ProfileViewContext;

package/dist/ProfileView/index.js

@@ -39,6 +39,7 @@ function arrayEquals(a, b) {
         a.every((val, index) => val === b[index]));
 }
 export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, compare, }) => {
+    const { timezone } = useParcaContext();
     const { ref, dimensions } = useContainerDimensions();
     const [curPath, setCurPath] = useState([]);
     const [rawDashboardItems = ['icicle'], setDashboardItems] = useURLState({
@@ -144,7 +145,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
         }
     };
     // TODO: this is just a placeholder, we need to replace with an actually informative and accurate title (cc @metalmatze)
-    const profileSourceString = profileSource?.toString();
+    const profileSourceString = profileSource?.toString(timezone);
     const hasProfileSource = profileSource !== undefined && profileSourceString !== '';
     const headerParts = profileSourceString?.split('"') ?? [];
     const compareMode = compare === true ||

package/dist/Table/ColumnsVisibility.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type VisibilityState } from '@tanstack/react-table';
 import { ColumnDef } from '.';
 declare const ColumnsVisibility: ({ columns, visibility, setVisibility, }: {

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.359",
+  "version": "0.16.361",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.107",
-    "@parca/components": "^0.16.265",
+    "@parca/components": "^0.16.267",
     "@parca/dynamicsize": "^0.16.61",
-    "@parca/hooks": "^0.0.46",
+    "@parca/hooks": "^0.0.48",
     "@parca/parser": "^0.16.69",
-    "@parca/store": "^0.16.135",
-    "@parca/utilities": "^0.0.63",
+    "@parca/store": "^0.16.137",
+    "@parca/utilities": "^0.0.65",
     "@tanstack/react-query": "^4.0.5",
     "@types/react-beautiful-dnd": "^13.1.8",
     "apache-arrow": "^12.0.0",
@@ -50,5 +50,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "066b31fc628e392e1cd252e14082d4d2c2729ae1"
+  "gitHead": "d900cb1de5375362e3e211809c98990a6e686140"
 }

package/src/GraphTooltipArrow/Content.tsx

@@ -61,7 +61,17 @@ const GraphTooltipArrowContent = ({
     return <></>;
   }
 
-  const {name, locationAddress, cumulativeText, diffText, diff, row: rowNumber} = graphTooltipData;
+  const {
+    name,
+    locationAddress,
+    cumulativeText,
+    cumulativePerSecondText,
+    diffText,
+    diff,
+    row: rowNumber,
+  } = graphTooltipData;
+
+  const delta = unit === 'nanoseconds';
 
   return (
     <div className={`flex text-sm ${isFixed ? 'w-full' : ''}`}>
@@ -84,6 +94,16 @@ const GraphTooltipArrowContent = ({
               </div>
               <table className="my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300">
                 <tbody>
+                  {delta ? (
+                    <tr>
+                      <td className="w-1/4">Per Second</td>
+                      <td className="w-3/4">
+                        <div>{cumulativePerSecondText}</div>
+                      </td>
+                    </tr>
+                  ) : (
+                    <></>
+                  )}
                   <tr>
                     <td className="w-1/4">Cumulative</td>
 

package/src/GraphTooltipArrow/useGraphTooltip/index.ts

@@ -17,10 +17,16 @@ import {divide, valueFormatter} from '@parca/utilities';
 
 import {
   FIELD_CUMULATIVE,
+  FIELD_CUMULATIVE_PER_SECOND,
   FIELD_DIFF,
+  FIELD_DIFF_PER_SECOND,
   FIELD_LOCATION_ADDRESS,
 } from '../../ProfileIcicleGraph/IcicleGraphArrow';
-import {getTextForCumulative, nodeLabel} from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import {
+  getTextForCumulative,
+  getTextForCumulativePerSecond,
+  nodeLabel,
+} from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
 
 interface Props {
   table: Table<any>;
@@ -35,6 +41,7 @@ interface GraphTooltipData {
   name: string;
   locationAddress: bigint;
   cumulativeText: string;
+  cumulativePerSecondText: string;
   diffText: string;
   diff: bigint;
   row: number;
@@ -58,17 +65,37 @@ export const useGraphTooltip = ({
     table.getChild(FIELD_CUMULATIVE)?.get(row) !== null
       ? BigInt(table.getChild(FIELD_CUMULATIVE)?.get(row))
       : 0n;
+  const cumulativePerSecond: number =
+    table.getChild(FIELD_CUMULATIVE_PER_SECOND)?.get(row) !== null
+      ? table.getChild(FIELD_CUMULATIVE_PER_SECOND)?.get(row)
+      : 0;
   const diff: bigint =
     table.getChild(FIELD_DIFF)?.get(row) !== null
       ? BigInt(table.getChild(FIELD_DIFF)?.get(row))
       : 0n;
+  const diffPerSecond: number =
+    table.getChild(FIELD_DIFF_PER_SECOND)?.get(row) !== null
+      ? table.getChild(FIELD_DIFF_PER_SECOND)?.get(row)
+      : 0;
+
+  const delta = unit === 'nanoseconds';
 
-  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) + '%';
-  const diffText = `${diffValueText} (${diffPercentageText})`;
+  let diffText = '';
+  if (delta) {
+    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 name = nodeLabel(table, row, level, false);
 
@@ -76,6 +103,7 @@ export const useGraphTooltip = ({
     name,
     locationAddress,
     cumulativeText: getTextForCumulative(cumulative, totalUnfiltered, total, unit),
+    cumulativePerSecondText: getTextForCumulativePerSecond(cumulativePerSecond, unit),
     diffText,
     diff,
     row,

package/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -18,11 +18,10 @@ import type {VirtualElement} from '@popperjs/core';
 import {usePopper} from 'react-popper';
 
 import {Label} from '@parca/client';
-import {TextWithTooltip} from '@parca/components';
-import {formatDate, valueFormatter} from '@parca/utilities';
+import {TextWithTooltip, useParcaContext} from '@parca/components';
+import {formatDate, timePattern, valueFormatter} from '@parca/utilities';
 
 import {HighlightedSeries} from '../';
-import {timeFormat} from '../../';
 
 interface Props {
   x: number;
@@ -69,6 +68,8 @@ const MetricsTooltip = ({
   sampleUnit,
   delta,
 }: Props): JSX.Element => {
+  const {timezone} = useParcaContext();
+
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
   const {styles, attributes, ...popperProps} = usePopper(virtualElement, popperElement, {
@@ -154,7 +155,13 @@ const MetricsTooltip = ({
                       )}
                       <tr>
                         <td className="w-1/4">At</td>
-                        <td className="w-3/4">{formatDate(highlighted.timestamp, timeFormat)}</td>
+                        <td className="w-3/4">
+                          {formatDate(
+                            highlighted.timestamp,
+                            timePattern(timezone as string),
+                            timezone
+                          )}
+                        </td>
                       </tr>
                     </tbody>
                   </table>

package/src/MetricsGraph/index.tsx

@@ -19,7 +19,7 @@ import throttle from 'lodash.throttle';
 import {useContextMenu} from 'react-contexify';
 
 import {Label, MetricsSample, MetricsSeries as MetricsSeriesPb} from '@parca/client';
-import {DateTimeRange} from '@parca/components';
+import {DateTimeRange, useParcaContext} from '@parca/components';
 import {
   formatDate,
   formatForTimespan,
@@ -132,6 +132,7 @@ export const RawMetricsGraph = ({
   margin = 0,
   sampleUnit,
 }: Props): JSX.Element => {
+  const {timezone} = useParcaContext();
   const graph = useRef(null);
   const [dragging, setDragging] = useState(false);
   const [hovering, setHovering] = useState(false);
@@ -537,7 +538,7 @@ export const RawMetricsGraph = ({
                   >
                     <line y2={6} className="stroke-gray-300 dark:stroke-gray-500" />
                     <text fill="currentColor" dy=".71em" y={9}>
-                      {formatDate(d, formatForTimespan(from, to))}
+                      {formatDate(d, formatForTimespan(from, to), timezone)}
                     </text>
                   </g>
                   <g key={`grid-${i}`}>

package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx

@@ -24,7 +24,9 @@ import 'react-contexify/dist/ReactContexify.css';
 import {
   FIELD_CHILDREN,
   FIELD_CUMULATIVE,
+  FIELD_CUMULATIVE_PER_SECOND,
   FIELD_DIFF,
+  FIELD_DIFF_PER_SECOND,
   FIELD_FUNCTION_NAME,
   FIELD_MAPPING_FILE,
 } from './index';
@@ -53,6 +55,7 @@ interface IcicleGraphNodesProps {
   sortBy: string;
   darkMode: boolean;
   compareMode: boolean;
+  delta: boolean;
   isContextMenuOpen: boolean;
   hoveringName: string | null;
   setHoveringName: (name: string | null) => void;
@@ -80,6 +83,7 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({
   searchString,
   darkMode,
   compareMode,
+  delta,
   isContextMenuOpen,
   hoveringName,
   setHoveringName,
@@ -127,6 +131,7 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({
         searchString={searchString}
         darkMode={darkMode}
         compareMode={compareMode}
+        delta={delta}
         isContextMenuOpen={isContextMenuOpen}
         hoveringName={hoveringName}
         setHoveringName={setHoveringName}
@@ -165,6 +170,7 @@ interface IcicleNodeProps {
   sortBy: string;
   darkMode: boolean;
   compareMode: boolean;
+  delta: boolean;
   isContextMenuOpen: boolean;
   hoveringName: string | null;
   setHoveringName: (name: string | null) => void;
@@ -204,6 +210,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   sortBy,
   darkMode,
   compareMode,
+  delta,
   isContextMenuOpen,
   hoveringName,
   setHoveringName,
@@ -215,12 +222,18 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
   const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
   const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+  const cumulativePerSecondColumn = table.getChild(FIELD_CUMULATIVE_PER_SECOND);
   const diffColumn = table.getChild(FIELD_DIFF);
+  const diffPerSecondColumn = table.getChild(FIELD_DIFF_PER_SECOND);
   // get the actual values from the columns
   const mappingFile: string | null = arrowToString(mappingColumn?.get(row));
   const functionName: string | null = arrowToString(functionNameColumn?.get(row));
   const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
+  const cumulativePerSecond: number | null =
+    cumulativePerSecondColumn?.get(row) != null ? cumulativePerSecondColumn.get(row) : 0;
   const diff: bigint | null = diffColumn?.get(row) !== null ? BigInt(diffColumn?.get(row)) : null;
+  const diffPerSecond: number | null =
+    diffPerSecondColumn?.get(row) != null ? diffPerSecondColumn.get(row) : null;
   const childRows: number[] = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []);
 
   const highlightedNodes = useMemo(() => {
@@ -259,6 +272,15 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
       });
       break;
     case FIELD_CUMULATIVE:
+      if (delta) {
+        childRows.sort((a, b) => {
+          const aCumulativePerSecond = cumulativePerSecondColumn?.get(a);
+          const bCumulativePerSecond = cumulativePerSecondColumn?.get(b);
+          return bCumulativePerSecond - aCumulativePerSecond;
+        });
+        break;
+      }
+
       childRows.sort((a, b) => {
         const aCumulative: bigint = cumulativeColumn?.get(a);
         const bCumulative: bigint = cumulativeColumn?.get(b);
@@ -267,15 +289,59 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
       break;
     case FIELD_DIFF:
       childRows.sort((a, b) => {
+        if (delta) {
+          let aRatio: number | null = null;
+          let bRatio: number | null = null;
+
+          const aDiff: number | null = diffPerSecondColumn?.get(a);
+          if (aDiff !== null) {
+            const cumulative: number = cumulativePerSecondColumn?.get(a);
+            const prev = cumulative - aDiff;
+            aRatio = aDiff / prev;
+          }
+
+          const bDiff: number | null = diffPerSecondColumn?.get(b);
+          if (bDiff !== null) {
+            const cumulative: number = cumulativePerSecondColumn?.get(b);
+            const prev = cumulative - bDiff;
+            bRatio = bDiff / prev;
+          }
+
+          if (aRatio !== null && bRatio !== null) {
+            return bRatio - aRatio;
+          }
+          if (aRatio === null && bRatio !== null) {
+            return -1;
+          }
+          if (aRatio !== null && bRatio === null) {
+            return 1;
+          }
+          // both are null
+          return 0;
+        }
+
+        let aRatio: number | null = null;
         const aDiff: bigint | null = diffColumn?.get(a);
+        if (aDiff !== null) {
+          const cumulative: bigint = cumulativeColumn?.get(a) ?? 0n;
+          const prev: bigint = cumulative - aDiff;
+          aRatio = Number(aDiff) / Number(prev);
+        }
+        let bRatio: number | null = null;
         const bDiff: bigint | null = diffColumn?.get(b);
-        if (aDiff !== null && bDiff !== null) {
-          return Number(bDiff - aDiff);
+        if (bDiff !== null) {
+          const cumulative: bigint = cumulativeColumn?.get(b) ?? 0n;
+          const prev: bigint = cumulative - bDiff;
+          bRatio = Number(bDiff) / Number(prev);
+        }
+
+        if (aRatio !== null && bRatio !== null) {
+          return bRatio - aRatio;
         }
-        if (aDiff === null && bDiff !== null) {
+        if (aRatio === null && bRatio !== null) {
           return -1;
         }
-        if (aDiff !== null && bDiff === null) {
+        if (aRatio !== null && bRatio === null) {
           return 1;
         }
         // both are null
@@ -289,7 +355,9 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
     isDarkMode: darkMode,
     compareMode,
     cumulative,
+    cumulativePerSecond,
     diff,
+    diffPerSecond,
     mappingColors,
     mappingFile,
     functionName,
@@ -393,6 +461,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
           searchString={searchString}
           sortBy={sortBy}
           darkMode={darkMode}
+          delta={delta}
           compareMode={compareMode}
           isContextMenuOpen={isContextMenuOpen}
           hoveringName={hoveringName}

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -49,7 +49,9 @@ export const FIELD_FUNCTION_START_LINE = 'function_startline';
 export const FIELD_CHILDREN = 'children';
 export const FIELD_LABELS = 'labels';
 export const FIELD_CUMULATIVE = 'cumulative';
+export const FIELD_CUMULATIVE_PER_SECOND = 'cumulative_per_second';
 export const FIELD_DIFF = 'diff';
+export const FIELD_DIFF_PER_SECOND = 'diff_per_second';
 
 interface IcicleGraphArrowProps {
   arrow: FlamegraphArrow;
@@ -229,6 +231,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
               sortBy={sortBy}
               darkMode={isDarkMode}
               compareMode={compareMode}
+              delta={sampleUnit === 'nanoseconds'}
               isContextMenuOpen={isContextMenuOpen}
               hoveringName={hoveringName}
               setHoveringName={setHoveringName}
@@ -246,6 +249,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
     currentSearchString,
     height,
     isDarkMode,
+    sampleUnit,
     mappingColors,
     setCurPath,
     sortBy,

package/src/ProfileIcicleGraph/IcicleGraphArrow/useNodeColor.ts

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import {EVERYTHING_ELSE} from '@parca/store';
-import {diffColor, getLastItem} from '@parca/utilities';
+import {diffColor, diffColorPerSecond, getLastItem} from '@parca/utilities';
 
 interface mappingColors {
   [key: string]: string;
@@ -22,7 +22,9 @@ interface Props {
   isDarkMode: boolean;
   compareMode: boolean;
   cumulative: bigint;
+  cumulativePerSecond: number | null;
   diff: bigint | null;
+  diffPerSecond: number | null;
   mappingColors: mappingColors;
   functionName: string | null;
   mappingFile: string | null;
@@ -32,12 +34,18 @@ const useNodeColor = ({
   isDarkMode,
   compareMode,
   cumulative,
+  cumulativePerSecond,
   diff,
+  diffPerSecond,
   mappingColors,
   functionName,
   mappingFile,
 }: Props): string => {
   if (compareMode) {
+    if (cumulativePerSecond !== null && diffPerSecond !== null) {
+      return diffColorPerSecond(diffPerSecond, cumulativePerSecond, isDarkMode);
+    }
+
     return diffColor(diff ?? 0n, cumulative, isDarkMode);
   }
 

package/src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts

@@ -91,6 +91,17 @@ export const getTextForCumulative = (
     (${(100 * divide(hoveringNodeCumulative, totalUnfiltered)).toFixed(2)}%${filtered})`;
 };
 
+export const getTextForCumulativePerSecond = (
+  hoveringNodeCumulative: number,
+  unit: string
+): string => {
+  return `${valueFormatter(
+    hoveringNodeCumulative,
+    unit === 'nanoseconds' ? 'CPU Cores' : unit,
+    5
+  )}`;
+};
+
 export const arrowToString = (buffer: any): string | null => {
   if (buffer == null || typeof buffer === 'string') {
     return buffer;

package/src/ProfileSource.tsx

@@ -27,8 +27,7 @@ export interface ProfileSource {
   QueryRequest: () => QueryRequest;
   ProfileType: () => ProfileType;
   DiffSelection: () => ProfileDiffSelection;
-  Describe: () => JSX.Element;
-  toString: () => string;
+  toString: (timezone?: string) => string;
 }
 
 export interface ProfileSelection {
@@ -37,8 +36,13 @@ export interface ProfileSelection {
   ProfileSource: () => ProfileSource;
   Type: () => string;
 }
+const timeFormat = (timezone?: string): string => {
+  if (timezone !== undefined) {
+    return 'yyyy-MM-dd HH:mm:ss';
+  }
 
-export const timeFormat = "yyyy-MM-dd HH:mm:ss '(UTC)'";
+  return "yyyy-MM-dd HH:mm:ss '(UTC)'";
+};
 
 export function ParamsString(params: {[key: string]: string}): string {
   return Object.keys(params)
@@ -229,25 +233,17 @@ export class MergedProfileSource implements ProfileSource {
     return ProfileType.fromString(Query.parse(this.query.toString()).profileName());
   }
 
-  Describe(): JSX.Element {
-    return (
-      <a>
-        Merge of &quot;{this.query.toString()}&quot; from {formatDate(this.mergeFrom, timeFormat)}{' '}
-        to {formatDate(this.mergeTo, timeFormat)}
-      </a>
-    );
-  }
-
   stringMatchers(): string[] {
     return this.query.matchers
       .filter((m: Matcher) => m.key !== '__name__')
       .map((m: Matcher) => `${m.key}=${m.value}`);
   }
 
-  toString(): string {
+  toString(timezone?: string): string {
     return `merged profiles of query "${this.query.toString()}" from ${formatDate(
       this.mergeFrom,
-      timeFormat
-    )} to ${formatDate(this.mergeTo, timeFormat)}`;
+      timeFormat(timezone),
+      timezone
+    )} to ${formatDate(this.mergeTo, timeFormat(timezone), timezone)}`;
   }
 }

package/src/ProfileView/index.tsx

@@ -132,6 +132,7 @@ export const ProfileView = ({
   pprofDownloading,
   compare,
 }: ProfileViewProps): JSX.Element => {
+  const {timezone} = useParcaContext();
   const {ref, dimensions} = useContainerDimensions();
   const [curPath, setCurPath] = useState<string[]>([]);
   const [rawDashboardItems = ['icicle'], setDashboardItems] = useURLState({
@@ -325,7 +326,7 @@ export const ProfileView = ({
   };
 
   // TODO: this is just a placeholder, we need to replace with an actually informative and accurate title (cc @metalmatze)
-  const profileSourceString = profileSource?.toString();
+  const profileSourceString = profileSource?.toString(timezone);
   const hasProfileSource = profileSource !== undefined && profileSourceString !== '';
   const headerParts = profileSourceString?.split('"') ?? [];