@parca/profile 0.16.448 → 0.16.450

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.450](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.449...@parca/profile@0.16.450) (2024-11-28)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.449](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.444...@parca/profile@0.16.449) (2024-11-26)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.448](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.447...@parca/profile@0.16.448) (2024-11-21)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraphStrips/AreaGraph/index.d.ts

@@ -1,8 +1,8 @@
+import { NumberDuo } from '../../utils';
 export interface DataPoint {
     timestamp: number;
     value: number;
 }
-export type NumberDuo = [number, number];
 interface Props {
     width: number;
     height: number;

package/dist/MetricsGraphStrips/AreaGraph/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraphStrips/AreaGraph/index.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEzC,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACxC,kBAAkB,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE;AA8JD,eAAO,MAAM,SAAS,0HAWnB,KAAK,KAAG,GAAG,CAAC,OAkHd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraphStrips/AreaGraph/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAEtC,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACxC,kBAAkB,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE;AA8JD,eAAO,MAAM,SAAS,0HAWnB,KAAK,KAAG,GAAG,CAAC,OAkHd,CAAC"}

package/dist/MetricsGraphStrips/MetricsGraphStrips.stories.d.ts

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/react';
-import { DataPoint, NumberDuo } from './AreaGraph';
+import { NumberDuo } from '../utils';
+import { DataPoint } from './AreaGraph';
 declare const meta: Meta;
 export default meta;
 export declare const ThreeCPUStrips: {

package/dist/MetricsGraphStrips/MetricsGraphStrips.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricsGraphStrips.stories.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/MetricsGraphStrips.stories.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AAajD,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,cAAc;;;;;;;;oCAKK,MAAM,UAAU,SAAS,KAAG,IAAI;;mBAI7B,GAAG,KAAG,GAAG,CAAC,OAAO;CAUnD,CAAC"}
+{"version":3,"file":"MetricsGraphStrips.stories.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/MetricsGraphStrips.stories.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAqBtC,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,cAAc;;;;;;;;oCAKK,MAAM,UAAU,SAAS,KAAG,IAAI;;mBAI7B,GAAG,KAAG,GAAG,CAAC,OAAO;CAUnD,CAAC"}

package/dist/MetricsGraphStrips/MetricsGraphStrips.stories.js

@@ -14,12 +14,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // eslint-disable-next-line import/named
 import { useArgs } from '@storybook/preview-api';
 import { MetricsGraphStrips } from './index';
+function seededRandom(seed) {
+    return () => {
+        seed = (seed * 16807) % 2147483647;
+        return (seed - 1) / 2147483646;
+    };
+}
 const mockData = [[], [], []];
+const random = seededRandom(42);
 for (let i = 0; i < 200; i++) {
     for (let j = 0; j < mockData.length; j++) {
         mockData[j].push({
             timestamp: 1731326092000 + i * 100,
-            value: Math.floor(Math.random() * 100),
+            value: Math.floor(random() * 100),
         });
     }
 }

package/dist/MetricsGraphStrips/index.d.ts

@@ -1,4 +1,5 @@
-import { DataPoint, NumberDuo } from './AreaGraph';
+import { NumberDuo } from '../utils';
+import { DataPoint } from './AreaGraph';
 interface Props {
     cpus: string[];
     data: DataPoint[][];

package/dist/MetricsGraphStrips/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAY,SAAS,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AAG5D,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CAC5E;AAMD,eAAO,MAAM,kBAAkB,0DAK5B,KAAK,KAAG,GAAG,CAAC,OAoDd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAY,SAAS,EAAC,MAAM,aAAa,CAAC;AAEjD,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,gBAAgB,CAAC,EAAE;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CAC5E;AAMD,eAAO,MAAM,kBAAkB,0DAK5B,KAAK,KAAG,GAAG,CAAC,OA+Dd,CAAC"}

package/dist/MetricsGraphStrips/index.js

@@ -11,11 +11,11 @@ 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 } from 'react';
+import { useMemo, useState } from 'react';
 import { Icon } from '@iconify/react';
 import * as d3 from 'd3';
+import { TimelineGuide } from '../TimelineGuide';
 import { AreaGraph } from './AreaGraph';
-import { TimelineGuide } from './TimelineGuide';
 const getTimelineGuideHeight = (cpus, collapsedIndices) => {
     return 56 * (cpus.length - collapsedIndices.length) + 20 * collapsedIndices.length + 24;
 };
@@ -23,7 +23,17 @@ export const MetricsGraphStrips = ({ cpus, data, selectedTimeline, onSelectedTim
     const [collapsedIndices, setCollapsedIndices] = useState([]);
     // @ts-expect-error
     const color = d3.scaleOrdinal(d3.schemeObservable10);
-    return (_jsxs("div", { className: "flex flex-col gap-1 relative", children: [_jsx(TimelineGuide, { data: data, width: 1468, height: getTimelineGuideHeight(cpus, collapsedIndices), margin: 1 }), cpus.map((cpu, i) => {
+    const bounds = useMemo(() => {
+        const bounds = [Infinity, -Infinity];
+        data.forEach(cpuData => {
+            cpuData.forEach(dataPoint => {
+                bounds[0] = Math.min(bounds[0], dataPoint.timestamp);
+                bounds[1] = Math.max(bounds[1], dataPoint.timestamp);
+            });
+        });
+        return [0, bounds[1] - bounds[0]];
+    }, [data]);
+    return (_jsxs("div", { className: "flex flex-col gap-1 relative", children: [_jsx(TimelineGuide, { bounds: bounds, width: 1468, height: getTimelineGuideHeight(cpus, collapsedIndices), margin: 1 }), cpus.map((cpu, i) => {
                 const isCollapsed = collapsedIndices.includes(i);
                 return (_jsxs("div", { className: "relative min-h-5", children: [_jsxs("div", { className: "text-xs absolute top-0 left-0 flex gap-[2px] items-center bg-white/50 px-1 rounded-sm cursor-pointer z-30", onClick: () => {
                                 const newCollapsedIndices = [...collapsedIndices];

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -192,6 +192,6 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
         path,
         highlightSimilarStacksSetName,
     ]);
-    return (_jsx(_Fragment, { children: _jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ContextMenu, { menuId: MENU_ID, table: table, row: hoveringRow ?? 0, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType, compareAbsolute: compareAbsolute, trackVisibility: trackVisibility, curPath: curPath, setCurPath: setCurPath, hideMenu: hideAll, hideBinary: hideBinary, unit: arrow.unit }), dockedMetainfo ? (_jsx(DockedGraphTooltip, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute })) : (!isContextMenuOpen && (_jsx(GraphTooltipArrow, { contextElement: svg.current, isContextMenuOpen: isContextMenuOpen, children: _jsx(GraphTooltipArrowContent, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, isFixed: false, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute }) }))), root] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "relative z-[9]", onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ContextMenu, { menuId: MENU_ID, table: table, row: hoveringRow ?? 0, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType, compareAbsolute: compareAbsolute, trackVisibility: trackVisibility, curPath: curPath, setCurPath: setCurPath, hideMenu: hideAll, hideBinary: hideBinary, unit: arrow.unit }), dockedMetainfo ? (_jsx(DockedGraphTooltip, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute })) : (!isContextMenuOpen && (_jsx(GraphTooltipArrow, { contextElement: svg.current, isContextMenuOpen: isContextMenuOpen, children: _jsx(GraphTooltipArrowContent, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, isFixed: false, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute }) }))), root] }) }));
 });
 export default IcicleGraphArrow;

package/dist/ProfileSelector/MetricsGraphSection.d.ts

@@ -0,0 +1,26 @@
+import { QueryServiceClient } from '@parca/client';
+import { DateTimeRange } from '@parca/components';
+import { Query } from '@parca/parser';
+import { ProfileSelection } from '..';
+import { QuerySelection } from './index';
+interface MetricsGraphSectionProps {
+    showMetricsGraph: boolean;
+    setDisplayHideMetricsGraphButton: (show: boolean) => void;
+    heightStyle: string;
+    querySelection: QuerySelection;
+    profileSelection: ProfileSelection | null;
+    comparing: boolean;
+    sumBy: string[] | null;
+    defaultSumByLoading: boolean;
+    queryClient: QueryServiceClient;
+    queryExpressionString: string;
+    setTimeRangeSelection: (range: DateTimeRange) => void;
+    selectQuery: (query: QuerySelection) => void;
+    selectProfile: (source: ProfileSelection) => void;
+    query: Query;
+    setNewQueryExpression: (queryExpression: string) => void;
+    setQueryExpression: (updateTs?: boolean) => void;
+}
+export declare function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, selectProfile, query, setNewQueryExpression, }: MetricsGraphSectionProps): JSX.Element;
+export {};
+//# sourceMappingURL=MetricsGraphSection.d.ts.map

package/dist/ProfileSelector/MetricsGraphSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsGraphSection.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/MetricsGraphSection.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAQ,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACxD,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAE5D,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAEvC,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gCAAgC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACvB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC;IAChC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC;IACb,qBAAqB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,gBAAgB,EAChB,gCAAgC,EAChC,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,KAAK,EACL,qBAAqB,GACtB,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CAiHxC"}

package/dist/ProfileSelector/MetricsGraphSection.js

@@ -0,0 +1,80 @@
+import { jsxs as _jsxs, jsx as _jsx } 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 cx from 'classnames';
+import { Query } from '@parca/parser';
+import { MergedProfileSelection } from '..';
+import ProfileMetricsGraph, { ProfileMetricsEmptyState } from '../ProfileMetricsGraph';
+export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, selectProfile, query, setNewQueryExpression, }) {
+    const handleTimeRangeChange = (range) => {
+        const from = range.getFromMs();
+        const to = range.getToMs();
+        let mergedProfileParams = {};
+        if (query.profileType().delta) {
+            mergedProfileParams = { mergeFrom: from, mergeTo: to };
+        }
+        setTimeRangeSelection(range);
+        selectQuery({
+            expression: queryExpressionString,
+            from,
+            to,
+            timeSelection: range.getRangeKey(),
+            ...mergedProfileParams,
+        });
+    };
+    const addLabelMatcher = (labels) => {
+        // When a user clicks on a label on the metrics graph tooltip,
+        // replace single `\` in the `value` string with doubles `\\` if available.
+        const replaceBackslash = (value) => {
+            return value.includes('\\') ? value.replaceAll('\\', '\\\\') : value;
+        };
+        let newQuery;
+        let hasChanged;
+        if (Array.isArray(labels)) {
+            const newLabels = labels.map(({ key, value }) => {
+                const newValue = replaceBackslash(value);
+                return { key, value: newValue };
+            });
+            const [query, changed] = Query.parse(queryExpressionString).setMultipleMatchers(newLabels);
+            hasChanged = changed;
+            newQuery = query;
+        }
+        else {
+            const { key, value } = labels;
+            const newValue = replaceBackslash(value);
+            const [query, changed] = Query.parse(queryExpressionString).setMatcher(key, newValue);
+            hasChanged = changed;
+            newQuery = query;
+        }
+        if (hasChanged) {
+            // TODO: Change this to store the query object
+            setNewQueryExpression(newQuery.toString());
+        }
+    };
+    const handlePointClick = (timestamp, labels, queryExpression, duration) => {
+        let query = Query.parse(queryExpression);
+        labels.forEach(l => {
+            const [newQuery, updated] = query.setMatcher(l.name, l.value);
+            if (updated) {
+                query = newQuery;
+            }
+        });
+        const durationInMilliseconds = duration / 1000000; // duration is in nanoseconds
+        const mergeFrom = timestamp;
+        const mergeTo = query.profileType().delta ? mergeFrom + durationInMilliseconds : mergeFrom;
+        selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
+    };
+    return (_jsxs("div", { className: cx('relative', { 'py-4': !showMetricsGraph }), children: [_jsxs("button", { onClick: () => setDisplayHideMetricsGraphButton(!showMetricsGraph), className: cx('hidden z-10 px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900', showMetricsGraph && 'absolute right-0 bottom-3 !flex', !showMetricsGraph && 'relative !flex ml-auto'), children: [showMetricsGraph ? 'Hide' : 'Show', " Metrics Graph"] }), showMetricsGraph && (_jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== '' &&
+                    querySelection.from !== undefined &&
+                    querySelection.to !== undefined ? (_jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? sumBy ?? [], sumByLoading: defaultSumByLoading, setTimeRange: handleTimeRangeChange, addLabelMatcher: addLabelMatcher, onPointClick: handlePointClick })) : (profileSelection === null && (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsEmptyState, { message: "Please select a profile type and click 'Search' to begin." }) }))) }))] }));
+}

