@parca/profile 0.19.144 → 0.19.145

package/src/ProfileView/components/ColorStackLegend.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useMemo} from 'react';
+import React from 'react';
 
 import {Icon} from '@iconify/react';
 import cx from 'classnames';
@@ -41,31 +41,23 @@ const ColorStackLegend = ({mappings, compareMode = false, loading}: Props): Reac
 
   const {appliedFilters, removeExcludeBinary, excludeBinary} = useProfileFilters();
 
-  // Get current binary filters from the new ProfileFilters system
-  const currentBinaryFilters = useMemo(() => {
-    return (appliedFilters ?? [])
-      .filter(f => f.type === 'frame' && f.field === 'binary')
-      .map(f => f.value);
-  }, [appliedFilters]);
+  const currentBinaryFilters = (appliedFilters ?? [])
+    .filter(f => f.type === 'frame' && f.field === 'binary')
+    .map(f => f.value);
 
   const mappingsList = useMappingList(mappings);
 
-  const mappingColors = useMemo(() => {
-    const colors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
-    return colors;
-  }, [isDarkMode, mappingsList, currentColorProfile]);
-
-  const stackColorArray = useMemo(() => {
-    return Object.entries(mappingColors).sort(([featureA], [featureB]) => {
-      if (featureA === EVERYTHING_ELSE) {
-        return 1;
-      }
-      if (featureB === EVERYTHING_ELSE) {
-        return -1;
-      }
-      return featureA?.localeCompare(featureB ?? '') ?? 0;
-    });
-  }, [mappingColors]);
+  const mappingColors = getMappingColors(mappingsList, isDarkMode, currentColorProfile);
+
+  const stackColorArray = Object.entries(mappingColors).sort(([featureA], [featureB]) => {
+    if (featureA === EVERYTHING_ELSE) {
+      return 1;
+    }
+    if (featureB === EVERYTHING_ELSE) {
+      return -1;
+    }
+    return featureA?.localeCompare(featureB ?? '') ?? 0;
+  });
 
   if (stackColorArray.length === 0 && loading === false) {
     return <></>;

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

@@ -11,8 +11,6 @@
 // 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';
 
@@ -203,18 +201,15 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
     resetFilters,
   } = useProfileFilters();
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        if (e.currentTarget.value.trim() === '') {
-          return;
-        }
-        onApplyFilters();
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (e.currentTarget.value.trim() === '') {
+        return;
       }
-    },
-    [onApplyFilters]
-  );
+      onApplyFilters();
+    }
+  };
 
   const filtersToRender = localFilters.length > 0 ? localFilters : appliedFilters ?? [];
 

package/src/ProfileView/components/Toolbars/TableColumnsDropdown.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useMemo, useState} from 'react';
+import {useEffect, useState} from 'react';
 
 import {createColumnHelper, type ColumnDef} from '@tanstack/table-core';
 import {useQueryState} from 'nuqs';
@@ -37,121 +37,118 @@ const TableColumnsDropdown = ({profileType, total, filtered}: Props): JSX.Elemen
 
   const columnHelper = createColumnHelper<Row>();
 
-  const unit: string = useMemo(() => profileType?.sampleUnit ?? '', [profileType?.sampleUnit]);
+  const unit: string = profileType?.sampleUnit ?? '';
 
