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

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

@@ -38,6 +38,53 @@ const useAssetMappingCache = (): AssetMappingCache => {
   return content.cache;
 };
 
+export const useGenerateNode3DCache = async (
+  cadModelOptions: CadModelOptions[],
+  assetMappings: ModelWithAssetMappings[] | undefined
+): Promise<void> => {
+  const assetMappingCache = useAssetMappingCache();
+
+  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 assetMappingCache.generateNode3DCachePerItem(
+        modelId,
+        revisionId,
+        nodeIdsFromAssetMappings
+      );
+    });
+  }, [cadModelOptions, assetMappings]);
+};
+
+export const useGenerateAssetMappingCachePerItemFromModelCache = async (
+  cadModelOptions: CadModelOptions[],
+  assetMappings: ModelWithAssetMappings[] | undefined
+): Promise<void> => {
+  const assetMappingCache = useAssetMappingCache();
+  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 assetMappingCache.generateAssetMappingsCachePerItemFromModelCache(
+          modelId,
+          revisionId,
+          assetMapping
+        );
+      }
+    });
+  }, [cadModelOptions, assetMappings]);
+};
+
 export const useAssetMappedNodesForRevisions = (
   cadModels: CadModelOptions[]
 ): UseQueryResult<ModelWithAssetMappings[]> => {

react-components/src/components/CacheProvider/types.ts

@@ -6,7 +6,8 @@ import {
   type AnnotationModel,
   type AnnotationsBoundingVolume,
   type Node3D,
-  type AnnotationsCogniteAnnotationTypesImagesAssetLink
+  type AnnotationsCogniteAnnotationTypesImagesAssetLink,
+  type AssetMapping3D
 } from '@cognite/sdk';
 import { type DmsUniqueIdentifier, type Source, type EdgeItem } from '../../utilities/FdmSDK';
 import { type InModel3dEdgeProperties } from '../../utilities/globalDataModels';
@@ -64,3 +65,13 @@ export type Image360AnnotationAssetInfo = {
 };
 
 export type AnnotationId = number;
+
+export type ChunkInCacheTypes = {
+  chunkInCache: Array<Required<AssetMapping3D>>;
+  chunkNotInCache: number[];
+};
+
+export type ChunkInCacheTypesNode3D = {
+  chunkInCache: Node3D[];
+  chunkNotInCache: number[];
+};

react-components/src/components/Reveal3DResources/Reveal3DResources.tsx

@@ -31,16 +31,23 @@ import {
 import { type ImageCollectionModelStyling } from '../Image360CollectionContainer/useApply360AnnotationStyling';
 import { is360ImageAddOptions } from './typeGuards';
 import { useRemoveNonReferencedModels } from './useRemoveNonReferencedModels';
+import {
+  useAssetMappedNodesForRevisions,
+  useGenerateAssetMappingCachePerItemFromModelCache,
+  useGenerateNode3DCache
+} from '../CacheProvider/AssetMappingCacheProvider';
 
 export const Reveal3DResources = ({
   resources,
   defaultResourceStyling,
   instanceStyling,
   onResourcesAdded,
   onResourceLoadError,
+  onCallback,
   image360Settings
 }: Reveal3DResourcesProps): ReactElement => {
   const viewer = useReveal();
+
   const [reveal3DModels, setReveal3DModels] = useState<TypedReveal3DModel[]>([]);
 
   const numModelsLoaded = useRef(0);
@@ -62,6 +69,11 @@ export const Reveal3DResources = ({
     [reveal3DModels]
   );
 
+  const { data: assetMappings } = useAssetMappedNodesForRevisions(cadModelOptions);
+
+  void useGenerateAssetMappingCachePerItemFromModelCache(cadModelOptions, assetMappings);
+  void useGenerateNode3DCache(cadModelOptions, assetMappings);
+
   const pointCloudModelOptions = useMemo(
     () =>
       reveal3DModels.filter(
@@ -70,7 +82,7 @@ export const Reveal3DResources = ({
     [reveal3DModels]
   );
 
-  const styledCadModelOptions = useCalculateCadStyling(
+  const { styledModels: styledCadModelOptions, modelMappingsIsFetched } = useCalculateCadStyling(
     cadModelOptions,
     instanceStyling?.filter(isCadAssetMappingStylingGroup) ?? EMPTY_ARRAY,
     defaultResourceStyling
@@ -112,6 +124,12 @@ export const Reveal3DResources = ({
     }
   };
 
+  useEffect(() => {
+    if (modelMappingsIsFetched && onCallback !== undefined) {
+      onCallback(modelMappingsIsFetched);
+    }
+  }, [modelMappingsIsFetched, onCallback]);
+
   return (
     <>
       {styledCadModelOptions.map(({ styleGroups, model }, index) => {

react-components/src/components/Reveal3DResources/types.ts

@@ -108,4 +108,5 @@ export type CommonResourceContainerProps = {
   image360Settings?: CommonImage360Settings;
   onResourcesAdded?: () => void;
   onResourceLoadError?: (failedResource: AddResourceOptions, error: any) => void;
+  onCallback?: (data?: any) => void;
 };

react-components/src/components/RevealToolbar/RuleBasedOutputsButton.tsx

@@ -22,18 +22,24 @@ import { RuleBasedSelectionItem } from '../RuleBasedOutputs/components/RuleBased
 type RuleBasedOutputsButtonProps = {
   onRuleSetStylingChanged?: (stylings: AssetStylingGroup[] | undefined) => void;
   onRuleSetSelectedChanged?: (ruleSet: RuleAndEnabled | undefined) => void;
+  onRuleSetStylingLoaded?: (callback: (isLoaded: boolean) => void) => void;
 };
 export const RuleBasedOutputsButton = ({
   onRuleSetStylingChanged,
-  onRuleSetSelectedChanged
+  onRuleSetSelectedChanged,
+  onRuleSetStylingLoaded
 }: RuleBasedOutputsButtonProps): ReactElement => {
   const [currentRuleSetEnabled, setCurrentRuleSetEnabled] = useState<RuleAndEnabled>();
   const [emptyRuleSelected, setEmptyRuleSelected] = useState<EmptyRuleForSelection>();
   const [ruleInstances, setRuleInstances] = useState<RuleAndEnabled[] | undefined>();
   const { t } = useTranslation();
   const models = use3dModels();
   const cadModels = models.filter((model) => model.type === 'cad') as CadModelOptions[];
-  const { isLoading } = useAssetMappedNodesForRevisions(cadModels);
+
+  const { isLoading: isAssetMappingsLoading } = useAssetMappedNodesForRevisions(cadModels);
+  const [isRuleLoading, setIsRuleLoading] = useState(false);
+
+  const [newRuleSetEnabled, setNewRuleSetEnabled] = useState<RuleAndEnabled>();
 
   const ruleInstancesResult = useFetchRuleInstances();
 
@@ -43,6 +49,10 @@ export const RuleBasedOutputsButton = ({
     setRuleInstances(ruleInstancesResult.data);
   }, [ruleInstancesResult]);
 
+  useEffect(() => {
+    setCurrentRuleSetEnabled(newRuleSetEnabled);
+  }, [newRuleSetEnabled]);
+
   const onChange = useCallback(
     (data: string | undefined): void => {
       ruleInstances?.forEach((item) => {
@@ -72,10 +82,10 @@ export const RuleBasedOutputsButton = ({
         if (onRuleSetStylingChanged !== undefined) onRuleSetStylingChanged(undefined);
       }
 
-      if (onRuleSetSelectedChanged !== undefined) onRuleSetSelectedChanged(selectedRule);
+      setIsRuleLoading(true);
 
       setEmptyRuleSelected(emptySelection);
-      setCurrentRuleSetEnabled(selectedRule);
+      setNewRuleSetEnabled(selectedRule);
     },
     [ruleInstances, onRuleSetStylingChanged, onRuleSetSelectedChanged]
   );
@@ -87,6 +97,12 @@ export const RuleBasedOutputsButton = ({
     if (onRuleSetStylingChanged !== undefined) onRuleSetStylingChanged(assetStylingGroups);
   };
 
+  const callbackWhenIsLoaded = (isLoaded: boolean): void => {
+    setIsRuleLoading(!isLoaded);
+  };
+
+  if (onRuleSetStylingLoaded !== undefined) onRuleSetStylingLoaded(callbackWhenIsLoaded);
+
   if (ruleInstances === undefined || ruleInstances.length === 0) {
     return <></>;
   }
@@ -99,7 +115,7 @@ export const RuleBasedOutputsButton = ({
         appendTo={document.body}>
         <Dropdown
           placement="right-start"
-          disabled={isLoading}
+          disabled={isAssetMappingsLoading}
           content={
             <Menu
               style={{
@@ -114,6 +130,8 @@ export const RuleBasedOutputsButton = ({
                 label={t('RULESET_NO_SELECTION', 'No RuleSet selected')}
                 checked={currentRuleSetEnabled === undefined || emptyRuleSelected?.isEnabled}
                 onChange={onChange}
+                isLoading={isRuleLoading}
+                isEmptyRuleItem={true}
               />
               {ruleInstances?.map((item) => (
                 <RuleBasedSelectionItem
@@ -122,11 +140,18 @@ export const RuleBasedOutputsButton = ({
                   label={item?.rule?.properties.name}
                   checked={item?.isEnabled}
                   onChange={onChange}
+                  isLoading={isRuleLoading}
+                  isEmptyRuleItem={false}
                 />
               ))}
             </Menu>
           }>
-          <Button icon="ColorPalette" aria-label="Select RuleSet" type="ghost" />
+          <Button
+            disabled={isAssetMappingsLoading}
+            icon="ColorPalette"
+            aria-label="Select RuleSet"
+            type="ghost"
+          />
         </Dropdown>
       </CogsTooltip>
       {ruleInstances !== undefined && ruleInstances?.length > 0 && (