@parca/profile 0.19.121 → 0.19.123

package/src/ProfileFlameGraph/index.tsx

@@ -33,9 +33,8 @@ import DiffLegend from '../ProfileView/components/DiffLegend';
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
 import {useProfileMetadata} from '../ProfileView/hooks/useProfileMetadata';
 import {useVisualizationState} from '../ProfileView/hooks/useVisualizationState';
-import {TimelineGuide} from '../TimelineGuide';
 import {FlameGraphArrow} from './FlameGraphArrow';
-import {CurrentPathFrame, boundsFromProfileSource} from './FlameGraphArrow/utils';
+import {CurrentPathFrame} from './FlameGraphArrow/utils';
 
 const numberFormatter = new Intl.NumberFormat('en-US');
 
@@ -62,6 +61,7 @@ interface ProfileFlameGraphProps {
   tooltipId?: string;
   maxFrameCount?: number;
   isExpanded?: boolean;
+  zoomControlsRef?: React.RefObject<HTMLDivElement | null>;
 }
 
 const ErrorContent = ({errorMessage}: {errorMessage: string | ReactNode}): JSX.Element => {
@@ -101,11 +101,12 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
   maxFrameCount,
   isExpanded = false,
   metadataLoading = false,
+  zoomControlsRef,
 }: ProfileFlameGraphProps): JSX.Element {
   const {onError, authenticationErrorMessage, isDarkMode, flamechartHelpText} = useParcaContext();
   const {compareMode} = useProfileViewContext();
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [flameChartRef, {height: flameChartHeight}] = useMeasure();
+  const [flameChartRef] = useMeasure();
   const {colorBy, setColorBy} = useVisualizationState();
 
   // Create local state for paths when in sandwich view to avoid URL updates
@@ -263,16 +264,6 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
     if (arrow !== undefined) {
       return (
         <div className="relative">
-          {isFlameChart ? (
-            <TimelineGuide
-              bounds={boundsFromProfileSource(profileSource)}
-              width={width}
-              height={flameChartHeight ?? 420}
-              margin={0}
-              ticks={12}
-              timeUnit="nanoseconds"
-            />
-          ) : null}
           <div ref={flameChartRef as LegacyRef<HTMLDivElement>}>
             <FlameGraphArrow
               width={width}
@@ -294,6 +285,7 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
               maxFrameCount={maxFrameCount}
               isExpanded={isExpanded}
               colorBy={colorBy}
+              zoomControlsRef={zoomControlsRef}
             />
           </div>
         </div>
@@ -312,7 +304,6 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
     isCompareAbsolute,
     isFlameChart,
     profileSource,
-    flameChartHeight,
     flameChartRef,
     flamechartHelpText,
     isRenderedAsFlamegraph,
@@ -325,6 +316,7 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
     mappingsList,
     filenamesList,
     colorBy,
+    zoomControlsRef,
   ]);
 
   useEffect(() => {

package/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
   );

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -18,6 +18,7 @@ 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';
@@ -25,7 +26,6 @@ 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();

package/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}

package/src/TimelineGuide/index.tsx

@@ -49,8 +49,8 @@ export const TimelineGuide = ({
 
   return (
     <div className="relative h-5">
-      <div className="absolute" style={{width, height}}>
-        <svg style={{width: '100%', height: '100%'}} className="z-[5]">
+      <div className="pointer-events-none absolute" style={{width, height}}>
+        <svg style={{width: '100%', height: '100%'}}>
           <g
             className="x axis"
             fill="none"