diff --git a/packages/grafana-ui/src/components/Select/SelectPerf.story.internal.tsx b/packages/grafana-ui/src/components/Select/SelectPerf.story.internal.tsx new file mode 100644 index 00000000000..10ae0a65769 --- /dev/null +++ b/packages/grafana-ui/src/components/Select/SelectPerf.story.internal.tsx @@ -0,0 +1,71 @@ +import { Meta } from '@storybook/react'; +import React, { useMemo } from 'react'; +import ReactSelect, { createFilter } from 'react-select'; + +import { SelectableValue } from '@grafana/data'; + +import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory'; +import { Label } from '../Forms/Label'; + +import { Select, VirtualizedSelect } from './Select'; + +const meta: Meta = { + title: 'Forms/Select (Perf)', + decorators: [withCenteredStory, withHorizontallyCenteredStory], + argTypes: { + numberOfOptions: { + defaultValue: 10_000, + control: { type: 'number' }, + }, + }, +}; + +export default meta; + +const _customFilter = createFilter({ ignoreAccents: false }); +function customFilter(opt: SelectableValue, searchQuery: string) { + return _customFilter( + { + label: opt.label ?? '', + value: opt.value ?? '', + data: {}, + }, + searchQuery + ); +} + +export function PerformanceScenarios({ numberOfOptions }: { numberOfOptions: number }) { + const options = useMemo(() => { + const opts: SelectableValue[] = []; + const ALPHABET = 'qwertyuiopasdfghjklzxcvbnm'.split(''); + + for (let index = 0; index < numberOfOptions; index++) { + const letter = ALPHABET[index % ALPHABET.length]; + opts.push({ label: letter + '-' + index, value: letter + '-' + index }); + } + + return opts; + }, [numberOfOptions]); + + return ( +