@parca/profile 0.16.43 → 0.16.50

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.50](https://github.com/parca-dev/parca/compare/ui-v0.16.49...ui-v0.16.50) (2022-10-18)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.49](https://github.com/parca-dev/parca/compare/ui-v0.16.48...ui-v0.16.49) (2022-10-17)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.48](https://github.com/parca-dev/parca/compare/ui-v0.16.47...ui-v0.16.48) (2022-10-17)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.44](https://github.com/parca-dev/parca/compare/ui-v0.16.43...ui-v0.16.44) (2022-10-13)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.43](https://github.com/parca-dev/parca/compare/ui-v0.16.42...ui-v0.16.43) (2022-10-13)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltip/index.js

@@ -38,7 +38,7 @@ import { useState, useEffect } from 'react';
 import { usePopper } from 'react-popper';
 import { getLastItem, valueFormatter } from '@parca/functions';
 import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
-import { hexifyAddress } from '../';
+import { hexifyAddress, truncateString } from '../';
 var virtualElement = {
     getBoundingClientRect: function () {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -87,7 +87,7 @@ var TooltipMetaInfo = function (_a) {
     };
     return (_jsxs(_Fragment, { children: [((_b = hoveringNode.meta.function) === null || _b === void 0 ? void 0 : _b.filename) !== undefined &&
                 ((_c = hoveringNode.meta.function) === null || _c === void 0 ? void 0 : _c.filename) !== '' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "File" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: getTextForFile(hoveringNode) }, { children: _jsx("button", __assign({ className: "cursor-pointer text-left" }, { children: getTextForFile(hoveringNode) })) })) }))] })), ((_d = hoveringNode.meta.location) === null || _d === void 0 ? void 0 : _d.address) !== undefined &&
-                ((_e = hoveringNode.meta.location) === null || _e === void 0 ? void 0 : _e.address) !== '0' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Address" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: ' 0x' + hoveringNode.meta.location.address.toString() }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: ' 0x' + hoveringNode.meta.location.address.toString() })) })) }))] })), hoveringNode.meta.mapping !== undefined && hoveringNode.meta.mapping.file !== '' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Binary" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hoveringNode.meta.mapping.file }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: getLastItem(hoveringNode.meta.mapping.file) })) })) }))] })), hoveringNode.meta.mapping !== undefined && hoveringNode.meta.mapping.buildId !== '' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Build Id" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hoveringNode.meta.mapping.buildId }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: getLastItem(hoveringNode.meta.mapping.buildId) })) })) }))] }))] }));
+                ((_e = hoveringNode.meta.location) === null || _e === void 0 ? void 0 : _e.address) !== '0' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Address" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: ' 0x' + hoveringNode.meta.location.address.toString() }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: ' 0x' + hoveringNode.meta.location.address.toString() })) })) }))] })), hoveringNode.meta.mapping !== undefined && hoveringNode.meta.mapping.file !== '' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Binary" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hoveringNode.meta.mapping.file }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: getLastItem(hoveringNode.meta.mapping.file) })) })) }))] })), hoveringNode.meta.mapping !== undefined && hoveringNode.meta.mapping.buildId !== '' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Build Id" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hoveringNode.meta.mapping.buildId }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: truncateString(getLastItem(hoveringNode.meta.mapping.buildId), 16) })) })) }))] }))] }));
 };
 var timeoutHandle = null;
 var GraphTooltipContent = function (_a) {

package/dist/utils.d.ts

@@ -2,3 +2,4 @@ import { QueryRequest, QueryServiceClient } from '@parca/client';
 import { RpcMetadata } from '@protobuf-ts/runtime-rpc';
 export declare const hexifyAddress: (address?: string) => string;
 export declare const downloadPprof: (request: QueryRequest, queryClient: QueryServiceClient, metadata: RpcMetadata) => Promise<Blob>;
+export declare const truncateString: (str: string, num: number) => string;

package/dist/utils.js

@@ -81,3 +81,9 @@ export var downloadPprof = function (request, queryClient, metadata) { return __
         }
     });
 }); };
+export var truncateString = function (str, num) {
+    if (str.length <= num) {
+        return str;
+    }
+    return str.slice(0, num) + '...';
+};

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.43",
+  "version": "0.16.50",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
-    "@parca/client": "^0.16.22",
-    "@parca/components": "^0.16.43",
-    "@parca/dynamicsize": "^0.16.22",
-    "@parca/functions": "^0.16.22",
-    "@parca/parser": "^0.16.22",
-    "@parca/store": "^0.16.22",
+    "@parca/client": "^0.16.49",
+    "@parca/components": "^0.16.49",
+    "@parca/dynamicsize": "^0.16.49",
+    "@parca/functions": "^0.16.49",
+    "@parca/parser": "^0.16.49",
+    "@parca/store": "^0.16.49",
     "d3-scale": "^4.0.2",
     "d3-selection": "3.0.0",
     "react-copy-to-clipboard": "^5.1.0"
@@ -31,5 +31,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "6abe2900480e4d043611fb7587b898c12f4f1518"
+  "gitHead": "5d06484489b4317175c47ac3a6070d40e0ebae76"
 }

package/src/GraphTooltip/index.tsx

@@ -18,7 +18,7 @@ import {usePopper} from 'react-popper';
 import {CallgraphNode, FlamegraphNode, FlamegraphRootNode} from '@parca/client';
 import {getLastItem, valueFormatter} from '@parca/functions';
 import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
