@parca/profile 0.16.243 → 0.16.244

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 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

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/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.243",
+  "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": "fef627c0af7b6169048f9108637cdc92442ad4ae"
+  "gitHead": "cad92c30fc37a648d8989db61aaa8165b1db4028"
 }

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/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>
         );