@parca/profile 0.16.378 → 0.16.380

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.378",
+  "version": "0.16.380",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
-    "@parca/client": "^0.16.115",
-    "@parca/components": "^0.16.278",
-    "@parca/dynamicsize": "^0.16.65",
-    "@parca/hooks": "^0.0.57",
-    "@parca/icons": "^0.16.69",
-    "@parca/parser": "^0.16.74",
-    "@parca/store": "^0.16.146",
-    "@parca/utilities": "^0.0.74",
+    "@parca/client": "0.16.115",
+    "@parca/components": "0.16.279",
+    "@parca/dynamicsize": "0.16.65",
+    "@parca/hooks": "0.0.58",
+    "@parca/icons": "0.16.69",
+    "@parca/parser": "0.16.74",
+    "@parca/store": "0.16.147",
+    "@parca/utilities": "0.0.75",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@tanstack/react-query": "^4.0.5",
-    "@tanstack/react-table": "^8.16.0",
+    "@tanstack/react-table": "^8.17.3",
     "@tanstack/table-core": "^8.16.0",
     "@types/d3": "^7.4.3",
     "@types/d3-scale": "^4.0.8",
@@ -71,5 +71,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "fbab8208a5a08c44a96f81c90bdd69494914c11c"
+  "gitHead": "ba26a71d9219936074772245779aa66ab39bed6e"
 }

package/src/GraphTooltipArrow/Content.tsx

