Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
May 28, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e3960d2
fix(react-components): use "any intersection" in useClickedNode
haakonflatval-cognite May 27, 2024
49883da
chore: rewrite variable assignments slightly
haakonflatval-cognite May 28, 2024
84790ba
chore: lint fix
haakonflatval-cognite May 28, 2024
58c1cdf
Merge master into hflatval/use-any-intersection-in-click
cognite-bulldozer[bot] May 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 9 additions & 10 deletions react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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',
Expand Down
17 changes: 9 additions & 8 deletions react-components/src/components/CacheProvider/NodeCacheProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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: [
Expand Down
16 changes: 12 additions & 4 deletions react-components/src/components/CacheProvider/PointCloudAnnotationCacheProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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',
Expand All @@ -161,7 +169,7 @@ export const usePointCloudAnnotationMappingForAssetId = (
return result ?? EMPTY_ARRAY;
},
staleTime: Infinity,
enabled: assetId !== undefined
enabled: isPointCloudIntersection && assetId !== undefined
});
};

Expand Down
52 changes: 18 additions & 34 deletions react-components/src/hooks/useClickedNode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';

Expand All @@ -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
Expand All @@ -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(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the only interesting line 😅 The rest is just refactoring

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);
Expand All @@ -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,
Expand All @@ -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);
Expand Down
Loading