@parca/profile 0.16.209 → 0.16.211

package/src/GraphTooltipArrow/index.tsx

@@ -11,71 +11,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 
-import {Table} from 'apache-arrow';
 import {pointer} from 'd3-selection';
-import {CopyToClipboard} from 'react-copy-to-clipboard';
 import {usePopper} from 'react-popper';
 
-import {
-  CallgraphNode,
-  CallgraphNodeMeta,
-  FlamegraphNode,
-  FlamegraphNodeMeta,
-  FlamegraphRootNode,
-} from '@parca/client';
-import {
-  Location,
-  Mapping,
-  Function as ParcaFunction,
-} from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 import {useKeyDown} from '@parca/components';
-import {selectHoveringRow, useAppSelector} from '@parca/store';
-import {divide, getLastItem, valueFormatter} from '@parca/utilities';
-
-import {hexifyAddress, truncateString, truncateStringReverse} from '../';
-import {
-  FIELD_CUMULATIVE,
-  FIELD_DIFF,
-  FIELD_FUNCTION_FILE_NAME,
-  FIELD_FUNCTION_NAME,
-  FIELD_LOCATION_ADDRESS,
-  FIELD_MAPPING_BUILD_ID,
-  FIELD_MAPPING_FILE,
-} from '../ProfileIcicleGraph/IcicleGraphArrow';
-import {ExpandOnHover} from './ExpandOnHoverValue';
-
-const NoData = (): React.JSX.Element => {
-  return <span className="rounded bg-gray-200 px-2 dark:bg-gray-800">Not available</span>;
-};
-
-interface ExtendedCallgraphNodeMeta extends CallgraphNodeMeta {
-  lineIndex: number;
-  locationIndex: number;
-}
-
-interface HoveringNode extends FlamegraphRootNode, FlamegraphNode, CallgraphNode {
-  diff: bigint;
-  meta?: FlamegraphNodeMeta | ExtendedCallgraphNodeMeta;
-}
 
 interface GraphTooltipProps {
-  table: Table<any>;
+  children: React.ReactNode;
   x?: number;
   y?: number;
-  unit: string;
-  total: bigint;
-  totalUnfiltered: bigint;
-  hoveringNode?: HoveringNode;
   contextElement: Element | null;
   isFixed?: boolean;
   virtualContextElement?: boolean;
-  strings?: string[];
-  mappings?: Mapping[];
-  locations?: Location[];
-  functions?: ParcaFunction[];
-  type?: string;
 }
 
 const virtualElement = {
@@ -105,369 +54,14 @@ function generateGetBoundingClientRect(contextElement: Element, x = 0, y = 0): (
     } as DOMRect);
 }
 