@@ -67,6 +67,8 @@ const GraphTooltipArrowContent = ({
     locationAddress,
     cumulativeText,
     cumulativePerSecondText,
+    flatText,
+    flatPerSecondText,
     diffText,
     diff,
     row: rowNumber,
@@ -93,9 +95,15 @@ const GraphTooltipArrowContent = ({
               </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">
+                      <div>{cumulativeText}</div>
+                    </td>
+                  </tr>
                   {profileType?.delta ?? false ? (
                     <tr>
-                      <td className="w-1/4">Per Second</td>
+                      <td className="w-1/4"></td>
                       <td className="w-3/4">
                         <div>{cumulativePerSecondText}</div>
                       </td>
@@ -104,16 +112,25 @@ const GraphTooltipArrowContent = ({
                     <></>
                   )}
                   <tr>
-                    <td className="w-1/4">Cumulative</td>
-
-                    <td className="w-3/4">
-                      <div>{cumulativeText}</div>
+                    <td className="w-1/4 pt-2">Flat</td>
+                    <td className="w-3/4 pt-2">
+                      <div>{flatText}</div>
                     </td>
                   </tr>
-                  {diff !== 0n && (
+                  {profileType?.delta ?? false ? (
                     <tr>
-                      <td className="w-1/4">Diff</td>
+                      <td className="w-1/4"></td>
                       <td className="w-3/4">
+                        <div>{flatPerSecondText}</div>
+                      </td>
+                    </tr>
+                  ) : (
+                    <></>
+                  )}
+                  {diff !== 0n && (
+                    <tr>
+                      <td className="w-1/4 pt-2">Diff</td>
+                      <td className="w-3/4 pt-2">
                         <div>{diffText}</div>
                       </td>
                     </tr>
@@ -169,8 +186,8 @@ const TooltipMetaInfo = ({
   return (
     <>
       <tr>
-        <td className="w-1/4">File</td>
-        <td className="w-3/4 break-all">
+        <td className="w-1/4 pt-2">File</td>
+        <td className="w-3/4 pt-2 break-all">
           {functionFilename === '' ? (
             <NoData />
           ) : (

package/src/GraphTooltipArrow/useGraphTooltip/index.ts

@@ -21,6 +21,8 @@ import {
   FIELD_CUMULATIVE_PER_SECOND,
   FIELD_DIFF,
   FIELD_DIFF_PER_SECOND,
+  FIELD_FLAT,
+  FIELD_FLAT_PER_SECOND,
   FIELD_LOCATION_ADDRESS,
 } from '../../ProfileIcicleGraph/IcicleGraphArrow';
 import {
@@ -43,6 +45,8 @@ interface GraphTooltipData {
   locationAddress: bigint;
   cumulativeText: string;
   cumulativePerSecondText: string;
+  flatText: string;
+  flatPerSecondText: string;
   diffText: string;
   diff: bigint;
   row: number;
@@ -70,6 +74,14 @@ export const useGraphTooltip = ({
     table.getChild(FIELD_CUMULATIVE_PER_SECOND)?.get(row) !== null
       ? table.getChild(FIELD_CUMULATIVE_PER_SECOND)?.get(row)
       : 0;
+  const flat: bigint =
+    table.getChild(FIELD_FLAT)?.get(row) !== null
+      ? BigInt(table.getChild(FIELD_FLAT)?.get(row))
+      : 0n;
+  const flatPerSecond: number =
+    table.getChild(FIELD_FLAT_PER_SECOND)?.get(row) !== null
+      ? table.getChild(FIELD_FLAT_PER_SECOND)?.get(row)
+      : 0;
   const diff: bigint =
     table.getChild(FIELD_DIFF)?.get(row) !== null
       ? BigInt(table.getChild(FIELD_DIFF)?.get(row))
@@ -111,6 +123,11 @@ export const useGraphTooltip = ({
       cumulativePerSecond,
       profileType?.periodUnit ?? 'CPU Cores'
     ),
+    flatText: getTextForCumulative(flat, totalUnfiltered, total, profileType.periodUnit ?? ''),
+    flatPerSecondText: getTextForCumulativePerSecond(
+      flatPerSecond,
+      profileType?.periodUnit ?? 'CPU Cores'
+    ),
     diffText,
     diff,
     row,

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -57,6 +57,8 @@ export const FIELD_CHILDREN = 'children';
 export const FIELD_LABELS = 'labels';
 export const FIELD_CUMULATIVE = 'cumulative';
 export const FIELD_CUMULATIVE_PER_SECOND = 'cumulative_per_second';
+export const FIELD_FLAT = 'flat';
+export const FIELD_FLAT_PER_SECOND = 'flat_per_second';
 export const FIELD_DIFF = 'diff';
 export const FIELD_DIFF_PER_SECOND = 'diff_per_second';
 

package/src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts

@@ -94,7 +94,7 @@ export const getTextForCumulativePerSecond = (
     hoveringNodeCumulative,
     unit === 'nanoseconds' ? 'CPU Cores' : unit,
     5
-  )}`;
+  )}/s`;
 };
 
 export const arrowToString = (buffer: any): string | null => {

package/src/ProfileSource.tsx

@@ -108,12 +108,19 @@ export class MergedProfileSelection implements ProfileSelection {
   mergeTo: number;
   query: Query;
   filterQuery: string | undefined;
+  profileSource: ProfileSource;
 
   constructor(mergeFrom: number, mergeTo: number, query: Query, filterQuery?: string) {
     this.mergeFrom = mergeFrom;
     this.mergeTo = mergeTo;
     this.query = query;
     this.filterQuery = filterQuery;
+    this.profileSource = new MergedProfileSource(
+      this.mergeFrom,
+      this.mergeTo,
+      this.query,
+      this.filterQuery
+    );
   }
 
   ProfileName(): string {
@@ -135,7 +142,7 @@ export class MergedProfileSelection implements ProfileSelection {
   }
 
   ProfileSource(): ProfileSource {
-    return new MergedProfileSource(this.mergeFrom, this.mergeTo, this.query, this.filterQuery);
+    return this.profileSource;
   }
 }
 
@@ -143,11 +150,13 @@ export class ProfileDiffSource implements ProfileSource {
   a: ProfileSource;
   b: ProfileSource;
   filterQuery: string | undefined;
+  profileType: ProfileType;
 
   constructor(a: ProfileSource, b: ProfileSource, filterQuery?: string) {
     this.a = a;
     this.b = b;
     this.filterQuery = filterQuery;
+    this.profileType = a.ProfileType();
   }
 
   DiffSelection(): ProfileDiffSelection {
@@ -171,7 +180,7 @@ export class ProfileDiffSource implements ProfileSource {
   }
 
   ProfileType(): ProfileType {
-    return this.a.ProfileType();
+    return this.profileType;
   }
 
   Describe(): JSX.Element {
@@ -199,12 +208,14 @@ export class MergedProfileSource implements ProfileSource {
   mergeTo: number;
   query: Query;
   filterQuery: string | undefined;
+  profileType: ProfileType;
 
   constructor(mergeFrom: number, mergeTo: number, query: Query, filterQuery?: string) {
     this.mergeFrom = mergeFrom;
     this.mergeTo = mergeTo;
     this.query = query;
     this.filterQuery = filterQuery;
+    this.profileType = ProfileType.fromString(Query.parse(this.query.toString()).profileName());
   }
 
   DiffSelection(): ProfileDiffSelection {
@@ -239,7 +250,7 @@ export class MergedProfileSource implements ProfileSource {
   }
 
   ProfileType(): ProfileType {
-    return ProfileType.fromString(Query.parse(this.query.toString()).profileName());
+    return this.profileType;
   }
 
   stringMatchers(): string[] {

package/src/Table/ColumnsVisibility.tsx

@@ -15,16 +15,16 @@ import {Fragment} from 'react';
 
 import {Menu, Transition} from '@headlessui/react';
 import {Icon} from '@iconify/react';
-import {type VisibilityState} from '@tanstack/react-table';
+import {type ColumnDef, type VisibilityState} from '@tanstack/react-table';
 
-import {ColumnDef} from '.';
+import type {Row} from './';
 
 const ColumnsVisibility = ({
   columns,
   visibility,
   setVisibility,
 }: {
-  columns: ColumnDef[];
+  columns: Array<ColumnDef<Row>>;
   visibility: VisibilityState;
   setVisibility: (id: string, visible: boolean) => void;
 }): React.JSX.Element => {
@@ -69,7 +69,7 @@ const ColumnsVisibility = ({
                           htmlFor={col.id}
                           className="font-medium text-gray-900 dark:text-gray-200"
                         >
-                          {col.header}
+                          {col.header as string}
                         </label>
                       </div>
                     </div>