@parca/profile 0.16.251 → 0.16.252

package/src/GraphTooltipArrow/Content.tsx

@@ -18,27 +18,14 @@ import cx from 'classnames';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
 import {Tooltip} from 'react-tooltip';
 
-import {QueryRequest_ReportType} from '@parca/client';
-import {Button, useParcaContext, useURLState} from '@parca/components';
-import {divide, getLastItem, valueFormatter, type NavigateFunction} from '@parca/utilities';
+import {Button, IconButton, useParcaContext} from '@parca/components';
+import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
+import {getLastItem, type NavigateFunction} from '@parca/utilities';
 
-import {
-  FIELD_CUMULATIVE,
-  FIELD_DIFF,
-  FIELD_FUNCTION_FILE_NAME,
-  FIELD_FUNCTION_START_LINE,
-  FIELD_LABELS,
-  FIELD_LOCATION_ADDRESS,
-  FIELD_LOCATION_LINE,
-  FIELD_MAPPING_BUILD_ID,
-  FIELD_MAPPING_FILE,
-} from '../ProfileIcicleGraph/IcicleGraphArrow';
-import {arrowToString, nodeLabel} from '../ProfileIcicleGraph/IcicleGraphArrow/utils';
-import {ProfileSource} from '../ProfileSource';
-import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
-import {useQuery} from '../useQuery';
 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;
 
