chore(react-components): add missing exports and change some types (#…

…4558)

* chore(react-components): add missing exports

* chore: another one

* chore: rename AddImage360-option types

* chore: type fix

* chore: actually push changes to use3dmodelnames

* chore: ASNTHSNOETHUSNTH

* chore: rename a bit more for consistency

react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx

@@ -5,22 +5,22 @@ import { type ReactElement, useEffect, useRef } from 'react';
 import { useReveal } from '../RevealCanvas/ViewerContext';
 import { type Image360Collection } from '@cognite/reveal';
 import { useRevealKeepAlive } from '../RevealKeepAlive/RevealKeepAliveContext';
-import { type AddImageCollection360Options } from '../..';
+import { type AddImage360CollectionOptions } from '../Reveal3DResources/types';
 import {
   type ImageCollectionModelStyling,
   useApply360AnnotationStyling
 } from './useApply360AnnotationStyling';
 import { type Matrix4 } from 'three';
 
 type Image360CollectionContainerProps = {
-  addImageCollection360Options: AddImageCollection360Options;
+  addImage360CollectionOptions: AddImage360CollectionOptions;
   styling?: ImageCollectionModelStyling;
   onLoad?: (image360: Image360Collection) => void;
-  onLoadError?: (addOptions: AddImageCollection360Options, error: any) => void;
+  onLoadError?: (addOptions: AddImage360CollectionOptions, error: any) => void;
 };
 
 export function Image360CollectionContainer({
-  addImageCollection360Options,
+  addImage360CollectionOptions,
   styling,
   onLoad,
   onLoadError
@@ -35,31 +35,31 @@ export function Image360CollectionContainer({
 
   useEffect(() => {
     if (
-      'siteId' in addImageCollection360Options &&
-      initializingSiteId.current === addImageCollection360Options
+      'siteId' in addImage360CollectionOptions &&
+      initializingSiteId.current === addImage360CollectionOptions
     ) {
       return;
     }
 
-    initializingSiteId.current = addImageCollection360Options;
+    initializingSiteId.current = addImage360CollectionOptions;
 
-    void add360Collection(addImageCollection360Options.transform);
+    void add360Collection(addImage360CollectionOptions.transform);
     return remove360Collection;
-  }, [addImageCollection360Options]);
+  }, [addImage360CollectionOptions]);
 
   useApply360AnnotationStyling(modelRef.current, styling);
 
   useEffect(() => {
     if (
       modelRef.current === undefined ||
-      addImageCollection360Options.transform === undefined ||
+      addImage360CollectionOptions.transform === undefined ||
       !viewer.get360ImageCollections().includes(modelRef.current)
     ) {
       return;
     }
 
-    modelRef.current.setModelTransformation(addImageCollection360Options.transform);
-  }, [modelRef, addImageCollection360Options.transform, viewer]);
+    modelRef.current.setModelTransformation(addImage360CollectionOptions.transform);
+  }, [modelRef, addImage360CollectionOptions.transform, viewer]);
 
   return <></>;
 