-import {hexifyAddress} from '../';
+import {hexifyAddress, truncateString} from '../';
 
 interface GraphTooltipProps {
   x: number;
@@ -130,7 +130,7 @@ const TooltipMetaInfo = ({
           <td className="w-4/5 break-all">
             <CopyToClipboard onCopy={onCopy} text={hoveringNode.meta.mapping.buildId}>
               <button className="cursor-pointer">
-                {getLastItem(hoveringNode.meta.mapping.buildId)}
+                {truncateString(getLastItem(hoveringNode.meta.mapping.buildId) as string, 16)}
               </button>
             </CopyToClipboard>
           </td>

package/src/utils.ts

@@ -42,3 +42,11 @@ export const downloadPprof = async (
   const blob = new Blob([response.report.pprof], {type: 'application/octet-stream'});
   return blob;
 };
+
+export const truncateString = (str: string, num: number): string => {
+  if (str.length <= num) {
+    return str;
+  }
+
+  return str.slice(0, num) + '...';
+};

package/dist/stories/ProfileTypeSelector.stories.d.ts

@@ -1,5 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ProfileTypeSelector from '../ProfileTypeSelector';
-declare const _default: ComponentMeta<({ profileTypesData, loading, error, selectedKey, onSelection, flexibleKnownProfilesDetection, }: import("../ProfileTypeSelector").Props) => JSX.Element>;
-export default _default;
-export declare const Primary: ComponentStory<typeof ProfileTypeSelector>;

package/dist/stories/ProfileTypeSelector.stories.js

@@ -1,77 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ProfileTypeSelector from '../ProfileTypeSelector';
-export default {
-    /* 👇 The title prop is optional.
-     * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-     * to learn how to generate automatic titles
-     */
-    title: 'Components/ProfileTypeSelector',
-    component: ProfileTypeSelector,
-};
-const profileTypes = {
-    types: [
-        {
-            name: 'memory',
-            sampleType: 'inuse_objects',
-            sampleUnit: 'count',
-            periodType: 'space',
-            periodUnit: 'bytes',
-            delta: false,
-        },
-        {
-            name: 'memory',
-            sampleType: 'inuse_space',
-            sampleUnit: 'bytes',
-            periodType: 'space',
-            periodUnit: 'bytes',
-            delta: false,
-        },
-        {
-            name: 'memory',
-            sampleType: 'alloc_objects',
-            sampleUnit: 'count',
-            periodType: 'space',
-            periodUnit: 'bytes',
-            delta: false,
-        },
-        {
-            name: 'goroutine',
-            sampleType: 'goroutine',
-            sampleUnit: 'count',
-            periodType: 'goroutine',
-            periodUnit: 'count',
-            delta: false,
-        },
-        {
-            name: 'memory',
-            sampleType: 'alloc_space',
-            sampleUnit: 'bytes',
-            periodType: 'space',
-            periodUnit: 'bytes',
-            delta: false,
-        },
-        {
-            name: 'process_cpu',
-            sampleType: 'cpu',
-            sampleUnit: 'nanoseconds',
-            periodType: 'cpu',
-            periodUnit: 'nanoseconds',
-            delta: true,
-        },
-        {
-            name: 'process_cpu',
-            sampleType: 'samples',
-            sampleUnit: 'count',
-            periodType: 'cpu',
-            periodUnit: 'nanoseconds',
-            delta: true,
-        },
-    ],
-};
-const onSelection = () => { };
-//👇 We create a “template” of how args map to rendering
-// const Template: ComponentStory<typeof ProfileView> = args => <ProfileView {...args} />;
-//👇 Each story then reuses that template
-// export const Primary = Template.bind({});
-// Primary.args = {sampleUnit: 'count', label: 'Button'};
-export const Primary = () => (_jsx(ProfileTypeSelector, { profileTypesData: profileTypes, onSelection: onSelection, selectedKey: "process_cpu:samples:count:cpu:nanoseconds:delta", error: undefined }));

package/dist/stories/ProfileView.stories.d.ts

@@ -1,5 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { ProfileView } from '../ProfileView';
-declare const _default: ComponentMeta<({ flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, profileVisState, onDownloadPProf, }: import("../ProfileView").ProfileViewProps) => JSX.Element>;
-export default _default;
-export declare const Primary: ComponentStory<typeof ProfileView>;

package/dist/stories/ProfileView.stories.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ProfileView } from '../ProfileView';
-import flamegraphData from './mockdata/flamegraphData.json';
-export default {
-    /* 👇 The title prop is optional.
-     * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-     * to learn how to generate automatic titles
-     */
-    title: 'Components/ProfileView',
-    component: ProfileView,
-};
-const mockVisState = {
-    currentView: 'icicle',
-    setCurrentView: () => { },
-};
-const downloadPprof = () => { };
-//👇 We create a “template” of how args map to rendering
-// const Template: ComponentStory<typeof ProfileView> = args => <ProfileView {...args} />;
-//👇 Each story then reuses that template
-// export const Primary = Template.bind({});
-// Primary.args = {sampleUnit: 'count', label: 'Button'};
-export const Primary = () => (_jsx(ProfileView, { flamegraphData: flamegraphData, sampleUnit: "count", profileVisState: mockVisState, onDownloadPProf: downloadPprof }));