fix(react-components): No result when single character search input in asset search hook

react-components/src/index.ts

@@ -114,7 +114,8 @@ export {
   type AddImage360CollectionOptions,
   type AddResourceOptions,
   type AddCadResourceOptions,
-  type AddPointCloudResourceOptions
+  type AddPointCloudResourceOptions,
+  type CadModelOptions
 } from './components/Reveal3DResources/types';
 export {
   type PointCloudAnnotationMappedAssetData,

react-components/src/query/useSearchMappedEquipmentAssetMappings.tsx

@@ -1,7 +1,6 @@
 /*!
  * Copyright 2023 Cognite AS
  */
-import { useRef } from 'react';
 import { type AddModelOptions } from '@cognite/reveal';
 import {
   type Asset,
@@ -48,8 +47,6 @@ export const useSearchMappedEquipmentAssetMappings = (
   const sdk = useSDK(userSdk);
   const { data: assetMappingList, isFetched: isAssetMappingNodesFetched } =
     useAssetMappedNodesForRevisions(models.map((model) => ({ ...model, type: 'cad' })));
-  const { data: initialAssetMappings, isLoading: isInitialAssetMappingsLoading } =
-    useAllMappedEquipmentAssetMappings(models, sdk);
 
   return useInfiniteQuery({
     queryKey: [
@@ -60,38 +57,46 @@ export const useSearchMappedEquipmentAssetMappings = (
       ...models.map((model) => [model.modelId, model.revisionId])
     ],
     queryFn: async ({ pageParam }: { pageParam: string | undefined }) => {
-      if (initialAssetMappings === undefined) {
-        return { assets: [], nextCursor: undefined };
-      }
       if (query === '') {
-        const assets = initialAssetMappings.pages.flatMap((modelWithAssets) =>
-          modelWithAssets.modelsAssets.flatMap((modelsAsset) => modelsAsset.assets).flat()
-        );
-        return { assets, nextCursor: undefined };
+        return { assets: [], nextCursor: undefined };
       }
       if (assetMappingList === undefined) {
         return { assets: [], nextCursor: undefined };
       }
-      const assetsResponse = await getAssetsList(sdk, {
-        query,
-        limit,
-        cursor: pageParam
-      });
+      const fetchAssets = async (
+        cursor: string | undefined,
+        accumulatedAssets: Asset[]
+      ): Promise<{ assets: Asset[]; nextCursor: string | undefined }> => {
+        const assetsResponse = await getAssetsList(sdk, {
+          query,
+          limit,
+          cursor
+        });
 
-      const assets = assetsResponse.items.filter(isDefined);
-      const filteredSearchedAssets = assetMappingList.flatMap((mapping) => {
-        return mapping.assetMappings
-          .filter((assetMapping) => assets.some((asset) => asset.id === assetMapping.assetId))
-          .map((assetMapping) => assets.find((asset) => asset.id === assetMapping.assetId))
-          .filter(isDefined);
-      });
+        const fetchedAssets = assetsResponse.items.filter(isDefined);
+        const filteredSearchedAssets = assetMappingList.flatMap((mapping) => {
+          return mapping.assetMappings
+            .filter((assetMapping) =>
+              fetchedAssets.some((asset) => asset.id === assetMapping.assetId)
+            )
+            .map((assetMapping) => fetchedAssets.find((asset) => asset.id === assetMapping.assetId))
+            .filter(isDefined);
+        });
+
+        const uniqueAssets = uniq([...accumulatedAssets, ...filteredSearchedAssets]);
+
+        if (uniqueAssets.length >= limit || assetsResponse.nextCursor === undefined) {
+          return { assets: uniqueAssets, nextCursor: assetsResponse.nextCursor };
+        }
+
+        return await fetchAssets(assetsResponse.nextCursor, uniqueAssets);
+      };
 
-      // Remove duplicates
-      const uniqueFilteredSearchedAssets = uniq(filteredSearchedAssets);
+      const { assets, nextCursor } = await fetchAssets(pageParam, []);
 
       return {
-        assets: uniqueFilteredSearchedAssets,
-        nextCursor: assetsResponse.nextCursor
+        assets,
+        nextCursor
       };
     },
     initialPageParam: undefined,
@@ -101,20 +106,16 @@ export const useSearchMappedEquipmentAssetMappings = (
       return lastPageData.nextCursor;
     },
     enabled:
-      !isInitialAssetMappingsLoading &&
-      isAssetMappingNodesFetched &&
-      assetMappingList !== undefined &&
-      assetMappingList.length > 0
+      isAssetMappingNodesFetched && assetMappingList !== undefined && assetMappingList.length > 0
   });
 };
 
 export const useAllMappedEquipmentAssetMappings = (
   models: AddModelOptions[],
   userSdk?: CogniteClient,
   limit: number = 1000
-): UseInfiniteQueryResult<InfiniteData<ModelAssetPage>, Error> => {
+): UseInfiniteQueryResult<InfiniteData<ModelMappingsWithAssets[]>, Error> => {
   const sdk = useSDK(userSdk);
-  const usedCursors = useRef(new Set());
 
   return useInfiniteQuery({
     queryKey: [
@@ -129,13 +130,11 @@ export const useAllMappedEquipmentAssetMappings = (
           cursor: string | 'start' | undefined;
           model: AddModelOptions;
         }>;
-
         const nextCursor = nextCursors.find(
           (nextCursor) =>
             nextCursor.model.modelId === model.modelId &&
             nextCursor.model.revisionId === model.revisionId
         )?.cursor;
-
         if (nextCursor === undefined) {
           return { mappings: { items: [] }, model };
         }
@@ -145,43 +144,18 @@ export const useAllMappedEquipmentAssetMappings = (
           limit
         });
 
-        usedCursors.current.add(nextCursor);
-
         return { mappings, model };
       });
 
       const currentPagesOfAssetMappings = await Promise.all(currentPagesOfAssetMappingsPromises);
 
       const modelsAssets = await getAssetsFromAssetMappings(sdk, currentPagesOfAssetMappings);
-      const nextCursors = currentPagesOfAssetMappings
-        .map(({ mappings }) => mappings.nextCursor)
-        .filter(isDefined);
 
-      return await Promise.resolve({
-        modelsAssets,
-        nextCursors
-      });
+      return modelsAssets;
     },
     initialPageParam: models.map((model) => ({ cursor: 'start', model })),
     staleTime: Infinity,
-    getNextPageParam: (lastPage: {
-      modelsAssets: ModelMappingsWithAssets[];
-      nextCursors: string[];
-    }): Array<{ cursor: string | undefined; model: AddModelOptions }> | undefined => {
-      const nextCursors = lastPage.nextCursors
-        .map((cursor, index) => ({ cursor, model: lastPage.modelsAssets[index].model }))
-        .filter((mappingModel) => {
-          if (mappingModel.cursor === undefined || usedCursors.current.has(mappingModel.cursor)) {
-            return false;
-          }
-          usedCursors.current.add(mappingModel.cursor);
-          return true;
-        });
-      if (nextCursors.length === 0) {
-        return undefined;
-      }
-      return nextCursors;
-    }
+    getNextPageParam
   });
 };
 