package/dist/ProfileSelector/QueryControls.d.ts

@@ -0,0 +1,41 @@
+import { RpcError } from '@protobuf-ts/runtime-rpc';
+import { type SelectInstance } from 'react-select';
+import { ProfileTypesResponse, QueryServiceClient } from '@parca/client';
+import { DateTimeRange } from '@parca/components';
+import { ProfileType, Query } from '@parca/parser';
+interface QueryControlsProps {
+    showProfileTypeSelector: boolean;
+    showSumBySelector: boolean;
+    disableExplorativeQuerying: boolean;
+    profileTypesData?: ProfileTypesResponse;
+    profileTypesLoading: boolean;
+    selectedProfileName: string;
+    setProfileName: (name: string | undefined) => void;
+    profileTypesError?: RpcError;
+    viewComponent?: {
+        disableProfileTypesDropdown?: boolean;
+        disableExplorativeQuerying?: boolean;
+        labelnames?: string[];
+        createViewComponent?: React.ReactNode;
+    };
+    queryBrowserMode: string;
+    setQueryBrowserMode: (mode: string) => void;
+    advancedModeForQueryBrowser: boolean;
+    setAdvancedModeForQueryBrowser: (mode: boolean) => void;
+    setMatchersString: (matchers: string) => void;
+    setQueryExpression: (updateTs?: boolean) => void;
+    query: Query;
+    queryBrowserRef: React.RefObject<HTMLDivElement>;
+    timeRangeSelection: DateTimeRange;
+    setTimeRangeSelection: (range: DateTimeRange) => void;
+    searchDisabled: boolean;
+    queryClient: QueryServiceClient;
+    labels: string[];
+    sumBySelection: string[];
+    setUserSumBySelection: (sumBy: string[]) => void;
+    sumByRef: React.RefObject<SelectInstance>;
+    profileType: ProfileType;
+}
+export declare function QueryControls({ showProfileTypeSelector, profileTypesData, profileTypesLoading, selectedProfileName, setProfileName, viewComponent, setQueryBrowserMode, advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser, setMatchersString, setQueryExpression, query, queryBrowserRef, timeRangeSelection, setTimeRangeSelection, searchDisabled, queryClient, labels, sumBySelection, setUserSumBySelection, sumByRef, profileType, showSumBySelector, profileTypesError, }: QueryControlsProps): JSX.Element;
+export {};
+//# sourceMappingURL=QueryControls.d.ts.map

