@parca/profile 0.16.142 → 0.16.144

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.144](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.143...@parca/profile@0.16.144) (2023-03-21)
+
+# 0.16.0 (2023-03-01)
+
+**Note:** Version bump only for package @parca/profile
+
+## [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

package/dist/Callgraph/index.js

@@ -28,8 +28,8 @@ import * as d3 from 'd3';
 import SVG from 'react-inlinesvg';
 import { MapInteractionCSS } from 'react-map-interaction';
 import { Button, useKeyDown, useURLState } from '@parca/components';
-import { getNewSpanColor } from '@parca/functions';
 import { selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector } from '@parca/store';
+import { getNewSpanColor } from '@parca/utilities';
 import GraphTooltip from '../GraphTooltip';
 var Callgraph = function (_a) {
     var data = _a.data, svgString = _a.svgString, sampleUnit = _a.sampleUnit, width = _a.width;

package/dist/GraphTooltip/index.js

@@ -38,8 +38,8 @@ import { pointer } from 'd3-selection';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { usePopper } from 'react-popper';
 import { useKeyDown } from '@parca/components';
-import { getLastItem, valueFormatter } from '@parca/functions';
 import { selectHoveringNode, useAppSelector } from '@parca/store';
+import { getLastItem, valueFormatter } from '@parca/utilities';
 import { hexifyAddress, truncateString, truncateStringReverse } from '../';
 import { ExpandOnHover } from './ExpandOnHoverValue';
 var NoData = function () {

package/dist/MatchersInput/index.js

@@ -26,8 +26,8 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import cx from 'classnames';
 import TextareaAutosize from 'react-textarea-autosize';
 import { useGrpcMetadata } from '@parca/components';
-import { sanitizeLabelValue } from '@parca/functions';
 import { Query } from '@parca/parser';
+import { sanitizeLabelValue } from '@parca/utilities';
 import SuggestionsList, { Suggestion, Suggestions } from './SuggestionsList';
 export var useLabelNames = function (client) {
     var _a = useState(true), loading = _a[0], setLoading = _a[1];

package/dist/MetricsGraph/MetricsTooltip/index.js

@@ -36,7 +36,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { usePopper } from 'react-popper';
 import { TextWithTooltip } from '@parca/components';
-import { formatDate, valueFormatter } from '@parca/functions';
+import { formatDate, valueFormatter } from '@parca/utilities';
 import { timeFormat } from '../../';
 var virtualElement = {
     getBoundingClientRect: function () {

package/dist/MetricsGraph/index.js

@@ -27,8 +27,8 @@ import * as d3 from 'd3';
 import { pointer } from 'd3-selection';
 import throttle from 'lodash.throttle';
 import { DateTimeRange, useKeyDown } from '@parca/components';
-import { useContainerDimensions } from '@parca/dynamicsize';
-import { formatDate, formatForTimespan, sanitizeHighlightedValues, valueFormatter, } from '@parca/functions';
+import { useContainerDimensions } from '@parca/hooks';
+import { formatDate, formatForTimespan, sanitizeHighlightedValues, valueFormatter, } from '@parca/utilities';
 import MetricsCircle from '../MetricsCircle';
 import MetricsSeries from '../MetricsSeries';
 import MetricsTooltip from './MetricsTooltip';

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
-import type { NavigateFunction } from '@parca/functions';
+import type { NavigateFunction } from '@parca/utilities';
 import { ProfileSelection } from '..';
 import { QuerySelection } from '../ProfileSelector';
 interface ProfileExplorerCompareProps {

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
-import type { NavigateFunction } from '@parca/functions';
+import type { NavigateFunction } from '@parca/utilities';
 import { ProfileSelection } from '..';
 import { QuerySelection } from '../ProfileSelector';
 interface ProfileExplorerSingleProps {

package/dist/ProfileExplorer/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
-import type { NavigateFunction } from '@parca/functions';
+import type { NavigateFunction } from '@parca/utilities';
 interface ProfileExplorerProps {
     queryClient: QueryServiceClient;
     queryParams: any;

package/dist/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { NavigateFunction } from '@parca/functions';
+import type { NavigateFunction } from '@parca/utilities';
 interface Props {
     navigateTo?: NavigateFunction;
     compareMode?: boolean;

package/dist/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.js

@@ -26,7 +26,7 @@ import { useMemo } from 'react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import { useURLState } from '@parca/components';
-import useUserPreference, { USER_PREFERENCES } from '@parca/functions/useUserPreference';
+import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
 import { EVERYTHING_ELSE, selectStackColors, useAppSelector } from '@parca/store';
 var ColorStackLegend = function (_a) {
     var navigateTo = _a.navigateTo, _b = _a.compareMode, compareMode = _b === void 0 ? false : _b;

package/dist/ProfileIcicleGraph/IcicleGraph/IcicleGraphNodes.js

@@ -26,8 +26,8 @@ import React, { useMemo } from 'react';
 import cx from 'classnames';
 import { scaleLinear } from 'd3-scale';
 import { useKeyDown } from '@parca/components';
-import { isSearchMatch } from '@parca/functions';
 import { selectBinaries, setHoveringNode, useAppDispatch, useAppSelector } from '@parca/store';
+import { isSearchMatch } from '@parca/utilities';
 import useNodeColor from './useNodeColor';
 import { nodeLabel } from './utils';
 export var RowHeight = 26;

package/dist/ProfileIcicleGraph/IcicleGraph/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Flamegraph } from '@parca/client';
-import { type NavigateFunction } from '@parca/functions';
+import { type NavigateFunction } from '@parca/utilities';
 interface IcicleGraphProps {
     graph: Flamegraph;
     sampleUnit: string;

package/dist/ProfileIcicleGraph/IcicleGraph/index.js

@@ -24,8 +24,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // limitations under the License.
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { scaleLinear } from 'd3-scale';
-import { selectQueryParam } from '@parca/functions';
 import { setHoveringNode, useAppDispatch } from '@parca/store';
+import { selectQueryParam } from '@parca/utilities';
 import GraphTooltip from '../../GraphTooltip';
 import ColorStackLegend from './ColorStackLegend';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';

package/dist/ProfileIcicleGraph/IcicleGraph/useColoredGraph.js

@@ -22,7 +22,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { useEffect, useMemo } from 'react';
-import useUserPreference, { USER_PREFERENCES } from '@parca/functions/useUserPreference';
+import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
 import { selectDarkMode, setFeatures, useAppDispatch, useAppSelector, } from '@parca/store';
 import { extractFeature } from './utils';
 var colorNodes = function (nodes, strings, mappings, locations, functions, features) {

package/dist/ProfileIcicleGraph/IcicleGraph/useNodeColor.js

@@ -11,8 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useMemo } from 'react';
-import { COLOR_PROFILES, diffColor } from '@parca/functions';
 import { EVERYTHING_ELSE, selectDarkMode, selectStackColors, useAppSelector } from '@parca/store';
+import { COLOR_PROFILES, diffColor } from '@parca/utilities';
 var useNodeColor = function (_a) {
     var data = _a.data, compareMode = _a.compareMode;
     var colors = useAppSelector(selectStackColors);

package/dist/ProfileIcicleGraph/IcicleGraph/utils.js

@@ -10,8 +10,8 @@
 // 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 { getLastItem } from '@parca/functions';
 import { EVERYTHING_ELSE, FEATURE_TYPES } from '@parca/store';
+import { getLastItem } from '@parca/utilities';
 import { hexifyAddress } from '../../utils';
 export var getBinaryName = function (node, mappings, locations, strings) {
     var _a, _b;

package/dist/ProfileIcicleGraph/index.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { Flamegraph } from '@parca/client';
-import { type NavigateFunction } from '@parca/functions';
+import { type NavigateFunction } from '@parca/utilities';
 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

@@ -24,13 +24,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // limitations under the License.
 import { useEffect, useMemo } from 'react';
 import { Button } from '@parca/components';
-import { useContainerDimensions } from '@parca/dynamicsize';
-import { selectQueryParam } from '@parca/functions';
+import { useContainerDimensions } from '@parca/hooks';
+import { selectQueryParam } from '@parca/utilities';
 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/ProfileMetricsGraph/index.js

@@ -61,8 +61,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useState } from 'react';
 import { Duration, Timestamp } from '@parca/client';
 import { useGrpcMetadata, useParcaContext } from '@parca/components';
-import { getStepDuration } from '@parca/functions';
 import { Query } from '@parca/parser';
+import { getStepDuration } from '@parca/utilities';
 import MetricsGraph from '../MetricsGraph';
 import useDelayedLoader from '../useDelayedLoader';
 export var useQueryRange = function (client, queryExpression, start, end) {

package/dist/ProfileSelector/index.js

@@ -24,9 +24,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // limitations under the License.
 import { useEffect, useState } from 'react';
 import { Button, ButtonGroup, Card, DateTimeRange, DateTimeRangePicker, useGrpcMetadata, } from '@parca/components';
-import { getStepDuration, getStepDurationInMilliseconds } from '@parca/functions';
 import { CloseIcon } from '@parca/icons';
 import { Query } from '@parca/parser';
+import { getStepDuration, getStepDurationInMilliseconds } from '@parca/utilities';
 import { MergedProfileSelection } from '..';
 import MatchersInput from '../MatchersInput/index';
 import ProfileMetricsGraph from '../ProfileMetricsGraph';

package/dist/ProfileSource.js

@@ -12,8 +12,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { ProfileDiffSelection_Mode, QueryRequest_Mode, QueryRequest_ReportType, Timestamp, } from '@parca/client';
-import { formatDate } from '@parca/functions';
 import { ProfileType, Query } from '@parca/parser';
+import { formatDate } from '@parca/utilities';
 export var timeFormat = "MMM d, 'at' h:mm:s a '(UTC)'";
 export var timeFormatShort = 'MMM d, h:mma';
 export function ParamsString(params) {

package/dist/ProfileView/FilterByFunctionButton.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { NavigateFunction } from '@parca/functions';
+import type { NavigateFunction } from '@parca/utilities';
 declare const FilterByFunctionButton: ({ navigateTo, }: {
     navigateTo: NavigateFunction | undefined;
 }) => JSX.Element;

package/dist/ProfileView/ViewSelector.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { NavigateFunction } from '@parca/functions';
+import type { NavigateFunction } from '@parca/utilities';
 interface Props {
     position: number;
     defaultValue: string;

package/dist/ProfileView/ViewSelector.js

@@ -23,7 +23,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Select, useURLState } from '@parca/components';
-import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
+import { useUIFeatureFlag } from '@parca/hooks';
 var ViewSelector = function (_a) {
     var defaultValue = _a.defaultValue, navigateTo = _a.navigateTo, position = _a.position, placeholderText = _a.placeholderText, _b = _a.primary, primary = _b === void 0 ? false : _b, _c = _a.addView, addView = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
     var callgraphEnabled = useUIFeatureFlag('callgraph')[0];

package/dist/ProfileView/VisualizationPanel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
-import type { NavigateFunction } from '@parca/functions';
+import type { NavigateFunction } from '@parca/utilities';
 interface Props {
     dashboardItem: string;
     index: number;

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

@@ -74,9 +74,9 @@ import { scaleLinear } from 'd3';
 import graphviz from 'graphviz-wasm';
 import { DragDropContext, Draggable, Droppable, } from 'react-beautiful-dnd';
 import { Button, Card, ConditionalWrapper, KeyDownProvider, useParcaContext, useURLState, } from '@parca/components';
-import { useContainerDimensions } from '@parca/dynamicsize';
-import { getNewSpanColor } from '@parca/functions';
+import { useContainerDimensions } from '@parca/hooks';
 import { selectDarkMode, useAppSelector } from '@parca/store';
+import { getNewSpanColor } from '@parca/utilities';
 import { Callgraph } from '../';
 import { jsonToDot } from '../Callgraph/utils';
 import ProfileIcicleGraph from '../ProfileIcicleGraph';
@@ -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.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
-import { type NavigateFunction } from '@parca/functions';
+import { type NavigateFunction } from '@parca/utilities';
 import { ProfileSource } from './ProfileSource';
 interface ProfileViewWithDataProps {
     queryClient: QueryServiceClient;

package/dist/ProfileViewWithData.js

@@ -50,17 +50,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { QueryRequest_ReportType } from '@parca/client';
 import { useGrpcMetadata, useParcaContext, useURLState } from '@parca/components';
-import { saveAsBlob } from '@parca/functions';
-import useUserPreference, { USER_PREFERENCES } from '@parca/functions/useUserPreference';
+import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
+import { saveAsBlob } from '@parca/utilities';
 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/dist/TopTable/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Top, TopNodeMeta } from '@parca/client';
-import { type NavigateFunction } from '@parca/functions';
+import { type NavigateFunction } from '@parca/utilities';
 interface TopTableProps {
     loading: boolean;
     data?: Top;

package/dist/TopTable/index.js

@@ -25,7 +25,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { createColumnHelper } from '@tanstack/react-table';
 import { Button, Table, useURLState } from '@parca/components';
-import { getLastItem, isSearchMatch, parseParams, valueFormatter, } from '@parca/functions';
+import { getLastItem, isSearchMatch, parseParams, valueFormatter, } from '@parca/utilities';
 import { hexifyAddress } from '../utils';
 export var RowLabel = function (meta) {
     var _a, _b, _c, _d, _e, _f;

package/dist/components/DiffLegend.js

@@ -25,8 +25,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useState } from 'react';
 import { Popover, Transition } from '@headlessui/react';
 import { usePopper } from 'react-popper';
-import { getIncreasedSpanColor, getNewSpanColor, getReducedSpanColor } from '@parca/functions';
 import { selectDarkMode, useAppSelector } from '@parca/store';
+import { getIncreasedSpanColor, getNewSpanColor, getReducedSpanColor } from '@parca/utilities';
 var transparencyValues = [-100, -80, -60, -40, -20, 0, 20, 40, 60, 80, 100];
 var DiffLegendBar = function (_a) {
     var onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.142",
+  "version": "0.16.144",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.67",
-    "@parca/components": "^0.16.116",
+    "@parca/client": "^0.16.68",
+    "@parca/components": "^0.16.118",
     "@parca/dynamicsize": "^0.16.54",
-    "@parca/functions": "^0.16.68",
+    "@parca/functions": "^0.16.69",
+    "@parca/hooks": "^0.0.2",
     "@parca/parser": "^0.16.55",
-    "@parca/store": "^0.16.66",
+    "@parca/store": "^0.16.68",
+    "@parca/utilities": "^0.0.2",
     "@types/react-beautiful-dnd": "^13.1.3",
     "d3": "7.8.2",
     "d3-scale": "^4.0.2",
@@ -45,5 +47,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "a1e44da90997207f78785fa433d9f6e5a9d2eac3"
+  "gitHead": "12ac7e9f6767020015df495897092340d4a8bb81"
 }

package/src/Callgraph/index.tsx

@@ -20,8 +20,8 @@ import {MapInteractionCSS} from 'react-map-interaction';
 
 import {CallgraphEdge, Callgraph as CallgraphType} from '@parca/client';
 import {Button, useKeyDown, useURLState} from '@parca/components';
-import {getNewSpanColor} from '@parca/functions';
 import {selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector} from '@parca/store';
+import {getNewSpanColor} from '@parca/utilities';
 
 import GraphTooltip from '../GraphTooltip';
 

package/src/GraphTooltip/index.tsx

@@ -30,8 +30,8 @@ import {
   Function as ParcaFunction,
 } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 import {useKeyDown} from '@parca/components';
-import {getLastItem, valueFormatter} from '@parca/functions';
 import {selectHoveringNode, useAppSelector} from '@parca/store';
+import {getLastItem, valueFormatter} from '@parca/utilities';
 
 import {hexifyAddress, truncateString, truncateStringReverse} from '../';
 import {ExpandOnHover} from './ExpandOnHoverValue';

package/src/MatchersInput/index.tsx

@@ -18,8 +18,8 @@ import TextareaAutosize from 'react-textarea-autosize';
 
 import {LabelsResponse, QueryServiceClient} from '@parca/client';
 import {useGrpcMetadata} from '@parca/components';
-import {sanitizeLabelValue} from '@parca/functions';
 import {Query} from '@parca/parser';
+import {sanitizeLabelValue} from '@parca/utilities';
 
 import SuggestionsList, {Suggestion, Suggestions} from './SuggestionsList';
 

package/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -18,7 +18,7 @@ import {usePopper} from 'react-popper';
 
 import {Label} from '@parca/client';
 import {TextWithTooltip} from '@parca/components';
-import {formatDate, valueFormatter} from '@parca/functions';
+import {formatDate, valueFormatter} from '@parca/utilities';
 
 import {HighlightedSeries} from '../';
 import {timeFormat} from '../../';

package/src/MetricsGraph/index.tsx

@@ -19,13 +19,13 @@ import throttle from 'lodash.throttle';
 
 import {Label, MetricsSample, MetricsSeries as MetricsSeriesPb} from '@parca/client';
 import {DateTimeRange, useKeyDown} from '@parca/components';
-import {useContainerDimensions} from '@parca/dynamicsize';
+import {useContainerDimensions} from '@parca/hooks';
 import {
   formatDate,
   formatForTimespan,
   sanitizeHighlightedValues,
   valueFormatter,
-} from '@parca/functions';
+} from '@parca/utilities';
 
 import {MergedProfileSelection} from '..';
 import MetricsCircle from '../MetricsCircle';

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -12,8 +12,8 @@
 // limitations under the License.
 
 import {QueryServiceClient} from '@parca/client';
-import type {NavigateFunction} from '@parca/functions';
 import {Query} from '@parca/parser';
+import type {NavigateFunction} from '@parca/utilities';
 
 import {ProfileDiffSource, ProfileSelection, ProfileViewWithData} from '..';
 import ProfileSelector, {QuerySelection} from '../ProfileSelector';

package/src/ProfileExplorer/ProfileExplorerSingle.tsx

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import {QueryServiceClient} from '@parca/client';
-import type {NavigateFunction} from '@parca/functions';
+import type {NavigateFunction} from '@parca/utilities';
 
 import {ProfileSelection, ProfileViewWithData} from '..';
 import ProfileSelector, {QuerySelection} from '../ProfileSelector';

package/src/ProfileExplorer/index.tsx

@@ -17,8 +17,8 @@ import {Provider} from 'react-redux';
 
 import {QueryServiceClient} from '@parca/client';
 import {DateTimeRange, KeyDownProvider, useParcaContext} from '@parca/components';
-import type {NavigateFunction} from '@parca/functions';
 import {store} from '@parca/store';
+import type {NavigateFunction} from '@parca/utilities';
 
 import {ProfileSelection, ProfileSelectionFromParams, SuffixParams} from '..';
 import {QuerySelection, useProfileTypes} from '../ProfileSelector';

package/src/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.tsx

@@ -17,9 +17,9 @@ import {Icon} from '@iconify/react';
 import cx from 'classnames';
 
 import {useURLState} from '@parca/components';
-import type {NavigateFunction} from '@parca/functions';
-import useUserPreference, {USER_PREFERENCES} from '@parca/functions/useUserPreference';
+import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 import {EVERYTHING_ELSE, selectStackColors, useAppSelector} from '@parca/store';
+import type {NavigateFunction} from '@parca/utilities';
 
 interface Props {
   navigateTo?: NavigateFunction;

package/src/ProfileIcicleGraph/IcicleGraph/IcicleGraphNodes.tsx

@@ -23,8 +23,8 @@ import {
   Function as ParcaFunction,
 } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 import {useKeyDown} from '@parca/components';
-import {isSearchMatch} from '@parca/functions';
 import {selectBinaries, setHoveringNode, useAppDispatch, useAppSelector} from '@parca/store';
+import {isSearchMatch} from '@parca/utilities';
 
 import useNodeColor from './useNodeColor';
 import {nodeLabel} from './utils';

package/src/ProfileIcicleGraph/IcicleGraph/index.tsx

@@ -16,8 +16,8 @@ import {memo, useEffect, useMemo, useRef, useState} from 'react';
 import {scaleLinear} from 'd3-scale';
 
 import {Flamegraph} from '@parca/client';
-import {selectQueryParam, type NavigateFunction} from '@parca/functions';
 import {setHoveringNode, useAppDispatch} from '@parca/store';
+import {selectQueryParam, type NavigateFunction} from '@parca/utilities';
 
 import GraphTooltip from '../../GraphTooltip';
 import ColorStackLegend from './ColorStackLegend';

package/src/ProfileIcicleGraph/IcicleGraph/useColoredGraph.ts

@@ -19,8 +19,7 @@ import {
   Mapping,
   Function as ParcaFunction,
 } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
-import type {ColorProfileName} from '@parca/functions';
-import useUserPreference, {USER_PREFERENCES} from '@parca/functions/useUserPreference';
+import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 import {
   selectDarkMode,
   setFeatures,
@@ -29,6 +28,7 @@ import {
   type FeatureType,
   type FeaturesMap,
 } from '@parca/store';
+import type {ColorProfileName} from '@parca/utilities';
 
 import {extractFeature} from './utils';
 

package/src/ProfileIcicleGraph/IcicleGraph/useNodeColor.ts

@@ -13,8 +13,8 @@
 
 import {useMemo} from 'react';
 
-import {COLOR_PROFILES, diffColor} from '@parca/functions';
 import {EVERYTHING_ELSE, selectDarkMode, selectStackColors, useAppSelector} from '@parca/store';
+import {COLOR_PROFILES, diffColor} from '@parca/utilities';
 
 import type {ColoredFlamegraphNode} from './useColoredGraph';
 

package/src/ProfileIcicleGraph/IcicleGraph/utils.ts

@@ -17,8 +17,8 @@ import {
   Mapping,
   Function as ParcaFunction,
 } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
-import {getLastItem} from '@parca/functions';
 import {EVERYTHING_ELSE, FEATURE_TYPES, type Feature} from '@parca/store';
+import {getLastItem} from '@parca/utilities';
 
 import {hexifyAddress} from '../../utils';
 

package/src/ProfileIcicleGraph/index.tsx

@@ -15,8 +15,8 @@ import {useEffect, useMemo} from 'react';
 
 import {Flamegraph} from '@parca/client';
 import {Button} from '@parca/components';
-import {useContainerDimensions} from '@parca/dynamicsize';
-import {selectQueryParam, type NavigateFunction} from '@parca/functions';
+import {useContainerDimensions} from '@parca/hooks';
+import {selectQueryParam, type NavigateFunction} from '@parca/utilities';
 
 import DiffLegend from '../components/DiffLegend';
 import {IcicleGraph} from './IcicleGraph';
@@ -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/ProfileMetricsGraph/index.tsx

@@ -17,8 +17,8 @@ import {RpcError} from '@protobuf-ts/runtime-rpc';
 
 import {Duration, Label, QueryRangeResponse, QueryServiceClient, Timestamp} from '@parca/client';
 import {DateTimeRange, useGrpcMetadata, useParcaContext} from '@parca/components';
-import {getStepDuration} from '@parca/functions';
 import {Query} from '@parca/parser';
+import {getStepDuration} from '@parca/utilities';
 
 import {MergedProfileSelection, ProfileSelection} from '..';
 import MetricsGraph from '../MetricsGraph';

package/src/ProfileSelector/index.tsx

@@ -24,9 +24,9 @@ import {
   DateTimeRangePicker,
   useGrpcMetadata,
 } from '@parca/components';
-import {getStepDuration, getStepDurationInMilliseconds} from '@parca/functions';
 import {CloseIcon} from '@parca/icons';
 import {Query} from '@parca/parser';
+import {getStepDuration, getStepDurationInMilliseconds} from '@parca/utilities';
 
 import {MergedProfileSelection, ProfileSelection} from '..';
 import MatchersInput from '../MatchersInput/index';

package/src/ProfileSource.tsx

@@ -20,8 +20,8 @@ import {
   QueryRequest_ReportType,
   Timestamp,
 } from '@parca/client';
-import {formatDate} from '@parca/functions';
 import {Matcher, ProfileType, Query} from '@parca/parser';
+import {formatDate} from '@parca/utilities';
 
 export interface ProfileSource {
   QueryRequest: () => QueryRequest;

package/src/ProfileView/FilterByFunctionButton.tsx

@@ -16,7 +16,7 @@ import {useCallback, useMemo, useState} from 'react';
 import {Icon} from '@iconify/react';
 
 import {Input, useURLState} from '@parca/components';
-import type {NavigateFunction} from '@parca/functions';
+import type {NavigateFunction} from '@parca/utilities';
 
 const FilterByFunctionButton = ({
   navigateTo,

package/src/ProfileView/ViewSelector.tsx

@@ -12,8 +12,8 @@
 // limitations under the License.
 
 import {Select, useURLState, type SelectElement} from '@parca/components';
-import type {NavigateFunction} from '@parca/functions';
-import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
+import {useUIFeatureFlag} from '@parca/hooks';
+import type {NavigateFunction} from '@parca/utilities';
 
 interface Props {
   position: number;

package/src/ProfileView/VisualizationPanel.tsx

@@ -17,8 +17,8 @@ import {Icon} from '@iconify/react';
 import cx from 'classnames';
 import type {DraggableProvidedDragHandleProps} from 'react-beautiful-dnd';
 
-import type {NavigateFunction} from '@parca/functions';
 import {CloseIcon} from '@parca/icons';
+import type {NavigateFunction} from '@parca/utilities';
 
 import ViewSelector from './ViewSelector';
 

package/src/ProfileView/index.tsx

@@ -33,9 +33,9 @@ import {
   useParcaContext,
   useURLState,
 } from '@parca/components';
-import {useContainerDimensions} from '@parca/dynamicsize';
-import {getNewSpanColor} from '@parca/functions';
+import {useContainerDimensions} from '@parca/hooks';
 import {selectDarkMode, useAppSelector} from '@parca/store';
+import {getNewSpanColor} from '@parca/utilities';
 
 import {Callgraph} from '../';
 import {jsonToDot} from '../Callgraph/utils';
@@ -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

@@ -15,8 +15,8 @@ import {useEffect, useState} from 'react';
 
 import {QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
 import {useGrpcMetadata, useParcaContext, useURLState} from '@parca/components';
-import {saveAsBlob, type NavigateFunction} from '@parca/functions';
-import useUserPreference, {USER_PREFERENCES} from '@parca/functions/useUserPreference';
+import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
+import {saveAsBlob, type NavigateFunction} from '@parca/utilities';
 
 import {ProfileSource} from './ProfileSource';
 import {ProfileView} from './ProfileView';
@@ -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={{

package/src/TopTable/index.tsx

@@ -23,7 +23,7 @@ import {
   parseParams,
   valueFormatter,
   type NavigateFunction,
-} from '@parca/functions';
+} from '@parca/utilities';
 
 import {hexifyAddress} from '../utils';
 

package/src/components/DiffLegend.tsx

@@ -16,8 +16,8 @@ import {Fragment, useState} from 'react';
 import {Popover, Transition} from '@headlessui/react';
 import {usePopper} from 'react-popper';
 
-import {getIncreasedSpanColor, getNewSpanColor, getReducedSpanColor} from '@parca/functions';
 import {selectDarkMode, useAppSelector} from '@parca/store';
+import {getIncreasedSpanColor, getNewSpanColor, getReducedSpanColor} from '@parca/utilities';
 
 const transparencyValues = [-100, -80, -60, -40, -20, 0, 20, 40, 60, 80, 100];