@parca/profile 0.16.207 → 0.16.209

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.209](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.208...@parca/profile@0.16.209) (2023-07-17)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.208](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.207...@parca/profile@0.16.208) (2023-07-14)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.207](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.206...@parca/profile@0.16.207) (2023-07-12)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/useMetricsGraphDimensions.d.ts

@@ -5,5 +5,5 @@ interface MetricsGraphDimensions {
     margin: number;
     marginRight: number;
 }
-export declare const useMetricsGraphDimensions: () => MetricsGraphDimensions;
+export declare const useMetricsGraphDimensions: (comparing: boolean) => MetricsGraphDimensions;
 export {};

package/dist/MetricsGraph/useMetricsGraphDimensions.js

@@ -14,13 +14,18 @@ import { useWindowSize } from 'react-use';
 import { useParcaContext } from '@parca/components';
 const maxHeight = 402;
 const margin = 50;
-export const useMetricsGraphDimensions = () => {
+export const useMetricsGraphDimensions = (comparing) => {
     let { width } = useWindowSize();
     const { profileExplorer } = useParcaContext();
     width = width - profileExplorer.PaddingX;
+    if (comparing) {
+        width = width / 2 - 32;
+    }
     const height = Math.min(width / 2.5, maxHeight);
     const marginRight = 20;
-    const heightStyle = `min(${maxHeight + margin}px, ${profileExplorer.metricsGraph.maxHeightStyle})`;
+    const heightStyle = `min(${maxHeight + margin}px, ${comparing
+        ? profileExplorer.metricsGraph.maxHeightStyle.compareMode
+        : profileExplorer.metricsGraph.maxHeightStyle.default})`;
     return {
         width,
         height,

package/dist/ProfileMetricsGraph/index.d.ts

@@ -15,6 +15,7 @@ interface ProfileMetricsGraphProps {
     setTimeRange: (range: DateTimeRange) => void;
     addLabelMatcher: (key: string, value: string) => void;
     onPointClick: (timestamp: number, labels: Label[], queryExpression: string) => void;
+    comparing?: boolean;
 }
 export interface IQueryRangeState {
     response: QueryRangeResponse | null;
@@ -22,5 +23,5 @@ export interface IQueryRangeState {
     error: RpcError | null;
 }
 export declare const useQueryRange: (client: QueryServiceClient, queryExpression: string, start: number, end: number) => IQueryRangeState;
-declare const ProfileMetricsGraph: ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, }: ProfileMetricsGraphProps) => JSX.Element;
+declare const ProfileMetricsGraph: ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing, }: ProfileMetricsGraphProps) => JSX.Element;
 export default ProfileMetricsGraph;

package/dist/ProfileMetricsGraph/index.js

@@ -55,11 +55,11 @@ export const useQueryRange = (client, queryExpression, start, end) => {
     }, [client, queryExpression, start, end, metadata]);
     return { ...state, isLoading };
 };
