@parca/profile 0.16.469 → 0.16.471

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.471](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.470...@parca/profile@0.16.471) (2025-02-13)
+
+**Note:** Version bump only for package @parca/profile
+
+## 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

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/MetricsGraph/UtilizationMetrics/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAwC,MAAM,mBAAmB,CAAC;AAUvF,UAAU,YAAY;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE;QACR,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,UAAU,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH;AAaD,UAAU,KAAK;IACb,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAgaD,QAAA,MAAM,kBAAkB,wEAKrB,KAAK,KAAG,GAAG,CAAC,OA4Bd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAwC,MAAM,mBAAmB,CAAC;AAUvF,UAAU,YAAY;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE;QACR,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,UAAU,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH;AAaD,UAAU,KAAK;IACb,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAoaD,QAAA,MAAM,kBAAkB,wEAKrB,KAAK,KAAG,GAAG,CAAC,OA4Bd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/MetricsGraph/UtilizationMetrics/index.js

@@ -114,6 +114,9 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
     const color = d3.scaleOrdinal(d3.schemeCategory10);
     const l = d3.line(d => xScale(d[0]), d => yScale(d[1]));
     const highlighted = useMemo(() => {
+        if (series.length === 0) {
+            return null;
+        }
         // Return the closest point as the highlighted point
         const closestPointPerSeries = series.map(function (s) {
             const distances = s.values.map(d => {

package/dist/MetricsGraphStrips/AreaGraph/Tooltip.d.ts

@@ -1,7 +1,7 @@
 interface TooltipProps {
     x: number;
     y: number;
-    timestamp: Date;
+    timestamp: Date | number;
     value: number;
     containerWidth: number;
 }

package/dist/MetricsGraphStrips/AreaGraph/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraphStrips/AreaGraph/Tooltip.tsx"],"names":[],"mappings":"AAkBA,UAAU,YAAY;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,OAAO,CAAC,EAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAwD3F"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraphStrips/AreaGraph/Tooltip.tsx"],"names":[],"mappings":"AAkBA,UAAU,YAAY;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,OAAO,CAAC,EAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAwD3F"}

package/dist/MetricsGraphStrips/AreaGraph/index.js

@@ -192,5 +192,5 @@ export const AreaGraph = ({ data, height, width, marginLeft = 0, marginRight = 0
                 hoverData !== null &&
                 !isDragging &&
                 !isHoveringDragHandle &&
-                isMouseOverGraph && (_jsx(Tooltip, { x: mousePosition[0], y: mousePosition[1], timestamp: new Date(hoverData.timestamp), value: hoverData.value, containerWidth: width })), _jsx("svg", { style: { width: '100%', height: '100%' }, children: _jsx("path", { fill: fill, d: area(data), className: "opacity-80" }) })] }));
+                isMouseOverGraph && (_jsx(Tooltip, { x: mousePosition[0], y: mousePosition[1], timestamp: hoverData.timestamp, value: hoverData.value, containerWidth: width })), _jsx("svg", { style: { width: '100%', height: '100%' }, children: _jsx("path", { fill: fill, d: area(data), className: "opacity-80" }) })] }));
 };

package/dist/MetricsGraphStrips/MetricsGraphStrips.stories.d.ts

@@ -17,6 +17,7 @@ export declare const ThreeCPUStrips: {
             bounds: number[];
         };
         onSelectedTimeframe: (index: number, bounds: NumberDuo) => void;
+        bounds: number[];
     };
     render: (args: any) => JSX.Element;
 };

package/dist/MetricsGraphStrips/MetricsGraphStrips.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricsGraphStrips.stories.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/MetricsGraphStrips.stories.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAqBtC,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,cAAc;;;;;;;;;;;;;qCAKM,MAAM,UAAU,SAAS,KAAG,IAAI;;mBAI9B,GAAG,KAAG,GAAG,CAAC,OAAO;CAUnD,CAAC"}
+{"version":3,"file":"MetricsGraphStrips.stories.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/MetricsGraphStrips.stories.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAqBtC,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,cAAc;;;;;;;;;;;;;qCAKM,MAAM,UAAU,SAAS,KAAG,IAAI;;;mBAK9B,GAAG,KAAG,GAAG,CAAC,OAAO;CAUnD,CAAC"}

package/dist/MetricsGraphStrips/MetricsGraphStrips.stories.js

@@ -43,6 +43,7 @@ export const ThreeCPUStrips = {
         onSelectedTimeframe: (index, bounds) => {
             console.log('onSelectedTimeframe', index, bounds);
         },
+        bounds: [mockData[0][0].timestamp, mockData[0][mockData[0].length - 1].timestamp],
     },
     render: function Component(args) {
         const [, setArgs] = useArgs();

package/dist/MetricsGraphStrips/index.d.ts

@@ -10,8 +10,9 @@ interface Props {
     };
     onSelectedTimeframe: (labels: LabelSet, bounds: NumberDuo | undefined) => void;
     width?: number;
+    bounds: NumberDuo;
 }
 export declare const labelSetToString: (labelSet?: LabelSet) => string;
