feat(react-components): distinguish whether clicked node data is pend…

…ing or empty, bump 0.73.6 (#4934)

* fix(react-components): remove visibility check for poi section cmd

* feat(react-components): return null on pending click result

* chore: simplify normalization

* chore: move inner function

* chore: lint fix

* chore: correct useClickedNodeData

* chore: bump to 0.73.6

react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.73.5",
+  "version": "0.73.6",
   "exports": {
     ".": {
       "import": "./dist/index.js",

react-components/src/architecture/concrete/pointsOfInterest/PointsOfInterestSectionCommand.ts

@@ -6,10 +6,6 @@ import { SectionCommand } from '../../base/commands/SectionCommand';
 import { type TranslationInput } from '../../base/utilities/TranslateInput';
 
 export class PointsOfInterestSectionCommand extends SectionCommand {
-  public override get isVisible(): boolean {
-    return this.renderTarget.get360ImageCollections().next().value !== undefined;
-  }
-
   public override get tooltip(): TranslationInput {
     return { key: 'POINT_OF_INTEREST_PLURAL' };
   }

react-components/src/architecture/concrete/pointsOfInterest/index.ts

@@ -2,4 +2,5 @@
  * Copyright 2024 Cognite AS
  */
 export { PointsOfInterestDomainObject } from './PointsOfInterestDomainObject';
+export { PointsOfInterestView } from './PointsOfInterestView';
 export { isPointsOfInterestIntersection, type PointOfInterest } from './types';

react-components/src/hooks/useClickedNode.tsx

@@ -7,7 +7,7 @@ import {
   type Image360AnnotationIntersection,
   type AnyIntersection
 } from '@cognite/reveal';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { type CogniteInternalId, type Node3D } from '@cognite/sdk';
 import { type FdmNodeDataPromises } from '../components/CacheProvider/types';
 import { type NodeAssetMappingResult } from '../components/CacheProvider/AssetMappingAndNode3DCache';
@@ -22,6 +22,7 @@ import {
   usePointCloudFdmVolumeMappingForIntersection
 } from '../query/core-dm/usePointCloudVolumeMappingForAssetInstances';
 import { useAssetMappingForTreeIndex, useFdm3dNodeDataPromises } from './cad';
+import { type UseQueryResult } from '@tanstack/react-query';
 
 export type AssetMappingDataResult = {
   cadNode: Node3D;
@@ -31,16 +32,40 @@ export type AssetMappingDataResult = {
 export type FdmNodeDataResult = {
   fdmNodes: DmsUniqueIdentifier[];
   cadNode: Node3D;
-  views?: Source[][];
+  /**
+   * A value of `undefined` means it's not yet finished evaluating.
+   * A value of `null` means there was no result
+   */
+  views?: Source[][] | null;
 };
 
 export type ClickedNodeData = {
   mouseButton?: MOUSE;
   position?: Vector2;
-  fdmResult?: FdmNodeDataResult;
-  assetMappingResult?: AssetMappingDataResult;
-  pointCloudAnnotationMappingResult?: PointCloudAnnotationMappedAssetData[];
-  pointCloudFdmVolumeMappingResult?: PointCloudFdmVolumeMappingWithViews[];
+
+  /**
+   * A value of `undefined` means it's not yet finished evaluating.
+   * A value of `null` means there was no result
+   */
+  fdmResult?: FdmNodeDataResult | null;
+
+  /**
+   * A value of `undefined` means it's not yet finished evaluating.
+   * A value of `null` means there was no result
+   */
+  assetMappingResult?: AssetMappingDataResult | null;
+
+  /**
+   * A value of `undefined` means it's not yet finished evaluating.
+   * A value of `null` means there was no result
+   */
+  pointCloudAnnotationMappingResult?: PointCloudAnnotationMappedAssetData[] | null;
+
+  /**
+   * A value of `undefined` means it's not yet finished evaluating.
+   * A value of `null` means there was no result
+   */
+  pointCloudFdmVolumeMappingResult?: PointCloudFdmVolumeMappingWithViews[] | null;
   intersection: AnyIntersection | Image360AnnotationIntersection;
 };
 
@@ -117,10 +142,10 @@ export const useClickedNodeData = (options?: {
 
   const { data: assetMappingResult } = useAssetMappingForTreeIndex(intersection);
 
-  const { data: pointCloudAnnotationMappingResult } =
+  const pointCloudAnnotationMappingResult =
     usePointCloudAnnotationMappingForIntersection(intersection);
 
-  const { data: pointCloudFdmVolumeMappingResult } =
+  const pointCloudFdmVolumeMappingResult =
     usePointCloudFdmVolumeMappingForIntersection(intersection);
 
   return useCombinedClickedNodeData(
@@ -139,51 +164,62 @@ const useCombinedClickedNodeData = (
   position: Vector2 | undefined,
   fdmPromises: FdmNodeDataPromises | undefined,
   assetMappings: NodeAssetMappingResult | undefined,
-  pointCloudAssetMappings: PointCloudAnnotationMappedAssetData[] | undefined,
-  pointCloudFdmVolumeMappings: PointCloudFdmVolumeMappingWithViews[] | undefined,
+  pointCloudAssetMappingsResult: UseQueryResult<PointCloudAnnotationMappedAssetData[]>,
+  pointCloudFdmVolumeMappingsResult: UseQueryResult<PointCloudFdmVolumeMappingWithViews[]>,
   intersection: AnyIntersection | Image360AnnotationIntersection | undefined
 ): ClickedNodeData | undefined => {
-  const [clickedNodeData, setClickedNodeData] = useState<ClickedNodeData | undefined>();
   const fdmData = useFdmData(fdmPromises);
 
-  useEffect(() => {
+  return useMemo(() => {
     if (intersection === undefined) {
-      setClickedNodeData(undefined);
-      return;
+      return undefined;
     }
 
     const assetMappingData =
-      assetMappings?.node === undefined
+      assetMappings === undefined
         ? undefined
-        : {
-            cadNode: assetMappings.node,
-            assetIds: assetMappings.mappings.map((mapping) => mapping.assetId)
-          };
+        : assetMappings.node === undefined
+          ? null
+          : {
+              cadNode: assetMappings.node,
+              assetIds: assetMappings.mappings.map((mapping) => mapping.assetId)
+            };
+
+    const pointCloudAssetMappings = normalizeListDataResult(pointCloudAssetMappingsResult);
+    const pointCloudFdmVolumeMappings = normalizeListDataResult(pointCloudFdmVolumeMappingsResult);
 
-    setClickedNodeData({
+    return {
       mouseButton,
       position,
       fdmResult: fdmData,
       assetMappingResult: assetMappingData,
       pointCloudAnnotationMappingResult: pointCloudAssetMappings,
       pointCloudFdmVolumeMappingResult: pointCloudFdmVolumeMappings,
       intersection
-    });
+    };
   }, [
     intersection,
     fdmData,
     assetMappings?.node,
-    pointCloudAssetMappings,
-    pointCloudFdmVolumeMappings
+    pointCloudAssetMappingsResult.data,
+    pointCloudAssetMappingsResult.isFetching,
+    pointCloudFdmVolumeMappingsResult.data,
+    pointCloudFdmVolumeMappingsResult.isFetching
   ]);
 
-  return clickedNodeData;
+  function normalizeListDataResult<T>(result: UseQueryResult<T[]>): T[] | undefined | null {
+    return result.isFetching
+      ? undefined
+      : result.data === undefined || result.data.length === 0
+        ? null
+        : result.data;
+  }
 };
 
 const useFdmData = (
   fdmPromises: FdmNodeDataPromises | undefined
-): FdmNodeDataResult | undefined => {
-  const [fdmData, setFdmData] = useState<FdmNodeDataResult | undefined>();
+): FdmNodeDataResult | undefined | null => {
+  const [fdmData, setFdmData] = useState<FdmNodeDataResult | undefined | null>();
 
   useEffect(() => {
     if (fdmPromises === undefined) {
@@ -197,18 +233,24 @@ const useFdmData = (
       const cadAndFdmNodes = await promises.cadAndFdmNodesPromise;
 
       if (cadAndFdmNodes === undefined || cadAndFdmNodes.fdmIds.length === 0) {
-        setFdmData(undefined);
+        setFdmData(null);
         return;
       }
 
       setFdmData({
         fdmNodes: cadAndFdmNodes.fdmIds,
-        cadNode: cadAndFdmNodes.cadNode
+        cadNode: cadAndFdmNodes.cadNode,
+        views: undefined
       });
 
       const views = await promises.viewsPromise;
 
       if (views === undefined || views.length === 0) {
+        setFdmData({
+          fdmNodes: cadAndFdmNodes.fdmIds,
+          cadNode: cadAndFdmNodes.cadNode,
+          views: null
+        });
         return;
       }
 

react-components/stories/HighlightNode.stories.tsx

@@ -83,7 +83,7 @@ const StoryContent = ({ resources }: { resources: AddResourceOptions[] }): React
   const nodeData = useClickedNodeData();
 
   useEffect(() => {
-    if (nodeData?.fdmResult !== undefined) {
+    if (nodeData?.fdmResult !== undefined && nodeData?.fdmResult !== null) {
       setStylingGroups([
         {
           fdmAssetExternalIds: [
@@ -100,7 +100,10 @@ const StoryContent = ({ resources }: { resources: AddResourceOptions[] }): React
         nodeData.fdmResult.fdmNodes[0].externalId,
         nodeData.fdmResult.fdmNodes[0].space
       );
-    } else if (nodeData?.assetMappingResult !== undefined) {
+    } else if (
+      nodeData?.assetMappingResult !== undefined &&
+      nodeData?.assetMappingResult !== null
+    ) {
       setStylingGroups([
         {
           assetIds: nodeData.assetMappingResult.assetIds,
@@ -112,7 +115,10 @@ const StoryContent = ({ resources }: { resources: AddResourceOptions[] }): React
         (nodeData.intersection as CadIntersection).model.revisionId,
         nodeData.assetMappingResult.cadNode.id
       );
-    } else if (nodeData?.pointCloudAnnotationMappingResult !== undefined) {
+    } else if (
+      nodeData?.pointCloudAnnotationMappingResult !== undefined &&
+      nodeData.pointCloudAnnotationMappingResult !== null
+    ) {
       setStylingGroups([
         {
           assetIds: [nodeData.pointCloudAnnotationMappingResult[0].asset.id],