@parca/profile 0.16.471 → 0.16.472

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/MetricsGraph/UtilizationMetrics/index.js +2 -2
  3. package/dist/MetricsGraph/useMetricsGraphDimensions.d.ts +1 -1
  4. package/dist/MetricsGraph/useMetricsGraphDimensions.d.ts.map +1 -1
  5. package/dist/MetricsGraph/useMetricsGraphDimensions.js +5 -3
  6. package/dist/MetricsGraphStrips/index.js +1 -1
  7. package/dist/ProfileSelector/MetricsGraphSection.d.ts +1 -1
  8. package/dist/ProfileSelector/MetricsGraphSection.d.ts.map +1 -1
  9. package/dist/ProfileSelector/MetricsGraphSection.js +1 -1
  10. package/dist/ProfileSelector/index.d.ts +1 -1
  11. package/dist/ProfileSelector/index.d.ts.map +1 -1
  12. package/dist/ProfileSelector/index.js +1 -1
  13. package/package.json +3 -3
  14. package/src/MetricsGraph/UtilizationMetrics/index.tsx +3 -3
  15. package/src/MetricsGraph/useMetricsGraphDimensions.ts +8 -3
  16. package/src/MetricsGraphStrips/index.tsx +1 -1
  17. package/src/ProfileSelector/MetricsGraphSection.tsx +13 -11
  18. package/src/ProfileSelector/index.tsx +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.16.472](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.471...@parca/profile@0.16.472) (2025-02-13)
7
+
8
+ **Note:** Version bump only for package @parca/profile
9
+
6
10
  ## [0.16.471](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.470...@parca/profile@0.16.471) (2025-02-13)
7
11
 
8
12
  **Note:** Version bump only for package @parca/profile
package/dist/MetricsGraph/UtilizationMetrics/index.js CHANGED
@@ -208,7 +208,7 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
208
208
  };
209
209
  const UtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, utilizationMetricsLoading, }) => {
210
210
  const { isDarkMode } = useParcaContext();
211
- const { width, height, margin, heightStyle } = useMetricsGraphDimensions(false);
212
- return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "h-full w-full relative", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: utilizationMetricsLoading === true ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode })) : (_jsx(RawUtilizationMetrics, { data: data, addLabelMatcher: addLabelMatcher, setTimeRange: setTimeRange, width: width, height: height, margin: margin })) }, "utilization-metrics-graph-loaded") }));
211
+ const { width, height, margin, heightStyle } = useMetricsGraphDimensions(false, true);
212
+ return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "w-full relative", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: utilizationMetricsLoading === true ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode, isMini: true })) : (_jsx(RawUtilizationMetrics, { data: data, addLabelMatcher: addLabelMatcher, setTimeRange: setTimeRange, width: width, height: height, margin: margin })) }, "utilization-metrics-graph-loaded") }));
213
213
  };
214
214
  export default UtilizationMetrics;
package/dist/MetricsGraph/useMetricsGraphDimensions.d.ts CHANGED
@@ -4,6 +4,6 @@ interface MetricsGraphDimensions {
4
4
  heightStyle: string;
5
5
  margin: number;
6
6
  }
7
- export declare const useMetricsGraphDimensions: (comparing: boolean) => MetricsGraphDimensions;
7
+ export declare const useMetricsGraphDimensions: (comparing: boolean, isMini?: boolean) => MetricsGraphDimensions;
8
8
  export {};
9
9
  //# sourceMappingURL=useMetricsGraphDimensions.d.ts.map
