@parca/profile 0.16.468 → 0.16.470

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.470 (2025-02-12)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.469](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.468...@parca/profile@0.16.469) (2025-02-10)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.468](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.467...@parca/profile@0.16.468) (2025-02-04)
 
 **Note:** Version bump only for package @parca/profile

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;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"}
+{"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;AAGnC,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;AAuFF,eAAe,wBAAwB,CAAC"}

package/dist/GraphTooltipArrow/Content.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@iconify/react';
-import { getLastItem } from '@parca/utilities';
+import { useParcaContext } from '@parca/components';
+import { formatDateTimeDownToMS, getLastItem } from '@parca/utilities';
 import { hexifyAddress, truncateString, truncateStringReverse } from '../utils';
 import { ExpandOnHover } from './ExpandOnHoverValue';
 import { useGraphTooltip } from './useGraphTooltip';
@@ -30,10 +31,11 @@ const GraphTooltipArrowContent = ({ table, profileType, unit, total, totalUnfilt
                                                 : '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 }) => {
-    const { labelPairs, functionFilename, file, locationAddress, mappingFile, mappingBuildID, inlined, } = useGraphTooltipMetaInfo({ table, row });
+    const { labelPairs, functionFilename, file, locationAddress, mappingFile, mappingBuildID, inlined, timestamp, } = useGraphTooltipMetaInfo({ table, row });
+    const { timezone } = useParcaContext();
     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';
-    return (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pt-2", children: "File" }), _jsx("td", { className: "w-3/4 pt-2 break-all", children: functionFilename === '' ? (_jsx(NoData, {})) : (_jsx("div", { className: "flex gap-4", children: _jsx("div", { className: "whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 30) }) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: locationAddress === 0n ? _jsx(NoData, {}) : _jsx("div", { children: hexifyAddress(locationAddress) }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Inlined" }), _jsx("td", { className: "w-3/4 break-all", children: inlinedText })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: isMappingBuildIDAvailable ? _jsx("div", { children: truncateString(mappingBuildID, 28) }) : _jsx(NoData, {}) })] }), labelPairs.length > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Labels" }), _jsx("td", { className: "w-3/4 break-all", children: labels })] }))] }));
+    return (_jsxs(_Fragment, { children: [timestamp == null || timestamp === 0n ? (_jsx("div", { className: "pt-2" })) : (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pt-2", children: "Timestamp" }), _jsx("td", { className: "w-3/4 pt-2 break-all", children: formatDateTimeDownToMS(new Date(Number(timestamp / 1000000n)), timezone) }), ' '] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: functionFilename === '' ? (_jsx(NoData, {})) : (_jsx("div", { className: "flex gap-4", children: _jsx("div", { className: "whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 30) }) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: locationAddress === 0n ? _jsx(NoData, {}) : _jsx("div", { children: hexifyAddress(locationAddress) }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Inlined" }), _jsx("td", { className: "w-3/4 break-all", children: inlinedText })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: isMappingBuildIDAvailable ? _jsx("div", { children: truncateString(mappingBuildID, 28) }) : _jsx(NoData, {}) })] }), labelPairs.length > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Labels" }), _jsx("td", { className: "w-3/4 break-all", children: labels })] }))] }));
 };
 export default GraphTooltipArrowContent;

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

@@ -14,6 +14,7 @@ interface GraphTooltipMetaInfoData {
     mappingFile: string | null;
     mappingBuildID: string | null;
     inlined: boolean | null;
+    timestamp: bigint | null;
 }
 export declare const useGraphTooltipMetaInfo: ({ table, row }: Props) => GraphTooltipMetaInfoData;
 export {};

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;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,wBA4F7D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAqBnC,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;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,uBAAuB,mBAAkB,KAAK,KAAG,wBA8F7D,CAAC"}

package/dist/GraphTooltipArrow/useGraphTooltipMetaInfo/index.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { QueryRequest_ReportType } from '@parca/client';
 import { useParcaContext, useURLState } from '@parca/components';