package/dist/ProfileSelector/QueryControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryControls.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/QueryControls.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAClD,OAAe,EAAC,KAAK,cAAc,EAAC,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAC,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EAAsB,aAAa,EAAsB,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAC,WAAW,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAYjD,UAAU,kBAAkB;IAC1B,uBAAuB,EAAE,OAAO,CAAC;IACjC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,0BAA0B,EAAE,OAAO,CAAC;IACpC,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACnD,iBAAiB,CAAC,EAAE,QAAQ,CAAC;IAC7B,aAAa,CAAC,EAAE;QACd,2BAA2B,CAAC,EAAE,OAAO,CAAC;QACtC,0BAA0B,CAAC,EAAE,OAAO,CAAC;QACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;QACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACvC,CAAC;IACF,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,2BAA2B,EAAE,OAAO,CAAC;IACrC,8BAA8B,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,KAAK,EAAE,KAAK,CAAC;IACb,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACjD,kBAAkB,EAAE,aAAa,CAAC;IAClC,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,kBAAkB,CAAC;IAChC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,aAAa,CAAC,EAC5B,uBAAuB,EACvB,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,2BAA2B,EAC3B,8BAA8B,EAC9B,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,cAAc,EACd,WAAW,EACX,MAAM,EACN,cAAc,EACd,qBAAqB,EACrB,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,iBAAiB,GAClB,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA8IlC"}