package/dist/MetricsGraph/useMetricsGraphDimensions.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useMetricsGraphDimensions.d.ts","sourceRoot":"","sources":["../../src/MetricsGraph/useMetricsGraphDimensions.ts"],"names":[],"mappings":"AAiBA,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAChB;AAKD,eAAO,MAAM,yBAAyB,cAAe,OAAO,KAAG,sBA2B9D,CAAC"}
1
+ {"version":3,"file":"useMetricsGraphDimensions.d.ts","sourceRoot":"","sources":["../../src/MetricsGraph/useMetricsGraphDimensions.ts"],"names":[],"mappings":"AAiBA,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAChB;AAMD,eAAO,MAAM,yBAAyB,cACzB,OAAO,uBAEjB,sBA4BF,CAAC"}
package/dist/MetricsGraph/useMetricsGraphDimensions.js CHANGED
@@ -12,9 +12,11 @@
12
12
  // limitations under the License.
13
13
  import { useWindowSize } from 'react-use';
14
14
  import { useParcaContext } from '@parca/components';
15
- const maxHeight = 402;
15
+ const MAX_HEIGHT = 402;
16
+ const MINI_VARIANT_HEIGHT = 100;
16
17
  const margin = 50;
17
- export const useMetricsGraphDimensions = (comparing) => {
18
+ export const useMetricsGraphDimensions = (comparing, isMini = false) => {
19
+ const maxHeight = isMini ? MINI_VARIANT_HEIGHT : MAX_HEIGHT;
18
20
  let { width } = useWindowSize();
19
21
  const { profileExplorer } = useParcaContext();
20
22
  if (profileExplorer == null) {
@@ -29,7 +31,7 @@ export const useMetricsGraphDimensions = (comparing) => {
29
31
  if (comparing) {
30
32
  width = width / 2 - 32;
31
33
  }
32
- const height = Math.min(width / 2.5, maxHeight);
34
+ const height = isMini ? MINI_VARIANT_HEIGHT : Math.min(width / 2.5, maxHeight);
33
35
  const heightStyle = `min(${maxHeight + margin}px, ${comparing
34
36
  ? profileExplorer.metricsGraph.maxHeightStyle.compareMode
35
37
  : profileExplorer.metricsGraph.maxHeightStyle.default})`;
package/dist/MetricsGraphStrips/index.js CHANGED
@@ -54,7 +54,7 @@ export const MetricsGraphStrips = ({ cpus, data, selectedTimeframe, onSelectedTi
54
54
  newCollapsedIndices.push(i);
55
55
  }
56
56
  setCollapsedIndices(newCollapsedIndices);
57
- }, children: [_jsx(Icon, { icon: isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow' }), labelStr] }), !isCollapsed ? (_jsx(AreaGraph, { data: data[i], height: 56, width: width ?? 1468, fill: color(labelStr), selectionBounds: isEqual(cpu, selectedTimeframe?.labels) ? selectedTimeframe?.bounds : undefined, setSelectionBounds: bounds => {
57
+ }, children: [_jsx(Icon, { icon: isCollapsed ? 'bxs:right-arrow' : 'bxs:down-arrow' }), labelStr] }), !isCollapsed ? (_jsx(AreaGraph, { data: data[i], height: 24, width: width ?? 1468, fill: color(labelStr), selectionBounds: isEqual(cpu, selectedTimeframe?.labels) ? selectedTimeframe?.bounds : undefined, setSelectionBounds: bounds => {
58
58
  onSelectedTimeframe(cpu, bounds);
59
59
  } })) : null] }, labelStr));
60
60
  })] }));
package/dist/ProfileSelector/MetricsGraphSection.d.ts CHANGED
@@ -5,7 +5,7 @@ import { ProfileSelection } from '..';
5
5
  import { QuerySelection, type UtilizationMetrics as UtilizationMetricsType } from './index';
