fix(react-components): make react-components compatible with 360-CDM-…

…changes in Reveal and bump to 0.74.0 (#4959)

* fix(react-components): conform to 360 CDM Reveal changes

* chore: cleanup/fix utils-file

* chore: restructuring and fixes in cruical places

* chore: undo file rename

* chore: avoid sending invalid request

* chore: revert unnecessary change

* chore: correct view versions in DM Search example

* chore: lint fix

* chore: simplify simplify

* chore: lnit fix

* chore: turn on CDM 360-images when coreDM-flag is true

* chore: retrieve all types of annotations for collection

* chore: simplify code in viewer

* chore: use newest Reveal version

* chore: revert unnecessary changes

* chore: use the AssetInstance type everywhere

* chore: try to rewrite Cache code a little + lint

* chore: more fixes according to review

* chore: throw proper error

react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.73.14",
+  "version": "0.74.0",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@cognite/cogs-lab": "^9.0.0-alpha.153",
-    "@cognite/reveal": "4.21.1",
+    "@cognite/reveal": "4.23.1",
     "react": ">=18",
     "react-dom": ">=18",
     "styled-components": ">=5"
@@ -46,7 +46,7 @@
     "@cognite/cdf-utilities": "^3.6.0",
     "@cognite/cogs-lab": "^9.0.0-alpha.153",
     "@cognite/cogs.js": "^10.36.0",
-    "@cognite/reveal": "^4.22.0",
+    "@cognite/reveal": "^4.23.1",
     "@cognite/sdk": "^9.13.0",
     "@playwright/test": "1.49.0",
     "@storybook/addon-essentials": "8.4.5",

react-components/src/architecture/base/renderTarget/RevealRenderTarget.ts

@@ -41,6 +41,7 @@ import { ContextMenuController } from './ContextMenuController';
 import { InstanceStylingController } from './InstanceStylingController';
 import { type Class } from '../domainObjectsHelpers/Class';
 import { CdfCaches } from './CdfCaches';
+import { type DmsUniqueIdentifier } from '../../../data-providers';
 
 const DIRECTIONAL_LIGHT_NAME = 'DirectionalLight';
 
@@ -113,7 +114,7 @@ export class RevealRenderTarget {
     return this._viewer.canDoImage360Action(Image360Action.Exit);
   }
 
-  public get active360ImageId(): string | undefined {
+  public get active360ImageId(): string | DmsUniqueIdentifier | undefined {
     return this._viewer.getActive360ImageInfo()?.image360.id;
   }
 

react-components/src/architecture/concrete/annotation360/Image360AnnotationCreator.ts

@@ -8,14 +8,15 @@ import { type BaseTool } from '../../base/commands/BaseTool';
 import { LineCreator } from '../primitives/line/LineCreator';
 import assert from 'assert';
 import { EDIT_WITHOUT_IMAGE } from './constants';
+import { type DmsUniqueIdentifier } from '../../../data-providers';
 
 export class Image360AnnotationCreator extends LineCreator {
   // ==================================================
   // CONSTRUCTOR
   // ==================================================
 
   public constructor(tool: BaseTool) {
-    const imageId: string | undefined = EDIT_WITHOUT_IMAGE
+    const imageId: DmsUniqueIdentifier | string | undefined = EDIT_WITHOUT_IMAGE
       ? 'Dummy'
       : tool.renderTarget.active360ImageId;
     assert(imageId !== undefined, 'Image360AnnotationCreator: image360Id is undefined');

react-components/src/architecture/concrete/annotation360/Image360AnnotationDomainObject.ts

@@ -9,9 +9,9 @@ import { type TranslationInput } from '../../base/utilities/TranslateInput';
 import { LineDomainObject } from '../primitives/line/LineDomainObject';
 import { Color, Vector3 } from 'three';
 import { LineRenderStyle } from '../primitives/line/LineRenderStyle';
-import { type DirectRelationReference } from '@cognite/sdk';
 import { createTriangleIndexesFromVectors } from './createTriangleIndexesFromVectors';
 import { type AnnotationIdentifier, type AssetIdentifier, type AnnotationStatus } from './types';
+import { type DmsUniqueIdentifier } from '../../../data-providers';
 
 const DEFAULT_VECTOR_LENGTH = 5;
 
@@ -20,7 +20,7 @@ export class Image360AnnotationDomainObject extends LineDomainObject {
   // INSTANCE FIELDS
   // ==================================================
 
-  public connectedImageId: string | DirectRelationReference;
+  public connectedImageId: string | DmsUniqueIdentifier;
   public readonly center = new Vector3(); // The points are unit vectors from the center
   public vectorLength = DEFAULT_VECTOR_LENGTH;
   public annotationIdentifier?: AnnotationIdentifier;
@@ -31,7 +31,7 @@ export class Image360AnnotationDomainObject extends LineDomainObject {
   // CONSTRUCTOR
   // ==================================================
 
-  public constructor(connectedImageId: string | DirectRelationReference) {
+  public constructor(connectedImageId: string | DmsUniqueIdentifier) {
     super(PrimitiveType.Polygon);
     this.color = new Color(Color.NAMES.yellow);
     this.connectedImageId = connectedImageId;

react-components/src/architecture/concrete/pointsOfInterest/CreatePointsOfInterestWithDescriptionCommand.tsx

@@ -5,14 +5,15 @@ import { type Vector3 } from 'three';
 import { PointsOfInterestDomainObject } from './PointsOfInterestDomainObject';
 import { type TranslationInput } from '../../base/utilities/TranslateInput';
 import { createPointsOfInterestPropertiesFromPointAndTitle } from './types';
-import { type InstanceReference, type DmsUniqueIdentifier } from '../../../data-providers';
+import { type DmsUniqueIdentifier } from '../../../data-providers';
 
 import {
   CustomBaseInputCommand,
   type FieldContent
 } from '../../base/commands/CustomBaseInputCommand';
 import { InstanceLabel } from '../../../components/InstanceLabel';
 import { isDefined } from '../../../utilities/isDefined';
+import { type InstanceReference } from '../../../utilities/instanceIds';
 
 export class CreatePointsOfInterestWithDescriptionCommand extends CustomBaseInputCommand {
   private readonly _point: Vector3;

react-components/src/architecture/concrete/pointsOfInterest/PointsOfInterestTool.ts

@@ -14,9 +14,9 @@ import { CreatePointsOfInterestWithDescriptionCommand } from './CreatePointsOfIn
 import { type RevealRenderTarget } from '../../base/renderTarget/RevealRenderTarget';
 import { BaseEditTool } from '../../base/commands/BaseEditTool';
 import { getInstancesFromClick } from '../../../utilities/getInstancesFromClick';
-import { type InstanceReference } from '../../../data-providers';
 import { DefaultNodeAppearance } from '@cognite/reveal';
 import { createInstanceStyleGroup } from '../../../components/Reveal3DResources/instanceStyleTranslation';
+import { type InstanceReference } from '../../../utilities/instanceIds';
 
 const ASSIGNED_INSTANCE_STYLING_SYMBOL = Symbol('poi3d-assigned-instance-styling');
 

react-components/src/architecture/concrete/pointsOfInterest/ads/PointsOfInterestAdsProvider.ts

@@ -14,8 +14,8 @@ import {
   type PoiItem
 } from './types';
 import { createUpsertRequestFromPois } from './createUpsertRequestFromPois';
-import { type InstanceReference } from '../../../../data-providers';
 import { createUserMap } from './createUserMap';
+import { type InstanceReference } from '../../../../utilities/instanceIds';
 
 /**
  * A PoI provider using the Cognite Application Data Storage service as backing storage
@@ -192,7 +192,7 @@ function poiExternalInstanceRefToInstanceReference(
   }
 
   if (isPoiAssetRef(instance)) {
-    return { assetId: instance.id };
+    return { id: instance.id };
   } else if (isPoiDMRef(instance)) {
     return { externalId: instance.externalId, space: instance.instanceSpace };
   }

react-components/src/architecture/concrete/pointsOfInterest/ads/createUpsertRequestFromPois.ts

@@ -1,9 +1,13 @@
 /*!
  * Copyright 2024 Cognite AS
  */
-import { type InstanceReference, type DmsUniqueIdentifier } from '../../../../data-providers';
+import { type DmsUniqueIdentifier } from '../../../../data-providers';
 import { type ExternalId } from '../../../../data-providers/FdmSDK';
-import { isAssetInstance } from '../../../../data-providers/types';
+import {
+  type InstanceReference,
+  isDmsInstance,
+  isInternalId
+} from '../../../../utilities/instanceIds';
 import { type PointsOfInterestInstance, type PoiVisibility, type SceneState } from '../models';
 import { type PoiExternalInstanceRef } from './types';
 
@@ -46,9 +50,11 @@ function instanceReferenceToPoiExternalInstanceReference(
     return undefined;
   }
 
-  if (isAssetInstance(instanceRef)) {
-    return { id: instanceRef.assetId };
-  } else {
+  if (isInternalId(instanceRef)) {
+    return instanceRef;
+  } else if (isDmsInstance(instanceRef)) {
     return { externalId: instanceRef.externalId, instanceSpace: instanceRef.space };
   }
+
+  return undefined;
 }

react-components/src/architecture/concrete/pointsOfInterest/models.ts

@@ -2,7 +2,8 @@
  * Copyright 2024 Cognite AS
  */
 
-import { type InstanceReference, type DmsUniqueIdentifier } from '../../../data-providers';
+import { type DmsUniqueIdentifier } from '../../../data-providers';
+import { type InstanceReference } from '../../../utilities/instanceIds';
 
 export type PoiVisibility = 'PUBLIC' | 'PRIVATE';
 

react-components/src/architecture/concrete/pointsOfInterest/types.ts

@@ -10,7 +10,8 @@ import { type PointsOfInterestProperties } from './models';
 import { type Vector3 } from 'three';
 import { type DomainObjectIntersection } from '../../base/domainObjectsHelpers/DomainObjectIntersection';
 import { type PointsOfInterestDomainObject } from './PointsOfInterestDomainObject';
-import { type InstanceReference, type DmsUniqueIdentifier } from '../../../data-providers';
+import { type DmsUniqueIdentifier } from '../../../data-providers';
+import { type InstanceReference } from '../../../utilities/instanceIds';
 
 export enum PointsOfInterestStatus {
   Default,

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

@@ -1,18 +1,28 @@
 /*!
  * Copyright 2024 Cognite AS
  */
-import { type CogniteClient, type Asset } from '@cognite/sdk';
-import { uniqBy, chunk } from 'lodash';
+import { type CogniteClient, type Asset, type IdEither } from '@cognite/sdk';
+import { uniqBy, chunk, partition } from 'lodash';
 import { isDefined } from '../../utilities/isDefined';
 import { type AnnotationId, type PointCloudAnnotationModel } from './types';
-import { getAssetIdOrExternalIdFromPointCloudAnnotation } from './utils';
+import { getInstanceReferenceFromPointCloudAnnotation } from './utils';
+import { type AssetProperties } from '../../data-providers/core-dm-provider/utils/filters';
+import { type DmsUniqueIdentifier } from '../../data-providers';
+import { type FdmNode, FdmSDK } from '../../data-providers/FdmSDK';
+import {
+  COGNITE_ASSET_VIEW_VERSION_KEY,
+  CORE_DM_SPACE
+} from '../../data-providers/core-dm-provider/dataModels';
+import { type InstanceReference, isIdEither } from '../../utilities/instanceIds';
+import { isSameIdEither } from '../../utilities/instanceIds/equality';
+import { type AssetInstance } from '../../utilities/instances';
 
 export async function fetchPointCloudAnnotationAssets(
   annotations: PointCloudAnnotationModel[],
   sdk: CogniteClient
 ): Promise<Map<AnnotationId, Asset>> {
   const annotationMapping = annotations.map((annotation) => {
-    const assetId = getAssetIdOrExternalIdFromPointCloudAnnotation(annotation);
+    const assetId = getInstanceReferenceFromPointCloudAnnotation(annotation);
     if (assetId === undefined) {
       return undefined;
     }
@@ -28,35 +38,57 @@ export async function fetchPointCloudAnnotationAssets(
     (annotationMapping) => annotationMapping.assetId
   );
   const assetIds = uniqueAnnotationMapping.map((mapping) => mapping.assetId);
-  const assets = await fetchAssetForAssetIds(assetIds, sdk);
+  const assets = await fetchAssetsForAssetIds(assetIds, sdk);
 
   const annotationIdToAssetMap = new Map<number, Asset>();
   assets.forEach((asset) => {
     filteredAnnotationMapping.forEach((mapping) => {
-      if (mapping.assetId === asset.id) {
+      if (isSameIdEither(mapping.assetId, asset)) {
         annotationIdToAssetMap.set(mapping.annotationId, asset);
       }
     });
   });
   return annotationIdToAssetMap;
 }
 
-export async function fetchAssetForAssetIds(
-  assetIds: Array<string | number>,
+export async function fetchAssetsForAssetReferences(
+  assetIds: InstanceReference[],
+  sdk: CogniteClient
+): Promise<AssetInstance[]> {
+  const [classicIds, dmIds] = partition(assetIds, isIdEither);
+
+  return ([] as AssetInstance[])
+    .concat(await fetchAssetsForAssetIds(classicIds, sdk))
+    .concat(await fetchAssetsForDmsIds(dmIds, sdk));
+}
+
+async function fetchAssetsForDmsIds(
+  dmsIds: DmsUniqueIdentifier[],
+  sdk: CogniteClient
+): Promise<Array<FdmNode<AssetProperties>>> {
+  if (dmsIds.length === 0) {
+    return [];
+  }
+
+  const fdmSdk = new FdmSDK(sdk);
+
+  const response = await fdmSdk.getByExternalIds<AssetProperties>(
+    dmsIds.map((id) => ({ ...id, instanceType: 'node' as const }))
+  );
+
+  return response.items.map((item) => ({
+    ...item,
+    properties: item.properties[CORE_DM_SPACE][COGNITE_ASSET_VIEW_VERSION_KEY]
+  }));
+}
+
+export async function fetchAssetsForAssetIds(
+  assetIds: IdEither[],
   sdk: CogniteClient
 ): Promise<Asset[]> {
   const assetsResult = await Promise.all(
     chunk(assetIds, 1000).map(async (assetIdsChunck) => {
-      const retrievedAssets = await sdk.assets.retrieve(
-        assetIdsChunck.map((assetId) => {
-          if (typeof assetId === 'number') {
-            return { id: assetId };
-          } else {
-            return { externalId: assetId };
-          }
-        }),
-        { ignoreUnknownIds: true }
-      );
+      const retrievedAssets = await sdk.assets.retrieve(assetIdsChunck, { ignoreUnknownIds: true });
       return retrievedAssets;
     })
   );

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

@@ -3,7 +3,7 @@
  */
 
 import { type Node3D, type CogniteClient, type CogniteExternalId } from '@cognite/sdk';
-import { type Source, type DmsUniqueIdentifier, type FdmSDK } from '../../data-providers/FdmSDK';
+import { type Source, type FdmSDK, type DmsUniqueIdentifier } from '../../data-providers/FdmSDK';
 import { RevisionFdmNodeCache } from './RevisionFdmNodeCache';
 import {
   type FdmConnectionWithNode,