package/dist/ProfileSelector/QueryControls.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { Switch } from '@headlessui/react';
+import Select from 'react-select';
+import { Button, ButtonGroup, DateTimeRangePicker } from '@parca/components';
+import MatchersInput from '../MatchersInput';
+import ProfileTypeSelector from '../ProfileTypeSelector';
+import SimpleMatchers from '../SimpleMatchers';
+import ViewMatchers from '../ViewMatchers';
+export function QueryControls({ showProfileTypeSelector, profileTypesData, profileTypesLoading, selectedProfileName, setProfileName, viewComponent, setQueryBrowserMode, advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser, setMatchersString, setQueryExpression, query, queryBrowserRef, timeRangeSelection, setTimeRangeSelection, searchDisabled, queryClient, labels, sumBySelection, setUserSumBySelection, sumByRef, profileType, showSumBySelector, profileTypesError, }) {
+    return (_jsxs("div", { className: "flex w-full flex-wrap items-end gap-2", children: [showProfileTypeSelector && (_jsxs("div", { children: [_jsx("label", { className: "text-xs", children: "Profile type" }), _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: profileTypesError, disabled: viewComponent?.disableProfileTypesDropdown })] })), _jsxs("div", { className: "w-full flex-1 flex flex-col gap-1", ref: queryBrowserRef, children: [_jsx("div", { className: "flex items-center justify-between", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("label", { className: "text-xs", children: "Query" }), viewComponent?.disableExplorativeQuerying !== true && (_jsxs(_Fragment, { children: [_jsxs(Switch, { checked: advancedModeForQueryBrowser, onChange: () => {
+                                                setAdvancedModeForQueryBrowser(!advancedModeForQueryBrowser);
+                                                setQueryBrowserMode(advancedModeForQueryBrowser ? 'simple' : 'advanced');
+                                            }, className: `${advancedModeForQueryBrowser ? 'bg-indigo-600' : 'bg-gray-400 dark:bg-gray-800'} relative inline-flex h-[20px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`, children: [_jsx("span", { className: "sr-only", children: "Use setting" }), _jsx("span", { "aria-hidden": "true", className: `${advancedModeForQueryBrowser ? 'translate-x-6' : 'translate-x-0'} pointer-events-none inline-block h-[16px] w-[16px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out` })] }), _jsx("label", { className: "text-xs", children: "Advanced Mode" })] }))] }) }), viewComponent?.disableExplorativeQuerying === true &&
+                        viewComponent?.labelnames !== undefined &&
+                        viewComponent?.labelnames.length >= 1 ? (_jsx(ViewMatchers, { labelNames: viewComponent.labelnames, setMatchersString: setMatchersString, profileType: selectedProfileName, runQuery: setQueryExpression, currentQuery: query, queryClient: queryClient })) : advancedModeForQueryBrowser ? (_jsx(MatchersInput, { setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query, profileType: selectedProfileName, queryClient: queryClient })) : (_jsx(SimpleMatchers, { setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query, profileType: selectedProfileName, queryBrowserRef: queryBrowserRef, queryClient: queryClient }))] }), showSumBySelector && (_jsxs("div", { children: [_jsx("div", { className: "mb-0.5 mt-1.5 flex items-center justify-between", children: _jsx("label", { className: "text-xs", children: "Sum by" }) }), _jsx(Select, { id: "h-sum-by-selector", defaultValue: [], isMulti: true, name: "colors", options: labels.map(label => ({ label, value: label })), className: "parca-select-container text-sm w-full max-w-80", classNamePrefix: "parca-select", value: (sumBySelection ?? []).map(sumBy => ({ label: sumBy, value: sumBy })), onChange: newValue => {
+                            setUserSumBySelection(newValue.map(option => option.value));
+                        }, placeholder: "Labels...", styles: {
+                            indicatorSeparator: () => ({ display: 'none' }),
+                            menu: provided => ({ ...provided, width: 'max-content' }),
+                        }, isDisabled: !profileType.delta, 
+                        // @ts-expect-error
+                        ref: sumByRef, onKeyDown: e => {
+                            const currentRef = sumByRef.current;
+                            if (currentRef == null) {
+                                return;
+                            }
+                            const inputRef = currentRef.inputRef;
+                            if (inputRef == null) {
+                                return;
+                            }
+                            if (e.key === 'Enter' &&
+                                inputRef.value === '' &&
+                                currentRef.state.focusedOptionId === null // menu is not open
+                            ) {
+                                setQueryExpression(true);
+                                currentRef.blur();
+                            }
+                        } })] })), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection }), _jsx(ButtonGroup, { children: _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
+                        e.preventDefault();
+                        setQueryExpression(true);
+                    }, id: "h-matcher-search-button", children: "Search" }) })] }));
+}

