@parca/profile 0.19.44 → 0.19.46

package/src/ProfileSource.tsx

@@ -27,6 +27,7 @@ export interface ProfileSource {
   ProfileType: () => ProfileType;
   DiffSelection: () => ProfileDiffSelection;
   toString: (timezone?: string) => string;
+  toKey: () => string;
 }
 
 export interface ProfileSelection {
@@ -79,23 +80,19 @@ export function ProfileSelectionFromParams(
       return null;
     }
 
-    return new MergedProfileSelection(
-      parseInt(mergeFrom),
-      parseInt(mergeTo),
-      Query.parse(selection)
-    );
+    return new MergedProfileSelection(BigInt(mergeFrom), BigInt(mergeTo), Query.parse(selection));
   }
 
   return null;
 }
 
 export class MergedProfileSelection implements ProfileSelection {
-  mergeFrom: number;
-  mergeTo: number;
+  mergeFrom: bigint;
+  mergeTo: bigint;
   query: Query;
   profileSource: ProfileSource;
 
-  constructor(mergeFrom: number, mergeTo: number, query: Query) {
+  constructor(mergeFrom: bigint, mergeTo: bigint, query: Query) {
     this.mergeFrom = mergeFrom;
     this.mergeTo = mergeTo;
     this.query = query;
@@ -178,15 +175,31 @@ export class ProfileDiffSource implements ProfileSource {
 
     return `${this.a.toString()} compared with ${this.b.toString()}`;
   }
+
+  toKey(): string {
+    return `${this.a.toKey()}-${this.b.toKey()}`;
+  }
+}
+
+function nanosToTimestamp(nanos: bigint): Timestamp {
+  const NANOS_PER_SECOND = 1_000_000_000n;
+
+  const seconds = nanos / NANOS_PER_SECOND;
+  const remainingNanos = nanos % NANOS_PER_SECOND;
+
+  return {
+    seconds,
+    nanos: Number(remainingNanos), // Safe since remainingNanos < 1e9
+  };
 }
 
 export class MergedProfileSource implements ProfileSource {
-  mergeFrom: number;
-  mergeTo: number;
+  mergeFrom: bigint;
+  mergeTo: bigint;
   query: Query;
   profileType: ProfileType;
 
-  constructor(mergeFrom: number, mergeTo: number, query: Query) {
+  constructor(mergeFrom: bigint, mergeTo: bigint, query: Query) {
     this.mergeFrom = mergeFrom;
     this.mergeTo = mergeTo;
     this.query = query;
@@ -198,8 +211,8 @@ export class MergedProfileSource implements ProfileSource {
       options: {
         oneofKind: 'merge',
         merge: {
-          start: Timestamp.fromDate(new Date(this.mergeFrom)),
-          end: Timestamp.fromDate(new Date(this.mergeTo)),
+          start: nanosToTimestamp(this.mergeFrom),
+          end: nanosToTimestamp(this.mergeTo),
           query: this.query.toString(),
         },
       },
@@ -212,8 +225,8 @@ export class MergedProfileSource implements ProfileSource {
       options: {
         oneofKind: 'merge',
         merge: {
-          start: Timestamp.fromDate(new Date(this.mergeFrom)),
-          end: Timestamp.fromDate(new Date(this.mergeTo)),
+          start: nanosToTimestamp(this.mergeFrom),
+          end: nanosToTimestamp(this.mergeTo),
           query: this.query.toString(),
         },
       },
@@ -240,9 +253,9 @@ export class MergedProfileSource implements ProfileSource {
     }
 
     let timePart = '';
-    if (this.mergeFrom !== 0) {
+    if (this.mergeFrom !== 0n) {
       timePart = `over ${formatDuration({
-        milliseconds: this.mergeTo - this.mergeFrom,
+        nanos: Number(this.mergeTo - this.mergeFrom),
       })} from ${formatDate(this.mergeFrom, timeFormat(timezone), timezone)} to ${formatDate(
         this.mergeTo,
         timeFormat(timezone),
@@ -252,4 +265,8 @@ export class MergedProfileSource implements ProfileSource {
 
     return `Merged profiles${queryPart}${timePart}`;
   }
+
+  toKey(): string {
+    return `${this.mergeFrom.toString()}-${this.mergeTo.toString()}-${this.query.toString()}`;
+  }
 }

package/src/ProfileView/components/GroupByLabelsDropdown/index.tsx

@@ -13,6 +13,8 @@
 
 import Select from 'react-select';
 
+import {testId} from '@parca/test-utils';
+
 import {FIELD_LABELS} from '../../../ProfileFlameGraph/FlameGraphArrow';
 
 interface LabelOption {
@@ -28,13 +30,14 @@ interface Props {
 
 const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.Element => {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col" {...testId('GROUP_BY_CONTAINER')}>
       <div className="flex items-center justify-between">
-        <label className="text-sm">Group by</label>
+        <label className="text-sm" {...testId('GROUP_BY_LABEL')}>
+          Group by
+        </label>
       </div>
 
       <Select<LabelOption, true>
-        id="h-group-by-labels-selector"
         isMulti
         defaultMenuIsOpen={false}
         defaultValue={undefined}
@@ -42,6 +45,15 @@ const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.
         options={labels.map(label => ({label, value: `${FIELD_LABELS}.${label}`}))}
         className="parca-select-container text-sm rounded-md bg-white"
         classNamePrefix="parca-select"
+        menuPortalTarget={document.body}
+        components={{
+          // eslint-disable-next-line react/prop-types
+          MenuList: ({children, innerProps}) => (
+            <div {...testId('GROUP_BY_SELECT_FLYOUT')} {...innerProps}>
+              {children}
+            </div>
+          ),
+        }}
         value={groupBy
           .filter(l => l.startsWith(FIELD_LABELS))
           .map(l => ({value: l, label: l.slice(FIELD_LABELS.length + 1)}))}

package/src/ProfileView/components/ProfileFilters/index.tsx

@@ -17,6 +17,7 @@ import {Icon} from '@iconify/react';
 import cx from 'classnames';
 
 import {Button, Input, Select, type SelectItem} from '@parca/components';
+import {testId} from '@parca/test-utils';
 
 import {useProfileViewContext} from '../../context/ProfileViewContext';
 import {getPresetByKey, getPresetsForProfileType, isPresetKey} from './filterPresets';
@@ -204,7 +205,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
   const filtersToRender = localFilters.length > 0 ? localFilters : appliedFilters ?? [];
 
   return (
-    <div className="flex gap-2 w-full items-start">
+    <div className="flex gap-2 w-full items-start" {...testId('PROFILE_FILTERS_CONTAINER')}>
       <div className="flex-1 flex flex-wrap gap-2">
         {filtersToRender.map(filter => {
           const isNumberField = filter.field === 'address' || filter.field === 'line_number';
@@ -218,6 +219,8 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                 selectedKey={filter.type}
                 placeholder="Select Filter"
                 disabled={readOnly}
+                {...testId('FILTER_TYPE_SELECT')}
+                flyoutTestId="filter-type-select-flyout"
                 onSelection={key => {
                   // Check if this is a preset selection
                   if (isPresetKey(key)) {
@@ -266,6 +269,8 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                     items={fieldItems}
                     selectedKey={filter.field ?? ''}
                     disabled={readOnly}
+                    {...testId('FILTER_FIELD_SELECT')}
+                    flyoutTestId="filter-field-select-flyout"
                     onSelection={key => {
                       const newField = key as ProfileFilter['field'];
                       const isNewFieldNumber = newField === 'address' || newField === 'line_number';
@@ -292,6 +297,8 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                     items={matchTypeItems}
                     selectedKey={filter.matchType ?? ''}
                     disabled={readOnly}
+                    {...testId('FILTER_MATCH_TYPE_SELECT')}
+                    flyoutTestId="filter-match-type-select-flyout"
                     onSelection={key =>
                       updateFilter(filter.id, {matchType: key as ProfileFilter['matchType']})
                     }
@@ -309,6 +316,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                     onChange={e => updateFilter(filter.id, {value: e.target.value})}
                     onKeyDown={handleKeyDown}
                     className="rounded-none w-36 text-sm focus:outline-1"
+                    {...testId('FILTER_VALUE_INPUT')}
                   />
                 </>
               )}
@@ -316,6 +324,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
               {!readOnly && (
                 <Button
                   variant="neutral"
+                  {...testId('FILTER_REMOVE_BUTTON')}
                   onClick={() => {
                     // If we're displaying local filters and this is the last one, reset everything
                     if (localFilters.length > 0 && localFilters.length === 1) {
@@ -345,13 +354,23 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
         })}
 
         {!readOnly && localFilters.length > 0 && (
-          <Button variant="neutral" onClick={addFilter} className="p-3 h-[38px]">
+          <Button
+            variant="neutral"
+            onClick={addFilter}
+            className="p-3 h-[38px]"
+            {...testId('ADD_FILTER_BUTTON')}
+          >
             <Icon icon="mdi:filter-plus-outline" className="h-4 w-4" />
           </Button>
         )}
 
         {!readOnly && localFilters.length === 0 && (appliedFilters?.length ?? 0) === 0 && (
-          <Button variant="neutral" onClick={addFilter} className="flex items-center gap-2">
+          <Button
+            variant="neutral"
+            onClick={addFilter}
+            className="flex items-center gap-2"
+            {...testId('ADD_FILTER_BUTTON')}
+          >
             <Icon icon="mdi:filter-outline" className="h-4 w-4" />
             <span>Filter</span>
           </Button>
@@ -364,6 +383,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
           onClick={onApplyFilters}
           disabled={!hasUnsavedChanges || !localFilters.some(isFilterComplete)}
           className={cx('flex items-center gap-2 sticky top-0')}
+          {...testId('APPLY_FILTERS_BUTTON')}
         >
           <span>Apply</span>
         </Button>

package/src/useQuery.tsx

@@ -55,7 +55,7 @@ export const useQuery = (
   const {data, isLoading, error} = useGrpcQuery<QueryResponse | undefined>({
     key: [
       'query',
-      profileSource,
+      profileSource.toKey(),
       reportType,
       options?.nodeTrimThreshold,
       options?.groupBy,