@parca/profile 0.16.269 → 0.16.274

package/src/GraphTooltipArrow/DockedGraphTooltip/index.tsx

@@ -11,25 +11,18 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useState} from 'react';
-
+import {Icon} from '@iconify/react';
 import {Table} from 'apache-arrow';
 import cx from 'classnames';
-import {CopyToClipboard} from 'react-copy-to-clipboard';
-import {Tooltip} from 'react-tooltip';
 import {useWindowSize} from 'react-use';
 
-import {Button, IconButton, useParcaContext} from '@parca/components';
-import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
+import {useParcaContext} from '@parca/components';
 import {getLastItem} from '@parca/utilities';
 
 import {hexifyAddress, truncateString, truncateStringReverse} from '../../utils';
-import {ExpandOnHover} from '../ExpandOnHoverValue';
 import {useGraphTooltip} from '../useGraphTooltip';
 import {useGraphTooltipMetaInfo} from '../useGraphTooltipMetaInfo';
 
-let timeoutHandle: ReturnType<typeof setTimeout> | null = null;
-
 interface Props {
   table: Table<any>;
   unit: string;
@@ -42,28 +35,24 @@ interface Props {
 const InfoSection = ({
   title,
   value,
-  onCopy,
-  copyText,
   minWidth = '',
 }: {
   title: string;
   value: string | JSX.Element;
-  copyText: string;
-  onCopy: () => void;
   minWidth?: string;
 }): JSX.Element => {
   return (
     <div className={cx('flex shrink-0 flex-col gap-1 p-2', {[minWidth]: minWidth != null})}>
       <p className="text-sm font-medium leading-5 text-gray-500 dark:text-gray-400">{title}</p>
-      <div className="text-lg font-normal text-gray-900 dark:text-gray-50">
-        <CopyToClipboard onCopy={onCopy} text={copyText}>
-          <button>{value}</button>
-        </CopyToClipboard>
-      </div>
+      <div className="text-lg font-normal text-gray-900 dark:text-gray-50">{value}</div>
     </div>
   );
 };
 
+const NoData = (): React.JSX.Element => {
+  return <span className="rounded bg-gray-200 px-2 dark:bg-gray-800">Not available</span>;
+};
+
 export const DockedGraphTooltip = ({
   table,
   unit,
@@ -73,19 +62,9 @@ export const DockedGraphTooltip = ({
   level,
 }: Props): JSX.Element => {
   let {width} = useWindowSize();
-  const {profileExplorer, navigateTo, enableSourcesView} = useParcaContext();
+  const {profileExplorer, navigateTo} = useParcaContext();
   const {PaddingX} = profileExplorer ?? {PaddingX: 0};
   width = width - PaddingX - 24;
-  const [isCopied, setIsCopied] = useState<boolean>(false);
-
-  const onCopy = (): void => {
-    setIsCopied(true);
-
-    if (timeoutHandle !== null) {
-      clearTimeout(timeoutHandle);
-    }
-    timeoutHandle = setTimeout(() => setIsCopied(false), 3000);
-  };
 
   const graphTooltipData = useGraphTooltip({
     table,
@@ -100,16 +79,12 @@ export const DockedGraphTooltip = ({
     labelPairs,
     functionFilename,
     file,
-    openFile,
-    isSourceAvailable,
     locationAddress,
     mappingFile,
     mappingBuildID,
     inlined,
   } = useGraphTooltipMetaInfo({table, row: row ?? 0, navigateTo});
 
-  const [_, setIsDocked] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
-
   if (graphTooltipData === null) {
     return <></>;
   }
@@ -127,9 +102,9 @@ export const DockedGraphTooltip = ({
     )
   );
 
+  const isMappingBuildIDAvailable = mappingBuildID !== null && mappingBuildID !== '';
   const inlinedText = inlined === null ? 'merged' : inlined ? 'yes' : 'no';
-  const addressText = locationAddress !== 0n ? hexifyAddress(locationAddress) : 'unknown';
-  const fileText = functionFilename !== '' ? file : 'Not available';
+  const addressText = locationAddress !== 0n ? hexifyAddress(locationAddress) : <NoData />;
 
   return (
     <div
@@ -141,117 +116,48 @@ export const DockedGraphTooltip = ({
           {row === 0 ? (
             <p>root</p>
           ) : (
-            <>
-              {name !== '' ? (
-                <CopyToClipboard onCopy={onCopy} text={name}>
-                  <button className="cursor-pointer text-left">{name}</button>
-                </CopyToClipboard>
-              ) : (
-                <>
-                  {locationAddress !== 0n ? (
-                    <CopyToClipboard onCopy={onCopy} text={hexifyAddress(locationAddress)}>
-                      <button className="cursor-pointer text-left">
-                        {hexifyAddress(locationAddress)}
-                      </button>
-                    </CopyToClipboard>
-                  ) : (
-                    <p>unknown</p>
-                  )}
-                </>
-              )}
-            </>
+            <p>
+              {name !== ''
+                ? name
+                : locationAddress !== 0n
+                ? hexifyAddress(locationAddress)
+                : 'unknown'}
+            </p>
           )}
-          <IconButton
-            onClick={() => setIsDocked(false)}
-            icon="mdi:dock-window"
-            title="Undock MetaInfo Panel"
-          />
         </div>
         <div className="flex justify-between gap-3">
-          <InfoSection
-            title="Cumulative"
-            value={cumulativeText}
-            onCopy={onCopy}
-            copyText={cumulativeText}
-            minWidth="w-44"
-          />
-          {diff !== 0n ? (
-            <InfoSection
-              title="Diff"
-              value={diffText}
-              onCopy={onCopy}
-              copyText={diffText}
-              minWidth="w-44"
-            />
-          ) : null}
+          <InfoSection title="Cumulative" value={cumulativeText} minWidth="w-44" />
+          {diff !== 0n ? <InfoSection title="Diff" value={diffText} minWidth="w-44" /> : null}
           <InfoSection
             title="File"
-            value={
-              <div className="flex gap-2">
-                <ExpandOnHover
-                  value={fileText}
-                  displayValue={truncateStringReverse(fileText, 45)}
-                />
-                <div
-                  className={cx('flex items-center gap-2', {
-                    hidden: enableSourcesView === false || functionFilename === '',
-                  })}
-                >
-                  <div
-                    data-tooltip-id="open-source-button-help"
-                    data-tooltip-content="There is no source code uploaded for this build"
-                  >
-                    <Button
-                      variant={'neutral'}
-                      onClick={() => openFile()}
-                      className="shrink-0"
-                      disabled={!isSourceAvailable}
-                    >
-                      open
-                    </Button>
-                  </div>
-                  {!isSourceAvailable ? <Tooltip id="open-source-button-help" /> : null}
-                </div>
-              </div>
-            }
-            onCopy={onCopy}
-            copyText={file}
+            value={functionFilename !== '' ? truncateStringReverse(file, 45) : <NoData />}
             minWidth={'w-[460px]'}
           />
-          <InfoSection
-            title="Address"
-            value={addressText}
-            onCopy={onCopy}
-            copyText={addressText}
-            minWidth="w-44"
-          />
-          <InfoSection
-            title="Inlined"
-            value={inlinedText}
-            onCopy={onCopy}
-            copyText={inlinedText}
-            minWidth="w-44"
-          />
+          <InfoSection title="Address" value={addressText} minWidth="w-44" />
+          <InfoSection title="Inlined" value={inlinedText} minWidth="w-44" />
           <InfoSection
             title="Binary"
-            value={(mappingFile != null ? getLastItem(mappingFile) : null) ?? 'Not available'}
-            onCopy={onCopy}
-            copyText={mappingFile ?? 'Not available'}
+            value={(mappingFile != null ? getLastItem(mappingFile) : null) ?? <NoData />}
             minWidth="w-44"
           />
           <InfoSection
             title="Build ID"
-            value={truncateString(getLastItem(mappingBuildID) ?? 'Not available', 28)}
-            onCopy={onCopy}
-            copyText={mappingBuildID ?? 'Not available'}
+            value={
+              isMappingBuildIDAvailable ? (
+                <div>{truncateString(getLastItem(mappingBuildID) as string, 28)}</div>
+              ) : (
+                <NoData />
+              )
+            }
           />
         </div>
         <div>
           <div className="flex h-5 gap-1">{labels}</div>
         </div>
-        <span className="mx-2 block text-xs text-gray-500">
-          {isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.'}
-        </span>
+      </div>
+      <div className="flex w-full items-center gap-1 text-xs text-gray-500">
+        <Icon icon="iconoir:mouse-button-right" />
+        <div>Right click to show context menu</div>
       </div>
     </div>
   );

package/src/GraphTooltipArrow/index.tsx

@@ -16,8 +16,6 @@ import React, {useEffect, useState} from 'react';
 import {pointer} from 'd3-selection';
 import {usePopper} from 'react-popper';
 
-import {useKeyDown} from '@parca/components';
-
 interface GraphTooltipProps {
   children: React.ReactNode;
   x?: number;
@@ -25,6 +23,7 @@ interface GraphTooltipProps {
   contextElement: Element | null;
   isFixed?: boolean;
   virtualContextElement?: boolean;
+  isContextMenuOpen?: boolean;
 }
 
 const virtualElement = {
@@ -61,6 +60,7 @@ const GraphTooltip = ({
   contextElement,
   isFixed = false,
   virtualContextElement = true,
+  isContextMenuOpen = false,
 }: GraphTooltipProps): React.JSX.Element => {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
@@ -88,12 +88,10 @@ const GraphTooltip = ({
     }
   );
 
-  const {isShiftDown} = useKeyDown();
-
   useEffect(() => {
     if (contextElement === null) return;
     const onMouseMove: EventListenerOrEventListenerObject = (e: Event) => {
-      if (isShiftDown) {
+      if (isContextMenuOpen) {
         return;
       }
 
@@ -117,7 +115,7 @@ const GraphTooltip = ({
     return () => {
       contextElement.removeEventListener('mousemove', onMouseMove);
     };
-  }, [contextElement, popperProps, isShiftDown, x, y]);
+  }, [contextElement, popperProps, x, y, isContextMenuOpen]);
 
   return isFixed ? (
     <>{children}</>

package/src/MetricsGraph/MetricsContextMenu/index.tsx

@@ -0,0 +1,81 @@
+// 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.
+
+import {Icon} from '@iconify/react';
+import {Item, Menu, Submenu} from 'react-contexify';
+
+import {Label} from '@parca/client';
+
+import {HighlightedSeries} from '../';
+
+interface MetricsContextMenuProps {
+  menuId: string;
+  onAddLabelMatcher: (
+    labels: {key: string; value: string} | Array<{key: string; value: string}>
+  ) => void;
+  highlighted: HighlightedSeries | null;
+  trackVisibility: (isVisible: boolean) => void;
+}
+
+const MetricsContextMenu = ({
+  menuId,
+  onAddLabelMatcher,
+  highlighted,
+  trackVisibility,
+}: MetricsContextMenuProps): JSX.Element => {
+  const labels = highlighted?.labels.filter((label: Label) => label.name !== '__name__');
+
+  const handleFocusOnSingleSeries = (): void => {
+    const labelsToAdd = labels?.map((label: Label) => ({
+      key: label.name,
+      value: label.value,
+    }));
+
+    labelsToAdd !== undefined && onAddLabelMatcher(labelsToAdd);
+  };
+
+  return (
+    <Menu id={menuId} onVisibilityChange={trackVisibility}>
+      <Item id="focus-on-single-series" onClick={handleFocusOnSingleSeries}>
+        <div className="flex w-full items-center gap-2">
+          <Icon icon="ph:star" />
+          <div>Focus only on this series</div>
+        </div>
+      </Item>
+      <Submenu
+        label={
+          <div className="flex w-full items-center gap-2">
+            <Icon icon="material-symbols:add" />
+            <div>Add to query</div>
+          </div>
+        }
+        style={{maxHeight: '300px', overflow: 'scroll'}}
+      >
+        {labels?.map((label: Label) => (
+          <Item
+            key={label.name}
+            id={label.name}
+            onClick={() => onAddLabelMatcher({key: label.name, value: label.value})}
+            style={{maxWidth: '400px', overflow: 'hidden'}}
+          >
+            <div className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+              {`${label.name}="${label.value}"`}
+            </div>
+          </Item>
+        ))}
+      </Submenu>
+    </Menu>
+  );
+};
+
+export default MetricsContextMenu;

package/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -13,6 +13,7 @@
 
 import {useEffect, useState} from 'react';
 
+import {Icon} from '@iconify/react';
 import type {VirtualElement} from '@popperjs/core';
 import {usePopper} from 'react-popper';
 
@@ -27,7 +28,6 @@ interface Props {
   x: number;
   y: number;
   highlighted: HighlightedSeries;
-  onLabelClick: (labelName: string, labelValue: string) => void;
   contextElement: Element | null;
   sampleUnit: string;
   delta: boolean;
@@ -65,7 +65,6 @@ const MetricsTooltip = ({
   x,
   y,
   highlighted,
-  onLabelClick,
   contextElement,
   sampleUnit,
   delta,
@@ -150,26 +149,23 @@ const MetricsTooltip = ({
                 <span className="my-2 block text-gray-500">
                   {highlighted.labels
                     .filter((label: Label) => label.name !== '__name__')
-                    .map(function (label: Label) {
-                      return (
-                        <button
-                          key={label.name}
-                          type="button"
-                          className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
-                          onClick={() => onLabelClick(label.name, label.value)}
-                        >
-                          <TextWithTooltip
-                            text={`${label.name}="${label.value}"`}
-                            maxTextLength={37}
-                            id={`tooltip-${label.name}-${label.value}`}
-                          />
-                        </button>
-                      );
-                    })}
-                </span>
-                <span className="block text-xs text-gray-500">
-                  Hold shift and click label to add to query.
+                    .map((label: Label) => (
+                      <div
+                        key={label.name}
+                        className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
+                      >
+                        <TextWithTooltip
+                          text={`${label.name}="${label.value}"`}
+                          maxTextLength={37}
+                          id={`tooltip-${label.name}-${label.value}`}
+                        />
+                      </div>
+                    ))}
                 </span>
+                <div className="flex w-full items-center gap-1 text-xs text-gray-500">
+                  <Icon icon="iconoir:mouse-button-right" />
+                  <div>Right click to add labels to query.</div>
+                </div>
               </div>
             </div>
           </div>

package/src/MetricsGraph/index.tsx

@@ -11,14 +11,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {Fragment, useRef, useState} from 'react';
+import React, {Fragment, useCallback, useRef, useState} from 'react';
 
 import * as d3 from 'd3';
 import {pointer} from 'd3-selection';
 import throttle from 'lodash.throttle';
+import {useContextMenu} from 'react-contexify';
 
 import {Label, MetricsSample, MetricsSeries as MetricsSeriesPb} from '@parca/client';
-import {DateTimeRange, useKeyDown} from '@parca/components';
+import {DateTimeRange} from '@parca/components';
 import {
   formatDate,
   formatForTimespan,
@@ -29,6 +30,7 @@ import {
 import {MergedProfileSelection} from '..';
 import MetricsCircle from '../MetricsCircle';
 import MetricsSeries from '../MetricsSeries';
+import MetricsContextMenu from './MetricsContextMenu';
 import MetricsTooltip from './MetricsTooltip';
 
 interface Props {
@@ -37,7 +39,9 @@ interface Props {
   to: number;
   profile: MergedProfileSelection | null;
   onSampleClick: (timestamp: number, value: number, labels: Label[]) => void;
-  onLabelClick: (labelName: string, labelValue: string) => void;
+  addLabelMatcher: (
+    labels: {key: string; value: string} | Array<{key: string; value: string}>
+  ) => void;
   setTimeRange: (range: DateTimeRange) => void;
   sampleUnit: string;
   width?: number;
@@ -68,7 +72,7 @@ const MetricsGraph = ({
   to,
   profile,
   onSampleClick,
-  onLabelClick,
+  addLabelMatcher,
   setTimeRange,
   sampleUnit,
   width = 0,
@@ -82,7 +86,7 @@ const MetricsGraph = ({
       to={to}
       profile={profile}
       onSampleClick={onSampleClick}
-      onLabelClick={onLabelClick}
+      addLabelMatcher={addLabelMatcher}
       setTimeRange={setTimeRange}
       sampleUnit={sampleUnit}
       width={width}
@@ -110,7 +114,7 @@ export const RawMetricsGraph = ({
   to,
   profile,
   onSampleClick,
-  onLabelClick,
+  addLabelMatcher,
   setTimeRange,
   width,
   height = 50,
@@ -122,8 +126,8 @@ export const RawMetricsGraph = ({
   const [hovering, setHovering] = useState(false);
   const [relPos, setRelPos] = useState(-1);
   const [pos, setPos] = useState([0, 0]);
+  const [isContextMenuOpen, setIsContextMenuOpen] = useState<boolean>(false);
   const metricPointRef = useRef(null);
-  const {isShiftDown} = useKeyDown();
 
   // the time of the selected point is the start of the merge window
   const time: number = parseFloat(profile?.HistoryParams().merge_from);
@@ -222,11 +226,6 @@ export const RawMetricsGraph = ({
   const highlighted = getClosest();
 
   const onMouseDown = (e: React.MouseEvent<SVGSVGElement | HTMLDivElement, MouseEvent>): void => {
-    // if shift is down, disable mouse behavior
-    if (isShiftDown) {
-      return;
-    }
-
     // only left mouse button
     if (e.button !== 0) {
       return;
@@ -257,10 +256,6 @@ export const RawMetricsGraph = ({
   };
 
   const onMouseUp = (e: React.MouseEvent<SVGSVGElement | HTMLDivElement, MouseEvent>): void => {
-    if (isShiftDown) {
-      return;
-    }
-
     setDragging(false);
 
     if (relPos === -1) {
@@ -293,8 +288,7 @@ export const RawMetricsGraph = ({
   const throttledSetPos = throttle(setPos, 20);
 
   const onMouseMove = (e: React.MouseEvent<SVGSVGElement | HTMLDivElement, MouseEvent>): void => {
-    // do not update position if shift is down because this means the user is locking the tooltip
-    if (isShiftDown) {
+    if (isContextMenuOpen) {
       return;
     }
 
@@ -358,23 +352,49 @@ export const RawMetricsGraph = ({
 
   const selected = findSelectedProfile();
 
+  const MENU_ID = 'metrics-context-menu';
+
+  const {show} = useContextMenu({
+    id: MENU_ID,
+  });
+
+  const displayMenu = useCallback(
+    (e: React.MouseEvent): void => {
+      show({
+        event: e,
+      });
+    },
+    [show]
+  );
+
+  const trackVisibility = (isVisible: boolean): void => {
+    setIsContextMenuOpen(isVisible);
+  };
+
   return (
     <>
+      <MetricsContextMenu
+        onAddLabelMatcher={addLabelMatcher}
+        menuId={MENU_ID}
+        highlighted={highlighted}
+        trackVisibility={trackVisibility}
+      />
       {highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (
         <div
           onMouseMove={onMouseMove}
           onMouseEnter={() => setHovering(true)}
           onMouseLeave={() => setHovering(false)}
         >
-          <MetricsTooltip
-            x={pos[0] + margin}
-            y={pos[1] + margin}
-            highlighted={highlighted}
-            onLabelClick={onLabelClick}
-            contextElement={graph.current}
-            sampleUnit={sampleUnit}
-            delta={profile !== null ? profile?.query.profType.delta : false}
-          />
+          {!isContextMenuOpen && (
+            <MetricsTooltip
+              x={pos[0] + margin}
+              y={pos[1] + margin}
+              highlighted={highlighted}
+              contextElement={graph.current}
+              sampleUnit={sampleUnit}
+              delta={profile !== null ? profile?.query.profType.delta : false}
+            />
+          )}
         </div>
       )}
       <div
@@ -383,6 +403,7 @@ export const RawMetricsGraph = ({
           setHovering(true);
         }}
         onMouseLeave={() => setHovering(false)}
+        onContextMenu={displayMenu}
       >
         <svg
           width={`${width}px`}