@parca/profile 0.19.20 → 0.19.21

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

@@ -0,0 +1,294 @@
+// 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 {useCallback} from 'react';
+
+import {Icon} from '@iconify/react';
+import cx from 'classnames';
+
+import {Button, Input, Select, type SelectItem} from '@parca/components';
+
+import {useProfileFilters, type ProfileFilter} from './useProfileFilters';
+
+export const isFilterComplete = (filter: ProfileFilter): boolean => {
+  return (
+    filter.value !== '' && filter.type != null && filter.field != null && filter.matchType != null
+  );
+};
+
+const filterTypeItems: SelectItem[] = [
+  {
+    key: 'stack',
+    element: {
+      active: <>Stack Filter</>,
+      expanded: (
+        <>
+          <span>Stack Filter</span>
+          <br />
+          <span className="text-xs">Filters entire call stacks</span>
+        </>
+      ),
+    },
+  },
+  {
+    key: 'frame',
+    element: {
+      active: <>Frame Filter</>,
+      expanded: (
+        <>
+          <span>Frame Filter</span>
+          <br />
+          <span className="text-xs">Filters individual frames</span>
+        </>
+      ),
+    },
+  },
+];
+
+const fieldItems: SelectItem[] = [
+  {
+    key: 'function_name',
+    element: {
+      active: <>Function</>,
+      expanded: <>Function Name</>,
+    },
+  },
+  {
+    key: 'binary',
+    element: {
+      active: <>Binary</>,
+      expanded: <>Binary/Executable Name</>,
+    },
+  },
+  {
+    key: 'system_name',
+    element: {
+      active: <>System Name</>,
+      expanded: <>System Name</>,
+    },
+  },
+  {
+    key: 'filename',
+    element: {
+      active: <>Filename</>,
+      expanded: <>Source Filename</>,
+    },
+  },
+  {
+    key: 'address',
+    element: {
+      active: <>Address</>,
+      expanded: <>Memory Address</>,
+    },
+  },
+  {
+    key: 'line_number',
+    element: {
+      active: <>Line Number</>,
+      expanded: <>Source Line Number</>,
+    },
+  },
+];
+
+const stringMatchTypeItems: SelectItem[] = [
+  {
+    key: 'equal',
+    element: {
+      active: <>Equals</>,
+      expanded: <>Equals</>,
+    },
+  },
+  {
+    key: 'not_equal',
+    element: {
+      active: <>Not Equals</>,
+      expanded: <>Not Equals</>,
+    },
+  },
+  {
+    key: 'contains',
+    element: {
+      active: <>Contains</>,
+      expanded: <>Contains</>,
+    },
+  },
+  {
+    key: 'not_contains',
+    element: {
+      active: <>Not Contains</>,
+      expanded: <>Not Contains</>,
+    },
+  },
+];
+
+const numberMatchTypeItems: SelectItem[] = [
+  {
+    key: 'equal',
+    element: {
+      active: <>Equals</>,
+      expanded: <>Equals</>,
+    },
+  },
+  {
+    key: 'not_equal',
+    element: {
+      active: <>Not Equals</>,
+      expanded: <>Not Equals</>,
+    },
+  },
+];
+
+const ProfileFilters = (): JSX.Element => {
+  const {
+    localFilters,
+    appliedFilters,
+    hasUnsavedChanges,
+    onApplyFilters,
+    addFilter,
+    removeFilter,
+    updateFilter,
+    resetFilters,
+  } = useProfileFilters();
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        if (e.currentTarget.value.trim() === '') {
+          return;
+        }
+        onApplyFilters();
+      }
+    },
+    [onApplyFilters]
+  );
+
+  const filtersToRender = localFilters.length > 0 ? localFilters : appliedFilters ?? [];
+
+  return (
+    <div className="flex gap-2 w-full">
+      <div className="flex-1 flex flex-wrap gap-2">
+        {filtersToRender.map(filter => {
+          const isNumberField = filter.field === 'address' || filter.field === 'line_number';
+          const matchTypeItems = isNumberField ? numberMatchTypeItems : stringMatchTypeItems;
+
+          return (
+            <div key={filter.id} className="flex items-center gap-0">
+              <Select
+                items={filterTypeItems}
+                selectedKey={filter.type}
+                placeholder="Select Filter"
+                onSelection={key => {
+                  const newType = key as 'stack' | 'frame';
+                  updateFilter(filter.id, {
+                    type: newType,
+                    field: filter.field ?? 'function_name',
+                    matchType: filter.matchType ?? 'contains',
+                  });
+                }}
+                className={cx(
+                  'rounded-l-md pr-1 gap-0 focus:z-50 focus:relative focus:outline-1 rounded-r-none ',
+                  filter.type != null ? 'border-r-0 w-28' : 'w-32'
+                )}
+              />
+
+              {filter.type != null && (
+                <>
+                  <Select
+                    items={fieldItems}
+                    selectedKey={filter.field ?? ''}
+                    onSelection={key => {
+                      const newField = key as ProfileFilter['field'];
+                      const isNewFieldNumber = newField === 'address' || newField === 'line_number';
+                      const isCurrentFieldNumber =
+                        filter.field === 'address' || filter.field === 'line_number';
+
+                      if (isNewFieldNumber !== isCurrentFieldNumber) {
+                        updateFilter(filter.id, {
+                          field: newField,
+                          matchType: 'equal',
+                        });
+                      } else {
+                        updateFilter(filter.id, {field: newField});
+                      }
+                    }}
+                    className="rounded-none border-r-0 w-32 pr-1 gap-0 focus:z-50 focus:relative focus:outline-1"
+                  />
+
+                  <Select
+                    items={matchTypeItems}
+                    selectedKey={filter.matchType ?? ''}
+                    onSelection={key =>
+                      updateFilter(filter.id, {matchType: key as ProfileFilter['matchType']})
+                    }
+                    className="rounded-none border-r-0 pr-1 gap-0 focus:z-50 focus:relative focus:outline-1"
+                  />
+
+                  <Input
+                    placeholder="Value"
+                    value={filter.value}
+                    onChange={e => updateFilter(filter.id, {value: e.target.value})}
+                    onKeyDown={handleKeyDown}
+                    className="rounded-none w-36 text-sm focus:outline-1"
+                  />
+                </>
+              )}
+
+              <Button
+                variant="neutral"
+                onClick={() => {
+                  if (localFilters.length === 1) {
+                    resetFilters();
+                  } else {
+                    removeFilter(filter.id);
+                  }
+                }}
+                className={cx(
+                  'h-[38px] p-3',
+                  filter.type != null ? 'rounded-none rounded-r-md' : 'rounded-l-none rounded-r-md'
+                )}
+              >
+                <Icon icon="mdi:close" className="h-4 w-4" />
+              </Button>
+            </div>
+          );
+        })}
+
+        {localFilters.length > 0 && (
+          <Button variant="neutral" onClick={addFilter} className="p-3 h-[38px]">
+            <Icon icon="mdi:filter-plus-outline" className="h-4 w-4" />
+          </Button>
+        )}
+
+        {localFilters.length === 0 && (appliedFilters?.length ?? 0) === 0 && (
+          <Button variant="neutral" onClick={addFilter} className="flex items-center gap-2">
+            <Icon icon="mdi:filter-outline" className="h-4 w-4" />
+            <span>Filter</span>
+          </Button>
+        )}
+      </div>
+
+      {localFilters.length > 0 && hasUnsavedChanges && localFilters.some(isFilterComplete) && (
+        <Button
+          variant="primary"
+          onClick={onApplyFilters}
+          className={cx('flex items-center gap-2 self-end')}
+        >
+          <span>Apply</span>
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default ProfileFilters;

package/src/ProfileView/components/ProfileFilters/useProfileFilters.ts

@@ -0,0 +1,284 @@
+// 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 {useCallback, useEffect, useMemo} from 'react';
+
+import {type Filter} from '@parca/client';
+import {
+  selectLocalFilters,
+  setLocalFilters,
+  useAppDispatch,
+  useAppSelector,
+  type ProfileFilter,
+} from '@parca/store';
+
+import {useProfileFiltersUrlState} from './useProfileFiltersUrlState';
+
+export type {ProfileFilter};
+
+// Convert ProfileFilter[] to protobuf Filter[] matching the expected structure
+const convertToProtoFilters = (profileFilters: ProfileFilter[]): Filter[] => {
+  return profileFilters
+    .filter(f => f.value !== '' && f.type != null && f.field != null && f.matchType != null) // Only include complete filters with values
+    .map(f => {
+      // Build the condition based on field type
+      const isNumberField = f.field === 'address' || f.field === 'line_number';
+
+      let condition: any;
+      if (isNumberField) {
+        const numValue = BigInt(f.value);
+        condition = {
+          condition:
+            f.matchType === 'equal'
+              ? {oneofKind: 'equal' as const, equal: numValue}
+              : {oneofKind: 'notEqual' as const, notEqual: numValue},
+        };
+      } else {
+        condition = {
+          condition:
+            f.matchType === 'equal'
+              ? {oneofKind: 'equal' as const, equal: f.value}
+              : f.matchType === 'not_equal'
+              ? {oneofKind: 'notEqual' as const, notEqual: f.value}
+              : f.matchType === 'contains'
+              ? {oneofKind: 'contains' as const, contains: f.value}
+              : {oneofKind: 'notContains' as const, notContains: f.value},
+        };
+      }
+
+      // Create FilterCriteria
+      const criteria: any = {};
+      switch (f.field) {
+        case 'function_name':
+          criteria.functionName = condition;
+          break;
+        case 'binary':
+          criteria.binary = condition;
+          break;
+        case 'system_name':
+          criteria.systemName = condition;
+          break;
+        case 'filename':
+          criteria.filename = condition;
+          break;
+        case 'address':
+          criteria.address = condition;
+          break;
+        case 'line_number':
+          criteria.lineNumber = condition;
+          break;
+      }
+
+      // Create the appropriate filter type with proper oneofKind structure
+      if (f.type === 'stack') {
+        return {
+          filter: {
+            oneofKind: 'stackFilter' as const,
+            stackFilter: {
+              filter: {
+                oneofKind: 'criteria' as const,
+                criteria,
+              },
+            },
+          },
+        };
+      } else {
+        return {
+          filter: {
+            oneofKind: 'frameFilter' as const,
+            frameFilter: {
+              filter: {
+                oneofKind: 'criteria' as const,
+                criteria,
+              },
+            },
+          },
+        };
+      }
+    });
+};
+
+export const useProfileFilters = (): {
+  localFilters: ProfileFilter[];
+  appliedFilters: ProfileFilter[];
+  protoFilters: Filter[];
+  hasUnsavedChanges: boolean;
+  onApplyFilters: () => void;
+  addFilter: () => void;
+  excludeBinary: (binaryName: string) => void;
+  removeExcludeBinary: (binaryName: string) => void;
+  removeFilter: (id: string) => void;
+  updateFilter: (id: string, updates: Partial<ProfileFilter>) => void;
+  resetFilters: () => void;
+} => {
+  const {appliedFilters, setAppliedFilters} = useProfileFiltersUrlState();
+  const dispatch = useAppDispatch();
+  const localFilters = useAppSelector(selectLocalFilters);
+
+  useEffect(() => {
+    if (appliedFilters != null && appliedFilters.length > 0) {
+      // Check if they're different to avoid unnecessary updates
+      const areFiltersEqual =
+        appliedFilters.length === localFilters.length &&
+        appliedFilters.every((applied, index) => {
+          const local = localFilters[index];
+          return (
+            local != null &&
+            applied.type === local.type &&
+            applied.field === local.field &&
+            applied.matchType === local.matchType &&
+            applied.value === local.value
+          );
+        });
+
+      if (!areFiltersEqual) {
+        dispatch(setLocalFilters(appliedFilters));
+      }
+    } else if (appliedFilters != null && appliedFilters.length === 0 && localFilters.length > 0) {
+      dispatch(setLocalFilters([]));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const hasUnsavedChanges = useMemo(() => {
+    const localWithValues = localFilters.filter(f => f.value !== '');
+    const appliedWithValues = (appliedFilters ?? []).filter(f => f.value !== '');
+
+    if (localWithValues.length !== appliedWithValues.length) return true;
+
+    return !localWithValues.every((local, index) => {
+      const applied = appliedWithValues[index];
+      return (
+        local.type === applied?.type &&
+        local.field === applied?.field &&
+        local.matchType === applied?.matchType &&
+        local.value === applied?.value
+      );
+    });
+  }, [localFilters, appliedFilters]);
+
+  const addFilter = useCallback(() => {
+    const newFilter: ProfileFilter = {
+      id: `filter-${Date.now()}-${Math.random()}`,
+      value: '',
+    };
+    dispatch(setLocalFilters([...localFilters, newFilter]));
+  }, [dispatch, localFilters]);
+
+  const excludeBinary = useCallback(
+    (binaryName: string) => {
+      // Check if this binary is already being filtered with not_contains
+      const existingFilter = (appliedFilters ?? []).find(
+        f =>
+          f.type === 'frame' &&
+          f.field === 'binary' &&
+          f.matchType === 'not_contains' &&
+          f.value === binaryName
+      );
+
+      if (existingFilter != null) {
+        return; // Already exists, don't add duplicate
+      }
+
+      const newFilter: ProfileFilter = {
+        id: `filter-${Date.now()}-${Math.random()}`,
+        type: 'frame',
+        field: 'binary',
+        matchType: 'not_contains',
+        value: binaryName,
+      };
+      dispatch(setLocalFilters([...localFilters, newFilter]));
+
+      // Auto-apply the filter since it has a value
+      const filtersToApply = [...(appliedFilters ?? []), newFilter];
+      setAppliedFilters(filtersToApply);
+    },
+    [appliedFilters, setAppliedFilters, dispatch, localFilters]
+  );
+
+  const removeExcludeBinary = useCallback(
+    (binaryName: string) => {
+      // Search for the exclude filter (not_contains) for this binary
+      const filterToRemove = (appliedFilters ?? []).find(
+        f =>
+          f.type === 'frame' &&
+          f.field === 'binary' &&
+          f.matchType === 'not_contains' &&
+          f.value === binaryName
+      );
+
+      if (filterToRemove != null) {
+        // Remove the filter from applied filters
+        const updatedAppliedFilters = (appliedFilters ?? []).filter(
+          f => f.id !== filterToRemove.id
+        );
+        setAppliedFilters(updatedAppliedFilters);
+
+        // Also remove from local filters
+        const updatedLocalFilters = localFilters.filter(f => f.id !== filterToRemove.id);
+        dispatch(setLocalFilters(updatedLocalFilters));
+      }
+    },
+    [appliedFilters, setAppliedFilters, dispatch, localFilters]
+  );
+
+  const removeFilter = useCallback(
+    (id: string) => {
+      dispatch(setLocalFilters(localFilters.filter(f => f.id !== id)));
+    },
+    [dispatch, localFilters]
+  );
+
+  const updateFilter = useCallback(
+    (id: string, updates: Partial<ProfileFilter>) => {
+      dispatch(setLocalFilters(localFilters.map(f => (f.id === id ? {...f, ...updates} : f))));
+    },
+    [dispatch, localFilters]
+  );
+
+  const resetFilters = useCallback(() => {
+    dispatch(setLocalFilters([]));
+    setAppliedFilters([]);
+  }, [dispatch, setAppliedFilters]);
+
+  const onApplyFilters = useCallback((): void => {
+    const validFilters = localFilters.filter(
+      f => f.value !== '' && f.type != null && f.field != null && f.matchType != null
+    );
+
+    const filtersToApply = validFilters.map((f, index) => ({
+      ...f,
+      id: `filter-${Date.now()}-${index}`,
+    }));
+
+    setAppliedFilters(filtersToApply);
+  }, [localFilters, setAppliedFilters]);
+
+  const protoFilters = useMemo(() => {
+    return convertToProtoFilters(appliedFilters ?? []);
+  }, [appliedFilters]);
+
+  return {
+    localFilters,
+    appliedFilters,
+    protoFilters,
+    hasUnsavedChanges,
+    onApplyFilters,
+    addFilter,
+    excludeBinary,
+    removeExcludeBinary,
+    removeFilter,
+    updateFilter,
+    resetFilters,
+  };
+};

package/src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.ts

@@ -0,0 +1,103 @@
+// 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 {useURLStateCustom, type ParamValueSetterCustom} from '@parca/components';
+import {type ProfileFilter} from '@parca/store';
+
+// Compact encoding mappings
+const TYPE_MAP: Record<string, string> = {
+  stack: 's',
+  frame: 'f',
+};
+
+const FIELD_MAP: Record<string, string> = {
+  function_name: 'fn',
+  binary: 'b',
+  system_name: 'sn',
+  filename: 'f',
+  address: 'a',
+  line_number: 'ln',
+};
+
+const MATCH_MAP: Record<string, string> = {
+  equal: '=',
+  not_equal: '!=',
+  contains: '~',
+  not_contains: '!~',
+};
+
+// Reverse mappings for decoding
+const TYPE_MAP_REVERSE = Object.fromEntries(Object.entries(TYPE_MAP).map(([k, v]) => [v, k]));
+const FIELD_MAP_REVERSE = Object.fromEntries(Object.entries(FIELD_MAP).map(([k, v]) => [v, k]));
+const MATCH_MAP_REVERSE = Object.fromEntries(Object.entries(MATCH_MAP).map(([k, v]) => [v, k]));
+
+// Encode filters to compact string format
+const encodeProfileFilters = (filters: ProfileFilter[]): string => {
+  if (filters.length === 0) return '';
+
+  return filters
+    .filter(f => f.value !== '' && f.type != null && f.field != null && f.matchType != null)
+    .map(f => {
+      const type = TYPE_MAP[f.type!];
+      const field = FIELD_MAP[f.field!];
+      const match = MATCH_MAP[f.matchType!];
+      const value = encodeURIComponent(f.value);
+      return `${type}:${field}:${match}:${value}`;
+    })
+    .join(',');
+};
+
+// Decode filters from compact string format
+export const decodeProfileFilters = (encoded: string): ProfileFilter[] => {
+  if (encoded === '' || encoded === undefined) return [];
+
+  try {
+    return encoded.split(',').map((filter, index) => {
+      const [type, field, match, ...valueParts] = filter.split(':');
+      const value = decodeURIComponent(valueParts.join(':')); // Handle values with colons
+
+      return {
+        id: `filter-${Date.now()}-${index}`,
+        type: TYPE_MAP_REVERSE[type] as ProfileFilter['type'],
+        field: FIELD_MAP_REVERSE[field] as ProfileFilter['field'],
+        matchType: MATCH_MAP_REVERSE[match] as ProfileFilter['matchType'],
+        value,
+      };
+    });
+  } catch {
+    return [];
+  }
+};
+
+export const useProfileFiltersUrlState = (): {
+  appliedFilters: ProfileFilter[];
+  setAppliedFilters: ParamValueSetterCustom<ProfileFilter[]>;
+} => {
+  // Store applied filters in URL state for persistence using compact encoding
+  const [appliedFilters, setAppliedFilters] = useURLStateCustom<ProfileFilter[]>(
+    'profile_filters',
+    {
+      parse: value => {
+        return decodeProfileFilters(value as string);
+      },
+      stringify: value => {
+        return encodeProfileFilters(value);
+      },
+    }
+  );
+
+  return {
+    appliedFilters,
+    setAppliedFilters,
+  };
+};