-const TooltipMetaInfo = ({
-  hoveringNode,
-  onCopy,
-  strings,
-  mappings,
-  locations,
-  functions,
-  type = 'flamegraph',
-}: {
-  hoveringNode: HoveringNode;
-  onCopy: () => void;
-  strings?: string[];
-  mappings?: Mapping[];
-  locations?: Location[];
-  functions?: ParcaFunction[];
-  type?: string;
-}): React.JSX.Element => {
-  // populate meta from the flamegraph metadata tables
-  if (
-    type === 'flamegraph' &&
-    locations !== undefined &&
-    hoveringNode.meta?.locationIndex !== undefined &&
-    hoveringNode.meta.locationIndex !== 0
-  ) {
-    const location = locations[hoveringNode.meta.locationIndex - 1];
-    hoveringNode.meta.location = location;
-
-    if (location !== undefined) {
-      if (
-        mappings !== undefined &&
-        location.mappingIndex !== undefined &&
-        location.mappingIndex !== 0
-      ) {
-        const mapping = mappings[location.mappingIndex - 1];
-        if (strings !== undefined && mapping !== undefined) {
-          mapping.file =
-            mapping?.fileStringIndex !== undefined ? strings[mapping.fileStringIndex] : '';
-          mapping.buildId =
-            mapping?.buildIdStringIndex !== undefined ? strings[mapping.buildIdStringIndex] : '';
-        }
-        hoveringNode.meta.mapping = mapping;
-      }
-
-      if (
-        functions !== undefined &&
-        location.lines !== undefined &&
-        hoveringNode.meta.lineIndex !== undefined &&
-        hoveringNode.meta.lineIndex < location.lines.length
-      ) {
-        const func = functions[location.lines[hoveringNode.meta.lineIndex].functionIndex - 1];
-        if (strings !== undefined) {
-          func.name = strings[func.nameStringIndex];
-          func.systemName = strings[func.systemNameStringIndex];
-          func.filename = strings[func.filenameStringIndex];
-        }
-        hoveringNode.meta.function = func;
-      }
-    }
-  }
-
-  const getTextForFile = (hoveringNode: HoveringNode): string => {
-    if (hoveringNode.meta?.function == null) return '<unknown>';
-
-    return `${hoveringNode.meta.function.filename} ${
-      hoveringNode.meta.line?.line !== undefined && hoveringNode.meta.line?.line !== 0n
-        ? ` +${hoveringNode.meta.line.line.toString()}`
-        : `${
-            hoveringNode.meta.function?.startLine !== undefined &&
-            hoveringNode.meta.function?.startLine !== 0n
-              ? ` +${hoveringNode.meta.function.startLine}`
-              : ''
-          }`
-    }`;
-  };
-  const file = getTextForFile(hoveringNode);
-
-  return (
-    <>
-      <tr>
-        <td className="w-1/4">File</td>
-        <td className="w-3/4 break-all">
-          {hoveringNode.meta?.function?.filename == null ||
-          hoveringNode.meta?.function.filename === '' ? (
-            <NoData />
-          ) : (
-            <CopyToClipboard onCopy={onCopy} text={file}>
-              <button className="cursor-pointer whitespace-nowrap text-left">
-                <ExpandOnHover value={file} displayValue={truncateStringReverse(file, 40)} />
-              </button>
-            </CopyToClipboard>
-          )}
-        </td>
-      </tr>
-
-      <tr>
-        <td className="w-1/4">Address</td>
-        <td className="w-3/4 break-all">
-          {hoveringNode.meta?.location?.address == null ||
-          hoveringNode.meta?.location.address === 0n ? (
-            <NoData />
-          ) : (
-            <CopyToClipboard
-              onCopy={onCopy}
-              text={hexifyAddress(hoveringNode.meta.location.address)}
-            >
-              <button className="cursor-pointer">
-                {hexifyAddress(hoveringNode.meta.location.address)}
-              </button>
-            </CopyToClipboard>
-          )}
-        </td>
-      </tr>
-      <tr>
-        <td className="w-1/4">Binary</td>
-        <td className="w-3/4 break-all">
-          {hoveringNode.meta?.mapping == null || hoveringNode.meta.mapping.file === '' ? (
-            <NoData />
-          ) : (
-            <CopyToClipboard onCopy={onCopy} text={hoveringNode.meta.mapping.file}>
-              <button className="cursor-pointer">
-                {getLastItem(hoveringNode.meta.mapping.file)}
-              </button>
-            </CopyToClipboard>
-          )}
-        </td>
-      </tr>
-
-      <tr>
-        <td className="w-1/4">Build Id</td>
-        <td className="w-3/4 break-all">
-          {hoveringNode.meta?.mapping == null || hoveringNode.meta?.mapping.buildId === '' ? (
-            <NoData />
-          ) : (
-            <CopyToClipboard onCopy={onCopy} text={hoveringNode.meta.mapping.buildId}>
-              <button className="cursor-pointer">
-                {truncateString(getLastItem(hoveringNode.meta.mapping.buildId) as string, 28)}
-              </button>
-            </CopyToClipboard>
-          )}
-        </td>
-      </tr>
-    </>
-  );
-};
-
-let timeoutHandle: ReturnType<typeof setTimeout> | null = null;
-
-export const GraphTooltipContent = ({
-  hoveringNode,
-  unit,
-  total,
-  totalUnfiltered,
-  isFixed,
-  strings,
-  mappings,
-  locations,
-  functions,
-  type = 'flamegraph',
-}: {
-  hoveringNode: HoveringNode;
-  unit: string;
-  total: bigint;
-  totalUnfiltered: bigint;
-  isFixed: boolean;
-  strings?: string[];
-  mappings?: Mapping[];
-  locations?: Location[];
-  functions?: ParcaFunction[];
-  type?: string;
-}): React.JSX.Element => {
-  const [isCopied, setIsCopied] = useState<boolean>(false);
-
-  const onCopy = (): void => {
-    setIsCopied(true);
-
-    if (timeoutHandle !== null) {
-      clearTimeout(timeoutHandle);
-    }
-    timeoutHandle = setTimeout(() => setIsCopied(false), 3000);
-  };
-
-  const hoveringNodeCumulative = hoveringNode.cumulative;
-  const diff = hoveringNode.diff;
-  const prevValue = hoveringNodeCumulative - diff;
-  const diffRatio = diff !== 0n ? divide(diff, prevValue) : 0;
-  const diffSign = diff > 0 ? '+' : '';
-  const diffValueText = diffSign + valueFormatter(diff, unit, 1);
-  const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
-  const diffText = `${diffValueText} (${diffPercentageText})`;
-
-  const getTextForCumulative = (hoveringNodeCumulative: bigint): string => {
-    const filtered =
-      totalUnfiltered > total
-        ? ` / ${(100 * divide(hoveringNodeCumulative, total)).toFixed(2)}% of filtered`
-        : '';
-    return `${valueFormatter(hoveringNodeCumulative, unit, 2)}
-    (${(100 * divide(hoveringNodeCumulative, totalUnfiltered)).toFixed(2)}%${filtered})`;
-  };
-
-  return (
-    <div className={`flex text-sm ${isFixed ? 'w-full' : ''}`}>
-      <div className={`m-auto w-full ${isFixed ? 'w-full' : ''}`}>
-        <div className="min-h-52 flex w-[500px] flex-col justify-between rounded-lg border border-gray-300 bg-gray-50 p-3 shadow-lg dark:border-gray-500 dark:bg-gray-900">
-          <div className="flex flex-row">
-            <div className="mx-2">
-              <div className="flex h-10 items-center break-all font-semibold">
-                {hoveringNode.meta === undefined ? (
-                  <p>root</p>
-                ) : (
-                  <>
-                    {hoveringNode.meta.function !== undefined &&
-                    hoveringNode.meta.function.name !== '' ? (
-                      <CopyToClipboard onCopy={onCopy} text={hoveringNode.meta.function.name}>
-                        <button className="cursor-pointer text-left">
-                          {hoveringNode.meta.function.name}
-                        </button>
-                      </CopyToClipboard>
-                    ) : (
-                      <>
-                        {hoveringNode.meta.location !== undefined &&
-                        hoveringNode.meta.location.address !== 0n ? (
-                          <CopyToClipboard
-                            onCopy={onCopy}
-                            text={hexifyAddress(hoveringNode.meta.location.address)}
-                          >
-                            <button className="cursor-pointer text-left">
-                              {hexifyAddress(hoveringNode.meta.location.address)}
-                            </button>
-                          </CopyToClipboard>
-                        ) : (
-                          <p>unknown</p>
-                        )}
-                      </>
-                    )}
-                  </>
-                )}
-              </div>
-              <table className="my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300">
-                <tbody>
-                  <tr>
-                    <td className="w-1/4">Cumulative</td>
-
-                    <td className="w-3/4">
-                      <CopyToClipboard
-                        onCopy={onCopy}
-                        text={getTextForCumulative(hoveringNodeCumulative)}
-                      >
-                        <button className="cursor-pointer">
-                          {getTextForCumulative(hoveringNodeCumulative)}
-                        </button>
-                      </CopyToClipboard>
-                    </td>
-                  </tr>
-                  {hoveringNode.diff !== undefined && diff !== 0n && (
-                    <tr>
-                      <td className="w-1/4">Diff</td>
-                      <td className="w-3/4">
-                        <CopyToClipboard onCopy={onCopy} text={diffText}>
-                          <button className="cursor-pointer">{diffText}</button>
-                        </CopyToClipboard>
-                      </td>
-                    </tr>
-                  )}
-                  <TooltipMetaInfo
-                    onCopy={onCopy}
-                    hoveringNode={hoveringNode}
-                    strings={strings}
-                    mappings={mappings}
-                    locations={locations}
-                    functions={functions}
-                    type={type}
-                  />
-                </tbody>
-              </table>
-            </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>
-    </div>
-  );
-};
-
 const GraphTooltip = ({
-  table,
+  children,
   x,
   y,
-  unit,
-  total,
-  totalUnfiltered,
   contextElement,
   isFixed = false,
   virtualContextElement = true,
-  strings,
-  mappings,
-  locations,
-  functions,
-  type = 'flamegraph',
 }: GraphTooltipProps): React.JSX.Element => {
-  const hoveringNodeState = useAppSelector(selectHoveringRow);
-  const hoveringNode = useMemo<HoveringNode | undefined>(() => {
-    const s = hoveringNodeState;
-    if (s === undefined) {
-      return undefined;
-    }
-
-    const mappingFile: string = table.getChild(FIELD_MAPPING_FILE)?.get(s.row) ?? '';
-    const mappingBuildID: string = table.getChild(FIELD_MAPPING_BUILD_ID)?.get(s.row) ?? '';
-    const locationAddress: bigint = table.getChild(FIELD_LOCATION_ADDRESS)?.get(s.row) ?? 0n;
-    const functionName: string = table.getChild(FIELD_FUNCTION_NAME)?.get(s.row) ?? '';
-    const functionFileName: string = table.getChild(FIELD_FUNCTION_FILE_NAME)?.get(s.row) ?? '';
-    const cumulative: bigint = table.getChild(FIELD_CUMULATIVE)?.get(s.row) ?? 0n;
-    const diff: bigint = table.getChild(FIELD_DIFF)?.get(s.row) ?? 0n;
-
-    const fhn: HoveringNode = {
-      id: '',
-      flat: 0n,
-      children: [],
-
-      cumulative,
-      diff: diff === null ? 0n : diff,
-      meta: {
-        locationIndex: 0,
-        lineIndex: 0,
-        mapping: {
-          id: '',
-          start: 0n,
-          limit: 0n,
-          offset: 0n,
-          file: mappingFile,
-          buildId: mappingBuildID,
-          hasFunctions: false,
-          hasFilenames: false,
-          hasLineNumbers: false,
-          hasInlineFrames: false,
-          fileStringIndex: 0,
-          buildIdStringIndex: 0,
-        },
-        location: {
-          id: '',
-          address: locationAddress,
-          mappingId: '',
-          isFolded: false,
-          lines: [],
-          mappingIndex: 0,
-        },
-        function: {
-          id: '',
-          startLine: 0n,
-          name: functionName,
-          systemName: '',
-          filename: functionFileName,
-          nameStringIndex: 0,
-          systemNameStringIndex: 0,
-          filenameStringIndex: 0,
-        },
-      },
-    };
-    return fhn;
-  }, [table, hoveringNodeState]);
-
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
   const {styles, attributes, ...popperProps} = usePopper(
@@ -532,31 +126,11 @@ const GraphTooltip = ({
     };
   }, [contextElement, popperProps, isShiftDown, x, y]);
 
-  if (hoveringNode === undefined || hoveringNode == null) return <></>;
-
   return isFixed ? (
-    <GraphTooltipContent
-      hoveringNode={hoveringNode}
-      unit={unit}
-      total={total}
-      totalUnfiltered={totalUnfiltered}
-      isFixed={isFixed}
-      type={type}
-    />
+    <>{children}</>
   ) : (
     <div ref={setPopperElement} style={styles.popper} {...attributes.popper}>
-      <GraphTooltipContent
-        hoveringNode={hoveringNode}
-        unit={unit}
-        total={total}
-        totalUnfiltered={totalUnfiltered}
-        isFixed={isFixed}
-        strings={strings}
-        mappings={mappings}
-        locations={locations}
-        functions={functions}
-        type={type}
-      />
+      {children}
     </div>
   );
 };

