@parca/profile 0.19.151 → 0.19.152

package/src/GraphTooltipArrow/index.tsx

@@ -21,6 +21,7 @@ import {pointer} from 'd3-selection';
 interface GraphTooltipProps {
   children: React.ReactNode;
   contextElement: Element | null;
+  frozen?: boolean;
 }
 
 function createPositionedVirtualElement(contextElement: Element, x = 0, y = 0): VirtualElement {
@@ -40,7 +41,11 @@ function createPositionedVirtualElement(contextElement: Element, x = 0, y = 0):
   };
 }
 
-const GraphTooltip = ({children, contextElement}: GraphTooltipProps): React.JSX.Element => {
+const GraphTooltip = ({
+  children,
+  contextElement,
+  frozen = false,
+}: GraphTooltipProps): React.JSX.Element => {
   'use no memo';
   const [isPositioned, setIsPositioned] = useState(false);
 
@@ -60,10 +65,16 @@ const GraphTooltip = ({children, contextElement}: GraphTooltipProps): React.JSX.
     whileElementsMounted: undefined,
   });
 
+  // Read the latest `frozen` value from inside the mousemove handler without
+  // re-binding the listener every time it toggles.
+  const frozenRef = React.useRef(frozen);
+  frozenRef.current = frozen;
+
   useEffect(() => {
     if (contextElement === null) return;
 
     const onMouseMove: EventListenerOrEventListenerObject = (e: Event) => {
+      if (frozenRef.current) return; // Hold position while ⇧ Shift is held.
       const rel = pointer(e);
       const tooltipX = rel[0];
       const tooltipY = rel[1];
@@ -85,6 +96,7 @@ const GraphTooltip = ({children, contextElement}: GraphTooltipProps): React.JSX.
       style={{
         ...floatingStyles,
         visibility: !isPositioned ? 'hidden' : 'visible',
+        pointerEvents: frozen ? 'auto' : 'none',
       }}
       className="z-50 w-max"
     >

package/src/GraphTooltipArrow/openInNewTab.ts

@@ -0,0 +1,43 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// Open a URL in a new browser tab — robust to held modifier keys.
+//
+// Why this exists: the tooltip's "freeze" gesture requires the user to be
+// holding ⇧ Shift. Browsers route Shift+click on a target="_blank" link to
+// "new window" via real-keyboard state at navigation time, so both plain
+// <a target="_blank"> clicks and `window.open` fall through to a window
+// instead of a tab.
+//
+// Trick: dispatch a synthetic MouseEvent on a detached anchor with the
+// platform's "new-tab" modifier set explicitly (Cmd & Ctrl)
+// and Shift cleared. The browser reads modifier flags off the event for its
+// routing decision, so this consistently opens in a new tab.
+export function openInNewTab(url: string): void {
+  const a = document.createElement('a');
+  a.href = url;
+  a.target = '_blank';
+  a.rel = 'noopener noreferrer';
+
+  a.dispatchEvent(
+    new MouseEvent('click', {
+      bubbles: false,
+      cancelable: true,
+      view: window,
+      button: 0,
+      shiftKey: false,
+      metaKey: true,
+      ctrlKey: true,
+    })
+  );
+}

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