@parca/profile 0.16.64 → 0.16.65

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 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

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.64",
+  "version": "0.16.65",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
     "@parca/client": "^0.16.54",
-    "@parca/components": "^0.16.59",
+    "@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": "38667cf5c5702dff21fdfeb5d9f1053be97a1f9d"
+  "gitHead": "0b1285b6be9aee7b2716d230e1d4bdc5a0cea4d2"
 }

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