@parca/profile 0.16.226 → 0.16.227

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.227](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.225...@parca/profile@0.16.227) (2023-08-21)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.226](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.225...@parca/profile@0.16.226) (2023-08-16)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/Content.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { divide, getLastItem, valueFormatter } 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 { FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_START_LINE, FIELD_LOCATION_ADDRESS, FIELD_LOCATION_LINE, FIELD_MAPPING_BUILD_ID, FIELD_MAPPING_FILE, } from '../ProfileIcicleGraph/IcicleGraphArrow';
 import { nodeLabel } from '../ProfileIcicleGraph/IcicleGraphArrow/utils';
 import { hexifyAddress, truncateString, truncateStringReverse } from '../utils';
 import { ExpandOnHover } from './ExpandOnHoverValue';
@@ -64,7 +64,8 @@ onCopy, row, }) => {
     const locationLine = table.getChild(FIELD_LOCATION_LINE)?.get(row) ?? 0n;
     const functionFilename = table.getChild(FIELD_FUNCTION_FILE_NAME)?.get(row) ?? '';
     const functionStartLine = table.getChild(FIELD_FUNCTION_START_LINE)?.get(row) ?? 0n;
-    const labelsString = table.getChild(FIELD_LABELS)?.get(row) ?? '{}';
+    const pprofLabelPrefix = 'pprof_labels.';
+    const labelColumnNames = table.schema.fields.filter(field => field.name.startsWith(pprofLabelPrefix));
     const getTextForFile = () => {
         if (functionFilename === '')
             return '<unknown>';
@@ -73,11 +74,13 @@ onCopy, row, }) => {
             : `${functionStartLine !== 0n ? ` +${functionStartLine}` : ''}`}`;
     };
     const file = getTextForFile();
-    const labels = Object.entries(JSON.parse(labelsString))
-        .sort((a, b) => {
-        return a[0].localeCompare(b[0]);
-    })
-        .map((l) => (_jsx("span", { 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", children: `${l[0]}="${l[1]}"` }, l[0])));
-    return (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: functionFilename === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: file, children: _jsx("button", { className: "cursor-pointer whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 40) }) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: locationAddress === 0n ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(locationAddress), children: _jsx("button", { className: "cursor-pointer", children: hexifyAddress(locationAddress) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: mappingFile === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: mappingFile, children: _jsx("button", { className: "cursor-pointer", children: getLastItem(mappingFile) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: mappingBuildID === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: mappingBuildID, children: _jsx("button", { className: "cursor-pointer", children: truncateString(getLastItem(mappingBuildID), 28) }) })) })] }), labelsString !== '{}' && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Labels" }), _jsx("td", { className: "w-3/4 break-all", children: labels })] }))] }));
+    const labelPairs = labelColumnNames
+        .map((field, i) => [
+        labelColumnNames[i].name.slice(pprofLabelPrefix.length),
+        table.getChild(field.name)?.get(row) ?? '',
+    ])
+        .filter(value => value[1] !== '');
+    const labels = labelPairs.map((l) => (_jsx("span", { 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", children: `${l[0]}="${l[1]}"` }, l[0])));
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: functionFilename === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: file, children: _jsx("button", { className: "cursor-pointer whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 40) }) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: locationAddress === 0n ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(locationAddress), children: _jsx("button", { className: "cursor-pointer", children: hexifyAddress(locationAddress) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: mappingFile === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: mappingFile, children: _jsx("button", { className: "cursor-pointer", children: getLastItem(mappingFile) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: mappingBuildID === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: mappingBuildID, children: _jsx("button", { className: "cursor-pointer", children: truncateString(getLastItem(mappingBuildID), 28) }) })) })] }), labelPairs.length > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Labels" }), _jsx("td", { className: "w-3/4 break-all", children: labels })] }))] }));
 };
 export default GraphTooltipArrowContent;

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Table } from 'apache-arrow';
 import { type NavigateFunction } from '@parca/utilities';
+export declare const FIELD_LABELS_ONLY = "labels_only";
 export declare const FIELD_MAPPING_FILE = "mapping_file";
 export declare const FIELD_MAPPING_BUILD_ID = "mapping_build_id";
 export declare const FIELD_LOCATION_ADDRESS = "location_address";

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -20,6 +20,7 @@ import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import ColorStackLegend from './ColorStackLegend';
 import { IcicleNode, RowHeight } from './IcicleGraphNodes';
 import { extractFeature } from './utils';
+export const FIELD_LABELS_ONLY = 'labels_only';
 export const FIELD_MAPPING_FILE = 'mapping_file';
 export const FIELD_MAPPING_BUILD_ID = 'mapping_build_id';
 export const FIELD_LOCATION_ADDRESS = 'location_address';

package/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.js

@@ -13,18 +13,25 @@
 import { EVERYTHING_ELSE, FEATURE_TYPES } from '@parca/store';
 import { getLastItem } from '@parca/utilities';
 import { hexifyAddress } from '../../utils';
-import { FIELD_FUNCTION_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE } from './index';
+import { FIELD_FUNCTION_NAME, FIELD_LABELS_ONLY, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from './index';
 export function nodeLabel(table, row, level, showBinaryName) {
     const functionName = table.getChild(FIELD_FUNCTION_NAME)?.get(row);
+    const labelsOnly = table.getChild(FIELD_LABELS_ONLY)?.get(row);
+    const pprofLabelPrefix = 'pprof_labels.';
+    const labelColumnNames = table.schema.fields.filter(field => field.name.startsWith(pprofLabelPrefix));
     if (functionName !== null && functionName !== '') {
-        if (level === 1 && functionName.startsWith('{') && functionName.endsWith('}')) {
-            return Object.entries(JSON.parse(functionName))
-                .sort(([a], [b]) => a.localeCompare(b))
-                .map(([k, v]) => `${k}="${v}"`)
-                .join(', ');
-        }
         return functionName;
     }
+    if (level === 1 && labelsOnly !== null && labelsOnly) {
+        return labelColumnNames
+            .map((field, i) => [
+            labelColumnNames[i].name.slice(pprofLabelPrefix.length),
+            table.getChild(field.name)?.get(row) ?? '',
+        ])
+            .filter(value => value[1] !== '')
+            .map(([k, v]) => `${k}="${v}"`)
+            .join(', ');
+    }
     let mappingString = '';
     if (showBinaryName) {
         const mappingFile = table.getChild(FIELD_MAPPING_FILE)?.get(row) ?? '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.226",
+  "version": "0.16.227",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.84",
@@ -47,5 +47,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "059cb869a7c59f1eeff510c2a52de47d223c1132"
+  "gitHead": "f1693104879d96c4291e3b96c5e37d8e11e3e356"
 }

package/src/GraphTooltipArrow/Content.tsx

@@ -181,7 +181,10 @@ const TooltipMetaInfo = ({
   const locationLine: bigint = table.getChild(FIELD_LOCATION_LINE)?.get(row) ?? 0n;
   const functionFilename: string = table.getChild(FIELD_FUNCTION_FILE_NAME)?.get(row) ?? '';
   const functionStartLine: bigint = table.getChild(FIELD_FUNCTION_START_LINE)?.get(row) ?? 0n;
-  const labelsString: string = table.getChild(FIELD_LABELS)?.get(row) ?? '{}';
+  const pprofLabelPrefix = 'pprof_labels.';
+  const labelColumnNames = table.schema.fields.filter(field =>
+    field.name.startsWith(pprofLabelPrefix)
+  );
 
   const getTextForFile = (): string => {
     if (functionFilename === '') return '<unknown>';
@@ -194,20 +197,22 @@ const TooltipMetaInfo = ({
   };
   const file = getTextForFile();
 
-  const labels = Object.entries(JSON.parse(labelsString))
-    .sort((a, b) => {
-      return a[0].localeCompare(b[0]);
-    })
-    .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] as string}"`}
-        </span>
-      )
-    );
+  const labelPairs = labelColumnNames
+    .map((field, i) => [
+      labelColumnNames[i].name.slice(pprofLabelPrefix.length),
+      table.getChild(field.name)?.get(row) ?? '',
+    ])
+    .filter(value => value[1] !== '');
+  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] as string}="${l[1] as string}"`}
+      </span>
+    )
+  );
 
   return (
     <>
@@ -263,7 +268,7 @@ const TooltipMetaInfo = ({
           )}
         </td>
       </tr>
-      {labelsString !== '{}' && (
+      {labelPairs.length > 0 && (
         <tr>
           <td className="w-1/4">Labels</td>
           <td className="w-3/4 break-all">{labels}</td>

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -37,6 +37,7 @@ import ColorStackLegend from './ColorStackLegend';
 import {IcicleNode, RowHeight, mappingColors} from './IcicleGraphNodes';
 import {extractFeature} from './utils';
 
+export const FIELD_LABELS_ONLY = 'labels_only';
 export const FIELD_MAPPING_FILE = 'mapping_file';
 export const FIELD_MAPPING_BUILD_ID = 'mapping_build_id';
 export const FIELD_LOCATION_ADDRESS = 'location_address';

package/src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts

@@ -17,7 +17,13 @@ import {EVERYTHING_ELSE, FEATURE_TYPES, type Feature} from '@parca/store';
 import {getLastItem} from '@parca/utilities';
 
 import {hexifyAddress} from '../../utils';
-import {FIELD_FUNCTION_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE} from './index';
+import {
+  FIELD_FUNCTION_NAME,
+  FIELD_LABELS,
+  FIELD_LABELS_ONLY,
+  FIELD_LOCATION_ADDRESS,
+  FIELD_MAPPING_FILE,
+} from './index';
 
 export function nodeLabel(
   table: Table<any>,
@@ -26,16 +32,26 @@ export function nodeLabel(
   showBinaryName: boolean
 ): string {
   const functionName: string | null = table.getChild(FIELD_FUNCTION_NAME)?.get(row);
+  const labelsOnly: boolean | null = table.getChild(FIELD_LABELS_ONLY)?.get(row);
+  const pprofLabelPrefix = 'pprof_labels.';
+  const labelColumnNames = table.schema.fields.filter(field =>
+    field.name.startsWith(pprofLabelPrefix)
+  );
   if (functionName !== null && functionName !== '') {
-    if (level === 1 && functionName.startsWith('{') && functionName.endsWith('}')) {
-      return Object.entries(JSON.parse(functionName))
-        .sort(([a], [b]) => a.localeCompare(b))
-        .map(([k, v]) => `${k}="${v as string}"`)
-        .join(', ');
-    }
     return functionName;
   }
 
+  if (level === 1 && labelsOnly !== null && labelsOnly) {
+    return labelColumnNames
+      .map((field, i) => [
+        labelColumnNames[i].name.slice(pprofLabelPrefix.length),
+        table.getChild(field.name)?.get(row) ?? '',
+      ])
+      .filter(value => value[1] !== '')
+      .map(([k, v]) => `${k as string}="${v as string}"`)
+      .join(', ');
+  }
+
   let mappingString = '';
   if (showBinaryName) {
     const mappingFile: string | null = table.getChild(FIELD_MAPPING_FILE)?.get(row) ?? '';