@parca/profile 0.16.116 → 0.16.118

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.118](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.117...@parca/profile@0.16.118) (2023-02-16)
+
+### Reverts
+
+- Revert "[pre-commit.ci lite] apply automatic fixes" ([8982724](https://github.com/parca-dev/parca/commit/8982724b9adc0630bcf2c15f9ebca31ba69b0cb6))
+
+## 0.16.117 (2023-02-16)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.116 (2023-02-15)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.js

@@ -58,16 +58,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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 { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
-import graphviz from 'graphviz-wasm';
 import * as d3 from 'd3';
-import { Stage, Layer, Rect, Arrow, Text, Label } from 'react-konva';
+import graphviz from 'graphviz-wasm';
+import { Arrow, Label, Layer, Rect, Stage, Text } from 'react-konva';
 import { Button, useURLState } from '@parca/components';
-import { jsonToDot, getCurvePoints } from './utils';
 import { isSearchMatch, selectQueryParam } from '@parca/functions';
 import Tooltip from '../GraphTooltip';
 import { DEFAULT_NODE_HEIGHT, GRAPH_MARGIN } from './constants';
+import { getCurvePoints, jsonToDot } from './utils';
 var Node = function (_a) {
     var node = _a.node, hoveredNode = _a.hoveredNode, setHoveredNode = _a.setHoveredNode, isCurrentSearchMatch = _a.isCurrentSearchMatch;
     var id = node.data.id, x = node.x, y = node.y, color = node.color, functionName = node.functionName, widthString = node.width, heightString = node.height;

package/dist/Callgraph/utils.d.ts

@@ -1,4 +1,4 @@
-import { CallgraphNode, CallgraphEdge } from '@parca/client';
+import { CallgraphEdge, CallgraphNode } from '@parca/client';
 export declare const pixelsToInches: (pixels: number) => number;
 export declare const getCurvePoints: ({ pos, xScale, yScale, source, target, offset, isSelfLoop, }: {
     pos: string;

package/dist/GraphTooltip/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CallgraphNode, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode } from '@parca/client';
-import { Function as ParcaFunction, Location, Mapping } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
+import { Location, Mapping, Function as ParcaFunction } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface GraphTooltipProps {
     x: number;
     y: number;

package/dist/GraphTooltip/index.js

@@ -33,12 +33,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
+import { useEffect, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { useState, useEffect } from 'react';
 import { usePopper } from 'react-popper';
+import { useKeyDown } from '@parca/components';
 import { getLastItem, valueFormatter } from '@parca/functions';
 import { hexifyAddress, truncateString } from '../';
-import { useKeyDown } from '@parca/components';
 var virtualElement = {
     getBoundingClientRect: function () {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions

package/dist/MatchersInput/SuggestionItem.js

@@ -22,8 +22,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import cx from 'classnames';
 import { useEffect, useRef } from 'react';
+import cx from 'classnames';
 var SuggestionItem = function (_a) {
     var isHighlighted = _a.isHighlighted, onHighlight = _a.onHighlight, onApplySuggestion = _a.onApplySuggestion, onResetHighlight = _a.onResetHighlight, value = _a.value;
     var ref = useRef(null);

package/dist/MatchersInput/SuggestionsList.js

@@ -24,9 +24,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // limitations under the License.
 import { Fragment, useCallback, useEffect, useState } from 'react';
 import { Transition } from '@headlessui/react';
-import SuggestionItem from './SuggestionItem';
 import { usePopper } from 'react-popper';
 import { useParcaContext } from '@parca/components';
+import SuggestionItem from './SuggestionItem';
 var Suggestion = /** @class */ (function () {
     function Suggestion(type, typeahead, value) {
         this.type = type;

package/dist/MatchersInput/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { Query } from '@parca/parser';
 import { LabelsResponse, QueryServiceClient } from '@parca/client';
+import { Query } from '@parca/parser';
 interface MatchersInputProps {
     queryClient: QueryServiceClient;
     setMatchersString: (arg: string) => void;

package/dist/MatchersInput/index.js

@@ -22,9 +22,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useState, useEffect, useMemo, useRef } from 'react';
-import TextareaAutosize from 'react-textarea-autosize';
+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';

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 { valueFormatter, formatDate } from '@parca/functions';
+import { formatDate, valueFormatter } from '@parca/functions';
 import { timeFormat } from '../../';
 var virtualElement = {
     getBoundingClientRect: function () {

package/dist/MetricsGraph/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { Label, MetricsSeries as MetricsSeriesPb } from '@parca/client';
 import { DateTimeRange } from '@parca/components';
-import { MetricsSeries as MetricsSeriesPb, Label } from '@parca/client';
 import { MergedProfileSelection } from '..';
 interface Props {
     data: MetricsSeriesPb[];

package/dist/MetricsGraph/index.js

@@ -28,10 +28,9 @@ import { pointer } from 'd3-selection';
 import throttle from 'lodash.throttle';
 import { DateTimeRange, useKeyDown } from '@parca/components';
 import { useContainerDimensions } from '@parca/dynamicsize';
-import { formatForTimespan } from '@parca/functions';
-import { valueFormatter, formatDate, sanitizeHighlightedValues } from '@parca/functions';
-import MetricsSeries from '../MetricsSeries';
+import { formatDate, formatForTimespan, sanitizeHighlightedValues, valueFormatter, } from '@parca/functions';
 import MetricsCircle from '../MetricsCircle';
+import MetricsSeries from '../MetricsSeries';
 import MetricsTooltip from './MetricsTooltip';
 var MetricsGraph = function (_a) {
     var data = _a.data, from = _a.from, to = _a.to, profile = _a.profile, onSampleClick = _a.onSampleClick, onLabelClick = _a.onLabelClick, setTimeRange = _a.setTimeRange, sampleUnit = _a.sampleUnit;

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

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

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

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

package/dist/ProfileExplorer/ProfileExplorerSingle.js

@@ -10,9 +10,9 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyDownProvider } from '@parca/components';
 import { ProfileViewWithData } from '..';
 import ProfileSelector from '../ProfileSelector';
-import { KeyDownProvider } from '@parca/components';
 var ProfileExplorerSingle = function (_a) {
     var queryClient = _a.queryClient, query = _a.query, selectQuery = _a.selectQuery, selectProfile = _a.selectProfile, profile = _a.profile, compareProfile = _a.compareProfile, navigateTo = _a.navigateTo;
     return (_jsxs(KeyDownProvider, { children: [_jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", { children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: query, selectQuery: selectQuery, selectProfile: selectProfile, closeProfile: function () { }, profileSelection: profile, comparing: false, onCompareProfile: compareProfile, enforcedProfileName: '' }) }) })), _jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", { children: profile != null ? (_jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: profile.ProfileSource(), navigateTo: navigateTo })) : (_jsx(_Fragment, {})) }) }))] }));

package/dist/ProfileExplorer/index.js

@@ -23,13 +23,13 @@ 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 { useEffect, useState } from 'react';
-import { useProfileTypes } from '../ProfileSelector';
-import { ProfileSelectionFromParams, SuffixParams } from '..';
-import ProfileExplorerSingle from './ProfileExplorerSingle';
-import ProfileExplorerCompare from './ProfileExplorerCompare';
-import { store } from '@parca/store';
 import { Provider } from 'react-redux';
 import { DateTimeRange, useParcaContext } from '@parca/components';
+import { store } from '@parca/store';
+import { ProfileSelectionFromParams, SuffixParams } from '..';
+import { useProfileTypes } from '../ProfileSelector';
+import ProfileExplorerCompare from './ProfileExplorerCompare';
+import ProfileExplorerSingle from './ProfileExplorerSingle';
 var getExpressionAsAString = function (expression) {
     var x = Array.isArray(expression) ? expression.join() : expression;
     return x;

package/dist/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.js

@@ -22,12 +22,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // 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 cx from 'classnames';
+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 { EVERYTHING_ELSE, selectStackColors, useAppSelector } from '@parca/store';
-import { useMemo } from 'react';
-import { useURLState } from '@parca/components';
 var ColorStackLegend = function (_a) {
     var navigateTo = _a.navigateTo, _b = _a.compareMode, compareMode = _b === void 0 ? false : _b;
     var colorProfileName = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key)[0];

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Mapping, Function as ParcaFunction, Location } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 import { FlamegraphNode, FlamegraphRootNode } from '@parca/client';
+import { Location, Mapping, Function as ParcaFunction } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 export declare const RowHeight = 26;
 interface IcicleGraphNodesProps {
     data: FlamegraphNode[];

package/dist/ProfileIcicleGraph/IcicleGraph/IcicleGraphNodes.js

@@ -25,11 +25,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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 { useAppSelector, selectBinaries } from '@parca/store';
-import { nodeLabel } from './utils';
+import { selectBinaries, useAppSelector } from '@parca/store';
 import useNodeColor from './useNodeColor';
-import { useKeyDown } from '@parca/components';
+import { nodeLabel } from './utils';
 export var RowHeight = 26;
 export var IcicleGraphNodes = React.memo(function IcicleGraphNodes(_a) {
     var data = _a.data, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, x = _a.x, y = _a.y, xScale = _a.xScale, total = _a.total, totalWidth = _a.totalWidth, level = _a.level, setHoveringNode = _a.setHoveringNode, path = _a.path, setCurPath = _a.setCurPath, curPath = _a.curPath, searchString = _a.searchString, compareMode = _a.compareMode;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Flamegraph } from '@parca/client';
-import type { NavigateFunction } from '@parca/functions';
+import { type NavigateFunction } from '@parca/functions';
 interface IcicleGraphProps {
     graph: Flamegraph;
     sampleUnit: string;

package/dist/ProfileIcicleGraph/IcicleGraph/index.js

@@ -24,16 +24,16 @@ 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 cx from 'classnames';
-import { throttle } from 'lodash';
-import { pointer } from 'd3-selection';
 import { scaleLinear } from 'd3-scale';
-import GraphTooltip from '../../GraphTooltip';
+import { pointer } from 'd3-selection';
+import { throttle } from 'lodash';
 import { Button, useURLState } from '@parca/components';
-import { IcicleNode, RowHeight } from './IcicleGraphNodes';
-import useColoredGraph from './useColoredGraph';
 import { selectQueryParam } from '@parca/functions';
-import ColorStackLegend from './ColorStackLegend';
 import useUserPreference, { USER_PREFERENCES } from '@parca/functions/useUserPreference';
+import GraphTooltip from '../../GraphTooltip';
+import ColorStackLegend from './ColorStackLegend';
+import { IcicleNode, RowHeight } from './IcicleGraphNodes';
+import useColoredGraph from './useColoredGraph';
 export var IcicleGraph = memo(function IcicleGraph(_a) {
     var _b;
     var graph = _a.graph, width = _a.width, setCurPath = _a.setCurPath, curPath = _a.curPath, sampleUnit = _a.sampleUnit, navigateTo = _a.navigateTo, _c = _a.isTrimmed, isTrimmed = _c === void 0 ? false : _c;
@@ -74,7 +74,7 @@ export var IcicleGraph = memo(function IcicleGraph(_a) {
     var isColorStackLegendVisible = colorProfileName !== 'default';
     return (_jsxs("div", __assign({ onMouseLeave: function () { return setHoveringNode(undefined); } }, { children: [_jsx(ColorStackLegend, { navigateTo: navigateTo, compareMode: compareMode }), _jsx(GraphTooltip, { unit: sampleUnit, total: total, x: pos[0], y: pos[1], hoveringNode: hoveringNode, contextElement: svg.current, strings: coloredGraph.stringTable, mappings: coloredGraph.mapping, locations: coloredGraph.locations, functions: coloredGraph.function }), _jsx("div", __assign({ className: cx('flex justify-start absolute', {
                     'top-[-48px]': dashboardItems.length <= 1 && !isTrimmed && !isColorStackLegendVisible,
-                    'top-[-69px]': dashboardItems.length <= 1 && !isTrimmed,
+                    'top-[-69px]': dashboardItems.length <= 1 && !isTrimmed && isColorStackLegendVisible,
                     'top-[-54px]': dashboardItems.length <= 1 && isTrimmed && isColorStackLegendVisible,
                     'top-[-54px] ': dashboardItems.length <= 1 && isTrimmed && !isColorStackLegendVisible,
                     'top-[-54px] left-[25px]': dashboardItems.length > 1 && isTrimmed && isColorStackLegendVisible,

package/dist/ProfileIcicleGraph/IcicleGraph/useColoredGraph.js

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

package/dist/ProfileIcicleGraph/IcicleGraph/useNodeColor.js

@@ -10,9 +10,9 @@
 // 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 { useMemo } from 'react';
 import { diffColor } from '@parca/functions';
 import { EVERYTHING_ELSE, selectDarkMode, selectStackColors, useAppSelector } from '@parca/store';
-import { useMemo } from 'react';
 var useNodeColor = function (_a) {
     var data = _a.data, compareMode = _a.compareMode;
     var colors = useAppSelector(selectStackColors);

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

@@ -1,6 +1,6 @@
 import { FlamegraphNode } from '@parca/client';
-import { Mapping, Function as ParcaFunction, Location } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
-import type { Feature } from '@parca/store';
+import { Location, Mapping, Function as ParcaFunction } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
+import { type Feature } from '@parca/store';
 export declare const getBinaryName: (node: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[]) => string | undefined;
 export declare function nodeLabel(node: FlamegraphNode, strings: string[], mappings: Mapping[], locations: Location[], functions: ParcaFunction[], showBinaryName: boolean): string;
 export declare const extractFeature: (data: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[], functions: ParcaFunction[]) => Feature;

package/dist/ProfileIcicleGraph/IcicleGraph/utils.js

@@ -11,8 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { getLastItem } from '@parca/functions';
-import { hexifyAddress } from '../../utils';
 import { EVERYTHING_ELSE, FEATURE_TYPES } from '@parca/store';
+import { hexifyAddress } from '../../utils';
 export var getBinaryName = function (node, mappings, locations, strings) {
     var _a, _b;
     if (((_a = node.meta) === null || _a === void 0 ? void 0 : _a.locationIndex) === undefined || ((_b = node.meta) === null || _b === void 0 ? void 0 : _b.locationIndex) === 0) {

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/functions';
 export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
     width?: number;

package/dist/ProfileIcicleGraph/index.js

@@ -10,11 +10,23 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useEffect, useMemo } from 'react';
 import { useContainerDimensions } from '@parca/dynamicsize';
+import { selectQueryParam } from '@parca/functions';
 import DiffLegend from '../components/DiffLegend';
 import IcicleGraph from './IcicleGraph';
-import { selectQueryParam } from '@parca/functions';
-import { useEffect, useMemo } from 'react';
 var numberFormatter = new Intl.NumberFormat('en-US');
 var ProfileIcicleGraph = function (_a) {
     var graph = _a.graph, curPath = _a.curPath, setNewCurPath = _a.setNewCurPath, sampleUnit = _a.sampleUnit, onContainerResize = _a.onContainerResize, navigateTo = _a.navigateTo, loading = _a.loading;

package/dist/ProfileMetricsGraph/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ProfileSelection } from '..';
-import { QueryServiceClient, QueryRangeResponse, Label } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
+import { Label, QueryRangeResponse, QueryServiceClient } from '@parca/client';
 import { DateTimeRange } from '@parca/components';
+import { ProfileSelection } from '..';
 interface ProfileMetricsGraphProps {
     queryClient: QueryServiceClient;
     queryExpression: string;

package/dist/ProfileMetricsGraph/index.js

@@ -58,13 +58,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // 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 { useState, useEffect } from 'react';
-import MetricsGraph from '../MetricsGraph';
-import { Timestamp, Duration } from '@parca/client';
+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 MetricsGraph from '../MetricsGraph';
 import useDelayedLoader from '../useDelayedLoader';
-import { getStepDuration } from '@parca/functions';
 export var useQueryRange = function (client, queryExpression, start, end) {
     var _a = useState({
         response: null,

package/dist/ProfileSelector/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { QueryServiceClient, ProfileTypesResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
+import { ProfileTypesResponse, QueryServiceClient } from '@parca/client';
 import { ProfileSelection } from '..';
 export interface QuerySelection {
     expression: string;

package/dist/ProfileSelector/index.js

@@ -22,16 +22,16 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // 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 { Query } from '@parca/parser';
+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 { MergedProfileSelection } from '..';
-import { useEffect, useState } from 'react';
-import ProfileMetricsGraph from '../ProfileMetricsGraph';
 import MatchersInput from '../MatchersInput/index';
-import CompareButton from './CompareButton';
-import { Card, DateTimeRangePicker, DateTimeRange, Button, ButtonGroup, useGrpcMetadata, } from '@parca/components';
-import { CloseIcon } from '@parca/icons';
+import ProfileMetricsGraph from '../ProfileMetricsGraph';
 import ProfileTypeSelector from '../ProfileTypeSelector/index';
+import CompareButton from './CompareButton';
 export var useProfileTypes = function (client) {
     var _a = useState(undefined), result = _a[0], setResult = _a[1];
     var _b = useState(undefined), error = _b[0], setError = _b[1];

package/dist/ProfileSource.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { Label, ProfileDiffSelection, QueryRequest } from '@parca/client';
 import { ProfileType } from '@parca/parser';
-import { Label, QueryRequest, ProfileDiffSelection } from '@parca/client';
 export interface ProfileSource {
     QueryRequest: () => QueryRequest;
     ProfileType: () => ProfileType;

package/dist/ProfileSource.js

@@ -11,9 +11,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // 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 { ProfileDiffSelection_Mode, QueryRequest_Mode, QueryRequest_ReportType, Timestamp, } from '@parca/client';
 import { formatDate } from '@parca/functions';
-import { Query, ProfileType } from '@parca/parser';
-import { QueryRequest_Mode, QueryRequest_ReportType, ProfileDiffSelection_Mode, Timestamp, } from '@parca/client';
+import { ProfileType, Query } from '@parca/parser';
 export var timeFormat = "MMM d, 'at' h:mm:s a '(UTC)'";
 export var timeFormatShort = 'MMM d, h:mma';
 export function ParamsString(params) {

package/dist/ProfileTypeSelector/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ProfileType, ProfileTypesResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
+import { ProfileType, ProfileTypesResponse } from '@parca/client';
 interface WellKnownProfile {
     name: string;
     help: string;

package/dist/ProfileView/FilterByFunctionButton.js

@@ -11,9 +11,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Input, useURLState } from '@parca/components';
-import { Icon } from '@iconify/react';
 import { useCallback, useMemo, useState } from 'react';
+import { Icon } from '@iconify/react';
+import { Input, useURLState } from '@parca/components';
 var FilterByFunctionButton = function (_a) {
     var navigateTo = _a.navigateTo;
     var _b = useURLState({ param: 'filter_by_function', navigateTo: navigateTo }), storeValue = _b[0], setStoreValue = _b[1];

package/dist/ProfileView/ViewSelector.js

@@ -10,6 +10,18 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { Select, useURLState } from '@parca/components';
 import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
 var ViewSelector = function (_a) {

package/dist/ProfileView/index.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-import { QueryServiceClient, Flamegraph, Top, Callgraph as CallgraphType } from '@parca/client';
+import { Callgraph as CallgraphType, Flamegraph, QueryServiceClient, Top } from '@parca/client';
 import { ResizeHandler } from '../ProfileIcicleGraph';
 import { ProfileSource } from '../ProfileSource';
-import '../ProfileView.styles.css';
 type NavigateFunction = (path: string, queryParams: any, options?: {
     replace?: boolean;
 }) => void;

package/dist/ProfileView/index.js

@@ -33,23 +33,22 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Profiler, useEffect, useMemo, useState } from 'react';
-import { scaleLinear } from 'd3';
+import { Icon } from '@iconify/react';
 import cx from 'classnames';
+import { scaleLinear } from 'd3';
+import { DragDropContext, Draggable, Droppable, } from 'react-beautiful-dnd';
+import { Button, Card, KeyDownProvider, useParcaContext, useURLState } from '@parca/components';
+import { useContainerDimensions } from '@parca/dynamicsize';
 import { getNewSpanColor } from '@parca/functions';
 import { CloseIcon } from '@parca/icons';
-import { Icon } from '@iconify/react';
-import { Button, Card, useParcaContext, KeyDownProvider, useURLState } from '@parca/components';
-import { useContainerDimensions } from '@parca/dynamicsize';
-import { useAppSelector, selectDarkMode } from '@parca/store';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import { selectDarkMode, useAppSelector } from '@parca/store';
 import { Callgraph } from '../';
-import ProfileShareButton from '../components/ProfileShareButton';
-import FilterByFunctionButton from './FilterByFunctionButton';
-import ViewSelector from './ViewSelector';
 import ProfileIcicleGraph from '../ProfileIcicleGraph';
 import { TopTable } from '../TopTable';
+import ProfileShareButton from '../components/ProfileShareButton';
 import useDelayedLoader from '../useDelayedLoader';
-import '../ProfileView.styles.css';
+import FilterByFunctionButton from './FilterByFunctionButton';
+import ViewSelector from './ViewSelector';
 function arrayEquals(a, b) {
     return (Array.isArray(a) &&
         Array.isArray(b) &&

package/dist/ProfileViewWithData.d.ts

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

package/dist/ProfileViewWithData.js

@@ -49,12 +49,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // limitations under the License.
 import { useEffect, useState } from 'react';
 import { QueryRequest_ReportType } from '@parca/client';
-import { useQuery } from './useQuery';
-import { ProfileView } from './ProfileView';
-import { downloadPprof } from './utils';
 import { useGrpcMetadata, useParcaContext, useURLState } from '@parca/components';
 import { saveAsBlob } from '@parca/functions';
 import useUserPreference, { USER_PREFERENCES } from '@parca/functions/useUserPreference';
+import { ProfileView } from './ProfileView';
+import { useQuery } from './useQuery';
+import { downloadPprof } from './utils';
 export var ProfileViewWithData = function (_a) {
     var _b, _c;
     var queryClient = _a.queryClient, profileSource = _a.profileSource, navigateTo = _a.navigateTo;

package/dist/TopTable/index.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import type { NavigateFunction } from '@parca/functions';
-import { TopNodeMeta, Top } from '@parca/client';
-import '../TopTable.styles.css';
+import { Top, TopNodeMeta } from '@parca/client';
+import { type NavigateFunction } from '@parca/functions';
 interface TopTableProps {
     loading: boolean;
     data?: Top;

package/dist/TopTable/index.js

@@ -23,11 +23,10 @@ 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 { useCallback, useMemo } from 'react';
-import { getLastItem, valueFormatter, isSearchMatch, parseParams } from '@parca/functions';
-import { Button, Table, useURLState } from '@parca/components';
 import { createColumnHelper } from '@tanstack/react-table';
+import { Button, Table, useURLState } from '@parca/components';
+import { getLastItem, isSearchMatch, parseParams, valueFormatter, } from '@parca/functions';
 import { hexifyAddress } from '../utils';
-import '../TopTable.styles.css';
 export var RowLabel = function (meta) {
     var _a, _b, _c, _d, _e, _f;
     if (meta === undefined)

package/dist/components/DiffLegend.js

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