@parca/profile 0.16.111 → 0.16.113

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.113](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.112...@parca/profile@0.16.113) (2023-02-13)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.112](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.111...@parca/profile@0.16.112) (2023-02-09)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.111](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.109...@parca/profile@0.16.111) (2023-02-09)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileExplorer/index.js

@@ -9,13 +9,26 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { useProfileTypes } from '../ProfileSelector';
 import { ProfileSelectionFromParams, SuffixParams } from '..';
 import ProfileExplorerSingle from './ProfileExplorerSingle';
 import ProfileExplorerCompare from './ProfileExplorerCompare';
 import { store } from '@parca/store';
 import { Provider } from 'react-redux';
-import { DateTimeRange } from '@parca/components';
+import { DateTimeRange, useParcaContext } from '@parca/components';
 var getExpressionAsAString = function (expression) {
     var x = Array.isArray(expression) ? expression.join() : expression;
     return x;
@@ -49,6 +62,8 @@ var swapQueryParameters = function (o) {
 var ProfileExplorerApp = function (_a) {
     var _b, _c;
     var queryClient = _a.queryClient, queryParams = _a.queryParams, navigateTo = _a.navigateTo;
+    var _d = useProfileTypes(queryClient), profileTypesLoading = _d.loading, profileTypesData = _d.data, error = _d.error;
+    var _e = useParcaContext(), loader = _e.loader, noDataPrompt = _e.noDataPrompt;
     /* eslint-disable @typescript-eslint/naming-convention */
     var from_a = queryParams.from_a, to_a = queryParams.to_a, merge_a = queryParams.merge_a, profile_name_a = queryParams.profile_name_a, labels_a = queryParams.labels_a, time_a = queryParams.time_a, time_selection_a = queryParams.time_selection_a, compare_a = queryParams.compare_a, from_b = queryParams.from_b, to_b = queryParams.to_b, merge_b = queryParams.merge_b, profile_name_b = queryParams.profile_name_b, labels_b = queryParams.labels_b, time_b = queryParams.time_b, time_selection_b = queryParams.time_selection_b, compare_b = queryParams.compare_b, filter_by_function = queryParams.filter_by_function, dashboard_items = queryParams.dashboard_items;
     /* eslint-enable @typescript-eslint/naming-convention */
@@ -75,6 +90,12 @@ var ProfileExplorerApp = function (_a) {
     var selectProfileB = function (p) {
         return selectProfile(p, '_b');
     };
+    if (profileTypesLoading) {
+        return _jsx(_Fragment, { children: loader });
+    }
+    if ((profileTypesData === null || profileTypesData === void 0 ? void 0 : profileTypesData.types.length) === 0) {
+        return _jsx(_Fragment, { children: noDataPrompt });
+    }
     // Show the SingleProfileExplorer when not comparing
     if (compare_a !== 'true' && compare_b !== 'true') {
         var query_1 = {

package/dist/ProfileIcicleGraph/IcicleGraph/IcicleGraphNodes.js

@@ -26,15 +26,21 @@ import React, { useMemo } from 'react';
 import cx from 'classnames';
 import { scaleLinear } from 'd3-scale';
 import { isSearchMatch } from '@parca/functions';
+import { useAppSelector, selectBinaries } from '@parca/store';
 import { nodeLabel } from './utils';
 import useNodeColor from './useNodeColor';
 import { useKeyDown } from '@parca/components';
 export var RowHeight = 26;
 export var IcicleGraphNodes = React.memo(function IcicleGraphNodes(_a) {
     var data = _a.data, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, x = _a.x, y = _a.y, xScale = _a.xScale, total = _a.total, totalWidth = _a.totalWidth, level = _a.level, setHoveringNode = _a.setHoveringNode, path = _a.path, setCurPath = _a.setCurPath, curPath = _a.curPath, searchString = _a.searchString, compareMode = _a.compareMode;
+    var binaries = useAppSelector(selectBinaries);
     var nodes = curPath.length === 0
         ? data
-        : data.filter(function (d) { return d != null && curPath[0] === nodeLabel(d, strings, mappings, locations, functions); });
+        : data.filter(function (d) {
+            return d != null &&
+                curPath[0] ===
+                    nodeLabel(d, strings, mappings, locations, functions, binaries.length > 1);
+        });
     return (_jsx("g", __assign({ transform: "translate(".concat(x, ", ").concat(y, ")") }, { children: nodes.map(function (d, i) {
             var start = nodes.slice(0, i).reduce(function (sum, d) { return sum + parseFloat(d.cumulative); }, 0);
             var xStart = xScale(start);
@@ -52,11 +58,14 @@ var fadedIcicleRectStyles = {
 };
 export var IcicleNode = React.memo(function IcicleNode(_a) {
     var x = _a.x, y = _a.y, height = _a.height, setCurPath = _a.setCurPath, setHoveringNode = _a.setHoveringNode, curPath = _a.curPath, level = _a.level, path = _a.path, data = _a.data, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, total = _a.total, totalWidth = _a.totalWidth, xScale = _a.xScale, _b = _a.isRoot, isRoot = _b === void 0 ? false : _b, searchString = _a.searchString, compareMode = _a.compareMode;
+    var binaries = useAppSelector(selectBinaries);
     var isShiftDown = useKeyDown().isShiftDown;
     var colorResult = useNodeColor({ data: data, compareMode: compareMode });
     var name = useMemo(function () {
-        return isRoot ? 'root' : nodeLabel(data, strings, mappings, locations, functions);
-    }, [data, strings, mappings, locations, functions, isRoot]);
+        return isRoot
+            ? 'root'
+            : nodeLabel(data, strings, mappings, locations, functions, binaries.length > 1);
+    }, [data, strings, mappings, locations, functions, isRoot, binaries]);
     var nextPath = path.concat([name]);
     var isFaded = curPath.length > 0 && name !== curPath[curPath.length - 1];
     var styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;

package/dist/ProfileIcicleGraph/IcicleGraph/useColoredGraph.js

@@ -34,8 +34,9 @@ var colorNodes = function (nodes, strings, mappings, locations, functions, featu
         if (node.children != null) {
             coloredNode.children = colorNodes(node.children, strings, mappings, locations, functions, features);
         }
-        coloredNode.feature = extractFeature(node, mappings, locations, strings, functions);
-        features[coloredNode.feature] = true;
+        var feature = extractFeature(node, mappings, locations, strings, functions);
+        coloredNode.feature = feature.name;
+        features[feature.name] = feature.type;
         return coloredNode;
     });
 };
@@ -46,11 +47,11 @@ var useColoredGraph = function (graph) {
     var _a = useMemo(function () {
         var _a;
         if (graph.root == null) {
-            return [graph, []];
+            return [graph, {}];
         }
         var features = {};
         var coloredGraph = __assign(__assign({}, graph), { root: __assign(__assign({}, graph.root), { children: colorNodes((_a = graph.root.children) !== null && _a !== void 0 ? _a : [], graph.stringTable, graph.mapping, graph.locations, graph.function, features) }) });
-        return [coloredGraph, Object.keys(features)];
+        return [coloredGraph, features];
     }, [graph]), coloredGraph = _a[0], features = _a[1];
     useEffect(function () {
         dispatch(setFeatures({ features: features, colorProfileName: colorProfile, isDarkMode: isDarkMode }));

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

@@ -1,5 +1,6 @@
 import { FlamegraphNode } from '@parca/client';
 import { Mapping, Function as ParcaFunction, Location } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
+import type { Feature } from '@parca/store';
 export declare const getBinaryName: (node: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[]) => string | undefined;
-export declare function nodeLabel(node: FlamegraphNode, strings: string[], mappings: Mapping[], locations: Location[], functions: ParcaFunction[]): string;
-export declare const extractFeature: (data: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[], functions: ParcaFunction[]) => string;
+export declare function nodeLabel(node: FlamegraphNode, strings: string[], mappings: Mapping[], locations: Location[], functions: ParcaFunction[], showBinaryName: boolean): string;
+export declare const extractFeature: (data: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[], functions: ParcaFunction[]) => Feature;

package/dist/ProfileIcicleGraph/IcicleGraph/utils.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { getLastItem } from '@parca/functions';
 import { hexifyAddress } from '../../utils';
-import { EVERYTHING_ELSE } from '@parca/store';
+import { EVERYTHING_ELSE, FEATURE_TYPES } from '@parca/store';
 export var getBinaryName = function (node, mappings, locations, strings) {
     var _a, _b;
     if (((_a = node.meta) === null || _a === void 0 ? void 0 : _a.locationIndex) === undefined || ((_b = node.meta) === null || _b === void 0 ? void 0 : _b.locationIndex) === 0) {
@@ -29,31 +29,35 @@ export var getBinaryName = function (node, mappings, locations, strings) {
     var mappingFile = strings[mapping.fileStringIndex];
     return getLastItem(mappingFile);
 };
-export function nodeLabel(node, strings, mappings, locations, functions) {
+export function nodeLabel(node, strings, mappings, locations, functions, showBinaryName) {
     var _a, _b;
     if (((_a = node.meta) === null || _a === void 0 ? void 0 : _a.locationIndex) === undefined)
         return '<unknown>';
     if (((_b = node.meta) === null || _b === void 0 ? void 0 : _b.locationIndex) === 0)
         return '<unknown>';
     var location = locations[node.meta.locationIndex - 1];
-    var binary = getBinaryName(node, mappings, locations, strings);
-    var mappingString = binary != null ? "[".concat(binary, "]") : '';
+    var mappingString = '';
+    if (showBinaryName) {
+        var binary = getBinaryName(node, mappings, locations, strings);
+        if (binary != null)
+            mappingString = "[".concat(binary, "]");
+    }
     if (location.lines.length > 0) {
         var funcName = strings[functions[location.lines[node.meta.lineIndex].functionIndex - 1].nameStringIndex];
-        return "".concat(mappingString, " ").concat(funcName);
+        return "".concat(mappingString.length > 0 ? "".concat(mappingString, " ") : '').concat(funcName);
     }
     var address = hexifyAddress(location.address);
     var fallback = "".concat(mappingString).concat(address);
     return fallback === '' ? '<unknown>' : fallback;
 }
 export var extractFeature = function (data, mappings, locations, strings, functions) {
-    var name = nodeLabel(data, strings, mappings, locations, functions).trim();
+    var name = nodeLabel(data, strings, mappings, locations, functions, false).trim();
     if (name.startsWith('runtime') || name === 'root') {
-        return 'runtime';
+        return { name: 'runtime', type: FEATURE_TYPES.Runtime };
     }
     var binaryName = getBinaryName(data, mappings, locations, strings);
     if (binaryName != null) {
-        return binaryName;
+        return { name: binaryName, type: FEATURE_TYPES.Binary };
     }
-    return EVERYTHING_ELSE;
+    return { name: EVERYTHING_ELSE, type: FEATURE_TYPES.Misc };
 };

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.111",
+  "version": "0.16.113",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.62",
-    "@parca/components": "^0.16.93",
+    "@parca/components": "^0.16.95",
     "@parca/dynamicsize": "^0.16.52",
     "@parca/functions": "^0.16.60",
     "@parca/parser": "^0.16.53",
-    "@parca/store": "^0.16.55",
+    "@parca/store": "^0.16.56",
     "@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": "5a51bfaf98ebb147ff2cfd3a90457ec4f05a9c8c"
+  "gitHead": "425c828b992528c8588ad6992fcda1d9f160f170"
 }

package/src/ProfileExplorer/index.tsx

@@ -11,14 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {QuerySelection} from '../ProfileSelector';
+import {QuerySelection, useProfileTypes} from '../ProfileSelector';
 import {ProfileSelection, ProfileSelectionFromParams, SuffixParams} from '..';
 import ProfileExplorerSingle from './ProfileExplorerSingle';
 import ProfileExplorerCompare from './ProfileExplorerCompare';
 import {QueryServiceClient} from '@parca/client';
 import {store} from '@parca/store';
 import {Provider} from 'react-redux';
-import {DateTimeRange} from '@parca/components';
+import {DateTimeRange, useParcaContext} from '@parca/components';
 import type {NavigateFunction} from '@parca/functions';
 
 interface ProfileExplorerProps {
@@ -71,6 +71,14 @@ const ProfileExplorerApp = ({
   queryParams,
   navigateTo,
 }: ProfileExplorerProps): JSX.Element => {
+  const {
+    loading: profileTypesLoading,
+    data: profileTypesData,
+    error,
+  } = useProfileTypes(queryClient);
+
+  const {loader, noDataPrompt} = useParcaContext();
+
   /* eslint-disable @typescript-eslint/naming-convention */
   let {
     from_a,
@@ -126,6 +134,14 @@ const ProfileExplorerApp = ({
     return selectProfile(p, '_b');
   };
 
+  if (profileTypesLoading) {
+    return <>{loader}</>;
+  }
+
+  if (profileTypesData?.types.length === 0) {
+    return <>{noDataPrompt}</>;
+  }
+
   // Show the SingleProfileExplorer when not comparing
   if (compare_a !== 'true' && compare_b !== 'true') {
     const query = {

package/src/ProfileIcicleGraph/IcicleGraph/IcicleGraphNodes.tsx

@@ -22,7 +22,7 @@ import {
 } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 import {isSearchMatch} from '@parca/functions';
 import {FlamegraphNode, FlamegraphRootNode} from '@parca/client';
-
+import {useAppSelector, selectBinaries} from '@parca/store';
 import {nodeLabel} from './utils';
 import useNodeColor from './useNodeColor';
 import {useKeyDown} from '@parca/components';
@@ -68,11 +68,15 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodes({
   searchString,
   compareMode,
 }: IcicleGraphNodesProps): JSX.Element {
+  const binaries = useAppSelector(selectBinaries);
   const nodes =
     curPath.length === 0
       ? data
       : data.filter(
-          d => d != null && curPath[0] === nodeLabel(d, strings, mappings, locations, functions)
+          d =>
+            d != null &&
+            curPath[0] ===
+              nodeLabel(d, strings, mappings, locations, functions, binaries.length > 1)
         );
 
   return (
@@ -162,11 +166,14 @@ export const IcicleNode = React.memo(function IcicleNode({
   searchString,
   compareMode,
 }: IcicleNodeProps): JSX.Element {
+  const binaries = useAppSelector(selectBinaries);
   const {isShiftDown} = useKeyDown();
   const colorResult = useNodeColor({data, compareMode});
   const name = useMemo(() => {
-    return isRoot ? 'root' : nodeLabel(data, strings, mappings, locations, functions);
-  }, [data, strings, mappings, locations, functions, isRoot]);
+    return isRoot
+      ? 'root'
+      : nodeLabel(data, strings, mappings, locations, functions, binaries.length > 1);
+  }, [data, strings, mappings, locations, functions, isRoot, binaries]);
   const nextPath = path.concat([name]);
   const isFaded = curPath.length > 0 && name !== curPath[curPath.length - 1];
   const styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;

package/src/ProfileIcicleGraph/IcicleGraph/useColoredGraph.ts

@@ -20,6 +20,7 @@ import {
 import type {ColorProfileName} from '@parca/functions';
 import useUserPreference, {USER_PREFERENCES} from '@parca/functions/useUserPreference';
 import {setFeatures, useAppDispatch, useAppSelector, selectDarkMode} from '@parca/store';
+import type {FeatureType, FeaturesMap} from '@parca/store';
 import {useEffect, useMemo} from 'react';
 import {extractFeature} from './utils';
 
@@ -43,7 +44,7 @@ const colorNodes = (
   mappings: Mapping[],
   locations: Location[],
   functions: ParcaFunction[],
-  features: {[key: string]: boolean}
+  features: {[key: string]: FeatureType}
 ): ColoredFlamegraphNode[] => {
   if (nodes === undefined) {
     return [];
@@ -62,8 +63,9 @@ const colorNodes = (
         features
       );
     }
-    coloredNode.feature = extractFeature(node, mappings, locations, strings, functions);
-    features[coloredNode.feature] = true;
+    const feature = extractFeature(node, mappings, locations, strings, functions);
+    coloredNode.feature = feature.name;
+    features[feature.name] = feature.type;
     return coloredNode;
   });
 };
@@ -75,11 +77,11 @@ const useColoredGraph = (graph: Flamegraph): ColoredFlamegraph => {
   );
   const isDarkMode = useAppSelector(selectDarkMode);
 
-  const [coloredGraph, features]: [ColoredFlamegraph, string[]] = useMemo(() => {
+  const [coloredGraph, features]: [ColoredFlamegraph, FeaturesMap] = useMemo(() => {
     if (graph.root == null) {
-      return [graph as ColoredFlamegraph, []];
+      return [graph as ColoredFlamegraph, {}];
     }
-    const features: {[key: string]: boolean} = {};
+    const features: FeaturesMap = {};
     const coloredGraph = {
       ...graph,
       root: {
@@ -94,7 +96,7 @@ const useColoredGraph = (graph: Flamegraph): ColoredFlamegraph => {
         ),
       },
     };
-    return [coloredGraph, Object.keys(features)];
+    return [coloredGraph, features];
   }, [graph]);
 
   useEffect(() => {

package/src/ProfileIcicleGraph/IcicleGraph/utils.ts

@@ -19,7 +19,8 @@ import {
   Location,
 } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 import {hexifyAddress} from '../../utils';
-import {EVERYTHING_ELSE} from '@parca/store';
+import {EVERYTHING_ELSE, FEATURE_TYPES} from '@parca/store';
+import type {Feature} from '@parca/store';
 
 export const getBinaryName = (
   node: FlamegraphNode,
@@ -50,21 +51,25 @@ export function nodeLabel(
   strings: string[],
   mappings: Mapping[],
   locations: Location[],
-  functions: ParcaFunction[]
+  functions: ParcaFunction[],
+  showBinaryName: boolean
 ): string {
   if (node.meta?.locationIndex === undefined) return '<unknown>';
   if (node.meta?.locationIndex === 0) return '<unknown>';
 
   const location = locations[node.meta.locationIndex - 1];
 
-  const binary = getBinaryName(node, mappings, locations, strings);
+  let mappingString = '';
 
-  const mappingString: string = binary != null ? `[${binary}]` : '';
+  if (showBinaryName) {
+    const binary = getBinaryName(node, mappings, locations, strings);
+    if (binary != null) mappingString = `[${binary}]`;
+  }
 
   if (location.lines.length > 0) {
     const funcName =
       strings[functions[location.lines[node.meta.lineIndex].functionIndex - 1].nameStringIndex];
-    return `${mappingString} ${funcName}`;
+    return `${mappingString.length > 0 ? `${mappingString} ` : ''}${funcName}`;
   }
 
   const address = hexifyAddress(location.address);
@@ -79,16 +84,16 @@ export const extractFeature = (
   locations: Location[],
   strings: string[],
   functions: ParcaFunction[]
-): string => {
-  const name = nodeLabel(data, strings, mappings, locations, functions).trim();
+): Feature => {
+  const name = nodeLabel(data, strings, mappings, locations, functions, false).trim();
   if (name.startsWith('runtime') || name === 'root') {
-    return 'runtime';
+    return {name: 'runtime', type: FEATURE_TYPES.Runtime};
   }
 
   const binaryName = getBinaryName(data, mappings, locations, strings);
   if (binaryName != null) {
-    return binaryName;
+    return {name: binaryName, type: FEATURE_TYPES.Binary};
   }
 
-  return EVERYTHING_ELSE;
+  return {name: EVERYTHING_ELSE, type: FEATURE_TYPES.Misc};
 };