From e3960d261ef92930d9f75ae978ae160650a2dfea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Mon, 27 May 2024 16:57:58 +0200 Subject: [PATCH 1/3] fix(react-components): use "any intersection" in useClickedNode --- .../AssetMappingCacheProvider.tsx | 11 +++-- .../CacheProvider/NodeCacheProvider.tsx | 17 ++++--- .../PointCloudAnnotationCacheProvider.tsx | 16 ++++-- react-components/src/hooks/useClickedNode.tsx | 49 +++++++------------ 4 files changed, 46 insertions(+), 47 deletions(-) diff --git a/react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx b/react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx index bcfa05301ff..bbdd58df6b1 100644 --- a/react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx +++ b/react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx @@ -21,6 +21,7 @@ import { type ModelRevisionAssetNodesResult } from './types'; import { fetchAncestorNodesForTreeIndex } from './requests'; +import { AnyIntersection } from '@cognite/reveal'; export type AssetMappingCacheContent = { cache: AssetMappingCache; @@ -101,13 +102,17 @@ export const useNodesForAssets = ( }; export const useAssetMappingForTreeIndex = ( - modelId: ModelId | undefined, - revisionId: RevisionId | undefined, - treeIndex: TreeIndex | undefined + intersection: AnyIntersection | undefined ): UseQueryResult => { 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 index 95728e1b34c..2c7cf2f6b20 100644 --- 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 { 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 => { 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 index d4980930f3e..76b0e4b8f74 100644 --- 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 { 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 => { 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 index ca606af88db..9f1bfe08d9a 100644 --- a/react-components/src/hooks/useClickedNode.tsx +++ b/react-components/src/hooks/useClickedNode.tsx @@ -6,7 +6,8 @@ import { type PointCloudIntersection, type CadIntersection, type PointerEventData, - type Image360AnnotationIntersection + type Image360AnnotationIntersection, + AnyIntersection } from '@cognite/reveal'; import { useEffect, useState } from 'react'; import { useFdm3dNodeDataPromises } from '../components/CacheProvider/NodeCacheProvider'; @@ -16,7 +17,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 +36,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(undefined); const [annotationIntersection, setAnnotationIntersection] = useState< Image360AnnotationIntersection | undefined @@ -55,13 +54,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 +85,11 @@ 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 nodeDataPromises = useFdm3dNodeDataPromises(intersection).data; + + const assetMappingResult = useAssetMappingForTreeIndex(intersection).data; + + const pointCloudAssetMappingResult = usePointCloudAnnotationMappingForAssetId(intersection).data; return useCombinedClickedNodeData( nodeDataPromises, @@ -114,11 +103,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(); const fdmData = useFdmData(fdmPromises); From 49883daba173dd46e8695eda4ed9ba3e63895c51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Tue, 28 May 2024 09:48:17 +0200 Subject: [PATCH 2/3] chore: rewrite variable assignments slightly --- react-components/src/hooks/useClickedNode.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/react-components/src/hooks/useClickedNode.tsx b/react-components/src/hooks/useClickedNode.tsx index 9f1bfe08d9a..12674e0282b 100644 --- a/react-components/src/hooks/useClickedNode.tsx +++ b/react-components/src/hooks/useClickedNode.tsx @@ -3,8 +3,6 @@ */ import { - type PointCloudIntersection, - type CadIntersection, type PointerEventData, type Image360AnnotationIntersection, AnyIntersection @@ -85,11 +83,12 @@ export const useClickedNodeData = (): ClickedNodeData | undefined => { }; }, [viewer]); - const nodeDataPromises = useFdm3dNodeDataPromises(intersection).data; + const { data: nodeDataPromises } = useFdm3dNodeDataPromises(intersection); - const assetMappingResult = useAssetMappingForTreeIndex(intersection).data; + const { data: assetMappingResult } = useAssetMappingForTreeIndex(intersection); - const pointCloudAssetMappingResult = usePointCloudAnnotationMappingForAssetId(intersection).data; + const { data: pointCloudAssetMappingResult } = + usePointCloudAnnotationMappingForAssetId(intersection); return useCombinedClickedNodeData( nodeDataPromises, From 84790ba4272b3f47f74245923da62c700a86f629 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Tue, 28 May 2024 09:49:41 +0200 Subject: [PATCH 3/3] chore: lint fix --- .../CacheProvider/AssetMappingCacheProvider.tsx | 10 ++-------- .../src/components/CacheProvider/NodeCacheProvider.tsx | 2 +- .../PointCloudAnnotationCacheProvider.tsx | 2 +- react-components/src/hooks/useClickedNode.tsx | 2 +- 4 files changed, 5 insertions(+), 11 deletions(-) diff --git a/react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx b/react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx index bbdd58df6b1..364d5621296 100644 --- a/react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx +++ b/react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx @@ -13,15 +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 { AnyIntersection } from '@cognite/reveal'; +import { type AnyIntersection } from '@cognite/reveal'; export type AssetMappingCacheContent = { cache: AssetMappingCache; diff --git a/react-components/src/components/CacheProvider/NodeCacheProvider.tsx b/react-components/src/components/CacheProvider/NodeCacheProvider.tsx index 2c7cf2f6b20..4fea3358a70 100644 --- a/react-components/src/components/CacheProvider/NodeCacheProvider.tsx +++ b/react-components/src/components/CacheProvider/NodeCacheProvider.tsx @@ -14,7 +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 { AnyIntersection } from '@cognite/reveal'; +import { type AnyIntersection } from '@cognite/reveal'; export type FdmNodeCacheContent = { cache: FdmNodeCache; diff --git a/react-components/src/components/CacheProvider/PointCloudAnnotationCacheProvider.tsx b/react-components/src/components/CacheProvider/PointCloudAnnotationCacheProvider.tsx index 76b0e4b8f74..731af7b9a21 100644 --- a/react-components/src/components/CacheProvider/PointCloudAnnotationCacheProvider.tsx +++ b/react-components/src/components/CacheProvider/PointCloudAnnotationCacheProvider.tsx @@ -14,7 +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 { AnyIntersection } from '@cognite/reveal'; +import { type AnyIntersection } from '@cognite/reveal'; export type PointCloudAnnotationCacheContextContent = { cache: PointCloudAnnotationCache; diff --git a/react-components/src/hooks/useClickedNode.tsx b/react-components/src/hooks/useClickedNode.tsx index 12674e0282b..b9570d98d6c 100644 --- a/react-components/src/hooks/useClickedNode.tsx +++ b/react-components/src/hooks/useClickedNode.tsx @@ -5,7 +5,7 @@ import { type PointerEventData, type Image360AnnotationIntersection, - AnyIntersection + type AnyIntersection } from '@cognite/reveal'; import { useEffect, useState } from 'react'; import { useFdm3dNodeDataPromises } from '../components/CacheProvider/NodeCacheProvider';