@parca/profile 0.16.63 → 0.16.65

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.65 (2022-11-09)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.64](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.63...@parca/profile@0.16.64) (2022-11-08)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.63](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.62...@parca/profile@0.16.63) (2022-11-08)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltip/index.js

@@ -74,20 +74,29 @@ var TooltipMetaInfo = function (_a) {
     if (hoveringNode.meta === undefined)
         return _jsx(_Fragment, {});
     // populate meta from the flamegraph metadata tables
-    if (locations !== undefined) {
-        var location_1 = locations[hoveringNode.meta.locationIndex];
+    if (locations !== undefined &&
+        hoveringNode.meta.locationIndex !== undefined &&
+        hoveringNode.meta.locationIndex !== 0) {
+        var location_1 = locations[hoveringNode.meta.locationIndex - 1];
         hoveringNode.meta.location = location_1;
-        if (mappings !== undefined) {
-            var mapping = mappings[location_1.mappingIndex];
-            if (strings !== undefined) {
-                mapping.file = strings[mapping.fileStringIndex];
-                mapping.buildId = strings[mapping.buildIdStringIndex];
+        if (location_1 !== undefined) {
+            if (mappings !== undefined &&
+                location_1.mappingIndex !== undefined &&
+                location_1.mappingIndex !== 0) {
+                var mapping = mappings[location_1.mappingIndex - 1];
+                if (strings !== undefined && mapping !== undefined) {
+                    mapping.file =
+                        (mapping === null || mapping === void 0 ? void 0 : mapping.fileStringIndex) !== undefined ? strings[mapping.fileStringIndex] : '';
+                    mapping.buildId =
+                        (mapping === null || mapping === void 0 ? void 0 : mapping.buildIdStringIndex) !== undefined ? strings[mapping.buildIdStringIndex] : '';
+                }
+                hoveringNode.meta.mapping = mapping;
             }
-            hoveringNode.meta.mapping = mapping;
-        }
-        location_1.lines.forEach(function (line) {
-            if (functions !== undefined && hoveringNode.meta !== undefined) {
-                var func = functions[line.functionIndex];
+            if (functions !== undefined &&
+                location_1.lines !== undefined &&
+                hoveringNode.meta.lineIndex !== undefined &&
+                hoveringNode.meta.lineIndex < location_1.lines.length) {
+                var func = functions[location_1.lines[hoveringNode.meta.lineIndex].functionIndex - 1];
                 if (strings !== undefined) {
                     func.name = strings[func.nameStringIndex];
                     func.systemName = strings[func.systemNameStringIndex];
@@ -95,7 +104,7 @@ var TooltipMetaInfo = function (_a) {
                 }
                 hoveringNode.meta.function = func;
             }
-        });
+        }
     }
     var getTextForFile = function (hoveringNode) {
         var _a, _b, _c, _d;

package/dist/IcicleGraph.js

@@ -56,14 +56,19 @@ function IcicleRect(_a) {
                 } }), width > 5 && (_jsx("svg", __assign({ width: width - 5, height: height }, { children: _jsx("text", __assign({ x: 5, y: 15, style: { fontSize: '12px' } }, { children: name })) })))] })));
 }
 export function nodeLabel(node, strings, mappings, locations, functions) {
-    var _a, _b;
+    var _a, _b, _c;
     if (((_a = node.meta) === null || _a === void 0 ? void 0 : _a.locationIndex) === undefined)
         return '<unknown>';
-    var location = locations[node.meta.locationIndex];
-    var mappingFile = strings[mappings[location.mappingIndex].fileStringIndex];
-    var mappingString = "".concat(mappingFile !== '' ? '[' + ((_b = getLastItem(mappingFile)) !== null && _b !== void 0 ? _b : '') + '] ' : '');
+    if (((_b = node.meta) === null || _b === void 0 ? void 0 : _b.locationIndex) === 0)
+        return '<unknown>';
+    var location = locations[node.meta.locationIndex - 1];
+    var mapping = location.mappingIndex !== undefined || location.mappingIndex !== 0
+        ? mappings[location.mappingIndex - 1]
+        : undefined;
+    var mappingFile = (mapping === null || mapping === void 0 ? void 0 : mapping.fileStringIndex) !== undefined ? strings[mapping.fileStringIndex] : '';
+    var mappingString = "".concat(mappingFile !== '' ? '[' + ((_c = getLastItem(mappingFile)) !== null && _c !== void 0 ? _c : '') + '] ' : '');
     if (location.lines.length > 0) {
-        var funcName = strings[functions[location.lines[0].functionIndex].nameStringIndex];
+        var funcName = strings[functions[location.lines[node.meta.lineIndex].functionIndex - 1].nameStringIndex];
         return "".concat(mappingString, " ").concat(funcName);
     }
     var address = hexifyAddress(location.address);

package/dist/MatchersInput/index.js

@@ -27,7 +27,7 @@ import { Transition } from '@headlessui/react';
 import { Query } from '@parca/parser';
 import { usePopper } from 'react-popper';
 import cx from 'classnames';
-import { useParcaTheme, useGrpcMetadata } from '@parca/components';
+import { useParcaContext, useGrpcMetadata } from '@parca/components';
 export var useLabelNames = function (client) {
     var _a = useState(true), loading = _a[0], setLoading = _a[1];
     var _b = useState({}), result = _b[0], setResult = _b[1];
@@ -73,7 +73,7 @@ var MatchersInput = function (_a) {
         placement: 'bottom-start',
     }), styles = _l.styles, attributes = _l.attributes;
     var metadata = useGrpcMetadata();
-    var Spinner = useParcaTheme().loader;
+    var Spinner = useParcaContext().loader;
     var _m = useLabelNames(queryClient), labelNamesLoading = _m.loading, result = _m.result;
     var labelNamesResponse = result.response, labelNamesError = result.error;
     var LoadingSpinner = function () {

package/dist/ProfileMetricsGraph/index.js

@@ -62,7 +62,7 @@ import { useState, useEffect } from 'react';
 import MetricsGraph from '../MetricsGraph';
 import { SingleProfileSelection } from '..';
 import { Timestamp } from '@parca/client';
-import { useGrpcMetadata, useParcaTheme } from '@parca/components';
+import { useGrpcMetadata, useParcaContext } from '@parca/components';
 import { Query } from '@parca/parser';
 import useDelayedLoader from '../useDelayedLoader';
 export var useQueryRange = function (client, queryExpression, start, end) {
@@ -100,7 +100,7 @@ var ProfileMetricsGraph = function (_a) {
     var queryClient = _a.queryClient, queryExpression = _a.queryExpression, profile = _a.profile, from = _a.from, to = _a.to, select = _a.select, setTimeRange = _a.setTimeRange, addLabelMatcher = _a.addLabelMatcher;
     var _b = useQueryRange(queryClient, queryExpression, from, to), isLoading = _b.isLoading, response = _b.response, error = _b.error;
     var isLoaderVisible = useDelayedLoader(isLoading);
-    var loader = useParcaTheme().loader;
+    var loader = useParcaContext().loader;
     if (isLoaderVisible) {
         return _jsx(_Fragment, { children: loader });
     }

package/dist/ProfileView.js

@@ -22,18 +22,18 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // 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 { useEffect, useMemo, useState } from 'react';
+import { Profiler, useEffect, useMemo, useState } from 'react';
+import { scaleLinear } from 'd3';
 import { getNewSpanColor, parseParams } from '@parca/functions';
 import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
-import { Button, Card, SearchNodes, useParcaTheme } from '@parca/components';
-import { Callgraph } from './';
+import { Button, Card, SearchNodes, useParcaContext } from '@parca/components';
 import { useContainerDimensions } from '@parca/dynamicsize';
 import { useAppSelector, selectDarkMode, selectSearchNodeString } from '@parca/store';
+import { Callgraph } from './';
 import ProfileShareButton from './components/ProfileShareButton';
 import ProfileIcicleGraph from './ProfileIcicleGraph';
 import TopTable from './TopTable';
 import useDelayedLoader from './useDelayedLoader';
-import { scaleLinear } from 'd3';
 import './ProfileView.styles.css';
 function arrayEquals(a, b) {
     return (Array.isArray(a) &&
@@ -63,7 +63,7 @@ export var ProfileView = function (_a) {
     var isDarkMode = useAppSelector(selectDarkMode);
     var currentSearchString = useAppSelector(selectSearchNodeString);
     var callgraphEnabled = useUIFeatureFlag('callgraph')[0];
-    var loader = useParcaTheme().loader;
+    var _d = useParcaContext(), loader = _d.loader, perf = _d.perf;
     useEffect(function () {
         // Reset the current path when the profile source changes
         setCurPath([]);
@@ -115,5 +115,5 @@ export var ProfileView = function (_a) {
     return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "py-3" }, { children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", __assign({ className: "flex py-3 w-full" }, { children: [_jsxs("div", __assign({ className: "w-2/5 flex space-x-4" }, { children: [_jsxs("div", __assign({ className: "flex space-x-1" }, { children: [profileSource != null && queryClient != null ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsx(Button, __assign({ color: "neutral", onClick: function (e) {
                                                         e.preventDefault();
                                                         onDownloadPProf();
-                                                    } }, { children: "Download pprof" }))] })), _jsx(SearchNodes, {})] })), _jsxs("div", __assign({ className: "flex ml-auto" }, { children: [_jsx("div", __assign({ className: "mr-3" }, { children: _jsx(Button, __assign({ color: "neutral", onClick: resetIcicleGraph, disabled: curPath.length === 0, className: "whitespace-nowrap text-ellipsis" }, { children: "Reset View" })) })), callgraphEnabled ? (_jsx("div", __assign({ className: "mr-3" }, { children: _jsx(Button, __assign({ variant: "".concat(currentView === 'callgraph' ? 'primary' : 'neutral'), onClick: function () { return switchProfileView('callgraph'); }, className: "whitespace-nowrap text-ellipsis" }, { children: "Callgraph" })) }))) : null, _jsx(Button, __assign({ variant: "".concat(currentView === 'table' ? 'primary' : 'neutral'), className: "items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('table'); } }, { children: "Table" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'both' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons text-ellipsis", onClick: function () { return switchProfileView('both'); } }, { children: "Both" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'icicle' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('icicle'); } }, { children: "Icicle Graph" }))] }))] })), _jsxs("div", __assign({ ref: ref, className: "flex space-x-4 justify-between w-full" }, { children: [currentView === 'icicle' && (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit }) }))), currentView === 'callgraph' && (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined && (_jsx(Callgraph, { graph: callgraphData.data, sampleUnit: sampleUnit, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, colorRange: colorRange })) }))), currentView === 'table' && topTableData != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(TopTable, { data: topTableData.data, sampleUnit: sampleUnit }) }))), currentView === 'both' && (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "w-1/2" }, { children: _jsx(TopTable, { data: topTableData === null || topTableData === void 0 ? void 0 : topTableData.data, sampleUnit: sampleUnit }) })), _jsx("div", __assign({ className: "w-1/2" }, { children: flamegraphData != null && (_jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit })) }))] }))] }))] }) }) })) }));
+                                                    } }, { children: "Download pprof" }))] })), _jsx(SearchNodes, {})] })), _jsxs("div", __assign({ className: "flex ml-auto" }, { children: [_jsx("div", __assign({ className: "mr-3" }, { children: _jsx(Button, __assign({ color: "neutral", onClick: resetIcicleGraph, disabled: curPath.length === 0, className: "whitespace-nowrap text-ellipsis" }, { children: "Reset View" })) })), callgraphEnabled ? (_jsx("div", __assign({ className: "mr-3" }, { children: _jsx(Button, __assign({ variant: "".concat(currentView === 'callgraph' ? 'primary' : 'neutral'), onClick: function () { return switchProfileView('callgraph'); }, className: "whitespace-nowrap text-ellipsis" }, { children: "Callgraph" })) }))) : null, _jsx(Button, __assign({ variant: "".concat(currentView === 'table' ? 'primary' : 'neutral'), className: "items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('table'); } }, { children: "Table" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'both' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons text-ellipsis", onClick: function () { return switchProfileView('both'); } }, { children: "Both" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'icicle' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('icicle'); } }, { children: "Icicle Graph" }))] }))] })), _jsxs("div", __assign({ ref: ref, className: "flex space-x-4 justify-between w-full" }, { children: [currentView === 'icicle' && (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(Profiler, __assign({ id: "icicleGraph", onRender: perf.onRender }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit }) })) }))), currentView === 'callgraph' && (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined && (_jsx(Callgraph, { graph: callgraphData.data, sampleUnit: sampleUnit, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, colorRange: colorRange })) }))), currentView === 'table' && topTableData != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(TopTable, { data: topTableData.data, sampleUnit: sampleUnit }) }))), currentView === 'both' && (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "w-1/2" }, { children: _jsx(TopTable, { data: topTableData === null || topTableData === void 0 ? void 0 : topTableData.data, sampleUnit: sampleUnit }) })), _jsx("div", __assign({ className: "w-1/2" }, { children: flamegraphData != null && (_jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit })) }))] }))] }))] }) }) })) }));
 };