6
6
  interface MetricsGraphSectionProps {
7
7
  showMetricsGraph: boolean;
8
- setDisplayHideMetricsGraphButton: (show: boolean) => void;
8
+ setDisplayHideMetricsGraphButton?: (show: boolean) => void;
9
9
  heightStyle: string;
10
10
  querySelection: QuerySelection;
11
11
  profileSelection: ProfileSelection | null;
package/dist/ProfileSelector/MetricsGraphSection.d.ts.map CHANGED
@@ -1 +1 @@
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;AAG5D,OAAO,EAAC,cAAc,EAAE,KAAK,kBAAkB,IAAI,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAE1F,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;IACjD,kBAAkB,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC9C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;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,EACrB,kBAAkB,EAClB,yBAAyB,GAC1B,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CAgIxC"}
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;AAG5D,OAAO,EAAC,cAAc,EAAE,KAAK,kBAAkB,IAAI,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAE1F,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gCAAgC,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,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;IACjD,kBAAkB,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC9C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;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,EACrB,kBAAkB,EAClB,yBAAyB,GAC1B,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CAkIxC"}
package/dist/ProfileSelector/MetricsGraphSection.js CHANGED
@@ -75,7 +75,7 @@ export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGra
75
75
  const mergeTo = query.profileType().delta ? mergeFrom + durationInMilliseconds : mergeFrom;
76
76
  selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
77
77
  };
