@parca/profile 0.16.141 → 0.16.143

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.143](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.142...@parca/profile@0.16.143) (2023-03-21)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.142](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.141...@parca/profile@0.16.142) (2023-03-21)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.141 (2023-03-20)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileIcicleGraph/index.d.ts

@@ -5,6 +5,8 @@ export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
     width?: number;
     graph: Flamegraph | undefined;
+    total: bigint;
+    filtered: bigint;
     sampleUnit: string;
     curPath: string[] | [];
     setNewCurPath: (path: string[]) => void;
@@ -13,5 +15,5 @@ interface ProfileIcicleGraphProps {
     loading: boolean;
     setActionButtons?: (buttons: JSX.Element) => void;
 }
-declare const ProfileIcicleGraph: ({ graph, curPath, setNewCurPath, sampleUnit, onContainerResize, navigateTo, loading, setActionButtons, }: ProfileIcicleGraphProps) => JSX.Element;
+declare const ProfileIcicleGraph: ({ graph, total, filtered, curPath, setNewCurPath, sampleUnit, onContainerResize, navigateTo, loading, setActionButtons, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;

package/dist/ProfileIcicleGraph/index.js

@@ -30,7 +30,7 @@ import DiffLegend from '../components/DiffLegend';
 import { IcicleGraph } from './IcicleGraph';
 var numberFormatter = new Intl.NumberFormat('en-US');
 var ProfileIcicleGraph = function (_a) {
-    var graph = _a.graph, curPath = _a.curPath, setNewCurPath = _a.setNewCurPath, sampleUnit = _a.sampleUnit, onContainerResize = _a.onContainerResize, navigateTo = _a.navigateTo, loading = _a.loading, setActionButtons = _a.setActionButtons;
+    var graph = _a.graph, total = _a.total, filtered = _a.filtered, curPath = _a.curPath, setNewCurPath = _a.setNewCurPath, sampleUnit = _a.sampleUnit, onContainerResize = _a.onContainerResize, navigateTo = _a.navigateTo, loading = _a.loading, setActionButtons = _a.setActionButtons;
     var compareMode = selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
     var _b = useContainerDimensions(), ref = _b.ref, dimensions = _b.dimensions;
     useEffect(function () {
@@ -41,21 +41,24 @@ var ProfileIcicleGraph = function (_a) {
         onContainerResize(dimensions.width, dimensions.height);
     }, [dimensions, onContainerResize]);
     var _c = useMemo(function () {
-        if (graph === undefined || graph.untrimmedTotal === '0') {
-            return [false, BigInt(0), '0'];
+        if (graph === undefined) {
+            return ['0', '0', false, '0', '0', false, '0', '0'];
         }
-        var untrimmedTotal = BigInt(graph.untrimmedTotal);
-        var total = BigInt(graph.total);
-        var trimDifference = untrimmedTotal - total;
-        var trimmedPercentage = (total * BigInt(100)) / untrimmedTotal;
+        var trimmed = BigInt(graph.trimmed);
+        var rawTotal = total + filtered + trimmed;
+        // safeguard against division by zero
+        var rawTotalDivisor = rawTotal > 0 ? rawTotal : BigInt(1);
         return [
-            trimDifference > BigInt(0),
-            trimDifference,
-            trimmedPercentage.toString(),
             numberFormatter.format(total),
-            numberFormatter.format(untrimmedTotal),
+            numberFormatter.format(rawTotal),
+            trimmed > 0,
+            numberFormatter.format(trimmed),
+            numberFormatter.format((trimmed * BigInt(100)) / rawTotalDivisor),
+            filtered > 0,
+            numberFormatter.format(filtered),
+            numberFormatter.format((filtered * BigInt(100)) / rawTotalDivisor),
         ];
-    }, [graph]), isTrimmed = _c[0], _ = _c[1], trimmedPercentage = _c[2], formattedTotal = _c[3], formattedUntrimmedTotal = _c[4];
+    }, [filtered, graph, total]), totalFormatted = _c[0], rawFormatted = _c[1], isTrimmed = _c[2], trimmedFormatted = _c[3], trimmedPercentage = _c[4], isFiltered = _c[5], filteredFormatted = _c[6], filteredPercentage = _c[7];
     useEffect(function () {
         if (setActionButtons === undefined) {
             return;
@@ -64,9 +67,8 @@ var ProfileIcicleGraph = function (_a) {
     }, [setNewCurPath, curPath, setActionButtons]);
     if (graph === undefined)
         return _jsx("div", { children: "no data..." });
-    var total = graph.total;
-    if (parseFloat(total) === 0 && !loading)
+    if (total === BigInt(0) && !loading)
         return _jsx(_Fragment, { children: "Profile has no samples" });
-    return (_jsxs("div", __assign({ className: "relative" }, { children: [compareMode && _jsx(DiffLegend, {}), isTrimmed ? (_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, navigateTo: navigateTo }) }))] })));
+    return (_jsxs("div", __assign({ className: "relative" }, { 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, navigateTo: navigateTo }) })), _jsxs("p", __assign({ className: "my-2 text-xs" }, { children: ["Showing ", totalFormatted, " ", isFiltered || isTrimmed ? _jsxs("span", { children: ["of ", rawFormatted, " "] }) : _jsx(_Fragment, {}), "samples.", ' ', isFiltered ? (_jsxs("span", { children: ["Filtered ", filteredFormatted, " (", filteredPercentage, "%) samples.\u00A0"] })) : (_jsx(_Fragment, {})), isTrimmed ? (_jsxs("span", { children: ["Trimmed ", trimmedFormatted, " (", trimmedPercentage, "%) too small samples."] })) : (_jsx(_Fragment, {}))] }))] })));
 };
 export default ProfileIcicleGraph;