package/dist/ProfileViewWithData.js

@@ -51,8 +51,9 @@ import { QueryRequest_ReportType } from '@parca/client';
 import { useQuery } from './useQuery';
 import { ProfileView, useProfileVisState } from './ProfileView';
 import { downloadPprof } from './utils';
-import { useGrpcMetadata } from '@parca/components';
+import { useGrpcMetadata, useParcaContext } from '@parca/components';
 import { saveAsBlob } from '@parca/functions';
+import { useEffect } from 'react';
 export var ProfileViewWithData = function (_a) {
     var _b, _c;
     var queryClient = _a.queryClient, profileSource = _a.profileSource, navigateTo = _a.navigateTo;
@@ -62,6 +63,13 @@ export var ProfileViewWithData = function (_a) {
     var _d = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_TABLE, {
         skip: currentView !== 'icicle' && currentView !== 'both',
     }), flamegraphLoading = _d.isLoading, flamegraphResponse = _d.response, flamegraphError = _d.error;
+    var perf = useParcaContext().perf;
+    useEffect(function () {
+        if (flamegraphLoading) {
+            return;
+        }
+        perf.markInteraction('Flamegraph Render');
+    }, [flamegraphLoading, flamegraphResponse, perf]);
     var _e = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP, {
         skip: currentView !== 'table' && currentView !== 'both',
     }), topTableLoading = _e.isLoading, topTableResponse = _e.response, topTableError = _e.error;