package/dist/ProfileSelector/index.d.ts

@@ -12,7 +12,14 @@ export interface QuerySelection {
     mergeFrom?: number;
     mergeTo?: number;
 }
-interface ProfileSelectorProps {
+interface ProfileSelectorFeatures {
+    showMetricsGraph: boolean;
+    showSumBySelector?: boolean;
+    showProfileTypeSelector?: boolean;
+    disableExplorativeQuerying?: boolean;
+    disableProfileTypesDropdown?: boolean;
+}
+interface ProfileSelectorProps extends ProfileSelectorFeatures {
     queryClient: QueryServiceClient;
     querySelection: QuerySelection;
     selectProfile: (source: ProfileSelection) => void;
@@ -22,9 +29,8 @@ interface ProfileSelectorProps {
     profileSelection: ProfileSelection | null;
     comparing: boolean;
     navigateTo: NavigateFunction;
-    suffix?: string;
-    showMetricsGraph: boolean;
     setDisplayHideMetricsGraphButton: Dispatch<SetStateAction<boolean>>;
+    suffix?: string;
 }
 export interface IProfileTypesResult {
     loading: boolean;
@@ -32,6 +38,6 @@ export interface IProfileTypesResult {
     error?: RpcError;
 }
 export declare const useProfileTypes: (client: QueryServiceClient) => IProfileTypesResult;
-declare const ProfileSelector: ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph, setDisplayHideMetricsGraphButton, }: ProfileSelectorProps) => JSX.Element;
+declare const ProfileSelector: ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph, showSumBySelector, showProfileTypeSelector, disableExplorativeQuerying, setDisplayHideMetricsGraphButton, }: ProfileSelectorProps) => JSX.Element;
 export default ProfileSelector;
 //# sourceMappingURL=index.d.ts.map

package/dist/ProfileSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAC,QAAQ,EAAE,cAAc,EAAuC,MAAM,OAAO,CAAC;AAG5F,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAIlD,OAAO,EAAQ,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAa9E,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAU5D,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,oBAAoB;IAC5B,WAAW,EAAE,kBAAkB,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gCAAgC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACrE;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,WAAY,kBAAkB,KAAG,mBAkB5D,CAAC;AAEF,QAAA,MAAM,eAAe,iMAYlB,oBAAoB,KAAG,GAAG,CAAC,OA+Z7B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,QAAQ,EAAE,cAAc,EAAuC,MAAM,OAAO,CAAC;AAErF,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAC,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAUvE,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAC,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAQpC,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,uBAAuB;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED,UAAU,oBAAqB,SAAQ,uBAAuB;IAC5D,WAAW,EAAE,kBAAkB,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,gCAAgC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,WAAY,kBAAkB,KAAG,mBAkB5D,CAAC;AAEF,QAAA,MAAM,eAAe,yQAelB,oBAAoB,KAAG,GAAG,CAAC,OAyM7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileSelector/index.js

