@parca/profile 0.16.242 → 0.16.244

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.244](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.243...@parca/profile@0.16.244) (2023-09-01)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.243](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.242...@parca/profile@0.16.243) (2023-09-01)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.242](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.241...@parca/profile@0.16.242) (2023-08-31)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/Content.js

@@ -95,7 +95,7 @@ onCopy, row, navigateTo, }) => {
     const labelPairs = labelColumnNames
         .map((field, i) => [
         labelColumnNames[i].name.slice(pprofLabelPrefix.length),
-        table.getChild(field.name)?.get(row) ?? '',
+        arrowToString(table.getChild(field.name)?.get(row)) ?? '',
     ])
         .filter(value => value[1] !== '');
     const labels = labelPairs.map((l) => (_jsx("span", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: `${l[0]}="${l[1]}"` }, l[0])));

package/dist/ProfileExplorer/ProfileExplorerCompare.js

@@ -10,6 +10,6 @@ const ProfileExplorerCompare = ({ queryClient, queryA, queryB, profileA, profile
     const closeProfileB = () => {
         closeProfile('B');
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryA, profileSelection: profileA, selectProfile: selectProfileA, selectQuery: selectQueryA, closeProfile: closeProfileA, enforcedProfileName: '', comparing: true, onCompareProfile: () => { } }) }), _jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryB, profileSelection: profileB, selectProfile: selectProfileB, selectQuery: selectQueryB, closeProfile: closeProfileB, enforcedProfileName: Query.parse(queryA.expression).profileName(), comparing: true, onCompareProfile: () => { } }) })] }), _jsx("div", { className: "grid grid-cols-1", children: profileA != null && profileB != null ? (_jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileViewWithData, { navigateTo: navigateTo, queryClient: queryClient, profileSource: new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource()) }) })) : (_jsx("div", { children: _jsx("div", { className: "my-20 text-center", children: _jsx("p", { children: "Select a profile on both sides." }) }) })) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryA, profileSelection: profileA, selectProfile: selectProfileA, selectQuery: selectQueryA, closeProfile: closeProfileA, enforcedProfileName: '', comparing: true, onCompareProfile: () => { } }) }), _jsx(Card, { className: "mt-2 p-2", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryB, profileSelection: profileB, selectProfile: selectProfileB, selectQuery: selectQueryB, closeProfile: closeProfileB, enforcedProfileName: Query.parse(queryA.expression).profileName(), comparing: true, onCompareProfile: () => { } }) })] }), _jsx("div", { className: "grid grid-cols-1", children: profileA != null && profileB != null ? (_jsx("div", { children: _jsx(Card, { className: "mt-2 px-6 py-4", children: _jsx(ProfileViewWithData, { navigateTo: navigateTo, queryClient: queryClient, profileSource: new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource()) }) }) })) : (_jsx("div", { children: _jsx("div", { className: "my-20 text-center", children: _jsx("p", { children: "Select a profile on both sides." }) }) })) })] }));
 };
 export default ProfileExplorerCompare;

package/dist/ProfileIcicleGraph/index.d.ts

@@ -4,7 +4,7 @@ import { Flamegraph } from '@parca/client';
 import { type NavigateFunction } from '@parca/utilities';
 export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
-    width?: number;
+    width: number;
     graph?: Flamegraph;
     table?: Table<any>;
     total: bigint;
@@ -17,5 +17,5 @@ interface ProfileIcicleGraphProps {
     setActionButtons?: (buttons: React.JSX.Element) => void;
     error?: any;
 }
-declare const ProfileIcicleGraph: ({ graph, table, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, table, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, width, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;

package/dist/ProfileIcicleGraph/index.js

@@ -15,7 +15,6 @@ import { Fragment, useCallback, useEffect, useMemo } from 'react';
 import { Menu, Transition } from '@headlessui/react';
 import { Icon } from '@iconify/react';
 import { Button, Select, useParcaContext, useURLState } from '@parca/components';
-import { useContainerDimensions } from '@parca/hooks';
 import { divide, selectQueryParam } from '@parca/utilities';
 import DiffLegend from '../components/DiffLegend';
 import IcicleGraph from './IcicleGraph';
@@ -50,10 +49,9 @@ const GroupAndSortActionButtons = ({ navigateTo }) => {
     }, [groupBy, setGroupBy]);
     return (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy }), _jsx(SortBySelect, { compareMode: compareMode, sortBy: storeSortBy, setSortBy: setStoreSortBy })] }));
 };
