@parca/profile 0.19.150 → 0.19.152

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -16,7 +16,6 @@ import {useCallback, useEffect, useMemo, useState} from 'react';
 import {QueryServiceClient} from '@parca/client';
 import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
-import type {NavigateFunction} from '@parca/utilities';
 
 import {ProfileDiffSource, ProfileViewWithData} from '..';
 import ProfileSelector from '../ProfileSelector';
@@ -25,13 +24,9 @@ import {useQueryState} from '../hooks/useQueryState';
 
 interface ProfileExplorerCompareProps {
   queryClient: QueryServiceClient;
-  navigateTo: NavigateFunction;
 }
 
-const ProfileExplorerCompare = ({
-  queryClient,
-  navigateTo,
-}: ProfileExplorerCompareProps): JSX.Element => {
+const ProfileExplorerCompare = ({queryClient}: ProfileExplorerCompareProps): JSX.Element => {
   const [showMetricsGraph, setShowMetricsGraph] = useState(true);
   const {closeCompareMode, isCompareMode, isCompareAbsolute} = useCompareModeMeta();
 
@@ -107,7 +102,6 @@ const ProfileExplorerCompare = ({
             closeProfile={closeProfileA}
             enforcedProfileName={''}
             comparing={true}
-            navigateTo={navigateTo}
             suffix="_a"
             showMetricsGraph={showMetricsGraph}
             setDisplayHideMetricsGraphButton={setShowMetricsGraph}
@@ -122,7 +116,6 @@ const ProfileExplorerCompare = ({
             closeProfile={closeProfileB}
             enforcedProfileName={enforcedProfileNameA}
             comparing={true}
-            navigateTo={navigateTo}
             suffix="_b"
             showMetricsGraph={showMetricsGraph}
             setDisplayHideMetricsGraphButton={setShowMetricsGraph}

package/src/ProfileExplorer/ProfileExplorerSingle.tsx

@@ -14,7 +14,6 @@
 import {useCallback, useState} from 'react';
 
 import {QueryServiceClient} from '@parca/client';
-import type {NavigateFunction} from '@parca/utilities';
 
 import {ProfileViewWithData} from '..';
 import ProfileSelector from '../ProfileSelector';
@@ -22,13 +21,9 @@ import {useQueryState} from '../hooks/useQueryState';
 
 interface ProfileExplorerSingleProps {
   queryClient: QueryServiceClient;
-  navigateTo: NavigateFunction;
 }
 
-const ProfileExplorerSingle = ({
-  queryClient,
-  navigateTo,
-}: ProfileExplorerSingleProps): JSX.Element => {
+const ProfileExplorerSingle = ({queryClient}: ProfileExplorerSingleProps): JSX.Element => {
   const [showMetricsGraph, setShowMetricsGraph] = useState(true);
   const {profileSource, setDraftTimeRange, commitDraft} = useQueryState({suffix: '_a'});
 
@@ -47,7 +42,6 @@ const ProfileExplorerSingle = ({
           closeProfile={() => {}} // eslint-disable-line @typescript-eslint/no-empty-function
           comparing={false}
           enforcedProfileName={''}
-          navigateTo={navigateTo}
           suffix="_a"
           showMetricsGraph={showMetricsGraph}
           setDisplayHideMetricsGraphButton={setShowMetricsGraph}

package/src/ProfileExplorer/index.tsx

@@ -18,7 +18,7 @@ import {Provider} from 'react-redux';
 import {QueryServiceClient} from '@parca/client';
 import {KeyDownProvider, useParcaContext} from '@parca/components';
 import {createStore} from '@parca/store';
-import {capitalizeOnlyFirstLetter, type NavigateFunction} from '@parca/utilities';
+import {capitalizeOnlyFirstLetter} from '@parca/utilities';
 
 import {useCompareModeMeta} from '../hooks/useCompareModeMeta';
 import {useHasProfileData} from '../useHasProfileData';
@@ -27,7 +27,6 @@ import ProfileExplorerSingle from './ProfileExplorerSingle';
 
 interface ProfileExplorerProps {
   queryClient: QueryServiceClient;
-  navigateTo: NavigateFunction;
 }
 
 const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
@@ -41,7 +40,7 @@ const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
   );
 };
 
-const ProfileExplorerApp = ({queryClient, navigateTo}: ProfileExplorerProps): JSX.Element => {
+const ProfileExplorerApp = ({queryClient}: ProfileExplorerProps): JSX.Element => {
   const {
     loading: hasProfileDataLoading,
     data: hasProfileData,
@@ -77,13 +76,13 @@ const ProfileExplorerApp = ({queryClient, navigateTo}: ProfileExplorerProps): JS
   }
 
   if (isCompareMode) {
-    return <ProfileExplorerCompare queryClient={queryClient} navigateTo={navigateTo} />;
+    return <ProfileExplorerCompare queryClient={queryClient} />;
   }
 
-  return <ProfileExplorerSingle queryClient={queryClient} navigateTo={navigateTo} />;
+  return <ProfileExplorerSingle queryClient={queryClient} />;
 };
 
-const ProfileExplorer = ({queryClient, navigateTo}: ProfileExplorerProps): JSX.Element => {
+const ProfileExplorer = ({queryClient}: ProfileExplorerProps): JSX.Element => {
   const {additionalFlamegraphColorProfiles} = useParcaContext();
 
   const {store: reduxStore} = useMemo(() => {
@@ -93,7 +92,7 @@ const ProfileExplorer = ({queryClient, navigateTo}: ProfileExplorerProps): JSX.E
   return (
     <Provider store={reduxStore}>
       <KeyDownProvider>
-        <ProfileExplorerApp queryClient={queryClient} navigateTo={navigateTo} />
+        <ProfileExplorerApp queryClient={queryClient} />
       </KeyDownProvider>
     </Provider>
   );

package/src/ProfileFlameGraph/FlameGraphArrow/MemoizedTooltip.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {memo, useEffect, useState} from 'react';
+import React, {memo, useEffect, useRef, useState} from 'react';
 
 import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
@@ -28,13 +28,45 @@ export const MemoizedTooltip = memo(function MemoizedTooltip({
   dockedMetainfo,
 }: MemoizedTooltipProps): React.JSX.Element | null {
   const [tooltipRow, setTooltipRow] = useState<number | null>(null);
+  const [shiftHeld, setShiftHeld] = useState(false);
+  const shiftHeldRef = useRef(false);
+
+  useEffect(() => {
+    shiftHeldRef.current = shiftHeld;
+  }, [shiftHeld]);
+
   const {table, total, totalUnfiltered, profileType, unit, compareAbsolute, tooltipId} =
     useTooltipContext();
 
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'Shift') setShiftHeld(true);
+    };
+    const onKeyUp = (e: KeyboardEvent): void => {
+      if (e.key === 'Shift') setShiftHeld(false);
+    };
+    // If the user opens the attribution link, releases Shift in the new tab,
+    // and comes back — our window never saw the keyup, so the frozen state
+    // would stick. Clear it whenever focus leaves the tab.
+    const onBlurOrHide = (): void => setShiftHeld(false);
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup', onKeyUp);
+    window.addEventListener('blur', onBlurOrHide);
+    document.addEventListener('visibilitychange', onBlurOrHide);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
+      window.removeEventListener('blur', onBlurOrHide);
+      document.removeEventListener('visibilitychange', onBlurOrHide);
+    };
+  }, []);
+
   // This component subscribes to tooltip updates through a callback
   // passed to the TooltipProvider, avoiding the need to lift state
   useEffect(() => {
     const handleTooltipUpdate = (event: CustomEvent<{row: number | null}>): void => {
+      // While Shift is held, lock the tooltip to its original frame.
+      if (shiftHeldRef.current) return;
       setTooltipRow(event.detail.row);
     };
 
@@ -82,7 +114,7 @@ export const MemoizedTooltip = memo(function MemoizedTooltip({
     return null;
   }
   return (
-    <GraphTooltipArrow contextElement={contextElement}>
+    <GraphTooltipArrow contextElement={contextElement} frozen={shiftHeld}>
       <GraphTooltipArrowContent
         table={table}
         row={tooltipRow}
@@ -92,6 +124,7 @@ export const MemoizedTooltip = memo(function MemoizedTooltip({
         profileType={profileType}
         unit={unit}
         compareAbsolute={compareAbsolute}
+        frozen={shiftHeld}
       />
     </GraphTooltipArrow>
   );

package/src/ProfileSelector/index.tsx

@@ -21,7 +21,7 @@ import {DateTimeRange, IconButton, useGrpcMetadata, useParcaContext} from '@parc
 import {CloseIcon} from '@parca/icons';
 import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
-import {millisToProtoTimestamp, type NavigateFunction} from '@parca/utilities';
+import {millisToProtoTimestamp} from '@parca/utilities';
 
 import {
   ProfileFilter,
@@ -59,7 +59,6 @@ interface ProfileSelectorProps extends ProfileSelectorFeatures {
   closeProfile: () => void;
   enforcedProfileName: string;
   comparing: boolean;
-  navigateTo: NavigateFunction;
   setDisplayHideMetricsGraphButton?: Dispatch<SetStateAction<boolean>>;
   suffix?: '_a' | '_b'; // For comparison mode
   onSearchHook?: () => void;
@@ -104,7 +103,6 @@ const ProfileSelector = ({
   closeProfile,
   enforcedProfileName,
   comparing,
-  navigateTo: _navigateTo,
   showMetricsGraph = true,
   showSumBySelector = true,
   showProfileTypeSelector = true,