Merge pull request #5485 from parca-dev/mini-layout

ui: Mini variant for the UtilizationGraph
parca-dev · Feb 13, 2025 · b5cb77d · b5cb77d
2 parents 3af1e1d + dce24fd
commit b5cb77d
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 24 deletions.
diff --git a/ui/packages/shared/components/src/Skeletons/MetricsGraphSkeleton.tsx b/ui/packages/shared/components/src/Skeletons/MetricsGraphSkeleton.tsx
@@ -15,9 +15,10 @@ import cx from 'classnames';
 interface Props {
   heightStyle?: string;
   isDarkMode: boolean;
+  isMini?: boolean;
 }
 
-const MetricsGraphSkeleton = ({heightStyle, isDarkMode}: Props): JSX.Element => {
+const MetricsGraphSkeleton = ({heightStyle, isDarkMode, isMini = false}: Props): JSX.Element => {
   return (
     <div className="relative overflow-hidden" style={{height: heightStyle}}>
       <div className="absolute top-0 left-0 w-full h-full bg-shimmer-gradient dark:bg-shimmer-gradient-dark animate-shimmer"></div>
@@ -120,10 +121,10 @@ const MetricsGraphSkeleton = ({heightStyle, isDarkMode}: Props): JSX.Element =>
         <g stroke={cx(isDarkMode ? '#6b7280' : '#d1d5db')}>
           <path d="m49.5 19h1385v365h-1385z" />
           <path d="m49 139.039h1386" />
-          <path d="m49 79.8652h1386" />
-          <path d="m49 198.213h1386" />
+          {!isMini ? <path d="m49 79.8652h1386" /> : null}
+          {!isMini ? <path d="m49 198.213h1386" /> : null}
           <path d="m49 257.387h1386" />
-          <path d="m49 316.561h1386" />
+          {!isMini ? <path d="m49 316.561h1386" /> : null}
           <path d="m282.09 18.5v366" />
           <path d="m511.602 18.5v366" />
           <path d="m739.309 18.5v366" />

diff --git a/ui/packages/shared/profile/src/MetricsGraph/UtilizationMetrics/index.tsx b/ui/packages/shared/profile/src/MetricsGraph/UtilizationMetrics/index.tsx
@@ -485,19 +485,19 @@ const UtilizationMetrics = ({
   utilizationMetricsLoading,
 }: Props): JSX.Element => {
   const {isDarkMode} = useParcaContext();
-  const {width, height, margin, heightStyle} = useMetricsGraphDimensions(false);
+  const {width, height, margin, heightStyle} = useMetricsGraphDimensions(false, true);
 
   return (
     <AnimatePresence>
       <motion.div
-        className="h-full w-full relative"
+        className="w-full relative"
         key="utilization-metrics-graph-loaded"
         initial={{display: 'none', opacity: 0}}
         animate={{display: 'block', opacity: 1}}
         transition={{duration: 0.5}}
       >
         {utilizationMetricsLoading === true ? (
-          <MetricsGraphSkeleton heightStyle={heightStyle} isDarkMode={isDarkMode} />
+          <MetricsGraphSkeleton heightStyle={heightStyle} isDarkMode={isDarkMode} isMini={true} />
         ) : (
           <RawUtilizationMetrics
             data={data}

diff --git a/ui/packages/shared/profile/src/MetricsGraph/useMetricsGraphDimensions.ts b/ui/packages/shared/profile/src/MetricsGraph/useMetricsGraphDimensions.ts
@@ -22,10 +22,15 @@ interface MetricsGraphDimensions {
   margin: number;
 }
 
-const maxHeight = 402;
+const MAX_HEIGHT = 402;
+const MINI_VARIANT_HEIGHT = 100;
 const margin = 50;
 
-export const useMetricsGraphDimensions = (comparing: boolean): MetricsGraphDimensions => {
+export const useMetricsGraphDimensions = (
+  comparing: boolean,
+  isMini = false
+): MetricsGraphDimensions => {
+  const maxHeight = isMini ? MINI_VARIANT_HEIGHT : MAX_HEIGHT;
   let {width} = useWindowSize();
   const {profileExplorer} = useParcaContext();
   if (profileExplorer == null) {
@@ -40,7 +45,7 @@ export const useMetricsGraphDimensions = (comparing: boolean): MetricsGraphDimen
   if (comparing) {
     width = width / 2 - 32;
   }
-  const height = Math.min(width / 2.5, maxHeight);
+  const height = isMini ? MINI_VARIANT_HEIGHT : Math.min(width / 2.5, maxHeight);
   const heightStyle = `min(${maxHeight + margin}px, ${
     comparing
       ? profileExplorer.metricsGraph.maxHeightStyle.compareMode

diff --git a/ui/packages/shared/profile/src/MetricsGraphStrips/index.tsx b/ui/packages/shared/profile/src/MetricsGraphStrips/index.tsx
@@ -107,7 +107,7 @@ export const MetricsGraphStrips = ({
             {!isCollapsed ? (
               <AreaGraph
                 data={data[i]}
-                height={56}
+                height={24}
                 width={width ?? 1468}
                 fill={color(labelStr) as string}
                 selectionBounds={

diff --git a/ui/packages/shared/profile/src/ProfileSelector/MetricsGraphSection.tsx b/ui/packages/shared/profile/src/ProfileSelector/MetricsGraphSection.tsx
@@ -24,7 +24,7 @@ import {QuerySelection, type UtilizationMetrics as UtilizationMetricsType} from
 
 interface MetricsGraphSectionProps {
   showMetricsGraph: boolean;
-  setDisplayHideMetricsGraphButton: (show: boolean) => void;
+  setDisplayHideMetricsGraphButton?: (show: boolean) => void;
   heightStyle: string;
   querySelection: QuerySelection;
   profileSelection: ProfileSelection | null;
@@ -135,16 +135,18 @@ export function MetricsGraphSection({
 
   return (
     <div className={cx('relative', {'py-4': !showMetricsGraph})}>
-      <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'
-        )}
-      >
-        {showMetricsGraph ? 'Hide' : 'Show'} Metrics Graph
-      </button>
+      {setDisplayHideMetricsGraphButton != null ? (
+        <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'
+          )}
+        >
+          {showMetricsGraph ? 'Hide' : 'Show'} Metrics Graph
+        </button>
+      ) : null}
       {showMetricsGraph && (
         <>
           <div style={{height: heightStyle}}>

diff --git a/ui/packages/shared/profile/src/ProfileSelector/index.tsx b/ui/packages/shared/profile/src/ProfileSelector/index.tsx
@@ -81,7 +81,7 @@ interface ProfileSelectorProps extends ProfileSelectorFeatures {
   profileSelection: ProfileSelection | null;
   comparing: boolean;
   navigateTo: NavigateFunction;
-  setDisplayHideMetricsGraphButton: Dispatch<SetStateAction<boolean>>;
+  setDisplayHideMetricsGraphButton?: Dispatch<SetStateAction<boolean>>;
   suffix?: string;
   utilizationMetrics?: UtilizationMetrics[];
   utilizationMetricsLoading?: boolean;
@@ -138,7 +138,7 @@ const ProfileSelector = ({
     data: profileTypesData,
     error,
   } = useProfileTypes(queryClient);
-  const {heightStyle} = useMetricsGraphDimensions(comparing);
+  const {heightStyle} = useMetricsGraphDimensions(comparing, utilizationMetrics != null);
   const {viewComponent} = useParcaContext();
   const [queryBrowserMode, setQueryBrowserMode] = useURLState('query_browser_mode');