Make DropDown more performant for many options

Attempts to improve performance of the DropDown component
for scenarios where a dropdown has a lot (~10000) options to
choose from. Improvements should be most apparent in the
access control tabs in case of many roles,
and the series table filter in case of many series.

Introduces virtualization to our DropDown, using react-window.
Unfortunately forces us to define fixed heights
for our options, which may cause trouble for long labels.

Makes auto-translation of option labels optional, as it can be
very expensive and thus should be avoided if not needed.

Switch Select for AsyncSelect. This allows us to potentially cache
option calculations, further reducing computation time.

Memoize the getFilters selector. Should prevent constant rerenders in
certain cases.

Author: Arnei

package-lock.json

@@ -35,6 +35,7 @@
     "react-router": "^7.6.0",
     "react-select": "^5.10.1",
     "react-textarea-autosize": "^8.5.9",
+    "react-window": "^1.8.11",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^3.1.0",
@@ -65,6 +66,7 @@
     "@types/lodash": "^4.17.16",
     "@types/node": "^22.15.18",
     "@types/react-dom": "^19.1.5",
+    "@types/react-window": "^1.8.8",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react-swc": "^3.9.0",
     "eslint": "^9.26.0",

package.json

@@ -242,6 +242,14 @@ const NewAccessPage = <T extends RequiredFormProps>({
 																								formik.values.acls
 																							)
 																						)}
