@parca/profile 0.19.19 → 0.19.21

package/dist/ProfileView/components/ProfileFilters/index.js

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

package/dist/ProfileView/components/ProfileFilters/useProfileFilters.d.ts

@@ -0,0 +1,17 @@
+import { type Filter } from '@parca/client';
+import { type ProfileFilter } from '@parca/store';
+export type { ProfileFilter };
+export declare 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;
+};
+//# sourceMappingURL=useProfileFilters.d.ts.map

package/dist/ProfileView/components/ProfileFilters/useProfileFilters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProfileFilters.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/useProfileFilters.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAKL,KAAK,aAAa,EACnB,MAAM,cAAc,CAAC;AAItB,YAAY,EAAC,aAAa,EAAC,CAAC;AAoF5B,eAAO,MAAM,iBAAiB,QAAO;IACnC,YAAY,EAAE,aAAa,EAAE,CAAC;IAC9B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,mBAAmB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACpE,YAAY,EAAE,MAAM,IAAI,CAAC;CAkK1B,CAAC"}

package/dist/ProfileView/components/ProfileFilters/useProfileFilters.js

@@ -0,0 +1,209 @@
+// 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 { selectLocalFilters, setLocalFilters, useAppDispatch, useAppSelector, } from '@parca/store';
+import { useProfileFiltersUrlState } from './useProfileFiltersUrlState';
+// Convert ProfileFilter[] to protobuf Filter[] matching the expected structure
+const convertToProtoFilters = (profileFilters) => {
+    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;
+        if (isNumberField) {
+            const numValue = BigInt(f.value);
+            condition = {
+                condition: f.matchType === 'equal'
+                    ? { oneofKind: 'equal', equal: numValue }
+                    : { oneofKind: 'notEqual', notEqual: numValue },
+            };
+        }
+        else {
+            condition = {
+                condition: f.matchType === 'equal'
+                    ? { oneofKind: 'equal', equal: f.value }
+                    : f.matchType === 'not_equal'
+                        ? { oneofKind: 'notEqual', notEqual: f.value }
+                        : f.matchType === 'contains'
+                            ? { oneofKind: 'contains', contains: f.value }
+                            : { oneofKind: 'notContains', notContains: f.value },
+            };
+        }
+        // Create FilterCriteria
+        const criteria = {};
+        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',
+                    stackFilter: {
+                        filter: {
+                            oneofKind: 'criteria',
+                            criteria,
+                        },
+                    },
+                },
+            };
+        }
+        else {
+            return {
+                filter: {
+                    oneofKind: 'frameFilter',
+                    frameFilter: {
+                        filter: {
+                            oneofKind: 'criteria',
+                            criteria,
+                        },
+                    },
+                },
+            };
+        }
+    });
+};
+export const useProfileFilters = () => {
+    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 = {
+            id: `filter-${Date.now()}-${Math.random()}`,
+            value: '',
+        };
+        dispatch(setLocalFilters([...localFilters, newFilter]));
+    }, [dispatch, localFilters]);
+    const excludeBinary = useCallback((binaryName) => {
+        // 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 = {
+            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) => {
+        // 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) => {
+        dispatch(setLocalFilters(localFilters.filter(f => f.id !== id)));
+    }, [dispatch, localFilters]);
+    const updateFilter = useCallback((id, updates) => {
+        dispatch(setLocalFilters(localFilters.map(f => (f.id === id ? { ...f, ...updates } : f))));
+    }, [dispatch, localFilters]);
+    const resetFilters = useCallback(() => {
+        dispatch(setLocalFilters([]));
+        setAppliedFilters([]);
+    }, [dispatch, setAppliedFilters]);
+    const onApplyFilters = useCallback(() => {
+        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/dist/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.d.ts

@@ -0,0 +1,8 @@
+import { type ParamValueSetterCustom } from '@parca/components';
+import { type ProfileFilter } from '@parca/store';
+export declare const decodeProfileFilters: (encoded: string) => ProfileFilter[];
+export declare const useProfileFiltersUrlState: () => {
+    appliedFilters: ProfileFilter[];
+    setAppliedFilters: ParamValueSetterCustom<ProfileFilter[]>;
+};
+//# sourceMappingURL=useProfileFiltersUrlState.d.ts.map

package/dist/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProfileFiltersUrlState.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.ts"],"names":[],"mappings":"AAaA,OAAO,EAAoB,KAAK,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AACjF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,cAAc,CAAC;AA8ChD,eAAO,MAAM,oBAAoB,GAAI,SAAS,MAAM,KAAG,aAAa,EAmBnE,CAAC;AAEF,eAAO,MAAM,yBAAyB,QAAO;IAC3C,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,EAAE,sBAAsB,CAAC,aAAa,EAAE,CAAC,CAAC;CAmB5D,CAAC"}

package/dist/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.js

@@ -0,0 +1,87 @@
+// 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 } from '@parca/components';
+// Compact encoding mappings
+const TYPE_MAP = {
+    stack: 's',
+    frame: 'f',
+};
+const FIELD_MAP = {
+    function_name: 'fn',
+    binary: 'b',
+    system_name: 'sn',
+    filename: 'f',
+    address: 'a',
+    line_number: 'ln',
+};
+const MATCH_MAP = {
+    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) => {
+    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) => {
+    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],
+                field: FIELD_MAP_REVERSE[field],
+                matchType: MATCH_MAP_REVERSE[match],
+                value,
+            };
+        });
+    }
+    catch {
+        return [];
+    }
+};
+export const useProfileFiltersUrlState = () => {
+    // Store applied filters in URL state for persistence using compact encoding
+    const [appliedFilters, setAppliedFilters] = useURLStateCustom('profile_filters', {
+        parse: value => {
+            return decodeProfileFilters(value);
+        },
+        stringify: value => {
+            return encodeProfileFilters(value);
+        },
+    });
+    return {
+        appliedFilters,
+        setAppliedFilters,
+    };
+};