@@ -69,14 +56,20 @@ const GraphTooltipArrowContent = ({
 }: GraphTooltipArrowContentProps): React.JSX.Element => {
   const [isCopied, setIsCopied] = useState<boolean>(false);
 
-  if (row === null) {
+  const graphTooltipData = useGraphTooltip({
+    table,
+    unit,
+    total,
+    totalUnfiltered,
+    row,
+    level,
+  });
+  const [_, setIsDocked] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
+
+  if (graphTooltipData === null) {
     return <></>;
   }
 
-  const locationAddress: bigint = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row) ?? 0n;
-  const cumulative: bigint = BigInt(table.getChild(FIELD_CUMULATIVE)?.get(row)) ?? 0n;
-  const diff: bigint = BigInt(table.getChild(FIELD_DIFF)?.get(row)) ?? 0n;
-
   const onCopy = (): void => {
     setIsCopied(true);
 
@@ -86,23 +79,7 @@ const GraphTooltipArrowContent = ({
     timeoutHandle = setTimeout(() => setIsCopied(false), 3000);
   };
 
-  const prevValue = cumulative - 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 name = nodeLabel(table, row, level, false);
-
-  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})`;
-  };
+  const {name, locationAddress, cumulativeText, diffText, diff, row: rowNumber} = graphTooltipData;
 
   return (
     <div className={`flex text-sm ${isFixed ? 'w-full' : ''}`}>
@@ -110,7 +87,7 @@ const GraphTooltipArrowContent = ({
         <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">
+              <div className="flex h-10 items-start justify-between gap-4 break-all font-semibold">
                 {row === 0 ? (
                   <p>root</p>
                 ) : (
@@ -134,6 +111,11 @@ const GraphTooltipArrowContent = ({
                     )}
                   </>
                 )}
+                <IconButton
+                  onClick={() => setIsDocked(true)}
+                  icon="mdi:dock-bottom"
+                  title="Dock MetaInfo Panel"
+                />
               </div>
               <table className="my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300">
                 <tbody>
@@ -141,10 +123,8 @@ const GraphTooltipArrowContent = ({
                     <td className="w-1/4">Cumulative</td>
 
                     <td className="w-3/4">
-                      <CopyToClipboard onCopy={onCopy} text={getTextForCumulative(cumulative)}>
-                        <button className="cursor-pointer">
-                          {getTextForCumulative(cumulative)}
-                        </button>
+                      <CopyToClipboard onCopy={onCopy} text={cumulativeText}>
+                        <button className="cursor-pointer">{cumulativeText}</button>
                       </CopyToClipboard>
                     </td>
                   </tr>
@@ -160,7 +140,7 @@ const GraphTooltipArrowContent = ({
                   )}
                   <TooltipMetaInfo
                     table={table}
-                    row={row}
+                    row={rowNumber}
                     onCopy={onCopy}
                     navigateTo={navigateTo}
                   />
@@ -190,57 +170,18 @@ const TooltipMetaInfo = ({
   onCopy: () => void;
   navigateTo: NavigateFunction;
 }): React.JSX.Element => {
-  const mappingFile: string = arrowToString(table.getChild(FIELD_MAPPING_FILE)?.get(row)) ?? '';
-  const mappingBuildID: string =
-    arrowToString(table.getChild(FIELD_MAPPING_BUILD_ID)?.get(row)) ?? '';
-  const locationAddress: bigint = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row) ?? 0n;
-  const locationLine: bigint = table.getChild(FIELD_LOCATION_LINE)?.get(row) ?? 0n;
-  const functionFilename: string =
-    arrowToString(table.getChild(FIELD_FUNCTION_FILE_NAME)?.get(row)) ?? '';
-  const functionStartLine: bigint = table.getChild(FIELD_FUNCTION_START_LINE)?.get(row) ?? 0n;
-  const lineNumber =
-    locationLine !== 0n ? locationLine : functionStartLine !== 0n ? functionStartLine : undefined;
-  const pprofLabelPrefix = 'pprof_labels.';
-  const labelColumnNames = table.schema.fields.filter(field =>
-    field.name.startsWith(pprofLabelPrefix)
-  );
-
-  const {queryServiceClient, enableSourcesView} = useParcaContext();
-  const {profileSource} = useProfileViewContext();
-
-  const {isLoading: sourceLoading, response: sourceResponse} = useQuery(
-    queryServiceClient,
-    profileSource as ProfileSource,
-    QueryRequest_ReportType.SOURCE,
-    {
-      skip:
-        enableSourcesView === false ||
-        profileSource === undefined ||
-        // eslint-disable-next-line no-extra-boolean-cast
-        !Boolean(mappingBuildID) ||
-        // eslint-disable-next-line no-extra-boolean-cast
-        !Boolean(functionFilename),
-      sourceBuildID: mappingBuildID,
-      sourceFilename: functionFilename,
-      sourceOnly: true,
-    }
-  );
-
-  const isSourceAvailable = !sourceLoading && sourceResponse?.report != null;
-
-  const getTextForFile = (): string => {
-    if (functionFilename === '') return '<unknown>';
+  const {
+    labelPairs,
+    functionFilename,
+    file,
+    openFile,
+    isSourceAvailable,
+    locationAddress,
+    mappingFile,
+    mappingBuildID,
+  } = useGraphTooltipMetaInfo({table, row, navigateTo});
+  const {enableSourcesView} = useParcaContext();
 
-    return `${functionFilename} ${lineNumber !== undefined ? ` +${lineNumber.toString()}` : ''}`;
-  };
-  const file = getTextForFile();
-
-  const labelPairs = labelColumnNames
-    .map((field, i) => [
-      labelColumnNames[i].name.slice(pprofLabelPrefix.length),
-      arrowToString(table.getChild(field.name)?.get(row)) ?? '',
-    ])
-    .filter(value => value[1] !== '');
   const labels = labelPairs.map(
     (l): React.JSX.Element => (
       <span
@@ -252,38 +193,6 @@ const TooltipMetaInfo = ({
     )
   );
 
-  const [dashboardItems, setDashboardItems] = useURLState({
-    param: 'dashboard_items',
-    navigateTo,
-  });
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [unusedBuildId, setSourceBuildId] = useURLState({
-    param: 'source_buildid',
-    navigateTo,
-  });
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [unusedFilename, setSourceFilename] = useURLState({
-    param: 'source_filename',
-    navigateTo,
-  });
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [unusedLine, setSourceLine] = useURLState({
-    param: 'source_line',
-    navigateTo,
-  });
-
-  const openFile = (): void => {
-    setDashboardItems([dashboardItems[0], 'source']);
-    setSourceBuildId(mappingBuildID);
-    setSourceFilename(functionFilename);
-    if (lineNumber !== undefined) {
-      setSourceLine(lineNumber.toString());
-    }
-  };
-
   return (
     <>
       <tr>
@@ -333,7 +242,7 @@ const TooltipMetaInfo = ({
       <tr>
         <td className="w-1/4">Binary</td>
         <td className="w-3/4 break-all">
-          {mappingFile === '' ? (
+          {mappingFile === null ? (
             <NoData />
           ) : (
             <CopyToClipboard onCopy={onCopy} text={mappingFile}>
@@ -345,7 +254,7 @@ const TooltipMetaInfo = ({
       <tr>
         <td className="w-1/4">Build Id</td>
         <td className="w-3/4 break-all">
-          {mappingBuildID === '' ? (
+          {mappingBuildID === null ? (
             <NoData />
           ) : (
             <CopyToClipboard onCopy={onCopy} text={mappingBuildID}>

package/src/GraphTooltipArrow/DockedGraphTooltip/index.tsx

@@ -0,0 +1,249 @@
+// 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 {useState} from '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 {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;
+  total: bigint;
+  totalUnfiltered: bigint;
+  row: number | null;
+  level: number;
+}
+
+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>
+  );
+};
+
+export const DockedGraphTooltip = ({
+  table,
+  unit,
+  total,
+  totalUnfiltered,
+  row,
+  level,
+}: Props): JSX.Element => {
+  let {width} = useWindowSize();
+  const {profileExplorer, navigateTo, enableSourcesView} = 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,
+    unit,
+    total,
+    totalUnfiltered,
+    row,
+    level,
+  });
+
+  const {
+    labelPairs,
+    functionFilename,
+    file,
+    openFile,
+    isSourceAvailable,
+    locationAddress,
+    mappingFile,
+    mappingBuildID,
+  } = useGraphTooltipMetaInfo({table, row: row ?? 0, navigateTo});
+
+  const [_, setIsDocked] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
+
+  if (graphTooltipData === null) {
+    return <></>;
+  }
+
+  const {name, cumulativeText, diffText, diff} = graphTooltipData;
+
+  const labels = labelPairs.map(
+    (l): React.JSX.Element => (
+      <span
+        key={l[0]}
+        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"
+      >
+        {`${l[0]}="${l[1]}"`}
+      </span>
+    )
+  );
+
+  const addressText = locationAddress !== 0n ? hexifyAddress(locationAddress) : 'unknown';
+  const fileText = functionFilename !== '' ? file : 'Not available';
+
+  return (
+    <div
+      className="fixed bottom-0 z-20 overflow-hidden rounded-t-lg border-l border-r border-t border-gray-400 bg-white bg-opacity-90 px-8 py-3 dark:border-gray-600 dark:bg-black dark:bg-opacity-80"
+      style={{width}}
+    >
+      <div className="flex flex-col gap-4">
+        <div className="flex justify-between gap-4">
+          {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>
+                  )}
+                </>
+              )}
+            </>
+          )}
+          <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="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}
+            minWidth={'w-[460px]'}
+          />
+          <InfoSection
+            title="Address"
+            value={addressText}
+            onCopy={onCopy}
+            copyText={addressText}
+            minWidth="w-44"
+          />
+          <InfoSection
+            title="Binary"
+            value={(mappingFile != null ? getLastItem(mappingFile) : null) ?? 'Not available'}
+            onCopy={onCopy}
+            copyText={mappingFile ?? 'Not available'}
+            minWidth="w-44"
+          />
+          <InfoSection
+            title="Build ID"
+            value={truncateString(getLastItem(mappingBuildID) ?? 'Not available', 28)}
+            onCopy={onCopy}
+            copyText={mappingBuildID ?? 'Not available'}
+          />
+        </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>
+  );
+};

package/src/GraphTooltipArrow/useGraphTooltip/index.ts

@@ -0,0 +1,76 @@
+// 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 {Table} from 'apache-arrow';
+
+import {divide, valueFormatter} from '@parca/utilities';
+
+import {
+  FIELD_CUMULATIVE,
+  FIELD_DIFF,
+  FIELD_LOCATION_ADDRESS,
+} from '../../ProfileIcicleGraph/IcicleGraphArrow';
+import {getTextForCumulative, nodeLabel} from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+
+interface Props {
+  table: Table<any>;
+  unit: string;
+  total: bigint;
+  totalUnfiltered: bigint;
+  row: number | null;
+  level: number;
+}
+
+interface GraphTooltipData {
+  name: string;
+  locationAddress: bigint;
+  cumulativeText: string;
+  diffText: string;
+  diff: bigint;
+  row: number;
+}
+
+export const useGraphTooltip = ({
+  table,
+  unit,
+  total,
+  totalUnfiltered,
+  row,
+  level,
+}: Props): GraphTooltipData | null => {
+  if (row === null) {
+    return null;
+  }
+
+  const locationAddress: bigint = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row) ?? 0n;
+  const cumulative: bigint = BigInt(table.getChild(FIELD_CUMULATIVE)?.get(row)) ?? 0n;
+  const diff: bigint = BigInt(table.getChild(FIELD_DIFF)?.get(row)) ?? 0n;
+
+  const prevValue = cumulative - 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 name = nodeLabel(table, row, level, false);
+
+  return {
+    name,
+    locationAddress,
+    cumulativeText: getTextForCumulative(cumulative, totalUnfiltered, total, unit),
+    diffText,
+    diff,
+    row,
+  };
+};