@parca/profile 0.16.139 → 0.16.141

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.141 (2023-03-20)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.140](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.139...@parca/profile@0.16.140) (2023-03-16)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.139](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.138...@parca/profile@0.16.139) (2023-03-16)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Callgraph as CallgraphType } from '@parca/client';
 export interface Props {
     data: CallgraphType;

package/dist/GraphTooltip/ExpandOnHoverValue.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     value: string | number | undefined;
     displayValue?: string | number | undefined;

package/dist/GraphTooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CallgraphNode, CallgraphNodeMeta, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode } from '@parca/client';
 import { Location, Mapping, Function as ParcaFunction } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface ExtendedCallgraphNodeMeta extends CallgraphNodeMeta {

package/dist/MatchersInput/SuggestionItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     isHighlighted: boolean;
     onHighlight: () => void;

package/dist/MatchersInput/SuggestionsList.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare class Suggestion {
     type: string;
     typeahead: string;

package/dist/MatchersInput/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LabelsResponse, QueryServiceClient } from '@parca/client';
 import { Query } from '@parca/parser';
 interface MatchersInputProps {

package/dist/MetricsCircle/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface MetricsCircleProps {
     cx: number;
     cy: number;

package/dist/MetricsGraph/MetricsTooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { HighlightedSeries } from '../';
 interface Props {
     x: number;
@@ -6,6 +7,7 @@ interface Props {
     onLabelClick: (labelName: string, labelValue: string) => void;
     contextElement: Element | null;
     sampleUnit: string;
+    delta: boolean;
 }
-declare const MetricsTooltip: ({ x, y, highlighted, onLabelClick, contextElement, sampleUnit, }: Props) => JSX.Element;
+declare const MetricsTooltip: ({ x, y, highlighted, onLabelClick, contextElement, sampleUnit, delta, }: Props) => JSX.Element;
 export default MetricsTooltip;

package/dist/MetricsGraph/MetricsTooltip/index.js

@@ -68,7 +68,7 @@ function generateGetBoundingClientRect(contextElement, x, y) {
     };
 }
 var MetricsTooltip = function (_a) {
-    var x = _a.x, y = _a.y, highlighted = _a.highlighted, onLabelClick = _a.onLabelClick, contextElement = _a.contextElement, sampleUnit = _a.sampleUnit;
+    var x = _a.x, y = _a.y, highlighted = _a.highlighted, onLabelClick = _a.onLabelClick, contextElement = _a.contextElement, sampleUnit = _a.sampleUnit, delta = _a.delta;
     var _b = useState(null), popperElement = _b[0], setPopperElement = _b[1];
     var _c = usePopper(virtualElement, popperElement, {
         placement: 'auto-start',
@@ -98,7 +98,7 @@ var MetricsTooltip = function (_a) {
     }, [x, y, contextElement, update]);
     var nameLabel = highlighted === null || highlighted === void 0 ? void 0 : highlighted.labels.find(function (e) { return e.name === '__name__'; });
     var highlightedNameLabel = nameLabel !== undefined ? nameLabel : { name: '', value: '' };
-    return (_jsx("div", __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { className: "z-10" }, { children: _jsx("div", __assign({ className: "flex max-w-md" }, { children: _jsx("div", __assign({ className: "m-auto" }, { children: _jsx("div", __assign({ className: "border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-lg opacity-90", style: { borderWidth: 1 } }, { children: _jsx("div", __assign({ className: "flex flex-row" }, { children: _jsxs("div", __assign({ className: "ml-2 mr-6" }, { children: [_jsx("span", __assign({ className: "font-semibold" }, { children: highlightedNameLabel.value })), _jsx("span", __assign({ className: "block text-gray-700 dark:text-gray-300 my-2" }, { children: _jsx("table", __assign({ className: "table-auto" }, { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Value" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) }))] }), _jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Total" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.value, sampleUnit, 2) }))] }), _jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "At" })), _jsx("td", __assign({ className: "w-3/4" }, { children: formatDate(highlighted.timestamp, timeFormat) }))] })] }) })) })), _jsx("span", __assign({ className: "block text-gray-500 my-2" }, { children: highlighted.labels
+    return (_jsx("div", __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { className: "z-10" }, { children: _jsx("div", __assign({ className: "flex max-w-md" }, { children: _jsx("div", __assign({ className: "m-auto" }, { children: _jsx("div", __assign({ className: "border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-lg opacity-90", style: { borderWidth: 1 } }, { children: _jsx("div", __assign({ className: "flex flex-row" }, { children: _jsxs("div", __assign({ className: "ml-2 mr-6" }, { children: [_jsx("span", __assign({ className: "font-semibold" }, { children: highlightedNameLabel.value })), _jsx("span", __assign({ className: "block text-gray-700 dark:text-gray-300 my-2" }, { children: _jsx("table", __assign({ className: "table-auto" }, { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Value" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) }))] }), delta && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Total" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.value, sampleUnit, 2) }))] })), highlighted.duration > 0 && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Duration" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.duration, 'nanoseconds', 2) }))] })), _jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "At" })), _jsx("td", __assign({ className: "w-3/4" }, { children: formatDate(highlighted.timestamp, timeFormat) }))] })] }) })) })), _jsx("span", __assign({ className: "block text-gray-500 my-2" }, { children: highlighted.labels
                                         .filter(function (label) { return label.name !== '__name__'; })
                                         .map(function (label) {
                                         return (_jsx("button", __assign({ type: "button", className: "inline-block rounded-lg text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400 px-2 py-1 text-xs font-bold mr-3", onClick: function () { return onLabelClick(label.name, label.value); } }, { children: _jsx(TextWithTooltip, { text: "".concat(label.name, "=\"").concat(label.value, "\""), maxTextLength: 37, id: "tooltip-".concat(label.name, "-").concat(label.value) }) }), label.name));

package/dist/MetricsGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Label, MetricsSeries as MetricsSeriesPb } from '@parca/client';
 import { DateTimeRange } from '@parca/components';
 import { MergedProfileSelection } from '..';
@@ -18,6 +19,7 @@ export interface HighlightedSeries {
     timestamp: number;
     value: number;
     valuePerSecond: number;
+    duration: number;
     x: number;
     y: number;
 }

package/dist/MetricsGraph/index.js

@@ -70,7 +70,7 @@ export var RawMetricsGraph = function (_a) {
                 values: s.samples.reduce(function (agg, d) {
                     if (d.timestamp !== undefined && d.valuePerSecond !== undefined) {
                         var t = (+d.timestamp.seconds * 1e9 + d.timestamp.nanos) / 1e6; // https://github.com/microsoft/TypeScript/issues/5710#issuecomment-157886246
-                        agg.push([t, d.valuePerSecond, parseFloat(d.value)]);
+                        agg.push([t, d.valuePerSecond, parseFloat(d.value), parseFloat(d.duration)]);
                     }
                     return agg;
                 }, []),
@@ -124,6 +124,7 @@ export var RawMetricsGraph = function (_a) {
             timestamp: point[0],
             valuePerSecond: point[1],
             value: point[2],
+            duration: point[3],
             x: xScale(point[0]),
             y: yScale(point[1]),
         };
@@ -231,12 +232,13 @@ export var RawMetricsGraph = function (_a) {
             timestamp: sample[0],
             valuePerSecond: sample[1],
             value: sample[2],
+            duration: sample[3],
             x: xScale(sample[0]),
             y: yScale(sample[1]),
         };
     };
     var selected = findSelectedProfile();
-    return (_jsxs(_Fragment, { children: [highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", __assign({ onMouseMove: onMouseMove, onMouseEnter: function () { return setHovering(true); }, onMouseLeave: function () { return setHovering(false); } }, { children: _jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, highlighted: highlighted, onLabelClick: onLabelClick, contextElement: graph.current, sampleUnit: sampleUnit }) }))), _jsx("div", __assign({ ref: graph, onMouseEnter: function () {
+    return (_jsxs(_Fragment, { children: [highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", __assign({ onMouseMove: onMouseMove, onMouseEnter: function () { return setHovering(true); }, onMouseLeave: function () { return setHovering(false); } }, { children: _jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, highlighted: highlighted, onLabelClick: onLabelClick, contextElement: graph.current, sampleUnit: sampleUnit, delta: profile !== null ? profile === null || profile === void 0 ? void 0 : profile.query.profType.delta : false }) }))), _jsx("div", __assign({ ref: graph, onMouseEnter: function () {
                     setHovering(true);
                 }, onMouseLeave: function () { return setHovering(false); } }, { children: _jsxs("svg", __assign({ width: "".concat(width, "px"), height: "".concat(height + margin, "px"), onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove }, { children: [_jsx("g", __assign({ transform: "translate(".concat(margin, ", 0)") }, { children: dragging && (_jsx("g", __assign({ className: "zoom-time-rect" }, { children: _jsx("rect", { className: "bar", x: pos[0] - relPos < 0 ? pos[0] : relPos, y: 0, height: height, width: Math.abs(pos[0] - relPos), fill: 'rgba(0, 0, 0, 0.125)' }) }))) })), _jsxs("g", __assign({ transform: "translate(".concat(margin, ", ").concat(margin, ")") }, { children: [_jsx("g", __assign({ className: "lines fill-transparent" }, { children: series.map(function (s, i) { return (_jsx("g", __assign({ className: "line" }, { children: _jsx(MetricsSeries, { data: s, line: l, color: color(i.toString()), strokeWidth: hovering && highlighted != null && i === highlighted.seriesIndex
                                                 ? lineStrokeHover

package/dist/MetricsSeries/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as d3 from 'd3';
 interface MetricsSeriesProps {
     data: any;

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import type { NavigateFunction } from '@parca/functions';
 import { ProfileSelection } from '..';

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import type { NavigateFunction } from '@parca/functions';
 import { ProfileSelection } from '..';

package/dist/ProfileExplorer/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import type { NavigateFunction } from '@parca/functions';
 interface ProfileExplorerProps {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { NavigateFunction } from '@parca/functions';
 interface Props {
     navigateTo?: NavigateFunction;

package/dist/ProfileIcicleGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Flamegraph } from '@parca/client';
 import { type NavigateFunction } from '@parca/functions';
 export type ResizeHandler = (width: number, height: number) => void;

package/dist/ProfileMetricsGraph/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { Label, QueryRangeResponse, QueryServiceClient } from '@parca/client';
 import { DateTimeRange } from '@parca/components';

package/dist/ProfileMetricsGraph/index.js

@@ -102,12 +102,18 @@ var ProfileMetricsGraph = function (_a) {
     var queryClient = _a.queryClient, queryExpression = _a.queryExpression, profile = _a.profile, from = _a.from, to = _a.to, setTimeRange = _a.setTimeRange, addLabelMatcher = _a.addLabelMatcher, onPointClick = _a.onPointClick;
     var _b = useQueryRange(queryClient, queryExpression, from, to), isLoading = _b.isLoading, response = _b.response, error = _b.error;
     var isLoaderVisible = useDelayedLoader(isLoading);
-    var _c = useParcaContext(), loader = _c.loader, onError = _c.onError;
+    var _c = useParcaContext(), loader = _c.loader, onError = _c.onError, perf = _c.perf;
     useEffect(function () {
         if (error !== null) {
             onError === null || onError === void 0 ? void 0 : onError(error, 'metricsGraph');
         }
     }, [error, onError]);
+    useEffect(function () {
+        if (response === null) {
+            return;
+        }
+        perf === null || perf === void 0 ? void 0 : perf.markInteraction('Metrics graph render', response.series[0].samples.length);
+    }, [perf, response]);
     if (isLoaderVisible) {
         return _jsx(_Fragment, { children: loader });
     }

package/dist/ProfileSelector/CompareButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const CompareButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileTypesResponse, QueryServiceClient } from '@parca/client';
 import { ProfileSelection } from '..';

package/dist/ProfileSource.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Label, ProfileDiffSelection, QueryRequest } from '@parca/client';
 import { ProfileType, Query } from '@parca/parser';
 export interface ProfileSource {

package/dist/ProfileTypeSelector/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileType, ProfileTypesResponse } from '@parca/client';
 interface WellKnownProfile {

package/dist/ProfileView/FilterByFunctionButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { NavigateFunction } from '@parca/functions';
 declare const FilterByFunctionButton: ({ navigateTo, }: {
     navigateTo: NavigateFunction | undefined;

package/dist/ProfileView/ViewSelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { NavigateFunction } from '@parca/functions';
 interface Props {
     position: number;

package/dist/ProfileView/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Callgraph as CallgraphType, Flamegraph, QueryServiceClient, Top } from '@parca/client';
 import { ResizeHandler } from '../ProfileIcicleGraph';
 import { ProfileSource } from '../ProfileSource';

package/dist/ProfileViewWithData.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { type NavigateFunction } from '@parca/functions';
 import { ProfileSource } from './ProfileSource';

package/dist/ProfileViewWithData.js

@@ -82,22 +82,32 @@ export var ProfileViewWithData = function (_a) {
         nodeTrimThreshold: nodeTrimThreshold,
     }), flamegraphLoading = _e.isLoading, flamegraphResponse = _e.response, flamegraphError = _e.error;
     var perf = useParcaContext().perf;
-    useEffect(function () {
-        var _a;
-        if (flamegraphLoading) {
-            return;
-        }
-        if ((flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.report.oneofKind) !== 'flamegraph') {
-            return;
-        }
-        perf === null || perf === void 0 ? void 0 : perf.markInteraction('Flamegraph Render', (_a = flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.report) === null || _a === void 0 ? void 0 : _a.flamegraph.total);
-    }, [flamegraphLoading, flamegraphResponse, perf]);
     var _f = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP, {
         skip: !dashboardItems.includes('table'),
     }), topTableLoading = _f.isLoading, topTableResponse = _f.response, topTableError = _f.error;
     var _g = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
         skip: !dashboardItems.includes('callgraph'),
     }), callgraphLoading = _g.isLoading, callgraphResponse = _g.response, callgraphError = _g.error;
+    useEffect(function () {
+        var _a, _b;
+        if (!flamegraphLoading && (flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.report.oneofKind) === 'flamegraph') {
+            perf === null || perf === void 0 ? void 0 : perf.markInteraction('Flamegraph render', flamegraphResponse.report.flamegraph.total);
+        }
+        if (!topTableLoading && (topTableResponse === null || topTableResponse === void 0 ? void 0 : topTableResponse.report.oneofKind) === 'top') {
+            perf === null || perf === void 0 ? void 0 : perf.markInteraction('Top table render', (_a = topTableResponse === null || topTableResponse === void 0 ? void 0 : topTableResponse.report) === null || _a === void 0 ? void 0 : _a.top.total);
+        }
+        if (!callgraphLoading && (callgraphResponse === null || callgraphResponse === void 0 ? void 0 : callgraphResponse.report.oneofKind) === 'callgraph') {
+            perf === null || perf === void 0 ? void 0 : perf.markInteraction('Callgraph render', (_b = callgraphResponse === null || callgraphResponse === void 0 ? void 0 : callgraphResponse.report) === null || _b === void 0 ? void 0 : _b.callgraph.cumulative);
+        }
+    }, [
+        flamegraphLoading,
+        flamegraphResponse,
+        callgraphResponse,
+        callgraphLoading,
+        topTableLoading,
+        topTableResponse,
+        perf,
+    ]);
     var sampleUnit = profileSource.ProfileType().sampleUnit;
     var downloadPProfClick = function () { return __awaiter(void 0, void 0, void 0, function () {
         var blob, error_1;

package/dist/components/DiffLegend.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const DiffLegend: () => JSX.Element;
 export default DiffLegend;

package/dist/components/ProfileShareButton/ResultBox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     value: string;
     className?: string;

package/dist/components/ProfileShareButton/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { QueryRequest, QueryServiceClient } from '@parca/client';
 interface Props {
     queryRequest: QueryRequest;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.139",
+  "version": "0.16.141",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.66",
-    "@parca/components": "^0.16.114",
+    "@parca/client": "^0.16.67",
+    "@parca/components": "^0.16.115",
     "@parca/dynamicsize": "^0.16.54",
-    "@parca/functions": "^0.16.67",
+    "@parca/functions": "^0.16.68",
     "@parca/parser": "^0.16.55",
-    "@parca/store": "^0.16.65",
+    "@parca/store": "^0.16.66",
     "@types/react-beautiful-dnd": "^13.1.3",
     "d3": "7.8.2",
     "d3-scale": "^4.0.2",
@@ -45,5 +45,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "d05b976c14a943c299f3c2b5b027a72922a1ae4d"
+  "gitHead": "f3a97ac4b80fa76c06890f1c129b6cece3ee3455"
 }

package/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -30,6 +30,7 @@ interface Props {
   onLabelClick: (labelName: string, labelValue: string) => void;
   contextElement: Element | null;
   sampleUnit: string;
+  delta: boolean;
 }
 
 const virtualElement: VirtualElement = {
@@ -67,6 +68,7 @@ const MetricsTooltip = ({
   onLabelClick,
   contextElement,
   sampleUnit,
+  delta,
 }: Props): JSX.Element => {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
@@ -122,12 +124,22 @@ const MetricsTooltip = ({
                           {valueFormatter(highlighted.valuePerSecond, sampleUnit, 5)}
                         </td>
                       </tr>
-                      <tr>
-                        <td className="w-1/4">Total</td>
-                        <td className="w-3/4">
-                          {valueFormatter(highlighted.value, sampleUnit, 2)}
-                        </td>
-                      </tr>
+                      {delta && (
+                        <tr>
+                          <td className="w-1/4">Total</td>
+                          <td className="w-3/4">
+                            {valueFormatter(highlighted.value, sampleUnit, 2)}
+                          </td>
+                        </tr>
+                      )}
+                      {highlighted.duration > 0 && (
+                        <tr>
+                          <td className="w-1/4">Duration</td>
+                          <td className="w-3/4">
+                            {valueFormatter(highlighted.duration, 'nanoseconds', 2)}
+                          </td>
+                        </tr>
+                      )}
                       <tr>
                         <td className="w-1/4">At</td>
                         <td className="w-3/4">{formatDate(highlighted.timestamp, timeFormat)}</td>

package/src/MetricsGraph/index.tsx

@@ -50,6 +50,7 @@ export interface HighlightedSeries {
   timestamp: number;
   value: number;
   valuePerSecond: number;
+  duration: number;
   x: number;
   y: number;
 }
@@ -137,7 +138,7 @@ export const RawMetricsGraph = ({
         values: s.samples.reduce<number[][]>(function (agg: number[][], d: MetricsSample) {
           if (d.timestamp !== undefined && d.valuePerSecond !== undefined) {
             const t = (+d.timestamp.seconds * 1e9 + d.timestamp.nanos) / 1e6; // https://github.com/microsoft/TypeScript/issues/5710#issuecomment-157886246
-            agg.push([t, d.valuePerSecond, parseFloat(d.value)]);
+            agg.push([t, d.valuePerSecond, parseFloat(d.value), parseFloat(d.duration)]);
           }
           return agg;
         }, []),
@@ -205,6 +206,7 @@ export const RawMetricsGraph = ({
       timestamp: point[0],
       valuePerSecond: point[1],
       value: point[2],
+      duration: point[3],
       x: xScale(point[0]),
       y: yScale(point[1]),
     };
@@ -329,6 +331,7 @@ export const RawMetricsGraph = ({
       timestamp: sample[0],
       valuePerSecond: sample[1],
       value: sample[2],
+      duration: sample[3],
       x: xScale(sample[0]),
       y: yScale(sample[1]),
     };
@@ -350,6 +353,7 @@ export const RawMetricsGraph = ({
             onLabelClick={onLabelClick}
             contextElement={graph.current}
             sampleUnit={sampleUnit}
+            delta={profile !== null ? profile?.query.profType.delta : false}
           />
         </div>
       )}

package/src/ProfileMetricsGraph/index.tsx

@@ -95,7 +95,7 @@ const ProfileMetricsGraph = ({
 }: ProfileMetricsGraphProps): JSX.Element => {
   const {isLoading, response, error} = useQueryRange(queryClient, queryExpression, from, to);
   const isLoaderVisible = useDelayedLoader(isLoading);
-  const {loader, onError} = useParcaContext();
+  const {loader, onError, perf} = useParcaContext();
 
   useEffect(() => {
     if (error !== null) {
@@ -103,6 +103,14 @@ const ProfileMetricsGraph = ({
     }
   }, [error, onError]);
 
+  useEffect(() => {
+    if (response === null) {
+      return;
+    }
+
+    perf?.markInteraction('Metrics graph render', response.series[0].samples.length);
+  }, [perf, response]);
+
   if (isLoaderVisible) {
     return <>{loader}</>;
   }

package/src/ProfileViewWithData.tsx

@@ -67,18 +67,6 @@ export const ProfileViewWithData = ({
   });
   const {perf} = useParcaContext();
 
-  useEffect(() => {
-    if (flamegraphLoading) {
-      return;
-    }
-
-    if (flamegraphResponse?.report.oneofKind !== 'flamegraph') {
-      return;
-    }
-
-    perf?.markInteraction('Flamegraph Render', flamegraphResponse?.report?.flamegraph.total);
-  }, [flamegraphLoading, flamegraphResponse, perf]);
-
   const {
     isLoading: topTableLoading,
     response: topTableResponse,
@@ -95,6 +83,28 @@ export const ProfileViewWithData = ({
     skip: !dashboardItems.includes('callgraph'),
   });
 
+  useEffect(() => {
+    if (!flamegraphLoading && flamegraphResponse?.report.oneofKind === 'flamegraph') {
+      perf?.markInteraction('Flamegraph render', flamegraphResponse.report.flamegraph.total);
+    }
+
+    if (!topTableLoading && topTableResponse?.report.oneofKind === 'top') {
+      perf?.markInteraction('Top table render', topTableResponse?.report?.top.total);
+    }
+
+    if (!callgraphLoading && callgraphResponse?.report.oneofKind === 'callgraph') {
+      perf?.markInteraction('Callgraph render', callgraphResponse?.report?.callgraph.cumulative);
+    }
+  }, [
+    flamegraphLoading,
+    flamegraphResponse,
+    callgraphResponse,
+    callgraphLoading,
+    topTableLoading,
+    topTableResponse,
+    perf,
+  ]);
+
   const sampleUnit = profileSource.ProfileType().sampleUnit;
 
   const downloadPProfClick = async (): Promise<void> => {