@@ -12,20 +12,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Switch } from '@headlessui/react';
-import cx from 'classnames';
-import Select from 'react-select';
-import { Button, ButtonGroup, DateTimeRange, DateTimeRangePicker, IconButton, useGrpcMetadata, useParcaContext, useURLState, } from '@parca/components';
+import { DateTimeRange, IconButton, useGrpcMetadata, useParcaContext, useURLState, } from '@parca/components';
 import { CloseIcon } from '@parca/icons';
 import { Query } from '@parca/parser';
-import { MergedProfileSelection } from '..';
-import MatchersInput, { useLabelNames } from '../MatchersInput/index';
+import { useLabelNames } from '../MatchersInput/index';
 import { useMetricsGraphDimensions } from '../MetricsGraph/useMetricsGraphDimensions';
-import ProfileMetricsGraph, { ProfileMetricsEmptyState } from '../ProfileMetricsGraph';
-import ProfileTypeSelector from '../ProfileTypeSelector/index';
-import SimpleMatchers from '../SimpleMatchers';
-import ViewMatchers from '../ViewMatchers';
 import { useDefaultSumBy, useSumBySelection } from '../useSumBy';
+import { MetricsGraphSection } from './MetricsGraphSection';
+import { QueryControls } from './QueryControls';
 import { useAutoQuerySelector } from './useAutoQuerySelector';
 export const useProfileTypes = (client) => {
     const [result, setResult] = useState(undefined);
@@ -44,11 +38,10 @@ export const useProfileTypes = (client) => {
     }, [client, metadata, loading]);
     return { loading, data: result, error };
 };