-import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_START_LINE, FIELD_FUNCTION_SYSTEM_NAME, FIELD_INLINED, FIELD_LOCATION_ADDRESS, FIELD_LOCATION_LINE, FIELD_MAPPING_BUILD_ID, FIELD_MAPPING_FILE, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
+import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_START_LINE, FIELD_FUNCTION_SYSTEM_NAME, FIELD_INLINED, FIELD_LOCATION_ADDRESS, FIELD_LOCATION_LINE, FIELD_MAPPING_BUILD_ID, FIELD_MAPPING_FILE, FIELD_TIMESTAMP, } from '../../ProfileIcicleGraph/IcicleGraphArrow';
 import { arrowToString } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
 import { useProfileViewContext } from '../../ProfileView/context/ProfileViewContext';
 import { useQuery } from '../../useQuery';
@@ -28,6 +28,7 @@ export const useGraphTooltipMetaInfo = ({ table, row }) => {
     const lineNumber = locationLine !== 0n ? locationLine : functionStartLine !== 0n ? functionStartLine : undefined;
     const labelPrefix = 'labels.';
     const labelColumnNames = table.schema.fields.filter(field => field.name.startsWith(labelPrefix));
+    const timestamp = table.getChild(FIELD_TIMESTAMP)?.get(row);
     const { queryServiceClient, enableSourcesView } = useParcaContext();
     const { profileSource } = useProfileViewContext();
     const { isLoading: sourceLoading, response: sourceResponse } = useQuery(queryServiceClient, profileSource, QueryRequest_ReportType.SOURCE, {
@@ -84,5 +85,6 @@ export const useGraphTooltipMetaInfo = ({ table, row }) => {
         mappingBuildID,
         mappingFile,
         inlined,
+        timestamp,
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"IcicleChartRootNode.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAa,eAAe,EAAY,MAAM,oBAAoB,CAAC;AAG1E,UAAU,gCAAgC;IACxC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,eAAO,MAAM,mBAAmB,gFA8H9B,CAAC"}
+{"version":3,"file":"IcicleChartRootNode.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAa,eAAe,EAAY,MAAM,oBAAoB,CAAC;AAG1E,UAAU,gCAAgC;IACxC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,eAAO,MAAM,mBAAmB,gFAyH9B,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.js

@@ -15,13 +15,14 @@ import React from 'react';
 import cx from 'classnames';
 import twColors from 'tailwindcss/colors';
 import { scaleLinear } from '@parca/utilities';
-import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_GROUPBY_METADATA } from '.';
+import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_DURATION, FIELD_TIMESTAMP } from '.';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
-import { arrowToString, boundsFromProfileSource } from './utils';
+import { boundsFromProfileSource } from './utils';
 export const IcicleChartRootNode = React.memo(function IcicleChartRootNodeNonMemo({ table, row, colors, colorBy, y, height, setCurPath, curPath, level, path, total, totalWidth, xScale, searchString, setHoveringRow, setHoveringLevel, sortBy, darkMode, compareMode, profileType, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, profileSource, }) {
     // get the columns to read from
+    const durationColumn = table.getChild(FIELD_DURATION);
+    const timestampColumn = table.getChild(FIELD_TIMESTAMP);
     const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
-    const groupByMetadata = table.getChild(FIELD_GROUPBY_METADATA);
     const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
     const childRows = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []).sort((a, b) => a - b);
     const tsBounds = boundsFromProfileSource(profileSource);
@@ -35,13 +36,10 @@ export const IcicleChartRootNode = React.memo(function IcicleChartRootNodeNonMem
         return _jsx(_Fragment, { children: null });
     }
     return (_jsx(_Fragment, { children: childRows.map(row => {
-            const groupByFields = (groupByMetadata?.get(row)).toJSON();
-            const tsStr = arrowToString(groupByFields.time_nanos);
-            const tsNanos = BigInt(parseInt(tsStr, 10));
-            const durationStr = arrowToString(groupByFields.duration);
-            const duration = parseInt(durationStr, 10);
-            const x = tsXScale(tsNanos);
-            const width = tsXScale(tsNanos + BigInt(Math.round(duration))) - x;
+            const duration = durationColumn?.get(row) !== null ? BigInt(durationColumn?.get(row)) : 0n;
+            const timestamp = timestampColumn?.get(row) !== null ? BigInt(timestampColumn?.get(row)) : 0n;
+            const x = tsXScale(timestamp);
+            const width = tsXScale(timestamp + BigInt(Math.round(Number(duration)))) - x;
             const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
             const newXScale = scaleLinear([0n, BigInt(cumulative)], [0, width]);
             return (_jsxs(_Fragment, { children: [_jsxs("g", { transform: `translate(${x + 1}, ${y + 1})`, children: [_jsx("rect", { x: 0, y: 0, width: width, height: RowHeight, style: {

package/dist/ProfileSource.d.ts

@@ -14,6 +14,7 @@ export interface ProfileSelection {
     ProfileSource: () => ProfileSource;
     Type: () => string;
 }
+export declare const timeFormat: (timezone?: string) => string;
 export declare function ParamsString(params: {
     [key: string]: string;
 }): string;

package/dist/ProfileSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileSource.d.ts","sourceRoot":"","sources":["../src/ProfileSource.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProfileSource.d.ts","sourceRoot":"","sources":["../src/ProfileSource.tsx"],"names":[],"mappings":"AAaA,OAAO,EACL,oBAAoB,EAEpB,YAAY,EAIb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAqB,WAAW,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAGrE,MAAM,WAAW,aAAa;IAC5B,YAAY,EAAE,MAAM,YAAY,CAAC;IACjC,WAAW,EAAE,MAAM,WAAW,CAAC;IAC/B,aAAa,EAAE,MAAM,oBAAoB,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,MAAM,CAAC;IAC1B,aAAa,EAAE,MAAM;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC,CAAC;IAC1C,aAAa,EAAE,MAAM,aAAa,CAAC;IACnC,IAAI,EAAE,MAAM,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,cAAe,MAAM,KAAG,MAM9C,CAAC;AAEF,wBAAgB,YAAY,CAAC,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,GAAG,MAAM,CAMpE;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,EAAE,MAAM,EAAE,MAAM,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,CAI/F;AAED,wBAAgB,0BAA0B,CACxC,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,OAAO,EAAE,MAAM,GAAG,SAAS,EAC3B,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,WAAW,CAAC,EAAE,MAAM,GACnB,gBAAgB,GAAG,IAAI,CA0BzB;AAED,qBAAa,sBAAuB,YAAW,gBAAgB;IAC7D,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;gBAEjB,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,CAAC,EAAE,MAAM;IAalF,WAAW,IAAI,MAAM;IAIrB,aAAa,IAAI;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC;IAQrC,IAAI,IAAI,MAAM;IAId,aAAa,IAAI,aAAa;CAG/B;AAED,qBAAa,iBAAkB,YAAW,aAAa;IACrD,CAAC,EAAE,aAAa,CAAC;IACjB,CAAC,EAAE,aAAa,CAAC;IACjB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;gBAEP,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,aAAa,EAAE,WAAW,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO;IAQxF,aAAa,IAAI,oBAAoB;IAIrC,YAAY,IAAI,YAAY;IAiB5B,WAAW,IAAI,WAAW;IAI1B,QAAQ,IAAI,GAAG,CAAC,OAAO;IAQvB,QAAQ,IAAI,MAAM;CAUnB;AAED,qBAAa,mBAAoB,YAAW,aAAa;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,WAAW,CAAC;gBAEb,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,CAAC,EAAE,MAAM;IAQlF,aAAa,IAAI,oBAAoB;IAcrC,YAAY,IAAI,YAAY;IAiB5B,WAAW,IAAI,WAAW;IAI1B,cAAc,IAAI,MAAM,EAAE;IAM1B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM;CAmBpC"}

package/dist/ProfileSource.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { ProfileDiffSelection_Mode, QueryRequest_Mode, QueryRequest_ReportType, Timestamp, } from '@parca/client';
 import { NewParser, ProfileType, Query } from '@parca/parser';
 import { formatDate, formatDuration } from '@parca/utilities';
-const timeFormat = (timezone) => {
+export const timeFormat = (timezone) => {
     if (timezone !== undefined) {
         return 'yyyy-MM-dd HH:mm:ss';
     }

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.468",
+  "version": "0.16.470",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
-    "@parca/client": "0.16.126",
-    "@parca/components": "0.16.319",
+    "@parca/client": "0.16.127",
+    "@parca/components": "0.16.321",
     "@parca/dynamicsize": "0.16.65",
-    "@parca/hooks": "0.0.77",
+    "@parca/hooks": "0.0.79",
     "@parca/icons": "0.16.71",
     "@parca/parser": "0.16.78",
-    "@parca/store": "0.16.163",
-    "@parca/utilities": "0.0.89",
+    "@parca/store": "0.16.165",
+    "@parca/utilities": "0.0.91",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@storybook/preview-api": "^8.4.3",
@@ -75,5 +75,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "1c8eeeff45c162e0c93a59b2cab77f21615e5397"
+  "gitHead": "487d4b97e6da9903b123b9292c214c0b17796d93"
 }

package/src/GraphTooltipArrow/Content.tsx

@@ -16,8 +16,9 @@ import React from 'react';
 import {Icon} from '@iconify/react';
 import {Table} from 'apache-arrow';
 
+import {useParcaContext} from '@parca/components';
 import {ProfileType} from '@parca/parser';
-import {getLastItem} from '@parca/utilities';
+import {formatDateTimeDownToMS, getLastItem} from '@parca/utilities';
 
 import {hexifyAddress, truncateString, truncateStringReverse} from '../utils';
 import {ExpandOnHover} from './ExpandOnHoverValue';
@@ -141,7 +142,9 @@ const TooltipMetaInfo = ({table, row}: {table: Table<any>; row: number}): React.
     mappingFile,
     mappingBuildID,
     inlined,
+    timestamp,
   } = useGraphTooltipMetaInfo({table, row});
+  const {timezone} = useParcaContext();
 
   const labels = labelPairs.map(
     (l): React.JSX.Element => (
@@ -159,9 +162,19 @@ const TooltipMetaInfo = ({table, row}: {table: Table<any>; row: number}): React.
 
   return (
     <>
+      {timestamp == null || timestamp === 0n ? (
+        <div className="pt-2" />
+      ) : (
+        <tr>
+          <td className="w-1/4 pt-2">Timestamp</td>
+          <td className="w-3/4 pt-2 break-all">
+            {formatDateTimeDownToMS(new Date(Number(timestamp / 1000000n)), timezone)}
+          </td>{' '}
+        </tr>
+      )}
       <tr>
-        <td className="w-1/4 pt-2">File</td>
-        <td className="w-3/4 pt-2 break-all">
+        <td className="w-1/4">File</td>
+        <td className="w-3/4 break-all">
           {functionFilename === '' ? (
             <NoData />
           ) : (

package/src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts

@@ -25,6 +25,7 @@ import {
   FIELD_LOCATION_LINE,
   FIELD_MAPPING_BUILD_ID,
   FIELD_MAPPING_FILE,
+  FIELD_TIMESTAMP,
 } from '../../ProfileIcicleGraph/IcicleGraphArrow';
 import {arrowToString} from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
 import {ProfileSource} from '../../ProfileSource';
@@ -47,6 +48,7 @@ interface GraphTooltipMetaInfoData {
   mappingFile: string | null;
   mappingBuildID: string | null;
   inlined: boolean | null;
+  timestamp: bigint | null;
 }
 
 export const useGraphTooltipMetaInfo = ({table, row}: Props): GraphTooltipMetaInfoData => {
@@ -66,6 +68,7 @@ export const useGraphTooltipMetaInfo = ({table, row}: Props): GraphTooltipMetaIn
     locationLine !== 0n ? locationLine : functionStartLine !== 0n ? functionStartLine : undefined;
   const labelPrefix = 'labels.';
   const labelColumnNames = table.schema.fields.filter(field => field.name.startsWith(labelPrefix));
+  const timestamp = table.getChild(FIELD_TIMESTAMP)?.get(row);
 
   const {queryServiceClient, enableSourcesView} = useParcaContext();
   const {profileSource} = useProfileViewContext();
@@ -140,5 +143,6 @@ export const useGraphTooltipMetaInfo = ({table, row}: Props): GraphTooltipMetaIn
     mappingBuildID,
     mappingFile,
     inlined,
+    timestamp,
   };
 };

package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.tsx

@@ -13,16 +13,15 @@
 
 import React from 'react';
 
-import {Binary, StructRow} from 'apache-arrow';
 import cx from 'classnames';
 import twColors from 'tailwindcss/colors';
 
 import {scaleLinear} from '@parca/utilities';
 
-import {FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_GROUPBY_METADATA} from '.';
+import {FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_DURATION, FIELD_TIMESTAMP} from '.';
 import {ProfileSource} from '../../ProfileSource';
 import {IcicleNode, IcicleNodeProps, RowHeight} from './IcicleGraphNodes';
-import {arrowToString, boundsFromProfileSource} from './utils';
+import {boundsFromProfileSource} from './utils';
 
 interface IcicleChartRootNodeSpecificProps {
   profileSource?: ProfileSource;
@@ -58,8 +57,9 @@ export const IcicleChartRootNode = React.memo(function IcicleChartRootNodeNonMem
   profileSource,
 }: IcicleNodeProps & IcicleChartRootNodeSpecificProps): React.JSX.Element {
   // get the columns to read from
+  const durationColumn = table.getChild(FIELD_DURATION);
+  const timestampColumn = table.getChild(FIELD_TIMESTAMP);
   const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
-  const groupByMetadata = table.getChild(FIELD_GROUPBY_METADATA);
   const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
   const childRows: number[] = Array.from<number>(
     table.getChild(FIELD_CHILDREN)?.get(row) ?? []
@@ -83,18 +83,12 @@ export const IcicleChartRootNode = React.memo(function IcicleChartRootNodeNonMem
   return (
     <>
       {childRows.map(row => {
-        const groupByFields = (
-          groupByMetadata?.get(row) as StructRow<Record<string, Binary>>
-        ).toJSON();
+        const duration = durationColumn?.get(row) !== null ? BigInt(durationColumn?.get(row)) : 0n;
+        const timestamp =
+          timestampColumn?.get(row) !== null ? BigInt(timestampColumn?.get(row)) : 0n;
 
-        const tsStr = arrowToString(groupByFields.time_nanos) as string;
-
-        const tsNanos = BigInt(parseInt(tsStr, 10));
-        const durationStr = arrowToString(groupByFields.duration) as string;
-        const duration = parseInt(durationStr, 10);
-
-        const x = tsXScale(tsNanos);
-        const width = tsXScale(tsNanos + BigInt(Math.round(duration))) - x;
+        const x = tsXScale(timestamp);
+        const width = tsXScale(timestamp + BigInt(Math.round(Number(duration)))) - x;
 
         const cumulative =
           cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;

package/src/ProfileSource.tsx

@@ -35,7 +35,8 @@ export interface ProfileSelection {
   ProfileSource: () => ProfileSource;
   Type: () => string;
 }
-const timeFormat = (timezone?: string): string => {
+
+export const timeFormat = (timezone?: string): string => {
   if (timezone !== undefined) {
     return 'yyyy-MM-dd HH:mm:ss';
   }