@parca/profile 0.16.187 → 0.16.188

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.188 (2023-06-21)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.187](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.186...@parca/profile@0.16.187) (2023-06-20)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileIcicleGraph/index.d.ts

@@ -9,10 +9,9 @@ interface ProfileIcicleGraphProps {
     sampleUnit: string;
     curPath: string[] | [];
     setNewCurPath: (path: string[]) => void;
-    onContainerResize?: ResizeHandler;
     navigateTo?: NavigateFunction;
     loading: boolean;
     setActionButtons?: (buttons: JSX.Element) => void;
 }
-declare const ProfileIcicleGraph: ({ graph, total, filtered, curPath, setNewCurPath, sampleUnit, onContainerResize, navigateTo, loading, setActionButtons, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;

package/dist/ProfileIcicleGraph/index.js

@@ -18,16 +18,9 @@ import { divide, selectQueryParam } from '@parca/utilities';
 import DiffLegend from '../components/DiffLegend';
 import { IcicleGraph } from './IcicleGraph';
 const numberFormatter = new Intl.NumberFormat('en-US');
-const ProfileIcicleGraph = ({ graph, total, filtered, curPath, setNewCurPath, sampleUnit, onContainerResize, navigateTo, loading, setActionButtons, }) => {
+const ProfileIcicleGraph = ({ graph, total, filtered, curPath, setNewCurPath, sampleUnit, navigateTo, loading, setActionButtons, }) => {
     const compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
     const { ref, dimensions } = useContainerDimensions();
-    useEffect(() => {
-        if (dimensions === undefined)
-            return;
-        if (onContainerResize === undefined)
-            return;
-        onContainerResize(dimensions.width, dimensions.height);
-    }, [dimensions, onContainerResize]);
     const [totalFormatted, totalUnfilteredFormatted, isTrimmed, trimmedFormatted, trimmedPercentage, isFiltered, filteredPercentage,] = useMemo(() => {
         if (graph === undefined) {
             return ['0', '0', false, '0', '0', false, '0', '0'];

package/dist/ProfileView/index.d.ts

@@ -1,5 +1,4 @@
 import { Callgraph as CallgraphType, Flamegraph, QueryServiceClient, Top } from '@parca/client';
-import { ResizeHandler } from '../ProfileIcicleGraph';
 import { ProfileSource } from '../ProfileSource';
 type NavigateFunction = (path: string, queryParams: any, options?: {
     replace?: boolean;
@@ -37,8 +36,7 @@ export interface ProfileViewProps {
     navigateTo?: NavigateFunction;
     compare?: boolean;
     onDownloadPProf: () => void;
-    onFlamegraphContainerResize?: ResizeHandler;
     pprofDownloading?: boolean;
 }
-export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, onFlamegraphContainerResize, pprofDownloading, }: ProfileViewProps) => JSX.Element;
+export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, }: ProfileViewProps) => JSX.Element;
 export {};

package/dist/ProfileView/index.js

@@ -36,7 +36,7 @@ function arrayEquals(a, b) {
         a.length === b.length &&
         a.every((val, index) => val === b[index]));
 }
-export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, onFlamegraphContainerResize, pprofDownloading, }) => {
+export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, }) => {
     const { ref, dimensions } = useContainerDimensions();
     const [curPath, setCurPath] = useState([]);
     const [rawDashboardItems, setDashboardItems] = useURLState({
@@ -127,7 +127,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                 return flamegraphData?.data != null ? (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
                         id: 'icicleGraph',
                         onRender: perf?.onRender,
-                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, total: total, filtered: filtered, sampleUnit: sampleUnit, onContainerResize: onFlamegraphContainerResize, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons }) })) : (_jsx(_Fragment, { children: " " }));
+                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, total: total, filtered: filtered, sampleUnit: sampleUnit, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons }) })) : (_jsx(_Fragment, { children: " " }));
             }
             case 'callgraph': {
                 return callgraphData?.data !== undefined &&

package/dist/ProfileViewWithData.js

@@ -11,7 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // 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 { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { QueryRequest_ReportType } from '@parca/client';
 import { useGrpcMetadata, useParcaContext, useURLState } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
@@ -22,24 +22,19 @@ import { downloadPprof } from './utils';
 export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, }) => {
     const metadata = useGrpcMetadata();
     const [dashboardItems] = useURLState({ param: 'dashboard_items', navigateTo });
-    const [nodeTrimThreshold, setNodeTrimThreshold] = useState(0);
     const [enableTrimming] = useUserPreference(USER_PREFERENCES.ENABLE_GRAPH_TRIMMING.key);
     const [pprofDownloading, setPprofDownloading] = useState(false);
-    useEffect(() => {
+    const nodeTrimThreshold = useMemo(() => {
         if (!enableTrimming) {
-            setNodeTrimThreshold(0);
+            return 0;
         }
+        let width = 
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+        // subtract the padding
+        width = width - 12 - 16 - 12;
+        return (1 / width) * 100;
     }, [enableTrimming]);
-    const onFlamegraphContainerResize = (width) => {
-        if (!enableTrimming || width === 0) {
-            return;
-        }
-        const threshold = (1 / width) * 100;
-        if (threshold === nodeTrimThreshold) {
-            return;
-        }
-        setNodeTrimThreshold(threshold);
-    };
     const { isLoading: flamegraphLoading, response: flamegraphResponse, error: flamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_TABLE, {
         skip: !dashboardItems.includes('icicle'),
         nodeTrimThreshold,
@@ -120,6 +115,6 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
                 ? callgraphResponse?.report?.callgraph
                 : undefined,
             error: callgraphError,
-        }, sampleUnit: sampleUnit, profileSource: profileSource, queryClient: queryClient, navigateTo: navigateTo, onDownloadPProf: () => void downloadPProfClick(), pprofDownloading: pprofDownloading, onFlamegraphContainerResize: onFlamegraphContainerResize }));
+        }, sampleUnit: sampleUnit, profileSource: profileSource, queryClient: queryClient, navigateTo: navigateTo, onDownloadPProf: () => void downloadPProfClick(), pprofDownloading: pprofDownloading }));
 };
 export default ProfileViewWithData;

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.187",
+  "version": "0.16.188",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.74",
-    "@parca/components": "^0.16.148",
+    "@parca/components": "^0.16.149",
     "@parca/dynamicsize": "^0.16.54",