-const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, }) => {
+const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing = false, }) => {
     const { isLoading, response, error } = useQueryRange(queryClient, queryExpression, from, to);
     const isLoaderVisible = useDelayedLoader(isLoading);
     const { loader, onError, perf } = useParcaContext();
-    const { width, height, margin, marginRight } = useMetricsGraphDimensions();
+    const { width, height, margin, marginRight } = useMetricsGraphDimensions(comparing);
     useEffect(() => {
         if (error !== null) {
             onError?.(error, 'metricsGraph');

package/dist/ProfileSelector/index.js

@@ -42,7 +42,7 @@ export const useProfileTypes = (client) => {
 };
 const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, onCompareProfile, }) => {
     const { loading: profileTypesLoading, data: profileTypesData, error, } = useProfileTypes(queryClient);
-    const { heightStyle } = useMetricsGraphDimensions();
+    const { heightStyle } = useMetricsGraphDimensions(comparing);
     const [timeRangeSelection, setTimeRangeSelection] = useState(DateTimeRange.fromRangeKey(querySelection.timeSelection));
     const [queryExpressionString, setQueryExpressionString] = useState(querySelection.expression);
     useEffect(() => {
@@ -125,7 +125,7 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
                                         }, children: "Search" })] })] }), _jsx("div", { children: comparing && _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) })] }), _jsx(Card.Body, { children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== undefined &&
                         querySelection.expression.length > 0 &&
                         querySelection.from !== undefined &&
-                        querySelection.to !== undefined ? (_jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, setTimeRange: (range) => {
+                        querySelection.to !== undefined ? (_jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, setTimeRange: (range) => {
                             const from = range.getFromMs();
                             const to = range.getToMs();
                             let mergedProfileParams = {};

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.207",
+  "version": "0.16.209",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.79",
-    "@parca/components": "^0.16.166",
+    "@parca/client": "^0.16.80",
+    "@parca/components": "^0.16.168",
     "@parca/dynamicsize": "^0.16.54",
-    "@parca/hooks": "^0.0.14",
+    "@parca/hooks": "^0.0.15",
     "@parca/parser": "^0.16.55",
-    "@parca/store": "^0.16.90",
-    "@parca/utilities": "^0.0.19",
+    "@parca/store": "^0.16.91",
+    "@parca/utilities": "^0.0.20",
     "@tanstack/react-query": "^4.0.5",
     "@types/react-beautiful-dnd": "^13.1.3",
     "apache-arrow": "^12.0.0",
@@ -47,5 +47,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "ea0e797162e7c016e3fed2ae6899958585b037b8"
+  "gitHead": "e81c1b5d981d8f728a23f867bef27b8922b0285b"
 }

package/src/MetricsGraph/useMetricsGraphDimensions.ts

@@ -26,15 +26,19 @@ interface MetricsGraphDimensions {
 const maxHeight = 402;
 const margin = 50;
 
-export const useMetricsGraphDimensions = (): MetricsGraphDimensions => {
+export const useMetricsGraphDimensions = (comparing: boolean): MetricsGraphDimensions => {
   let {width} = useWindowSize();
   const {profileExplorer} = useParcaContext();
   width = width - profileExplorer.PaddingX;
-
+  if (comparing) {
+    width = width / 2 - 32;
+  }
   const height = Math.min(width / 2.5, maxHeight);
   const marginRight = 20;
   const heightStyle = `min(${maxHeight + margin}px, ${
-    profileExplorer.metricsGraph.maxHeightStyle
+    comparing
+      ? profileExplorer.metricsGraph.maxHeightStyle.compareMode
+      : profileExplorer.metricsGraph.maxHeightStyle.default
   })`;
   return {
     width,

package/src/ProfileMetricsGraph/index.tsx

@@ -46,6 +46,7 @@ interface ProfileMetricsGraphProps {
   setTimeRange: (range: DateTimeRange) => void;
   addLabelMatcher: (key: string, value: string) => void;
   onPointClick: (timestamp: number, labels: Label[], queryExpression: string) => void;
+  comparing?: boolean;
 }
 
 export interface IQueryRangeState {
@@ -109,11 +110,12 @@ const ProfileMetricsGraph = ({
   setTimeRange,
   addLabelMatcher,
   onPointClick,
+  comparing = false,
 }: ProfileMetricsGraphProps): JSX.Element => {
   const {isLoading, response, error} = useQueryRange(queryClient, queryExpression, from, to);
   const isLoaderVisible = useDelayedLoader(isLoading);
   const {loader, onError, perf} = useParcaContext();
-  const {width, height, margin, marginRight} = useMetricsGraphDimensions();
+  const {width, height, margin, marginRight} = useMetricsGraphDimensions(comparing);
 
   useEffect(() => {
     if (error !== null) {

package/src/ProfileSelector/index.tsx

@@ -100,7 +100,7 @@ const ProfileSelector = ({
     data: profileTypesData,
     error,
   } = useProfileTypes(queryClient);
-  const {heightStyle} = useMetricsGraphDimensions();
+  const {heightStyle} = useMetricsGraphDimensions(comparing);
 
   const [timeRangeSelection, setTimeRangeSelection] = useState(
     DateTimeRange.fromRangeKey(querySelection.timeSelection)
@@ -257,6 +257,7 @@ const ProfileSelector = ({
                 from={querySelection.from}
                 to={querySelection.to}
                 profile={profileSelection}
+                comparing={comparing}
                 setTimeRange={(range: DateTimeRange) => {
                   const from = range.getFromMs();
                   const to = range.getToMs();