fix(react-components): use "any intersection" in useClickedNode (#4538)

* fix(react-components): use "any intersection" in useClickedNode * chore: rewrite variable assignments slightly * chore: lint fix
cognitedata · May 28, 2024 · 2856f3a · 2856f3a
1 parent f437f76
commit 2856f3a
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 56 deletions.
diff --git a/react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx b/react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx
@@ -13,14 +13,9 @@ import { type UseQueryResult, useQuery } from '@tanstack/react-query';
 import { type CogniteInternalId } from '@cognite/sdk';
 import { useSDK } from '../RevealCanvas/SDKProvider';
 import { useRevealKeepAlive } from '../RevealKeepAlive/RevealKeepAliveContext';
-import {
-  type ModelRevisionId,
-  type ModelId,
-  type RevisionId,
-  type TreeIndex,
-  type ModelRevisionAssetNodesResult
-} from './types';
+import { type ModelRevisionId, type ModelRevisionAssetNodesResult } from './types';
 import { fetchAncestorNodesForTreeIndex } from './requests';
+import { type AnyIntersection } from '@cognite/reveal';
 
 export type AssetMappingCacheContent = {
   cache: AssetMappingCache;
@@ -101,13 +96,17 @@ export const useNodesForAssets = (
 };
 
 export const useAssetMappingForTreeIndex = (
-  modelId: ModelId | undefined,
-  revisionId: RevisionId | undefined,
-  treeIndex: TreeIndex | undefined
+  intersection: AnyIntersection | undefined
 ): UseQueryResult<NodeAssetMappingResult> => {
   const assetMappingCache = useAssetMappingCache();
   const cdfClient = useSDK();
 
+  const isCadModel = intersection?.type === 'cad';
+
+  const [modelId, revisionId, treeIndex] = isCadModel
+    ? [intersection.model.modelId, intersection.model.revisionId, intersection.treeIndex]
+    : [undefined, undefined, undefined];
+
   return useQuery({
     queryKey: [
       'reveal',

diff --git a/react-components/src/components/CacheProvider/NodeCacheProvider.tsx b/react-components/src/components/CacheProvider/NodeCacheProvider.tsx
@@ -14,6 +14,7 @@ import { type TypedReveal3DModel } from '../Reveal3DResources/types';
 import { type ThreeDModelFdmMappings } from '../../hooks/types';
 import { DEFAULT_QUERY_STALE_TIME } from '../../utilities/constants';
 import { useRevealKeepAlive } from '../RevealKeepAlive/RevealKeepAliveContext';
+import { type AnyIntersection } from '@cognite/reveal';
 
 export type FdmNodeCacheContent = {
   cache: FdmNodeCache;
@@ -52,17 +53,17 @@ export const useMappedEdgesForRevisions = (
 };
 
 export const useFdm3dNodeDataPromises = (
-  modelId: number | undefined,
-  revisionId: number | undefined,
-  treeIndex: number | undefined
+  intersection: AnyIntersection | undefined
 ): UseQueryResult<FdmNodeDataPromises> => {
   const content = useFdmNodeCache();
 
-  const enableQuery =
-    content !== undefined &&
-    modelId !== undefined &&
-    revisionId !== undefined &&
-    treeIndex !== undefined;
+  const isCadModel = intersection?.type === 'cad';
+
+  const [modelId, revisionId, treeIndex] = isCadModel
+    ? [intersection.model.modelId, intersection.model.revisionId, intersection.treeIndex]
+    : [undefined, undefined, undefined];
+
+  const enableQuery = content !== undefined && isCadModel && treeIndex !== undefined;
 
   const result = useQuery({
     queryKey: [

diff --git a/react-components/src/components/CacheProvider/PointCloudAnnotationCacheProvider.tsx b/react-components/src/components/CacheProvider/PointCloudAnnotationCacheProvider.tsx
@@ -14,6 +14,7 @@ import { type PointCloudAnnotationMappedAssetData } from '../../hooks/types';
 import { EMPTY_ARRAY } from '../../utilities/constants';
 import { isDefined } from '../../utilities/isDefined';
 import { type AnnotationId } from './types';
+import { type AnyIntersection } from '@cognite/reveal';
 
 export type PointCloudAnnotationCacheContextContent = {
   cache: PointCloudAnnotationCache;
@@ -134,12 +135,19 @@ export const usePointCloudAnnotationMappingsForAssetIds = (
 };
 
 export const usePointCloudAnnotationMappingForAssetId = (
-  modelId: number | undefined,
-  revisionId: number | undefined,
-  assetId: string | number | undefined
+  intersection: AnyIntersection | undefined
 ): UseQueryResult<PointCloudAnnotationMappedAssetData[]> => {
   const pointCloudAnnotationCache = usePointCloudAnnotationCache();
 
+  const isPointCloudIntersection = intersection?.type === 'pointcloud';
+  const [modelId, revisionId, assetId] = isPointCloudIntersection
+    ? [
+        intersection.model.modelId,
+        intersection.model.revisionId,
+        intersection.assetRef?.externalId ?? intersection.assetRef?.id
+      ]
+    : [undefined, undefined, undefined];
+
   return useQuery({
     queryKey: [
       'reveal',
@@ -161,7 +169,7 @@ export const usePointCloudAnnotationMappingForAssetId = (
       return result ?? EMPTY_ARRAY;
     },
     staleTime: Infinity,
-    enabled: assetId !== undefined
+    enabled: isPointCloudIntersection && assetId !== undefined
   });
 };
 

diff --git a/react-components/src/hooks/useClickedNode.tsx b/react-components/src/hooks/useClickedNode.tsx
@@ -3,10 +3,9 @@
  */
 
 import {
-  type PointCloudIntersection,
-  type CadIntersection,
   type PointerEventData,
-  type Image360AnnotationIntersection
+  type Image360AnnotationIntersection,
+  type AnyIntersection
 } from '@cognite/reveal';
 import { useEffect, useState } from 'react';
 import { useFdm3dNodeDataPromises } from '../components/CacheProvider/NodeCacheProvider';
@@ -16,7 +15,7 @@ import { useAssetMappingForTreeIndex } from '../components/CacheProvider/AssetMa
 import { type NodeAssetMappingResult } from '../components/CacheProvider/AssetMappingCache';
 import { usePointCloudAnnotationMappingForAssetId } from '../components/CacheProvider/PointCloudAnnotationCacheProvider';
 import { type PointCloudAnnotationMappedAssetData } from './types';
-import { MOUSE } from 'three';
+import { MOUSE, Vector2 } from 'three';
 import { type DmsUniqueIdentifier, type Source } from '../utilities/FdmSDK';
 import { useReveal } from '../components/RevealCanvas/ViewerContext';
 
@@ -35,15 +34,13 @@ export type ClickedNodeData = {
   fdmResult?: FdmNodeDataResult;
   assetMappingResult?: AssetMappingDataResult;
   pointCloudAnnotationMappingResult?: PointCloudAnnotationMappedAssetData[];
-  intersection: CadIntersection | PointCloudIntersection | Image360AnnotationIntersection;
+  intersection: AnyIntersection | Image360AnnotationIntersection;
 };
 
 export const useClickedNodeData = (): ClickedNodeData | undefined => {
   const viewer = useReveal();
 
-  const [intersection, setIntersection] = useState<
-    CadIntersection | PointCloudIntersection | undefined
-  >(undefined);
+  const [intersection, setIntersection] = useState<AnyIntersection | undefined>(undefined);
 
   const [annotationIntersection, setAnnotationIntersection] = useState<
     Image360AnnotationIntersection | undefined
@@ -55,13 +52,17 @@ export const useClickedNodeData = (): ClickedNodeData | undefined => {
         if (event.button !== MOUSE.LEFT) {
           return;
         }
-        const intersection = await viewer.getIntersectionFromPixel(event.offsetX, event.offsetY);
+
+        const intersection = await viewer.getAnyIntersectionFromPixel(
+          new Vector2(event.offsetX, event.offsetY)
+        );
+
         const annotationIntersection = await viewer.get360AnnotationIntersectionFromPixel(
           event.offsetX,
           event.offsetY
         );
 
-        if (intersection?.type === 'cad' || intersection?.type === 'pointcloud') {
+        if (intersection !== undefined) {
           setIntersection(intersection);
         } else {
           setIntersection(undefined);
@@ -82,25 +83,12 @@ export const useClickedNodeData = (): ClickedNodeData | undefined => {
     };
   }, [viewer]);
 
-  const nodeDataPromises = useFdm3dNodeDataPromises(
-    intersection?.model.modelId,
-    intersection?.model.revisionId,
-    intersection?.type === 'cad' ? intersection.treeIndex : undefined
-  ).data;
-
-  const assetMappingResult = useAssetMappingForTreeIndex(
-    intersection?.model.modelId,
-    intersection?.model.revisionId,
-    intersection?.type === 'cad' ? intersection.treeIndex : undefined
-  ).data;
-
-  const pointCloudAssetMappingResult = usePointCloudAnnotationMappingForAssetId(
-    intersection?.model.modelId,
-    intersection?.model.revisionId,
-    intersection?.type === 'pointcloud'
-      ? intersection.assetRef?.externalId ?? intersection.assetRef?.id
-      : undefined
-  ).data;
+  const { data: nodeDataPromises } = useFdm3dNodeDataPromises(intersection);
+
+  const { data: assetMappingResult } = useAssetMappingForTreeIndex(intersection);
+
+  const { data: pointCloudAssetMappingResult } =
+    usePointCloudAnnotationMappingForAssetId(intersection);
 
   return useCombinedClickedNodeData(
     nodeDataPromises,
@@ -114,11 +102,7 @@ const useCombinedClickedNodeData = (
   fdmPromises: FdmNodeDataPromises | undefined,
   assetMappings: NodeAssetMappingResult | undefined,
   pointCloudAssetMappings: PointCloudAnnotationMappedAssetData[] | undefined,
-  intersection:
-    | CadIntersection
-    | PointCloudIntersection
-    | Image360AnnotationIntersection
-    | undefined
+  intersection: AnyIntersection | Image360AnnotationIntersection | undefined
 ): ClickedNodeData | undefined => {
   const [clickedNodeData, setClickedNodeData] = useState<ClickedNodeData | undefined>();
   const fdmData = useFdmData(fdmPromises);