@parca/profile 0.16.373 → 0.16.375

package/src/ProfileIcicleGraph/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useCallback, useEffect, useMemo} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 
 import {Icon} from '@iconify/react';
 import {AnimatePresence, motion} from 'framer-motion';
@@ -32,7 +32,6 @@ import {capitalizeOnlyFirstLetter, divide, type NavigateFunction} from '@parca/u
 import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import DiffLegend from '../components/DiffLegend';
 import GroupByDropdown from './ActionButtons/GroupByDropdown';
-import RuntimeFilterDropdown from './ActionButtons/RuntimeFilterDropdown';
 import SortBySelect from './ActionButtons/SortBySelect';
 import IcicleGraph from './IcicleGraph';
 import IcicleGraphArrow, {FIELD_FUNCTION_NAME} from './IcicleGraphArrow';
@@ -55,6 +54,7 @@ interface ProfileIcicleGraphProps {
   setActionButtons?: (buttons: React.JSX.Element) => void;
   error?: any;
   isHalfScreen: boolean;
+  mappings?: string[];
 }
 
 const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
@@ -72,6 +72,10 @@ const ShowHideLegendButton = ({
     param: 'color_stack_legend',
     navigateTo,
   });
+  const [binaryFrameFilter, setBinaryFrameFilter] = useURLState({
+    param: 'binary_frame_filter',
+    navigateTo,
+  });
 
   const {compareMode} = useProfileViewContext();
 
