@parca/profile 0.16.89 → 0.16.90

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.90 (2022-12-22)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.89 (2022-12-20)
 
 # 0.15.0 (2022-12-20)

package/dist/IcicleGraph.js

@@ -152,7 +152,7 @@ export default function IcicleGraph(_a) {
         if (ref.current != null) {
             setHeight(ref === null || ref === void 0 ? void 0 : ref.current.getBoundingClientRect().height);
         }
-    }, [width]);
+    }, [width, graph]);
     var total = useMemo(function () { return parseFloat(graph.total); }, [graph.total]);
     var xScale = useMemo(function () {
         if (width === undefined) {

package/dist/ProfileIcicleGraph/index.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import { Flamegraph } from '@parca/client';
+export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
     width?: number;
     graph: Flamegraph | undefined;
     sampleUnit: string;
     curPath: string[] | [];
     setNewCurPath: (path: string[]) => void;
+    onContainerResize?: ResizeHandler;
 }
-declare const ProfileIcicleGraph: ({ graph, curPath, setNewCurPath, sampleUnit, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, curPath, setNewCurPath, sampleUnit, onContainerResize, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;

package/dist/ProfileIcicleGraph/index.js

@@ -14,15 +14,39 @@ import { useAppSelector, selectCompareMode } from '@parca/store';
 import { useContainerDimensions } from '@parca/dynamicsize';
 import DiffLegend from '../components/DiffLegend';
 import IcicleGraph from '../IcicleGraph';
+import { useEffect, useMemo } from 'react';
+var numberFormatter = new Intl.NumberFormat('en-US');
 var ProfileIcicleGraph = function (_a) {
-    var graph = _a.graph, curPath = _a.curPath, setNewCurPath = _a.setNewCurPath, sampleUnit = _a.sampleUnit;
+    var graph = _a.graph, curPath = _a.curPath, setNewCurPath = _a.setNewCurPath, sampleUnit = _a.sampleUnit, onContainerResize = _a.onContainerResize;
     var compareMode = useAppSelector(selectCompareMode);
     var _b = useContainerDimensions(), ref = _b.ref, dimensions = _b.dimensions;
+    useEffect(function () {
+        if (dimensions === undefined)
+            return;
+        if (onContainerResize === undefined)
+            return;
+        onContainerResize(dimensions.width, dimensions.height);
+    }, [dimensions, onContainerResize]);
+    var _c = useMemo(function () {
+        if (graph === undefined || graph.untrimmedTotal === '0') {
+            return [BigInt(0), '0'];
+        }
+        var untrimmedTotal = BigInt(graph.untrimmedTotal);
+        var total = BigInt(graph.total);
+        var trimDifference = untrimmedTotal - total;
+        var trimmedPercentage = (total * BigInt(100)) / untrimmedTotal;
+        return [
+            trimDifference,
+            trimmedPercentage.toString(),
+            numberFormatter.format(total),
+            numberFormatter.format(untrimmedTotal),
+        ];
+    }, [graph]), trimDifference = _c[0], trimmedPercentage = _c[1], formattedTotal = _c[2], formattedUntrimmedTotal = _c[3];
     if (graph === undefined)
         return _jsx("div", { children: "no data..." });
     var total = graph.total;
     if (parseFloat(total) === 0)
         return _jsx(_Fragment, { children: "Profile has no samples" });
-    return (_jsxs(_Fragment, { children: [compareMode && _jsx(DiffLegend, {}), _jsx("div", __assign({ ref: ref }, { children: _jsx(IcicleGraph, { width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, graph: graph, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit }) }))] }));
+    return (_jsxs(_Fragment, { children: [compareMode && _jsx(DiffLegend, {}), trimDifference > BigInt(0) ? (_jsxs("p", __assign({ className: "my-2 text-sm" }, { children: ["Showing ", formattedTotal, "(", trimmedPercentage, "%) out of ", formattedUntrimmedTotal, " samples"] }))) : null, _jsx("div", __assign({ ref: ref }, { children: _jsx(IcicleGraph, { width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, graph: graph, curPath: curPath, setCurPath: setNewCurPath, sampleUnit: sampleUnit }) }))] }));
 };
 export default ProfileIcicleGraph;

package/dist/ProfileView/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { QueryServiceClient, Flamegraph, Top, Callgraph as CallgraphType } from '@parca/client';
+import { ResizeHandler } from '../ProfileIcicleGraph';
 import { ProfileSource } from '../ProfileSource';
 import '../ProfileView.styles.css';
 type NavigateFunction = (path: string, queryParams: any) => void;
@@ -34,7 +35,8 @@ export interface ProfileViewProps {
     navigateTo?: NavigateFunction;
     compare?: boolean;
     onDownloadPProf: () => void;
+    onFlamegraphContainerResize?: ResizeHandler;
 }
 export declare const useProfileVisState: () => ProfileVisState;
-export declare const ProfileView: ({ flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, profileVisState, onDownloadPProf, }: ProfileViewProps) => JSX.Element;
+export declare const ProfileView: ({ flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, profileVisState, onDownloadPProf, onFlamegraphContainerResize, }: ProfileViewProps) => JSX.Element;
 export {};

package/dist/ProfileView/index.js

@@ -36,6 +36,7 @@ import ProfileIcicleGraph from '../ProfileIcicleGraph';
 import TopTable from '../TopTable';
 import useDelayedLoader from '../useDelayedLoader';
 import '../ProfileView.styles.css';
+import useUserPreference, { USER_PREFERENCES } from '@parca/functions/useUserPreference';
 function arrayEquals(a, b) {
     return (Array.isArray(a) &&
         Array.isArray(b) &&
@@ -57,7 +58,7 @@ export var useProfileVisState = function () {
     return { currentView: currentView, setCurrentView: setCurrentView };
 };
 export var ProfileView = function (_a) {
-    var flamegraphData = _a.flamegraphData, topTableData = _a.topTableData, callgraphData = _a.callgraphData, sampleUnit = _a.sampleUnit, profileSource = _a.profileSource, queryClient = _a.queryClient, navigateTo = _a.navigateTo, profileVisState = _a.profileVisState, onDownloadPProf = _a.onDownloadPProf;
+    var flamegraphData = _a.flamegraphData, topTableData = _a.topTableData, callgraphData = _a.callgraphData, sampleUnit = _a.sampleUnit, profileSource = _a.profileSource, queryClient = _a.queryClient, navigateTo = _a.navigateTo, profileVisState = _a.profileVisState, onDownloadPProf = _a.onDownloadPProf, onFlamegraphContainerResize = _a.onFlamegraphContainerResize;
     var dispatch = useAppDispatch();
     var _b = useContainerDimensions(), ref = _b.ref, dimensions = _b.dimensions;
     var _c = useState([]), curPath = _c[0], setCurPath = _c[1];
@@ -66,7 +67,7 @@ export var ProfileView = function (_a) {
     var currentSearchString = useAppSelector(selectSearchNodeString);
     var filterByFunctionString = useAppSelector(selectFilterByFunction);
     var callgraphEnabled = useUIFeatureFlag('callgraph')[0];
-    var highlightAfterFilteringEnabled = useUIFeatureFlag('highlightAfterFiltering')[0];
+    var highlightAfterFilteringEnabled = useUserPreference(USER_PREFERENCES.HIGHTLIGHT_AFTER_FILTERING.key)[0];
     var _d = useParcaContext(), loader = _d.loader, perf = _d.perf;
     useEffect(function () {
         // Reset the current path when the profile source changes
@@ -137,5 +138,5 @@ export var ProfileView = function (_a) {
     return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "py-3" }, { children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", __assign({ className: "flex py-3 w-full" }, { children: [_jsxs("div", __assign({ className: "w-2/5 flex space-x-4" }, { children: [_jsxs("div", __assign({ className: "flex space-x-1" }, { children: [profileSource != null && queryClient != null ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient, disabled: isLoading })) : null, _jsx(Button, __assign({ color: "neutral", onClick: function (e) {
                                                         e.preventDefault();
                                                         onDownloadPProf();
-                                                    }, disabled: isLoading }, { children: "Download pprof" }))] })), _jsx(FilterByFunctionButton, {})] })), _jsxs("div", __assign({ className: "flex ml-auto gap-2" }, { children: [_jsx(Button, __assign({ color: "neutral", onClick: resetIcicleGraph, disabled: curPath.length === 0, className: "whitespace-nowrap text-ellipsis" }, { children: "Reset View" })), callgraphEnabled ? (_jsx(Button, __assign({ variant: "".concat(currentView === 'callgraph' ? 'primary' : 'neutral'), onClick: function () { return switchProfileView('callgraph'); }, className: "whitespace-nowrap text-ellipsis" }, { children: "Callgraph" }))) : null, _jsxs("div", __assign({ className: "flex" }, { children: [_jsx(Button, __assign({ variant: "".concat(currentView === 'table' ? 'primary' : 'neutral'), className: "items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('table'); } }, { children: "Table" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'both' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons text-ellipsis", onClick: function () { return switchProfileView('both'); } }, { children: "Both" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'icicle' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('icicle'); } }, { children: "Icicle Graph" }))] }))] }))] })), isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsxs("div", __assign({ ref: ref, className: "flex space-x-4 justify-between w-full" }, { children: [currentView === 'icicle' && (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(Profiler, __assign({ id: "icicleGraph", onRender: perf === null || perf === void 0 ? void 0 : perf.onRender }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit }) })) }))), currentView === 'callgraph' && (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined && (_jsx(Callgraph, { graph: callgraphData.data, sampleUnit: sampleUnit, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, colorRange: colorRange })) }))), currentView === 'table' && topTableData != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(TopTable, { data: topTableData.data, sampleUnit: sampleUnit }) }))), currentView === 'both' && (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "w-1/2" }, { children: _jsx(TopTable, { data: topTableData === null || topTableData === void 0 ? void 0 : topTableData.data, sampleUnit: sampleUnit }) })), _jsx("div", __assign({ className: "w-1/2" }, { children: flamegraphData != null && (_jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit })) }))] }))] })))] }) }) })) }));
+                                                    }, disabled: isLoading }, { children: "Download pprof" }))] })), _jsx(FilterByFunctionButton, {})] })), _jsxs("div", __assign({ className: "flex ml-auto gap-2" }, { children: [_jsx(Button, __assign({ color: "neutral", onClick: resetIcicleGraph, disabled: curPath.length === 0, className: "whitespace-nowrap text-ellipsis" }, { children: "Reset View" })), callgraphEnabled ? (_jsx(Button, __assign({ variant: "".concat(currentView === 'callgraph' ? 'primary' : 'neutral'), onClick: function () { return switchProfileView('callgraph'); }, className: "whitespace-nowrap text-ellipsis" }, { children: "Callgraph" }))) : null, _jsxs("div", __assign({ className: "flex" }, { children: [_jsx(Button, __assign({ variant: "".concat(currentView === 'table' ? 'primary' : 'neutral'), className: "items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('table'); } }, { children: "Table" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'both' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons text-ellipsis", onClick: function () { return switchProfileView('both'); } }, { children: "Both" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'icicle' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('icicle'); } }, { children: "Icicle Graph" }))] }))] }))] })), isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsxs("div", __assign({ ref: ref, className: "flex space-x-4 justify-between w-full" }, { children: [currentView === 'icicle' && (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(Profiler, __assign({ id: "icicleGraph", onRender: perf === null || perf === void 0 ? void 0 : perf.onRender }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit, onContainerResize: onFlamegraphContainerResize }) })) }))), currentView === 'callgraph' && (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined && (_jsx(Callgraph, { graph: callgraphData.data, sampleUnit: sampleUnit, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, colorRange: colorRange })) }))), currentView === 'table' && topTableData != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(TopTable, { data: topTableData.data, sampleUnit: sampleUnit }) }))), currentView === 'both' && (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "w-1/2" }, { children: _jsx(TopTable, { data: topTableData === null || topTableData === void 0 ? void 0 : topTableData.data, sampleUnit: sampleUnit }) })), _jsx("div", __assign({ className: "w-1/2" }, { children: flamegraphData != null && (_jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit })) }))] }))] })))] }) }) })) }));
 };

