@parca/profile 0.16.143 → 0.16.145

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

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,6 +1,6 @@
 /// <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;

package/dist/ProfileIcicleGraph/index.js

@@ -24,8 +24,8 @@ 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');
@@ -55,10 +55,9 @@ var ProfileIcicleGraph = function (_a) {
             numberFormatter.format(trimmed),
             numberFormatter.format((trimmed * BigInt(100)) / rawTotalDivisor),
             filtered > 0,
-            numberFormatter.format(filtered),
-            numberFormatter.format((filtered * BigInt(100)) / rawTotalDivisor),
+            numberFormatter.format((total * BigInt(100)) / rawTotalDivisor),
         ];
-    }, [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];
+    }, [filtered, graph, total]), totalFormatted = _c[0], rawFormatted = _c[1], isTrimmed = _c[2], trimmedFormatted = _c[3], trimmedPercentage = _c[4], isFiltered = _c[5], filteredPercentage = _c[6];
     useEffect(function () {
         if (setActionButtons === undefined) {
             return;
@@ -69,6 +68,9 @@ var ProfileIcicleGraph = function (_a) {
         return _jsx("div", { children: "no data..." });
     if (total === BigInt(0) && !loading)
         return _jsx(_Fragment, { children: "Profile has no samples" });
-    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, {}))] }))] })));
+    if (isTrimmed) {
+        console.info("Trimmed ".concat(trimmedFormatted, " (").concat(trimmedPercentage, "%) too small values."));
+    }
+    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 ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", rawFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] }))] })));
 };
 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.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';

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,8 +50,8 @@ 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';

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.143",
+  "version": "0.16.145",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.68",
-    "@parca/components": "^0.16.117",
+    "@parca/client": "^0.16.69",
+    "@parca/components": "^0.16.119",
     "@parca/dynamicsize": "^0.16.54",
-    "@parca/functions": "^0.16.69",
+    "@parca/functions": "^0.16.70",
+    "@parca/hooks": "^0.0.3",
     "@parca/parser": "^0.16.55",
-    "@parca/store": "^0.16.67",
+    "@parca/store": "^0.16.69",
+    "@parca/utilities": "^0.0.3",
     "@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": "6bca71c40674ca2ee753adca4c9a719987a2f770"
+  "gitHead": "472dedb7be9a8b5eaee182d4fe42bf0ab2cb03d0"
 }

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';
@@ -69,7 +69,6 @@ const ProfileIcicleGraph = ({
     trimmedFormatted,
     trimmedPercentage,
     isFiltered,
-    filteredFormatted,
     filteredPercentage,
   ] = useMemo(() => {
     if (graph === undefined) {
@@ -90,8 +89,7 @@ const ProfileIcicleGraph = ({
       numberFormatter.format(trimmed),
       numberFormatter.format((trimmed * BigInt(100)) / rawTotalDivisor),
       filtered > 0,
-      numberFormatter.format(filtered),
-      numberFormatter.format((filtered * BigInt(100)) / rawTotalDivisor),
+      numberFormatter.format((total * BigInt(100)) / rawTotalDivisor),
     ];
   }, [filtered, graph, total]);
 
@@ -118,6 +116,10 @@ const ProfileIcicleGraph = ({
 
   if (total === BigInt(0) && !loading) return <>Profile has no samples</>;
 
+  if (isTrimmed) {
+    console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
+  }
+
   return (
     <div className="relative">
       {compareMode && <DiffLegend />}
@@ -132,22 +134,15 @@ const ProfileIcicleGraph = ({
         />
       </div>
       <p className="my-2 text-xs">
-        Showing {totalFormatted} {isFiltered || isTrimmed ? <span>of {rawFormatted} </span> : <></>}
-        samples.{' '}
+        Showing {totalFormatted}{' '}
         {isFiltered ? (
           <span>
-            Filtered {filteredFormatted} ({filteredPercentage}%) samples.&nbsp;
-          </span>
-        ) : (
-          <></>
-        )}
-        {isTrimmed ? (
-          <span>
-            Trimmed {trimmedFormatted} ({trimmedPercentage}%) too small samples.
+            ({filteredPercentage}%) filtered of {rawFormatted}{' '}
           </span>
         ) : (
           <></>
         )}
+        values.{' '}
       </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';

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';

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];