ui: Configurable metrics graph height and increase truncation limit (#6204)

Also includes the increasing the truncation count for the `file` in the graph tooltip

Author: yomete

ui/packages/shared/components/src/ParcaContext/index.tsx

@@ -49,6 +49,7 @@ export interface AdditionalMetricsGraphProps {
   timeRange: DateTimeRange;
   onTimeRangeChange: (range: DateTimeRange) => void;
   commitTimeRange: () => void;
+  selectTimeRange: (range: DateTimeRange) => void;
 }
 
 interface Props {

ui/packages/shared/profile/src/GraphTooltipArrow/Content.tsx

@@ -175,7 +175,7 @@ const TooltipMetaInfo = ({table, row}: {table: Table; row: number}): React.JSX.E
           ) : (
             <div className="flex gap-4">
               <div className="whitespace-nowrap text-left">
-                <ExpandOnHover value={file} displayValue={truncateStringReverse(file, 30)} />
+                <ExpandOnHover value={file} displayValue={truncateStringReverse(file, 50)} />
               </div>
             </div>
           )}

ui/packages/shared/profile/src/MetricsGraph/useMetricsGraphDimensions.ts

@@ -46,11 +46,13 @@ export const useMetricsGraphDimensions = (
     width = width / 2 - 32;
   }
   const height = isMini ? MINI_VARIANT_HEIGHT : Math.min(width / 2.5, maxHeight);
-  const heightStyle = `min(${maxHeight + margin}px, ${
-    comparing
-      ? profileExplorer.metricsGraph.maxHeightStyle.compareMode
-      : profileExplorer.metricsGraph.maxHeightStyle.default
-  })`;
+  const heightStyle = isMini
+    ? `${MINI_VARIANT_HEIGHT + margin}px`
+    : `min(${maxHeight + margin}px, ${
+        comparing
+          ? profileExplorer.metricsGraph.maxHeightStyle.compareMode
+          : profileExplorer.metricsGraph.maxHeightStyle.default
+      })`;
   return {
     width,
     height,

ui/packages/shared/profile/src/ProfileMetricsGraph/index.tsx

@@ -225,7 +225,11 @@ const ProfileMetricsGraph = ({
     queryExpression === ''
   );
   const {onError, perf, authenticationErrorMessage, isDarkMode, timezone} = useParcaContext();
-  const {width, height, margin, heightStyle} = useMetricsGraphDimensions(comparing);
+  const isGpuProfileType = queryExpression.includes(':cuda:');
+  const {width, height, margin, heightStyle} = useMetricsGraphDimensions(
+    comparing,
+    isGpuProfileType
+  );
   const [showAllSeriesForResponse, setShowAllSeriesForResponse] = useState<typeof response | null>(
     null
   );

ui/packages/shared/profile/src/ProfileSelector/MetricsGraphSection.tsx

@@ -18,14 +18,14 @@ import {DateTimeRange, useURLStateBatch} from '@parca/components';
 import {Query} from '@parca/parser';
 
 import {ProfileSelection} from '..';
+import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
 import ProfileMetricsGraph, {ProfileMetricsEmptyState} from '../ProfileMetricsGraph';
 import {useResetStateOnSeriesChange} from '../ProfileView/hooks/useResetStateOnSeriesChange';
 import {QuerySelection} from './index';
 
 interface MetricsGraphSectionProps {
   showMetricsGraph: boolean;
   setDisplayHideMetricsGraphButton?: (show: boolean) => void;
-  heightStyle: string;
   querySelection: QuerySelection;
   profileSelection: ProfileSelection | null;
   comparing: boolean;
@@ -50,7 +50,6 @@ interface MetricsGraphSectionProps {
 export function MetricsGraphSection({
   showMetricsGraph,
   setDisplayHideMetricsGraphButton,
-  heightStyle,
   querySelection,
   profileSelection,
   comparing,
@@ -69,6 +68,8 @@ export function MetricsGraphSection({
 }: MetricsGraphSectionProps): JSX.Element {
   const resetStateOnSeriesChange = useResetStateOnSeriesChange();
   const batchUpdates = useURLStateBatch();
+  const isGpuProfileType = querySelection.expression.includes(':cuda:');
+  const {heightStyle} = useMetricsGraphDimensions(comparing, isGpuProfileType);
   const handleTimeRangeChange = (range: DateTimeRange): void => {
     const from = range.getFromMs();
     const to = range.getToMs();

ui/packages/shared/profile/src/ProfileSelector/index.tsx

@@ -29,7 +29,6 @@ import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
 import {millisToProtoTimestamp, type NavigateFunction} from '@parca/utilities';
 
-import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
 import {
   ProfileFilter,
   useProfileFilters,
@@ -118,7 +117,6 @@ const ProfileSelector = ({
   suffix,
   onSearchHook,
 }: ProfileSelectorProps): JSX.Element => {
-  const {heightStyle} = useMetricsGraphDimensions(comparing, false);
   const {viewComponent, additionalMetricsGraph} = useParcaContext();
   const [queryBrowserMode, setQueryBrowserMode] = useURLState('query_browser_mode');
   const batchUpdates = useURLStateBatch();
@@ -298,6 +296,13 @@ const ProfileSelector = ({
           timeRange: timeRangeSelection,
           onTimeRangeChange: handleTimeRangeChange,
           commitTimeRange: () => setQueryExpression(true),
+          selectTimeRange: (range: DateTimeRange) => {
+            commitDraft({
+              from: range.getFromMs(),
+              to: range.getToMs(),
+              timeSelection: range.getRangeKey(),
+            });
+          },
         })}
         <LabelsQueryProvider
           setMatchersString={setMatchersString}
@@ -356,7 +361,6 @@ const ProfileSelector = ({
       <MetricsGraphSection
         showMetricsGraph={showMetricsGraph}
         setDisplayHideMetricsGraphButton={setDisplayHideMetricsGraphButton}
-        heightStyle={heightStyle}
         querySelection={querySelection}
         profileSelection={profileSelection}
         comparing={comparing}