package/dist/ProfileViewWithData.js

@@ -53,16 +53,35 @@ import { ProfileView, useProfileVisState } from './ProfileView';
 import { downloadPprof } from './utils';
 import { useGrpcMetadata, useParcaContext } from '@parca/components';
 import { saveAsBlob } from '@parca/functions';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import useUserPreference, { USER_PREFERENCES } from '@parca/functions/useUserPreference';
 export var ProfileViewWithData = function (_a) {
     var _b, _c;
     var queryClient = _a.queryClient, profileSource = _a.profileSource, navigateTo = _a.navigateTo;
     var profileVisState = useProfileVisState();
     var metadata = useGrpcMetadata();
     var currentView = profileVisState.currentView;
-    var _d = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_TABLE, {
+    var _d = useState(0), nodeTrimThreshold = _d[0], setNodeTrimThreshold = _d[1];
+    var disableTrimming = useUserPreference(USER_PREFERENCES.DISABLE_GRAPH_TRIMMING.key)[0];
+    useEffect(function () {
+        if (disableTrimming) {
+            setNodeTrimThreshold(0);
+        }
+    }, [disableTrimming]);
+    var onFlamegraphContainerResize = function (width) {
+        if (disableTrimming || width === 0) {
+            return;
+        }
+        var threshold = (1 / width) * 100;
+        if (threshold === nodeTrimThreshold) {
+            return;
+        }
+        setNodeTrimThreshold(threshold);
+    };
+    var _e = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_TABLE, {
         skip: currentView !== 'icicle' && currentView !== 'both',
-    }), flamegraphLoading = _d.isLoading, flamegraphResponse = _d.response, flamegraphError = _d.error;
+        nodeTrimThreshold: nodeTrimThreshold,
+    }), flamegraphLoading = _e.isLoading, flamegraphResponse = _e.response, flamegraphError = _e.error;
     var perf = useParcaContext().perf;
     useEffect(function () {
         var _a;
@@ -74,12 +93,12 @@ export var ProfileViewWithData = function (_a) {
         }
         perf === null || perf === void 0 ? void 0 : perf.markInteraction('Flamegraph Render', (_a = flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.report) === null || _a === void 0 ? void 0 : _a.flamegraph.total);
     }, [flamegraphLoading, flamegraphResponse, perf]);