-export declare const MetricsGraphStrips: ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, }: Props) => JSX.Element;
+export declare const MetricsGraphStrips: ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, bounds, }: Props) => JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAGvC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAY,SAAS,EAAC,MAAM,aAAa,CAAC;AAEjD,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,cAAe,QAAQ,KAAG,MAmBtD,CAAC;AAMF,eAAO,MAAM,kBAAkB,mEAM5B,KAAK,KAAG,GAAG,CAAC,OAmEd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAGvC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAY,SAAS,EAAC,MAAM,aAAa,CAAC;AAEjD,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB,cAAe,QAAQ,KAAG,MAmBtD,CAAC;AAMF,eAAO,MAAM,kBAAkB,2EAO5B,KAAK,KAAG,GAAG,CAAC,OAwDd,CAAC"}

package/dist/MetricsGraphStrips/index.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { Icon } from '@iconify/react';
 import * as d3 from 'd3';
 import isEqual from 'fast-deep-equal';
@@ -36,21 +36,11 @@ export const labelSetToString = (labelSet) => {
 const getTimelineGuideHeight = (cpus, collapsedIndices) => {
     return 56 * (cpus.length - collapsedIndices.length) + 20 * collapsedIndices.length + 24;
 };
-export const MetricsGraphStrips = ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, }) => {
+export const MetricsGraphStrips = ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, bounds, }) => {
     const [collapsedIndices, setCollapsedIndices] = useState([]);
     // @ts-expect-error
     const color = d3.scaleOrdinal(d3.schemeObservable10);
-    const bounds = useMemo(() => {
-        const bounds = data.length > 0 ? [Infinity, -Infinity] : [0, 1];
-        data.forEach(cpuData => {
-            cpuData.forEach(dataPoint => {
-                bounds[0] = Math.min(bounds[0], dataPoint.timestamp);
-                bounds[1] = Math.max(bounds[1], dataPoint.timestamp);
-            });
-        });
-        return [0, bounds[1] - bounds[0]];
-    }, [data]);
-    return (_jsxs("div", { className: "flex flex-col gap-1 relative my-0 ml-[70px]", style: { width: width ?? '100%' }, children: [_jsx(TimelineGuide, { bounds: [BigInt(bounds[0]), BigInt(bounds[1])], width: width ?? 1468, height: getTimelineGuideHeight(cpus, collapsedIndices), margin: 1 }), cpus.map((cpu, i) => {
+    return (_jsxs("div", { className: "flex flex-col gap-1 relative my-0 ml-[70px]", style: { width: width ?? '100%' }, children: [_jsx(TimelineGuide, { bounds: [BigInt(0), BigInt(bounds[1] - bounds[0])], width: width ?? 1468, height: getTimelineGuideHeight(cpus, collapsedIndices), margin: 1 }), cpus.map((cpu, i) => {
                 const isCollapsed = collapsedIndices.includes(i);
                 const labelStr = labelSetToString(cpu);
                 return (_jsxs("div", { className: "relative min-h-5", style: { width: width ?? 1468 }, children: [_jsxs("div", { className: "text-xs absolute top-0 left-0 flex gap-[2px] items-center bg-white/50 px-1 rounded-sm cursor-pointer", style: {

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/ProfileSelector/MetricsGraphSection.js

@@ -75,7 +75,7 @@ export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGra
         const mergeTo = query.profileType().delta ? mergeFrom + durationInMilliseconds : mergeFrom;
         selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
     };
-    return (_jsxs("div", { className: cx('relative', { 'py-4': !showMetricsGraph }), children: [_jsxs("button", { onClick: () => setDisplayHideMetricsGraphButton(!showMetricsGraph), className: cx('hidden z-10 px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900', showMetricsGraph && 'absolute right-0 bottom-3 !flex', !showMetricsGraph && 'relative !flex ml-auto'), children: [showMetricsGraph ? 'Hide' : 'Show', " Metrics Graph"] }), showMetricsGraph && (_jsx(_Fragment, { children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== '' &&
+    return (_jsxs("div", { className: cx('relative', { 'py-4': !showMetricsGraph }), children: [_jsxs("button", { onClick: () => setDisplayHideMetricsGraphButton(!showMetricsGraph), className: cx('hidden px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900', showMetricsGraph && 'absolute right-0 bottom-3 !flex', !showMetricsGraph && 'relative !flex ml-auto'), children: [showMetricsGraph ? 'Hide' : 'Show', " Metrics Graph"] }), showMetricsGraph && (_jsx(_Fragment, { children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== '' &&
                         querySelection.from !== undefined &&
                         querySelection.to !== undefined ? (_jsx(_Fragment, { children: utilizationMetrics !== undefined ? (_jsx(UtilizationMetricsGraph, { data: utilizationMetrics, addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, utilizationMetricsLoading: utilizationMetricsLoading })) : (_jsx(_Fragment, { children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? sumBy ?? [], sumByLoading: defaultSumByLoading, setTimeRange: handleTimeRangeChange, addLabelMatcher: addLabelMatcher, onPointClick: handlePointClick }) })) })) : (profileSelection === null && (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsEmptyState, { message: "Please select a profile type and click 'Search' to begin." }) }))) }) }))] }));
 }

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":"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"}

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.469",
+  "version": "0.16.471",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.16.127",
-    "@parca/components": "0.16.320",
+    "@parca/components": "0.16.322",
     "@parca/dynamicsize": "0.16.65",
-    "@parca/hooks": "0.0.78",
+    "@parca/hooks": "0.0.80",
     "@parca/icons": "0.16.71",
     "@parca/parser": "0.16.78",
-    "@parca/store": "0.16.164",
-    "@parca/utilities": "0.0.90",
+    "@parca/store": "0.16.166",
+    "@parca/utilities": "0.0.92",
     "@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": "9c58fab5ba798535fbba3607549a568bdebe9606"
+  "gitHead": "9bcabd1ea569b85c2b8ce7bb86ed0c871953712b"
 }

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/MetricsGraph/UtilizationMetrics/index.tsx

@@ -189,6 +189,10 @@ const RawUtilizationMetrics = ({
   );
 
   const highlighted = useMemo(() => {
+    if (series.length === 0) {
+      return null;
+    }
+
     // Return the closest point as the highlighted point
     const closestPointPerSeries = series.map(function (s) {
       const distances = s.values.map(d => {

package/src/MetricsGraphStrips/AreaGraph/Tooltip.tsx

@@ -19,7 +19,7 @@ import {formatDateTimeDownToMS, valueFormatter} from '@parca/utilities';
 interface TooltipProps {
   x: number;
   y: number;
-  timestamp: Date;
+  timestamp: Date | number;
   value: number;
   containerWidth: number;
 }

package/src/MetricsGraphStrips/AreaGraph/index.tsx

@@ -352,7 +352,7 @@ export const AreaGraph = ({
           <Tooltip
             x={mousePosition[0]}
             y={mousePosition[1]}
-            timestamp={new Date(hoverData.timestamp)}
+            timestamp={hoverData.timestamp}
             value={hoverData.value}
             containerWidth={width}
           />

package/src/MetricsGraphStrips/MetricsGraphStrips.stories.tsx

@@ -52,6 +52,7 @@ export const ThreeCPUStrips = {
     onSelectedTimeframe: (index: number, bounds: NumberDuo): void => {
       console.log('onSelectedTimeframe', index, bounds);
     },
+    bounds: [mockData[0][0].timestamp, mockData[0][mockData[0].length - 1].timestamp],
   },
   render: function Component(args: any): JSX.Element {
     const [, setArgs] = useArgs();

package/src/MetricsGraphStrips/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useMemo, useState} from 'react';
+import {useState} from 'react';
 
 import {Icon} from '@iconify/react';
 import * as d3 from 'd3';
@@ -32,6 +32,7 @@ interface Props {
   };
   onSelectedTimeframe: (labels: LabelSet, bounds: NumberDuo | undefined) => void;
   width?: number;
+  bounds: NumberDuo;
 }
 
 export const labelSetToString = (labelSet?: LabelSet): string => {
@@ -65,27 +66,17 @@ export const MetricsGraphStrips = ({
   selectedTimeframe,
   onSelectedTimeframe,
   width,
+  bounds,
 }: Props): JSX.Element => {
   const [collapsedIndices, setCollapsedIndices] = useState<number[]>([]);
 
   // @ts-expect-error
   const color = d3.scaleOrdinal(d3.schemeObservable10);
 
-  const bounds = useMemo(() => {
-    const bounds: NumberDuo = data.length > 0 ? [Infinity, -Infinity] : [0, 1];
-    data.forEach(cpuData => {
-      cpuData.forEach(dataPoint => {
-        bounds[0] = Math.min(bounds[0], dataPoint.timestamp);
-        bounds[1] = Math.max(bounds[1], dataPoint.timestamp);
-      });
-    });
-    return [0, bounds[1] - bounds[0]] as NumberDuo;
-  }, [data]);
-
   return (
     <div className="flex flex-col gap-1 relative my-0 ml-[70px]" style={{width: width ?? '100%'}}>
       <TimelineGuide
-        bounds={[BigInt(bounds[0]), BigInt(bounds[1])]}
+        bounds={[BigInt(0), BigInt(bounds[1] - bounds[0])]}
         width={width ?? 1468}
         height={getTimelineGuideHeight(cpus, collapsedIndices)}
         margin={1}

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/ProfileSelector/MetricsGraphSection.tsx

@@ -138,7 +138,7 @@ export function MetricsGraphSection({
       <button
         onClick={() => setDisplayHideMetricsGraphButton(!showMetricsGraph)}
         className={cx(
-          'hidden z-10 px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900',
+          'hidden px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900',
           showMetricsGraph && 'absolute right-0 bottom-3 !flex',
           !showMetricsGraph && 'relative !flex ml-auto'
         )}

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';
   }