feat(react-components): clicked node hook

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

@@ -2,7 +2,11 @@
  * Copyright 2023 Cognite AS
  */
 import { useRef, type ReactElement, useContext, useState, useEffect } from 'react';
-import { type NodeAppearance, type Cognite3DViewer, type PointerEventData } from '@cognite/reveal';
+import {
+  type NodeAppearance,
+  type Cognite3DViewer,
+  type PointCloudAppearance
+} from '@cognite/reveal';
 import { ModelsLoadingStateContext } from './ModelsLoadingContext';
 import { CadModelContainer, type CadModelStyling } from '../CadModelContainer/CadModelContainer';
 import {
@@ -22,6 +26,7 @@ import { queryMappedData } from './queryMappedData';
 import { useFdmSdk, useSDK } from '../RevealContainer/SDKProvider';
 import { useCalculateModelsStyling } from '../../hooks/useCalculateModelsStyling';
 import { type DmsUniqueIdentifier } from '../../utilities/FdmSDK';
+import { useClickedNodeData } from '../..';
 
 export type FdmAssetStylingGroup = {
   fdmAssetExternalIds: DmsUniqueIdentifier[];
@@ -43,29 +48,20 @@ export const Reveal3DResources = ({
 
   const { setModelsAdded } = useContext(ModelsLoadingStateContext);
   const viewer = useReveal();
-  const fdmSdk = useFdmSdk();
-  const client = useSDK();
   const numModelsLoaded = useRef(0);
 
   useEffect(() => {
     getTypedModels(resources, viewer).then(setReveal3DModels).catch(console.error);
   }, [resources, viewer]);
 
   const reveal3DModelsStyling = useCalculateModelsStyling(reveal3DModels, instanceStyling ?? []);
+  const clickedNodeData = useClickedNodeData();
 
   useEffect(() => {
-    const callback = (event: PointerEventData): void => {
-      if (onNodeClick === undefined) return;
-      const data = queryMappedData(viewer, client, fdmSdk, event);
-      onNodeClick(data);
-    };
-
-    viewer.on('click', callback);
-
-    return () => {
-      viewer.off('click', callback);
-    };
-  }, [viewer, client, fdmSdk, onNodeClick]);
+    if (clickedNodeData !== undefined) {
+      onNodeClick?.(Promise.resolve(clickedNodeData));
+    }
+  }, [clickedNodeData, onNodeClick]);
 
   const image360CollectionAddOptions = resources.filter(
     (resource): resource is AddImageCollection360Options =>

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

@@ -2,12 +2,8 @@
  * Copyright 2023 Cognite AS
  */
 
-import {
-  type AddModelOptions,
-  type SupportedModelTypes,
-  type CadIntersection,
-  type NodeAppearance
-} from '@cognite/reveal';
+import { NodeAppearance, type AddModelOptions, type SupportedModelTypes } from '@cognite/reveal';
+
 import { type Matrix4 } from 'three';
 import { type Source } from '../../utilities/FdmSDK';
 import { type Node3D } from '@cognite/sdk/dist/src';
@@ -29,5 +25,4 @@ export type NodeDataResult = {
   nodeExternalId: string;
   view: Source;
   cadNode: Node3D;
-  intersection: CadIntersection;
 };

react-components/src/hooks/useClickedNode.tsx

@@ -0,0 +1,45 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type CadIntersection, type PointerEventData } from '@cognite/reveal';
+import { useReveal, type NodeDataResult } from '../';
+import { useEffect, useState } from 'react';
+import { useNodeMappedData } from './useNodeMappedData';
+
+export type ClickedNodeData = NodeDataResult & {
+  intersection: CadIntersection;
+};
+
+export const useClickedNodeData = (): ClickedNodeData | undefined => {
+  const viewer = useReveal();
+
+  const [cadIntersection, setCadIntersection] = useState<CadIntersection | undefined>(undefined);
+
+  useEffect(() => {
+    const callback = (event: PointerEventData): void => {
+      void (async () => {
+        const intersection = await viewer.getIntersectionFromPixel(event.offsetX, event.offsetY);
+
+        if (intersection === null || intersection.type !== 'cad') {
+          return;
+        }
+
+        setCadIntersection(intersection);
+      })();
+    };
+
+    viewer.on('click', callback);
+
+    return () => {
+      viewer.off('click', callback);
+    };
+  }, [viewer]);
+
+  const nodeData = useNodeMappedData(cadIntersection?.treeIndex, cadIntersection?.model);
+
+  if (nodeData === undefined || cadIntersection === undefined) {
+    return undefined;
+  }
+  return { intersection: cadIntersection, ...nodeData };
+};

react-components/src/hooks/useNodeMappedData.tsx

@@ -0,0 +1,155 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { useQuery } from '@tanstack/react-query';
+
+import { type CogniteCadModel } from '@cognite/reveal';
+import { CogniteClient, type CogniteInternalId, type Node3D } from '@cognite/sdk';
+import { type NodeDataResult } from '../components/Reveal3DResources/types';
+import { useFdmSdk, useSDK } from '../components/RevealContainer/SDKProvider';
+
+import assert from 'assert';
+import {
+  FdmSDK,
+  type DmsUniqueIdentifier,
+  type EdgeItem,
+  type InspectResultList
+} from '../utilities/FdmSDK';
+import { INSTANCE_SPACE_3D_DATA, SYSTEM_3D_EDGE_SOURCE, SYSTEM_SPACE_3D_SCHEMA } from '../utilities/globalDataModels';
+
+export const useNodeMappedData = (
+  treeIndex: number | undefined,
+  model: CogniteCadModel | undefined
+): NodeDataResult | undefined => {
+
+  const cogniteClient = useSDK();
+  const fdmClient = useFdmSdk();
+
+  const mappedDataHashKey = `${model?.modelId}-${model?.revisionId}-${treeIndex}`;
+
+  const queryResult = useQuery(
+    ['cdf', '3d', mappedDataHashKey],
+    async () => {
+
+      if (model === undefined || treeIndex === undefined) {
+        return null;
+      }
+
+      const ancestors = await fetchAncestorNodesForTreeIndex(model, treeIndex, cogniteClient);
+
+      if (ancestors.length === 0) {
+        return null;
+      }
+
+      const mappings = await fetchNodeMappingEdges(model, ancestors.map((n) => n.id), fdmClient);
+
+      const selectedEdge =
+        mappings !== undefined && mappings.edges.length > 0 ? mappings.edges[0] : undefined;
+
+      const selectedNodeId = selectedEdge?.properties.revisionNodeId;
+
+      const dataNode = selectedEdge?.startNode;
+
+      if (dataNode === undefined) {
+        return null;
+      }
+
+      const inspectionResult = await inspectNode(dataNode, fdmClient);
+
+      const dataView =
+        inspectionResult?.items[0]?.inspectionResults.involvedViewsAndContainers?.views[0];
+
+      if (dataView === undefined) {
+        return null;
+      }
+
+      const selectedNode = ancestors.find((n) => n.id === selectedNodeId)!;
+
+      return {
+        nodeExternalId: dataNode.externalId,
+        view: dataView,
+        cadNode: selectedNode
+      };
+    });
+
+  return queryResult.data ?? undefined;
+};
+
+async function fetchAncestorNodesForTreeIndex(
+  model: CogniteCadModel,
+  treeIndex: number,
+  cogniteClient: CogniteClient,
+): Promise<Node3D[]> {
+
+  const nodeId = await model.mapTreeIndexToNodeId(treeIndex);
+
+  const ancestorNodes = await cogniteClient.revisions3D.list3DNodeAncestors(
+    model.modelId,
+    model.revisionId,
+    nodeId
+  );
+
+  return ancestorNodes.items;
+}
+
+async function fetchNodeMappingEdges(
+  model: CogniteCadModel,
+  ancestorIds: CogniteInternalId[],
+  fdmClient: FdmSDK
+): Promise<{ edges: Array<EdgeItem<Record<string, any>>> } | undefined> {
+
+  assert(ancestorIds.length !== 0);
+
+  const filter = {
+    and: [
+      {
+        equals: {
+          property: ['edge', 'endNode'],
+          value: {
+            space: INSTANCE_SPACE_3D_DATA,
+            externalId: `${model.modelId}`
+          }
+        }
+      },
+      {
+        equals: {
+          property: [
+            SYSTEM_SPACE_3D_SCHEMA,
+            `${SYSTEM_3D_EDGE_SOURCE.externalId}/${SYSTEM_3D_EDGE_SOURCE.version}`,
+            'revisionId'
+          ],
+          value: model.revisionId
+        }
+      },
+      {
+        in: {
+          property: [
+            SYSTEM_SPACE_3D_SCHEMA,
+            `${SYSTEM_3D_EDGE_SOURCE.externalId}/${SYSTEM_3D_EDGE_SOURCE.version}`,
+            'revisionNodeId'
+          ],
+          values: ancestorIds
+        }
+      }
+    ]
+  };
+
+  return fdmClient.filterAllInstances(filter, 'edge', SYSTEM_3D_EDGE_SOURCE);
+}
+
+async function inspectNode(dataNode: DmsUniqueIdentifier, fdmClient: FdmSDK): Promise<InspectResultList | undefined> {
+
+  const inspectionResult = await fdmClient.inspectInstances({
+    inspectionOperations: { involvedViewsAndContainers: {} },
+    items: [
+      {
+        instanceType: 'node',
+        externalId: dataNode.externalId,
+        space: dataNode.space
+      }
+    ]
+  });
+
+  return inspectionResult;
+}

react-components/src/index.ts

@@ -19,6 +19,7 @@ export { RevealKeepAlive } from './components/RevealKeepAlive/RevealKeepAlive';
 export { useReveal } from './components/RevealContainer/RevealContext';
 export { use3DModelName } from './hooks/use3DModelName';
 export { useFdmAssetMappings } from './hooks/useFdmAssetMappings';
+export { useClickedNodeData } from './hooks/useClickedNode';
 
 // Higher order components
 export { withSuppressRevealEvents } from './higher-order-components/withSuppressRevealEvents';

react-components/stories/HighlightNode.stories.tsx

@@ -7,14 +7,14 @@ import {
   RevealContainer,
   RevealToolbar,
   Reveal3DResources,
-  type NodeDataResult,
   type AddResourceOptions,
   CameraController,
-  type FdmAssetStylingGroup
+  useClickedNodeData,
+  FdmAssetStylingGroup,
 } from '../src';
 import { Color } from 'three';
-import { type ReactElement, useState, useCallback, useRef } from 'react';
-import { DefaultNodeAppearance, TreeIndexNodeCollection } from '@cognite/reveal';
+import { type ReactElement, useState, useEffect, useRef } from 'react';
+import { DefaultNodeAppearance } from '@cognite/reveal';
 import { createSdkByUrlToken } from './utilities/createSdkByUrlToken';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
@@ -51,13 +51,13 @@ export const Main: Story = {
       <RevealContainer sdk={sdk} color={new Color(0x4a4a4a)}>
         <StoryContent resources={resources} />
         <CameraController
-          initialFitCamera={{
-            to: 'allModels'
-          }}
-          cameraControlsOptions={{
-            changeCameraTargetOnClick: true,
-            mouseWheelAction: 'zoomToCursor'
-          }}
+      initialFitCamera={{
+        to: 'allModels'
+      }}
+      cameraControlsOptions={{
+        changeCameraTargetOnClick: true,
+        mouseWheelAction: 'zoomToCursor'
+      }}
         />
         <ReactQueryDevtools />
       </RevealContainer>
@@ -68,21 +68,11 @@ export const Main: Story = {
 const StoryContent = ({ resources }: { resources: AddResourceOptions[] }): ReactElement => {
   const [highlightedId, setHighlightedId] = useState<string | undefined>(undefined);
   const stylingGroupsRef = useRef<FdmAssetStylingGroup[]>([]);
-  const callback = async (nodeData: Promise<NodeDataResult | undefined>): Promise<void> => {
-    const nodeDataResult = await nodeData;
-    setHighlightedId(nodeDataResult?.nodeExternalId);
+  const nodeData = useClickedNodeData();
 
-    if (nodeDataResult === undefined) return;
-
-    nodeDataResult.intersection.model.assignStyledNodeCollection(
-      new TreeIndexNodeCollection([nodeDataResult.cadNode.treeIndex]),
-      DefaultNodeAppearance.Highlighted
-    );
-  };
-
-  const onClick = useCallback((nodeData: Promise<NodeDataResult | undefined>) => {
-    void callback(nodeData);
-  }, []);
+  useEffect(() => {
+    setHighlightedId(nodeData?.nodeExternalId);
+  }, [nodeData?.nodeExternalId]);
 
   if (stylingGroupsRef.current.length === 1) {
     stylingGroupsRef.current.pop();
@@ -98,11 +88,10 @@ const StoryContent = ({ resources }: { resources: AddResourceOptions[] }): React
   return (
     <>
       <Reveal3DResources
-        resources={resources}
-        instanceStyling={stylingGroupsRef.current}
-        onNodeClick={onClick}
+    resources={resources}
+    instanceStyling={stylingGroupsRef.current}
       />
       <RevealToolbar />
-    </>
+      </>
   );
 };