package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx

@@ -17,7 +17,7 @@ import {Table} from 'apache-arrow';
 import cx from 'classnames';
 
 import {useKeyDown} from '@parca/components';
-import {selectBinaries, setHoveringRow, useAppDispatch, useAppSelector} from '@parca/store';
+import {selectBinaries, useAppSelector} from '@parca/store';
 import {isSearchMatch, scaleLinear} from '@parca/utilities';
 
 import {
@@ -44,6 +44,7 @@ interface IcicleGraphNodesProps {
   level: number;
   curPath: string[];
   setCurPath: (path: string[]) => void;
+  setHoveringRow: (row: number | null) => void;
   path: string[];
   xScale: (value: bigint) => number;
   searchString?: string;
@@ -64,6 +65,7 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({
   level,
   path,
   setCurPath,
+  setHoveringRow,
   curPath,
   sortBy,
   searchString,
@@ -100,6 +102,7 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({
         height={RowHeight}
         path={path}
         setCurPath={setCurPath}
+        setHoveringRow={setHoveringRow}
         level={level}
         curPath={curPath}
         total={total}
@@ -132,6 +135,7 @@ interface IcicleNodeProps {
   path: string[];
   total: bigint;
   setCurPath: (path: string[]) => void;
+  setHoveringRow: (row: number | null) => void;
   xScale: (value: bigint) => number;
   isRoot?: boolean;
   searchString?: string;
@@ -166,12 +170,12 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
   xScale,
   isRoot = false,
   searchString,
+  setHoveringRow,
   sortBy,
   darkMode,
   compareMode,
 }: IcicleNodeProps): React.JSX.Element {
   const {isShiftDown} = useKeyDown();
-  const dispatch = useAppDispatch();
 
   // get the columns to read from
   const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
@@ -272,12 +276,12 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
 
   const onMouseEnter = (): void => {
     if (isShiftDown) return;
-    dispatch(setHoveringRow({row}));
+    setHoveringRow(row);
   };
 
   const onMouseLeave = (): void => {
     if (isShiftDown) return;
-    dispatch(setHoveringRow(undefined));
+    setHoveringRow(null);
   };
 
   return (
@@ -326,6 +330,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
           path={nextPath}
           curPath={nextCurPath}
           setCurPath={setCurPath}
+          setHoveringRow={setHoveringRow}
           searchString={searchString}
           sortBy={sortBy}
           darkMode={darkMode}

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -32,6 +32,7 @@ import {
 } from '@parca/utilities';
 
 import GraphTooltipArrow from '../../GraphTooltipArrow';
+import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import ColorStackLegend from './ColorStackLegend';
 import {IcicleNode, RowHeight, mappingColors} from './IcicleGraphNodes';
 import {extractFeature} from './utils';
@@ -39,9 +40,12 @@ import {extractFeature} from './utils';
 export const FIELD_MAPPING_FILE = 'mapping_file';
 export const FIELD_MAPPING_BUILD_ID = 'mapping_build_id';
 export const FIELD_LOCATION_ADDRESS = 'location_address';
+export const FIELD_LOCATION_LINE = 'location_line';
 export const FIELD_FUNCTION_NAME = 'function_name';
 export const FIELD_FUNCTION_FILE_NAME = 'function_file_name';
+export const FIELD_FUNCTION_START_LINE = 'function_startline';
 export const FIELD_CHILDREN = 'children';
+export const FIELD_LABELS = 'labels';
 export const FIELD_CUMULATIVE = 'cumulative';
 export const FIELD_DIFF = 'diff';
 
@@ -73,6 +77,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   const isDarkMode = useAppSelector(selectDarkMode);
 
   const [height, setHeight] = useState(0);
+  const [hoveringRow, setHoveringRow] = useState<number | null>(null);
   const sortBy = FIELD_FUNCTION_NAME; // TODO: make this configurable via UI
   const svg = useRef(null);
   const ref = useRef<SVGGElement>(null);
@@ -166,13 +171,16 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
         navigateTo={navigateTo}
         compareMode={compareMode}
       />
-      <GraphTooltipArrow
-        table={table}
-        unit={sampleUnit}
-        total={total}
-        totalUnfiltered={total + filtered}
-        contextElement={svg.current}
-      />
+      <GraphTooltipArrow contextElement={svg.current}>
+        <GraphTooltipArrowContent
+          table={table}
+          row={hoveringRow}
+          isFixed={false}
+          total={total}
+          totalUnfiltered={total + filtered}
+          unit={sampleUnit}
+        />
+      </GraphTooltipArrow>
       <svg
         className="font-robotoMono"
         width={width}
@@ -198,6 +206,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
               level={0}
               isRoot={true}
               searchString={currentSearchString}
+              setHoveringRow={setHoveringRow}
               sortBy={sortBy}
               darkMode={isDarkMode}
               compareMode={compareMode}

package/src/ProfileIcicleGraph/index.tsx

@@ -118,7 +118,7 @@ const ProfileIcicleGraph = ({
   return (
     <div className="relative">
       {compareMode && <DiffLegend />}
-      <div ref={ref}>
+      <div ref={ref} className="min-h-48">
         {graph !== undefined && (
           <IcicleGraph
             width={dimensions?.width}