Make event metadata load faster by fetching series options asynchronously

If you have many series in your Opencast, any modal that displays
event metadata can take several seconds to load. This patch aims at
pushing the loading time back into millisecond terrritory no matter
how many series there are.

The problem is that when fetching event metadata from the backend,
the backend also fetch all series options, which can take too long.
So we change the backend to not do that, and change the frontend to
fetch the series options separately.

ideally we could also do this for other metadata fields with options
(notably contributors and presenters), but the endpoint lacks
the necessary filter capabilities.

Author: Arnei

src/components/shared/DropDown.tsx

@@ -45,7 +45,7 @@ const DropDown = <T, >({
 	ref?: React.RefObject<SelectInstance<any, boolean, GroupBase<any>> | null>
 	value: T
 	text: string,
-	options: DropDownOption[],
+	options?: DropDownOption[],
 	required: boolean,
 	handleChange: (option: {value: T, label: string} | null) => void
 	placeholder: string
@@ -66,7 +66,7 @@ const DropDown = <T, >({
 		optionPaddingTop?: number,
 		optionLineHeight?: string
 	},
-	fetchOptions?: () => { label: string, value: string}[]
+	fetchOptions?: (inputValue: string) => Promise<{ label: string, value: string }[]>
 }) => {
 	const { t } = useTranslation();
 
@@ -157,14 +157,29 @@ const DropDown = <T, >({
 		) : null;
 	};
 
+	const filterOptions = (inputValue: string) => {
+		if (options) {
+			return options.filter(option =>
+				option.label.toLowerCase().includes(inputValue.toLowerCase()),
+			);
+		}
+		return [];
+	};
+
+	const loadOptionsAsync = (inputValue: string, callback: (options: DropDownOption[]) => void) => {
+		setTimeout(async () => {
+			callback(formatOptions(
+				fetchOptions ? await fetchOptions(inputValue) : filterOptions(inputValue),
+				required,
+			));
+		}, 1000);
+	};
+
 	const loadOptions = (
 		inputValue: string,
 		callback: (options: DropDownOption[]) => void,
 	) => {
-		callback(formatOptions(
-			fetchOptions ? fetchOptions() : options,
-			required,
-		));
+		callback(formatOptions(filterOptions(inputValue), required));
 	};
 
 
@@ -176,10 +191,14 @@ const DropDown = <T, >({
 		autoFocus: autoFocus,
 		isSearchable: true,
 		value: { value: value, label: text === "" ? placeholder : text },
-		options: formatOptions(
-			options,
-			required,
-		),
+		defaultOptions: options
+			? formatOptions(
+				options,
+				required,
+			)
+			: true,
+		cacheOptions: true,
+		loadOptions: fetchOptions ? loadOptionsAsync : loadOptions,
 		placeholder: placeholder,
 		onChange: element => handleChange(element as {value: T, label: string}),
 		menuIsOpen: menuIsOpen,
@@ -191,31 +210,18 @@ const DropDown = <T, >({
 
 		// @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 ? (
 		<AsyncCreatableSelect
 			ref={selectRef}
 			{...commonProps}
-			cacheOptions
-			defaultOptions={formatOptions(
-				options,
-				required,
-			)}
-			loadOptions={loadOptions}
 		/>
 	) : (
 		<AsyncSelect
 			ref={selectRef}
 			{...commonProps}
 			noOptionsMessage={() => t("SELECT_NO_MATCHING_RESULTS")}
-			cacheOptions
-			defaultOptions={formatOptions(
-				options,
-				required,
-			)}
-			loadOptions={loadOptions}
 		/>
 	);
 };

src/components/shared/modals/ResourceDetailsAccessPolicyTab.tsx

@@ -543,11 +543,6 @@ export const AccessPolicyTable = <T extends AccessPolicyTabFormikProps>({
 																				? formatAclRolesForDropdown(rolesFilteredbyPolicies)
 																				: []
 																		}
-																		fetchOptions={() =>
-																			roles.length > 0
-																				? formatAclRolesForDropdown(rolesFilteredbyPolicies)
-																				: []
-																		}
 																		required={true}
 																		creatable={true}
 																		handleChange={element => {

src/components/shared/wizard/RenderField.tsx

@@ -1,15 +1,16 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import DatePicker from "react-datepicker";
 import cn from "classnames";
-import { getMetadataCollectionFieldName } from "../../../utils/resourceUtils";
+import { getMetadataCollectionFieldName, transformListProvider } from "../../../utils/resourceUtils";
 import { getCurrentLanguageInformation } from "../../../utils/utils";
 import DropDown from "../DropDown";
 import { parseISO } from "date-fns";
 import { FieldProps } from "formik";
 import { MetadataField } from "../../../slices/eventSlice";
 import { GroupBase, SelectInstance } from "react-select";
 import TextareaAutosize from "react-textarea-autosize";
+import axios from "axios";
 
 /**
  * This component renders an editable field for single values depending on the type of the corresponding metadata
@@ -65,7 +66,7 @@ const RenderField = ({
 			)}
 			{metadataField.type === "text" &&
 				!!metadataField.collection &&
-				metadataField.collection.length > 0 && (
+				(
 					<EditableSingleSelect
 						metadataField={metadataField}
 						field={field}
@@ -91,7 +92,7 @@ const RenderField = ({
 			)}
 			{metadataField.type === "text" &&
 				!(
-					!!metadataField.collection && metadataField.collection.length !== 0
+					metadataField.collection
 				) && (
 					<EditableSingleValue
 						field={field}
@@ -195,16 +196,7 @@ const EditableDateValue = ({
 };
 
 // renders editable field for selecting value via dropdown
-const EditableSingleSelect = ({
-	field,
-	metadataField,
-	text,
-	form: { setFieldValue },
-	isFirstField,
-	focused,
-	setFocused,
-	ref,
-}: {
+type EditableSingleSelectProps = ({
 	field: FieldProps["field"]
 	metadataField: MetadataField
 	text: string
@@ -213,9 +205,25 @@ const EditableSingleSelect = ({
 	focused: boolean,
 	setFocused: (open: boolean) => void
 	ref: React.RefObject<SelectInstance<any, boolean, GroupBase<any>>>
-}) => {
+})
+const EditableSingleSelect = (props: EditableSingleSelectProps) => {
 	const { t } = useTranslation();
 
+	const {
+		field,
+		metadataField,
+		text,
+		form: { setFieldValue },
+		isFirstField,
+		focused,
+		setFocused,
+		ref,
+	} = props;
+
+	if (metadataField.id === "isPartOf") {
+		return <EditableSingleSelectSeries {...props} />;
+	}
+
 	return (
 		<DropDown
 			ref={ref}
@@ -321,4 +329,67 @@ const EditableSingleValueTime = ({
 	);
 };
 
+/**
+ * Special case for series. Uses an async selector to fetch options.
+ *
+ * Ideally we could generalize this for all metadata fields with listproviders,
+ * but other listproviders do not offer the required filtering capabilities.
+ */
+const EditableSingleSelectSeries = ({
+	field,
+	metadataField,
+	text,
+	form: { setFieldValue },
+	isFirstField,
+	focused,
+	setFocused,
+	ref,
+}: EditableSingleSelectProps) => {
+	const { t } = useTranslation();
+
+	const [label, setLabel] = useState("");
+
+	useEffect(() => {
+		// The metadata catalog only contains the field value, so we need to fetch the label ourselves
+		const fetchLabelById = async () => {
+			if (field.value) {
+				const res = await axios.get<{ [key: string]: string }>(`/admin-ng/resources/SERIES.WRITE_ONLY.json?limit=1&filter=textFilter:${field.value}`);
+				const data = res.data;
+				const transformedData = transformListProvider(data);
+				if (transformedData.length > 0) {
+					setLabel(transformedData[0].label);
+				}
+			}
+		};
+		fetchLabelById();
+	}, [field.value]);
+
+	// Fetch collection
+	const fetchOptions = async (inputValue: string) => {
+		const res = await axios.get<{ [key: string]: string }>(`/admin-ng/resources/SERIES.WRITE_ONLY.json?filter=textFilter:*${inputValue}*`);
+		const data = res.data;
+		return transformListProvider(data);
+	};
+
+	return (
+		<DropDown
+			ref={ref}
+			value={field.value as string}
+			text={label}
+			fetchOptions={fetchOptions}
+			required={metadataField.required}
+			handleChange={element => element && setFieldValue(field.name, element.value)}
+			placeholder={focused
+				? `-- ${t("SELECT_NO_OPTION_SELECTED")} --`
+				: `${t("SELECT_NO_OPTION_SELECTED")}`
+			}
+			customCSS={{ isMetadataStyle: focused ? false : true }}
+			handleMenuIsOpen={(open: boolean) => setFocused(open)}
+			openMenuOnFocus
+			autoFocus={isFirstField}
+			skipTranslate={!metadataField.translatable}
+		/>
+	);
+};
+
 export default RenderField;

src/utils/resourceUtils.ts

@@ -177,6 +177,27 @@ export const transformMetadataFields = (metadata: MetadataField[]) => {
 	return metadata;
 };
 
+export const transformListProvider = (collection: { [key: string]: string }) => {
+	return Object.entries(collection)
+		.map(([key, value]) => {
+			if (isJson(value)) {
+				// TODO: Handle JSON parsing errors
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+				const collectionParsed: { [key: string]: string } = JSON.parse(value);
+				return {
+					label: collectionParsed.label || value,
+					value: key,
+					...collectionParsed,
+				};
+			} else {
+				return {
+					label: value,
+					value: key,
+				};
+			}
+		});
+};
+
 // transform metadata catalog for update via post request
 export const transformMetadataForUpdate = (catalog: MetadataCatalog, values: { [key: string]: MetadataCatalog["fields"][0]["value"] }) => {
 	const fields: MetadataCatalog["fields"] = [];