-    var _e = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP, {
+    var _f = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP, {
         skip: currentView !== 'table' && currentView !== 'both',
-    }), topTableLoading = _e.isLoading, topTableResponse = _e.response, topTableError = _e.error;
-    var _f = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
+    }), topTableLoading = _f.isLoading, topTableResponse = _f.response, topTableError = _f.error;
+    var _g = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
         skip: currentView !== 'callgraph',
-    }), callgraphLoading = _f.isLoading, callgraphResponse = _f.response, callgraphError = _f.error;
+    }), callgraphLoading = _g.isLoading, callgraphResponse = _g.response, callgraphError = _g.error;
     var sampleUnit = profileSource.ProfileType().sampleUnit;
     var downloadPProfClick = function () { return __awaiter(void 0, void 0, void 0, function () {
         var blob, error_1;
@@ -121,6 +140,6 @@ export var ProfileViewWithData = function (_a) {
                 ? (_c = callgraphResponse === null || callgraphResponse === void 0 ? void 0 : callgraphResponse.report) === null || _c === void 0 ? void 0 : _c.callgraph
                 : undefined,
             error: callgraphError,
-        }, profileVisState: profileVisState, sampleUnit: sampleUnit, profileSource: profileSource, queryClient: queryClient, navigateTo: navigateTo, onDownloadPProf: function () { return void downloadPProfClick(); } }));
+        }, profileVisState: profileVisState, sampleUnit: sampleUnit, profileSource: profileSource, queryClient: queryClient, navigateTo: navigateTo, onDownloadPProf: function () { return void downloadPProfClick(); }, onFlamegraphContainerResize: onFlamegraphContainerResize }));
 };
 export default ProfileViewWithData;

