@parca/profile 0.16.249 → 0.16.251

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.251](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.250...@parca/profile@0.16.251) (2023-09-07)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.250](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.249...@parca/profile@0.16.250) (2023-09-07)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.249](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.248...@parca/profile@0.16.249) (2023-09-06)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileIcicleGraph/index.js

@@ -101,11 +101,13 @@ const groupByOptions = [
         value: FIELD_FUNCTION_NAME,
         label: 'Function Name',
         description: 'Stacktraces are grouped by function names.',
+        disabled: true,
     },
     {
         value: FIELD_LABELS,
         label: 'Labels',
         description: 'Stacktraces are grouped by pprof labels.',
+        disabled: false,
     },
 ];
 const GroupByDropdown = ({ groupBy, toggleGroupBy, }) => {
@@ -114,9 +116,7 @@ const GroupByDropdown = ({ groupBy, toggleGroupBy, }) => {
         : groupBy.length === 1
             ? groupByOptions.find(option => option.value === groupBy[0])?.label
             : 'Multiple';
-    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Group" }), _jsxs(Menu, { as: "div", className: "relative text-left", children: [_jsx("div", { children: _jsxs(Menu.Button, { className: "relative w-full cursor-default rounded-md border bg-gray-50 py-2 pl-3 pr-10 text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "ml-3 block overflow-x-hidden text-ellipsis", children: label }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }) }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Menu.Items, { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsx("div", { className: "space-y-5", children: groupByOptions.map(({ value, label, description }) => (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: value, name: value, type: "checkbox", className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: groupBy.includes(value), onChange: () => {
-                                                            toggleGroupBy(value);
-                                                        } }) }), _jsxs("div", { className: "ml-3 text-sm leading-6", children: [_jsx("label", { htmlFor: value, className: "font-medium text-gray-900", children: label }), _jsx("p", { className: "text-gray-500", children: description })] })] }, value))) }) }) }) }) })] })] }));
+    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Group" }), _jsxs(Menu, { as: "div", className: "relative text-left", children: [_jsx("div", { children: _jsxs(Menu.Button, { className: "relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-10 text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "ml-3 block overflow-x-hidden text-ellipsis", children: label }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }) }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Menu.Items, { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsx("div", { className: "space-y-5", children: groupByOptions.map(({ value, label, description, disabled }) => (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: value, name: value, type: "checkbox", disabled: disabled, className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: groupBy.includes(value), onChange: () => toggleGroupBy(value) }) }), _jsxs("div", { className: "ml-3 text-sm leading-6", children: [_jsx("label", { htmlFor: value, className: "font-medium text-gray-900", children: label }), _jsx("p", { className: "text-gray-500", children: description })] })] }, value))) }) }) }) }) })] })] }));
 };
 const SortBySelect = ({ sortBy, setSortBy, compareMode, }) => {
     return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Sort" }), _jsx(Select, { items: [

package/dist/Table/index.js

@@ -17,6 +17,13 @@ import { tableFromIPC } from 'apache-arrow';
 import { Button, Table as TableComponent, useURLState } from '@parca/components';
 import { getLastItem, isSearchMatch, parseParams, valueFormatter, } from '@parca/utilities';
 import { hexifyAddress } from '../utils';
+const FIELD_MAPPING_FILE = 'mapping_file';
+const FIELD_LOCATION_ADDRESS = 'location_address';
+const FIELD_FUNCTION_NAME = 'function_name';
+const FIELD_FLAT = 'flat';
+const FIELD_FLAT_DIFF = 'flat_diff';
+const FIELD_CUMULATIVE = 'cumulative';
+const FIELD_CUMULATIVE_DIFF = 'cumulative_diff';
 const columnHelper = createColumnHelper();
 export const Table = React.memo(function Table({ data, sampleUnit: unit, navigateTo, loading, currentSearchString, setActionButtons, }) {
     const router = parseParams(window?.location.search);
@@ -134,10 +141,10 @@ export const Table = React.memo(function Table({ data, sampleUnit: unit, navigat
     if (data === undefined)
         return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
     const table = tableFromIPC(data);
-    const flatColumn = table.getChild('flat');
-    const flatDiffColumn = table.getChild('flat_diff');
-    const cumulativeColumn = table.getChild('cumulative');
-    const cumulativeDiffColumn = table.getChild('cumulative_diff');
+    const flatColumn = table.getChild(FIELD_FLAT);
+    const flatDiffColumn = table.getChild(FIELD_FLAT_DIFF);
+    const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+    const cumulativeDiffColumn = table.getChild(FIELD_CUMULATIVE_DIFF);
     if (table.numRows === 0)
         return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
     const rows = [];
@@ -164,7 +171,7 @@ const addPlusSign = (num) => {
     return `+${num}`;
 };
 export const RowName = (table, row) => {
-    const mappingFileColumn = table.getChild('mapping_file');
+    const mappingFileColumn = table.getChild(FIELD_MAPPING_FILE);
     if (mappingFileColumn === null) {
         console.error('mapping_file column not found');
         return '';
@@ -175,11 +182,11 @@ export const RowName = (table, row) => {
     if (mappingFile != null && mappingFileColumn.data.length > 1) {
         mapping = `[${getLastItem(mappingFile) ?? ''}]`;
     }
-    const functionName = table.getChild('function_name')?.get(row) ?? '';
+    const functionName = table.getChild(FIELD_FUNCTION_NAME)?.get(row) ?? '';
     if (functionName !== null && functionName !== '') {
         return `${mapping} ${functionName}`;
     }
-    const address = table.getChild('location_address')?.get(row) ?? 0;
+    const address = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row) ?? 0;
     return hexifyAddress(address);
 };
 export default Table;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.249",
+  "version": "0.16.251",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.86",
@@ -49,5 +49,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "05cf63fe3be4153289f20f8c92b1a82add88339c"
+  "gitHead": "3b18ce674f11d5d194c7c3f1940f1dffdfde6fa3"
 }

package/src/ProfileIcicleGraph/index.tsx

@@ -244,11 +244,13 @@ const groupByOptions = [
     value: FIELD_FUNCTION_NAME,
     label: 'Function Name',
     description: 'Stacktraces are grouped by function names.',
+    disabled: true,
   },
   {
     value: FIELD_LABELS,
     label: 'Labels',
     description: 'Stacktraces are grouped by pprof labels.',
+    disabled: false,
   },
 ];
 
@@ -271,7 +273,7 @@ const GroupByDropdown = ({
       <label className="text-sm">Group</label>
       <Menu as="div" className="relative text-left">
         <div>
-          <Menu.Button className="relative w-full cursor-default rounded-md border bg-gray-50 py-2 pl-3 pr-10 text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm">
+          <Menu.Button className="relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-10 text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm">
             <span className="ml-3 block overflow-x-hidden text-ellipsis">{label}</span>
             <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400">
               <Icon icon="heroicons:chevron-down-20-solid" aria-hidden="true" />
@@ -289,18 +291,17 @@ const GroupByDropdown = ({
             <div className="p-4">
               <fieldset>
                 <div className="space-y-5">
-                  {groupByOptions.map(({value, label, description}) => (
+                  {groupByOptions.map(({value, label, description, disabled}) => (
                     <div key={value} className="relative flex items-start">
                       <div className="flex h-6 items-center">
                         <input
                           id={value}
                           name={value}
                           type="checkbox"
+                          disabled={disabled}
                           className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
                           checked={groupBy.includes(value)}
-                          onChange={() => {
-                            toggleGroupBy(value);
-                          }}
+                          onChange={() => toggleGroupBy(value)}
                         />
                       </div>
                       <div className="ml-3 text-sm leading-6">

package/src/Table/index.tsx

@@ -27,6 +27,14 @@ import {
 
 import {hexifyAddress} from '../utils';
 
+const FIELD_MAPPING_FILE = 'mapping_file';
+const FIELD_LOCATION_ADDRESS = 'location_address';
+const FIELD_FUNCTION_NAME = 'function_name';
+const FIELD_FLAT = 'flat';
+const FIELD_FLAT_DIFF = 'flat_diff';
+const FIELD_CUMULATIVE = 'cumulative';
+const FIELD_CUMULATIVE_DIFF = 'cumulative_diff';
+
 const columnHelper = createColumnHelper<row>();
 
 interface row {
@@ -211,10 +219,10 @@ export const Table = React.memo(function Table({
   if (data === undefined) return <div className="mx-auto text-center">Profile has no samples</div>;
 
   const table = tableFromIPC(data);
-  const flatColumn = table.getChild('flat');
-  const flatDiffColumn = table.getChild('flat_diff');
-  const cumulativeColumn = table.getChild('cumulative');
-  const cumulativeDiffColumn = table.getChild('cumulative_diff');
+  const flatColumn = table.getChild(FIELD_FLAT);
+  const flatDiffColumn = table.getChild(FIELD_FLAT_DIFF);
+  const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+  const cumulativeDiffColumn = table.getChild(FIELD_CUMULATIVE_DIFF);
 
   if (table.numRows === 0) return <div className="mx-auto text-center">Profile has no samples</div>;
 
@@ -261,7 +269,7 @@ const addPlusSign = (num: string): string => {
 };
 
 export const RowName = (table: ArrowTable, row: number): string => {
-  const mappingFileColumn = table.getChild('mapping_file');
+  const mappingFileColumn = table.getChild(FIELD_MAPPING_FILE);
   if (mappingFileColumn === null) {
     console.error('mapping_file column not found');
     return '';
@@ -273,12 +281,12 @@ export const RowName = (table: ArrowTable, row: number): string => {
   if (mappingFile != null && mappingFileColumn.data.length > 1) {
     mapping = `[${getLastItem(mappingFile) ?? ''}]`;
   }
-  const functionName: string | null = table.getChild('function_name')?.get(row) ?? '';
+  const functionName: string | null = table.getChild(FIELD_FUNCTION_NAME)?.get(row) ?? '';
   if (functionName !== null && functionName !== '') {
     return `${mapping} ${functionName}`;
   }
 
-  const address: bigint = table.getChild('location_address')?.get(row) ?? 0;
+  const address: bigint = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row) ?? 0;
 
   return hexifyAddress(address);
 };