fix(react-components): optimize styled node collection diff check on re-render

react-components/src/components/CadModelContainer/useApplyCadModelStyling.tsx

@@ -8,7 +8,8 @@ import {
   type NodeCollection,
   NodeIdNodeCollection,
   TreeIndexNodeCollection,
-  type Cognite3DViewer
+  type Cognite3DViewer,
+  type IndexSet
 } from '@cognite/reveal';
 import { useEffect } from 'react';
 import { useSDK } from '../RevealContainer/SDKProvider';
@@ -22,7 +23,7 @@ export type NodeStylingGroup = {
 };
 
 export type TreeIndexStylingGroup = {
-  treeIndices: number[];
+  treeIndexSet: IndexSet;
   style?: NodeAppearance;
 };
 
@@ -71,8 +72,8 @@ async function applyStyling(
 
     if (stylingGroup.style === undefined) continue;
 
-    if ('treeIndices' in stylingGroup) {
-      const nodes = new TreeIndexNodeCollection(stylingGroup.treeIndices);
+    if ('treeIndexSet' in stylingGroup) {
+      const nodes = new TreeIndexNodeCollection(stylingGroup.treeIndexSet);
       model.assignStyledNodeCollection(nodes, stylingGroup.style);
     }
 
@@ -135,17 +136,19 @@ async function isEqualOrUpdated(
   function updateIfTreeIndexCollection(): void {
     if (
       !(collection.nodeCollection instanceof TreeIndexNodeCollection) ||
-      !('treeIndices' in group)
+      !('treeIndexSet' in group)
     ) {
       return;
     }
-    const compareCollection = new TreeIndexNodeCollection(group.treeIndices);
+
+    const compareCollection = new TreeIndexNodeCollection(group.treeIndexSet);
+
     const isEqualContent = isEqualTreeIndex(collection.nodeCollection, compareCollection);
 
     if (isEqualContent) {
       return;
     }
-    collection.nodeCollection.updateSet(group.treeIndices);
+    collection.nodeCollection.updateSet(group.treeIndexSet);
   }
 }
 

react-components/src/hooks/useCalculateModelsStyling.tsx

@@ -6,19 +6,15 @@ import {
   type DefaultResourceStyling,
   type FdmAssetStylingGroup
 } from '../components/Reveal3DResources/types';
-import { type NodeAppearance } from '@cognite/reveal';
+import { NumericRange, type NodeAppearance, IndexSet } from '@cognite/reveal';
 import { type ThreeDModelMappings } from './types';
 import { type Node3D, type CogniteExternalId } from '@cognite/sdk';
 import {
   useFdmAssetMappings,
   useMappedEdgesForRevisions
 } from '../components/NodeCacheProvider/NodeCacheProvider';
 import { useMemo } from 'react';
-import {
-  type NodeId,
-  type FdmEdgeWithNode,
-  type TreeIndex
-} from '../components/NodeCacheProvider/types';
+import { type NodeId, type FdmEdgeWithNode } from '../components/NodeCacheProvider/types';
 import {
   type NodeStylingGroup,
   type TreeIndexStylingGroup
@@ -154,11 +150,13 @@ function getMappedStyleGroup(
   edges: FdmEdgeWithNode[],
   mapped: NodeAppearance
 ): TreeIndexStylingGroup {
-  const treeIndices = edges.flatMap((edge) => {
-    const treeIndices = getNodeSubtreeIndices(edge.cadNode);
-    return treeIndices;
+  const indexSet = new IndexSet();
+  edges.forEach((edge) => {
+    const treeIndexRange = getNodeSubtreeNumericRange(edge.cadNode);
+    indexSet.addRange(treeIndexRange);
   });
-  return { treeIndices, style: mapped };
+
+  return { treeIndexSet: indexSet, style: mapped };
 }
 
 function calculateCadModelStyling(
@@ -176,18 +174,24 @@ function calculateCadModelStyling(
         .map((uniqueId) => modelMappings.get(uniqueId.externalId))
         .filter((nodeMap): nodeMap is Map<NodeId, Node3D> => nodeMap !== undefined)
         .map((nodeMap) => [...nodeMap.values()]);
+
+      const indexSet = new IndexSet();
+      modelMappedNodeLists.forEach((nodes) => {
+        nodes.forEach((n) => {
+          indexSet.addRange(getNodeSubtreeNumericRange(n));
+        });
+      });
+
       return {
         style: resourcesGroup.style.cad,
-        treeIndices: modelMappedNodeLists.flatMap((nodes) =>
-          nodes.flatMap((n) => getNodeSubtreeIndices(n))
-        )
+        treeIndexSet: indexSet
       };
     })
-    .filter((group) => group.treeIndices.length > 0);
+    .filter((group) => group.treeIndexSet.count > 0);
 }
 
-function getNodeSubtreeIndices(node: Node3D): TreeIndex[] {
-  return [...Array(node.subtreeSize).keys()].map((i) => i + node.treeIndex);
+function getNodeSubtreeNumericRange(node: Node3D): NumericRange {
+  return new NumericRange(node.treeIndex, node.subtreeSize);
 }
 
 function getModelMappings(

react-components/src/hooks/useClickedNode.tsx

@@ -69,12 +69,13 @@ export const useClickedNodeData = (): ClickedNodeData | undefined => {
         return;
       }
 
+      setClickedNodeData({
+        intersection: cadIntersection
+      });
+
       const cadAndFdmNodes = await promises.cadAndFdmNodesPromise;
 
       if (cadAndFdmNodes === undefined || cadAndFdmNodes.fdmIds.length === 0) {
-        setClickedNodeData({
-          intersection: cadIntersection
-        });
         return;
       }