package/dist/ProfileView/index.d.ts

@@ -8,6 +8,8 @@ type NavigateFunction = (path: string, queryParams: any, options?: {
 export interface FlamegraphData {
     loading: boolean;
     data?: Flamegraph;
+    total?: bigint;
+    filtered?: bigint;
     error?: any;
 }
 export interface TopTableData {

package/dist/ProfileView/index.js

@@ -202,13 +202,14 @@ export var ProfileView = function (_a) {
         }
     };
     var getDashboardItemByType = function (_a) {
+        var _b, _c;
         var type = _a.type, isHalfScreen = _a.isHalfScreen, setActionButtons = _a.setActionButtons;
         switch (type) {
             case 'icicle': {
                 return (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null ? (_jsx(ConditionalWrapper, __assign({ condition: (perf === null || perf === void 0 ? void 0 : perf.onRender) != null, WrapperComponent: Profiler, wrapperProps: {
                         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, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons }) }))) : (_jsx(_Fragment, { children: " " }));
+                    } }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, total: (_b = flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.total) !== null && _b !== void 0 ? _b : BigInt(0), filtered: (_c = flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.filtered) !== null && _c !== void 0 ? _c : BigInt(0), sampleUnit: sampleUnit, onContainerResize: onFlamegraphContainerResize, navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons }) }))) : (_jsx(_Fragment, { children: " " }));
             }
             case 'callgraph': {
                 return (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) !== undefined &&

package/dist/ProfileViewWithData.js

@@ -56,11 +56,11 @@ import { ProfileView } from './ProfileView';
 import { useQuery } from './useQuery';
 import { downloadPprof } from './utils';
 export var ProfileViewWithData = function (_a) {
-    var _b, _c;
+    var _b, _c, _d, _e;
     var queryClient = _a.queryClient, profileSource = _a.profileSource, navigateTo = _a.navigateTo;
     var metadata = useGrpcMetadata();
     var dashboardItems = useURLState({ param: 'dashboard_items', navigateTo: navigateTo })[0];
-    var _d = useState(0), nodeTrimThreshold = _d[0], setNodeTrimThreshold = _d[1];
+    var _f = useState(0), nodeTrimThreshold = _f[0], setNodeTrimThreshold = _f[1];
     var enableTrimming = useUserPreference(USER_PREFERENCES.ENABLE_GRAPH_TRIMMING.key)[0];
     useEffect(function () {
         if (!enableTrimming) {
@@ -77,17 +77,17 @@ export var ProfileViewWithData = function (_a) {
         }
         setNodeTrimThreshold(threshold);
     };
-    var _e = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_TABLE, {
+    var _g = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_TABLE, {
         skip: !dashboardItems.includes('icicle'),
         nodeTrimThreshold: nodeTrimThreshold,
-    }), flamegraphLoading = _e.isLoading, flamegraphResponse = _e.response, flamegraphError = _e.error;
+    }), flamegraphLoading = _g.isLoading, flamegraphResponse = _g.response, flamegraphError = _g.error;
     var perf = useParcaContext().perf;
-    var _f = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP, {
+    var _h = useQuery(queryClient, profileSource, QueryRequest_ReportType.TOP, {
         skip: !dashboardItems.includes('table'),
-    }), topTableLoading = _f.isLoading, topTableResponse = _f.response, topTableError = _f.error;
-    var _g = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
+    }), topTableLoading = _h.isLoading, topTableResponse = _h.response, topTableError = _h.error;
+    var _j = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
         skip: !dashboardItems.includes('callgraph'),
-    }), callgraphLoading = _g.isLoading, callgraphResponse = _g.response, callgraphError = _g.error;
+    }), callgraphLoading = _j.isLoading, callgraphResponse = _j.response, callgraphError = _j.error;
     useEffect(function () {
         var _a, _b;
         if (!flamegraphLoading && (flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.report.oneofKind) === 'flamegraph') {
@@ -138,6 +138,8 @@ export var ProfileViewWithData = function (_a) {
             data: (flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.report.oneofKind) === 'flamegraph'
                 ? (_b = flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.report) === null || _b === void 0 ? void 0 : _b.flamegraph
                 : undefined,
+            total: BigInt((_c = flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.total) !== null && _c !== void 0 ? _c : '0'),
+            filtered: BigInt((_d = flamegraphResponse === null || flamegraphResponse === void 0 ? void 0 : flamegraphResponse.filtered) !== null && _d !== void 0 ? _d : '0'),
             error: flamegraphError,
         }, topTableData: {
             loading: topTableLoading,
@@ -146,7 +148,7 @@ export var ProfileViewWithData = function (_a) {
         }, callgraphData: {
             loading: callgraphLoading,
             data: (callgraphResponse === null || callgraphResponse === void 0 ? void 0 : callgraphResponse.report.oneofKind) === 'callgraph'
-                ? (_c = callgraphResponse === null || callgraphResponse === void 0 ? void 0 : callgraphResponse.report) === null || _c === void 0 ? void 0 : _c.callgraph
+                ? (_e = callgraphResponse === null || callgraphResponse === void 0 ? void 0 : callgraphResponse.report) === null || _e === void 0 ? void 0 : _e.callgraph
                 : undefined,
             error: callgraphError,
         }, sampleUnit: sampleUnit, profileSource: profileSource, queryClient: queryClient, navigateTo: navigateTo, onDownloadPProf: function () { return void downloadPProfClick(); }, onFlamegraphContainerResize: onFlamegraphContainerResize }));

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.141",
+  "version": "0.16.143",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.67",
-    "@parca/components": "^0.16.115",
+    "@parca/client": "^0.16.68",
+    "@parca/components": "^0.16.117",
     "@parca/dynamicsize": "^0.16.54",
-    "@parca/functions": "^0.16.68",
+    "@parca/functions": "^0.16.69",
     "@parca/parser": "^0.16.55",
-    "@parca/store": "^0.16.66",
+    "@parca/store": "^0.16.67",
     "@types/react-beautiful-dnd": "^13.1.3",
     "d3": "7.8.2",
     "d3-scale": "^4.0.2",
@@ -45,5 +45,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "f3a97ac4b80fa76c06890f1c129b6cece3ee3455"
+  "gitHead": "6bca71c40674ca2ee753adca4c9a719987a2f770"
 }