package/dist/useQuery.js

@@ -30,7 +30,6 @@ export var useQuery = function (client, profileSource, reportType, options) {
             isLoading: true,
         });
         var req = profileSource.QueryRequest();
-        console.log('req', req);
         req.reportType = reportType;
         var call = client.query(req, { meta: metadata });
         call.response

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.63",
+  "version": "0.16.65",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
-    "@parca/client": "^0.16.53",
-    "@parca/components": "^0.16.58",
+    "@parca/client": "^0.16.54",
+    "@parca/components": "^0.16.60",
     "@parca/dynamicsize": "^0.16.51",
     "@parca/functions": "^0.16.51",
     "@parca/parser": "^0.16.50",
@@ -40,5 +40,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "a244d1d0c99589df268a4d93a56c9c67cce6236f"
+  "gitHead": "0b1285b6be9aee7b2716d230e1d4bdc5a0cea4d2"
 }

package/src/GraphTooltip/index.tsx

@@ -19,12 +19,7 @@ import {CallgraphNode, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode} f
 import {getLastItem, valueFormatter} from '@parca/functions';
 import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
 import {hexifyAddress, truncateString} from '../';
-import {
-  Function,
-  Location,
-  Mapping,
-  Line,
-} from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
+import {Function, Location, Mapping} from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 
 interface GraphTooltipProps {
   x: number;
@@ -86,22 +81,37 @@ const TooltipMetaInfo = ({
   if (hoveringNode.meta === undefined) return <></>;
 
   // populate meta from the flamegraph metadata tables
-  if (locations !== undefined) {
-    const location = locations[hoveringNode.meta.locationIndex];
+  if (
+    locations !== undefined &&
+    hoveringNode.meta.locationIndex !== undefined &&
+    hoveringNode.meta.locationIndex !== 0
+  ) {
+    const location = locations[hoveringNode.meta.locationIndex - 1];
     hoveringNode.meta.location = location;
 
-    if (mappings !== undefined) {
-      const mapping = mappings[location.mappingIndex];
-      if (strings !== undefined) {
-        mapping.file = strings[mapping.fileStringIndex];
-        mapping.buildId = strings[mapping.buildIdStringIndex];
+    if (location !== undefined) {
+      if (
+        mappings !== undefined &&
+        location.mappingIndex !== undefined &&
+        location.mappingIndex !== 0
+      ) {
+        const mapping = mappings[location.mappingIndex - 1];
+        if (strings !== undefined && mapping !== undefined) {
+          mapping.file =
+            mapping?.fileStringIndex !== undefined ? strings[mapping.fileStringIndex] : '';
+          mapping.buildId =
+            mapping?.buildIdStringIndex !== undefined ? strings[mapping.buildIdStringIndex] : '';
+        }
+        hoveringNode.meta.mapping = mapping;
       }
-      hoveringNode.meta.mapping = mapping;
-    }
 
-    location.lines.forEach((line: Line) => {
-      if (functions !== undefined && hoveringNode.meta !== undefined) {
-        const func = functions[line.functionIndex];
+      if (
+        functions !== undefined &&
+        location.lines !== undefined &&
+        hoveringNode.meta.lineIndex !== undefined &&
+        hoveringNode.meta.lineIndex < location.lines.length
+      ) {
+        const func = functions[location.lines[hoveringNode.meta.lineIndex].functionIndex - 1];
         if (strings !== undefined) {
           func.name = strings[func.nameStringIndex];
           func.systemName = strings[func.systemNameStringIndex];
@@ -109,7 +119,7 @@ const TooltipMetaInfo = ({
         }
         hoveringNode.meta.function = func;
       }
-    });
+    }
   }
 
   const getTextForFile = (hoveringNode: FlamegraphNode): string => {

package/src/IcicleGraph.tsx

@@ -149,16 +149,24 @@ export function nodeLabel(
   functions: Function[]
 ): string {
   if (node.meta?.locationIndex === undefined) return '<unknown>';
+  if (node.meta?.locationIndex === 0) return '<unknown>';
 
-  const location = locations[node.meta.locationIndex];
-  const mappingFile = strings[mappings[location.mappingIndex].fileStringIndex];
+  const location = locations[node.meta.locationIndex - 1];
+  const mapping =
+    location.mappingIndex !== undefined || location.mappingIndex !== 0
+      ? mappings[location.mappingIndex - 1]
+      : undefined;
+
+  const mappingFile =
+    mapping?.fileStringIndex !== undefined ? strings[mapping.fileStringIndex] : '';
 
   const mappingString: string = `${
     mappingFile !== '' ? '[' + (getLastItem(mappingFile) ?? '') + '] ' : ''
   }`;
 
   if (location.lines.length > 0) {
-    const funcName = strings[functions[location.lines[0].functionIndex].nameStringIndex];
+    const funcName =
+      strings[functions[location.lines[node.meta.lineIndex].functionIndex - 1].nameStringIndex];
     return `${mappingString} ${funcName}`;
   }
 

package/src/MatchersInput/index.tsx

@@ -17,7 +17,8 @@ import {Query} from '@parca/parser';
 import {LabelsResponse, QueryServiceClient} from '@parca/client';
 import {usePopper} from 'react-popper';
 import cx from 'classnames';
-import {useParcaTheme, useGrpcMetadata} from '@parca/components';
+
+import {useParcaContext, useGrpcMetadata} from '@parca/components';
 
 interface MatchersInputProps {
   queryClient: QueryServiceClient;
@@ -97,7 +98,7 @@ const MatchersInput = ({
     placement: 'bottom-start',
   });
   const metadata = useGrpcMetadata();
-  const {loader: Spinner} = useParcaTheme();
+  const {loader: Spinner} = useParcaContext();
 
   const {loading: labelNamesLoading, result} = useLabelNames(queryClient);
   const {response: labelNamesResponse, error: labelNamesError} = result;

package/src/ProfileMetricsGraph/index.tsx

@@ -16,7 +16,7 @@ import MetricsGraph from '../MetricsGraph';
 import {ProfileSelection, SingleProfileSelection} from '..';
 import {QueryServiceClient, QueryRangeResponse, Label, Timestamp} from '@parca/client';
 import {RpcError} from '@protobuf-ts/runtime-rpc';
-import {DateTimeRange, useGrpcMetadata, useParcaTheme} from '@parca/components';
+import {DateTimeRange, useGrpcMetadata, useParcaContext} from '@parca/components';
 import {Query} from '@parca/parser';
 import useDelayedLoader from '../useDelayedLoader';
 
@@ -89,7 +89,7 @@ const ProfileMetricsGraph = ({
 }: ProfileMetricsGraphProps): JSX.Element => {
   const {isLoading, response, error} = useQueryRange(queryClient, queryExpression, from, to);
   const isLoaderVisible = useDelayedLoader(isLoading);
-  const {loader} = useParcaTheme();
+  const {loader} = useParcaContext();
 
   if (isLoaderVisible) {
     return <>{loader}</>;

package/src/ProfileView.tsx

@@ -11,22 +11,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useEffect, useMemo, useState} from 'react';
+import {Profiler, useEffect, useMemo, useState} from 'react';
+import {scaleLinear} from 'd3';
 
 import {getNewSpanColor, parseParams} from '@parca/functions';
 import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
 import {QueryServiceClient, Flamegraph, Top, Callgraph as CallgraphType} from '@parca/client';
-import {Button, Card, SearchNodes, useParcaTheme} from '@parca/components';
-import {Callgraph} from './';
+import {Button, Card, SearchNodes, useParcaContext} from '@parca/components';
 import {useContainerDimensions} from '@parca/dynamicsize';
 import {useAppSelector, selectDarkMode, selectSearchNodeString} from '@parca/store';
 
+import {Callgraph} from './';
 import ProfileShareButton from './components/ProfileShareButton';
 import ProfileIcicleGraph from './ProfileIcicleGraph';
 import {ProfileSource} from './ProfileSource';
 import TopTable from './TopTable';
 import useDelayedLoader from './useDelayedLoader';
-import {scaleLinear} from 'd3';
 
 import './ProfileView.styles.css';
 
@@ -114,7 +114,7 @@ export const ProfileView = ({
 
   const [callgraphEnabled] = useUIFeatureFlag('callgraph');
 
-  const {loader} = useParcaTheme();
+  const {loader, perf} = useParcaContext();
 
   useEffect(() => {
     // Reset the current path when the profile source changes
@@ -265,12 +265,14 @@ export const ProfileView = ({
             <div ref={ref} className="flex space-x-4 justify-between w-full">
               {currentView === 'icicle' && flamegraphData?.data != null && (
                 <div className="w-full">
-                  <ProfileIcicleGraph
-                    curPath={curPath}
-                    setNewCurPath={setNewCurPath}
-                    graph={flamegraphData.data}
-                    sampleUnit={sampleUnit}
-                  />
+                  <Profiler id="icicleGraph" onRender={perf.onRender}>
+                    <ProfileIcicleGraph
+                      curPath={curPath}
+                      setNewCurPath={setNewCurPath}
+                      graph={flamegraphData.data}
+                      sampleUnit={sampleUnit}
+                    />
+                  </Profiler>
                 </div>
               )}
               {currentView === 'callgraph' && callgraphData?.data != null && (

package/src/ProfileViewWithData.tsx

@@ -17,8 +17,9 @@ import {useQuery} from './useQuery';
 import {ProfileView, useProfileVisState} from './ProfileView';
 import {ProfileSource} from './ProfileSource';
 import {downloadPprof} from './utils';
-import {useGrpcMetadata} from '@parca/components';
+import {useGrpcMetadata, useParcaContext} from '@parca/components';
 import {saveAsBlob} from '@parca/functions';
+import {useEffect} from 'react';
 
 type NavigateFunction = (path: string, queryParams: any) => void;
 
@@ -44,6 +45,14 @@ export const ProfileViewWithData = ({
   } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_TABLE, {
     skip: currentView !== 'icicle' && currentView !== 'both',
   });
+  const {perf} = useParcaContext();
+
+  useEffect(() => {
+    if (flamegraphLoading) {
+      return;
+    }
+    perf.markInteraction('Flamegraph Render');
+  }, [flamegraphLoading, flamegraphResponse, perf]);
 
   const {
     isLoading: topTableLoading,

package/src/useQuery.tsx

@@ -53,7 +53,6 @@ export const useQuery = (
       isLoading: true,
     });
     const req = profileSource.QueryRequest();
-    console.log('req', req);
     req.reportType = reportType;
 
     const call = client.query(req, {meta: metadata});