package/dist/useQuery.d.ts

@@ -8,6 +8,7 @@ export interface IQueryResult {
 }
 interface UseQueryOptions {
     skip?: boolean;
+    nodeTrimThreshold?: number;
 }
 export declare const useQuery: (client: QueryServiceClient, profileSource: ProfileSource, reportType: QueryRequest_ReportType, options?: UseQueryOptions) => IQueryResult;
 export {};

package/dist/useQuery.js

@@ -52,7 +52,7 @@ export var useQuery = function (client, profileSource, reportType, options) {
     var _a = (options !== null && options !== void 0 ? options : {}).skip, skip = _a === void 0 ? false : _a;
     var metadata = useGrpcMetadata();
     var _b = useGrpcQuery({
-        key: ['query', profileSource, reportType],
+        key: ['query', profileSource, reportType, options === null || options === void 0 ? void 0 : options.nodeTrimThreshold],
         queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
             var req, response;
             return __generator(this, function (_a) {
@@ -60,6 +60,7 @@ export var useQuery = function (client, profileSource, reportType, options) {
                     case 0:
                         req = profileSource.QueryRequest();
                         req.reportType = reportType;
+                        req.nodeTrimThreshold = options === null || options === void 0 ? void 0 : options.nodeTrimThreshold;
                         return [4 /*yield*/, client.query(req, { meta: metadata })];
                     case 1:
                         response = (_a.sent()).response;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.89",
+  "version": "0.16.90",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.61",
-    "@parca/components": "^0.16.78",
+    "@parca/client": "^0.16.62",
+    "@parca/components": "^0.16.79",
     "@parca/dynamicsize": "^0.16.52",
-    "@parca/functions": "^0.16.54",
+    "@parca/functions": "^0.16.55",
     "@parca/parser": "^0.16.52",
     "@parca/store": "^0.16.51",
     "d3": "7.7.0",
@@ -42,5 +42,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "de3039d619347aa29a374871a6cbb4f53aa72d6a"
+  "gitHead": "4a9035ae2d347b9e419e81ed27d587658c8f3fdd"
 }

package/src/IcicleGraph.tsx

@@ -383,7 +383,7 @@ export default function IcicleGraph({
     if (ref.current != null) {
       setHeight(ref?.current.getBoundingClientRect().height);
     }
-  }, [width]);
+  }, [width, graph]);
 
   const total = useMemo(() => parseFloat(graph.total), [graph.total]);
   const xScale = useMemo(() => {

package/src/ProfileIcicleGraph/index.tsx

@@ -17,6 +17,11 @@ import {useContainerDimensions} from '@parca/dynamicsize';
 
 import DiffLegend from '../components/DiffLegend';
 import IcicleGraph from '../IcicleGraph';
+import {useEffect, useMemo} from 'react';
+
+const numberFormatter = new Intl.NumberFormat('en-US');
+
+export type ResizeHandler = (width: number, height: number) => void;
 
 interface ProfileIcicleGraphProps {
   width?: number;
@@ -24,6 +29,7 @@ interface ProfileIcicleGraphProps {
   sampleUnit: string;
   curPath: string[] | [];
   setNewCurPath: (path: string[]) => void;
+  onContainerResize?: ResizeHandler;
 }
 
 const ProfileIcicleGraph = ({
@@ -31,10 +37,38 @@ const ProfileIcicleGraph = ({
   curPath,
   setNewCurPath,
   sampleUnit,
+  onContainerResize,
 }: ProfileIcicleGraphProps): JSX.Element => {
   const compareMode = useAppSelector(selectCompareMode);
   const {ref, dimensions} = useContainerDimensions();
 
+  useEffect(() => {
+    if (dimensions === undefined) return;
+    if (onContainerResize === undefined) return;
+
+    onContainerResize(dimensions.width, dimensions.height);
+  }, [dimensions, onContainerResize]);
+
+  const [trimDifference, trimmedPercentage, formattedTotal, formattedUntrimmedTotal] =
+    useMemo(() => {
+      if (graph === undefined || graph.untrimmedTotal === '0') {
+        return [BigInt(0), '0'];
+      }
+
+      const untrimmedTotal = BigInt(graph.untrimmedTotal);
+      const total = BigInt(graph.total);
+
+      const trimDifference = untrimmedTotal - total;
+      const trimmedPercentage = (total * BigInt(100)) / untrimmedTotal;
+
+      return [
+        trimDifference,
+        trimmedPercentage.toString(),
+        numberFormatter.format(total),
+        numberFormatter.format(untrimmedTotal),
+      ];
+    }, [graph]);
+
   if (graph === undefined) return <div>no data...</div>;
   const total = graph.total;
   if (parseFloat(total) === 0) return <>Profile has no samples</>;
@@ -42,6 +76,11 @@ const ProfileIcicleGraph = ({
   return (
     <>
       {compareMode && <DiffLegend />}
+      {trimDifference > BigInt(0) ? (
+        <p className="my-2 text-sm">
+          Showing {formattedTotal}({trimmedPercentage}%) out of {formattedUntrimmedTotal} samples
+        </p>
+      ) : null}
       <div ref={ref}>
         <IcicleGraph
           width={dimensions?.width}

package/src/ProfileView/index.tsx

@@ -31,12 +31,13 @@ import {
 import {Callgraph} from '../';
 import ProfileShareButton from '../components/ProfileShareButton';
 import FilterByFunctionButton from './FilterByFunctionButton';
-import ProfileIcicleGraph from '../ProfileIcicleGraph';
+import ProfileIcicleGraph, {ResizeHandler} from '../ProfileIcicleGraph';
 import {ProfileSource} from '../ProfileSource';
 import TopTable from '../TopTable';
 import useDelayedLoader from '../useDelayedLoader';
 
 import '../ProfileView.styles.css';
+import useUserPreference, {USER_PREFERENCES} from '@parca/functions/useUserPreference';
 
 type NavigateFunction = (path: string, queryParams: any) => void;
 
@@ -76,6 +77,7 @@ export interface ProfileViewProps {
   navigateTo?: NavigateFunction;
   compare?: boolean;
   onDownloadPProf: () => void;
+  onFlamegraphContainerResize?: ResizeHandler;
 }
 
 function arrayEquals<T>(a: T[], b: T[]): boolean {
@@ -113,6 +115,7 @@ export const ProfileView = ({
   navigateTo,
   profileVisState,
   onDownloadPProf,
+  onFlamegraphContainerResize,
 }: ProfileViewProps): JSX.Element => {
   const dispatch = useAppDispatch();
   const {ref, dimensions} = useContainerDimensions();
@@ -123,7 +126,9 @@ export const ProfileView = ({
   const filterByFunctionString = useAppSelector(selectFilterByFunction);
 
   const [callgraphEnabled] = useUIFeatureFlag('callgraph');
-  const [highlightAfterFilteringEnabled] = useUIFeatureFlag('highlightAfterFiltering');
+  const [highlightAfterFilteringEnabled] = useUserPreference<boolean>(
+    USER_PREFERENCES.HIGHTLIGHT_AFTER_FILTERING.key
+  );
 
   const {loader, perf} = useParcaContext();
 
@@ -305,6 +310,7 @@ export const ProfileView = ({
                         setNewCurPath={setNewCurPath}
                         graph={flamegraphData.data}
                         sampleUnit={sampleUnit}
+                        onContainerResize={onFlamegraphContainerResize}
                       />
                     </Profiler>
                   </div>

package/src/ProfileViewWithData.tsx

@@ -19,7 +19,8 @@ import {ProfileSource} from './ProfileSource';
 import {downloadPprof} from './utils';
 import {useGrpcMetadata, useParcaContext} from '@parca/components';
 import {saveAsBlob} from '@parca/functions';
-import {useEffect} from 'react';
+import {useEffect, useState} from 'react';
+import useUserPreference, {USER_PREFERENCES} from '@parca/functions/useUserPreference';
 
 export type NavigateFunction = (path: string, queryParams: any) => void;
 
@@ -38,12 +39,33 @@ export const ProfileViewWithData = ({
   const profileVisState = useProfileVisState();
   const metadata = useGrpcMetadata();
   const {currentView} = profileVisState;
+  const [nodeTrimThreshold, setNodeTrimThreshold] = useState<number>(0);
+  const [disableTrimming] = useUserPreference<boolean>(USER_PREFERENCES.DISABLE_GRAPH_TRIMMING.key);
+
+  useEffect(() => {
+    if (disableTrimming) {
+      setNodeTrimThreshold(0);
+    }
+  }, [disableTrimming]);
+
+  const onFlamegraphContainerResize = (width: number): void => {
+    if (disableTrimming || 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: currentView !== 'icicle' && currentView !== 'both',
+    nodeTrimThreshold,
   });
   const {perf} = useParcaContext();
 
@@ -120,6 +142,7 @@ export const ProfileViewWithData = ({
       queryClient={queryClient}
       navigateTo={navigateTo}
       onDownloadPProf={() => void downloadPProfClick()}
+      onFlamegraphContainerResize={onFlamegraphContainerResize}
     />
   );
 };

package/src/useQuery.tsx

@@ -26,6 +26,7 @@ export interface IQueryResult {
 
 interface UseQueryOptions {
   skip?: boolean;
+  nodeTrimThreshold?: number;
 }
 
 export const useQuery = (
@@ -37,10 +38,11 @@ export const useQuery = (
   const {skip = false} = options ?? {};
   const metadata = useGrpcMetadata();
   const {data, isLoading, error} = useGrpcQuery<QueryResponse | undefined>({
-    key: ['query', profileSource, reportType],
+    key: ['query', profileSource, reportType, options?.nodeTrimThreshold],
     queryFn: async () => {
       const req = profileSource.QueryRequest();
       req.reportType = reportType;
+      req.nodeTrimThreshold = options?.nodeTrimThreshold;
 
       const {response} = await client.query(req, {meta: metadata});
       return response;