package/dist/ProfileView/components/Toolbars/MultiLevelDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiLevelDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAQtE,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAkK1C,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAyOzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"MultiLevelDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAQtE,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAkK1C,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqPzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileView/components/Toolbars/MultiLevelDropdown.js

@@ -71,13 +71,14 @@ const MenuItem = ({ label, items, onclick, onSelect, path = [], id, closeDropdow
                             }, path: [...path, label], closeDropdown: closeDropdown, isNested: true, activeValueForSortBy: activeValueForSortBy, activeValueForColorBy: activeValueForColorBy, activeValuesForLevel: activeValuesForLevel }, index))) }))] })) }) }));
 };
 const MultiLevelDropdown = ({ onSelect, profileType, groupBy, toggleGroupBy, isTableVizOnly, }) => {
+    const dropdownRef = useRef(null);
+    const [shouldOpenLeft, setShouldOpenLeft] = useState(false);
     const [storeSortBy] = useURLState('sort_by', {
         defaultValue: FIELD_FUNCTION_NAME,
     });
     const [colorStackLegend, setStoreColorStackLegend] = useURLState('color_stack_legend');
-    const [binaryFrameFilter, setBinaryFrameFilter] = useURLState('binary_frame_filter');
     const [colorBy, setColorBy] = useURLState('color_by');
-    const [hiddenBinaries, setHiddenBinaries] = useURLState('binary_frame_filter', {
+    const [hiddenBinaries, setHiddenBinaries] = useURLState('hidden_binaries', {
         defaultValue: [],
         alwaysReturnArray: true,
     });
@@ -91,6 +92,21 @@ const MultiLevelDropdown = ({ onSelect, profileType, groupBy, toggleGroupBy, isT
     const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
     const [compareAbsolute = compareAbsoluteDefault, setCompareAbsolute] = useURLState('compare_absolute');
     const isCompareAbsolute = compareAbsolute === 'true';
+    useEffect(() => {
+        const checkOverflow = () => {
+            if (dropdownRef.current !== null) {
+                const rect = dropdownRef.current.getBoundingClientRect();
+                const viewportWidth = window.innerWidth;
+                const menuWidth = isTableVizOnly ? 256 : 320; // w-64 = 256px, w-80 = 320px
+                const spaceOnRight = viewportWidth - rect.right;
+                const spaceOnLeft = rect.left;
+                setShouldOpenLeft(spaceOnRight < menuWidth && spaceOnLeft >= menuWidth);
+            }
+        };
+        checkOverflow();
+        window.addEventListener('resize', checkOverflow);
+        return () => window.removeEventListener('resize', checkOverflow);
+    }, [isTableVizOnly]);
     const handleBinaryToggle = (index) => {
         const updatedBinaries = [...hiddenBinaries];
         updatedBinaries.splice(index, 1);
@@ -100,7 +116,7 @@ const MultiLevelDropdown = ({ onSelect, profileType, groupBy, toggleGroupBy, isT
         setStoreColorStackLegend(value);
     }, [setStoreColorStackLegend]);
     const resetLegend = () => {
-        setBinaryFrameFilter([]);
+        setHiddenBinaries([]);
     };
     const menuItems = [
         {
@@ -171,12 +187,6 @@ const MultiLevelDropdown = ({ onSelect, profileType, groupBy, toggleGroupBy, isT
             hide: !compareMode,
             icon: isCompareAbsolute ? 'fluent-mdl2:compare' : 'fluent-mdl2:compare-uneven',
         },
-        {
-            label: 'Highlight matching nodes after filtering',
-            hide: !!isTableVizOnly,
-            customSubmenu: (_jsx(SwitchMenuItem, { label: "Highlight matching nodes after filtering", id: "h-highlight-after-filtering", userPreferenceDetails: USER_PREFERENCES.HIGHTLIGHT_AFTER_FILTERING })),
-            renderAsDiv: true,
-        },
         {
             label: 'Dock Graph MetaInfo',
             hide: !!isTableVizOnly,
@@ -191,7 +201,7 @@ const MultiLevelDropdown = ({ onSelect, profileType, groupBy, toggleGroupBy, isT
         },
         {
             label: 'Reset Legend',
-            hide: binaryFrameFilter === undefined || binaryFrameFilter.length === 0,
+            hide: hiddenBinaries === undefined || hiddenBinaries.length === 0,
             onclick: () => resetLegend(),
             id: 'h-reset-legend-button',
             icon: 'system-uicons:reset',
@@ -207,7 +217,7 @@ const MultiLevelDropdown = ({ onSelect, profileType, groupBy, toggleGroupBy, isT
             icon: 'ph:eye-closed',
         },
     ];
-    return (_jsx("div", { className: "relative inline-block text-left", id: "h-visualisation-toolbar-actions", children: _jsx(Menu, { children: ({ open, close }) => (_jsxs(_Fragment, { children: [_jsxs(Menu.Button, { className: "flex dark:bg-gray-900 dark:border-gray-600 justify-center w-full px-4 py-2 text-sm font-normal text-gray-600 dark:text-gray-200 bg-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 border border-gray-200 pr-[1.7rem]", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { icon: "pajamas:preferences", className: "w-4 h-4" }), _jsx("span", { children: "Preferences" })] }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }), open && (_jsx(Menu.Items, { className: cx(isTableVizOnly ? 'w-64' : 'w-80', 'absolute z-30 left-0 mt-2 py-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600'), children: menuItems
+    return (_jsx("div", { className: "relative inline-block text-left", id: "h-visualisation-toolbar-actions", ref: dropdownRef, children: _jsx(Menu, { children: ({ open, close }) => (_jsxs(_Fragment, { children: [_jsxs(Menu.Button, { className: "flex dark:bg-gray-900 dark:border-gray-600 justify-center w-full px-4 py-2 text-sm font-normal text-gray-600 dark:text-gray-200 bg-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 border border-gray-200 pr-[1.7rem]", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { icon: "pajamas:preferences", className: "w-4 h-4" }), _jsx("span", { children: "Preferences" })] }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }), open && (_jsx(Menu.Items, { className: cx(isTableVizOnly ? 'w-64' : 'w-80', 'absolute z-30 mt-2 py-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600', shouldOpenLeft ? 'right-0 origin-top-right' : 'left-0 origin-top-left'), children: menuItems
                             .filter(item => item.hide !== undefined && !item.hide)
                             .map((item, index) => (_jsx(MenuItem, { ...item, onSelect: onSelect, closeDropdown: close, activeValueForSortBy: storeSortBy, activeValueForColorBy: colorBy === undefined || colorBy === '' ? 'binary' : colorBy, activeValuesForLevel: groupBy, renderAsDiv: item.renderAsDiv }, index))) }))] })) }) }));
 };

package/dist/ProfileView/components/Toolbars/index.d.ts

@@ -16,12 +16,9 @@ export interface VisualisationToolbarProps {
     profileType?: ProfileType;
     total: bigint;
     filtered: bigint;
-    currentSearchString?: string;
-    setSearchString?: (value: string) => void;
     groupByLabels: string[];
     preferencesModal?: boolean;
     profileViewExternalSubActions?: React.ReactNode;
-    clearSelection: () => void;
     setGroupByLabels: (labels: string[]) => void;
     showVisualizationSelector?: boolean;
     sandwichFunctionName?: string;
@@ -30,8 +27,6 @@ export interface TableToolbarProps {
     profileType?: ProfileType;
     total: bigint;
     filtered: bigint;
-    clearSelection: () => void;
-    currentSearchString?: string;
 }
 export interface FlameGraphToolbarProps {
     curPath: CurrentPathFrame[];

package/dist/ProfileView/components/Toolbars/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAUrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,8BAA8B;IAC7C,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAwB9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAiBxD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,8BAA8B,CAmBxE,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA+F9D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAUrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,8BAA8B;IAC7C,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAQ9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAiBxD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,8BAA8B,CAmBxE,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAsF9D,CAAC"}