react-components/src/utilities/buildFilter.ts

@@ -6,27 +6,16 @@ export const buildFilter = (query: string): any => {
   if (query === '') {
     return undefined;
   }
-  const conditions = ['search']
-    .map((condition) => [
-      {
-        [condition]: {
-          property: ['name'],
-          value: query
-        }
-      },
-      {
-        [condition]: {
-          property: ['description'],
-          value: query
-        }
-      }
-    ])
-    .flat();
+
+  const searchConditions = [
+    { search: { property: ['name'], value: query } },
+    { search: { property: ['description'], value: query } }
+  ];
 
   return {
     and: [
       {
-        or: conditions
+        or: searchConditions
       }
     ]
   };

react-components/stories/SearchHooks.stories.tsx

@@ -126,7 +126,15 @@ const StoryContent = ({ resources }: { resources: AddResourceOptions[] }): React
     } else if (searchMethod === 'assetSearch' && !isAssetSearchFetching && assetSearchHasNextPage) {
       void fetchAssetSearchNextPage();
     }
-  }, []);
+  }, [
+    searchMethod,
+    isFetching,
+    hasNextPage,
+    fetchNextPage,
+    isAssetSearchFetching,
+    assetSearchHasNextPage,
+    fetchAssetSearchNextPage
+  ]);
 
   const filteredEquipment = useMemo(() => {
     if (searchMethod === 'allFdm') {
@@ -152,9 +160,7 @@ const StoryContent = ({ resources }: { resources: AddResourceOptions[] }): React
       const transformedAssets =
         allAssets?.pages
           .flat()
-          .map((modelsAssetPage) =>
-            modelsAssetPage.modelsAssets.flatMap((modelsAsset) => modelsAsset.assets)
-          )
+          .map((mapping) => mapping.assets)
           .flat() ?? [];
 
       const all360ImageAssets =
@@ -372,8 +378,8 @@ export const Main: Story = {
         siteId: 'celanese1'
       },
       {
-        modelId: 5653798104332258,
-        revisionId: 5045518244111296
+        modelId: 7646043527629245,
+        revisionId: 6059566106376463
       }
     ]
   },