@@ -75,30 +75,30 @@ export function Image360CollectionContainer({
       })
       .catch((error: any) => {
         const errorReportFunction = onLoadError ?? defaultLoadErrorHandler;
-        errorReportFunction(addImageCollection360Options, error);
+        errorReportFunction(addImage360CollectionOptions, error);
       });
 
     async function getOrAdd360Collection(): Promise<Image360Collection> {
       const collections = viewer.get360ImageCollections();
       const siteId =
-        'siteId' in addImageCollection360Options
-          ? addImageCollection360Options.siteId
-          : addImageCollection360Options.externalId;
+        'siteId' in addImage360CollectionOptions
+          ? addImage360CollectionOptions.siteId
+          : addImage360CollectionOptions.externalId;
       const collection = collections.find((collection) => collection.id === siteId);
       if (collection !== undefined) {
         return collection;
       }
 
-      if ('siteId' in addImageCollection360Options) {
+      if ('siteId' in addImage360CollectionOptions) {
         return await viewer.add360ImageSet(
           'events',
           { site_id: siteId },
           { preMultipliedRotation: false }
         );
       } else {
         return await viewer.add360ImageSet('datamodels', {
-          image360CollectionExternalId: addImageCollection360Options.externalId,
-          space: addImageCollection360Options.space
+          image360CollectionExternalId: addImage360CollectionOptions.externalId,
+          space: addImage360CollectionOptions.space
         });
       }
     }
@@ -115,7 +115,7 @@ export function Image360CollectionContainer({
   }
 }
 
-function defaultLoadErrorHandler(addOptions: AddImageCollection360Options, error: any): void {
+function defaultLoadErrorHandler(addOptions: AddImage360CollectionOptions, error: any): void {
   console.warn(
     `Failed to load image collection ${
       'siteId' in addOptions ? addOptions.siteId : addOptions.externalId

react-components/src/components/Reveal3DResources/Reveal3DResources.tsx

@@ -162,7 +162,7 @@ export const Reveal3DResources = ({
           return (
             <Image360CollectionContainer
               key={key}
-              addImageCollection360Options={addModelOption}
+              addImage360CollectionOptions={addModelOption}
               styling={image360Styling}
               onLoad={onModelLoaded}
               onLoadError={onModelLoadedError}

react-components/src/components/Reveal3DResources/typeGuards.ts

@@ -2,16 +2,16 @@
  * Copyright 2024 Cognite AS
  */
 import {
-  type AddImageCollection360EventsOptions,
-  type AddImageCollection360DatamodelsOptions,
-  type AddImageCollection360Options,
+  type AddImage360CollectionEventsOptions,
+  type AddImage360CollectionDatamodelsOptions,
+  type AddImage360CollectionOptions,
   type AddResourceOptions,
   type AddReveal3DModelOptions
 } from './types';
 
 export function is360ImageAddOptions(
   addOptions: AddResourceOptions
-): addOptions is AddImageCollection360Options {
+): addOptions is AddImage360CollectionOptions {
   return !is3dModelOptions(addOptions);
 }
 
@@ -23,15 +23,15 @@ export function is3dModelOptions(
 }
 
 export function is360ImageDataModelAddOptions(
-  addOptions: AddImageCollection360Options
-): addOptions is AddImageCollection360DatamodelsOptions {
-  const castOptions = addOptions as AddImageCollection360DatamodelsOptions;
+  addOptions: AddImage360CollectionOptions
+): addOptions is AddImage360CollectionDatamodelsOptions {
+  const castOptions = addOptions as AddImage360CollectionDatamodelsOptions;
   return castOptions.externalId !== undefined && castOptions.space !== undefined;
 }
 
 export function is360ImageEventsAddOptions(
-  addOptions: AddImageCollection360Options
-): addOptions is AddImageCollection360EventsOptions {
-  const castOptions = addOptions as AddImageCollection360EventsOptions;
+  addOptions: AddImage360CollectionOptions
+): addOptions is AddImage360CollectionEventsOptions {
+  const castOptions = addOptions as AddImage360CollectionEventsOptions;
   return castOptions.siteId !== undefined;
 }

react-components/src/components/Reveal3DResources/types.ts

@@ -10,39 +10,39 @@ import {
 
 import { type Matrix4 } from 'three';
 import { type DmsUniqueIdentifier, type Source } from '../../utilities/FdmSDK';
-import { type CogniteInternalId, type Node3D } from '@cognite/sdk/dist/src';
+import { type CogniteInternalId, type Node3D } from '@cognite/sdk';
 
-export type AddImageCollection360Options =
-  | AddImageCollection360EventsOptions
-  | AddImageCollection360DatamodelsOptions;
+export type AddImage360CollectionOptions =
+  | AddImage360CollectionEventsOptions
+  | AddImage360CollectionDatamodelsOptions;
 
-export type AddImageCollection360EventsOptions = {
-  siteId: string;
-} & {
+export type CommonImage360CollectionAddOptions = {
   transform?: Matrix4;
 };
 
-export type AddImageCollection360DatamodelsOptions = {
+export type AddImage360CollectionEventsOptions = {
+  siteId: string;
+} & CommonImage360CollectionAddOptions;
+
+export type AddImage360CollectionDatamodelsOptions = {
   externalId: string;
   space: string;
-} & {
-  transform?: Matrix4;
-};
+} & CommonImage360CollectionAddOptions;
 
 export type FdmPropertyType<NodeType> = Record<string, Record<string, NodeType>>;
 
-export type TaggedAddImageCollection360Options = {
+export type TaggedAddImage360CollectionOptions = {
   type: 'image360';
-  addOptions: AddImageCollection360Options;
+  addOptions: AddImage360CollectionOptions;
 };
 export type TaggedAdd3DModelOptions = {
   type: 'cad' | 'pointcloud';
   addOptions: AddReveal3DModelOptions;
 };
 
-export type TaggedAddResourceOptions = TaggedAdd3DModelOptions | TaggedAddImageCollection360Options;
+export type TaggedAddResourceOptions = TaggedAdd3DModelOptions | TaggedAddImage360CollectionOptions;
 
-export type AddResourceOptions = AddReveal3DModelOptions | AddImageCollection360Options;
+export type AddResourceOptions = AddReveal3DModelOptions | AddImage360CollectionOptions;
 
 export type AddReveal3DModelOptions = AddModelOptions & { transform?: Matrix4 } & {
   styling?: { default?: NodeAppearance; mapped?: NodeAppearance };

react-components/src/components/Reveal3DResources/useRemoveNonReferencedModels.ts

@@ -2,7 +2,7 @@
  * Copyright 2024 Cognite AS
  */
 import { type Cognite3DViewer, type CogniteModel, type Image360Collection } from '@cognite/reveal';
-import { type AddImageCollection360Options, type TypedReveal3DModel } from './types';
+import { type AddImage360CollectionOptions, type TypedReveal3DModel } from './types';
 import {
   is360ImageDataModelAddOptions,
   is360ImageEventsAddOptions,
@@ -13,7 +13,7 @@ import { isSameCadModel, isSamePointCloudModel } from '../../utilities/isSameMod
 
 export function useRemoveNonReferencedModels(
   addOptions: TypedReveal3DModel[],
-  image360CollectionAddOptions: AddImageCollection360Options[],
+  image360CollectionAddOptions: AddImage360CollectionOptions[],
   viewer: Cognite3DViewer
 ): void {
   useEffect(() => {
@@ -83,7 +83,7 @@ function findNonReferencedModels(
 }
 
 function findNonReferencedCollections(
-  image360CollectionAddOptions: AddImageCollection360Options[],
+  image360CollectionAddOptions: AddImage360CollectionOptions[],
   viewer: Cognite3DViewer
 ): Image360Collection[] {
   const collections = viewer.get360ImageCollections();

react-components/src/components/RevealToolbar/LayersContainer/useModelHandlers.tsx

@@ -66,7 +66,7 @@ export const useModelHandlers = (
 
 function createHandlers(
   models: CogniteModel[],
-  modelNames: string[] | undefined,
+  modelNames: Array<string | undefined> | undefined,
   image360Collections: Image360Collection[],
   viewer: Cognite3DViewer
 ): ModelLayerHandlers {

react-components/src/hooks/network/getImage360CollectionsForAsset.ts

@@ -4,12 +4,12 @@
 import { type AnnotationsAssetRef, type CogniteClient, type IdEither } from '@cognite/sdk/dist/src';
 import { uniq } from 'lodash';
 import { isDefined } from '../../utilities/isDefined';
-import { type TaggedAddImageCollection360Options } from '../../components/Reveal3DResources/types';
+import { type TaggedAddImage360CollectionOptions } from '../../components/Reveal3DResources/types';
 
 export async function getImage360CollectionsForAsset(
   assetId: number,
   sdk: CogniteClient
-): Promise<TaggedAddImageCollection360Options[]> {
+): Promise<TaggedAddImage360CollectionOptions[]> {
   const fileRefsResult = await sdk.annotations.reverseLookup({
     filter: { annotatedResourceType: 'file', data: { assetRef: { id: assetId } } },
     limit: 1000

react-components/src/hooks/useReveal3dResourcesFromScene.ts

@@ -6,7 +6,7 @@ import { useSceneConfig } from '../query/useSceneConfig';
 import { type CogniteClient } from '@cognite/sdk';
 import {
   type AddResourceOptions,
-  type AddImageCollection360DatamodelsOptions
+  type AddImage360CollectionDatamodelsOptions
 } from '../components/Reveal3DResources/types';
 import { CDF_TO_VIEWER_TRANSFORMATION, type AddModelOptions } from '@cognite/reveal';
 import { useEffect, useState } from 'react';
@@ -48,7 +48,7 @@ export const useReveal3dResourcesFromScene = (
 
     scene.data.image360Collections.forEach((collection) => {
       const transform = createResourceTransformation(collection);
-      const addModelOptions: AddImageCollection360DatamodelsOptions = {
+      const addModelOptions: AddImage360CollectionDatamodelsOptions = {
         externalId: collection.image360CollectionExternalId,
         space: collection.image360CollectionSpace
       };

react-components/src/index.ts

@@ -99,17 +99,21 @@ export {
   type FdmAssetStylingGroup,
   type AssetStylingGroup,
   type DefaultResourceStyling,
-  type Image360AssetStylingGroup
-} from './components/Reveal3DResources/types';
-export type {
-  AddImageCollection360Options,
-  AddResourceOptions,
-  AddReveal3DModelOptions
+  type Image360AssetStylingGroup,
+  type TaggedAddResourceOptions,
+  type TaggedAdd3DModelOptions,
+  type TaggedAddImage360CollectionOptions,
+  type AddImage360CollectionEventsOptions,
+  type AddImage360CollectionDatamodelsOptions,
+  type AddImage360CollectionOptions,
+  type AddResourceOptions,
+  type AddReveal3DModelOptions
 } from './components/Reveal3DResources/types';
 export {
   type PointCloudAnnotationMappedAssetData,
   type Image360AnnotationMappedAssetData,
-  type LayersUrlStateParam
+  type LayersUrlStateParam,
+  type ThreeDModelFdmMappings
 } from './hooks/types';
 export type { CameraNavigationActions } from './hooks/useCameraNavigation';
 export type { Source, DmsUniqueIdentifier } from './utilities/FdmSDK';

react-components/src/query/use3DModelName.tsx

@@ -5,30 +5,33 @@
 import { type QueryFunction, useQuery, type UseQueryResult } from '@tanstack/react-query';
 import { useSDK } from '../components/RevealCanvas/SDKProvider';
 
-export const use3DModelName = (ids: number[]): UseQueryResult<string[] | undefined, unknown> => {
+export const use3DModelName = (
+  ids: number[]
+): UseQueryResult<Array<string | undefined>, unknown> => {
   const sdk = useSDK();
 
-  const queryFunction: QueryFunction<string[] | undefined> = async () => {
+  const queryFunction: QueryFunction<Array<string | undefined>> = async () => {
     const modelNamePromises = await Promise.allSettled(
       ids.map(async (id) => {
         const model = await sdk.models3D.retrieve(id);
         return model.name;
       })
     );
 
-    const modelResolvedNames: string[] = [];
+    const modelNames: Array<string | undefined> = [];
     modelNamePromises.forEach((modelNamePromise) => {
       if (modelNamePromise.status === 'fulfilled') {
-        modelResolvedNames.push(modelNamePromise.value);
+        modelNames.push(modelNamePromise.value);
       } else if (modelNamePromise.status === 'rejected') {
         console.error('Error while retriving Model Name', modelNamePromise.reason);
+        modelNames.push(undefined);
       }
     });
 
-    return modelResolvedNames;
+    return modelNames;
   };
 
-  const queryResult = useQuery<string[] | undefined>({
+  const queryResult = useQuery<Array<string | undefined>>({
     queryKey: ['cdf', '3d', 'model', ids],
     queryFn: queryFunction,
     staleTime: Infinity

react-components/src/query/use3dScenes.tsx

@@ -19,7 +19,7 @@ import { Euler, MathUtils, Matrix4 } from 'three';
 import { CDF_TO_VIEWER_TRANSFORMATION } from '@cognite/reveal';
 import {
   type AddReveal3DModelOptions,
-  type AddImageCollection360DatamodelsOptions
+  type AddImage360CollectionDatamodelsOptions
 } from '../components/Reveal3DResources/types';
 import { type GroundPlane, type Skybox } from '../components/SceneContainer/sceneTypes';
 
@@ -35,7 +35,7 @@ export type SceneData = {
   cameraEulerRotationY: number;
   cameraEulerRotationZ: number;
   cadModelOptions: AddReveal3DModelOptions[];
-  image360CollectionOptions: AddImageCollection360DatamodelsOptions[];
+  image360CollectionOptions: AddImage360CollectionDatamodelsOptions[];
   groundPlanes: GroundPlane[];
   skybox?: Skybox;
 };
@@ -183,7 +183,7 @@ function populateSceneMapWith360Images(
 
     const properties = Object.values(Object.values(edge.properties)[0])[0];
     const transform = createTransformFromEdge(properties);
-    const newImage360Collection: AddImageCollection360DatamodelsOptions = {
+    const newImage360Collection: AddImage360CollectionDatamodelsOptions = {
       externalId: properties.image360CollectionExternalId,
       space: properties.image360CollectionSpace,
       transform