fix(react-components): improve asset mapping cache mechanism and refactoring to stabilize rule threshold styling and switching

react-components/src/components/CacheProvider/AssetMappingCacheProvider.tsx → react-components/src/components/CacheProvider/AssetMappingAndNode3DCacheProvider.tsx

@@ -6,9 +6,9 @@ import { type ReactElement, type ReactNode, createContext, useContext, useMemo }
 import { type CadModelOptions } from '../Reveal3DResources/types';
 import {
   type AssetMapping,
-  AssetMappingCache,
+  AssetMappingAndNode3DCache,
   type NodeAssetMappingResult
-} from './AssetMappingCache';
+} from './AssetMappingAndNode3DCache';
 import { type UseQueryResult, useQuery } from '@tanstack/react-query';
 import { type CogniteInternalId } from '@cognite/sdk';
 import { useSDK } from '../RevealCanvas/SDKProvider';
@@ -17,31 +17,80 @@ import { type ModelRevisionId, type ModelRevisionAssetNodesResult } from './type
 import { fetchAncestorNodesForTreeIndex } from './requests';
 import { type AnyIntersection } from '@cognite/reveal';
 
-export type AssetMappingCacheContent = {
-  cache: AssetMappingCache;
+export type AssetMappingAndNode3DCacheContent = {
+  cache: AssetMappingAndNode3DCache;
 };
 
 export type ModelWithAssetMappings = {
   model: CadModelOptions;
   assetMappings: AssetMapping[];
 };
 
-const AssetMappingCacheContext = createContext<AssetMappingCacheContent | undefined>(undefined);
+const AssetMappingAndNode3DCacheContext = createContext<
+  AssetMappingAndNode3DCacheContent | undefined
+>(undefined);
 
-const useAssetMappingCache = (): AssetMappingCache => {
-  const content = useContext(AssetMappingCacheContext);
+const useAssetMappingAndNode3DCache = (): AssetMappingAndNode3DCache => {
+  const content = useContext(AssetMappingAndNode3DCacheContext);
 
   if (content === undefined) {
-    throw Error('Must use useAssetMappingCache inside a AssetMappingCacheContext');
+    throw Error('Must use useAssetMappingAndNode3DCache inside a AssetMappingCacheContext');
   }
 
   return content.cache;
 };
 
+export const useGenerateNode3DCache = (
+  cadModelOptions: CadModelOptions[],
+  assetMappings: ModelWithAssetMappings[] | undefined
+): void => {
+  const assetMappingAndNode3DCache = useAssetMappingAndNode3DCache();
+
+  useMemo(() => {
+    cadModelOptions.forEach(async ({ modelId, revisionId }) => {
+      const assetMapping = assetMappings?.filter(
+        (item) => item.model.modelId === modelId && item.model.revisionId === revisionId
+      );
+      const nodeIdsFromAssetMappings = assetMapping?.flatMap((item) =>
+        item.assetMappings.map((mapping) => mapping.nodeId)
+      );
+
+      if (nodeIdsFromAssetMappings === undefined || nodeIdsFromAssetMappings.length === 0) return;
+
+      await assetMappingAndNode3DCache.generateNode3DCachePerItem(
+        modelId,
+        revisionId,
+        nodeIdsFromAssetMappings
+      );
+    });
+  }, [cadModelOptions, assetMappings]);
+};
+
+export const useGenerateAssetMappingCachePerItemFromModelCache = (
+  cadModelOptions: CadModelOptions[],
+  assetMappings: ModelWithAssetMappings[] | undefined
+): void => {
+  const assetMappingAndNode3DCache = useAssetMappingAndNode3DCache();
+  useMemo(() => {
+    cadModelOptions.forEach(async ({ modelId, revisionId }) => {
+      const assetMapping = assetMappings?.filter(
+        (item) => item.model.modelId === modelId && item.model.revisionId === revisionId
+      );
+      if (assetMapping !== undefined && assetMapping.length > 0) {
+        await assetMappingAndNode3DCache.generateAssetMappingsCachePerItemFromModelCache(
+          modelId,
+          revisionId,
+          assetMapping
+        );
+      }
+    });
+  }, [cadModelOptions, assetMappings]);
+};
+
 export const useAssetMappedNodesForRevisions = (
   cadModels: CadModelOptions[]
 ): UseQueryResult<ModelWithAssetMappings[]> => {
-  const assetMappingCache = useAssetMappingCache();
+  const assetMappingAndNode3DCache = useAssetMappingAndNode3DCache();
 
   return useQuery({
     queryKey: [
@@ -53,7 +102,7 @@ export const useAssetMappedNodesForRevisions = (
     queryFn: async () => {
       const fetchPromises = cadModels.map(
         async (model) =>
-          await assetMappingCache
+          await assetMappingAndNode3DCache
             .getAssetMappingsForModel(model.modelId, model.revisionId)
             .then((assetMappings) => ({ model, assetMappings }))
       );
@@ -68,7 +117,7 @@ export const useNodesForAssets = (
   models: ModelRevisionId[],
   assetIds: CogniteInternalId[]
 ): UseQueryResult<ModelRevisionAssetNodesResult[]> => {
-  const assetMappingCache = useAssetMappingCache();
+  const assetMappingAndNode3DCache = useAssetMappingAndNode3DCache();
 
   return useQuery({
     queryKey: [
@@ -80,7 +129,7 @@ export const useNodesForAssets = (
     ],
     queryFn: async () => {
       const modelAndNodeMapPromises = models.map(async (model) => {
-        const nodeMap = await assetMappingCache.getNodesForAssetIds(
+        const nodeMap = await assetMappingAndNode3DCache.getNodesForAssetIds(
           model.modelId,
           model.revisionId,
           assetIds
@@ -98,7 +147,7 @@ export const useNodesForAssets = (
 export const useAssetMappingForTreeIndex = (
   intersection: AnyIntersection | undefined
 ): UseQueryResult<NodeAssetMappingResult> => {
-  const assetMappingCache = useAssetMappingCache();
+  const assetMappingAndNode3DCache = useAssetMappingAndNode3DCache();
   const cdfClient = useSDK();
 
   const isCadModel = intersection?.type === 'cad';
@@ -130,7 +179,7 @@ export const useAssetMappingForTreeIndex = (
         cdfClient
       );
 
-      return await assetMappingCache.getAssetMappingsForLowestAncestor(
+      return await assetMappingAndNode3DCache.getAssetMappingsForLowestAncestor(
         modelId,
         revisionId,
         ancestors
@@ -140,13 +189,17 @@ export const useAssetMappingForTreeIndex = (
   });
 };
 
-export function AssetMappingCacheProvider({ children }: { children?: ReactNode }): ReactElement {
+export function AssetMappingAndNode3DCacheProvider({
+  children
+}: {
+  children?: ReactNode;
+}): ReactElement {
   const cdfClient = useSDK();
   const revealKeepAliveData = useRevealKeepAlive();
 
   const fdmCache = useMemo(() => {
     const cache =
-      revealKeepAliveData?.assetMappingCache.current ?? new AssetMappingCache(cdfClient);
+      revealKeepAliveData?.assetMappingCache.current ?? new AssetMappingAndNode3DCache(cdfClient);
 
     const isRevealKeepAliveContextProvided = revealKeepAliveData !== undefined;
     if (isRevealKeepAliveContextProvided) {
@@ -157,8 +210,8 @@ export function AssetMappingCacheProvider({ children }: { children?: ReactNode }
   }, [cdfClient]);
 
   return (
-    <AssetMappingCacheContext.Provider value={{ cache: fdmCache }}>
+    <AssetMappingAndNode3DCacheContext.Provider value={{ cache: fdmCache }}>
       {children}
-    </AssetMappingCacheContext.Provider>
+    </AssetMappingAndNode3DCacheContext.Provider>
   );
 }