+																						fetchOptions={() =>
+																							formatAclRolesForDropdown(
+																								filterRoles(
+																									roles,
+																									formik.values.acls
+																								)
+																							)
+																						}
 																						required={true}
 																						handleChange={(element) => {
 																							if (element) {
@@ -260,6 +268,8 @@ const NewAccessPage = <T extends RequiredFormProps>({
 																								user
 																							)
 																						}
+																						skipTranslate
+																						optionHeight={35}
 																						customCSS={{ width: 360, optionPaddingTop: 5 }}
 																					/>
 																				</td>

src/components/events/partials/ModalTabsAndPages/NewAccessPage.tsx

@@ -7,6 +7,7 @@ import { renderValidDate } from "../../utils/dateUtils";
 import { IconButton } from "../shared/IconButton";
 import { ParseKeys } from "i18next";
 import { AsyncThunk } from "@reduxjs/toolkit";
+import { Resource } from "../../slices/tableSlice";
 
 /**
  * This component renders the start date cells of events in the table view
@@ -19,7 +20,7 @@ const DateTimeCell = ({
 	loadResourceIntoTable,
 	tooltipText,
 }: {
-	resource: string
+	resource: Resource
 	date: string
 	filterName: string
 	fetchResource: AsyncThunk<any, void, any>

src/components/shared/DateTimeCell.tsx

@@ -4,10 +4,12 @@ import {
 	dropDownSpacingTheme,
 	dropDownStyle,
 } from "../../utils/componentStyles";
-import Select, { GroupBase, Props, SelectInstance } from "react-select";
-import CreatableSelect from "react-select/creatable";
+import { GroupBase, MenuListProps, Props, SelectInstance, createFilter } from "react-select";
 import { isJson } from "../../utils/utils";
 import { ParseKeys } from "i18next";
+import { FixedSizeList, ListChildComponentProps } from "react-window";
+import AsyncSelect from 'react-select/async';
+import AsyncCreatableSelect from 'react-select/async-creatable';
 
 export type DropDownOption = {
 	label: string,
@@ -34,7 +36,10 @@ const DropDown = <T, >({
 	disabled = false,
 	menuIsOpen = undefined,
 	handleMenuIsOpen = undefined,
+	skipTranslate = false,
+	optionHeight = 25,
 	customCSS,
+	fetchOptions,
 }: {
 	ref?: React.RefObject<SelectInstance<any, boolean, GroupBase<any>> | null>
 	value: T
@@ -51,12 +56,15 @@ const DropDown = <T, >({
 	disabled?: boolean,
 	menuIsOpen?: boolean,
 	handleMenuIsOpen?: (open: boolean) => void,
+	skipTranslate?: boolean,
+	optionHeight?: number,
 	customCSS?: {
 		isMetadataStyle?: boolean,
 		width?: number | string,
 		optionPaddingTop?: number,
 		optionLineHeight?: string
-	}
+	},
+	fetchOptions?: () => { label: string, value: string}[]
 }) => {
 	const { t } = useTranslation();
 
@@ -84,8 +92,11 @@ const DropDown = <T, >({
 		filterText: string,
 		required: boolean,
 	) => {
-		// Translate?
-		unformattedOptions = unformattedOptions.map(option => ({...option, label: t(option.label as ParseKeys)}))
+		// Translate
+		// Translating is expensive, skip it if it is not required
+		if (!skipTranslate) {
+			unformattedOptions = unformattedOptions.map(option => ({...option, label: t(option.label as ParseKeys)}))
+		}
 
 		// Filter
 		filterText = filterText.toLowerCase();
@@ -119,6 +130,41 @@ const DropDown = <T, >({
 		return unformattedOptions;
 	};
 
+	const itemHeight = optionHeight;
+	/**
+	 * Custom component for list virtualization
+	 */
+	const MenuList = (props: MenuListProps<DropDownOption, false>) => {
+		const { options, children, maxHeight, getValue } = props
+
+		console.log("Menu List render")
+
+		return Array.isArray(children) ? (
+			<div style={{ paddingTop: 4 }}>
+				<FixedSizeList
+					height={maxHeight < (children.length * itemHeight) ? maxHeight : children.length * itemHeight}
+					itemCount={children.length}
+					itemSize={itemHeight}
+					overscanCount={4}
+					width="100%"
+				>
+					{({ index, style }: ListChildComponentProps) => <div style={{ ...style }}>{children[index]}</div>}
+				</FixedSizeList>
+			</div>
+		) : null
+	}
+
+	const loadOptions = (
+		inputValue: string,
+		callback: (options: DropDownOption[]) => void
+	) => {
+		callback(formatOptions(
+			fetchOptions ? fetchOptions() : options,
+			searchText,
+			required,
+		));
+	};
+
 
   let commonProps: Props = {
 		tabIndex: tabIndex,
@@ -129,11 +175,6 @@ const DropDown = <T, >({
 		isSearchable: true,
 		value: { value: value, label: text === "" ? placeholder : text },
 		inputValue: searchText,
-		options: formatOptions(
-			options,
-			searchText,
-			required,
-		),
 		placeholder: placeholder,
 		onInputChange: (value: string) => setSearch(value),
 		onChange: (element) => handleChange(element as {value: T, label: string}),
@@ -142,18 +183,36 @@ const DropDown = <T, >({
 		onMenuClose: () => openMenu(false),
 		isDisabled: disabled,
 		openMenuOnFocus: openMenuOnFocus,
+
+		//@ts-expect-error: React-Select typing does not account for the typing of option it itself requires
+		components: { MenuList },
+		filterOption: createFilter({ ignoreAccents: false }), // To improve performance on filtering
 	};
 
 	return creatable ? (
-		<CreatableSelect
+		<AsyncCreatableSelect
 			ref={selectRef}
 			{...commonProps}
+			cacheOptions
+			defaultOptions={formatOptions(
+				options,
+				searchText,
+				required,
+			)}
+			loadOptions={loadOptions}
 		/>
 	) : (
-		<Select
+		<AsyncSelect
 			ref={selectRef}
 			{...commonProps}
 			noOptionsMessage={() => t("SELECT_NO_MATCHING_RESULTS")}
+			cacheOptions
+			defaultOptions={formatOptions(
+				options,
+				searchText,
+				required,
+			)}
+			loadOptions={loadOptions}
 		/>
 	);
 };

src/components/shared/DropDown.tsx

@@ -5,6 +5,7 @@ import { AppThunk, useAppDispatch, useAppSelector } from "../../store";
 import { IconButton } from "../shared/IconButton";
 import { AsyncThunk } from "@reduxjs/toolkit";
 import { ParseKeys } from "i18next";
+import { Resource } from "../../slices/tableSlice";
 
 /**
  * This component renders the presenters cells of events in the table view
@@ -17,7 +18,7 @@ const MultiValueCell = ({
 	loadResourceIntoTable,
 	tooltipText,
 }: {
-	resource: string
+	resource: Resource
 	values: string[]
 	filterName: string
 	fetchResource: AsyncThunk<any, void, any>

src/components/shared/MultiValueCell.tsx

@@ -18,6 +18,7 @@ import { availableHotkeys } from "../../configs/hotkeysConfig";
 import { AsyncThunk } from "@reduxjs/toolkit";
 import ButtonLikeAnchor from "./ButtonLikeAnchor";
 import { ParseKeys } from "i18next";
+import { Resource } from "../../slices/tableSlice";
 
 /**
  * This component renders the table filter profiles in the upper right corner when clicked on settings icon of the
@@ -34,7 +35,7 @@ const TableFiltersProfiles = ({
 	setFilterSettings: (_: boolean) => void,
 	loadResource: AsyncThunk<any, void, any>,
 	loadResourceIntoTable: () => AppThunk,
-	resource: string,
+	resource: Resource,
 }) => {
 	const dispatch = useAppDispatch();
 

src/components/shared/TableFilterProfiles.tsx

@@ -31,6 +31,7 @@ import DropDown from "./DropDown";
 import { AsyncThunk } from "@reduxjs/toolkit";
 import ButtonLikeAnchor from "./ButtonLikeAnchor";
 import { ParseKeys } from "i18next";
+import { Resource } from "../../slices/tableSlice";
 
 /**
  * This component renders the table filters in the upper right corner of the table
@@ -42,7 +43,7 @@ const TableFilters = ({
 }: {
 	loadResource: AsyncThunk<any, void, any>,
 	loadResourceIntoTable: () => AppThunk,
-	resource: string,
+	resource: Resource,
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();
@@ -448,6 +449,7 @@ const FilterSwitch = ({
 						openMenuOnFocus
 						menuIsOpen={openSecondFilterMenu}
 						handleMenuIsOpen={setOpenSecondFilterMenu}
+						skipTranslate={!filter.translatable}
 						customCSS={{ width: 200, optionPaddingTop: 5 }}
 					/>
 				</div>

src/components/shared/TableFilters.tsx

@@ -498,6 +498,8 @@ const ResourceDetailsAccessPolicyTab = ({
 																										user
 																									)
 																								}
+																								skipTranslate
+																								optionHeight={35}
 																								customCSS={{ width: 360, optionPaddingTop: 5 }}
 																							/>
 																						) : (

src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx

@@ -228,6 +228,8 @@ const AclAccessPage = <T extends RequiredFormProps>({
 																							"USERS.ACLS.NEW.ACCESS.ROLES.LABEL"
 																						)}
 																						disabled={!isAccess}
+																						skipTranslate
+																						optionHeight={35}
 																						customCSS={{ width: 360, optionPaddingTop: 5 }}
 																					/>
 																				</td>