fix(react-components): 360 image annotation search hook data incorrect (

#4515)

* added filter to check for region property for 360 Image annotation data for search hook

* corrected filtering to match 360 annotation data property from metadata

react-components/src/components/CacheProvider/utils.ts

@@ -40,17 +40,13 @@ export function modelRevisionAssetIdsToKey(
 export function getAssetIdOrExternalIdFromPointCloudAnnotation(
   annotation: AnnotationModel
 ): string | number | undefined {
-  return (
-    (annotation.data as AnnotationsBoundingVolume).assetRef?.id ??
-    (annotation.data as AnnotationsBoundingVolume).assetRef?.externalId
-  );
+  const annotationData = annotation.data as AnnotationsBoundingVolume;
+  return annotationData.assetRef?.id ?? annotationData.assetRef?.externalId;
 }
 
 export function getAssetIdOrExternalIdFromImage360Annotation(
   annotation: AnnotationModel
 ): string | number | undefined {
-  return (
-    (annotation.data as AnnotationsCogniteAnnotationTypesImagesAssetLink).assetRef?.id ??
-    (annotation.data as AnnotationsCogniteAnnotationTypesImagesAssetLink).assetRef?.externalId
-  );
+  const annotationData = annotation.data as AnnotationsCogniteAnnotationTypesImagesAssetLink;
+  return annotationData.assetRef?.id ?? annotationData.assetRef?.externalId;
 }

react-components/src/query/useSearchAssetsMapped360Annotations.tsx

@@ -14,15 +14,22 @@ import { chunk, uniqBy } from 'lodash';
 import { isDefined } from '../utilities/isDefined';
 import { getAssetIdOrExternalIdFromImage360Annotation } from '../components/CacheProvider/utils';
 import { type Image360AnnotationMappedAssetData } from '../hooks/types';
+import { is360ImageAnnotation } from '../utilities/is360ImageAnnotation';
+import { type Image360AnnotationFilterOptions } from '@cognite/reveal';
 
 export const useAllAssetsMapped360Annotations = (
   sdk: CogniteClient,
-  siteIds: string[]
+  siteIds: string[],
+  image360AnnotationFilterOptions: Image360AnnotationFilterOptions = { status: `approved` }
 ): UseQueryResult<Image360AnnotationMappedAssetData[]> => {
   return useQuery({
     queryKey: ['reveal', 'react-components', 'all-assets-mapped-360-annotations', siteIds],
     queryFn: async () => {
-      const assetMappings = await getAssetsMapped360Annotations(sdk, siteIds);
+      const assetMappings = await getAssetsMapped360Annotations(
+        sdk,
+        siteIds,
+        image360AnnotationFilterOptions
+      );
       return assetMappings;
     },
     staleTime: Infinity
@@ -32,11 +39,13 @@ export const useAllAssetsMapped360Annotations = (
 export const useSearchAssetsMapped360Annotations = (
   siteIds: string[],
   sdk: CogniteClient,
-  query: string
+  query: string,
+  image360AnnotationFilterOptions?: Image360AnnotationFilterOptions
 ): UseQueryResult<Image360AnnotationMappedAssetData[]> => {
   const { data: assetAnnotationMappings, isFetched } = useAllAssetsMapped360Annotations(
     sdk,
-    siteIds
+    siteIds,
+    image360AnnotationFilterOptions
   );
 
   return useQuery({
@@ -76,10 +85,15 @@ export const useSearchAssetsMapped360Annotations = (
 
 async function getAssetsMapped360Annotations(
   sdk: CogniteClient,
-  siteIds: string[]
+  siteIds: string[],
+  image360AnnotationFilterOptions: Image360AnnotationFilterOptions
 ): Promise<Image360AnnotationMappedAssetData[]> {
   const fileIdsList = await get360ImagesFileIds(siteIds, sdk);
-  const image360Annotations = await get360ImageAnnotations(fileIdsList, sdk);
+  const image360Annotations = await get360ImageAnnotations(
+    fileIdsList,
+    sdk,
+    image360AnnotationFilterOptions
+  );
   const result = await get360AnnotationAssets(image360Annotations, sdk);
 
   return result;
@@ -182,7 +196,8 @@ async function get360ImagesFileIds(siteIds: string[], sdk: CogniteClient): Promi
 
 async function get360ImageAnnotations(
   fileIdsList: number[],
-  sdk: CogniteClient
+  sdk: CogniteClient,
+  image360AnnotationFilterOptions: Image360AnnotationFilterOptions
 ): Promise<AnnotationModel[]> {
   const annotationArray = await Promise.all(
     chunk(fileIdsList, 1000).map(async (fileIdsChunk) => {
@@ -197,7 +212,11 @@ async function get360ImageAnnotations(
           limit: 1000
         })
         .autoPagingToArray({ limit: Infinity });
-      return annotations;
+
+      const filteredAnnotations = annotations
+        .filter((annotation) => annotation.status === image360AnnotationFilterOptions.status)
+        .filter((annotation) => is360ImageAnnotation(annotation.data));
+      return filteredAnnotations;
     })
   );
 

react-components/src/utilities/is360ImageAnnotation.ts

@@ -0,0 +1,14 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import {
+  type AnnotationsCogniteAnnotationTypesImagesAssetLink,
+  type AnnotationData
+} from '@cognite/sdk';
+
+export function is360ImageAnnotation(
+  annotationData: AnnotationData
+): annotationData is AnnotationsCogniteAnnotationTypesImagesAssetLink {
+  const data = annotationData as AnnotationsCogniteAnnotationTypesImagesAssetLink;
+  return data.text !== undefined && data.textRegion !== undefined && data.assetRef !== undefined;
+}