@@ -88,28 +92,56 @@ const ShowHideLegendButton = ({
     [setStoreColorStackLegend]
   );
 
+  const resetLegend = (): void => {
+    setBinaryFrameFilter([]);
+  };
+
   return (
     <>
       {colorProfileName === 'default' || compareMode ? null : (
         <>
           {isHalfScreen ? (
-            <IconButton
-              className="rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center !py-2 !px-3 cursor-pointer min-h-[38px]"
-              icon={isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye'}
-              toolTipText={isColorStackLegendEnabled ? 'Hide legend' : 'Show legend'}
-              onClick={() => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true')}
-              id="h-show-legend-button"
-            />
+            <>
+              <IconButton
+                className="rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center !py-2 !px-3 cursor-pointer min-h-[38px]"
+                icon={isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye'}
+                toolTipText={isColorStackLegendEnabled ? 'Hide legend' : 'Show legend'}
+                onClick={() => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true')}
+                id="h-show-legend-button"
+              />
+              {binaryFrameFilter !== undefined && binaryFrameFilter.length > 0 && (
+                <IconButton
+                  className="rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center !py-2 !px-3 cursor-pointer min-h-[38px]"
+                  icon="system-uicons:reset"
+                  toolTipText="Reset the legend selection"
+                  onClick={() => resetLegend()}
+                  id="h-reset-legend-button"
+                />
+              )}
+            </>
           ) : (
-            <Button
-              className="gap-2 w-max"
-              variant="neutral"
-              onClick={() => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true')}
-              id="h-show-legend-button"
-            >
-              {isColorStackLegendEnabled ? 'Hide legend' : 'Show legend'}
-              <Icon icon={isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye'} width={20} />
-            </Button>
+            <>
+              <Button
+                className="gap-2 w-max"
+                variant="neutral"
+                onClick={() => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true')}
+                id="h-show-legend-button"
+              >
+                {isColorStackLegendEnabled ? 'Hide legend' : 'Show legend'}
+                <Icon icon={isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye'} width={20} />
+              </Button>
+              {binaryFrameFilter !== undefined && binaryFrameFilter.length > 0 && (
+                <Button
+                  className="gap-2 w-max"
+                  variant="neutral"
+                  onClick={() => resetLegend()}
+                  id="h-reset-legend-button"
+                >
+                  Reset Legend
+                  <Icon icon="system-uicons:reset" width={20} />
+                </Button>
+              )}
+            </>
           )}
         </>
       )}
@@ -155,21 +187,6 @@ const GroupAndSortActionButtons = ({navigateTo}: {navigateTo?: NavigateFunction}
     [groupBy, setGroupBy]
   );
 
-  const [showRuntimeRubyStr, setShowRuntimeRuby] = useURLState({
-    param: 'show_runtime_ruby',
-    navigateTo,
-  });
-
-  const [showRuntimePythonStr, setShowRuntimePython] = useURLState({
-    param: 'show_runtime_python',
-    navigateTo,
-  });
-
-  const [showInterpretedOnlyStr, setShowInterpretedOnly] = useURLState({
-    param: 'show_interpreted_only',
-    navigateTo,
-  });
-
   return (
     <>
       <GroupByDropdown groupBy={groupBy} toggleGroupBy={toggleGroupBy} />
@@ -178,20 +195,6 @@ const GroupAndSortActionButtons = ({navigateTo}: {navigateTo?: NavigateFunction}
         sortBy={storeSortBy as string}
         setSortBy={setStoreSortBy}
       />
-      <RuntimeFilterDropdown
-        showRuntimeRuby={showRuntimeRubyStr === 'true'}
-        toggleShowRuntimeRuby={() =>
-          setShowRuntimeRuby(showRuntimeRubyStr === 'true' ? 'false' : 'true')
-        }
-        showRuntimePython={showRuntimePythonStr === 'true'}
-        toggleShowRuntimePython={() =>
-          setShowRuntimePython(showRuntimePythonStr === 'true' ? 'false' : 'true')
-        }
-        showInterpretedOnly={showInterpretedOnlyStr === 'true'}
-        toggleShowInterpretedOnly={() =>
-          setShowInterpretedOnly(showInterpretedOnlyStr === 'true' ? 'false' : 'true')
-        }
-      />
     </>
   );
 };
@@ -210,9 +213,11 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   error,
   width,
   isHalfScreen,
+  mappings,
 }: ProfileIcicleGraphProps): JSX.Element {
   const {onError, authenticationErrorMessage, isDarkMode} = useParcaContext();
   const {compareMode} = useProfileViewContext();
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
     param: 'sort_by',
@@ -257,7 +262,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   }, [graph, arrow, filtered, total]);
 
   useEffect(() => {
-    if (loading && setActionButtons !== undefined) {
+    if (isLoading && setActionButtons !== undefined) {
       setActionButtons(<IcicleActionButtonPlaceholder isHalfScreen={isHalfScreen} />);
       return;
     }
@@ -270,7 +275,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
       <div className="flex w-full justify-end gap-2 pb-2">
         <div className="ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end">
           {arrow !== undefined && <GroupAndSortActionButtons navigateTo={navigateTo} />}
-          {isHalfScreen ? (
+          {arrow !== undefined && isHalfScreen ? (
             <IconButton
               icon={isInvert ? 'ph:sort-ascending' : 'ph:sort-descending'}
               toolTipText={isInvert ? 'Original Call Stack' : 'Invert Call Stack'}
@@ -320,9 +325,18 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     setActionButtons,
     loading,
     isHalfScreen,
+    isLoading,
   ]);
 
-  if (loading) {
+  useEffect(() => {
+    if (!loading && (arrow !== undefined || graph !== undefined)) {
+      setIsLoading(false);
+    } else {
+      setIsLoading(true);
+    }
+  }, [loading, arrow, graph]);
+
+  if (isLoading) {
     return (
       <div className="h-auto overflow-clip">
         <IcicleGraphSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
@@ -384,6 +398,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
               profileType={profileType}
               navigateTo={navigateTo}
               sortBy={storeSortBy as string}
+              mappings={mappings}
             />
           )}
         </div>

package/src/ProfileSource.tsx

@@ -166,6 +166,7 @@ export class ProfileDiffSource implements ProfileSource {
       reportType: QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED,
       mode: QueryRequest_Mode.DIFF,
       filterQuery: this.filterQuery,
+      filter: [],
     };
   }
 
@@ -233,6 +234,7 @@ export class MergedProfileSource implements ProfileSource {
       reportType: QueryRequest_ReportType.FLAMEGRAPH_UNSPECIFIED,
       mode: QueryRequest_Mode.MERGE,
       filterQuery: this.filterQuery,
+      filter: [],
     };
   }
 

package/src/ProfileView/index.tsx

@@ -67,6 +67,8 @@ export interface FlamegraphData {
   total?: bigint;
   filtered?: bigint;
   error?: any;
+  mappings?: string[];
+  mappingsLoading: boolean;
 }
 
 export interface TopTableData {
@@ -238,7 +240,7 @@ export const ProfileView = ({
               filtered={filtered}
               profileType={profileSource?.ProfileType()}
               navigateTo={navigateTo}
-              loading={flamegraphData.loading}
+              loading={flamegraphData.loading && flamegraphData.mappingsLoading}
               setActionButtons={setActionButtons}
               error={flamegraphData.error}
               isHalfScreen={isHalfScreen}
@@ -249,6 +251,7 @@ export const ProfileView = ({
                     : dimensions.width - 16
                   : 0
               }
+              mappings={flamegraphData.mappings}
             />
           </ConditionalWrapper>
         );

package/src/ProfileViewWithData.tsx

@@ -43,14 +43,14 @@ export const ProfileViewWithData = ({
   ];
   const [groupBy = [FIELD_FUNCTION_NAME]] = useURLState({param: 'group_by', navigateTo});
 
-  const [showRuntimeRubyStr] = useURLState({param: 'show_runtime_ruby', navigateTo});
-  const showRuntimeRuby = showRuntimeRubyStr === 'true';
-  const [showRuntimePythonStr] = useURLState({param: 'show_runtime_python', navigateTo});
-  const showRuntimePython = showRuntimePythonStr === 'true';
-  const [showInterpretedOnlyStr] = useURLState({param: 'show_interpreted_only', navigateTo});
-  const showInterpretedOnly = showInterpretedOnlyStr === 'true';
   const [invertStack] = useURLState({param: 'invert_call_stack', navigateTo});
   const invertCallStack = invertStack === 'true';
+  const [binaryFrameFilterStr] = useURLState({param: 'binary_frame_filter', navigateTo});
+
+  const binaryFrameFilter: string[] =
+    typeof binaryFrameFilterStr === 'string'
+      ? binaryFrameFilterStr.split(',')
+      : binaryFrameFilterStr;
 
   const [pprofDownloading, setPprofDownloading] = useState<boolean>(false);
 
@@ -74,12 +74,23 @@ export const ProfileViewWithData = ({
     skip: !dashboardItems.includes('icicle'),
     nodeTrimThreshold,
     groupBy: groupByParam,
-    showRuntimeRuby,
-    showRuntimePython,
-    showInterpretedOnly,
     invertCallStack,
+    binaryFrameFilter,
   });
 
+  const {isLoading: profilemetadataLoading, response: profilemetadataResponse} = useQuery(
+    queryClient,
+    profileSource,
+    QueryRequest_ReportType.PROFILE_METADATA,
+    {
+      skip: !dashboardItems.includes('icicle'),
+      nodeTrimThreshold,
+      groupBy: groupByParam,
+      invertCallStack,
+      binaryFrameFilter: undefined,
+    }
+  );
+
   const {perf} = useParcaContext();
 
   const {
@@ -178,7 +189,7 @@ export const ProfileViewWithData = ({
       total={total}
       filtered={filtered}
       flamegraphData={{
-        loading: flamegraphLoading,
+        loading: flamegraphLoading && profilemetadataLoading,
         data:
           flamegraphResponse?.report.oneofKind === 'flamegraph'
             ? flamegraphResponse?.report?.flamegraph
@@ -190,6 +201,11 @@ export const ProfileViewWithData = ({
         total: BigInt(flamegraphResponse?.total ?? '0'),
         filtered: BigInt(flamegraphResponse?.filtered ?? '0'),
         error: flamegraphError,
+        mappings:
+          profilemetadataResponse?.report.oneofKind === 'profileMetadata'
+            ? profilemetadataResponse?.report?.profileMetadata?.mappingFiles
+            : undefined,
+        mappingsLoading: profilemetadataLoading,
       }}
       topTableData={{
         loading: tableLoading,

package/src/useQuery.tsx

@@ -32,10 +32,8 @@ interface UseQueryOptions {
   sourceBuildID?: string;
   sourceFilename?: string;
   sourceOnly?: boolean;
-  showRuntimeRuby?: boolean;
-  showRuntimePython?: boolean;
-  showInterpretedOnly?: boolean;
   invertCallStack?: boolean;
+  binaryFrameFilter?: string[];
 }
 
 export const useQuery = (
@@ -56,10 +54,8 @@ export const useQuery = (
       options?.sourceBuildID,
       options?.sourceOnly,
       options?.sourceOnly === true ? '' : options?.sourceFilename,
-      options?.showRuntimeRuby ?? false,
-      options?.showRuntimePython ?? false,
-      options?.showInterpretedOnly ?? false,
       options?.invertCallStack ?? false,
+      options?.binaryFrameFilter ?? '',
     ],
     queryFn: async () => {
       const req = profileSource.QueryRequest();
@@ -75,13 +71,28 @@ export const useQuery = (
           sourceOnly: options?.sourceOnly ?? false,
         };
       }
-      req.runtimeFilter = {
-        showRuby: options?.showRuntimeRuby ?? false,
-        showPython: options?.showRuntimePython ?? false,
-        showInterpretedOnly: options?.showInterpretedOnly ?? false,
-      };
       req.invertCallStack = options?.invertCallStack ?? false;
 
+      if (options?.binaryFrameFilter !== undefined && options?.binaryFrameFilter.length > 0) {
+        req.filter = [
+          {
+            filter: {
+              oneofKind: 'frameFilter',
+              frameFilter: {
+                filter: {
+                  oneofKind: 'binaryFrameFilter',
+                  binaryFrameFilter: {
+                    includeBinaries: options?.binaryFrameFilter ?? [],
+                  },
+                },
+              },
+            },
+          },
+        ];
+      } else {
+        req.filter = [];
+      }
+
       try {
         const {response} = await client.query(req, {meta: metadata});
         return response;

package/dist/ProfileIcicleGraph/ActionButtons/RuntimeFilterDropdown.d.ts

@@ -1,9 +0,0 @@
-declare const RuntimeFilterDropdown: ({ showRuntimeRuby, toggleShowRuntimeRuby, showRuntimePython, toggleShowRuntimePython, showInterpretedOnly, toggleShowInterpretedOnly, }: {
-    showRuntimeRuby: boolean;
-    toggleShowRuntimeRuby: () => void;
-    showRuntimePython: boolean;
-    toggleShowRuntimePython: () => void;
-    showInterpretedOnly: boolean;
-    toggleShowInterpretedOnly: () => void;
-}) => React.JSX.Element;
-export default RuntimeFilterDropdown;

package/dist/ProfileIcicleGraph/ActionButtons/RuntimeFilterDropdown.js

@@ -1,23 +0,0 @@
-import { 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 { Fragment } from 'react';
-import { Menu, Transition } from '@headlessui/react';
-import { Icon } from '@iconify/react';
-const RuntimeToggle = ({ id, state, toggle, label, description, }) => {
-    return (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: id, name: id, type: "checkbox", className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: state, onChange: () => toggle() }) }), _jsxs("div", { className: "ml-3 text-sm leading-6", children: [_jsx("label", { htmlFor: id, className: "font-medium text-gray-900 dark:text-gray-200", children: label }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: description })] })] }, id));
-};
-const RuntimeFilterDropdown = ({ showRuntimeRuby, toggleShowRuntimeRuby, showRuntimePython, toggleShowRuntimePython, showInterpretedOnly, toggleShowInterpretedOnly, }) => {
-    return (_jsxs("div", { children: [_jsx("label", { className: "text-sm", children: "Runtimes" }), _jsxs(Menu, { as: "div", className: "relative text-left", id: "h-runtimes-filter", children: [_jsx("div", { children: _jsxs(Menu.Button, { className: "relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "block overflow-x-hidden text-ellipsis", children: "Runtimes" }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }) }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Menu.Items, { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsxs("div", { className: "space-y-5", children: [_jsx(RuntimeToggle, { id: "show-runtime-ruby", state: showRuntimeRuby, toggle: toggleShowRuntimeRuby, label: "Ruby", description: "Show Ruby runtime functions." }), _jsx(RuntimeToggle, { id: "show-runtime-python", state: showRuntimePython, toggle: toggleShowRuntimePython, label: "Python", description: "Show Python runtime functions." }), _jsx(RuntimeToggle, { id: "show-interpreted-only", state: showInterpretedOnly, toggle: toggleShowInterpretedOnly, label: "Interpreted Only", description: "Show only interpreted functions." })] }) }) }) }) })] })] }));
-};
-export default RuntimeFilterDropdown;

package/src/ProfileIcicleGraph/ActionButtons/RuntimeFilterDropdown.tsx

@@ -1,123 +0,0 @@
-// 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 {Fragment} from 'react';
-
-import {Menu, Transition} from '@headlessui/react';
-import {Icon} from '@iconify/react';
-
-const RuntimeToggle = ({
-  id,
-  state,
-  toggle,
-  label,
-  description,
-}: {
-  id: string;
-  state: boolean;
-  toggle: () => void;
-  label: string;
-  description: string;
-}): JSX.Element => {
-  return (
-    <div key={id} className="relative flex items-start">
-      <div className="flex h-6 items-center">
-        <input
-          id={id}
-          name={id}
-          type="checkbox"
-          className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
-          checked={state}
-          onChange={() => toggle()}
-        />
-      </div>
-      <div className="ml-3 text-sm leading-6">
-        <label htmlFor={id} className="font-medium text-gray-900 dark:text-gray-200">
-          {label}
-        </label>
-        <p className="text-gray-500 dark:text-gray-400">{description}</p>
-      </div>
-    </div>
-  );
-};
-
-const RuntimeFilterDropdown = ({
-  showRuntimeRuby,
-  toggleShowRuntimeRuby,
-  showRuntimePython,
-  toggleShowRuntimePython,
-  showInterpretedOnly,
-  toggleShowInterpretedOnly,
-}: {
-  showRuntimeRuby: boolean;
-  toggleShowRuntimeRuby: () => void;
-  showRuntimePython: boolean;
-  toggleShowRuntimePython: () => void;
-  showInterpretedOnly: boolean;
-  toggleShowInterpretedOnly: () => void;
-}): React.JSX.Element => {
-  return (
-    <div>
-      <label className="text-sm">Runtimes</label>
-      <Menu as="div" className="relative text-left" id="h-runtimes-filter">
-        <div>
-          <Menu.Button className="relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 sm:text-sm">
-            <span className="block overflow-x-hidden text-ellipsis">Runtimes</span>
-            <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2 text-gray-400">
-              <Icon icon="heroicons:chevron-down-20-solid" aria-hidden="true" />
-            </span>
-          </Menu.Button>
-        </div>
-
-        <Transition
-          as={Fragment}
-          leave="transition ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <Menu.Items className="absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm">
-            <div className="p-4">
-              <fieldset>
-                <div className="space-y-5">
-                  <RuntimeToggle
-                    id="show-runtime-ruby"
-                    state={showRuntimeRuby}
-                    toggle={toggleShowRuntimeRuby}
-                    label="Ruby"
-                    description="Show Ruby runtime functions."
-                  />
-                  <RuntimeToggle
-                    id="show-runtime-python"
-                    state={showRuntimePython}
-                    toggle={toggleShowRuntimePython}
-                    label="Python"
-                    description="Show Python runtime functions."
-                  />
-                  <RuntimeToggle
-                    id="show-interpreted-only"
-                    state={showInterpretedOnly}
-                    toggle={toggleShowInterpretedOnly}
-                    label="Interpreted Only"
-                    description="Show only interpreted functions."
-                  />
-                </div>
-              </fieldset>
-            </div>
-          </Menu.Items>
-        </Transition>
-      </Menu>
-    </div>
-  );
-};
-
-export default RuntimeFilterDropdown;