package/src/ProfileIcicleGraph/index.tsx

@@ -28,6 +28,8 @@ export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
   width?: number;
   graph: Flamegraph | undefined;
+  total: bigint;
+  filtered: bigint;
   sampleUnit: string;
   curPath: string[] | [];
   setNewCurPath: (path: string[]) => void;
@@ -39,6 +41,8 @@ interface ProfileIcicleGraphProps {
 
 const ProfileIcicleGraph = ({
   graph,
+  total,
+  filtered,
   curPath,
   setNewCurPath,
   sampleUnit,
@@ -58,25 +62,38 @@ const ProfileIcicleGraph = ({
     onContainerResize(dimensions.width, dimensions.height);
   }, [dimensions, onContainerResize]);
 
-  const [isTrimmed, _, trimmedPercentage, formattedTotal, formattedUntrimmedTotal] = useMemo(() => {
-    if (graph === undefined || graph.untrimmedTotal === '0') {
-      return [false, BigInt(0), '0'];
+  const [
+    totalFormatted,
+    rawFormatted,
+    isTrimmed,
+    trimmedFormatted,
+    trimmedPercentage,
+    isFiltered,
+    filteredFormatted,
+    filteredPercentage,
+  ] = useMemo(() => {
+    if (graph === undefined) {
+      return ['0', '0', false, '0', '0', false, '0', '0'];
     }
 
-    const untrimmedTotal = BigInt(graph.untrimmedTotal);
-    const total = BigInt(graph.total);
+    const trimmed = BigInt(graph.trimmed);
 
-    const trimDifference = untrimmedTotal - total;
-    const trimmedPercentage = (total * BigInt(100)) / untrimmedTotal;
+    const rawTotal = total + filtered + trimmed;
+
+    // safeguard against division by zero
+    const rawTotalDivisor = rawTotal > 0 ? rawTotal : BigInt(1);
 
     return [
-      trimDifference > BigInt(0),
-      trimDifference,
-      trimmedPercentage.toString(),
       numberFormatter.format(total),
-      numberFormatter.format(untrimmedTotal),
+      numberFormatter.format(rawTotal),
+      trimmed > 0,
+      numberFormatter.format(trimmed),
+      numberFormatter.format((trimmed * BigInt(100)) / rawTotalDivisor),
+      filtered > 0,
+      numberFormatter.format(filtered),
+      numberFormatter.format((filtered * BigInt(100)) / rawTotalDivisor),
     ];
-  }, [graph]);
+  }, [filtered, graph, total]);
 
   useEffect(() => {
     if (setActionButtons === undefined) {
@@ -99,18 +116,11 @@ const ProfileIcicleGraph = ({
 
   if (graph === undefined) return <div>no data...</div>;
 
-  const total = graph.total;
-
-  if (parseFloat(total) === 0 && !loading) return <>Profile has no samples</>;
+  if (total === BigInt(0) && !loading) return <>Profile has no samples</>;
 
   return (
     <div className="relative">
       {compareMode && <DiffLegend />}
-      {isTrimmed ? (
-        <p className="my-2 text-sm">
-          Showing {formattedTotal}({trimmedPercentage}%) out of {formattedUntrimmedTotal} samples
-        </p>
-      ) : null}
       <div ref={ref}>
         <IcicleGraph
           width={dimensions?.width}
@@ -121,6 +131,24 @@ const ProfileIcicleGraph = ({
           navigateTo={navigateTo}
         />
       </div>
+      <p className="my-2 text-xs">
+        Showing {totalFormatted} {isFiltered || isTrimmed ? <span>of {rawFormatted} </span> : <></>}
+        samples.{' '}
+        {isFiltered ? (
+          <span>
+            Filtered {filteredFormatted} ({filteredPercentage}%) samples.&nbsp;
+          </span>
+        ) : (
+          <></>
+        )}
+        {isTrimmed ? (
+          <span>
+            Trimmed {trimmedFormatted} ({trimmedPercentage}%) too small samples.
+          </span>
+        ) : (
+          <></>
+        )}
+      </p>
     </div>
   );
 };

package/src/ProfileView/index.tsx

@@ -53,6 +53,8 @@ type NavigateFunction = (path: string, queryParams: any, options?: {replace?: bo
 export interface FlamegraphData {
   loading: boolean;
   data?: Flamegraph;
+  total?: bigint;
+  filtered?: bigint;
   error?: any;
 }
 
@@ -233,6 +235,8 @@ export const ProfileView = ({
               curPath={curPath}
               setNewCurPath={setNewCurPath}
               graph={flamegraphData.data}
+              total={flamegraphData?.total ?? BigInt(0)}
+              filtered={flamegraphData?.filtered ?? BigInt(0)}
               sampleUnit={sampleUnit}
               onContainerResize={onFlamegraphContainerResize}
               navigateTo={navigateTo}

package/src/ProfileViewWithData.tsx

@@ -128,6 +128,8 @@ export const ProfileViewWithData = ({
           flamegraphResponse?.report.oneofKind === 'flamegraph'
             ? flamegraphResponse?.report?.flamegraph
             : undefined,
+        total: BigInt(flamegraphResponse?.total ?? '0'),
+        filtered: BigInt(flamegraphResponse?.filtered ?? '0'),
         error: flamegraphError,
       }}
       topTableData={{