-const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, table, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, }) {
+const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, table, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, error, width, }) {
     const { loader } = useParcaContext();
     const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
-    const { ref, dimensions } = useContainerDimensions();
     const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
         param: 'sort_by',
         navigateTo,
@@ -97,7 +95,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, table, to
     if (isTrimmed) {
         console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
     }
-    return (_jsxs("div", { className: "relative", children: [compareMode && _jsx(DiffLegend, {}), _jsxs("div", { ref: ref, className: "min-h-48", children: [graph !== undefined && (_jsx(IcicleGraph, { width: dimensions?.width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo })), table !== undefined && (_jsx(IcicleGraphArrow, { width: dimensions?.width, table: table, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }));
+    return (_jsxs("div", { className: "relative", children: [compareMode && _jsx(DiffLegend, {}), _jsxs("div", { className: "min-h-48", children: [graph !== undefined && (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo })), table !== undefined && (_jsx(IcicleGraphArrow, { width: width, table: table, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit, navigateTo: navigateTo, sortBy: storeSortBy }))] }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }));
 };
 const groupByOptions = [
     {

package/dist/ProfileSelector/index.js

@@ -119,7 +119,7 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
         queryExpressionString === '' ||
         queryExpressionString === '{}';
     const compareDisabled = selectedProfileName === '' || querySelection.expression === undefined;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex", children: [_jsxs("div", { className: "flex w-full flex-wrap content-start items-end justify-between gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "text-xs", children: "Profile type" }), _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: error })] }), _jsxs("div", { className: "w-full flex-1", children: [_jsx("label", { className: "text-xs", children: "Query" }), _jsx(MatchersInput, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query })] }), _jsxs("div", { children: [_jsx("label", { className: "text-xs", children: "Period" }), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection })] }), _jsxs(ButtonGroup, { children: [!searchDisabled && (_jsx(_Fragment, { children: !comparing && (_jsx(CompareButton, { disabled: compareDisabled, onClick: handleCompareClick })) })), _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex gap-2", children: [_jsxs("div", { className: "flex w-full flex-wrap content-start items-end justify-between gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "text-xs", children: "Profile type" }), _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: error })] }), _jsxs("div", { className: "w-full flex-1", children: [_jsx("label", { className: "text-xs", children: "Query" }), _jsx(MatchersInput, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query })] }), _jsxs("div", { children: [_jsx("label", { className: "text-xs", children: "Period" }), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection })] }), _jsxs(ButtonGroup, { children: [!searchDisabled && (_jsx(_Fragment, { children: !comparing && (_jsx(CompareButton, { disabled: compareDisabled, onClick: handleCompareClick })) })), _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
                                             e.preventDefault();
                                             setQueryExpression();
                                         }, children: "Search" })] })] }), _jsx("div", { children: comparing && _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) })] }), _jsx("div", { className: "rounded bg-white shadow dark:border-gray-500 dark:bg-gray-700", children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== undefined &&

package/dist/ProfileView/index.js

@@ -130,7 +130,11 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                 return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
                         id: 'icicleGraph',
                         onRender: perf?.onRender,
-                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, table: flamegraphData?.table, graph: flamegraphData?.data, total: total, filtered: filtered, sampleUnit: sampleUnit, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons, error: flamegraphData.error }) }));
+                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, table: flamegraphData?.table, graph: flamegraphData?.data, total: total, filtered: filtered, sampleUnit: sampleUnit, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons, error: flamegraphData.error, width: dimensions?.width !== undefined
+                            ? isHalfScreen
+                                ? (dimensions.width - 40) / 2
+                                : dimensions.width - 16
+                            : 0 }) }));
             }
             case 'callgraph': {
                 return callgraphData?.data !== undefined &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.242",
+  "version": "0.16.244",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.86",
@@ -49,5 +49,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "38f61e5bc68000801734fc679bda583a75296643"
+  "gitHead": "cad92c30fc37a648d8989db61aaa8165b1db4028"
 }

