refactor(react-components): remove superfluous exported type and bump to 0.54.0

react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.53.0",
+  "version": "0.54.0",
   "exports": {
     ".": {
       "import": "./dist/index.js",

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

@@ -12,7 +12,9 @@ import {
   type AddResourceOptions,
   type Reveal3DResourcesProps,
   type CadModelOptions,
-  type PointCloudModelOptions
+  type PointCloudModelOptions,
+  type AddCadResourceOptions,
+  type AddPointCloudResourceOptions
 } from './types';
 import { useCalculatePointCloudStyling } from './useCalculatePointCloudStyling';
 import {
@@ -26,7 +28,7 @@ import {
   isImage360AssetStylingGroup
 } from '../../utilities/StylingGroupUtils';
 import { type ImageCollectionModelStyling } from '../Image360CollectionContainer/useApply360AnnotationStyling';
-import { is360ImageAddOptions, is3dResourceOptions } from './typeGuards';
+import { is360ImageAddOptions } from './typeGuards';
 import { useRemoveNonReferencedModels } from './useRemoveNonReferencedModels';
 import {
   useAssetMappedNodesForRevisions,
@@ -208,16 +210,21 @@ async function getTypedModels(
 ): Promise<TypedReveal3DModel[]> {
   const errorFunction = onLoadFail ?? defaultLoadFailHandler;
 
-  const modelTypePromises = resources.filter(is3dResourceOptions).map(async (addModelOptions) => {
-    const type = await viewer
-      .determineModelType(addModelOptions.modelId, addModelOptions.revisionId)
-      .catch((error) => {
-        errorFunction(addModelOptions, error);
-        return '';
-      });
-    const typedModel = { ...addModelOptions, type };
-    return typedModel;
-  });
+  const modelTypePromises = resources
+    .filter(
+      (resource): resource is AddCadResourceOptions | AddPointCloudResourceOptions =>
+        !is360ImageAddOptions(resource)
+    )
+    .map(async (addModelOptions) => {
+      const type = await viewer
+        .determineModelType(addModelOptions.modelId, addModelOptions.revisionId)
+        .catch((error) => {
+          errorFunction(addModelOptions, error);
+          return '';
+        });
+      const typedModel = { ...addModelOptions, type };
+      return typedModel;
+    });
 
   const resourceLoadResults = await Promise.all(modelTypePromises);
   const successfullyLoadedResources = resourceLoadResults.filter(

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

@@ -5,21 +5,16 @@ import {
   type AddImage360CollectionEventsOptions,
   type AddImage360CollectionDatamodelsOptions,
   type AddImage360CollectionOptions,
-  type AddResourceOptions,
-  type Add3dResourceOptions
+  type AddResourceOptions
 } from './types';
 
 export function is360ImageAddOptions(
   addOptions: AddResourceOptions
 ): addOptions is AddImage360CollectionOptions {
-  return !is3dResourceOptions(addOptions);
-}
-
-export function is3dResourceOptions(
-  addOptions: AddResourceOptions
-): addOptions is Add3dResourceOptions {
-  const modelOptions = addOptions as Add3dResourceOptions;
-  return modelOptions.modelId !== undefined && modelOptions.revisionId !== undefined;
+  return (
+    is360ImageDataModelAddOptions(addOptions as AddImage360CollectionOptions) ||
+    is360ImageEventsAddOptions(addOptions as AddImage360CollectionOptions)
+  );
 }
 
 export function is360ImageDataModelAddOptions(

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

@@ -61,13 +61,13 @@ export type AddResourceOptions =
   | AddPointCloudResourceOptions
   | AddImage360CollectionOptions;
 
-export type Add3dResourceOptions = AddModelOptions & { transform?: Matrix4 };
-
-export type AddPointCloudResourceOptions = Add3dResourceOptions & {
+export type AddPointCloudResourceOptions = AddModelOptions & {
+  transform?: Matrix4;
   styling?: { default?: NodeAppearance; mapped?: NodeAppearance };
 };
 
-export type AddCadResourceOptions = AddModelOptions & { transform?: Matrix4 } & {
+export type AddCadResourceOptions = AddModelOptions & {
+  transform?: Matrix4;
   styling?: {
     default?: NodeAppearance;
     mapped?: NodeAppearance;

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

@@ -10,7 +10,7 @@ import {
 import { useMemo } from 'react';
 import { type AnnotationIdStylingGroup } from '../PointCloudContainer/useApplyPointCloudStyling';
 import { useQuery } from '@tanstack/react-query';
-import { isSame3dModel } from '../../utilities/isSameModel';
+import { isSameModel } from '../../utilities/isSameModel';
 import {
   usePointCloudAnnotationMappingsForModels,
   usePointCloudAnnotationIdsForModels
@@ -168,7 +168,7 @@ function groupStyleGroupByModel(
 
   return styleGroup.reduce<StyledPointCloudModel[]>((accumulatedGroups, currentGroup) => {
     const existingGroupWithModel = accumulatedGroups.find((group) =>
-      isSame3dModel(group.model, currentGroup.model)
+      isSameModel(group.model, currentGroup.model)
     );
     existingGroupWithModel?.styleGroups.push(...currentGroup.styleGroups);
     return accumulatedGroups;

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

@@ -6,11 +6,10 @@ import { type AddResourceOptions } from './types';
 import {
   is360ImageAddOptions,
   is360ImageDataModelAddOptions,
-  is360ImageEventsAddOptions,
-  is3dResourceOptions
+  is360ImageEventsAddOptions
 } from './typeGuards';
 import { useEffect } from 'react';
-import { isSame3dModel } from '../../utilities/isSameModel';
+import { isSameModel } from '../../utilities/isSameModel';
 
 export function useRemoveNonReferencedModels(
   addOptions: AddResourceOptions[],
@@ -36,22 +35,22 @@ function findNonReferencedModels(
   viewer: Cognite3DViewer
 ): CogniteModel[] {
   const models = viewer.models;
-  const addOptionsSet = new Set(addOptions.filter(is3dResourceOptions));
+  const addOptionsSet = new Set(addOptions.filter((model) => !is360ImageAddOptions(model)));
 
   return models.filter((model) => {
     const correspondingAddOptions = (() => {
       for (const options of addOptionsSet) {
-        if (!is3dResourceOptions(options)) {
+        if (is360ImageAddOptions(options)) {
           continue;
         }
 
-        const isSameModel = isSame3dModel(options, {
+        const sameModel = isSameModel(options, {
           modelId: model.modelId,
           revisionId: model.revisionId,
           transform: model.getModelTransformation()
         });
 
-        if (isSameModel) {
+        if (sameModel) {
           return options;
         }
       }

react-components/src/index.ts

@@ -110,7 +110,6 @@ export {
   type AddImage360CollectionDatamodelsOptions,
   type AddImage360CollectionOptions,
   type AddResourceOptions,
-  type Add3dResourceOptions,
   type AddCadResourceOptions,
   type AddPointCloudResourceOptions
 } from './components/Reveal3DResources/types';

react-components/src/query/use3dScenes.tsx

@@ -19,7 +19,8 @@ import { Euler, MathUtils, Matrix4 } from 'three';
 import { CDF_TO_VIEWER_TRANSFORMATION } from '@cognite/reveal';
 import { type GroundPlane, type Skybox } from '../components/SceneContainer/sceneTypes';
 import {
-  type Add3dResourceOptions,
+  type AddCadResourceOptions,
+  type AddPointCloudResourceOptions,
   type AddImage360CollectionDatamodelsOptions
 } from '../components/Reveal3DResources/types';
 
@@ -34,7 +35,7 @@ export type SceneData = {
   cameraEulerRotationX: number;
   cameraEulerRotationY: number;
   cameraEulerRotationZ: number;
-  cadModelOptions: Add3dResourceOptions[];
+  cadModelOptions: Array<AddCadResourceOptions | AddPointCloudResourceOptions>;
   image360CollectionOptions: AddImage360CollectionDatamodelsOptions[];
   groundPlanes: GroundPlane[];
   skybox?: Skybox;

react-components/src/utilities/isSameModel.ts

@@ -3,10 +3,15 @@
  */
 import { type GeometryFilter } from '@cognite/reveal';
 import {
-  type Add3dResourceOptions,
+  type AddImage360CollectionOptions,
+  type AddResourceOptions,
   type CadModelOptions
 } from '../components/Reveal3DResources/types';
 import { Matrix4 } from 'three';
+import {
+  is360ImageAddOptions,
+  is360ImageEventsAddOptions
+} from '../components/Reveal3DResources/typeGuards';
 
 export function isSameCadModel(model0: CadModelOptions, model1: CadModelOptions): boolean {
   return (
@@ -43,12 +48,55 @@ function isSameGeometryFilter(
   );
 }
 
-export function isSame3dModel(model0: Add3dResourceOptions, model1: Add3dResourceOptions): boolean {
-  return (
-    model0.modelId === model1.modelId &&
-    model0.revisionId === model1.revisionId &&
-    isSameTransform(model0.transform, model1.transform)
-  );
+export function isSameModel(model0: AddResourceOptions, model1: AddResourceOptions): boolean {
+  const isFirstImage360 = is360ImageAddOptions(model0);
+  const isSecondImage360 = is360ImageAddOptions(model1);
+
+  if (isFirstImage360 !== isSecondImage360) {
+    return false;
+  }
+
+  if (isFirstImage360 && isSecondImage360) {
+    return isSame360Collection(model0, model1);
+  }
+
+  if (!isFirstImage360 && !isSecondImage360) {
+    return (
+      model0.modelId === model1.modelId &&
+      model0.revisionId === model1.revisionId &&
+      isSameTransform(model0.transform, model1.transform)
+    );
+  }
+
+  return false;
+}
+
+export function isSame360Collection(
+  collection0: AddImage360CollectionOptions,
+  collection1: AddImage360CollectionOptions
+): boolean {
+  const isFirstEventsBased = is360ImageEventsAddOptions(collection0);
+  const isSecondEventsBased = is360ImageEventsAddOptions(collection1);
+  if (isFirstEventsBased !== isSecondEventsBased) {
+    return false;
+  }
+
+  if (isFirstEventsBased && isSecondEventsBased) {
+    return (
+      collection0.siteId === collection1.siteId &&
+      isSameTransform(collection0.transform, collection1.transform)
+    );
+  }
+
+  if (!isFirstEventsBased && !isSecondEventsBased) {
+    return (
+      collection0.externalId === collection1.externalId &&
+      collection0.space === collection1.space &&
+      isSameTransform(collection0.transform, collection1.transform)
+    );
+  }
+
+  return false;
 }
 
 const identity = new Matrix4();
@@ -64,7 +112,3 @@ function isSameTransform(m0: Matrix4 | undefined, m1: Matrix4 | undefined): bool
 
   return m0.equals(m1);
 }
-
-export function isSameModel(model1: CadModelOptions, model2: CadModelOptions): boolean {
-  return model1.modelId === model2.modelId && model1.revisionId === model2.revisionId;
-}

react-components/stories/SearchHooks.stories.tsx

@@ -9,7 +9,8 @@ import {
   type AddResourceOptions,
   type AddImage360CollectionOptions,
   RevealContext,
-  type Add3dResourceOptions
+  type AddCadResourceOptions,
+  type AddPointCloudResourceOptions
 } from '../src';
 import { Color } from 'three';
 import { type ReactElement, useState, useMemo, useEffect } from 'react';
@@ -36,6 +37,7 @@ import {
 import { isEqual } from 'lodash';
 import { type NodeItem } from '../src/utilities/FdmSDK';
 import { Button, Input } from '@cognite/cogs.js';
+import { is360ImageAddOptions } from '../src/components/Reveal3DResources/typeGuards';
 
 const queryClient = new QueryClient();
 const sdk = createSdkByUrlToken();
@@ -60,7 +62,8 @@ const StoryContent = ({ resources }: { resources: AddResourceOptions[] }): React
   >('fdmSearch');
 
   const filteredResources = resources.filter(
-    (resource): resource is Add3dResourceOptions => 'modelId' in resource
+    (resource): resource is AddCadResourceOptions | AddPointCloudResourceOptions =>
+      !is360ImageAddOptions(resource)
   );
 
   const { data: searchData } = useSearchMappedEquipmentFDM(

react-components/tests/unit-tests/utilities/isSameModel.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+
+import { Matrix4 } from 'three';
+import { isSameModel } from '../../../src/utilities/isSameModel';
+import { cloneDeep } from 'lodash';
+
+describe(isSameModel.name, () => {
+  const model0 = { modelId: 1, revisionId: 2, transform: new Matrix4().makeRotationX(1) };
+  const model1 = { modelId: 3, revisionId: 4, transform: new Matrix4().makeRotationY(2) };
+  const model2 = { modelId: 1, revisionId: 2, transform: new Matrix4().makeRotationZ(3) };
+
+  const image360Event0 = { siteId: 'site0', transform: new Matrix4().makeRotationZ(3) };
+  const image360Event1 = { siteId: 'site1', transform: new Matrix4().makeRotationX(4) };
+  const image360Event2 = { siteId: 'site0', transform: new Matrix4().makeRotationZ(5) };
+
+  const image360Fdm0 = {
+    externalId: 'id0',
+    space: 'space0',
+    transform: new Matrix4().makeRotationY(5)
+  };
+  const image360Fdm1 = {
+    externalId: 'id1',
+    space: 'space0',
+    transform: new Matrix4().makeRotationY(5)
+  };
+
+  test('returns true on equal model info', () => {
+    expect(isSameModel(model0, cloneDeep(model0))).toBeTruthy();
+  });
+
+  test('returns false on unequal models', () => {
+    expect(isSameModel(model0, model1)).toBeFalsy();
+  });
+
+  test('returns false on equal models with different transforms', () => {
+    expect(isSameModel(model0, model2)).toBeFalsy();
+  });
+
+  test('returns false with CAD/PC vs 360', () => {
+    expect(isSameModel(model0, image360Event0)).toBeFalsy();
+  });
+
+  test('returns true with equal 360 images', () => {
+    expect(isSameModel(image360Event0, cloneDeep(image360Event0))).toBeTruthy();
+  });
+
+  test('returns false with unequal 360 images', () => {
+    expect(isSameModel(image360Event0, image360Event1)).toBeFalsy();
+  });
+
+  test('returns false for equal 360 images with different transform', () => {
+    expect(isSameModel(image360Event0, image360Event2)).toBeFalsy();
+  });
+
+  test('returns false wtih FDM vs events images', () => {
+    expect(isSameModel(image360Event0, image360Fdm0)).toBeFalsy();
+  });
+
+  test('returns true for equal FDM images', () => {
+    expect(isSameModel(image360Fdm0, cloneDeep(image360Fdm0))).toBeTruthy();
+  });
+
+  test('returns false for unequal FDM images', () => {
+    expect(isSameModel(image360Fdm0, image360Fdm1)).toBeFalsy();
+  });
+});