@parca/profile 0.16.363 → 0.16.367

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.367](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.366...@parca/profile@0.16.367) (2024-05-09)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.366](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.365...@parca/profile@0.16.366) (2024-05-09)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.365](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.364...@parca/profile@0.16.365) (2024-05-06)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.364](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.363...@parca/profile@0.16.364) (2024-05-01)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.363](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.362...@parca/profile@0.16.363) (2024-05-01)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/utils.d.ts

@@ -2,12 +2,12 @@ import { CallgraphEdge, CallgraphNode } from '@parca/client';
 export declare const pixelsToInches: (pixels: number) => number;
 export declare const getCurvePoints: ({ pos, xScale, yScale, source, target, offset, isSelfLoop, }: {
     pos: string;
-    xScale?: (pos: number) => number;
-    yScale?: (pos: number) => number;
-    source?: number[];
-    target?: number[];
-    isSelfLoop?: boolean;
-    offset?: number;
+    xScale?: ((pos: number) => number) | undefined;
+    yScale?: ((pos: number) => number) | undefined;
+    source?: number[] | undefined;
+    target?: number[] | undefined;
+    isSelfLoop?: boolean | undefined;
+    offset?: number | undefined;
 }) => number[];
 export declare const jsonToDot: ({ graph, colorRange, }: {
     graph: {

package/dist/GraphTooltip/index.d.ts

@@ -31,11 +31,11 @@ export declare const GraphTooltipContent: ({ hoveringNode, unit, total, totalUnf
     total: bigint;
     totalUnfiltered: bigint;
     isFixed: boolean;
-    strings?: string[];
-    mappings?: Mapping[];
-    locations?: Location[];
-    functions?: ParcaFunction[];
-    type?: string;
+    strings?: string[] | undefined;
+    mappings?: Mapping[] | undefined;
+    locations?: Location[] | undefined;
+    functions?: ParcaFunction[] | undefined;
+    type?: string | undefined;
 }) => JSX.Element;
 declare const GraphTooltip: ({ x, y, unit, total, totalUnfiltered, hoveringNode: hoveringNodeProp, contextElement, isFixed, virtualContextElement, strings, mappings, locations, functions, type, }: GraphTooltipProps) => JSX.Element;
 export default GraphTooltip;

package/dist/ProfileIcicleGraph/ActionButtons/GroupByDropdown.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const GroupByDropdown: ({ groupBy, toggleGroupBy, }: {
     groupBy: string[];
     toggleGroupBy: (key: string) => void;

package/dist/ProfileIcicleGraph/ActionButtons/RuntimeFilterDropdown.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const RuntimeFilterDropdown: ({ showRuntimeRuby, toggleShowRuntimeRuby, showRuntimePython, toggleShowRuntimePython, showInterpretedOnly, toggleShowInterpretedOnly, }: {
     showRuntimeRuby: boolean;
     toggleShowRuntimeRuby: () => void;

package/dist/ProfileIcicleGraph/ActionButtons/SortBySelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const SortBySelect: ({ sortBy, setSortBy, compareMode, }: {
     sortBy: string;
     setSortBy: (key: string) => void;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.js

@@ -62,7 +62,7 @@ const ContextMenu = ({ menuId, table, total, totalUnfiltered, row, level, naviga
         {
             id: 'Function system name',
             value: functionSystemName === functionName ? '' : functionSystemName,
-        }, // an empty string will be filtered out below
+        },
         { id: 'Cumulative', value: cumulativeText ?? '' },
         { id: 'Diff', value: diff !== 0n ? diffText : '' },
         {

package/dist/ProfileIcicleGraph/index.js

@@ -89,6 +89,11 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         param: 'sort_by',
         navigateTo,
     });
+    const [invertStack = '', setInvertStack] = useURLState({
+        param: 'invert_call_stack',
+        navigateTo,
+    });
+    const isInvert = invertStack === 'true';
     const [totalFormatted, totalUnfilteredFormatted, isTrimmed, trimmedFormatted, trimmedPercentage, isFiltered, filteredPercentage,] = useMemo(() => {
         if (graph === undefined && arrow === undefined) {
             return ['0', '0', false, '0', '0', false, '0', '0'];
@@ -115,8 +120,18 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         if (setActionButtons === undefined) {
             return;
         }
-        setActionButtons(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end", children: [arrow !== undefined && _jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), _jsx(ShowHideLegendButton, { isHalfScreen: isHalfScreen, navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: "system-uicons:reset", disabled: curPath.length === 0, toolTipText: "Reset View", onClick: () => setNewCurPath([]), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset View", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }))] }) }));
-    }, [navigateTo, arrow, curPath, setNewCurPath, setActionButtons, loading, isHalfScreen]);
+        setActionButtons(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end", children: [arrow !== undefined && _jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', toolTipText: isInvert ? 'Original Call Stack' : 'Invert Call Stack', onClick: () => setInvertStack(isInvert ? '' : 'true'), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setInvertStack(isInvert ? '' : 'true'), children: [isInvert ? 'Original Call Stack' : 'Invert Call Stack', _jsx(Icon, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', width: 20 })] })), _jsx(ShowHideLegendButton, { isHalfScreen: isHalfScreen, navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: "system-uicons:reset", disabled: curPath.length === 0, toolTipText: "Reset View", onClick: () => setNewCurPath([]), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset View", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }))] }) }));
+    }, [
+        navigateTo,
+        isInvert,
+        setInvertStack,
+        arrow,
+        curPath,
+        setNewCurPath,
+        setActionButtons,
+        loading,
+        isHalfScreen,
+    ]);
     if (loading) {
         return (_jsx("div", { className: "h-auto overflow-clip", children: _jsx(IcicleGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
     }

package/dist/ProfileView/ProfileViewContext.d.ts

@@ -8,7 +8,7 @@ export declare const defaultValue: Props;
 declare const ProfileViewContext: import("react").Context<Props>;
 export declare const ProfileViewContextProvider: ({ children, value, }: {
     children: ReactNode;
-    value?: Props;
+    value?: Props | undefined;
 }) => JSX.Element;
 export declare const useProfileViewContext: () => Props;
 export default ProfileViewContext;

package/dist/ProfileView/ViewSelector.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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.
@@ -34,13 +34,10 @@ const ViewSelector = ({ defaultValue, navigateTo, position, placeholderText, pri
         });
     }
     const getOption = ({ key, supportingText, }) => {
-        const capitalizeFirstLetter = (string) => {
-            return `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
-        };
-        const title = capitalizeFirstLetter(key);
+        const title = _jsx("span", { className: "capitalize", children: key.replaceAll('-', ' ') });
         return {
-            active: _jsx(_Fragment, { children: title }),
-            expanded: (_jsxs(_Fragment, { children: [_jsx("span", { children: title }), supportingText !== null && _jsx("span", { className: "text-xs", children: supportingText })] })),
+            active: title,
+            expanded: (_jsxs(_Fragment, { children: [title, supportingText !== null && _jsx("span", { className: "text-xs", children: supportingText })] })),
         };
     };
     const items = allItems.map(item => ({

package/dist/ProfileViewWithData.js

@@ -31,6 +31,8 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
     const showRuntimePython = showRuntimePythonStr === 'true';
     const [showInterpretedOnlyStr] = useURLState({ param: 'show_interpreted_only', navigateTo });
     const showInterpretedOnly = showInterpretedOnlyStr === 'true';
+    const [invertStack] = useURLState({ param: 'invert_call_stack', navigateTo });
+    const invertCallStack = invertStack === 'true';
     const [pprofDownloading, setPprofDownloading] = useState(false);
     const nodeTrimThreshold = useMemo(() => {
         let width = 
@@ -49,6 +51,7 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
         showRuntimeRuby,
         showRuntimePython,
         showInterpretedOnly,
+        invertCallStack,
     });
     const { perf } = useParcaContext();
     const { isLoading: tableLoading, response: tableResponse, error: tableError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TABLE_ARROW, {

package/dist/Table/ColumnsVisibility.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type VisibilityState } from '@tanstack/react-table';
 import { ColumnDef } from '.';
 declare const ColumnsVisibility: ({ columns, visibility, setVisibility, }: {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import type { Props as CallgraphProps } from '@parca/profile/src/Callgraph';
+import type { Props as CallgraphProps } from './Callgraph';
 import ProfileExplorer from './ProfileExplorer';
 import ProfileTypeSelector from './ProfileTypeSelector';
 export * from './ProfileIcicleGraph/IcicleGraph';

package/dist/useGrpcQuery/index.d.ts

@@ -8,5 +8,5 @@ interface Props<IRes> {
         retry?: number | boolean;
     };
 }
-declare const useGrpcQuery: <IRes>({ key, queryFn, options: { enabled, staleTime, retry }, }: Props<IRes>) => UseQueryResult<IRes>;
+declare const useGrpcQuery: <IRes>({ key, queryFn, options: { enabled, staleTime, retry }, }: Props<IRes>) => UseQueryResult<IRes, unknown>;
 export default useGrpcQuery;

package/dist/useQuery.d.ts

@@ -16,6 +16,7 @@ interface UseQueryOptions {
     showRuntimeRuby?: boolean;
     showRuntimePython?: boolean;
     showInterpretedOnly?: boolean;
+    invertCallStack?: boolean;
 }
 export declare const useQuery: (client: QueryServiceClient, profileSource: ProfileSource, reportType: QueryRequest_ReportType, options?: UseQueryOptions) => IQueryResult;
 export {};

package/dist/useQuery.js

@@ -28,6 +28,7 @@ export const useQuery = (client, profileSource, reportType, options) => {
             options?.showRuntimeRuby ?? false,
             options?.showRuntimePython ?? false,
             options?.showInterpretedOnly ?? false,
+            options?.invertCallStack ?? false,
         ],
         queryFn: async () => {
             const req = profileSource.QueryRequest();
@@ -48,6 +49,7 @@ export const useQuery = (client, profileSource, reportType, options) => {
                 showPython: options?.showRuntimePython ?? false,
                 showInterpretedOnly: options?.showInterpretedOnly ?? false,
             };
+            req.invertCallStack = options?.invertCallStack ?? false;
             try {
                 const { response } = await client.query(req, { meta: metadata });
                 return response;

package/package.json

@@ -1,46 +1,67 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.363",
+  "version": "0.16.367",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.107",
-    "@parca/components": "^0.16.268",
-    "@parca/dynamicsize": "^0.16.61",
-    "@parca/hooks": "^0.0.48",
-    "@parca/parser": "^0.16.69",
-    "@parca/store": "^0.16.137",
-    "@parca/utilities": "^0.0.65",
+    "@headlessui/react": "^1.7.19",
+    "@iconify/react": "^4.0.0",
+    "@parca/client": "^0.16.111",
+    "@parca/components": "^0.16.272",
+    "@parca/dynamicsize": "^0.16.63",
+    "@parca/hooks": "^0.0.52",
+    "@parca/icons": "^0.16.67",
+    "@parca/parser": "^0.16.72",
+    "@parca/store": "^0.16.141",
+    "@parca/utilities": "^0.0.69",
+    "@popperjs/core": "^2.11.8",
+    "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@tanstack/react-query": "^4.0.5",
+    "@tanstack/react-table": "^8.16.0",
+    "@tanstack/table-core": "^8.16.0",
+    "@types/d3": "^7.4.3",
+    "@types/d3-scale": "^4.0.8",
+    "@types/d3-selection": "^3.0.10",
     "@types/react-beautiful-dnd": "^13.1.8",
-    "apache-arrow": "^12.0.0",
+    "apache-arrow": "^12.0.1",
+    "classnames": "^2.3.1",
     "d3": "7.9.0",
+    "d3-array": "^3.2.4",
+    "d3-color": "^3.1.0",
     "d3-scale": "^4.0.2",
+    "d3-scale-chromatic": "^3.1.0",
     "d3-selection": "3.0.0",
-    "framer-motion": "^10.18.0",
+    "d3-shape": "^3.2.0",
+    "framer-motion": "6.5.1",
     "graphviz-wasm": "3.0.2",
+    "lodash.throttle": "^4.1.1",
+    "react": "18.3.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-contexify": "^6.0.0",
+    "react-dom": "18.3.1",
     "react-flame-graph": "^1.4.0",
     "react-inlinesvg": "^3.0.2",
     "react-map-interaction": "^2.1.0",
+    "react-popper": "^2.3.0",
+    "react-redux": "^8.0.2",
     "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.4.0",
+    "react-tooltip": "^5.26.3",
+    "react-use": "^17.5.0",
+    "tailwindcss": "3.2.4",
+    "tsc-watch": "6.2.0",
     "with-alpha-hex": "^1.0.6"
   },
   "devDependencies": {
-    "@types/d3": "7.4.3",
+    "@types/lodash.throttle": "4.1.9",
     "@types/react-syntax-highlighter": "15.5.11"
   },
-  "resolutions": {
-    "konva": "8.4.3"
-  },
   "main": "dist/index.js",
   "scripts": {
     "test": "jest --coverage --config ../../../jest.config.js ./src/*",
-    "prepublish": "yarn build",
-    "build": "tsc && yarn compile:styles",
-    "build-swc": "swc ./src -d dist --copy-files && yarn compile:styles",
-    "watch": "tsc-watch --onCompilationComplete 'yarn compile:styles'",
+    "prepublish": "pnpm run build",
+    "build": "tsc && pnpm run compile:styles",
+    "build-swc": "swc ./src -d dist --copy-files && pnpm run compile:styles",
+    "watch": "tsc-watch --onCompilationComplete 'pnpm run compile:styles'",
     "compile:styles": "tailwindcss -o dist/styles.css --minify"
   },
   "keywords": [],
@@ -50,5 +71,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "28b15f3a6d24e2e47913e38a8a76a1d5704887b1"
+  "gitHead": "9e4b06ff8644fc74a98055e77b96f3d8e2d04278"
 }