@parca/profile 0.16.138 → 0.16.140

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.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
+
 ## 0.16.138 (2023-03-16)
 
 **Note:** Version bump only for package @parca/profile

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/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/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.138",
+  "version": "0.16.140",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.66",
-    "@parca/components": "^0.16.113",
+    "@parca/components": "^0.16.114",
     "@parca/dynamicsize": "^0.16.54",
     "@parca/functions": "^0.16.67",
     "@parca/parser": "^0.16.55",
@@ -45,5 +45,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "60d76589ffa445660989e296f0d245a3d6f340d5"
+  "gitHead": "6520407fe5da18f15d5de4e66dfc4241898f2139"
 }

package/src/ProfileIcicleGraph/ProfileIcicleGraph.stories.mdx

@@ -3,9 +3,9 @@ import {Canvas, Meta, Story} from '@storybook/addon-docs';
 
 import {QueryResponse} from '@parca/client';
 
-import ProfileIcicleGraph from './ProfileIcicleGraph';
-import queryResponseDiff from './testdata/fg-diff.json';
-import queryResponseSimple from './testdata/fg-simple.json';
+import ProfileIcicleGraph from './index';
+import queryResponseDiff from '../testdata/fg-diff.json';
+import queryResponseSimple from '../testdata/fg-simple.json';
 
 <Meta title="template/ProfileIcicleGraph" component={ProfileIcicleGraph} />
 

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> => {