-    "@parca/hooks": "^0.0.2",
+    "@parca/hooks": "^0.0.9",
     "@parca/parser": "^0.16.55",
-    "@parca/store": "^0.16.78",
-    "@parca/utilities": "^0.0.8",
+    "@parca/store": "^0.16.79",
+    "@parca/utilities": "^0.0.9",
     "@tanstack/react-query": "^4.0.5",
     "@types/react-beautiful-dnd": "^13.1.3",
     "d3": "7.8.5",
@@ -46,5 +46,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "8a2b14da10bc5ff10a698247a6e74a4d19aa588f"
+  "gitHead": "63d0c4ac11e3a9a6a859647ef5828c13a50b0132"
 }

package/src/ProfileIcicleGraph/index.tsx

@@ -33,7 +33,6 @@ interface ProfileIcicleGraphProps {
   sampleUnit: string;
   curPath: string[] | [];
   setNewCurPath: (path: string[]) => void;
-  onContainerResize?: ResizeHandler;
   navigateTo?: NavigateFunction;
   loading: boolean;
   setActionButtons?: (buttons: JSX.Element) => void;
@@ -46,7 +45,6 @@ const ProfileIcicleGraph = ({
   curPath,
   setNewCurPath,
   sampleUnit,
-  onContainerResize,
   navigateTo,
   loading,
   setActionButtons,
@@ -55,13 +53,6 @@ const ProfileIcicleGraph = ({
     selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
   const {ref, dimensions} = useContainerDimensions();
 
-  useEffect(() => {
-    if (dimensions === undefined) return;
-    if (onContainerResize === undefined) return;
-
-    onContainerResize(dimensions.width, dimensions.height);
-  }, [dimensions, onContainerResize]);
-
   const [
     totalFormatted,
     totalUnfilteredFormatted,

package/src/ProfileView/index.tsx

@@ -39,7 +39,7 @@ import {getNewSpanColor} from '@parca/utilities';
 
 import {Callgraph} from '../';
 import {jsonToDot} from '../Callgraph/utils';
-import ProfileIcicleGraph, {ResizeHandler} from '../ProfileIcicleGraph';
+import ProfileIcicleGraph from '../ProfileIcicleGraph';
 import {ProfileSource} from '../ProfileSource';
 import {TopTable} from '../TopTable';
 import ProfileShareButton from '../components/ProfileShareButton';
@@ -86,7 +86,6 @@ export interface ProfileViewProps {
   navigateTo?: NavigateFunction;
   compare?: boolean;
   onDownloadPProf: () => void;
-  onFlamegraphContainerResize?: ResizeHandler;
   pprofDownloading?: boolean;
 }
 
@@ -110,7 +109,6 @@ export const ProfileView = ({
   queryClient,
   navigateTo,
   onDownloadPProf,
-  onFlamegraphContainerResize,
   pprofDownloading,
 }: ProfileViewProps): JSX.Element => {
   const {ref, dimensions} = useContainerDimensions();
@@ -248,7 +246,6 @@ export const ProfileView = ({
               total={total}
               filtered={filtered}
               sampleUnit={sampleUnit}
-              onContainerResize={onFlamegraphContainerResize}
               navigateTo={navigateTo}
               loading={flamegraphData.loading}
               setActionButtons={setActionButtons}

package/src/ProfileViewWithData.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useState} from 'react';
+import {useEffect, useMemo, useState} from 'react';
 
 import {QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
 import {useGrpcMetadata, useParcaContext, useURLState} from '@parca/components';
@@ -37,26 +37,21 @@ export const ProfileViewWithData = ({
 }: ProfileViewWithDataProps): JSX.Element => {
   const metadata = useGrpcMetadata();
   const [dashboardItems] = useURLState({param: 'dashboard_items', navigateTo});
-  const [nodeTrimThreshold, setNodeTrimThreshold] = useState<number>(0);
   const [enableTrimming] = useUserPreference<boolean>(USER_PREFERENCES.ENABLE_GRAPH_TRIMMING.key);
   const [pprofDownloading, setPprofDownloading] = useState<boolean>(false);
 
-  useEffect(() => {
+  const nodeTrimThreshold = useMemo(() => {
     if (!enableTrimming) {
-      setNodeTrimThreshold(0);
+      return 0;
     }
-  }, [enableTrimming]);
 
-  const onFlamegraphContainerResize = (width: number): void => {
-    if (!enableTrimming || width === 0) {
-      return;
-    }
-    const threshold = (1 / width) * 100;
-    if (threshold === nodeTrimThreshold) {
-      return;
-    }
-    setNodeTrimThreshold(threshold);
-  };
+    let width =
+      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+      window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    // subtract the padding
+    width = width - 12 - 16 - 12;
+    return (1 / width) * 100;
+  }, [enableTrimming]);
 
   const {
     isLoading: flamegraphLoading,
@@ -173,7 +168,6 @@ export const ProfileViewWithData = ({
       navigateTo={navigateTo}
       onDownloadPProf={() => void downloadPProfClick()}
       pprofDownloading={pprofDownloading}
-      onFlamegraphContainerResize={onFlamegraphContainerResize}
     />
   );
 };