-const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph, setDisplayHideMetricsGraphButton, }) => {
+const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph = true, showSumBySelector = true, showProfileTypeSelector = true, disableExplorativeQuerying = false, setDisplayHideMetricsGraphButton, }) => {
     const { loading: profileTypesLoading, data: profileTypesData, error, } = useProfileTypes(queryClient);
     const { heightStyle } = useMetricsGraphDimensions(comparing);
     const { viewComponent } = useParcaContext();
-    const sumByRef = useRef(null);
     const [queryBrowserMode, setQueryBrowserMode] = useURLState('query_browser_mode');
     const [timeRangeSelection, setTimeRangeSelection] = useState(DateTimeRange.fromRangeKey(querySelection.timeSelection, querySelection.from, querySelection.to));
     const [queryExpressionString, setQueryExpressionString] = useState(querySelection.expression);
@@ -113,35 +106,6 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
     const setQueryExpression = (updateTs = false) => {
         setNewQueryExpression(query.toString(), updateTs);
     };
-    const addLabelMatcher = (labels) => {
-        // When a user clicks on a label on the metrics graph tooltip,
-        // replace single `\` in the `value` string with doubles `\\` if available.
-        const replaceBackslash = (value) => {
-            return value.includes('\\') ? value.replaceAll('\\', '\\\\') : value;
-        };
-        let newQuery;
-        let hasChanged;
-        if (Array.isArray(labels)) {
-            const newLabels = labels.map(({ key, value }) => {
-                const newValue = replaceBackslash(value);
-                return { key, value: newValue };
-            });
-            const [query, changed] = Query.parse(queryExpressionString).setMultipleMatchers(newLabels);
-            hasChanged = changed;
-            newQuery = query;
-        }
-        else {
-            const { key, value } = labels;
-            const newValue = replaceBackslash(value);
-            const [query, changed] = Query.parse(queryExpressionString).setMatcher(key, newValue);
-            hasChanged = changed;
-            newQuery = query;
-        }
-        if (hasChanged) {
-            // TODO: Change this to store the query object
-            setNewQueryExpression(newQuery.toString());
-        }
-    };
     const setMatchersString = (matchers) => {
         const newExpressionString = `${selectedProfileName}{${matchers}}`;
         setQueryExpressionString(newExpressionString);
@@ -174,75 +138,7 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
         queryExpressionString === '' ||
         queryExpressionString === '{}';
     const queryBrowserRef = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex", children: [_jsxs("div", { className: "flex w-full flex-wrap items-end gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "text-xs", children: "Profile type" }), _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: error, disabled: viewComponent?.disableProfileTypesDropdown })] }), _jsxs("div", { className: "w-full flex-1 flex flex-col gap-1", ref: queryBrowserRef, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("label", { className: "text-xs", children: "Query" }), viewComponent?.disableExplorativeQuerying === true ? null : (_jsxs(_Fragment, { children: [_jsxs(Switch, { checked: advancedModeForQueryBrowser, onChange: () => {
-                                                                    setAdvancedModeForQueryBrowser(!advancedModeForQueryBrowser);
-                                                                    setQueryBrowserMode(advancedModeForQueryBrowser ? 'simple' : 'advanced');
-                                                                }, className: `${advancedModeForQueryBrowser
-                                                                    ? 'bg-indigo-600'
-                                                                    : 'bg-gray-400 dark:bg-gray-800'}
-          relative inline-flex h-[20px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white/75`, children: [_jsx("span", { className: "sr-only", children: "Use setting" }), _jsx("span", { "aria-hidden": "true", className: `${advancedModeForQueryBrowser ? 'translate-x-6' : 'translate-x-0'}
-            pointer-events-none inline-block h-[16px] w-[16px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out` })] }), _jsx("label", { className: "text-xs", children: "Advanced Mode" })] }))] }), (query.matchers.length > 0 || query.inputMatcherString.length > 0) &&
-                                                viewComponent !== undefined && _jsx("div", { children: viewComponent?.createViewComponent })] }), viewComponent?.disableExplorativeQuerying === true &&
-                                        viewComponent?.labelnames !== undefined &&
-                                        viewComponent?.labelnames.length >= 1 ? (_jsx(_Fragment, { children: _jsx(ViewMatchers, { labelNames: viewComponent.labelnames, setMatchersString: setMatchersString, profileType: selectedProfileName, runQuery: setQueryExpression, currentQuery: query, queryClient: queryClient }) })) : (_jsx(_Fragment, { children: advancedModeForQueryBrowser ? (_jsx(MatchersInput, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query, profileType: selectedProfileName })) : (_jsx(SimpleMatchers, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query, profileType: selectedProfileName, queryBrowserRef: queryBrowserRef })) }))] }), _jsxs("div", { children: [_jsx("div", { className: "mb-0.5 mt-1.5 flex items-center justify-between", children: _jsx("label", { className: "text-xs", children: "Sum by" }) }), _jsx(Select, { id: "h-sum-by-selector", defaultValue: [], isMulti: true, name: "colors", options: labels.map(label => ({ label, value: label })), className: "parca-select-container text-sm w-full max-w-80", classNamePrefix: "parca-select", value: (sumBySelection ?? []).map(sumBy => ({ label: sumBy, value: sumBy })), onChange: selectedOptions => {
-                                            setUserSumBySelection(selectedOptions.map(option => option.value));
-                                        }, placeholder: "Labels...", styles: {
-                                            indicatorSeparator: () => ({ display: 'none' }),
-                                            menu: provided => ({ ...provided, width: 'max-content' }),
-                                        }, isDisabled: !profileType.delta, ref: sumByRef, onKeyDown: e => {
-                                            const currentRef = sumByRef.current;
-                                            if (currentRef == null) {
-                                                return;
-                                            }
-                                            const inputRef = currentRef.inputRef;
-                                            if (inputRef == null) {
-                                                return;
-                                            }
-                                            if (e.key === 'Enter' &&
-                                                inputRef.value === '' &&
-                                                currentRef.state.focusedOptionId === null // menu is not open
-                                            ) {
-                                                setQueryExpression(true);
-                                                currentRef.blur();
-                                            }
-                                        } })] }), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection }), _jsx(ButtonGroup, { children: _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
-                                        e.preventDefault();
-                                        setQueryExpression(true);
-                                    }, id: "h-matcher-search-button", children: "Search" }) })] }), _jsx("div", { children: comparing && _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) })] }), _jsxs("div", { className: cx('relative', {
-                    'py-4': !showMetricsGraph,
-                }), children: [_jsxs("button", { onClick: () => setDisplayHideMetricsGraphButton(!showMetricsGraph), className: cx('hidden z-10 px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900', showMetricsGraph && 'absolute right-0 bottom-3 !flex', !showMetricsGraph && 'relative !flex ml-auto'), children: [showMetricsGraph ? 'Hide' : 'Show', " Metrics Graph"] }), showMetricsGraph ? (_jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== undefined &&
-                            querySelection.expression.length > 0 &&
-                            querySelection.from !== undefined &&
-                            querySelection.to !== undefined ? (_jsx("div", { children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? defaultSumBy ?? [], sumByLoading: defaultSumByLoading, setTimeRange: (range) => {
-                                    const from = range.getFromMs();
-                                    const to = range.getToMs();
-                                    let mergedProfileParams = {};
-                                    if (query.profileType().delta) {
-                                        mergedProfileParams = { mergeFrom: from, mergeTo: to };
-                                    }
-                                    setTimeRangeSelection(range);
-                                    selectQuery({
-                                        expression: queryExpressionString,
-                                        from,
-                                        to,
-                                        timeSelection: range.getRangeKey(),
-                                        ...mergedProfileParams,
-                                    });
-                                }, addLabelMatcher: addLabelMatcher, onPointClick: (timestamp, labels, queryExpression, duration) => {
-                                    // TODO: Pass the query object via click rather than queryExpression
-                                    let query = Query.parse(queryExpression);
-                                    labels.forEach(l => {
-                                        const [newQuery, updated] = query.setMatcher(l.name, l.value);
-                                        if (updated) {
-                                            query = newQuery;
-                                        }
-                                    });
-                                    const durationInMilliseconds = duration / 1000000; // duration is in nanoseconds
-                                    const mergeFrom = timestamp;
-                                    const mergeTo = query.profileType().delta
-                                        ? mergeFrom + durationInMilliseconds
-                                        : mergeFrom;
-                                    selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
-                                } }) })) : (_jsx(_Fragment, { children: profileSelection == null ? (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsEmptyState, { message: `Please select a profile type and click "Search" to begin.` }) })) : null })) })) : null] })] }));
+    const sumByRef = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex", children: [_jsx(QueryControls, { showProfileTypeSelector: showProfileTypeSelector, showSumBySelector: showSumBySelector, disableExplorativeQuerying: disableExplorativeQuerying, profileTypesData: profileTypesData, profileTypesLoading: profileTypesLoading, selectedProfileName: selectedProfileName, setProfileName: setProfileName, setMatchersString: setMatchersString, setQueryExpression: setQueryExpression, query: query, queryBrowserRef: queryBrowserRef, timeRangeSelection: timeRangeSelection, setTimeRangeSelection: setTimeRangeSelection, searchDisabled: searchDisabled, queryBrowserMode: queryBrowserMode, setQueryBrowserMode: setQueryBrowserMode, advancedModeForQueryBrowser: advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser: setAdvancedModeForQueryBrowser, queryClient: queryClient, sumByRef: sumByRef, labels: labels, sumBySelection: sumBySelection ?? [], setUserSumBySelection: setUserSumBySelection, profileType: profileType, profileTypesError: error }), comparing && (_jsx("div", { children: _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) }))] }), _jsx(MetricsGraphSection, { showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setDisplayHideMetricsGraphButton, heightStyle: heightStyle, querySelection: querySelection, profileSelection: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? defaultSumBy ?? [], defaultSumByLoading: defaultSumByLoading, queryClient: queryClient, queryExpressionString: queryExpressionString, setTimeRangeSelection: setTimeRangeSelection, selectQuery: selectQuery, selectProfile: selectProfile, query: query, setQueryExpression: setQueryExpression, setNewQueryExpression: setNewQueryExpression })] }));
 };
 export default ProfileSelector;

