feat: add support for node data fetching in React Components

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

@@ -5,7 +5,8 @@ import { useRef, type ReactElement, useContext, useState, useEffect } from 'reac
 import {
   type NodeAppearance,
   type Cognite3DViewer,
-  type PointCloudAppearance
+  type PointCloudAppearance,
+  type PointerEventData
 } from '@cognite/reveal';
 import { ModelsLoadingStateContext } from './ModelsLoadingContext';
 import { CadModelContainer, type CadModelStyling } from '../CadModelContainer/CadModelContainer';
@@ -19,11 +20,14 @@ import {
   type AddReveal3DModelOptions,
   type AddImageCollection360Options,
   type TypedReveal3DModel,
-  type AddResourceOptions
+  type AddResourceOptions,
+  type NodeDataResult
 } from './types';
 import { type CogniteExternalId } from '@cognite/sdk';
 import { type FdmAssetMappingsConfig } from '../../hooks/types';
 import { useCalculateModelsStyling } from '../../hooks/useCalculateModelsStyling';
+import { queryMappedData } from './queryMappedData';
+import { useFdmSdk, useSDK } from '../RevealContainer/SDKProvider';
 
 export type FdmAssetStylingGroup = {
   fdmAssetExternalIds: CogniteExternalId[];
@@ -35,24 +39,28 @@ export type Reveal3DResourcesStyling = {
   groups?: FdmAssetStylingGroup[];
 };
 
-export type Reveal3DResourcesProps = {
+export type Reveal3DResourcesProps<NodeType = any> = {
   resources: AddResourceOptions[];
-  fdmAssetMappingConfig?: FdmAssetMappingsConfig;
+  fdmAssetMappingConfig: FdmAssetMappingsConfig;
   styling?: Reveal3DResourcesStyling;
+  onNodeClick?: (node: NodeDataResult<NodeType>) => void;
 };
 
-export const Reveal3DResources = ({
+export const Reveal3DResources = <NodeType = any,>({
   resources,
   styling,
-  fdmAssetMappingConfig
-}: Reveal3DResourcesProps): ReactElement => {
+  fdmAssetMappingConfig,
+  onNodeClick
+}: Reveal3DResourcesProps<NodeType>): ReactElement => {
   const [reveal3DModels, setReveal3DModels] = useState<TypedReveal3DModel[]>([]);
   const [reveal3DModelsStyling, setReveal3DModelsStyling] = useState<
     Array<PointCloudModelStyling | CadModelStyling>
   >([]);
 
   const { setModelsAdded } = useContext(ModelsLoadingStateContext);
   const viewer = useReveal();
+  const fdmSdk = useFdmSdk();
+  const client = useSDK();
   const numModelsLoaded = useRef(0);
 
   useEffect(() => {
@@ -65,6 +73,29 @@ export const Reveal3DResources = ({
     setReveal3DModelsStyling(modelsStyling);
   }, [modelsStyling]);
 
+  useEffect(() => {
+    const callback = (event: PointerEventData): void => {
+      void (async (event: PointerEventData): Promise<void> => {
+        const data = await queryMappedData<NodeType>(
+          viewer,
+          client,
+          fdmSdk,
+          fdmAssetMappingConfig,
+          event
+        );
+        if (onNodeClick !== undefined && data !== undefined) {
+          onNodeClick?.(data);
+        }
+      })(event);
+    };
+
+    viewer.on('click', callback);
+
+    return () => {
+      viewer.off('click', callback);
+    };
+  }, [viewer, client, fdmSdk, fdmAssetMappingConfig, onNodeClick]);
+
   const image360CollectionAddOptions = resources.filter(
     (resource): resource is AddImageCollection360Options =>
       (resource as AddImageCollection360Options).siteId !== undefined

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

@@ -0,0 +1,169 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type Cognite3DViewer, type PointerEventData, type CogniteCadModel } from '@cognite/reveal';
+import { type CogniteInternalId, type CogniteClient } from '@cognite/sdk';
+import {
+  type EdgeItem,
+  type InspectResultList,
+  type FdmSDK,
+  type DmsUniqueIdentifier,
+  type Source
+} from '../../utilities/FdmSDK';
+import { type FdmAssetMappingsConfig } from '../../hooks/types';
+import { type NodeDataResult } from './types';
+
+async function getAncestorNodeIdsForTreeIndex(
+  client: CogniteClient,
+  model: CogniteCadModel,
+  treeIndex: number
+): Promise<CogniteInternalId[]> {
+  const nodeId = await model.mapTreeIndexToNodeId(treeIndex);
+
+  const ancestorNodes = await client.revisions3D.list3DNodeAncestors(
+    model.modelId,
+    model.revisionId,
+    nodeId
+  );
+
+  return ancestorNodes.items.map((n) => n.id);
+}
+
+async function getMappingEdges(
+  fdmClient: FdmSDK,
+  fdmConfig: FdmAssetMappingsConfig,
+  model: CogniteCadModel,
+  ancestorIds: CogniteInternalId[]
+): Promise<{ edges: Array<EdgeItem<Record<string, any>>> }> {
+  const filter = {
+    and: [
+      {
+        equals: {
+          property: ['edge', 'endNode'],
+          value: {
+            space: fdmConfig.global3dSpace,
+            externalId: `model_3d_${model.modelId}`
+          }
+        }
+      },
+      {
+        equals: {
+          property: [
+            fdmConfig.source.space,
+            `${fdmConfig.source.externalId}/${fdmConfig.source.version}`,
+            'revisionId'
+          ],
+          value: model.revisionId
+        }
+      },
+      {
+        in: {
+          property: [
+            fdmConfig.source.space,
+            `${fdmConfig.source.externalId}/${fdmConfig.source.version}`,
+            'revisionNodeId'
+          ],
+          values: ancestorIds
+        }
+      }
+    ]
+  };
+
+  return await fdmClient.filterAllInstances(filter, 'edge', fdmConfig.source);
+}
+
+async function inspectNode(
+  fdmClient: FdmSDK,
+  dataNode: DmsUniqueIdentifier
+): Promise<InspectResultList> {
+  const inspectionResult = await fdmClient.inspectInstances({
+    inspectionOperations: { involvedViewsAndContainers: {} },
+    items: [
+      {
+        instanceType: 'node',
+        externalId: dataNode.externalId,
+        space: dataNode.space
+      }
+    ]
+  });
+
+  return inspectionResult;
+}
+
+async function filterNodeData<NodeType>(
+  fdmClient: FdmSDK,
+  dataNode: DmsUniqueIdentifier,
+  dataView: Source
+): Promise<NodeType | undefined> {
+  if (dataView === undefined) {
+    return undefined;
+  }
+
+  const dataQueryResult = await fdmClient.filterAllInstances(
+    {
+      and: [
+        { equals: { property: ['node', 'space'], value: dataNode.space } },
+        {
+          equals: {
+            property: ['node', 'externalId'],
+            value: dataNode.externalId
+          }
+        }
+      ]
+    },
+    'node',
+    dataView
+  );
+
+  return dataQueryResult.edges[0]?.properties[dataView.space]?.[
+    `${dataView.externalId}/${dataView.version}`
+  ];
+}
+
+export async function queryMappedData<NodeType>(
+  viewer: Cognite3DViewer,
+  cdfClient: CogniteClient,
+  fdmClient: FdmSDK,
+  fdmConfig: FdmAssetMappingsConfig,
+  clickEvent: PointerEventData
+): Promise<NodeDataResult<NodeType> | undefined> {
+  const intersection = await viewer.getIntersectionFromPixel(
+    clickEvent.offsetX,
+    clickEvent.offsetY
+  );
+
+  if (intersection === null || intersection.type !== 'cad') {
+    return;
+  }
+
+  const cadIntersection = intersection;
+  const model = cadIntersection.model;
+
+  const ancestorIds = await getAncestorNodeIdsForTreeIndex(
+    cdfClient,
+    model,
+    cadIntersection.treeIndex
+  );
+
+  const mappings = await getMappingEdges(fdmClient, fdmConfig, model, ancestorIds);
+
+  if (mappings.edges.length === 0) {
+    return;
+  }
+
+  const dataNode = mappings.edges[0].startNode;
+
+  const inspectionResult = await inspectNode(fdmClient, dataNode);
+
+  const dataView =
+    inspectionResult.items[0]?.inspectionResults.involvedViewsAndContainers?.views[0];
+
+  const nodeData = await filterNodeData<NodeType>(fdmClient, dataNode, dataView);
+
+  if (nodeData === undefined) {
+    return undefined;
+  }
+
+  return { data: nodeData as NodeType, view: dataView };
+}

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

@@ -4,6 +4,7 @@
 
 import { type AddModelOptions, type SupportedModelTypes } from '@cognite/reveal';
 import { type Matrix4 } from 'three';
+import { type Source } from '../../utilities/FdmSDK';
 
 export type AddImageCollection360Options = {
   siteId: string;
@@ -13,3 +14,8 @@ export type AddResourceOptions = AddReveal3DModelOptions | AddImageCollection360
 
 export type AddReveal3DModelOptions = AddModelOptions & { transform?: Matrix4 };
 export type TypedReveal3DModel = AddReveal3DModelOptions & { type: SupportedModelTypes | '' };
+
+export type NodeDataResult<NodeType> = {
+  data: NodeType;
+  view: Source;
+};

react-components/src/hooks/types.ts

@@ -12,6 +12,10 @@ export type FdmAssetMappingsConfig = {
    * FDM space where model assets are located
    */
   assetFdmSpace: string;
+  /*
+   * Global FDM 3D space
+   */
+  global3dSpace: string;
 };
 
 export type ThreeDModelMappings = {

react-components/src/index.ts

@@ -28,8 +28,10 @@ export { CameraController } from './components/CameraController/CameraController
 export type {
   AddImageCollection360Options,
   AddResourceOptions,
-  AddReveal3DModelOptions
+  AddReveal3DModelOptions,
+  NodeDataResult
 } from './components/Reveal3DResources/types';
+export type { Source } from './utilities/FdmSDK';
 export { RevealToolbar } from './components/RevealToolbar/RevealToolbar';
 export { useFdmAssetMappings } from './hooks/useFdmAssetMappings';
 export { type FdmAssetMappingsConfig } from './hooks/types';

react-components/src/utilities/FdmSDK.ts

@@ -26,17 +26,46 @@ export type EdgeItem<PropertiesType> = {
   properties: PropertiesType;
 };
 
+export type InspectFilter = {
+  inspectionOperations: { involvedViewsAndContainers: Record<never, never> };
+  items: Array<{ instanceType: InstanceType; externalId: string; space: string }>;
+};
+
+export type InspectResult = {
+  involvedViewsAndContainers: {
+    containers: Array<{
+      type: 'container';
+      space: string;
+      externalId: string;
+    }>;
+    views: Source[];
+  };
+};
+
+export type InspectResultList = {
+  items: Array<{
+    instanceType: InstanceType;
+    externalId: string;
+    space: string;
+    inspectionResults: InspectResult;
+  }>;
+};
+
 export class FdmSDK {
   private readonly _sdk: CogniteClient;
   private readonly _byIdsEndpoint: string;
   private readonly _listEndpoint: string;
+  private readonly _inspectEndpoint: string;
 
   constructor(sdk: CogniteClient) {
     const baseUrl = sdk.getBaseUrl();
     const project = sdk.project;
 
-    this._listEndpoint = `${baseUrl}/api/v1/projects/${project}/models/instances/list`;
-    this._byIdsEndpoint = `${baseUrl}/api/v1/projects/${project}/models/instances/byids`;
+    const instancesBaseUrl = `${baseUrl}/api/v1/projects/${project}/models/instances`;
+
+    this._listEndpoint = `${instancesBaseUrl}/list`;
+    this._byIdsEndpoint = `${instancesBaseUrl}/byids`;
+    this._inspectEndpoint = `${instancesBaseUrl}/inspect`;
 
     this._sdk = sdk;
   }
@@ -64,4 +93,39 @@ export class FdmSDK {
     }
     throw new Error(`Failed to fetch instances. Status: ${result.status}`);
   }
+
+  public async filterAllInstances<PropertiesType = Record<string, any>>(
+    filter: any,
+    instanceType: InstanceType,
+    source?: Source
+  ): Promise<{ edges: Array<EdgeItem<PropertiesType>> }> {
+    let mappings = await this.filterInstances<PropertiesType>(filter, instanceType, source);
+
+    while (mappings.nextCursor !== undefined) {
+      const nextMappings = await this.filterInstances<PropertiesType>(
+        filter,
+        instanceType,
+        source,
+        mappings.nextCursor
+      );
+
+      mappings = {
+        edges: [...mappings.edges, ...nextMappings.edges],
+        nextCursor: nextMappings.nextCursor
+      };
+    }
+
+    return { edges: mappings.edges };
+  }
+
+  public async inspectInstances(inspectFilter: InspectFilter): Promise<InspectResultList> {
+    const data: any = inspectFilter;
+    const result = await this._sdk.post(this._inspectEndpoint, { data });
+
+    if (result.status === 200) {
+      return result.data as InspectResultList;
+    }
+
+    throw new Error(`Failed to fetch instances. Status: ${result.status}`);
+  }
 }