package/src/GraphTooltipArrow/Content.tsx

@@ -238,7 +238,7 @@ const TooltipMetaInfo = ({
   const labelPairs = labelColumnNames
     .map((field, i) => [
       labelColumnNames[i].name.slice(pprofLabelPrefix.length),
-      table.getChild(field.name)?.get(row) ?? '',
+      arrowToString(table.getChild(field.name)?.get(row)) ?? '',
     ])
     .filter(value => value[1] !== '');
   const labels = labelPairs.map(
@@ -247,7 +247,7 @@ const TooltipMetaInfo = ({
         key={l[0]}
         className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
       >
-        {`${l[0] as string}="${l[1] as string}"`}
+        {`${l[0]}="${l[1]}"`}
       </span>
     )
   );

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -88,15 +88,17 @@ const ProfileExplorerCompare = ({
       </div>
       <div className="grid grid-cols-1">
         {profileA != null && profileB != null ? (
-          <Card className="mt-2 px-6 py-4">
-            <ProfileViewWithData
-              navigateTo={navigateTo}
-              queryClient={queryClient}
-              profileSource={
-                new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource())
-              }
-            />
-          </Card>
+          <div>
+            <Card className="mt-2 px-6 py-4">
+              <ProfileViewWithData
+                navigateTo={navigateTo}
+                queryClient={queryClient}
+                profileSource={
+                  new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource())
+                }
+              />
+            </Card>
+          </div>
         ) : (
           <div>
             <div className="my-20 text-center">

package/src/ProfileIcicleGraph/index.tsx

@@ -19,7 +19,6 @@ import {Table} from 'apache-arrow';
 
 import {Flamegraph} from '@parca/client';
 import {Button, Select, useParcaContext, useURLState} from '@parca/components';
-import {useContainerDimensions} from '@parca/hooks';
 import {divide, selectQueryParam, type NavigateFunction} from '@parca/utilities';
 
 import DiffLegend from '../components/DiffLegend';
@@ -36,7 +35,7 @@ const numberFormatter = new Intl.NumberFormat('en-US');
 export type ResizeHandler = (width: number, height: number) => void;
 
 interface ProfileIcicleGraphProps {
-  width?: number;
+  width: number;
   graph?: Flamegraph;
   table?: Table<any>;
   total: bigint;
@@ -113,11 +112,11 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   loading,
   setActionButtons,
   error,
+  width,
 }: ProfileIcicleGraphProps): JSX.Element {
   const {loader} = useParcaContext();
   const compareMode: boolean =
     selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
-  const {ref, dimensions} = useContainerDimensions();
 
   const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
     param: 'sort_by',
@@ -200,10 +199,10 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   return (
     <div className="relative">
       {compareMode && <DiffLegend />}
-      <div ref={ref} className="min-h-48">
+      <div className="min-h-48">
         {graph !== undefined && (
           <IcicleGraph
-            width={dimensions?.width}
+            width={width}
             graph={graph}
             total={total}
             filtered={filtered}
@@ -215,7 +214,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
         )}
         {table !== undefined && (
           <IcicleGraphArrow
-            width={dimensions?.width}
+            width={width}
             table={table}
             total={total}
             filtered={filtered}

package/src/ProfileSelector/index.tsx

@@ -199,7 +199,7 @@ const ProfileSelector = ({
 
   return (
     <>
-      <div className="mb-2 flex">
+      <div className="mb-2 flex gap-2">
         <div className="flex w-full flex-wrap content-start items-end justify-between gap-2">
           <div>
             <label className="text-xs">Profile type</label>

package/src/ProfileView/index.tsx

@@ -267,6 +267,13 @@ export const ProfileView = ({
               loading={flamegraphData.loading}
               setActionButtons={setActionButtons}
               error={flamegraphData.error}
+              width={
+                dimensions?.width !== undefined
+                  ? isHalfScreen
+                    ? (dimensions.width - 40) / 2
+                    : dimensions.width - 16
+                  : 0
+              }
             />
           </ConditionalWrapper>
         );