78
- return (_jsxs("div", { className: cx('relative', { 'py-4': !showMetricsGraph }), children: [_jsxs("button", { onClick: () => setDisplayHideMetricsGraphButton(!showMetricsGraph), className: cx('hidden 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(_Fragment, { children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== '' &&
78
+ return (_jsxs("div", { className: cx('relative', { 'py-4': !showMetricsGraph }), children: [setDisplayHideMetricsGraphButton != null ? (_jsxs("button", { onClick: () => setDisplayHideMetricsGraphButton(!showMetricsGraph), className: cx('hidden 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"] })) : null, showMetricsGraph && (_jsx(_Fragment, { children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== '' &&
79
79
  querySelection.from !== undefined &&
80
80
  querySelection.to !== undefined ? (_jsx(_Fragment, { children: utilizationMetrics !== undefined ? (_jsx(UtilizationMetricsGraph, { data: utilizationMetrics, addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, utilizationMetricsLoading: utilizationMetricsLoading })) : (_jsx(_Fragment, { children: _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." }) }))) }) }))] }));
81
81
  }
package/dist/ProfileSelector/index.d.ts CHANGED
@@ -44,7 +44,7 @@ interface ProfileSelectorProps extends ProfileSelectorFeatures {
44
44
  profileSelection: ProfileSelection | null;
45
45
  comparing: boolean;
46
46
  navigateTo: NavigateFunction;
47
- setDisplayHideMetricsGraphButton: Dispatch<SetStateAction<boolean>>;
47
+ setDisplayHideMetricsGraphButton?: Dispatch<SetStateAction<boolean>>;
48
48
  suffix?: string;
49
49
  utilizationMetrics?: UtilizationMetrics[];
50
50
  utilizationMetricsLoading?: boolean;
package/dist/ProfileSelector/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"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;AASpC,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,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE;QACR,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,UAAU,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH;AAED,MAAM,WAAW,iBAAiB;IAChC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,2BAA2B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACjE,sBAAsB,CAAC,EAAE,MAAM,EAAE,CAAC;CACnC;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;IAChB,kBAAkB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC1C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC;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,2UAkBlB,oBAAoB,KAAG,GAAG,CAAC,OA4M7B,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"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;AASpC,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,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE;QACR,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,UAAU,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH;AAED,MAAM,WAAW,iBAAiB;IAChC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,2BAA2B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACjE,sBAAsB,CAAC,EAAE,MAAM,EAAE,CAAC;CACnC;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,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC1C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC;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,2UAkBlB,oBAAoB,KAAG,GAAG,CAAC,OA4M7B,CAAC;AAEF,eAAe,eAAe,CAAC"}
package/dist/ProfileSelector/index.js CHANGED
@@ -41,7 +41,7 @@ export const useProfileTypes = (client) => {
41
41
  };
42
42
  const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph = true, showSumBySelector = true, showProfileTypeSelector = true, disableExplorativeQuerying = false, setDisplayHideMetricsGraphButton, utilizationMetrics, utilizationMetricsLoading, utilizationLabels, }) => {
43
43
  const { loading: profileTypesLoading, data: profileTypesData, error, } = useProfileTypes(queryClient);
44
- const { heightStyle } = useMetricsGraphDimensions(comparing);
44
+ const { heightStyle } = useMetricsGraphDimensions(comparing, utilizationMetrics != null);
45
45
  const { viewComponent } = useParcaContext();
46
46
  const [queryBrowserMode, setQueryBrowserMode] = useURLState('query_browser_mode');
47
47
  const [timeRangeSelection, setTimeRangeSelection] = useState(DateTimeRange.fromRangeKey(querySelection.timeSelection, querySelection.from, querySelection.to));
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@parca/profile",
3
- "version": "0.16.471",
3
+ "version": "0.16.472",
4
4
  "description": "Profile viewing libraries",
5
5
  "dependencies": {
6
6
  "@headlessui/react": "^1.7.19",
7
7
  "@iconify/react": "^4.0.0",
8
8
  "@parca/client": "0.16.127",
9
- "@parca/components": "0.16.322",
9
+ "@parca/components": "0.16.323",
10
10
  "@parca/dynamicsize": "0.16.65",
11
11
  "@parca/hooks": "0.0.80",
12
12
  "@parca/icons": "0.16.71",
@@ -75,5 +75,5 @@
75
75
  "access": "public",
76
76
  "registry": "https://registry.npmjs.org/"
77
77
  },
78
- "gitHead": "9bcabd1ea569b85c2b8ce7bb86ed0c871953712b"
78
+ "gitHead": "9cacf5cf50474571ee0357b10bdfde884921d086"
79
79
  }
package/src/MetricsGraph/UtilizationMetrics/index.tsx CHANGED
@@ -485,19 +485,19 @@ const UtilizationMetrics = ({
485
485
  utilizationMetricsLoading,
486
486
  }: Props): JSX.Element => {
487
487
  const {isDarkMode} = useParcaContext();
488
- const {width, height, margin, heightStyle} = useMetricsGraphDimensions(false);
488
+ const {width, height, margin, heightStyle} = useMetricsGraphDimensions(false, true);
489
489
 
490
490
  return (
491
491
  <AnimatePresence>
492
492
  <motion.div
493
- className="h-full w-full relative"
493
+ className="w-full relative"
494
494
  key="utilization-metrics-graph-loaded"
495
495
  initial={{display: 'none', opacity: 0}}
496
496
  animate={{display: 'block', opacity: 1}}
497
497
  transition={{duration: 0.5}}
498
498
  >
499
499
  {utilizationMetricsLoading === true ? (
500
- <MetricsGraphSkeleton heightStyle={heightStyle} isDarkMode={isDarkMode} />
500
+ <MetricsGraphSkeleton heightStyle={heightStyle} isDarkMode={isDarkMode} isMini={true} />
501
501
  ) : (
502
502
  <RawUtilizationMetrics
503
503
  data={data}
package/src/MetricsGraph/useMetricsGraphDimensions.ts CHANGED
@@ -22,10 +22,15 @@ interface MetricsGraphDimensions {
22
22
  margin: number;
23
23
  }
24
24
 
25
- const maxHeight = 402;
25
+ const MAX_HEIGHT = 402;
26
+ const MINI_VARIANT_HEIGHT = 100;
26
27
  const margin = 50;
27
28
 
28
- export const useMetricsGraphDimensions = (comparing: boolean): MetricsGraphDimensions => {
29
+ export const useMetricsGraphDimensions = (
30
+ comparing: boolean,
31
+ isMini = false
32
+ ): MetricsGraphDimensions => {
33
+ const maxHeight = isMini ? MINI_VARIANT_HEIGHT : MAX_HEIGHT;
29
34
  let {width} = useWindowSize();
30
35
  const {profileExplorer} = useParcaContext();
31
36
  if (profileExplorer == null) {
@@ -40,7 +45,7 @@ export const useMetricsGraphDimensions = (comparing: boolean): MetricsGraphDimen
40
45
  if (comparing) {
41
46
  width = width / 2 - 32;
42
47
  }
43
- const height = Math.min(width / 2.5, maxHeight);
48
+ const height = isMini ? MINI_VARIANT_HEIGHT : Math.min(width / 2.5, maxHeight);
44
49
  const heightStyle = `min(${maxHeight + margin}px, ${
45
50
  comparing
46
51
  ? profileExplorer.metricsGraph.maxHeightStyle.compareMode
package/src/MetricsGraphStrips/index.tsx CHANGED
@@ -107,7 +107,7 @@ export const MetricsGraphStrips = ({
107
107
  {!isCollapsed ? (
108
108
  <AreaGraph
109
109
  data={data[i]}
110
- height={56}
110
+ height={24}
111
111
  width={width ?? 1468}
112
112
  fill={color(labelStr) as string}
113
113
  selectionBounds={
package/src/ProfileSelector/MetricsGraphSection.tsx CHANGED
@@ -24,7 +24,7 @@ import {QuerySelection, type UtilizationMetrics as UtilizationMetricsType} from
24
24
 
25
25
  interface MetricsGraphSectionProps {
26
26
  showMetricsGraph: boolean;
27
- setDisplayHideMetricsGraphButton: (show: boolean) => void;
27
+ setDisplayHideMetricsGraphButton?: (show: boolean) => void;
28
28
  heightStyle: string;
29
29
  querySelection: QuerySelection;
30
30
  profileSelection: ProfileSelection | null;
@@ -135,16 +135,18 @@ export function MetricsGraphSection({
135
135
 
136
136
  return (
137
137
  <div className={cx('relative', {'py-4': !showMetricsGraph})}>
138
- <button
139
- onClick={() => setDisplayHideMetricsGraphButton(!showMetricsGraph)}
140
- className={cx(
141
- 'hidden 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',
142
- showMetricsGraph && 'absolute right-0 bottom-3 !flex',
143
- !showMetricsGraph && 'relative !flex ml-auto'
144
- )}
145
- >
146
- {showMetricsGraph ? 'Hide' : 'Show'} Metrics Graph
147
- </button>
138
+ {setDisplayHideMetricsGraphButton != null ? (
139
+ <button
140
+ onClick={() => setDisplayHideMetricsGraphButton(!showMetricsGraph)}
141
+ className={cx(
142
+ 'hidden 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',
143
+ showMetricsGraph && 'absolute right-0 bottom-3 !flex',
144
+ !showMetricsGraph && 'relative !flex ml-auto'
145
+ )}
146
+ >
147
+ {showMetricsGraph ? 'Hide' : 'Show'} Metrics Graph
148
+ </button>
149
+ ) : null}
148
150
  {showMetricsGraph && (
149
151
  <>
150
152
  <div style={{height: heightStyle}}>
package/src/ProfileSelector/index.tsx CHANGED
@@ -81,7 +81,7 @@ interface ProfileSelectorProps extends ProfileSelectorFeatures {
81
81
  profileSelection: ProfileSelection | null;
82
82
  comparing: boolean;
83
83
  navigateTo: NavigateFunction;
84
- setDisplayHideMetricsGraphButton: Dispatch<SetStateAction<boolean>>;
84
+ setDisplayHideMetricsGraphButton?: Dispatch<SetStateAction<boolean>>;
85
85
  suffix?: string;
86
86
  utilizationMetrics?: UtilizationMetrics[];
87
87
  utilizationMetricsLoading?: boolean;
@@ -138,7 +138,7 @@ const ProfileSelector = ({
138
138
  data: profileTypesData,
139
139
  error,
140
140
  } = useProfileTypes(queryClient);
141
- const {heightStyle} = useMetricsGraphDimensions(comparing);
141
+ const {heightStyle} = useMetricsGraphDimensions(comparing, utilizationMetrics != null);
142
142
  const {viewComponent} = useParcaContext();
143
143
  const [queryBrowserMode, setQueryBrowserMode] = useURLState('query_browser_mode');
144
144