-  const columns = useMemo<Array<ColumnDef<Row>>>(() => {
-    return [
-      columnHelper.accessor('flat', {
-        id: 'flat',
-        header: 'Flat',
-        cell: info => valueFormatter(info.getValue(), unit, 2),
-        size: 80,
-        meta: {
-          align: 'right',
-        },
-        invertSorting: true,
-      }),
-      columnHelper.accessor('flat', {
-        id: 'flatPercentage',
-        header: 'Flat (%)',
-        cell: info => {
-          return getRatioString(info.getValue(), total, filtered);
-        },
-        size: 120,
-        meta: {
-          align: 'right',
-        },
-        invertSorting: true,
-      }),
-      columnHelper.accessor('flatDiff', {
-        id: 'flatDiff',
-        header: 'Flat Diff',
-        cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
-        size: 120,
-        meta: {
-          align: 'right',
-        },
-        invertSorting: true,
-      }),
-      columnHelper.accessor('flatDiff', {
-        id: 'flatDiffPercentage',
-        header: 'Flat Diff (%)',
-        cell: info => {
-          return getRatioString(info.getValue(), total, filtered);
-        },
-        size: 120,
-        meta: {
-          align: 'right',
-        },
-        invertSorting: true,
-      }),
-      columnHelper.accessor('cumulative', {
-        id: 'cumulative',
-        header: 'Cumulative',
-        cell: info => valueFormatter(info.getValue(), unit, 2),
-        size: 150,
-        meta: {
-          align: 'right',
-        },
-        invertSorting: true,
-      }),
-      columnHelper.accessor('cumulative', {
-        id: 'cumulativePercentage',
-        header: 'Cumulative (%)',
-        cell: info => {
-          return getRatioString(info.getValue(), total, filtered);
-        },
-        size: 150,
-        meta: {
-          align: 'right',
-        },
-        invertSorting: true,
-      }),
-      columnHelper.accessor('cumulativeDiff', {
-        id: 'cumulativeDiff',
-        header: 'Cumulative Diff',
-        cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
-        size: 170,
-        meta: {
-          align: 'right',
-        },
-        invertSorting: true,
-      }),
-      columnHelper.accessor('cumulativeDiff', {
-        id: 'cumulativeDiffPercentage',
-        header: 'Cumulative Diff (%)',
-        cell: info => {
-          return getRatioString(info.getValue(), total, filtered);
-        },
-        size: 170,
-        meta: {
-          align: 'right',
-        },
-        invertSorting: true,
-      }),
-      columnHelper.accessor('name', {
-        id: 'name',
-        header: 'Name',
-        cell: info => info.getValue(),
-      }),
-      columnHelper.accessor('functionSystemName', {
-        id: 'functionSystemName',
-        header: 'Function System Name',
-        cell: info => info.getValue(),
-      }),
-      columnHelper.accessor('functionFileName', {
-        id: 'functionFileName',
-        header: 'Function File Name',
-        cell: info => info.getValue(),
-      }),
-      columnHelper.accessor('mappingFile', {
-        id: 'mappingFile',
-        header: 'Mapping File',
-        cell: info => info.getValue(),
-      }),
-    ];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [profileType, unit]);
+  const columns: Array<ColumnDef<Row>> = [
+    columnHelper.accessor('flat', {
+      id: 'flat',
+      header: 'Flat',
+      cell: info => valueFormatter(info.getValue(), unit, 2),
+      size: 80,
+      meta: {
+        align: 'right',
+      },
+      invertSorting: true,
+    }),
+    columnHelper.accessor('flat', {
+      id: 'flatPercentage',
+      header: 'Flat (%)',
+      cell: info => {
+        return getRatioString(info.getValue(), total, filtered);
+      },
+      size: 120,
+      meta: {
+        align: 'right',
+      },
+      invertSorting: true,
+    }),
+    columnHelper.accessor('flatDiff', {
+      id: 'flatDiff',
+      header: 'Flat Diff',
+      cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
+      size: 120,
+      meta: {
+        align: 'right',
+      },
+      invertSorting: true,
+    }),
+    columnHelper.accessor('flatDiff', {
+      id: 'flatDiffPercentage',
+      header: 'Flat Diff (%)',
+      cell: info => {
+        return getRatioString(info.getValue(), total, filtered);
+      },
+      size: 120,
+      meta: {
+        align: 'right',
+      },
+      invertSorting: true,
+    }),
+    columnHelper.accessor('cumulative', {
+      id: 'cumulative',
+      header: 'Cumulative',
+      cell: info => valueFormatter(info.getValue(), unit, 2),
+      size: 150,
+      meta: {
+        align: 'right',
+      },
+      invertSorting: true,
+    }),
+    columnHelper.accessor('cumulative', {
+      id: 'cumulativePercentage',
+      header: 'Cumulative (%)',
+      cell: info => {
+        return getRatioString(info.getValue(), total, filtered);
+      },
+      size: 150,
+      meta: {
+        align: 'right',
+      },
+      invertSorting: true,
+    }),
+    columnHelper.accessor('cumulativeDiff', {
+      id: 'cumulativeDiff',
+      header: 'Cumulative Diff',
+      cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
+      size: 170,
+      meta: {
+        align: 'right',
+      },
+      invertSorting: true,
+    }),
+    columnHelper.accessor('cumulativeDiff', {
+      id: 'cumulativeDiffPercentage',
+      header: 'Cumulative Diff (%)',
+      cell: info => {
+        return getRatioString(info.getValue(), total, filtered);
+      },
+      size: 170,
+      meta: {
+        align: 'right',
+      },
+      invertSorting: true,
+    }),
+    columnHelper.accessor('name', {
+      id: 'name',
+      header: 'Name',
+      cell: info => info.getValue(),
+    }),
+    columnHelper.accessor('functionSystemName', {
+      id: 'functionSystemName',
+      header: 'Function System Name',
+      cell: info => info.getValue(),
+    }),
+    columnHelper.accessor('functionFileName', {
+      id: 'functionFileName',
+      header: 'Function File Name',
+      cell: info => info.getValue(),
+    }),
+    columnHelper.accessor('mappingFile', {
+      id: 'mappingFile',
+      header: 'Mapping File',
+      cell: info => info.getValue(),
+    }),
+  ];
 
   const [columnVisibility, setColumnVisibility] = useState(() => {
     return {
@@ -173,6 +170,7 @@ const TableColumnsDropdown = ({profileType, total, filtered}: Props): JSX.Elemen
 
   useEffect(() => {
     if (Array.isArray(tableColumns)) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setColumnVisibility(prevState => {
         const newState = {...prevState};
         (Object.keys(newState) as ColumnName[]).forEach(column => {

package/src/SelectWithRefresh/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useCallback, useState} from 'react';
+import {useState} from 'react';
 
 import ReactSelect, {type MenuListProps, type Props as ReactSelectProps} from 'react-select';
 
@@ -39,7 +39,7 @@ export function SelectWithRefresh<Option, IsMulti extends boolean = false>(
 
   const [isRefreshing, setIsRefreshing] = useState(false);
 
-  const handleRefetch = useCallback(async () => {
+  const handleRefetch = async (): Promise<void> => {
     if (onRefresh == null || isRefreshing) return;
 
     setIsRefreshing(true);
@@ -50,35 +50,35 @@ export function SelectWithRefresh<Option, IsMulti extends boolean = false>(
     } finally {
       setIsRefreshing(false);
     }
-  }, [onRefresh, isRefreshing]);
+  };
 
-  const MenuListWithRefresh = useCallback(
-    ({children, innerProps}: MenuListProps<Option, IsMulti>) => {
-      const testIdProps = menuTestId != null ? {'data-testid': menuTestId} : {};
+  const MenuListWithRefresh = ({
+    children,
+    innerProps,
+  }: MenuListProps<Option, IsMulti>): JSX.Element => {
+    const testIdProps = menuTestId != null ? {'data-testid': menuTestId} : {};
 
-      return (
-        <div className="flex flex-col" style={{maxHeight: '332px'}}>
-          <div
-            className="overflow-y-auto flex-1"
-            {...innerProps}
-            {...testIdProps}
-            style={{...innerProps?.style, fontSize: '14px'}}
-          >
-            {children}
-          </div>
-          {onRefresh != null && (
-            <RefreshButton
-              onClick={() => void handleRefetch()}
-              disabled={isRefreshing}
-              title={refreshTitle}
-              testId={refreshTestId}
-            />
-          )}
+    return (
+      <div className="flex flex-col" style={{maxHeight: '332px'}}>
+        <div
+          className="overflow-y-auto flex-1"
+          {...innerProps}
+          {...testIdProps}
+          style={{...innerProps?.style, fontSize: '14px'}}
+        >
+          {children}
         </div>
-      );
-    },
-    [onRefresh, isRefreshing, handleRefetch, refreshTitle, refreshTestId, menuTestId]
-  );
+        {onRefresh != null && (
+          <RefreshButton
+            onClick={() => void handleRefetch()}
+            disabled={isRefreshing}
+            title={refreshTitle}
+            testId={refreshTestId}
+          />
+        )}
+      </div>
+    );
+  };
 
   const combinedLoadingState = isRefreshing || (selectProps.isLoading ?? false);
 

package/src/SimpleMatchers/Select.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 
 import {Icon} from '@iconify/react';
 import {useVirtualizer} from '@tanstack/react-virtual';
@@ -91,7 +91,7 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
   const optionsRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
 
-  const handleRefetch = useCallback(async () => {
+  const handleRefetch = async (): Promise<void> => {
     if (refetchValues == null || isRefetching) return;
 
     setIsRefetching(true);
@@ -100,23 +100,21 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
     } finally {
       setIsRefetching(false);
     }
-  }, [refetchValues, isRefetching]);
+  };
 
   useEffect(() => {
     const timer = setTimeout(() => setDebouncedSearchTerm(searchTerm), 150);
     return () => clearTimeout(timer);
   }, [searchTerm]);
 
-  const items = useMemo<TypedSelectItem[]>(() => {
-    if (itemsProp[0] != null && 'type' in itemsProp[0]) {
-      return (itemsProp as GroupedSelectItem[]).flatMap(item =>
-        item.values.map(v => ({...v, type: item.type}))
-      );
-    }
-    return (itemsProp as SelectItem[]).map(item => ({...item, type: ''}));
-  }, [itemsProp]);
+  const items: TypedSelectItem[] =
+    itemsProp[0] != null && 'type' in itemsProp[0]
+      ? (itemsProp as GroupedSelectItem[]).flatMap(item =>
+          item.values.map(v => ({...v, type: item.type}))
+        )
+      : (itemsProp as SelectItem[]).map(item => ({...item, type: ''}));
 
-  const filteredItems = useMemo(() => {
+  const computeFilteredItems = (): TypedSelectItem[] => {
     if (!searchable) return items;
     const lowerSearch = debouncedSearchTerm.toLowerCase();
     const filtered = items.filter(item =>
@@ -129,7 +127,8 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
       (a, b) =>
         levenshtein.get(a.key, debouncedSearchTerm) - levenshtein.get(b.key, debouncedSearchTerm)
     );
-  }, [items, debouncedSearchTerm, searchable]);
+  };
+  const filteredItems = computeFilteredItems();
 
   const selection = editable ? selectedKey : items.find(v => v.key === selectedKey);
 
@@ -228,24 +227,20 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
     e.target.value = value;
   };
 
-  const groupedFilteredItems = useMemo(() => {
-    return filteredItems
-      .reduce((acc: GroupedSelectItem[], item) => {
-        const group = acc.find(g => g.type === item.type);
-        if (group != null) {
-          group.values.push(item);
-        } else {
-          acc.push({type: item.type, values: [item]});
-        }
-        return acc;
-      }, [])
-      .sort((a, b) => a.values.length - b.values.length);
-  }, [filteredItems]);
-
-  const showHeaders = useMemo(
-    () => groupedFilteredItems.length > 1 && groupedFilteredItems.every(g => g.type !== ''),
-    [groupedFilteredItems]
-  );
+  const groupedFilteredItems = filteredItems
+    .reduce((acc: GroupedSelectItem[], item) => {
+      const group = acc.find(g => g.type === item.type);
+      if (group != null) {
+        group.values.push(item);
+      } else {
+        acc.push({type: item.type, values: [item]});
+      }
+      return acc;
+    }, [])
+    .sort((a, b) => a.values.length - b.values.length);
+
+  const showHeaders =
+    groupedFilteredItems.length > 1 && groupedFilteredItems.every(g => g.type !== '');
 
   const flatList = useMemo(() => {
     const list: Array<
@@ -264,12 +259,9 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
     return list;
   }, [groupedFilteredItems, showHeaders]);
 
-  const longestKey = useMemo(
-    () =>
-      filteredItems.reduce((a, b) => (a.key.length > b.key.length ? a : b), filteredItems[0])
-        ?.key ?? '',
-    [filteredItems]
-  );
+  const longestKey =
+    filteredItems.reduce((a, b) => (a.key.length > b.key.length ? a : b), filteredItems[0])?.key ??
+    '';
 
   const rowVirtualizer = useVirtualizer({
     count: flatList.length,

package/src/SourceView/Highlighter.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {MouseEventHandler, useId, useMemo} from 'react';
+import {MouseEventHandler, useId} from 'react';
 
 import cx from 'classnames';
 import {scaleLinear} from 'd3-scale';
@@ -193,7 +193,7 @@ export const profileAwareRenderer = (
 
 export const Highlighter = ({file, content, renderer}: HighlighterProps): JSX.Element => {
   const {isDarkMode} = useParcaContext();
-  const language = useMemo(() => langaugeFromFile(file), [file]);
+  const language = langaugeFromFile(file);
 
   return (
     <div className="relative">