package/dist/TimelineGuide/index.d.ts

@@ -0,0 +1,11 @@
+import { NumberDuo } from '../utils';
+interface Props {
+    width: number;
+    height: number;
+    margin: number;
+    bounds: NumberDuo;
+    ticks?: number;
+}
+export declare const TimelineGuide: ({ bounds, width, height, margin, ticks }: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/TimelineGuide/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimelineGuide/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AAEnC,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAaD,eAAO,MAAM,aAAa,6CAA4C,KAAK,KAAG,GAAG,CAAC,OA8DjF,CAAC"}

package/dist/{MetricsGraphStrips/TimelineGuide → TimelineGuide}/index.js

@@ -11,7 +11,7 @@ import { jsxs as _jsxs, 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 { Fragment, useMemo } from 'react';
+import { Fragment } from 'react';
 import * as d3 from 'd3';
 const alignBeforeAxisCorrection = (val) => {
     if (val < 10000) {
@@ -22,19 +22,9 @@ const alignBeforeAxisCorrection = (val) => {
     }
     return 0;
 };
-export const TimelineGuide = ({ data, width, height, margin }) => {
-    const bounds = useMemo(() => {
-        const bounds = [Infinity, -Infinity];
-        data.forEach(cpuData => {
-            cpuData.forEach(dataPoint => {
-                bounds[0] = Math.min(bounds[0], dataPoint.timestamp);
-                bounds[1] = Math.max(bounds[1], dataPoint.timestamp);
-            });
-        });
-        return [0, bounds[1] - bounds[0]];
-    }, [data]);
+export const TimelineGuide = ({ bounds, width, height, margin, ticks }) => {
     const xScale = d3.scaleLinear().domain(bounds).range([0, width]);
-    return (_jsx("div", { className: "relative h-4", children: _jsx("div", { className: "absolute", style: { width, height }, children: _jsx("svg", { style: { width: '100%', height: '100%' }, children: _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks().map((d, i) => (_jsxs(Fragment, { children: [_jsx("g", { className: "tick", 
+    return (_jsx("div", { className: "relative h-4", children: _jsx("div", { className: "absolute", style: { width, height }, children: _jsx("svg", { style: { width: '100%', height: '100%' }, className: "z-[5]", children: _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(ticks).map((d, i) => (_jsxs(Fragment, { children: [_jsx("g", { className: "tick", 
                                     /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
                                     transform: `translate(${xScale(d) + alignBeforeAxisCorrection(d)}, ${-height})`, children: _jsxs("text", { fill: "currentColor", dy: ".71em", y: 9, children: [d, " ms"] }) }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: width, y1: -height + 1, y2: -height + 1 }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: width, y1: -height + 20, y2: -height + 20 })] }) }) }) }));
 };