): void => {
+ const target = event.currentTarget;
+ const nearBottom =
+ target.scrollHeight - target.scrollTop - target.clientHeight < 40;
+ if (nearBottom) onScrollEnd();
+ }
+ : undefined
+ }
>
{isLoading && (
({
)}
)}
- {!listHasItems && (
+ {isLoadingMore && (
+
+ {commonText.loading()}
+
+ )}
+ {!listHasItems && !isLoadingMore && (
{formsText.nothingFound()}
diff --git a/specifyweb/frontend/js_src/lib/components/Preferences/UserDefinitions.tsx b/specifyweb/frontend/js_src/lib/components/Preferences/UserDefinitions.tsx
index 469c072f1d6..4504e3f7a51 100644
--- a/specifyweb/frontend/js_src/lib/components/Preferences/UserDefinitions.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Preferences/UserDefinitions.tsx
@@ -1189,7 +1189,7 @@ export const userPreferenceDefinitions = {
title: preferencesText.treeSearchAlgorithm(),
requiresReload: false,
visible: true,
- defaultValue: 'contains',
+ defaultValue: 'startsWith',
values: [
{
value: 'startsWith',
diff --git a/specifyweb/frontend/js_src/lib/components/QueryComboBox/__tests__/treeSearchEfficiency.test.tsx b/specifyweb/frontend/js_src/lib/components/QueryComboBox/__tests__/treeSearchEfficiency.test.tsx
new file mode 100644
index 00000000000..0ad83277863
--- /dev/null
+++ b/specifyweb/frontend/js_src/lib/components/QueryComboBox/__tests__/treeSearchEfficiency.test.tsx
@@ -0,0 +1,80 @@
+/**
+ * Tests for tree search efficiency improvements (#7752).
+ *
+ * Tree tables (Taxon, Geography, Storage, etc.) can have 200K+ rows.
+ * Using LIKE '%pattern%' causes full table scans; LIKE 'pattern%' can use
+ * B-tree indexes. The typeahead also doesn't need 1000 results — 50 is
+ * more than enough for a dropdown.
+ */
+import { requireContext } from '../../../tests/helpers';
+import { serializeResource } from '../../DataModel/serializers';
+import { tables } from '../../DataModel/tables';
+import { queryFieldFilterSpecs } from '../../QueryBuilder/FieldFilterSpec';
+import { localized } from '../../../utils/types';
+import { QUERY_COMBO_BOX_PAGE_SIZE } from '../constants';
+import { makeComboBoxQuery } from '../helpers';
+
+requireContext();
+
+describe('Tree search efficiency', () => {
+ test('makeComboBoxQuery for tree tables uses startsWith by default', () => {
+ const query = makeComboBoxQuery({
+ fieldName: 'fullName',
+ value: 'rosa',
+ isTreeTable: true,
+ typeSearch: {
+ table: tables.Taxon,
+ searchFields: [[tables.Taxon.strictGetLiteralField('fullName')]],
+ name: localized('Taxon'),
+ title: localized('Taxon'),
+ formatter: localized(''),
+ displayFields: undefined,
+ format: localized('%s'),
+ },
+ specialConditions: [],
+ });
+
+ const serialized = serializeResource(query);
+ const searchField = serialized.fields.find(
+ (field: { readonly isDisplay: boolean }) => !field.isDisplay
+ );
+
+ // startsWith operator (id 15), NOT like (id 0)
+ expect(searchField?.operStart).toBe(queryFieldFilterSpecs.startsWith.id);
+ // Value should NOT be wrapped in % wildcards
+ expect(searchField?.startValue).toBe('rosa');
+ });
+
+ test('makeComboBoxQuery for non-tree tables uses startsWith by default', () => {
+ const query = makeComboBoxQuery({
+ fieldName: 'lastName',
+ value: 'smith',
+ isTreeTable: false,
+ typeSearch: {
+ table: tables.Agent,
+ searchFields: [[tables.Agent.strictGetLiteralField('lastName')]],
+ name: localized('Agent'),
+ title: localized('Agent'),
+ formatter: localized(''),
+ displayFields: undefined,
+ format: localized('%s'),
+ },
+ specialConditions: [],
+ });
+
+ const serialized = serializeResource(query);
+ const searchField = serialized.fields.find(
+ (field: { readonly isDisplay: boolean }) => !field.isDisplay
+ );
+
+ // Non-tree tables also default to startsWith
+ expect(searchField?.operStart).toBe(queryFieldFilterSpecs.startsWith.id);
+ expect(searchField?.startValue).toBe('smith');
+ });
+
+ test('search limit is at most 50', () => {
+ // The exported constant from index.tsx controls runQuery limit.
+ // If someone bumps it back to 1000, this test catches it.
+ expect(QUERY_COMBO_BOX_PAGE_SIZE).toBeLessThanOrEqual(50);
+ });
+});
diff --git a/specifyweb/frontend/js_src/lib/components/QueryComboBox/constants.ts b/specifyweb/frontend/js_src/lib/components/QueryComboBox/constants.ts
new file mode 100644
index 00000000000..5ca00d0882f
--- /dev/null
+++ b/specifyweb/frontend/js_src/lib/components/QueryComboBox/constants.ts
@@ -0,0 +1,2 @@
+// Results are fetched in pages of this size and loaded on scroll
+export const QUERY_COMBO_BOX_PAGE_SIZE = 50;
diff --git a/specifyweb/frontend/js_src/lib/components/QueryComboBox/index.tsx b/specifyweb/frontend/js_src/lib/components/QueryComboBox/index.tsx
index 5c85e0d2626..7d7edbac8ca 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryComboBox/index.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryComboBox/index.tsx
@@ -14,7 +14,7 @@ import { filterArray, localized } from '../../utils/types';
import { DataEntry } from '../Atoms/DataEntry';
import { LoadingContext, ReadOnlyContext } from '../Core/Contexts';
import { backboneFieldSeparator, toTable } from '../DataModel/helpers';
-import type { AnySchema } from '../DataModel/helperTypes';
+import type { AnySchema, SerializedResource } from '../DataModel/helperTypes';
import type { SpecifyResource } from '../DataModel/legacyTypes';
import {
fetchResource,
@@ -27,6 +27,7 @@ import type { SpecifyTable } from '../DataModel/specifyTable';
import { tables } from '../DataModel/tables';
import type { CollectionObject } from '../DataModel/types';
import type { CollectionObjectType } from '../DataModel/types';
+import type { SpQuery } from '../DataModel/types';
import { format, naiveFormatter } from '../Formatters/formatters';
import type { FormType } from '../FormParse';
import { ResourceView, RESTRICT_ADDING } from '../Forms/ResourceView';
@@ -41,6 +42,7 @@ import { hasTablePermission } from '../Permissions/helpers';
import { runQuery } from '../QueryBuilder/ResultsWrapper';
import type { QueryComboBoxFilter } from '../SearchDialog';
import { SearchDialog } from '../SearchDialog';
+import { QUERY_COMBO_BOX_PAGE_SIZE } from './constants';
import {
getQueryComboBoxConditions,
getRelatedCollectionId,
@@ -309,87 +311,144 @@ export function QueryComboBox({
const parentTreeDefinition = React.useContext(TreeDefinitionContext);
const treeDefinition = fetchedTreeDefinition ?? parentTreeDefinition;
- // FEATURE: use main table field if type search is not defined
- const fetchSource = React.useCallback(
- async (value: string): Promise>> =>
- isLoaded && typeof typeSearch === 'object' && typeof resource === 'object'
- ? Promise.all(
- typeSearch.searchFields
- .map((fields) =>
- makeComboBoxQuery({
+ // Pagination state for batch-on-scroll loading
+ const [isLoadingMore, setIsLoadingMore] = React.useState(false);
+ const paginationRef = React.useRef({
+ hasMore: true,
+ offset: 0,
+ queries: [] as RA>,
+ });
+
+ const makeQueries = React.useCallback(
+ (value: string): RA> =>
+ typeof typeSearch === 'object' && typeof resource === 'object'
+ ? typeSearch.searchFields
+ .map((fields) =>
+ makeComboBoxQuery({
+ fieldName: fields
+ .map(({ name }) => name)
+ .join(backboneFieldSeparator),
+ value,
+ isTreeTable: isTreeTable(field.relatedTable.name),
+ typeSearch,
+ specialConditions: getQueryComboBoxConditions({
+ resource,
fieldName: fields
.map(({ name }) => name)
.join(backboneFieldSeparator),
- value,
- isTreeTable: isTreeTable(field.relatedTable.name),
- typeSearch,
- specialConditions: getQueryComboBoxConditions({
- resource,
- fieldName: fields
- .map(({ name }) => name)
- .join(backboneFieldSeparator),
- collectionRelationships:
- typeof collectionRelationships === 'object'
- ? collectionRelationships
- : undefined,
- treeData:
- typeof treeData === 'object' ? treeData : undefined,
- relatedTable,
- subViewRelationship,
- treeDefinition,
- }),
- })
- )
- .map(serializeResource)
- .map((query) => ({
- ...query,
- fields: query.fields.map((field, index) => ({
- ...field,
- position: index,
- })),
- }))
- .map(async (query) =>
- runQuery(query, {
- collectionId: forceCollection ?? relatedCollectionId,
- // REFACTOR: allow customizing these arbitrary limits
- limit: 1000,
- })
- )
- ).then((responses) =>
- /*
- * If there are multiple search fields and both returns the
- * same record, it may be presented in results twice. Would
- * be fixed by using OR queries
- * REFACTOR: refactor to use OR queries across fields once
- * supported
- */
- responses.flat().map(([id, label]) => ({
- data: getResourceApiUrl(
- field.isRelationship
- ? field.relatedTable.name
- : resource.specifyTable.name,
- id
- ),
- label,
+ collectionRelationships:
+ typeof collectionRelationships === 'object'
+ ? collectionRelationships
+ : undefined,
+ treeData: typeof treeData === 'object' ? treeData : undefined,
+ relatedTable,
+ subViewRelationship,
+ treeDefinition,
+ }),
+ })
+ )
+ .map(serializeResource)
+ .map((query) => ({
+ ...query,
+ fields: query.fields.map((queryField, index) => ({
+ ...queryField,
+ position: index,
+ })),
}))
- )
: [],
[
field,
- isLoaded,
typeSearch,
relatedTable,
subViewRelationship,
collectionRelationships,
- forceCollection,
- relatedCollectionId,
resource,
treeData,
- fetchedTreeDefinition,
- parentTreeDefinition,
+ treeDefinition,
]
);
+ const rowsToItems = React.useCallback(
+ (
+ responses: RA>
+ ): RA> =>
+ responses.flat().map(([id, label]) => ({
+ data: getResourceApiUrl(
+ field.isRelationship
+ ? field.relatedTable.name
+ : resource!.specifyTable.name,
+ id
+ ),
+ label,
+ })),
+ [field, resource]
+ );
+
+ const runPage = React.useCallback(
+ async (offset: number) =>
+ Promise.all(
+ paginationRef.current.queries.map(async (query) =>
+ runQuery(query, {
+ collectionId: forceCollection ?? relatedCollectionId,
+ limit: QUERY_COMBO_BOX_PAGE_SIZE,
+ offset,
+ })
+ )
+ ),
+ [forceCollection, relatedCollectionId]
+ );
+
+ // FEATURE: use main table field if type search is not defined
+ const fetchSource = React.useCallback(
+ async (value: string): Promise>> => {
+ if (
+ !isLoaded ||
+ typeof typeSearch !== 'object' ||
+ typeof resource !== 'object'
+ )
+ return [];
+
+ // Reset pagination on new search
+ setExtraItems([]);
+ const queries = makeQueries(value);
+ paginationRef.current = { hasMore: true, offset: 0, queries };
+
+ const responses = await runPage(0);
+ const items = rowsToItems(responses);
+ paginationRef.current.offset = QUERY_COMBO_BOX_PAGE_SIZE;
+ paginationRef.current.hasMore = responses.some(
+ (r) => r.length >= QUERY_COMBO_BOX_PAGE_SIZE
+ );
+ return items;
+ },
+ [isLoaded, typeSearch, resource, makeQueries, rowsToItems, runPage]
+ );
+
+ const handleScrollEnd = React.useCallback((): void => {
+ if (!paginationRef.current.hasMore || isLoadingMore) return;
+
+ setIsLoadingMore(true);
+ void runPage(paginationRef.current.offset)
+ .then((responses) => {
+ const newItems = rowsToItems(responses);
+ paginationRef.current.offset += QUERY_COMBO_BOX_PAGE_SIZE;
+ paginationRef.current.hasMore = responses.some(
+ (r) => r.length >= QUERY_COMBO_BOX_PAGE_SIZE
+ );
+ return newItems;
+ })
+ .then((newItems) => {
+ setIsLoadingMore(false);
+ setExtraItems((prev) => [...prev, ...newItems]);
+ })
+ .catch(() => setIsLoadingMore(false));
+ }, [rowsToItems, runPage, isLoadingMore]);
+
+ // Extra items appended via scroll pagination
+ const [extraItems, setExtraItems] = React.useState<
+ RA>
+ >([]);
+
const canAdd =
!RESTRICT_ADDING.has(field.relatedTable.name) &&
hasTablePermission(field.relatedTable.name, 'create', targetCollectionId);
@@ -437,6 +496,8 @@ export function QueryComboBox({
type: 'text',
[titlePosition]: 'top',
}}
+ extraItems={extraItems}
+ isLoadingMore={isLoadingMore}
pendingValueRef={pendingValueRef}
source={fetchSource}
value={
@@ -452,6 +513,7 @@ export function QueryComboBox({
updateValue(data);
}}
onCleared={(): void => updateValue('')}
+ onScrollEnd={handleScrollEnd}
onNewValue={
formType !== 'formTable' && canAdd
? (): void =>
-